in progress: connect se-dropdown to svgedit

2020-11-15 14:50:05 +01:00
parent 878720409e
commit a140cb5aab
5 changed files with 91 additions and 101 deletions
--- a/src/editor/components/seDropdown.js
+++ b/src/editor/components/seDropdown.js
@@ -1,6 +1,7 @@
 /* eslint-disable node/no-unpublished-import */
 import ListComboBox from 'elix/define/ListComboBox.js';
 import NumberSpinBox from 'elix/define/NumberSpinBox.js';
+// import Input from 'elix/src/base/Input.js';
 import {defaultState} from 'elix/src/base/internal.js';
 import {templateFrom, fragmentFrom} from 'elix/src/core/htmlLiterals.js';
 import {internal} from 'elix';
@@ -16,7 +17,8 @@ class CustomCombo extends ListComboBox {
  get [defaultState] () {
    return Object.assign(super[defaultState], {
      inputPartType: NumberSpinBox,
-      src: './imags.logo.svg'
+      src: './images/logo.svg',
+      inputsize: '100%'
    });
  }
  /**
@@ -26,19 +28,17 @@ class CustomCombo extends ListComboBox {
  get [internal.template] () {
    const result = super[internal.template];
    const source = result.content.getElementById('source');
+    // add a icon before our dropdown
    source.prepend(fragmentFrom.html`
-      <img src="./images/logo.svg" alt="icon" width="18" height="18">
-      </img>
+      <img src="./images/logo.svg" alt="icon" width="18" height="18"></img>
      `.cloneNode(true));
+    // change the style so it fits in our toolbar
    result.content.append(
      templateFrom.html`
        <style>
        :host {
          float:left;
        }
-        ::part(input) {
-          width: 40px;
-        }
        [part~="source"] {
          grid-template-columns: 20px 1fr auto;
          margin-top: 4px;
@@ -51,7 +51,7 @@ class CustomCombo extends ListComboBox {
          line-height: 16px;
        }
        [part~="popup"] {
-          width: 180px;
+          width: max-content;
        }
        </style>
      `.content
@@ -63,7 +63,7 @@ class CustomCombo extends ListComboBox {
   * @returns {any} observed
   */
  static get observedAttributes () {
-    return ['title', 'src'];
+    return ['title', 'src', 'inputsize'];
  }
  /**
   * @function attributeChangedCallback
@@ -74,37 +74,22 @@ class CustomCombo extends ListComboBox {
   */
  attributeChangedCallback (name, oldValue, newValue) {
    if (oldValue === newValue) return;
+    console.log({this: this, name, oldValue, newValue});
    switch (name) {
    case 'title':
-      console.log({this: this, name, oldValue, newValue});
      // this.$span.setAttribute('title', `${newValue} ${shortcut ? `[${shortcut}]` : ''}`);
      break;
    case 'src':
-      console.log({name, oldValue, newValue});
      this.src = newValue;
      break;
+    case 'inputsize':
+      this.inputsize = newValue;
+      break;
    default:
      super.attributeChangedCallback(name, oldValue, newValue);
      break;
    }
  }
-  /**
-  * @function connectedCallback
-  * @returns {void}
-  */
-  connectedCallback () {
-    super.connectedCallback();
-    this.addEventListener('selectedindexchange', (e) => {
-      console.log(e.detail);
-      console.log(this.children[e.detail.selectedIndex].getAttribute('value'));
-      console.log(this);
-    });
-    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
@@ -112,21 +97,82 @@ class CustomCombo extends ListComboBox {
    */
  [internal.render] (changed) {
    super[internal.render](changed);
-    console.log(this, changed, this[internal.firstRender], changed.src);
+    // 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);
    }
+    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) => {
+        e.preventDefault();
+        this.value = e.target.value;
+      });
+    }
  }
+  /**
+   * @function src
+   * @returns {string} src
+   */
  get src () {
    return this[internal.state].src;
  }
+  /**
+   * @function src
+   * @returns {void}
+   */
  set src (src) {
    this[internal.setState]({src});
  }
