#sespinInput NumberSpinBox implement and se-spin-input webcomponenet added changes

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,192 @@
+/* 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: '',
+      inputsize: '100%',
+      value: '',
+      min: 1,
+      step: 1
+    });
+  }
+
+  /**
+    * @function get
+    * @returns {PlainObject}
+  */
+  get [internal.template] () {
+    const result = super[internal.template];
+    result.content.prepend(fragmentFrom.html`
+      <label>
+        <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;
+        }
+        #stroke_width {
+          margin-top: 0px;
+        }
+        [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;
+        }
+        .icon_label {
+          float: left;
+          padding-top: 3px;
+          padding-right: 3px;
+          box-sizing: border-box;
+          -moz-box-sizing: border-box;
+          -webkit-box-sizing: border-box;
+          height: 0;
+        }
+        </style>
+      `.content
+    );
+    return result;
+  }
+  /**
+   * @function observedAttributes
+   * @returns {any} observed
+   */
+  static get observedAttributes () {
+    return ['value', 'class', 'inputsize', '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;
+    case 'inputsize':
+      this.inputsize = 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.inputsize) {
+      this.$input.shadowRoot.querySelector('[part~="input"]').style.width = this[internal.state].inputsize;
+    }
+    // TODO: label alignment issue problem. now hide label
+    this.$label.style.display = 'none';
+    if (changed.src) {
+      if (this[internal.state].src !== '') {
+        this.$img.src = this[internal.state].src;
+        this.$img.style.display = 'block';
+      }
+    }
+    if (changed.label) {
+      if (this[internal.state].label !== '') {
+        this.$span.prepend(this[internal.state].label);
+        this.$img.style.display = 'none';
+      }
+    }
+    if (changed.value) {
+      this.dispatchEvent(this.$event);
+    }
+  }
+  /**
+   * @function inputsize
+   * @returns {string} inputsize
+   */
+  get inputsize () {
+    return this[internal.state].inputsize;
+  }
+  /**
+   * @function inputsize
+   * @returns {void}
+   */
+  set inputsize (inputsize) {
+    this[internal.setState]({inputsize});
+  }
+  /**
+   * @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/index.html

@@ -152,7 +152,7 @@
           </div>
           <label id="tool_angle" title="Change rotation angle" class="toolset">
             <span id="angleLabel" class="icon_label"></span>
-            <input id="angle" size="2" value="0" type="text" />
+            <se-spin-input id="angle" min=-180 max=180 step=5 value="0" title="Change rotation angle"></se-spin-input>
           </label>
           <div class="toolset" id="tool_blur" title="Change gaussian blur value">
             <label>
@@ -209,7 +209,7 @@
           </div>
           <label id="cornerRadiusLabel" class="toolset" title="Change Rectangle Corner Radius">
             <span class="icon_label"></span>
-            <input id="rect_rx" size="3" value="0" type="text" data-attr="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"></se-spin-input>
           </label>
         </div>
         <div id="image_panel">
@@ -283,7 +283,7 @@
           </div>
           <label id="tool_font_size" title="Change Font Size">
             <span id="font_sizeLabel" class="icon_label"></span>
-            <input id="font_size" size="3" value="0" type="text" />
+            <se-spin-input id="font_size" min=1 max=1000 step=1 value="0" title="Change Font Size"></se-spin-input>
           </label>
           <!-- Not visible, but still used -->
           <input id="text" type="text" size="35" />
@@ -385,8 +385,7 @@
                 <div id="stroke_color" class="color_block" title="Change stroke color"></div>
               </div>
               <label class="stroke_label">
-                <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" />
+                <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>
               </label>
               <div id="toggle_stroke_tools" title="Show/hide more stroke tools"></div>
               <label class="stroke_tool">

src/editor/svgedit.js

@@ -2910,24 +2910,24 @@ editor.init = () => {
   /**
   * @type {module:jQuerySpinButton.ValueCallback}
   */
-  const changeRectRadius = function (ctl) {
-    svgCanvas.setRectRadius(ctl.value);
+  const changeRectRadius = function (e) {
+    svgCanvas.setRectRadius(e.target.value);
   };
 
   /**
   * @type {module:jQuerySpinButton.ValueCallback}
   */
-  const changeFontSize = function (ctl) {
-    svgCanvas.setFontSize(ctl.value);
+  const changeFontSize = function (e) {
+    svgCanvas.setFontSize(e.target.value);
   };
 
   /**
   * @type {module:jQuerySpinButton.ValueCallback}
   */
-  const changeStrokeWidth = function (ctl) {
-    let val = ctl.value;
+  const changeStrokeWidth = function (e) {
+    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);
   };
@@ -2935,9 +2935,9 @@ editor.init = () => {
   /**
   * @type {module:jQuerySpinButton.ValueCallback}
   */
-  const changeRotationAngle = function (ctl) {
-    svgCanvas.setRotationAngle(ctl.value);
-    $('#tool_reorient').toggleClass('disabled', Number.parseInt(ctl.value) === 0);
+  const changeRotationAngle = function (e) {
+    svgCanvas.setRotationAngle(e.target.value);
+    $('#tool_reorient').toggleClass('disabled', Number.parseInt(e.target.value) === 0);
   };
 
   /**
@@ -4918,6 +4918,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);
@@ -5192,18 +5196,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
   });