alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(useDrag): calculate offset for drag handlers

Browse Source
This commit is contained in:
Christopher Möller
2022-04-14 14:16:19 +02:00
parent 18a3f887fa
commit 4afb386124
5 changed files with 26 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/package-lock.json
Generated
+3 -56
View File
@@ -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
+2 -2
View File
@@ -86,8 +86,8 @@ const UpdatableEdge = () => {
snapToGrid={true}
onEdgeUpdate={onEdgeUpdate}
onConnect={onConnect}
onEdgeUpdateStart={onEdgeUpdateStart}
onEdgeUpdateEnd={onEdgeUpdateEnd}
// onEdgeUpdateStart={onEdgeUpdateStart}
// onEdgeUpdateEnd={onEdgeUpdateEnd}
>
<Controls />
</ReactFlow>
src/components/Nodes/wrapNode.tsx
+1
View File
@@ -215,6 +215,7 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
disabled: !isDraggable,
noDragClassName,
handleSelector: dragHandle,
nodeId: id,
});
if (hidden) {
src/hooks/useDrag.ts
+19 -7
View File
@@ -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
+1 -1
View File
@@ -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;