+  /**
+   * @function inputsize
+   * @returns {string} src
+   */
+  get inputsize () {
+    return this[internal.state].inputsize;
+  }
+  /**
+   * @function src
+   * @returns {void}
+   */
+  set inputsize (inputsize) {
+    this[internal.setState]({inputsize});
+  }
 }

 // Register
 customElements.define('se-dropdown', CustomCombo);
+
+/*
+{TODO
+    min: 0.001, max: 10000, step: 50, stepfunc: stepZoom,
+  function stepZoom (elem, step) {
+    const origVal = Number(elem.value);
+    if (origVal === 0) { return 100; }
+    const sugVal = origVal + step;
+    if (step === 0) { return origVal; }
+
+    if (origVal >= 100) {
+      return sugVal;
+    }
+    if (sugVal >= origVal) {
+      return origVal * 2;
+    }
+    return origVal / 2;
+  }
+*/
--- a/src/editor/index.html
+++ b/src/editor/index.html
@@ -411,13 +411,13 @@
      </div> <!-- tools_left -->
      <div id="tools_bottom" class="tools_panel">
        <!-- Zoom buttons -->
-        <se-dropdown src="./images/zoom.svg" title="Change zoom level">
-          <div value="1000">1000%</div>
-          <div value="400">400%</div>
-          <div value="200">200%</div>
-          <div value="100">100%</div>
-          <div value="50">50%</div>
-          <div value="25">25%</div>
+        <se-dropdown id="zoom" src="./images/zoom.svg" title="Change zoom level" inputsize="40px">
+          <div value="1000">1000</div>
+          <div value="400">400</div>
+          <div value="200">200</div>
+          <div value="100">100</div>
+          <div value="50">50</div>
+          <div value="25">25</div>
          <div value="canvas">Fit to canvas</div>
          <div value="selection">Fit to selection</div>
          <div value="layer">Fit to layer content</div>
--- a/src/editor/svgedit.css
+++ b/src/editor/svgedit.css
@@ -140,12 +140,6 @@ select {
  margin: 1px;
 }

-#zoomLabel {
-  cursor: pointer;
-  margin-right: 5px;
-  padding-top: 4px
-}
-
 #linkLabel > svg {
  height: 20px;
  padding-top: 4px;
@@ -576,15 +570,6 @@ input[type=text] {
  z-index: 11;
 }

-span.zoom_tool {
-  line-height: 26px;
-  padding: 3px;
-}
-
-#zoom_panel {
-  margin-top: 5px;
-}
-
 .dropdown {
  position: relative;
 }
