fix(useDrag): calculate offset for drag handlers

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('drag', (event: UseDragEvent) => {
-            const [, , scale] = store.getState().transform;
+          .on('start', (event: UseDragEvent) => {
+            const node = store.getState().nodeInternals.get(nodeId);
+            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;