#seSpinInput label and img added changes

src/editor/components/seSpinInput.js

@@ -1,7 +1,7 @@
 /* eslint-disable node/no-unpublished-import */
 import NumberSpinBox from 'elix/define/NumberSpinBox.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';
 
 /**
@@ -14,6 +14,8 @@ class SeSpinInput extends NumberSpinBox {
   */
   get [defaultState] () {
     return Object.assign(super[defaultState], {
+      label: '',
+      src: '',
       value: '',
       min: 1,
       step: 1
@@ -26,6 +28,12 @@ class SeSpinInput extends NumberSpinBox {
   */
   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`
@@ -46,7 +54,7 @@ class SeSpinInput extends NumberSpinBox {
    * @returns {any} observed
    */
   static get observedAttributes () {
-    return ['value', 'min', 'max', 'step'];
+    return ['value', 'class', 'label', 'src', 'min', 'max', 'step'];
   }
   /**
    * @function attributeChangedCallback
@@ -59,6 +67,12 @@ class SeSpinInput extends NumberSpinBox {
     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;
@@ -72,16 +86,62 @@ class SeSpinInput extends NumberSpinBox {
   [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

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">
-            <span id="angleLabel" class="icon_label"></span>
-            <se-spin-input id="angle" min=-180 max=180 step=5 value="0" title="Change rotation angle"></se-spin-input>
-          </label>
+          <se-spin-input id="angle" min=-180 max=180 step=5 value="0" src="./images/angle.svg" title="Change rotation angle"></se-spin-input>
           <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">
-            <span class="icon_label"></span>
-            <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>
+          <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>
         </div>
         <div id="image_panel">
           <div class="toolset">
@@ -281,10 +275,7 @@
               </ul>
             </div>
           </div>
-          <label id="tool_font_size" title="Change Font Size">
-            <span id="font_sizeLabel" class="icon_label"></span>
-            <se-spin-input id="font_size" min=1 max=1000 step=1 value="0" title="Change Font Size"></se-spin-input>
-          </label>
+          <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>
           <!-- Not visible, but still used -->
           <input id="text" type="text" size="35" />
         </div>
@@ -384,9 +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>
-              </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>
               <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;
 }