progress

src/editor/components/seDropdown.js

@@ -7,9 +7,9 @@ import {templateFrom, fragmentFrom} from 'elix/src/core/htmlLiterals.js';
 import {internal} from 'elix';
 
 /**
- * @class CustomCombo
+ * @class Dropdown
  */
-class CustomCombo extends ListComboBox {
+class Dropdown extends ListComboBox {
   /**
     * @function get
     * @returns {PlainObject}
@@ -63,7 +63,7 @@ class CustomCombo extends ListComboBox {
    * @returns {any} observed
    */
   static get observedAttributes () {
-    return ['title', 'src', 'inputsize'];
+    return ['title', 'src', 'inputsize', 'value'];
   }
   /**
    * @function attributeChangedCallback
@@ -97,15 +97,9 @@ class CustomCombo extends ListComboBox {
     */
   [internal.render] (changed) {
     super[internal.render](changed);
-    // console.log(this, changed);
     if (this[internal.firstRender]) {
       this.$img = this.shadowRoot.querySelector('img');
       this.$input = this.shadowRoot.getElementById('input');
-      this.$event = new CustomEvent('change');
-      this.addEventListener('selectedindexchange', (e) => {
-        e.preventDefault();
-        this.value = this.children[e.detail.selectedIndex].getAttribute('value');
-      });
     }
     if (changed.src) {
       this.$img.setAttribute('src', this[internal.state].src);
@@ -113,15 +107,15 @@ class CustomCombo extends ListComboBox {
     if (changed.inputsize) {
       this.$input.shadowRoot.querySelector('[part~="input"]').style.width = this[internal.state].inputsize;
     }
-    if (changed.value) {
-      console.log('value=', this[internal.state].value);
-      this.dispatchEvent(this.$event);
-    }
     if (changed.inputPartType) {
       // Wire up handler on new input.
-      this.$input.addEventListener('click', (e) => {
+      this.addEventListener('close', (e) => {
         e.preventDefault();
-        this.value = e.target.value;
+        const value = e.detail?.closeResult.getAttribute('value');
+        if (value) {
+          const closeEvent = new CustomEvent('change', {detail: {value}});
+          this.dispatchEvent(closeEvent);
+        }
       });
     }
   }
@@ -153,10 +147,24 @@ class CustomCombo extends ListComboBox {
   set inputsize (inputsize) {
     this[internal.setState]({inputsize});
   }
+  /**
+   * @function value
+   * @returns {string} src
+   */
+  get value () {
+    return this[internal.state].value;
+  }
+  /**
+   * @function value
+   * @returns {void}
+   */
+  set value (value) {
+    this[internal.setState]({value});
+  }
 }
 
 // Register
-customElements.define('se-dropdown', CustomCombo);
+customElements.define('se-dropdown', Dropdown);
 
 /*
 {TODO

src/editor/svgedit.js

@@ -2321,6 +2321,8 @@ editor.init = () => {
       return;
     }
 
+    $id('zoom').value = (svgCanvas.getZoom() * 100).toFixed(1);
+
     if (autoCenter) {
       updateCanvas();
     } else {
@@ -2338,23 +2340,34 @@ editor.init = () => {
   /**
   * @type {module:jQuerySpinButton.ValueCallback}
   */
-  const changeZoom = function (value) {
+  const changeZoom = (value) => {
-    const zoomlevel = value / 100;
+    switch (value) {
-    if (zoomlevel < 0.001) {
+    case 'canvas':
-      value = 0.1;
+    case 'selection':
-      return;
+    case 'layer':
-    }
+    case 'content':
-    const zoom = svgCanvas.getZoom();
+      zoomChanged(window, value);
-    const wArea = workarea;
+      break;
+    default:
+    {
+      const zoomlevel = Number(value) / 100;
+      if (zoomlevel < 0.001) {
+        value = 0.1;
+        return;
+      }
+      const zoom = svgCanvas.getZoom();
+      const wArea = workarea;
 
-    zoomChanged(window, {
+      zoomChanged(window, {
-      width: 0,
+        width: 0,
-      height: 0,
+        height: 0,
-      // center pt of scroll position
+        // center pt of scroll position
-      x: (wArea[0].scrollLeft + wArea.width() / 2) / zoom,
+        x: (wArea[0].scrollLeft + wArea.width() / 2) / zoom,
-      y: (wArea[0].scrollTop + wArea.height() / 2) / zoom,
+        y: (wArea[0].scrollTop + wArea.height() / 2) / zoom,
-      zoom: zoomlevel
+        zoom: zoomlevel
-    }, true);
+      }, true);
+    }
+    }
   };
 
   $('#cur_context_panel').delegate('a', 'click', function () {
@@ -3543,7 +3556,7 @@ editor.init = () => {
     const res = svgCanvas.getResolution();
     multiplier = multiplier ? res.zoom * multiplier : 1;
     // setResolution(res.w * multiplier, res.h * multiplier, true);
-    $id('zoom').value = multiplier * 100;
+    $id('zoom').value = (multiplier * 100).toFixed(1);
     svgCanvas.setZoom(multiplier);
     zoomDone();
     updateCanvas(true);
@@ -4753,11 +4766,6 @@ editor.init = () => {
 
   populateLayers();
 
-  // function changeResolution (x,y) {
-  //   const {zoom} = svgCanvas.getResolution();
-  //   setResolution(x * zoom, y * zoom);
-  // }
-
   const centerCanvas = () => {
     // this centers the canvas vertically in the workarea (horizontal handled in CSS)
     workarea.css('line-height', workarea.height() + 'px');
@@ -4896,7 +4904,7 @@ editor.init = () => {
     $id('tool_fhellipse').addEventListener('click', clickFHEllipse);
 
     // register actions for bottom panel
-    $id('zoom').addEventListener('change', (e) => changeZoom(Number(e.target.value)));
+    $id('zoom').addEventListener('change', (e) => changeZoom(e.detail.value));
     $id('elem_id').addEventListener('change', (e) => attrChanger(e));
     $id('elem_class').addEventListener('change', (e) => attrChanger(e));
     $id('circle_cx').addEventListener('change', (e) => attrChanger(e));
@@ -5211,6 +5219,9 @@ editor.init = () => {
     min: 0, max: 10, step: 0.1, stateObj, callback: changeBlur
   });
 
+  // zoom
+  $id('zoom').value = (svgCanvas.getZoom() * 100).toFixed(1);
+
   $('#workarea').contextMenu(
     {
       menu: 'cmenu_canvas',