designer

packages/web/src/utility/moveDrag.ts

@@ -0,0 +1,42 @@
+export default function moveDrag(node, [onStart, onMove, onEnd]) {
+  let startX = null;
+  let startY = null;
+
+  const handleMoveDown = e => {
+    startX = e.clientX;
+    startY = e.clientY;
+    document.addEventListener('mousemove', handleMoveMove, true);
+    document.addEventListener('mouseup', handleMoveEnd, true);
+    onStart();
+  };
+
+  const handleMoveMove = e => {
+    e.preventDefault();
+    const diffX = e.clientX - startX;
+    startX = e.clientX;
+    const diffY = e.clientY - startY;
+    startY = e.clientY;
+
+    onMove(diffX, diffY);
+  };
+  const handleMoveEnd = e => {
+    e.preventDefault();
+    startX = null;
+    startY = null;
+    document.removeEventListener('mousemove', handleMoveMove, true);
+    document.removeEventListener('mouseup', handleMoveEnd, true);
+    onEnd();
+  };
+
+  node.addEventListener('mousedown', handleMoveDown);
+
+  return {
+    destroy() {
+      node.removeEventListener('mousedown', handleMoveDown);
+      if (startX != null || startY != null) {
+        document.removeEventListener('mousemove', handleMoveMove, true);
+        document.removeEventListener('mouseup', handleMoveEnd, true);
+      }
+    },
+  };
+}