progress

src/editor/components/seDropdown.js

@@ -1,8 +1,9 @@
 /* eslint-disable node/no-unpublished-import */
 import ListComboBox from 'elix/define/ListComboBox.js';
 import NumberSpinBox from 'elix/define/NumberSpinBox.js';
-import {defaultState, template} from 'elix/src/base/internal.js';
+import {defaultState} from 'elix/src/base/internal.js';
-import {templateFrom} from 'elix/src/core/htmlLiterals.js';
+import {templateFrom, fragmentFrom} from 'elix/src/core/htmlLiterals.js';
+import {internal} from 'elix';
 
 /**
  * @class CustomCombo
@@ -14,77 +15,49 @@ class CustomCombo extends ListComboBox {
     */
   get [defaultState] () {
     return Object.assign(super[defaultState], {
-      inputPartType: NumberSpinBox
+      inputPartType: NumberSpinBox,
+      src: './imags.logo.svg'
     });
   }
   /**
     * @function get
     * @returns {PlainObject}
   */
-  get [template] () {
+  get [internal.template] () {
-    const result = super[template];
+    const result = super[internal.template];
+    const source = result.content.getElementById('source');
+    source.prepend(fragmentFrom.html`
+      <img src="./images/logo.svg" alt="icon" width="18" height="18">
+      </img>
+      `.cloneNode(true));
     result.content.append(
       templateFrom.html`
         <style>
+        :host {
+          float:left;
+        }
         ::part(input) {
-          width: 30px;
+          width: 40px;
+        }
+        [part~="source"] {
+          grid-template-columns: 20px 1fr auto;
+          margin-top: 4px;
+        }
+        ::slotted(*) {
+          padding: 4px;
+          background: #E8E8E8;
+          border: 1px solid #B0B0B0;
+          margin: 0 0 -1px 0;
+          line-height: 16px;
+        }
+        [part~="popup"] {
+          width: 180px;
         }
         </style>
       `.content
     );
     return result;
   }
-}
-
-customElements.define('custom-combo', CustomCombo);
-
-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;
-  }
-  custom-combo::part(popup) {
-    width: 180px;
-  }
-  </style>
-  <span class="toolset" title="title">
-    <img  class="icon" src="./images/logo.svg" alt="icon" width="18" height="18">
-    <custom-combo>
-      <slot></slot>
-    </custom-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('custom-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
@@ -103,37 +76,57 @@ export class Dropdown extends HTMLElement {
     if (oldValue === newValue) return;
     switch (name) {
     case 'title':
-      {
+      console.log({this: this, name, oldValue, newValue});
-        const shortcut = this.getAttribute('shortcut');
+      // this.$span.setAttribute('title', `${newValue} ${shortcut ? `[${shortcut}]` : ''}`);
-        this.$span.setAttribute('title', `${newValue} ${shortcut ? `[${shortcut}]` : ''}`);
-      }
       break;
     case 'src':
-      this.$img.setAttribute('src', newValue);
+      console.log({name, oldValue, newValue});
+      this.src = newValue;
       break;
     default:
-      // eslint-disable-next-line no-console
+      super.attributeChangedCallback(name, oldValue, newValue);
-      console.error(`unknown attribute: ${name}`);
       break;
     }
   }
   /**
-   * @function connectedCallback
+  * @function connectedCallback
-   * @returns {void}
+  * @returns {void}
-   */
+  */
   connectedCallback () {
-    this.$dropdown.addEventListener('selectedindexchange', (e) => {
+    super.connectedCallback();
+    this.addEventListener('selectedindexchange', (e) => {
       console.log(e.detail);
       console.log(this.children[e.detail.selectedIndex].getAttribute('value'));
       console.log(this);
     });
-    this.$dropdown.addEventListener('input', (e) => {
+    this.addEventListener('input', (e) => {
       console.log(e.detail);
       console.log(this.children[e.detail.selectedIndex].getAttribute('value'));
       console.log(this);
     });
   }
+  /**
+    * @function [internal.render]
+    * @param {PlainObject} changed
+    * @returns {void}
+    */
+  [internal.render] (changed) {
+    super[internal.render](changed);
+    console.log(this, changed, this[internal.firstRender], changed.src);
+    if (this[internal.firstRender]) {
+      this.$img = this.shadowRoot.querySelector('img');
+    }
+    if (changed.src) {
+      this.$img.setAttribute('src', this[internal.state].src);
+    }
+  }
+  get src () {
+    return this[internal.state].src;
+  }
+  set src (src) {
+    this[internal.setState]({src});
+  }
 }
 
 // Register
-customElements.define('se-dropdown', Dropdown);
+customElements.define('se-dropdown', CustomCombo);

src/editor/index.html

@@ -482,14 +482,12 @@
             </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">