--- a/src/editor/svgedit.js
+++ b/src/editor/svgedit.js
@@ -973,7 +973,6 @@ editor.init = () => {
        open_path: 'openpath.png',

        image: 'image.png',
-        zoom: 'zoom.png',

        arrow_right_big: 'arrow_right_big.png',
        arrow_down: 'dropdown.gif',
@@ -1041,7 +1040,6 @@ editor.init = () => {
        '#tool_editor_prefs > div': 'config',
        '#tool_editor_homepage > div': 'globe_link',
        '#tool_image': 'image',
-        '#tool_zoom': 'zoom',
        '#tool_node_clone': 'node_clone',
        '#tool_node_delete': 'node_delete',
        '#tool_add_subpath': 'add_subpath',
@@ -1079,7 +1077,6 @@ editor.init = () => {
        '#cornerRadiusLabel span': 'c_radius',
        '#angleLabel': 'angle',
        '#linkLabel,#tool_make_link_multi': 'globe_link',
-        '#zoomLabel': 'zoom',
        '#tool_fill label': 'fill',
        '#tool_stroke .icon_label': 'stroke',
        '#group_opacityLabel': 'opacity',
@@ -2322,12 +2319,10 @@ editor.init = () => {
      bb = zInfo.bbox;

    if (zoomlevel < 0.001) {
-      changeZoom({value: 0.1});
+      changeZoom(0.1);
      return;
    }

-    $('#zoom').val((zoomlevel * 100).toFixed(1));
-
    if (autoCenter) {
      updateCanvas();
    } else {
@@ -2345,10 +2340,10 @@ editor.init = () => {
  /**
  * @type {module:jQuerySpinButton.ValueCallback}
  */
-  const changeZoom = function (ctl) {
-    const zoomlevel = ctl.value / 100;
+  const changeZoom = function (value) {
+    const zoomlevel = value / 100;
    if (zoomlevel < 0.001) {
-      ctl.value = 0.1;
+      value = 0.1;
      return;
    }
    const zoom = svgCanvas.getZoom();
@@ -3364,16 +3359,6 @@ editor.init = () => {
    }
  });

-  editor.addDropDown('#zoom_dropdown', function () {
-    const item = $(this);
-    const val = item.data('val');
-    if (val) {
-      zoomChanged(window, val);
-    } else {
-      changeZoom({value: Number.parseFloat(item.text())});
-    }
-  }, true);
-
  addAltDropDown('#stroke_linecap', '#linecap_opts', function () {
    setStrokeOpt(this, true);
  }, {dropUp: true});
@@ -3521,7 +3506,7 @@ editor.init = () => {
    const res = svgCanvas.getResolution();
    multiplier = multiplier ? res.zoom * multiplier : 1;
    // setResolution(res.w * multiplier, res.h * multiplier, true);
-    $('#zoom').val(multiplier * 100);
+    $id('zoom').value = multiplier * 100;
    svgCanvas.setZoom(multiplier);
    zoomDone();
    updateCanvas(true);
@@ -4548,11 +4533,6 @@ editor.init = () => {
    $(window).mouseup();
  });

-  $('#zoomLabel').click(function () {
-    $('#zoom_dropdown button').mousedown();
-    $(window).mouseup();
-  });
-
  $('.push_button').mousedown(function () {
    if (!$(this).hasClass('disabled')) {
      $(this).addClass('push_button_pressed').removeClass('push_button');
@@ -4772,24 +4752,6 @@ editor.init = () => {
    return sugVal;
  }

-  /**
-   * @type {module:jQuerySpinButton.StepCallback}
-   */
-  function stepZoom (elem, step) {
-    const origVal = Number(elem.value);
-    if (origVal === 0) { return 100; }
-    const sugVal = origVal + step;
-    if (step === 0) { return origVal; }
-
-    if (origVal >= 100) {
-      return sugVal;
-    }
-    if (sugVal >= origVal) {
-      return origVal * 2;
-    }
-    return origVal / 2;
-  }
-
  // function setResolution (w, h, center) {
  //   updateCanvas();
  //   // w -= 0; h -= 0;
@@ -4887,6 +4849,7 @@ editor.init = () => {
    $id('tool_zoom').addEventListener('dblclick', dblclickZoom);
    $id('tool_path').addEventListener('click', clickPath);
    $id('tool_line').addEventListener('click', clickLine);
+
    // flyout
    $id('tool_rect').addEventListener('click', clickRect);
    $id('tool_square').addEventListener('click', clickSquare);
@@ -4895,6 +4858,9 @@ editor.init = () => {
    $id('tool_circle').addEventListener('click', clickCircle);
    $id('tool_fhellipse').addEventListener('click', clickFHEllipse);

+    // register actions for bottom panel
+    $id('zoom').addEventListener('change', (e) => changeZoom(Number(e.target.value)));
+
    // register actions for layer toolbar
    $id('layer_new').addEventListener('click', newLayer);
    $id('layer_delete').addEventListener('click', deleteLayer);
@@ -5186,13 +5152,6 @@ editor.init = () => {
  $('#blur').SpinButton({
    min: 0, max: 10, step: 0.1, stateObj, callback: changeBlur
  });
-  $('#zoom').SpinButton({
-    min: 0.001, max: 10000, step: 50, stepfunc: stepZoom,
-    stateObj, callback: changeZoom
-  // Set default zoom
-  }).val(
-    svgCanvas.getZoom() * 100
-  );

  $('#workarea').contextMenu(
    {