From c8a2b70ed4cdb1547312a8a01c10c5eca3895cd7 Mon Sep 17 00:00:00 2001
From: JFH <20402845+jfhenon@users.noreply.github.com>
Date: Sat, 21 Nov 2020 17:11:13 +0100
Subject: [PATCH] progress on spin button

---
 src/editor/components/seDropdown.js       |   1 -
 src/editor/components/seExplorerButton.js |   1 -
 src/editor/components/seSpinInput.js      |  20 +-
 src/editor/index.html                     |   8 +-
 src/editor/spinbtn/jQuery.SpinButton.css  |  41 ---
 src/editor/spinbtn/jQuery.SpinButton.js   | 328 ----------------------
 src/editor/spinbtn/spinbtn_updn.png       | Bin 572 -> 0 bytes
 src/editor/svgedit.js                     |  14 +-
 8 files changed, 24 insertions(+), 389 deletions(-)
 delete mode 100644 src/editor/spinbtn/jQuery.SpinButton.css
 delete mode 100644 src/editor/spinbtn/jQuery.SpinButton.js
 delete mode 100644 src/editor/spinbtn/spinbtn_updn.png

diff --git a/src/editor/components/seDropdown.js b/src/editor/components/seDropdown.js
index 981ce4d9..0a61f5a5 100644
--- a/src/editor/components/seDropdown.js
+++ b/src/editor/components/seDropdown.js
@@ -74,7 +74,6 @@ class Dropdown extends ListComboBox {
    */
   attributeChangedCallback (name, oldValue, newValue) {
     if (oldValue === newValue) return;
-    console.log({this: this, name, oldValue, newValue});
     switch (name) {
     case 'title':
       // this.$span.setAttribute('title', `${newValue} ${shortcut ? `[${shortcut}]` : ''}`);
diff --git a/src/editor/components/seExplorerButton.js b/src/editor/components/seExplorerButton.js
index 0f11b4a1..c18f7569 100644
--- a/src/editor/components/seExplorerButton.js
+++ b/src/editor/components/seExplorerButton.js
@@ -242,7 +242,6 @@ export class ExplorerButton extends HTMLElement {
   connectedCallback () {
     // capture click event on the button to manage the logic
     const onClickHandler = (ev) => {
-      console.log(ev.target);
       ev.stopPropagation();
       switch (ev.target.nodeName) {
       case 'SE-EXPLORERBUTTON':
diff --git a/src/editor/components/seSpinInput.js b/src/editor/components/seSpinInput.js
index 06bf5cec..e04e8ed1 100644
--- a/src/editor/components/seSpinInput.js
+++ b/src/editor/components/seSpinInput.js
@@ -18,6 +18,9 @@ template.innerHTML = `
     right: -4px;
     position: relative;
   }
+  elix-number-spin-box::part(spin-button) {
+    padding: 0px;
+  }
   </style>
   <img src="./images/logo.svg" alt="icon" width="12" height="12" />
   <span id="label">label</span>
@@ -47,7 +50,7 @@ export class SESpinInput extends HTMLElement {
    * @returns {any} observed
    */
   static get observedAttributes () {
-    return ['value', 'label', 'src', 'size'];
+    return ['value', 'label', 'src', 'size', 'min', 'max', 'step'];
   }
   /**
    * @function attributeChangedCallback
@@ -57,6 +60,7 @@ export class SESpinInput extends HTMLElement {
    * @returns {void}
    */
   attributeChangedCallback (name, oldValue, newValue) {
+    console.log(name, newValue);
     if (oldValue === newValue) return;
     switch (name) {
     case 'src':
@@ -64,7 +68,10 @@ export class SESpinInput extends HTMLElement {
       this.$label.remove();
       break;
     case 'size':
-      this.$input.setAttribute('size', newValue);
+      // access to the underlying input box
+      this.$input.shadowRoot.getElementById('input').size = newValue;
+      // below seems mandatory to override the default width style that takes precedence on size
+      this.$input.shadowRoot.getElementById('input').style.width = 'unset';
       break;
     case 'step':
       this.$input.setAttribute('step', newValue);
@@ -155,11 +162,16 @@ export class SESpinInput extends HTMLElement {
    * @returns {void}
    */
   connectedCallback () {
-    this.addEventListener('change', (e) => {
+    this.$input.addEventListener('change', (e) => {
       e.preventDefault();
       this.value = e.target.value;
+      this.dispatchEvent(this.$event);
+    });
+    this.$input.addEventListener('click', (e) => {
+      e.preventDefault();
+      this.value = e.target.value;
+      this.dispatchEvent(this.$event);
     });
-    this.dispatchEvent(this.$event);
   }
 }
 
diff --git a/src/editor/index.html b/src/editor/index.html
index b3267dbd..13fa57f2 100644
--- a/src/editor/index.html
+++ b/src/editor/index.html
@@ -150,7 +150,7 @@
             <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 src="./images/angle.svg" title="Change rotation angle"></se-spin-input>
+          <se-spin-input size="3" 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>
@@ -204,7 +204,7 @@
             <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 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 size="3" 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">
@@ -275,7 +275,7 @@
               </ul>
             </div>
           </div>
-          <se-spin-input id="font_size" min=1 max=1000 step=1 title="Change Font Size" src="./images/fontsize.svg"></se-spin-input>
+          <se-spin-input size="2" 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>
@@ -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 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=1 title="Change stroke width by 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/spinbtn/jQuery.SpinButton.css b/src/editor/spinbtn/jQuery.SpinButton.css
deleted file mode 100644
index 104f1433..00000000
--- a/src/editor/spinbtn/jQuery.SpinButton.css
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
-  Styles to make ordinary <INPUT type="text"/> look like a spinbutton/spinbox control.
-  Use with jQuery.SpinButton.js to provide the spin functionality by reacting to mouse etc.
-  (Requires a reference to the JQuery library found at http://code.jquery.com/)
-  (Hats-off to John Resig for creating the excellent JQuery library. It is fab.)
-
-  This control is achieved with no extra html markup whatsoever and uses unobtrusive javascript.
-
-  Written by George Adamson, Software Unity (george.jquery@softwareunity.com) September 2006.
-  Big improvements added by Mark Gibson, (mgibson@designlinks.net) September 2006.
-
-  Do contact me with comments and suggestions but please don't ask for support.
-  As much as I'd love to help with specific problems I have plenty to get on with already!
-
-  Go ahead and use it in your own projects. This code is provided 'as is'.
-  Sure I've tested in heaps of ways. Its good for me, but you use it at your own risk.
-  SoftwareUnity and I are certainly not responsible if your computer sets fire to the sofa,
-  hacks into the pentagon, hijacks a plane or gives you any kind of hassle whatsoever.
-
-  If you'd like your spin-button image in a different place then you'll need to alter both
-  the CSS below and the javascript isMouseOverUpDn() function to accommodate the new position.
-  You could even have left and right buttons either side of the textbox.
-*/
-
-INPUT.spin-button {
-  /* explicitly put padding for top/bottom/left in here so that Opera displays it better */
-  padding: 2px 20px 2px 2px;
-  background-repeat:no-repeat;    /* Warning: Img may disappear in Firefox if you use 'background-attachment:fixed' ! */
-  background-position:100% 0%;
-  background-image:url('spinbtn_updn.png');
-  background-color:white; /* Needed for Opera */
-}
-
-INPUT.spin-button.up {          /* Change button img when mouse is over the UP-arrow */
-  cursor:pointer;
-  background-position:100% -18px;    /* 18px matches height of 2 visible buttons */
-}
-INPUT.spin-button.down {        /* Change button img when mouse is over the DOWN-arrow */
-  cursor:pointer;
-  background-position:100% -36px;    /* 36px matches height of 2x2 visible buttons */
-}
diff --git a/src/editor/spinbtn/jQuery.SpinButton.js b/src/editor/spinbtn/jQuery.SpinButton.js
deleted file mode 100644
index f79e2d52..00000000
--- a/src/editor/spinbtn/jQuery.SpinButton.js
+++ /dev/null
@@ -1,328 +0,0 @@
-/**
- * SpinButton control.
- *
- * Adds bells and whistles to any ordinary textbox to
- * make it look and feel like a SpinButton Control.
- *
- * Supplies {@link external:jQuery.fn.SpinButton}).
- *
- * Originally written by George Adamson, Software Unity (george.jquery@softwareunity.com) August 2006:
- * - Added min/max options.
- * - Added step size option.
- * - Added bigStep (page up/down) option.
- *
- * Modifications made by Mark Gibson, (mgibson@designlinks.net) September 2006:
- * - Converted to jQuery plugin.
- * - Allow limited or unlimited min/max values.
- * - Allow custom class names, and add class to input element.
- * - Removed global vars.
- * - Reset (to original or through config) when invalid value entered.
- * - Repeat whilst holding mouse button down (with initial pause, like keyboard repeat).
- * - Support mouse wheel in Firefox.
- * - Fix double click in IE.
- * - Refactored some code and renamed some vars.
- *
- * Modifications by Jeff Schiller, June 2009:
- * - provide callback function for when the value changes based on the following
- *   {@link https://www.mail-archive.com/jquery-en@googlegroups.com/msg36070.html}.
- *
- * Modifications by Jeff Schiller, July 2009:
- * - improve styling for widget in Opera.
- * - consistent key-repeat handling cross-browser.
- *
- * Modifications by Alexis Deveria, October 2009:
- * - provide "stepfunc" callback option to allow custom function to run when changing a value.
- * - Made adjustValue(0) only run on certain keyup events, not all.
- *
- * Tested in IE6, Opera9, Firefox 1.5.
- *
- * | Version | Date | Author | Notes |
- * |---------|------|--------|-------|
- * | v1.0 | 11 Aug 2006 | George Adamson | First release |
- * | v1.1 | Aug 2006 | George Adamson | Minor enhancements |
- * | v1.2 | 27 Sep 2006 | Mark Gibson | Major enhancements |
- * | v1.3a | 28 Sep 2006 | George Adamson | Minor enhancements |
- * | v1.4 | 18 Jun 2009 | Jeff Schiller | Added callback function |
- * | v1.5 | 06 Jul 2009 | Jeff Schiller | Fixes for Opera. |
- * | v1.6 | 13 Oct 2009 | Alexis Deveria | Added stepfunc function |
- * | v1.7 | 21 Oct 2009 | Alexis Deveria | Minor fixes.<br />Fast-repeat for keys and live updating as you type. |
- * | v1.8 | 12 Jan 2010 | Benjamin Thomas | Fixes for mouseout behavior.<br />Added smallStep |
- * | v1.9 | 20 May 2018 | Brett Zamir | Avoid SVGEdit dependency via `stateObj` config;<br />convert to ES6 module |
- * .
- *
- * @module jQuerySpinButton
- * @example
-  // Create group of settings to initialise spinbutton(s). (Optional)
-  const myOptions = {
-     min: 0, // Set lower limit.
-     max: 100, // Set upper limit.
-     step: 1, // Set increment size.
-     smallStep: 0.5, // Set shift-click increment size.
-     stateObj: {tool_scale: 1}, // Object to allow passing in live-updating scale
-     spinClass: mySpinBtnClass, // CSS class to style the spinbutton. (Class also specifies url of the up/down button image.)
-     upClass: mySpinUpClass, // CSS class for style when mouse over up button.
-     downClass: mySpinDnClass // CSS class for style when mouse over down button.
-  };
-
-  $(function () {
-     // Initialise INPUT element(s) as SpinButtons: (passing options if desired)
-     $('#myInputElement').SpinButton(myOptions);
-  });
- */
-/**
- * @function module:jQuerySpinButton.jQuerySpinButton
- * @param {external:jQuery} $ The jQuery object to which to add the plug-in
- * @returns {external:jQuery}
-*/
-export default function jQueryPluginSpinButton ($) {
-  /**
-  * @callback module:jQuerySpinButton.StepCallback
-  * @param {external:jQuery} thisArg Value of `this`
-  * @param {Float} i Value to adjust
-  * @returns {Float}
-  */
-  /**
-  * @callback module:jQuerySpinButton.ValueCallback
-  * @param {external:jQuery.fn.SpinButton} thisArg Spin Button; check its `value` to see how it was changed.
-  * @returns {void}
-  */
-  /**
-   * @typedef {PlainObject} module:jQuerySpinButton.SpinButtonConfig
-   * @property {Float} min Set lower limit
-   * @property {Float} max Set upper limit.
-   * @property {Float} step Set increment size.
-   * @property {module:jQuerySpinButton.StepCallback} stepfunc Custom function to run when changing a value; called with `this` of object and the value to adjust and returns a float.
-   * @property {module:jQuerySpinButton.ValueCallback} callback Called after value adjusted (with `this` of object)
-   * @property {Float} smallStep Set shift-click increment size.
-   * @property {PlainObject} stateObj Object to allow passing in live-updating scale
-   * @property {Float} stateObj.tool_scale
-   * @property {string} spinClass CSS class to style the spinbutton. (Class also specifies url of the up/down button image.)
-   * @property {string} upClass CSS class for style when mouse over up button.
-   * @property {string} downClass CSS class for style when mouse over down button.
-   * @property {Float} page Value to be adjusted on page up/page down
-   * @property {Float} reset Reset value when invalid value entered
-   * @property {Float} delay Millisecond delay
-   * @property {Float} interval Millisecond interval
-  */
-  /**
-  * @function external:jQuery.fn.SpinButton
-  * @param {module:jQuerySpinButton.SpinButtonConfig} cfg
-  * @returns {external:jQuery}
-  */
-  $.fn.SpinButton = function (cfg) {
-    cfg = cfg || {};
-
-    /**
-     *
-     * @param {Element} el
-     * @param {"offsetLeft"|"offsetTop"} prop
-     * @returns {Integer}
-     */
-    function coord (el, prop) {
-      const b = document.body;
-
-      let c = el[prop];
-      while ((el = el.offsetParent) && (el !== b)) {
-        if (!$.browser.msie || (el.currentStyle.position !== 'relative')) {
-          c += el[prop];
-        }
-      }
-
-      return c;
-    }
-
-    return this.each(function () {
-      this.repeating = false;
-
-      // Apply specified options or defaults:
-      // (Ought to refactor this some day to use $.extend() instead)
-      this.spinCfg = {
-        // min: cfg.min ? Number(cfg.min) : null,
-        // max: cfg.max ? Number(cfg.max) : null,
-        min: !isNaN(Number.parseFloat(cfg.min)) ? Number(cfg.min) : null, // Fixes bug with min:0
-        max: !isNaN(Number.parseFloat(cfg.max)) ? Number(cfg.max) : null,
-        step: cfg.step ? Number(cfg.step) : 1,
-        stepfunc: cfg.stepfunc || false,
-        page: cfg.page ? Number(cfg.page) : 10,
-        upClass: cfg.upClass || 'up',
-        downClass: cfg.downClass || 'down',
-        reset: cfg.reset || this.value,
-        delay: cfg.delay ? Number(cfg.delay) : 500,
-        interval: cfg.interval ? Number(cfg.interval) : 100,
-        _btn_width: 20,
-        _direction: null,
-        _delay: null,
-        _repeat: null,
-        callback: cfg.callback || null
-      };
-
-      // if a smallStep isn't supplied, use half the regular step
-      this.spinCfg.smallStep = cfg.smallStep || this.spinCfg.step / 2;
-
-      this.adjustValue = function (i) {
-        let v;
-        if (isNaN(this.value)) {
-          v = this.spinCfg.reset;
-        } else if (typeof this.spinCfg.stepfunc === 'function') {
-          v = this.spinCfg.stepfunc(this, i);
-        } else {
-          // weirdest JavaScript bug ever: 5.1 + 0.1 = 5.199999999
-          v = Number((Number(this.value) + Number(i)).toFixed(5));
-        }
-        if (this.spinCfg.min !== null) { v = Math.max(v, this.spinCfg.min); }
-        if (this.spinCfg.max !== null) { v = Math.min(v, this.spinCfg.max); }
-        this.value = v;
-        if (typeof this.spinCfg.callback === 'function') {
-          this.spinCfg.callback(this);
-        }
-      };
-
-      $(this)
-        .addClass(cfg.spinClass || 'spin-button')
-
-        .mousemove(function (e) {
-          // Determine which button mouse is over, or not (spin direction):
-          const x = e.pageX || e.x;
-          const y = e.pageY || e.y;
-          const el = e.target;
-          const scale = cfg.stateObj.tool_scale || 1;
-          const height = $(el).height() / 2;
-
-          const direction =
-            (x > coord(el, 'offsetLeft') +
-              el.offsetWidth * scale - this.spinCfg._btn_width)
-              ? ((y < coord(el, 'offsetTop') + height * scale) ? 1 : -1)
-              : 0;
-
-          if (direction !== this.spinCfg._direction) {
-            // Style up/down buttons:
-            switch (direction) {
-            case 1: // Up arrow:
-              $(this).removeClass(this.spinCfg.downClass).addClass(this.spinCfg.upClass);
-              break;
-            case -1: // Down arrow:
-              $(this).removeClass(this.spinCfg.upClass).addClass(this.spinCfg.downClass);
-              break;
-            default: // Mouse is elsewhere in the textbox
-              $(this).removeClass(this.spinCfg.upClass).removeClass(this.spinCfg.downClass);
-            }
-
-            // Set spin direction:
-            this.spinCfg._direction = direction;
-          }
-        })
-
-        .mouseout(function () {
-          // Reset up/down buttons to their normal appearance when mouse moves away:
-          $(this).removeClass(this.spinCfg.upClass).removeClass(this.spinCfg.downClass);
-          this.spinCfg._direction = null;
-          window.clearInterval(this.spinCfg._repeat);
-          window.clearTimeout(this.spinCfg._delay);
-        })
-
-        .mousedown(function (e) {
-          if (e.button === 0 && this.spinCfg._direction !== 0) {
-            // Respond to click on one of the buttons:
-            const stepSize = e.shiftKey ? this.spinCfg.smallStep : this.spinCfg.step;
-
-            const adjust = () => {
-              this.adjustValue(this.spinCfg._direction * stepSize);
-            };
-
-            adjust();
-
-            // Initial delay before repeating adjustment
-            this.spinCfg._delay = window.setTimeout(() => {
-              adjust();
-              // Repeat adjust at regular intervals
-              this.spinCfg._repeat = window.setInterval(adjust, this.spinCfg.interval);
-            }, this.spinCfg.delay);
-          }
-        })
-
-        .mouseup(function (e) {
-          // Cancel repeating adjustment
-          window.clearInterval(this.spinCfg._repeat);
-          window.clearTimeout(this.spinCfg._delay);
-        })
-
-        .dblclick(function (e) {
-          if ($.browser.msie) {
-            this.adjustValue(this.spinCfg._direction * this.spinCfg.step);
-          }
-        })
-
-        .keydown(function (e) {
-          // Respond to up/down arrow keys.
-          switch (e.keyCode) {
-          case 38: this.adjustValue(this.spinCfg.step); break; // Up
-          case 40: this.adjustValue(-this.spinCfg.step); break; // Down
-          case 33: this.adjustValue(this.spinCfg.page); break; // PageUp
-          case 34: this.adjustValue(-this.spinCfg.page); break; // PageDown
-          }
-        })
-
-        /*
-        http://unixpapa.com/js/key.html describes the current state-of-affairs for
-        key repeat events:
-        - Safari 3.1 changed their model so that keydown is reliably repeated going forward
-        - Firefox and Opera still only repeat the keypress event, not the keydown
-        */
-        .keypress(function (e) {
-          if (this.repeating) {
-            // Respond to up/down arrow keys.
-            switch (e.keyCode) {
-            case 38: this.adjustValue(this.spinCfg.step); break; // Up
-            case 40: this.adjustValue(-this.spinCfg.step); break; // Down
-            case 33: this.adjustValue(this.spinCfg.page); break; // PageUp
-            case 34: this.adjustValue(-this.spinCfg.page); break; // PageDown
-            }
-          // we always ignore the first keypress event (use the keydown instead)
-          } else {
-            this.repeating = true;
-          }
-        })
-
-        // clear the 'repeating' flag
-        .keyup(function (e) {
-          this.repeating = false;
-          switch (e.keyCode) {
-          case 38: // Up
-          case 40: // Down
-          case 33: // PageUp
-          case 34: // PageDown
-          case 13: this.adjustValue(0); break; // Enter/Return
-          }
-        })
-
-        .bind('mousewheel', function (e) {
-          // Respond to mouse wheel in IE. (It returns up/dn motion in multiples of 120)
-          if (e.wheelDelta >= 120) {
-            this.adjustValue(this.spinCfg.step);
-          } else if (e.wheelDelta <= -120) {
-            this.adjustValue(-this.spinCfg.step);
-          }
-
-          e.preventDefault();
-        })
-
-        .change(function (e) {
-          this.adjustValue(0);
-        });
-
-      if (this.addEventListener) {
-        // Respond to mouse wheel in Firefox
-        this.addEventListener('DOMMouseScroll', function (e) {
-          if (e.detail > 0) {
-            this.adjustValue(-this.spinCfg.step);
-          } else if (e.detail < 0) {
-            this.adjustValue(this.spinCfg.step);
-          }
-
-          e.preventDefault();
-        });
-      }
-    });
-  };
-  return $;
-}
diff --git a/src/editor/spinbtn/spinbtn_updn.png b/src/editor/spinbtn/spinbtn_updn.png
deleted file mode 100644
index 32f00ab21327488dff6936b3acb87d3765ef54b7..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 572
zcmV-C0>k}@P)<h;3K|Lk000e1NJLTq000pH001@!0ssI2uBPQ900006bW%=J0O<hq
z0Q#iIVle;!0r5#hK~#7FV|e-H7paJPdT!soT~S_k`SK-V^}KlT!a!e7L|6!jUcGun
zlpcRSUsV-l2nq@cB&?^ps>;pP#oNns<%$(vo*qDUU2P3MJ&PAFN=->lOHDa@_6(4F
z>eMM97l@WEU4l~&M8)o1yWk=_c5H_T;?#3s|Na99_M^FE-@bhZ4<5v+XZEaFK!m1e
z#`Nj4XV1o|2NJ$hrc8#5^!N8e1aayqFDr$p*sy**kh^;IDhRi-vI1XNr>CU?qeV+o
z18AG3hB}a)nVCU2PII!efYAa$dAT{nrnidna$xvYRaTIau3x@bxpD<Cv5}J(hKZj2
z4?k)2AKrBPJ+XSOzW&B<;lm~>3q&{GekZKw&9~o@F?HOU77!$z*a8$Gpht7^39-O@
ziSY8AT@QgIkgYlG3_d+cTkk7YEK#gnw&L1bP`17D2FL}X^c@dy>Vc@}I`JGX(thk2
zL=dN*iKkyoKJx<2CH<#fOgsB>G@p*<(;-}+j@GB4>+b*&dXTKSg%HHl11Sf+R^Eh*
zI4`>a5yYuSz3&i2MaBNdKyKllM-Z;Y#H0Aa8d$gii%(vC2cT^{diFrJa@`ujajM*~
z4p@9bkV?}=qSC>$&p&~c0<ateI_Wv_Y4rM=Z@}^zSSbu>{s916BHtM>{9K*@0000<
KMNUMnLSTZFF$Kl|

diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js
index 521a041a..32a9233a 100644
--- a/src/editor/svgedit.js
+++ b/src/editor/svgedit.js
@@ -36,7 +36,6 @@ import Layer from '../common/layer.js';
 import jQueryPluginJSHotkeys from './js-hotkeys/jquery.hotkeys.min.js';
 import jQueryPluginSVGIcons from './svgicons/jQuery.svgIcons.js';
 import jQueryPluginJGraduate from './jgraduate/jQuery.jGraduate.js';
-import jQueryPluginSpinButton from './spinbtn/jQuery.SpinButton.js';
 import jQueryPluginContextMenu from './contextmenu/jQuery.contextMenu.js';
 import jQueryPluginJPicker from './jgraduate/jQuery.jPicker.js';
 import jQueryPluginDBox from '../svgcanvas/dbox.js';
@@ -52,7 +51,7 @@ const editor = {};
 
 const $ = [
   jQueryPluginJSHotkeys, jQueryPluginSVGIcons, jQueryPluginJGraduate,
-  jQueryPluginSpinButton, jQueryPluginContextMenu, jQueryPluginJPicker
+  jQueryPluginContextMenu, jQueryPluginJPicker
 ].reduce((jq, func) => func(jq), jQuery);
 
 const homePage = 'https://github.com/SVG-Edit/svgedit';
@@ -64,7 +63,7 @@ const homePage = 'https://github.com/SVG-Edit/svgedit';
 /**
 * @type {Float}
 */
-editor.tool_scale = 1; // Dependent on icon size, so any use to making configurable instead? Used by `jQuery.SpinButton.js`
+editor.tool_scale = 1;
 /**
 * @type {Integer}
 */
@@ -2336,7 +2335,7 @@ editor.init = () => {
   };
 
   /**
-  * @type {module:jQuerySpinButton.ValueCallback}
+  * @type {module}
   */
   const changeZoom = (value) => {
     switch (value) {
@@ -2548,7 +2547,6 @@ editor.init = () => {
     * @property {string|Integer} [colnum] Added as part of the option list class.
     * @property {string} [label] Label associated with the tool, visible in the UI
     * @property {Integer} [size] Value of the "size" attribute of the tool input
-    * @property {module:jQuerySpinButton.SpinButtonConfig} [spindata] When added to a tool of type "input", this tool becomes a "spinner" which allows the number to be in/decreased.
     */
     if (ext.context_tools) {
       $.each(ext.context_tools, function (i, tool) {
@@ -2623,10 +2621,6 @@ editor.init = () => {
           // Add to given tool.panel
           const inp = $(html).appendTo(panel).find('input');
 
-          if (tool.spindata) {
-            inp.SpinButton(tool.spindata);
-          }
-
           if (tool.events) {
             $.each(tool.events, function (evt, func) {
               inp.bind(evt, func);
@@ -2919,7 +2913,7 @@ editor.init = () => {
   $('#image_save_opts input').val([editor.pref('img_save')]);
 
   /**
-  * @type {module:jQuerySpinButton.ValueCallback}
+  * @type {module}
   */
   const changeRectRadius = function (e) {
     svgCanvas.setRectRadius(e.target.value);