diff --git a/src/components/graph-view.js b/src/components/graph-view.js index 38ed7504..d8628675 100644 --- a/src/components/graph-view.js +++ b/src/components/graph-view.js @@ -929,7 +929,7 @@ class GraphView extends React.Component { }, componentUpToDate: false, }); - } else if ((canCreateEdge && canCreateEdge(node)) || draggingEdge) { + } else if ((canCreateEdge && canCreateEdge(node)) || shiftKey) { // render new edge this.syncRenderEdge({ source: nodeId, targetPosition: position }); this.setState({ draggingEdge: true }); diff --git a/src/components/node.js b/src/components/node.js index 4a935678..40c9a9bb 100644 --- a/src/components/node.js +++ b/src/components/node.js @@ -102,6 +102,7 @@ function Node({ onNodeSelected = () => {}, onNodeUpdate = () => Promise.resolve(), }: INodeProps) { + const draggingEdge = useRef(false); const [hovered, setHovered] = useState(false); const nodeRef = useRef(); const oldSibling = useRef(); @@ -161,6 +162,9 @@ function Node({ const { sourceEvent } = event; + const shiftKey = sourceEvent.shiftKey || draggingEdge.current; + + draggingEdge.current = false; position.current.pointerOffset = null; if (oldSibling.current?.parentElement) { @@ -170,8 +174,6 @@ function Node({ ); } - const shiftKey = sourceEvent.shiftKey; - const nodeUpdate = onNodeUpdate( position.current, data[nodeKey], @@ -206,6 +208,7 @@ function Node({ } if (shiftKey) { + draggingEdge.current = true; // draw edge // undo the target offset subtraction done by Edge const off = calculateOffset( @@ -220,7 +223,7 @@ function Node({ newState.x += off.xOff; newState.y += off.yOff; // now tell the graph that we're actually drawing an edge - } else if (layoutEngine) { + } else if (!draggingEdge.current && layoutEngine) { // move node using the layout engine Object.assign(newState, layoutEngine.getPositionForNode(newState)); } @@ -231,7 +234,7 @@ function Node({ pointerOffset: newState.pointerOffset, }; - onNodeMove(newState, data[nodeKey], shiftKey); + onNodeMove(newState, data[nodeKey], shiftKey || draggingEdge.current); }, [ centerNodeOnMove,