Merge remote-tracking branch 'origin/seSpinInput' into seFlyingButton

src/editor/components/index.js

@@ -3,3 +3,4 @@ import './seFlyingButton.js';
 import './seExplorerButton.js';
 import './seDropdown.js';
 import './seInput.js';
+import './seSpinInput.js';

src/editor/components/seSpinInput.js

@@ -0,0 +1,148 @@
+/* eslint-disable node/no-unpublished-import */
+import NumberSpinBox from 'elix/define/NumberSpinBox.js';
+import {defaultState} from 'elix/src/base/internal.js';
+import {templateFrom, fragmentFrom} from 'elix/src/core/htmlLiterals.js';
+import {internal} from 'elix';
+
+/**
+ * @class SeSpinInput
+ */
+class SeSpinInput extends NumberSpinBox {
+  /**
+    * @function get
+    * @returns {PlainObject}
+  */
+  get [defaultState] () {
+    return Object.assign(super[defaultState], {
+      label: '',
+      src: '',
+      value: '',
+      min: 1,
+      step: 1
+    });
+  }
+
+  /**
+    * @function get
+    * @returns {PlainObject}
+  */
+  get [internal.template] () {
+    const result = super[internal.template];
+    result.content.prepend(fragmentFrom.html`
+      <label style="display:none;">
+        <span class="icon_label">
+          <img src="./images/logo.svg" alt="icon" width="18" height="18" />
+        </span>
+      </label>`.cloneNode(true));
+    // change the style so it fits in our toolbar
+    result.content.append(
+      templateFrom.html`
+        <style>
+        :host {
+          float:left;
+          line-height: normal;
+          margin-top: 5px;
+          height: 23px;
+        }
+        </style>
+      `.content
+    );
+    return result;
+  }
+  /**
+   * @function observedAttributes
+   * @returns {any} observed
+   */
+  static get observedAttributes () {
+    return ['value', 'class', 'label', 'src', 'min', 'max', 'step'];
+  }
+  /**
+   * @function attributeChangedCallback
+   * @param {string} name
+   * @param {string} oldValue
+   * @param {string} newValue
+   * @returns {void}
+   */
+  attributeChangedCallback (name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    console.log({this: this, name, oldValue, newValue});
+    switch (name) {
+    case 'label':
+      this.label = newValue;
+      break;
+    case 'src':
+      this.src = newValue;
+      break;
+    default:
+      super.attributeChangedCallback(name, oldValue, newValue);
+      break;
+    }
+  }
+  /**
+    * @function [internal.render]
+    * @param {PlainObject} changed
+    * @returns {void}
+    */
+  [internal.render] (changed) {
+    super[internal.render](changed);
+    if (this[internal.firstRender]) {
+      this.$input = this.shadowRoot.getElementById('input');
+      this.$label = this.shadowRoot.querySelector('label');
+      this.$img = this.shadowRoot.querySelector('img');
+      this.$span = this.shadowRoot.querySelector('span');
+      this.$event = new CustomEvent('change');
+      this.addEventListener('change', (e) => {
+        e.preventDefault();
+        this.value = e.target.value;
+      });
+    }
+    if (changed.src) {
+      if (this[internal.state].src !== '') {
+        this.$img.src = this[internal.state].src;
+        this.$img.style.display = 'block';
+        this.$label.style.display = 'block';
+      }
+    }
+    if (changed.label) {
+      if (this[internal.state].label !== '') {
+        this.$span.prepend(this[internal.state].label);
+        this.$img.style.display = 'none';
+        this.$label.style.display = 'block';
+      }
+    }
+    if (changed.value) {
+      this.dispatchEvent(this.$event);
+    }
+  }
+  /**
+   * @function src
+   * @returns {string} src
+   */
+  get src () {
+    return this[internal.state].src;
+  }
+  /**
+   * @function src
+   * @returns {void}
+   */
+  set src (src) {
+    this[internal.setState]({src});
+  }
+  /**
+   * @function label
+   * @returns {string} label
+   */
+  get label () {
+    return this[internal.state].label;
+  }
+  /**
+   * @function label
+   * @returns {void}
+   */
+  set label (label) {
+    this[internal.setState]({label});
+  }
+}
+
+// Register
+customElements.define('se-spin-input', SeSpinInput);

