diff --git a/src/editor/components/seInput.js b/src/editor/components/seInput.js
index cf695adf..e4a2c2eb 100644
--- a/src/editor/components/seInput.js
+++ b/src/editor/components/seInput.js
@@ -1,69 +1,53 @@
 /* eslint-disable node/no-unpublished-import */
-// import DelegateInputLabelMixin from 'elix/src/base/DelegateInputLabelMixin.js';
-// import html from 'elix/src/core/html.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 ReactiveElement from 'elix/src/core/ReactiveElement.js';
-import {internal} from 'elix';
+import 'elix/define/Input.js';
+
+const template = document.createElement('template');
+template.innerHTML = `
+  <style>
+  :host {
+    position: relative;
+    top: 6px;
+  }
+  img {
+    top: 2px;
+    left: 4px;
+    position: relative;
+  }
+  span {
+    bottom: 1px;
+    right: -4px;
+    position: relative;
+  }
+  </style>
+  <img src="./images/logo.svg" alt="icon" width="12" height="12" />
+  <span id="label">label</span>
+  <elix-input></elix-input>
+`;
 
 /**
- * @class SeInput
+ * @class SEInput
  */
-class SeInput extends Input {
+export class SEInput extends HTMLElement {
   /**
-    * @function get
-    * @returns {PlainObject}
-  */
-  get [defaultState] () {
-    return Object.assign(super[defaultState], {
-      label: '',
-      src: '',
-      inputsize: '100%',
-      value: ''
-    });
-  }
-
-  /**
-    * @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>
-        [part~="input"] {
-          margin-top: 5px;
-          height: 23px;
-        }
-        .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 constructor
+    */
+  constructor () {
+    super();
+    // create the shadowDom and insert the template
+    this._shadowRoot = this.attachShadow({mode: 'open'});
+    this._shadowRoot.appendChild(template.content.cloneNode(true));
+    // locate the component
+    this.$img = this._shadowRoot.querySelector('img');
+    this.$label = this.shadowRoot.getElementById('label');
+    this.$event = new CustomEvent('change');
+    this.$input = this._shadowRoot.querySelector('elix-input');
   }
   /**
    * @function observedAttributes
    * @returns {any} observed
    */
   static get observedAttributes () {
-    return ['value', 'class', 'inputsize', 'label', 'src'];
+    return ['value', 'label', 'src', 'size'];
   }
   /**
    * @function attributeChangedCallback
@@ -74,103 +58,100 @@ class SeInput extends Input {
    */
   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;
+      this.$img.setAttribute('src', newValue);
+      this.$label.remove();
       break;
-    case 'inputsize':
-      this.inputsize = newValue;
+    case 'size':
+      this.$input.setAttribute('size', newValue);
+      break;
+    case 'label':
+      this.$label.textContent = newValue;
+      this.$img.remove();
+      break;
+    case 'value':
+      this.$input.value = newValue;
       break;
     default:
-      super.attributeChangedCallback(name, oldValue, newValue);
+      // eslint-disable-next-line no-console
+      console.error(`unknown attribute: ${name}`);
       break;
     }
   }
   /**
-    * @function [internal.render]
-    * @param {PlainObject} changed
-    * @returns {void}
-    */
-  [internal.render] (changed) {
-    super[internal.render](changed);
-    // console.log(this, changed);
-    if (this[internal.firstRender]) {
-      // this.$img = this.shadowRoot.querySelector('img');
-      this.$input = this.shadowRoot.getElementById('inner');
-      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.style.width = this[internal.state].inputsize;
-    }
-    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
+   * @function get
+   * @returns {any}
    */
   get label () {
-    return this[internal.state].label;
+    return this.getAttribute('label');
   }
+
   /**
-   * @function label
+   * @function set
    * @returns {void}
    */
-  set label (label) {
-    this[internal.setState]({label});
+  set label (value) {
+    this.setAttribute('label', value);
+  }
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get value () {
+    return this.$input.value;
+  }
+
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set value (value) {
+    this.$input.value = value;
+  }
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get src () {
+    return this.getAttribute('src');
+  }
+
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set src (value) {
+    this.setAttribute('src', value);
+  }
+
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get size () {
+    return this.getAttribute('size');
+  }
+
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set size (value) {
+    this.setAttribute('size', value);
+  }
+
+  /**
+   * @function connectedCallback
+   * @returns {void}
+   */
+  connectedCallback () {
+    this.addEventListener('change', (e) => {
+      e.preventDefault();
+      this.value = e.target.value;
+    });
+    this.dispatchEvent(this.$event);
   }
 }
-
 // Register
-customElements.define('se-input', SeInput);
+customElements.define('se-input', SEInput);
diff --git a/src/editor/components/seSpinInput.js b/src/editor/components/seSpinInput.js
index 7d5af110..06bf5cec 100644
--- a/src/editor/components/seSpinInput.js
+++ b/src/editor/components/seSpinInput.js
@@ -1,60 +1,53 @@
 /* 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';
+import 'elix/define/NumberSpinBox.js';
+
+const template = document.createElement('template');
+template.innerHTML = `
+  <style>
+  :host {
+    position: relative;
+    top: 6px;
+  }
+  img {
+    top: 2px;
+    left: 4px;
+    position: relative;
+  }
+  span {
+    bottom: 1px;
+    right: -4px;
+    position: relative;
+  }
+  </style>
+  <img src="./images/logo.svg" alt="icon" width="12" height="12" />
+  <span id="label">label</span>
+  <elix-number-spin-box min="1" step="1"></elix-number-spin-box>
+`;
 
 /**
- * @class SeSpinInput
+ * @class SESpinInput
  */
-class SeSpinInput extends NumberSpinBox {
+export class SESpinInput extends HTMLElement {
   /**
-    * @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 constructor
+    */
+  constructor () {
+    super();
+    // create the shadowDom and insert the template
+    this._shadowRoot = this.attachShadow({mode: 'open'});
+    this._shadowRoot.appendChild(template.content.cloneNode(true));
+    // locate the component
+    this.$img = this._shadowRoot.querySelector('img');
+    this.$label = this.shadowRoot.getElementById('label');
+    this.$event = new CustomEvent('change');
+    this.$input = this._shadowRoot.querySelector('elix-number-spin-box');
   }
   /**
    * @function observedAttributes
    * @returns {any} observed
    */
   static get observedAttributes () {
-    return ['value', 'class', 'label', 'src', 'min', 'max', 'step'];
+    return ['value', 'label', 'src', 'size'];
   }
   /**
    * @function attributeChangedCallback
@@ -65,84 +58,134 @@ class SeSpinInput extends NumberSpinBox {
    */
   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;
+      this.$img.setAttribute('src', newValue);
+      this.$label.remove();
+      break;
+    case 'size':
+      this.$input.setAttribute('size', newValue);
+      break;
+    case 'step':
+      this.$input.setAttribute('step', newValue);
+      break;
+    case 'min':
+      this.$input.setAttribute('min', newValue);
+      break;
+    case 'max':
+      this.$input.setAttribute('max', newValue);
+      break;
+    case 'label':
+      this.$label.textContent = newValue;
+      this.$img.remove();
+      break;
+    case 'value':
+      this.$input.value = newValue;
       break;
     default:
-      super.attributeChangedCallback(name, oldValue, newValue);
+      // eslint-disable-next-line no-console
+      console.error(`unknown attribute: ${name}`);
       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
+   * @function get
+   * @returns {any}
    */
   get label () {
-    return this[internal.state].label;
+    return this.getAttribute('label');
   }
+
   /**
-   * @function label
+   * @function set
    * @returns {void}
    */
-  set label (label) {
-    this[internal.setState]({label});
+  set label (value) {
+    this.setAttribute('label', value);
+  }
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get value () {
+    return this.$input.value;
+  }
+
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set value (value) {
+    this.$input.value = value;
+  }
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get src () {
+    return this.getAttribute('src');
+  }
+
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set src (value) {
+    this.setAttribute('src', value);
+  }
+
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get size () {
+    return this.getAttribute('size');
+  }
+
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set size (value) {
+    this.setAttribute('size', value);
+  }
+
+  /**
+   * @function connectedCallback
+   * @returns {void}
+   */
+  connectedCallback () {
+    this.addEventListener('change', (e) => {
+      e.preventDefault();
+      this.value = e.target.value;
+    });
+    this.dispatchEvent(this.$event);
   }
 }
 
 // Register
-customElements.define('se-spin-input', SeSpinInput);
+customElements.define('se-spin-input', SESpinInput);
+
+/* TO DO
+  Call back for fontsize
+  function stepFontSize (elem, step) {
+    const origVal = Number(elem.value);
+    const sugVal = origVal + step;
+    const increasing = sugVal >= origVal;
+    if (step === 0) { return origVal; }
+
+    if (origVal >= 24) {
+      if (increasing) {
+        return Math.round(origVal * 1.1);
+      }
+      return Math.round(origVal / 1.1);
+    }
+    if (origVal <= 1) {
+      if (increasing) {
+        return origVal * 2;
+      }
+      return origVal / 2;
+    }
+    return sugVal;
+  }
+  */
diff --git a/src/editor/index.html b/src/editor/index.html
index 3935b086..b3267dbd 100644
--- a/src/editor/index.html
+++ b/src/editor/index.html
@@ -147,10 +147,10 @@
             <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>
-            <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> 
+            <se-input id="elem_id" data-attr="id" size="10" label="id:" title="Identify the element"></se-input> 
+            <se-input id="elem_class" data-attr="class" size="10" label="class:" title="Element class"></se-input> 
           </div>
-          <se-spin-input id="angle" min=-180 max=180 step=5 value="0" src="./images/angle.svg" title="Change rotation angle"></se-spin-input>
+          <se-spin-input id="angle" min=-180 max=180 step=5 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>
@@ -170,8 +170,8 @@
             <button></button>
           </div>
           <div id="xy_panel" class="toolset">
-            <se-input id="selected_x" data-attr="x" inputsize="41px" type="text" label="x:" title="Change X coordinate"></se-input>
-            <se-input id="selected_y" data-attr="y" inputsize="41px" type="text" label="y:" title="Change Y coordinate"></se-input>
+            <se-input id="selected_x" data-attr:="x" size="4" type="text" label="x:" title="Change X coordinate"></se-input>
+            <se-input id="selected_y" data-attr="y" size="4" type="text" label="y:" title="Change Y coordinate"></se-input>
           </div>
         </div>
         <!-- Buttons when multiple elements are selected -->
@@ -201,15 +201,15 @@
         </div>
         <div id="rect_panel">
           <div class="toolset">
-            <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>
+            <se-input id="rect_width" data-attr="width" size="4" src="./images/width.svg" title="Change rectangle width"></se-input>
+            <se-input id="rect_height" data-attr="height" size="4" src="./images/height.svg" title="Change rectangle height"></se-input>
           </div>
-          <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>
+          <se-spin-input id="rect_rx" min=0 max=1000 step=1 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">
-            <se-input id="image_width" data-attr="width" inputsize="41px" type="text" src="./images/width.svg" title="Change image width"></se-input>
-            <se-input id="image_height" data-attr="height" inputsize="41px" type="text" src="./images/height.svg" title="Change image height"></se-input> 
+            <se-input id="image_width" data-attr="width" size="4" type="text" src="./images/width.svg" title="Change image width"></se-input>
+            <se-input id="image_height" data-attr="height" size="4" type="text" src="./images/height.svg" title="Change image height"></se-input> 
           </div>
           <div class="toolset">
             <label id="tool_image_url">url:
@@ -224,31 +224,31 @@
         </div>
         <div id="circle_panel">
           <div class="toolset">
-            <se-input id="circle_cx" data-attr="cx" inputsize="41px" type="text" label="cx:"></se-input>
-            <se-input id="circle_cy" data-attr="cy" inputsize="41px" type="text" label="cy:"></se-input>
+            <se-input id="circle_cx" data-attr="cx" size="4" label="cx:"></se-input>
+            <se-input id="circle_cy" data-attr="cy" size="4" label="cy:"></se-input>
           </div>
           <div class="toolset">
-            <se-input id="circle_r" data-attr="r" inputsize="41px" type="text" label="r:"></se-input>
+            <se-input id="circle_r" data-attr="r" size="4" label="r:"></se-input>
           </div>
         </div>
         <div id="ellipse_panel">
           <div class="toolset">
-            <se-input id="ellipse_cx" data-attr="cx" inputsize="41px" title="Change ellipse's cx coordinate" type="text" label="cx:"></se-input>
-            <se-input id="ellipse_cy" data-attr="cy" inputsize="41px" title="Change ellipse's cy coordinate" type="text" label="cy:"></se-input>
+            <se-input id="ellipse_cx" data-attr="cx" size="4" title="Change ellipse's cx coordinate" label="cx:"></se-input>
+            <se-input id="ellipse_cy" data-attr="cy" size="4" title="Change ellipse's cy coordinate" label="cy:"></se-input>
           </div>
           <div class="toolset">
-            <se-input id="ellipse_rx" data-attr="rx" inputsize="41px" title="Change ellipse's x radius" type="text" label="rx:"></se-input>
-            <se-input id="ellipse_ry" data-attr="ry" inputsize="41px" title="Change ellipse's y radius" type="text" label="ry:"></se-input>
+            <se-input id="ellipse_rx" data-attr="rx" size="4" title="Change ellipse's x radius" label="rx:"></se-input>
+            <se-input id="ellipse_ry" data-attr="ry" size="4" title="Change ellipse's y radius" label="ry:"></se-input>
           </div>
         </div>
         <div id="line_panel">
           <div class="toolset">
-            <se-input id="line_x1" data-attr="x1" inputsize="41px" title="Change line's starting x coordinate" type="text" label="x1:"></se-input>
-            <se-input id="line_y1" data-attr="y1" inputsize="41px" title="Change line's starting y coordinate" type="text" label="y1:"></se-input>
+            <se-input id="line_x1" data-attr="x1" size="4" title="Change line's starting x coordinate" label="x1:"></se-input>
+            <se-input id="line_y1" data-attr="y1" size="4" title="Change line's starting y coordinate" label="y1:"></se-input>
           </div>
           <div class="toolset">
-            <se-input id="line_x2" data-attr="x2" inputsize="41px" title="Change line's ending x coordinate" type="text" label="x2:"></se-input>
-            <se-input id="line_y2" data-attr="y2" inputsize="41px" title="Change line's ending y coordinate" type="text" label="y2:"></se-input>
+            <se-input id="line_x2" data-attr="x2" size="4" title="Change line's ending x coordinate" label="x2:"></se-input>
+            <se-input id="line_y2" data-attr="y2" size="4" title="Change line's ending y coordinate" label="y2:"></se-input>
           </div>
         </div>
         <div id="text_panel">
@@ -275,7 +275,7 @@
               </ul>
             </div>
           </div>
-          <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>
+          <se-spin-input id="font_size" min=1 max=1000 step=1 title="Change Font Size" src="./images/fontsize.svg"></se-spin-input>
           <!-- Not visible, but still used -->
           <input id="text" type="text" size="35" />
         </div>
@@ -305,8 +305,8 @@
           <div class="tool_sep"></div>
           <div id="tool_node_link" class="tool_button push_button_pressed" title="Link Control Points"></div>
           <div class="tool_sep"></div>
-          <se-input id="path_node_x" data-attr="x" inputsize="41px" title="Change node's x coordinate" type="text" label="x:"></se-input>
-          <se-input id="path_node_y" data-attr="y" inputsize="41px" title="Change node's y coordinate" type="text" label="y:"></se-input>
+          <se-input id="path_node_x" data-attr="x" size="4" title="Change node's x coordinate" label="x:"></se-input>
+          <se-input id="path_node_y" data-attr="y" size="4" title="Change node's y coordinate" label="y:"></se-input>
           <select id="seg_type" title="Change Segment type">
             <option id="straight_segments" selected="selected" value="4">Straight</option>
             <option id="curve_segments" value="6">Curve</option>
@@ -375,7 +375,7 @@
                 <div id="stroke_bg"></div>
                 <div id="stroke_color" class="color_block" title="Change stroke color"></div>
               </div>
-              <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>
+              <se-spin-input id="stroke_width" min=0 max=99 step=0.1 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">
diff --git a/src/editor/svgedit.css b/src/editor/svgedit.css
index 253f0888..54191e60 100644
--- a/src/editor/svgedit.css
+++ b/src/editor/svgedit.css
@@ -526,10 +526,6 @@ div.palette_item:first-child {
   text-decoration: underline;
 }
 
-#tools_top > div, #tools_top {
-  line-height: 26px;
-}
-
 div.toolset,
 div.toolset > * {
   float: left;
diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js
index 78cd5804..521a041a 100644
--- a/src/editor/svgedit.js
+++ b/src/editor/svgedit.js
@@ -1001,8 +1001,6 @@ editor.init = () => {
 
         ungroup: 'shape_ungroup.png',
         unlink_use: 'unlink_use.png',
-        width: 'width.png',
-        height: 'height.png',
         c_radius: 'c_radius.png',
         angle: 'angle.png',
         blur: 'blur.png',
@@ -4773,30 +4771,6 @@ editor.init = () => {
 
   $(window).bind('load resize', centerCanvas);
 
-  /**
-   * @type {module:jQuerySpinButton.StepCallback}
-   */
-  function stepFontSize (elem, step) {
-    const origVal = Number(elem.value);
-    const sugVal = origVal + step;
-    const increasing = sugVal >= origVal;
-    if (step === 0) { return origVal; }
-
-    if (origVal >= 24) {
-      if (increasing) {
-        return Math.round(origVal * 1.1);
-      }
-      return Math.round(origVal / 1.1);
-    }
-    if (origVal <= 1) {
-      if (increasing) {
-        return origVal * 2;
-      }
-      return origVal / 2;
-    }
-    return sugVal;
-  }
-
   // function setResolution (w, h, center) {
   //   updateCanvas();
   //   // w -= 0; h -= 0;