#se-input webcomponent event change update to svgedit

src/editor/components/seInput.js

@@ -19,7 +19,8 @@ class SeInput extends Input {
     return Object.assign(super[defaultState], {
       label: '',
       src: '',
-      inputsize: '100%'
+      inputsize: '100%',
+      value: ''
     });
   }
 
@@ -29,12 +30,19 @@ class SeInput extends Input {
   */
   get [internal.template] () {
     const result = super[internal.template];
-    console.log(result.content);
     result.content.prepend(fragmentFrom.html`
-      <label><span><img src="./images/logo.svg" alt="icon" width="18" height="18"></img></span>
-      `.cloneNode(true));
-    console.log('insterl template --------->', result);
-    result.content.append(fragmentFrom.html`</label>`.cloneNode(true));
+      <label><span><img src="./images/logo.svg" alt="icon" width="18" height="18"></img></span></label>`.cloneNode(true));
+    // change the style so it fits in our toolbar
+    result.content.append(
+      templateFrom.html`
+        <style>
+        [part~="input"] {
+          margin-top: 5px;
+          height: 23px;
+        }
+        </style>
+      `.content
+    );
     return result;
   }
   /**
@@ -82,18 +90,13 @@ class SeInput extends Input {
       this.$input = this.shadowRoot.getElementById('inner');
       this.$img = this.shadowRoot.querySelector('img');
       this.$span = this.shadowRoot.querySelector('span');
-      console.log(this.shadowRoot);
-      console.log(this.shadowRoot.querySelector('label'));
-      console.log(this.shadowRoot.querySelector('span'));
-      console.log(this.shadowRoot.querySelector('img'));
-      /* this.$event = new CustomEvent('change');
-      this.addEventListener('selectedindexchange', (e) => {
+      this.$event = new CustomEvent('change');
+      this.addEventListener('change', (e) => {
         e.preventDefault();
-        this.value = this.children[e.detail.selectedIndex].getAttribute('value');
-      }); */
+        this.value = e.target.value;
+      });
     }
     if (changed.inputsize) {
-      console.log('changed.inputsize --> ', this[internal.state].inputsize);
       this.$input.style.width = this[internal.state].inputsize;
     }
     if (changed.src) {
@@ -108,13 +111,15 @@ class SeInput extends Input {
         this.$img.style.display = 'none';
       }
     }
+    if (changed.value) {
+      this.dispatchEvent(this.$event);
+    }
   }
   /**
    * @function inputsize
    * @returns {string} inputsize
    */
   get inputsize () {
-    console.log('get inputsize --> ', this[internal.state].inputsize);
     return this[internal.state].inputsize;
   }
   /**
@@ -122,7 +127,6 @@ class SeInput extends Input {
    * @returns {void}
    */
   set inputsize (inputsize) {
-    console.log('set inputsize --> ', this[internal.state].inputsize);
     this[internal.setState]({inputsize});
   }
   /**

src/editor/index.html

@@ -147,12 +147,12 @@
             <se-button id="tool_reorient" title="Reorient path" src="./images/reorient.svg"></se-button>
             <se-button id="tool_make_link" title="Make (hyper)link" src="./images/globe_link.png"></se-button>
             <div class="tool_sep"></div>
-            <label id="idLabel" title="Identify the element">
+            <!-- <label id="idLabel" title="Identify the element">
               <span>id:</span>
               <input id="elem_id" class="attr_changer" data-attr="id" size="10" type="text" />
-            </label>
+            </label> -->
 
-            <se-input id="elem_id" inputsize="30px" type="text" label="id:"></se-input> 
+            <se-input id="elem_id" data-attr="id" inputsize="70%" type="text" label="id:"></se-input> 
             
             <label id="classLabel" title="Element class">
               <span>class:</span>

src/editor/svgedit.js

@@ -1888,7 +1888,7 @@ editor.init = () => {
       const opacPerc = (selectedElement.getAttribute('opacity') || 1.0) * 100;
       $('#group_opacity').val(opacPerc);
       $('#opac_slider').slider('option', 'value', opacPerc);
-      $('#elem_id').val(selectedElement.id);
+      $id('elem_id').value = selectedElement.id;
       $('#elem_class').val(selectedElement.getAttribute('class'));
     }
 
@@ -3047,6 +3047,45 @@ editor.init = () => {
     svgCanvas.setGroupTitle(this.value);
   });
 
+  const attrChanger = function (e) {
+    const attr = e.target.getAttribute('data-attr');
+    let val = e.target.value;
+    const valid = isValidUnit(attr, val, selectedElement);
+
+    if (!valid) {
+      e.target.value = selectedElement.getAttribute(attr);
+      /* await */ $.alert(uiStrings.notification.invalidAttrValGiven);
+      return false;
+    }
+
+    if (attr !== 'id' && attr !== 'class') {
+      if (isNaN(val)) {
+        val = svgCanvas.convertToNum(attr, val);
+      } else if (curConfig.baseUnit !== 'px') {
+        // Convert unitless value to one with given unit
+
+        const unitData = getTypeMap();
+
+        if (selectedElement[attr] || svgCanvas.getMode() === 'pathedit' || attr === 'x' || attr === 'y') {
+          val *= unitData[curConfig.baseUnit];
+        }
+      }
+    }
+
+    // if the user is changing the id, then de-select the element first
+    // change the ID, then re-select it with the new ID
+    if (attr === 'id') {
+      const elem = selectedElement;
+      svgCanvas.clearSelection();
+      elem.id = val;
+      svgCanvas.addToSelection([elem], true);
+    } else {
+      svgCanvas.changeSelectedAttribute(attr, val);
+    }
+    // e.target.blur();
+    return true;
+  };
+
   $('.attr_changer').change(function () {
     const attr = this.getAttribute('data-attr');
     let val = this.value;
@@ -4860,6 +4899,7 @@ editor.init = () => {
 
     // register actions for bottom panel
     $id('zoom').addEventListener('change', (e) => changeZoom(Number(e.target.value)));
+    $id('elem_id').addEventListener('change', (e) => attrChanger(e));
 
     // register actions for layer toolbar
     $id('layer_new').addEventListener('click', newLayer);