fix(useDrag): calculate offset for drag handlers

example/package-lock.json

@@ -27,14 +27,14 @@
     },
     "..": {
       "name": "react-flow-renderer",
-      "version": "10.0.9-next.0",
+      "version": "10.1.0",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.17.8",
         "classcat": "^5.0.3",
+        "d3-drag": "^3.0.0",
         "d3-selection": "^3.0.0",
         "d3-zoom": "^3.0.0",
-        "react-draggable": "^4.4.4",
         "zustand": "^3.7.1"
       },
       "devDependencies": {
@@ -3270,13 +3270,6 @@
         "mimic-response": "^1.0.0"
       }
     },
-    "../node_modules/clsx": {
-      "version": "1.1.1",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "../node_modules/color-convert": {
       "version": "1.9.3",
       "dev": true,
@@ -7302,15 +7295,6 @@
         "node": ">=0.12"
       }
     },
-    "../node_modules/prop-types": {
-      "version": "15.8.1",
-      "license": "MIT",
-      "dependencies": {
-        "loose-envify": "^1.4.0",
-        "object-assign": "^4.1.1",
-        "react-is": "^16.13.1"
-      }
-    },
     "../node_modules/protocols": {
       "version": "1.4.8",
       "dev": true,
@@ -7465,22 +7449,6 @@
         "react": "17.0.2"
       }
     },
-    "../node_modules/react-draggable": {
-      "version": "4.4.4",
-      "license": "MIT",
-      "dependencies": {
-        "clsx": "^1.1.1",
-        "prop-types": "^15.6.0"
-      },
-      "peerDependencies": {
-        "react": ">= 16.3.0",
-        "react-dom": ">= 16.3.0"
-      }
-    },
-    "../node_modules/react-is": {
-      "version": "16.13.1",
-      "license": "MIT"
-    },
     "../node_modules/read-cache": {
       "version": "1.0.0",
       "dev": true,
@@ -34076,6 +34044,7 @@
         "babel-preset-react-app": "^10.0.1",
         "classcat": "^5.0.3",
         "cypress": "^9.5.1",
+        "d3-drag": "^3.0.0",
         "d3-selection": "^3.0.0",
         "d3-zoom": "^3.0.0",
         "postcss": "^8.4.8",
@@ -34084,7 +34053,6 @@
         "prettier": "2.5.1",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
-        "react-draggable": "^4.4.4",
         "release-it": "^14.12.5",
         "rimraf": "^3.0.2",
         "rollup": "^2.70.1",
@@ -36158,9 +36126,6 @@
             "mimic-response": "^1.0.0"
           }
         },
-        "clsx": {
-          "version": "1.1.1"
-        },
         "color-convert": {
           "version": "1.9.3",
           "dev": true,
@@ -38625,14 +38590,6 @@
           "version": "0.2.0",
           "dev": true
         },
-        "prop-types": {
-          "version": "15.8.1",
-          "requires": {
-            "loose-envify": "^1.4.0",
-            "object-assign": "^4.1.1",
-            "react-is": "^16.13.1"
-          }
-        },
         "protocols": {
           "version": "1.4.8",
           "dev": true
@@ -38724,16 +38681,6 @@
             "scheduler": "^0.20.2"
           }
         },
-        "react-draggable": {
-          "version": "4.4.4",
-          "requires": {
-            "clsx": "^1.1.1",
-            "prop-types": "^15.6.0"
-          }
-        },
-        "react-is": {
-          "version": "16.13.1"
-        },
         "read-cache": {
           "version": "1.0.0",
           "dev": true,

example/src/UpdatableEdge/index.tsx

@@ -86,8 +86,8 @@ const UpdatableEdge = () => {
       snapToGrid={true}
       onEdgeUpdate={onEdgeUpdate}
       onConnect={onConnect}
-      onEdgeUpdateStart={onEdgeUpdateStart}
+      // onEdgeUpdateStart={onEdgeUpdateStart}
-      onEdgeUpdateEnd={onEdgeUpdateEnd}
+      // onEdgeUpdateEnd={onEdgeUpdateEnd}
     >
       <Controls />
     </ReactFlow>

src/components/Nodes/wrapNode.tsx

@@ -215,6 +215,7 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
       disabled: !isDraggable,
       noDragClassName,
       handleSelector: dragHandle,
+      nodeId: id,
     });
 
     if (hidden) {

src/hooks/useDrag.ts

@@ -16,27 +16,39 @@ type UseDragParams = {
   noDragClassName?: string;
   // @TODO: implement handleSelector functionality
   handleSelector?: string;
+  nodeId?: string;
 };
 
-function useDrag({ onStart, onDrag, onStop, nodeRef, disabled = false, noDragClassName }: UseDragParams) {
+function useDrag({ onStart, onDrag, onStop, nodeRef, disabled = false, noDragClassName, nodeId }: UseDragParams) {
   const store = useStoreApi();
 
   useEffect(() => {
-    if (nodeRef?.current) {
+    console.log(nodeId);
+    if (nodeRef?.current && nodeId) {
       const selection = select(nodeRef.current);
+      const startPos = { x: 0, y: 0 };
 
       if (disabled) {
         selection.on('.drag', null);
       } else {
         const dragHandler = drag()
-          .on('start', onStart)
+          .on('start', (event: UseDragEvent) => {
-          .on('drag', (event: UseDragEvent) => {
+            const node = store.getState().nodeInternals.get(nodeId);
-            const [, , scale] = store.getState().transform;
+            const [tx, ty, scale] = store.getState().transform;
+
+            startPos.x = event.x / scale - (node?.position?.x || 0) - tx;
+            startPos.y = event.y / scale - (node?.position?.y || 0) - ty;
 
+            // @TODO: we need to use snapGrid and snapToGrid from the store here
+            // @TODO: don't use event.dx but work with event.x somehow in order to prevent lagging / slower node movement than mouse movement
+            onStart(event);
+          })
+          .on('drag', (event: UseDragEvent) => {
+            const [tx, ty, scale] = store.getState().transform;
             // @TODO: we need to use snapGrid and snapToGrid from the store here
             // @TODO: don't use event.dx but work with event.x somehow in order to prevent lagging / slower node movement than mouse movement
 
-            onDrag(event, { dx: event.dx / scale, dy: event.dy / scale });
+            onDrag(event, { dx: event.x / scale - startPos.x - tx, dy: event.y / scale - startPos.y - ty });
           })
           .on('end', onStop)
           .filter((event: any) => !event.ctrlKey && !event.button && !event.target.className.includes(noDragClassName));
@@ -48,7 +60,7 @@ function useDrag({ onStart, onDrag, onStop, nodeRef, disabled = false, noDragCla
         };
       }
     }
-  }, [disabled, noDragClassName]);
+  }, [disabled, noDragClassName, nodeId]);
 
   return null;
 }

src/store/utils.ts

@@ -133,7 +133,7 @@ export function createPositionChange({
   };
 
   if (diff) {
-    const nextPosition = { x: node.position.x + diff.x, y: node.position.y + diff.y };
+    const nextPosition = { x: diff.x, y: diff.y };
 
     let currentExtent = node.extent || nodeExtent;