use npm dragmove

.gitignore

@@ -1,21 +1,16 @@
 ignore
 node_modules
-
-svgedit-custom.css
-
 docs/jsdoc
-
 cypress/results
 cypress/screenshots
 cypress/videos
 cypress.env.json
-
 coverage
 instrumented
 .nyc_output
 mochawesome-report
 mochawesome.json
-
 .vscode
 .eslintcache
 .DS_Store
+.idea

demos/canvas.html

@@ -4,7 +4,6 @@
     <meta charset="utf-8" />
     <title>Minimal demo of SvgCanvas</title>
     <script src="../src/editor/jquery.min.js"></script>
-    <script src="../src/editor/jquery-ui/jquery-ui-1.8.17.custom.min.js"></script>
     <style> #svgroot { overflow: hidden; } </style>
     <link rel="shortcut icon" type="image/x-icon" href="../src/editor/images/logo.png" />
   </head>

package-lock.json

@@ -9,6 +9,7 @@
       "license": "(MIT AND Apache-2.0 AND ISC AND LGPL-3.0-or-later AND X11)",
       "dependencies": {
         "@babel/polyfill": "7.12.1",
+        "@knadh/dragmove": "^0.1.2",
         "@web/dev-server-rollup": "0.3.2",
         "canvg": "3.0.7",
         "core-js": "3.9.1",
@@ -3244,6 +3245,11 @@
         "regenerator-runtime": "^0.13.3"
       }
     },
+    "node_modules/@knadh/dragmove": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@knadh/dragmove/-/dragmove-0.1.2.tgz",
+      "integrity": "sha512-OxfFFHqrpenz9oVxi8AngzrF7+aoGZCvNOGOVlxu+6UlG0dW68hJJeNt7RvVlg3dNK6uaHsju+bH+/NXaRUMTQ=="
+    },
     "node_modules/@mdn/browser-compat-data": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@mdn/browser-compat-data/-/browser-compat-data-2.0.7.tgz",
@@ -26626,6 +26632,11 @@
         "regenerator-runtime": "^0.13.3"
       }
     },
+    "@knadh/dragmove": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@knadh/dragmove/-/dragmove-0.1.2.tgz",
+      "integrity": "sha512-OxfFFHqrpenz9oVxi8AngzrF7+aoGZCvNOGOVlxu+6UlG0dW68hJJeNt7RvVlg3dNK6uaHsju+bH+/NXaRUMTQ=="
+    },
     "@mdn/browser-compat-data": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@mdn/browser-compat-data/-/browser-compat-data-2.0.7.tgz",

package.json

@@ -107,6 +107,7 @@
   ],
   "dependencies": {
     "@babel/polyfill": "7.12.1",
+    "@knadh/dragmove": "^0.1.2",
     "@web/dev-server-rollup": "0.3.2",
     "canvg": "3.0.7",
     "core-js": "3.9.1",

src/editor/dragmove/dragmove.js

@@ -1,96 +0,0 @@
-// https://github.com/knadh/dragmove.js
-// Kailash Nadh (c) 2020.
-// MIT License.
-
-let _loaded = false;
-let _callbacks = [];
-const _isTouch = window.ontouchstart !== undefined;
-
-export const dragmove = function(target, handler, parent, onStart, onEnd, onDrag) {
-  // Register a global event to capture mouse moves (once).
-  if (!_loaded) {
-    document.addEventListener(_isTouch ? "touchmove" : "mousemove", function(e) {
-      let c = e;
-      if (e.touches) {
-        c = e.touches[0];
-      }
-
-      // On mouse move, dispatch the coords to all registered callbacks.
-      for (var i = 0; i < _callbacks.length; i++) {
-        _callbacks[i](c.clientX, c.clientY);
-      }
-    });
-  }
-
-  _loaded = true;
-  let isMoving = false, hasStarted = false;
-  let startX = 0, startY = 0, lastX = 0, lastY = 0;
-
-  // On the first click and hold, record the offset of the pointer in relation
-  // to the point of click inside the element.
-  handler.addEventListener(_isTouch ? "touchstart" : "mousedown", function(e) {
-    e.stopPropagation();
-    e.preventDefault();
-    if (target.dataset.dragEnabled === "false") {
-      return;
-    }
-
-    let c = e;
-    if (e.touches) {
-      c = e.touches[0];
-    }
-
-    isMoving = true;
-    startX = target.offsetLeft - c.clientX;
-    startY = target.offsetTop - c.clientY;
-  });
-
-  // On leaving click, stop moving.
-  document.addEventListener(_isTouch ? "touchend" : "mouseup", function(e) {   
-    if (onEnd && hasStarted) {
-      onEnd(target, parent, parseInt(target.style.left), parseInt(target.style.top));
-    }
-
-    isMoving = false;
-    hasStarted = false;
-  });
-
-  // On leaving click, stop moving.
-  document.addEventListener(_isTouch ? "touchmove" : "mousemove", function(e) {   
-    if (onDrag && hasStarted) {
-      onDrag(target, parseInt(target.style.left), parseInt(target.style.top));
-    }
-  });  
-
-  // Register mouse-move callback to move the element.
-  _callbacks.push(function move(x, y) {
-    if (!isMoving) {
-      return;
-    }
-
-    if (!hasStarted) {
-      hasStarted = true;
-      if (onStart) {
-        onStart(target, lastX, lastY);
-      }
-    }
-
-    lastX = x + startX;
-    lastY = y + startY;
-
-    // If boundary checking is on, don't let the element cross the viewport.
-    if (target.dataset.dragBoundary === "true") {
-      if (lastX < 1 || lastX >= window.innerWidth - target.offsetWidth) {
-        return;
-      }
-      if (lastY < 1 || lastY >= window.innerHeight - target.offsetHeight) {
-        return;
-      }
-    }
-
-    target.style.left = lastX + "px";
-    target.style.top = lastY + "px";
-  });
-}
-
-export { dragmove as default };

src/editor/extensions/ext-overview_window/ext-overview_window.js

@@ -6,7 +6,7 @@
  * @copyright 2013 James Sacksteder
  *
  */
-import { dragmove } from '../../dragmove/dragmove.js';
+import { dragmove } from '@knadh/dragmove';
 export default {
   name: 'overview_window',
   init ({$, isChrome}) {