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

Use shiftKey state from drag start in mousemove handlers

Author: ksnyder9801

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 });

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,