diff --git a/example/src/Stress/index.tsx b/example/src/Stress/index.tsx index b076db27..ab88ab9d 100644 --- a/example/src/Stress/index.tsx +++ b/example/src/Stress/index.tsx @@ -23,7 +23,7 @@ const onInit = (reactFlowInstance: ReactFlowInstance) => { console.log(reactFlowInstance.getNodes()); }; -const { nodes: initialNodes, edges: initialEdges } = getNodesAndEdges(5, 5); +const { nodes: initialNodes, edges: initialEdges } = getNodesAndEdges(25, 25); const StressFlow = () => { const [nodes, setNodes] = useState(initialNodes); diff --git a/package-lock.json b/package-lock.json index c1dac9a4..af92ca51 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,9 +11,9 @@ "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": { @@ -3551,14 +3551,6 @@ "mimic-response": "^1.0.0" } }, - "node_modules/clsx": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz", - "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==", - "engines": { - "node": ">=6" - } - }, "node_modules/color-convert": { "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", @@ -5829,7 +5821,8 @@ "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", + "dev": true }, "node_modules/jsbn": { "version": "0.1.1", @@ -6284,6 +6277,7 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "dev": true, "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, @@ -6586,6 +6580,7 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", + "dev": true, "engines": { "node": ">=0.10.0" } @@ -8010,16 +8005,6 @@ "node": ">=0.12" } }, - "node_modules/prop-types": { - "version": "15.8.1", - "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", - "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dependencies": { - "loose-envify": "^1.4.0", - "object-assign": "^4.1.1", - "react-is": "^16.13.1" - } - }, "node_modules/protocols": { "version": "1.4.8", "resolved": "https://registry.npmjs.org/protocols/-/protocols-1.4.8.tgz", @@ -8200,24 +8185,6 @@ "react": "17.0.2" } }, - "node_modules/react-draggable": { - "version": "4.4.4", - "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.4.tgz", - "integrity": "sha512-6e0WdcNLwpBx/YIDpoyd2Xb04PB0elrDrulKUgdrIlwuYvxh5Ok9M+F8cljm8kPXXs43PmMzek9RrB1b7mLMqA==", - "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", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" - }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -12863,11 +12830,6 @@ "mimic-response": "^1.0.0" } }, - "clsx": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz", - "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==" - }, "color-convert": { "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", @@ -14562,7 +14524,8 @@ "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", + "dev": true }, "jsbn": { "version": "0.1.1", @@ -14922,6 +14885,7 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "dev": true, "requires": { "js-tokens": "^3.0.0 || ^4.0.0" } @@ -15136,7 +15100,8 @@ "object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", + "dev": true }, "object-inspect": { "version": "1.10.3", @@ -16121,16 +16086,6 @@ "integrity": "sha1-LMfr6Vn8OmYZwEq029yeRS2GS70=", "dev": true }, - "prop-types": { - "version": "15.8.1", - "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", - "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "requires": { - "loose-envify": "^1.4.0", - "object-assign": "^4.1.1", - "react-is": "^16.13.1" - } - }, "protocols": { "version": "1.4.8", "resolved": "https://registry.npmjs.org/protocols/-/protocols-1.4.8.tgz", @@ -16263,20 +16218,6 @@ "scheduler": "^0.20.2" } }, - "react-draggable": { - "version": "4.4.4", - "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.4.tgz", - "integrity": "sha512-6e0WdcNLwpBx/YIDpoyd2Xb04PB0elrDrulKUgdrIlwuYvxh5Ok9M+F8cljm8kPXXs43PmMzek9RrB1b7mLMqA==", - "requires": { - "clsx": "^1.1.1", - "prop-types": "^15.6.0" - } - }, - "react-is": { - "version": "16.13.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" - }, "read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/package.json b/package.json index 5df9481f..e5a6f318 100644 --- a/package.json +++ b/package.json @@ -42,9 +42,9 @@ "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": { diff --git a/rollup.config.js b/rollup.config.js index f03126eb..7c82a949 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -50,6 +50,7 @@ export const baseConfig = ({ outputOptions = {}, injectCSS = true } = {}) => { 'classcat', 'd3-selection', 'd3-zoom', + 'd3-drag', 'react-draggable', 'zustand', 'zustand/shallow', @@ -109,6 +110,7 @@ export default isProd && !isTesting classcat: 'cc', 'd3-selection': 'd3', 'd3-zoom': 'd3', + 'd3-drag': 'd3', 'react-draggable': 'ReactDraggable', zustand: 'zustand', 'zustand/shallow': 'zustandShallow', diff --git a/src/components/Nodes/wrapNode.tsx b/src/components/Nodes/wrapNode.tsx index b3f9bb21..1c0857d9 100644 --- a/src/components/Nodes/wrapNode.tsx +++ b/src/components/Nodes/wrapNode.tsx @@ -1,5 +1,4 @@ import React, { useEffect, useRef, memo, ComponentType, CSSProperties, useMemo, MouseEvent, useCallback } from 'react'; -import { DraggableCore, DraggableData, DraggableEvent } from 'react-draggable'; import cc from 'classcat'; import shallow from 'zustand/shallow'; @@ -7,6 +6,7 @@ import { useStore, useStoreApi } from '../../store'; import { Provider } from '../../contexts/NodeIdContext'; import { NodeProps, WrapNodeProps, ReactFlowState } from '../../types'; import useMemoizedMouseHandler from './useMemoizedMouseHandler'; +import useDrag, { UseDragEvent, UseDragData } from '../../hooks/useDrag'; const selector = (s: ReactFlowState) => ({ addSelectedNodes: s.addSelectedNodes, @@ -20,7 +20,6 @@ export default (NodeComponent: ComponentType) => { id, type, data, - scale, xPos, yPos, selected, @@ -42,8 +41,6 @@ export default (NodeComponent: ComponentType) => { sourcePosition, targetPosition, hidden, - snapToGrid, - snapGrid, dragging, resizeObserver, dragHandle, @@ -72,11 +69,6 @@ export default (NodeComponent: ComponentType) => { [zIndex, xPos, yPos, hasPointerEvents, style] ); - const grid = useMemo( - () => (snapToGrid ? snapGrid : [1, 1])! as [number, number], - [snapToGrid, snapGrid?.[0], snapGrid?.[1]] - ); - const onMouseEnterHandler = useMemoizedMouseHandler(id, dragging, store.getState, onMouseEnter); const onMouseMoveHandler = useMemoizedMouseHandler(id, dragging, store.getState, onMouseMove); const onMouseLeaveHandler = useMemoizedMouseHandler(id, dragging, store.getState, onMouseLeave); @@ -104,7 +96,7 @@ export default (NodeComponent: ComponentType) => { ); const onDragStart = useCallback( - (event: DraggableEvent) => { + (event: UseDragEvent) => { if (selectNodesOnDrag && isSelectable) { store.setState({ nodesSelectionActive: false }); @@ -123,28 +115,28 @@ export default (NodeComponent: ComponentType) => { if (onNodeDragStart) { const node = store.getState().nodeInternals.get(id)!; - onNodeDragStart(event as MouseEvent, { ...node }); + onNodeDragStart(event.sourceEvent as MouseEvent, { ...node }); } }, [id, selected, selectNodesOnDrag, isSelectable, onNodeDragStart] ); const onDrag = useCallback( - (event: DraggableEvent, draggableData: DraggableData) => { - updateNodePosition({ id, dragging: true, diff: { x: draggableData.deltaX, y: draggableData.deltaY } }); + (event: UseDragEvent, dragPos: UseDragData) => { + updateNodePosition({ id, dragging: true, diff: { x: dragPos.dx, y: dragPos.dy } }); if (onNodeDrag) { const node = store.getState().nodeInternals.get(id)!; - onNodeDrag(event as MouseEvent, { + onNodeDrag(event.sourceEvent as MouseEvent, { ...node, dragging: true, position: { - x: node.position.x + draggableData.deltaX, - y: node.position.y + draggableData.deltaY, + x: node.position.x + dragPos.dx, + y: node.position.y + dragPos.dy, }, positionAbsolute: { - x: (node.positionAbsolute?.x || 0) + draggableData.deltaX, - y: (node.positionAbsolute?.y || 0) + draggableData.deltaY, + x: (node.positionAbsolute?.x || 0) + dragPos.dx, + y: (node.positionAbsolute?.y || 0) + dragPos.dy, }, }); } @@ -153,7 +145,7 @@ export default (NodeComponent: ComponentType) => { ); const onDragStop = useCallback( - (event: DraggableEvent) => { + (event: UseDragEvent) => { // onDragStop also gets called when user just clicks on a node. // Because of that we set dragging to true inside the onDrag handler and handle the click here let node; @@ -168,7 +160,7 @@ export default (NodeComponent: ComponentType) => { } if (onClick && node) { - onClick(event as MouseEvent, { ...node }); + onClick(event.sourceEvent as MouseEvent, { ...node }); } return; @@ -180,7 +172,7 @@ export default (NodeComponent: ComponentType) => { }); if (onNodeDragStop && node) { - onNodeDragStop(event as MouseEvent, { ...node, dragging: false }); + onNodeDragStop(event.sourceEvent as MouseEvent, { ...node, dragging: false }); } }, [id, isSelectable, selectNodesOnDrag, onClick, onNodeDragStop, dragging, selected] @@ -215,6 +207,16 @@ export default (NodeComponent: ComponentType) => { } }, [id, type, sourcePosition, targetPosition]); + useDrag({ + onStart: onDragStart, + onDrag: onDrag, + onStop: onDragStop, + nodeRef: nodeElement, + disabled: !isDraggable, + noDragClassName, + handleSelector: dragHandle, + }); + if (hidden) { return null; } @@ -232,48 +234,35 @@ export default (NodeComponent: ComponentType) => { ]); return ( - -
- - - -
- + + + + ); }; diff --git a/src/components/NodesSelection/index.tsx b/src/components/NodesSelection/index.tsx index 0924ff11..735db606 100644 --- a/src/components/NodesSelection/index.tsx +++ b/src/components/NodesSelection/index.tsx @@ -4,13 +4,13 @@ */ import React, { memo, useMemo, useCallback, useRef, MouseEvent } from 'react'; -import { DraggableCore, DraggableData } from 'react-draggable'; import cc from 'classcat'; import shallow from 'zustand/shallow'; import { useStore } from '../../store'; import { Node, ReactFlowState } from '../../types'; import { getRectOfNodes } from '../../utils/graph'; +import useDrag, { UseDragData, UseDragEvent } from '../../hooks/useDrag'; export interface NodesSelectionProps { onSelectionDragStart?: (event: MouseEvent, nodes: Node[]) => void; @@ -27,8 +27,6 @@ const selector = (s: ReactFlowState) => ({ selectedNodes: Array.from(s.nodeInternals) .filter(([_, n]) => n.selected) .map(([_, n]) => n), - snapToGrid: s.snapToGrid, - snapGrid: s.snapGrid, updateNodePosition: s.updateNodePosition, }); @@ -39,15 +37,10 @@ function NodesSelection({ onSelectionContextMenu, noPanClassName, }: NodesSelectionProps) { - const { transform, userSelectionActive, selectedNodes, snapToGrid, snapGrid, updateNodePosition } = useStore( - selector, - shallow - ); + const { transform, userSelectionActive, selectedNodes, updateNodePosition } = useStore(selector, shallow); const [tX, tY, tScale] = transform; const nodeRef = useRef(null); - const grid = useMemo(() => (snapToGrid ? snapGrid : [1, 1])! as [number, number], [snapToGrid, snapGrid]); - const style = useMemo( () => ({ transform: `translate(${tX}px,${tY}px) scale(${tScale})`, @@ -68,34 +61,34 @@ function NodesSelection({ ); const onStart = useCallback( - (event: MouseEvent) => { - onSelectionDragStart?.(event, selectedNodes); + (event: UseDragEvent) => { + onSelectionDragStart?.(event.sourceEvent, selectedNodes); }, [onSelectionDragStart, selectedNodes] ); const onDrag = useCallback( - (event: MouseEvent, data: DraggableData) => { + (event: UseDragEvent, data: UseDragData) => { updateNodePosition({ diff: { - x: data.deltaX, - y: data.deltaY, + x: data.dx, + y: data.dy, }, dragging: true, }); - onSelectionDrag?.(event, selectedNodes); + onSelectionDrag?.(event.sourceEvent, selectedNodes); }, [onSelectionDrag, selectedNodes, updateNodePosition] ); const onStop = useCallback( - (event: MouseEvent) => { + (event: UseDragEvent) => { updateNodePosition({ dragging: false, }); - onSelectionDragStop?.(event, selectedNodes); + onSelectionDragStop?.(event.sourceEvent, selectedNodes); }, [selectedNodes, onSelectionDragStop] ); @@ -107,28 +100,20 @@ function NodesSelection({ [onSelectionContextMenu, selectedNodes] ); + useDrag({ + onStart, + onDrag, + onStop, + nodeRef, + }); + if (!selectedNodes?.length || userSelectionActive) { return null; } return (
- onStart(event as MouseEvent)} - onDrag={(event, data) => onDrag(event as MouseEvent, data)} - onStop={(event) => onStop(event as MouseEvent)} - nodeRef={nodeRef} - enableUserSelectHack={false} - > -
- +
); } diff --git a/src/container/NodeRenderer/index.tsx b/src/container/NodeRenderer/index.tsx index 663458d3..0a4be46f 100644 --- a/src/container/NodeRenderer/index.tsx +++ b/src/container/NodeRenderer/index.tsx @@ -23,19 +23,15 @@ interface NodeRendererProps { } const selector = (s: ReactFlowState) => ({ - scale: s.transform[2], nodesDraggable: s.nodesDraggable, nodesConnectable: s.nodesConnectable, elementsSelectable: s.elementsSelectable, updateNodeDimensions: s.updateNodeDimensions, - snapGrid: s.snapGrid, - snapToGrid: s.snapToGrid, nodeInternals: s.nodeInternals, }); const NodeRenderer = (props: NodeRendererProps) => { - const { scale, nodesDraggable, nodesConnectable, elementsSelectable, updateNodeDimensions, snapGrid, snapToGrid } = - useStore(selector, shallow); + const { nodesDraggable, nodesConnectable, elementsSelectable, updateNodeDimensions } = useStore(selector, shallow); const nodes = useVisibleNodes(props.onlyRenderVisibleElements); const resizeObserverRef = useRef(); @@ -93,8 +89,6 @@ const NodeRenderer = (props: NodeRendererProps) => { xPos={node.positionAbsolute?.x ?? 0} yPos={node.positionAbsolute?.y ?? 0} dragging={!!node.dragging} - snapGrid={snapGrid} - snapToGrid={snapToGrid} selectNodesOnDrag={props.selectNodesOnDrag} onClick={props.onNodeClick} onMouseEnter={props.onNodeMouseEnter} @@ -105,7 +99,6 @@ const NodeRenderer = (props: NodeRendererProps) => { onNodeDragStart={props.onNodeDragStart} onNodeDrag={props.onNodeDrag} onNodeDragStop={props.onNodeDragStop} - scale={scale} selected={!!node.selected} isDraggable={isDraggable} isSelectable={isSelectable} diff --git a/src/hooks/useDrag/index.tsx b/src/hooks/useDrag/index.tsx new file mode 100644 index 00000000..28037e71 --- /dev/null +++ b/src/hooks/useDrag/index.tsx @@ -0,0 +1,56 @@ +import { RefObject, useEffect } from 'react'; +import { D3DragEvent, drag, SubjectPosition } from 'd3-drag'; +import { select } from 'd3-selection'; + +import { useStoreApi } from '../../store'; + +export type UseDragEvent = D3DragEvent; +export type UseDragData = { dx: number; dy: number }; + +type UseDragParams = { + onStart: (event: UseDragEvent) => void; + onDrag: (event: UseDragEvent, data: UseDragData) => void; + onStop: (event: UseDragEvent) => void; + nodeRef: RefObject; + disabled?: boolean; + noDragClassName?: string; + // @TODO: implement handleSelector functionality + handleSelector?: string; +}; + +function useDrag({ onStart, onDrag, onStop, nodeRef, disabled = false, noDragClassName }: UseDragParams) { + const store = useStoreApi(); + + useEffect(() => { + if (nodeRef?.current) { + const selection = select(nodeRef.current); + + if (disabled) { + selection.on('.drag', null); + } else { + const dragHandler = drag() + .on('start', onStart) + .on('drag', (event: UseDragEvent) => { + const [, , 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 }); + }) + .on('end', onStop) + .filter((event: any) => !event.ctrlKey && !event.button && !event.target.className.includes(noDragClassName)); + + selection.call(dragHandler); + + return () => { + selection.on('.drag', null); + }; + } + } + }, [disabled, noDragClassName]); + + return null; +} + +export default useDrag; diff --git a/src/store/index.ts b/src/store/index.ts index 14caeeec..a1855a3d 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -97,7 +97,7 @@ const createStore = () => } }, updateNodePosition: ({ id, diff, dragging }: NodeDiffUpdate) => { - const { onNodesChange, nodeExtent, nodeInternals, hasDefaultNodes } = get(); + const { onNodesChange, nodeExtent, nodeInternals, hasDefaultNodes, snapGrid, snapToGrid } = get(); if (hasDefaultNodes || onNodesChange) { const changes: NodePositionChange[] = []; @@ -105,10 +105,14 @@ const createStore = () => nodeInternals.forEach((node) => { if (node.selected) { if (!node.parentNode || !isParentSelected(node, nodeInternals)) { - changes.push(createPositionChange({ node, diff, dragging, nodeExtent, nodeInternals })); + changes.push( + createPositionChange({ node, diff, dragging, nodeExtent, nodeInternals, snapToGrid, snapGrid }) + ); } } else if (node.id === id) { - changes.push(createPositionChange({ node, diff, dragging, nodeExtent, nodeInternals })); + changes.push( + createPositionChange({ node, diff, dragging, nodeExtent, nodeInternals, snapToGrid, snapGrid }) + ); } }); diff --git a/src/store/utils.ts b/src/store/utils.ts index 0cc8ba3c..621e59df 100644 --- a/src/store/utils.ts +++ b/src/store/utils.ts @@ -1,3 +1,4 @@ +// @ts-nocheck import { zoomIdentity } from 'd3-zoom'; import { GetState } from 'zustand'; @@ -15,6 +16,7 @@ import { XYPosition, XYZPosition, FitViewOptions, + SnapGrid, } from '../types'; type ParentNodes = Record; @@ -111,6 +113,8 @@ type CreatePostionChangeParams = { nodeInternals: NodeInternals; diff?: XYPosition; dragging?: boolean; + snapToGrid?: boolean; + snapGrid?: SnapGrid; }; export function createPositionChange({ @@ -119,6 +123,8 @@ export function createPositionChange({ dragging, nodeExtent, nodeInternals, + snapToGrid, + snapGrid, }: CreatePostionChangeParams): NodePositionChange { const change: NodePositionChange = { id: node.id, @@ -128,6 +134,7 @@ export function createPositionChange({ if (diff) { const nextPosition = { x: node.position.x + diff.x, y: node.position.y + diff.y }; + let currentExtent = node.extent || nodeExtent; if (node.extent === 'parent') { diff --git a/src/types/nodes.ts b/src/types/nodes.ts index b88a82d1..d8592cc4 100644 --- a/src/types/nodes.ts +++ b/src/types/nodes.ts @@ -1,6 +1,5 @@ import { CSSProperties, MouseEvent as ReactMouseEvent } from 'react'; -import { SnapGrid } from './general'; import { XYPosition, Position, CoordinateExtent } from './utils'; import { HandleElement } from './handles'; @@ -59,7 +58,6 @@ export interface WrapNodeProps { data: T; selected: boolean; isConnectable: boolean; - scale: number; xPos: number; yPos: number; width?: number | null; @@ -81,8 +79,6 @@ export interface WrapNodeProps { sourcePosition: Position; targetPosition: Position; hidden?: boolean; - snapToGrid?: boolean; - snapGrid?: SnapGrid; dragging: boolean; resizeObserver: ResizeObserver | null; dragHandle?: string;