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;