Merge pull request #320 from ksnyder9801/fix-edge-unshift

Use shiftKey state from drag start in mousemove handlers
uber · May 28, 2021 · 1b218e3 · 1b218e3
2 parents a6033c3 + 463cac9
commit 1b218e3
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git 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
@@ -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,