src/editor/images/angle.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
+  <path stroke-width="2" stroke-dasharray="1,3" id="svg_6" d="m32.78778,41.03469c-0.40379,-8.68145 -4.50873,-16.79003 -12.11365,-20.5932" stroke="#000000" fill="none"/>
+  <path id="svg_7" d="m29.20348,7.67055l-24.20348,34.47921l41.16472,0" stroke-width="3" stroke="#404040" fill="none"/>
+</svg></svg>

src/editor/images/c_radius.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+  <rect stroke="#404040" fill="none" stroke-width="0.5" x="2.37501" y="2.4375" width="43.9375" height="43.9375" id="svg_1" rx="13" ry="13"/>
+  <path fill="none" stroke="#000000" d="m2.43674,15.88952l13.73722,0l0.08978,-13.46483m0.08978,14.08493" id="svg_3"/>
+  <line fill="none" stroke="#000000" x1="16.35107" y1="15.88934" x2="5.20504" y2="5.20504" id="svg_4" stroke-dasharray="2,2"/>
+</svg></svg>

src/editor/images/fontsize.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
+  <text fill="#606060" stroke="none" x="14.451" y="41.4587" id="svg_2" font-size="26" font-family="serif" text-anchor="middle">T</text>
+  <text fill="#000000" stroke="none" x="28.853" y="41.8685" font-size="52" font-family="serif" text-anchor="middle" xml:space="preserve" id="svg_3">T</text>
+</svg></svg>

src/editor/index.html

@@ -150,10 +150,7 @@
             <se-input id="elem_id" data-attr="id" inputsize="100px" type="text" label="id:" title="Identify the element"></se-input> 
             <se-input id="elem_class" data-attr="class" inputsize="100px" type="text" label="class:" title="Element class"></se-input> 
           </div>
-          <label id="tool_angle" title="Change rotation angle" class="toolset">
+          <se-spin-input id="angle" min=-180 max=180 step=5 value="0" src="./images/angle.svg" title="Change rotation angle"></se-spin-input>
-            <span id="angleLabel" class="icon_label"></span>
-            <input id="angle" size="2" value="0" type="text" />
-          </label>
           <div class="toolset" id="tool_blur" title="Change gaussian blur value">
             <label>
               <span id="blurLabel" class="icon_label"></span>
@@ -207,10 +204,7 @@
             <se-input id="rect_width" data-attr="width" inputsize="41px" type="text" src="./images/width.svg" title="Change rectangle width"></se-input>
             <se-input id="rect_height" data-attr="height" inputsize="41px" type="text" src="./images/height.svg" title="Change rectangle height"></se-input>
           </div>
-          <label id="cornerRadiusLabel" class="toolset" title="Change Rectangle Corner Radius">
+          <se-spin-input id="rect_rx" min=0 max=1000 step=1 value="0" title="Change Rectangle Corner Radius" data-attr="Corner Radius" src="./images/c_radius.svg"></se-spin-input>
-            <span class="icon_label"></span>
-            <input id="rect_rx" size="3" value="0" type="text" data-attr="Corner Radius" />
-          </label>
         </div>
         <div id="image_panel">
           <div class="toolset">
@@ -281,10 +275,7 @@
               </ul>
             </div>
           </div>
-          <label id="tool_font_size" title="Change Font Size">
+          <se-spin-input id="font_size" min=1 max=1000 step=1 value="0" title="Change Font Size" src="./images/fontsize.svg"></se-spin-input>
-            <span id="font_sizeLabel" class="icon_label"></span>
-            <input id="font_size" size="3" value="0" type="text" />
-          </label>
           <!-- Not visible, but still used -->
           <input id="text" type="text" size="35" />
         </div>
@@ -384,10 +375,7 @@
                 <div id="stroke_bg"></div>
                 <div id="stroke_color" class="color_block" title="Change stroke color"></div>
               </div>
