From 463cac960bf77ed6b4c369f59ad177be895c93f4 Mon Sep 17 00:00:00 2001
From: Ken Snyder <5116385+ksnyder9801@users.noreply.github.com>
Date: Fri, 28 May 2021 11:47:40 -0700
Subject: [PATCH] Use shiftKey state from drag start in mousemove handlers

---
 src/components/graph-view.js |  2 +-
 src/components/node.js       | 11 +++++++----
 2 files changed, 8 insertions(+), 5 deletions(-)

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<IGraphViewProps, IGraphViewState> {
         },
         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,