progress on Dropdow using Elix lib

package-lock.json

@@ -9074,6 +9074,12 @@
       "integrity": "sha1-2wQ1IcldfjA/2PNFvtwzSc+wcp4=",
       "dev": true
     },
+    "elix": {
+      "version": "14.1.1",
+      "resolved": "https://registry.npmjs.org/elix/-/elix-14.1.1.tgz",
+      "integrity": "sha512-o+6YAp1qhn0Itz2LzEAQtzi9se43eiXdrdSVvXpTrj3bsp4p/c1bY6VVeYfdaJy9a8QRnMkH9WrLGdFbRcFsuA==",
+      "dev": true
+    },
     "elliptic": {
       "version": "6.5.3",
       "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz",

package.json

@@ -170,6 +170,7 @@
     "cypress-multi-reporters": "1.4.0",
     "cypress-plugin-snapshots": "1.4.4",
     "deparam": "git+https://github.com/brettz9/deparam.git#updates",
+    "elix": "^14.1.1",
     "es-dev-commonjs-transformer": "0.2.0",
     "es-dev-server": "1.57.8",
     "es-dev-server-rollup": "0.0.8",

src/editor/components/index.js

@@ -1,3 +1,4 @@
 import './seButton.js';
 import './seFlyingButton.js';
 import './seExplorerButton.js';
+import './seDropdown.js';

src/editor/components/seDropdown.js

@@ -0,0 +1,122 @@
+/* eslint-disable node/no-unpublished-import */
+import ListComboBox from 'elix/define/ListComboBox.js';
+import SpinBox from 'elix/define/NumberSpinBox.js';
+import {defaultState, template} from 'elix/src/base/internal.js';
+import {templateFrom} from 'elix/src/core/htmlLiterals.js';
+
+class MyCombo extends ListComboBox {
+  get [defaultState] () {
+    return Object.assign(super[defaultState], {
+      inputPartType: SpinBox
+    });
+  }
+  get [template] () {
+    const result = super[template];
+    result.content.append(
+      templateFrom.html`
+        <style>
+        ::part(input) {
+          width: 30px;
+        }
+        </style>
+      `.content
+    );
+    return result;
+  }
+}
+
+customElements.define('my-combo', MyCombo);
+
+const mytemplate = document.createElement('template');
+mytemplate.innerHTML = `
+  <style>
+  .toolset {
+    float: left;
+    margin-top: 4px;
+  }
+  .icon {
+    top: 4px;
+    position: relative;
+    }
+  ::slotted(*) {
+    padding: 4px;
+    background: #E8E8E8;
+    border: 1px solid #B0B0B0;
+    margin: 0 0 -1px 0;
+    line-height: 16px;
+  }
+  my-combo::part(popup) {
+    width: 180px;
+  }
+  </style>
+  <span class="toolset" title="title">
+    <img  class="icon" src="./images/logo.svg" alt="icon" width="18" height="18">
+    <my-combo>
+      <slot></slot>
+    </my-combo>
+  </span>
+`;
+/**
+ * @class Dropdown
+ */
+export class Dropdown extends HTMLElement {
+  /**
+    * @function constructor
+    */
+  constructor () {
+    super();
+    // create the shadowDom and insert the template
+    this._shadowRoot = this.attachShadow({mode: 'open'});
+    this._shadowRoot.appendChild(mytemplate.content.cloneNode(true));
+    this.$dropdown = this._shadowRoot.querySelector('my-combo');
+    this.$img = this._shadowRoot.querySelector('img');
+    this.$span = this._shadowRoot.querySelector('span');
+    // we retrieve all elements added in the slot (i.e. se-buttons)
+    // this.$elements = this.$menu.lastElementChild.assignedElements();
+  }
+  /**
+   * @function observedAttributes
+   * @returns {any} observed
+   */
+  static get observedAttributes () {
+    return ['title', 'src'];
+  }
+  /**
+   * @function attributeChangedCallback
+   * @param {string} name
+   * @param {string} oldValue
+   * @param {string} newValue
+   * @returns {void}
+   */
+  attributeChangedCallback (name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    switch (name) {
+    case 'title':
+      {
+        const shortcut = this.getAttribute('shortcut');
+        this.$span.setAttribute('title', `${newValue} ${shortcut ? `[${shortcut}]` : ''}`);
+      }
+      break;
+    case 'src':
+      this.$img.setAttribute('src', newValue);
+      break;
+    default:
+      // eslint-disable-next-line no-console
+      console.error(`unknown attribute: ${name}`);
+      break;
+    }
+  }
+  /**
+   * @function connectedCallback
+   * @returns {void}
+   */
+  connectedCallback () {
+    this.$dropdown.addEventListener('selectedindexchange', (e) => {
+      console.log(e.detail);
+      console.log(this.children[e.detail.selectedIndex].getAttribute('value'));
+    });
+  }
+}
+
+// Register
+customElements.define('se-dropdown', Dropdown);

src/editor/index.html

@@ -411,29 +411,18 @@
       </div> <!-- tools_left -->
       <div id="tools_bottom" class="tools_panel">
         <!-- Zoom buttons -->
-        <div id="zoom_panel" class="toolset" title="Change zoom level">
+        <se-dropdown src="./images/zoom.svg" title="Change zoom level">
-          <label>
+          <div value="1000">1000%</div>
-            <span id="zoomLabel" class="zoom_tool icon_label"></span>
+          <div value="400">400%</div>
-            <input id="zoom" size="3" value="100" type="text" />
+          <div value="200">200%</div>
-          </label>
+          <div value="100">100%</div>
-          <div id="zoom_dropdown" class="dropdown">
+          <div value="50">50%</div>
-            <button></button>
+          <div value="25">25%</div>
-            <ul>
+          <div value="canvas">Fit to canvas</div>
-              <li>1000%</li>
+          <div value="selection">Fit to selection</div>
-              <li>400%</li>
+          <div value="layer">Fit to layer content</div>
-              <li>200%</li>
+          <div value="content">Fit to all content</div>
-              <li>100%</li>
+        </se-dropdown>
-              <li>50%</li>
-              <li>25%</li>
-              <li id="fit_to_canvas" data-val="canvas">Fit to canvas</li>
-              <li id="fit_to_sel" data-val="selection">Fit to selection</li>
-              <li id="fit_to_layer_content" data-val="layer">Fit to layer content</li>
-              <li id="fit_to_all" data-val="content">Fit to all content</li>
-              <li>100%</li>
-            </ul>
-          </div>
-          <div class="tool_sep"></div>
-        </div>
         <div id="tools_bottom_2">
           <div id="color_tools">
             <div class="color_tool" id="tool_fill">
@@ -493,12 +482,14 @@
             </div>
           </div>
         </div>
+        <se-dropdown></se-dropdown>
         <div id="tools_bottom_3">
           <div id="palette_holder">
             <div id="palette" title="Click to change fill color, shift-click to change stroke color">
             </div>
           </div>
         </div>
+        <se-dropdown></se-dropdown>
         <!-- <div id="copyright"><span id="copyrightLabel">Powered by</span> <a href="https://github.com/SVG-Edit/svgedit" target="_blank">SVG-edit v2.6-beta</a></div> -->
       </div>
       <div id="option_lists" class="dropdown">