From 4afb386124ccc955b1771f98210f633ec5c9ef12 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christopher=20M=C3=B6ller?= Date: Thu, 14 Apr 2022 14:16:19 +0200 Subject: [PATCH] fix(useDrag): calculate offset for drag handlers --- example/package-lock.json | 59 ++--------------------------- example/src/UpdatableEdge/index.tsx | 4 +- src/components/Nodes/wrapNode.tsx | 1 + src/hooks/useDrag.ts | 26 +++++++++---- src/store/utils.ts | 2 +- 5 files changed, 26 insertions(+), 66 deletions(-) diff --git a/example/package-lock.json b/example/package-lock.json index 33beb88f..ae92e9c1 100644 --- a/example/package-lock.json +++ b/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, diff --git a/example/src/UpdatableEdge/index.tsx b/example/src/UpdatableEdge/index.tsx index 0e835bc2..1f55bc6e 100644 --- a/example/src/UpdatableEdge/index.tsx +++ b/example/src/UpdatableEdge/index.tsx @@ -86,8 +86,8 @@ const UpdatableEdge = () => { snapToGrid={true} onEdgeUpdate={onEdgeUpdate} onConnect={onConnect} - onEdgeUpdateStart={onEdgeUpdateStart} - onEdgeUpdateEnd={onEdgeUpdateEnd} + // onEdgeUpdateStart={onEdgeUpdateStart} + // onEdgeUpdateEnd={onEdgeUpdateEnd} > diff --git a/src/components/Nodes/wrapNode.tsx b/src/components/Nodes/wrapNode.tsx index 1c0857d9..c4ca752e 100644 --- a/src/components/Nodes/wrapNode.tsx +++ b/src/components/Nodes/wrapNode.tsx @@ -215,6 +215,7 @@ export default (NodeComponent: ComponentType) => { disabled: !isDraggable, noDragClassName, handleSelector: dragHandle, + nodeId: id, }); if (hidden) { diff --git a/src/hooks/useDrag.ts b/src/hooks/useDrag.ts index 19e37924..97c50624 100644 --- a/src/hooks/useDrag.ts +++ b/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; } diff --git a/src/store/utils.ts b/src/store/utils.ts index 621e59df..49ad662f 100644 --- a/src/store/utils.ts +++ b/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;