-              <label class="stroke_label">
+              <se-spin-input id="stroke_width" min=0 max=99 step=0.1 value="5" title="Change stroke width by 1, shift-click to change by 0.1"></se-spin-input>
-                <input id="stroke_width" title="Change stroke width by 1, shift-click to change by 0.1" size="2"
-                  value="5" type="text" data-attr="Stroke Width" />
-              </label>
               <div id="toggle_stroke_tools" title="Show/hide more stroke tools"></div>
               <label class="stroke_tool">
                 <select id="stroke_style" title="Change stroke dash style">

src/editor/svgedit.css

@@ -856,7 +856,7 @@ input[type=text] {
   float: left;
 }
 
-.color_tool .stroke_label {
+.color_tool #stroke_width {
   margin-left: 25px;
   float: left;
 }

src/editor/svgedit.js

@@ -2923,24 +2923,24 @@ editor.init = () => {
   /**
   * @type {module:jQuerySpinButton.ValueCallback}
   */
-  const changeRectRadius = function (ctl) {
+  const changeRectRadius = function (e) {
-    svgCanvas.setRectRadius(ctl.value);
+    svgCanvas.setRectRadius(e.target.value);
   };
 
   /**
   * @type {module:jQuerySpinButton.ValueCallback}
   */
-  const changeFontSize = function (ctl) {
+  const changeFontSize = function (e) {
-    svgCanvas.setFontSize(ctl.value);
+    svgCanvas.setFontSize(e.target.value);
   };
 
   /**
   * @type {module:jQuerySpinButton.ValueCallback}
   */
-  const changeStrokeWidth = function (ctl) {
+  const changeStrokeWidth = function (e) {
-    let val = ctl.value;
+    let val = e.target.value;
     if (val === 0 && selectedElement && ['line', 'polyline'].includes(selectedElement.nodeName)) {
-      val = ctl.value = 1;
+      val = e.target.value = 1;
     }
     svgCanvas.setStrokeWidth(val);
   };
@@ -2948,9 +2948,9 @@ editor.init = () => {
   /**
   * @type {module:jQuerySpinButton.ValueCallback}
   */
-  const changeRotationAngle = function (ctl) {
+  const changeRotationAngle = function (e) {
-    svgCanvas.setRotationAngle(ctl.value);
+    svgCanvas.setRotationAngle(e.target.value);
-    $('#tool_reorient').toggleClass('disabled', Number.parseInt(ctl.value) === 0);
+    $('#tool_reorient').toggleClass('disabled', Number.parseInt(e.target.value) === 0);
   };
 
   /**
@@ -4926,6 +4926,10 @@ editor.init = () => {
     $id('image_height').addEventListener('change', (e) => attrChanger(e));
     $id('path_node_x').addEventListener('change', (e) => attrChanger(e));
     $id('path_node_y').addEventListener('change', (e) => attrChanger(e));
+    $id('angle').addEventListener('change', (e) => changeRotationAngle(e));
+    $id('stroke_width').addEventListener('change', (e) => changeStrokeWidth(e));
+    $id('rect_rx').addEventListener('change', (e) => changeRectRadius(e));
+    $id('font_size').addEventListener('change', (e) => changeFontSize(e));
 
     // register actions for layer toolbar
     $id('layer_new').addEventListener('click', newLayer);
@@ -5200,18 +5204,6 @@ editor.init = () => {
   });
 
   // init SpinButtons
-  $('#rect_rx').SpinButton({
-    min: 0, max: 1000, stateObj, callback: changeRectRadius
-  });
-  $('#stroke_width').SpinButton({
-    min: 0, max: 99, smallStep: 0.1, stateObj, callback: changeStrokeWidth
-  });
-  $('#angle').SpinButton({
-    min: -180, max: 180, step: 5, stateObj, callback: changeRotationAngle
-  });
-  $('#font_size').SpinButton({
-    min: 0.001, stepfunc: stepFontSize, stateObj, callback: changeFontSize
-  });
   $('#group_opacity').SpinButton({
     min: 0, max: 100, step: 5, stateObj, callback: changeOpacity
   });