fix(edge-drag): update to new version

example/src/DraggableEdge/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import ReactFlow, { MiniMap, Controls, Background, updateEdge } from 'react-flow-renderer';
+import ReactFlow, { MiniMap, Controls, Background, updateEdge, addEdge } from 'react-flow-renderer';
 
 const onLoad = (reactFlowInstance) => {
   console.log('flow loaded:', reactFlowInstance);
@@ -52,7 +52,8 @@ const DragEdge = () => {
   const [elements, setElements] = useState(initialElements);
   const onEdgeUpdate = (oldEdge, newConnection) => {
     setElements((els) => updateEdge(oldEdge, newConnection, els));
-  }
+  };
+  const onConnect = (params) => setElements((els) => addEdge(params, els));
 
   return (
     <ReactFlow
@@ -61,6 +62,7 @@ const DragEdge = () => {
       snapToGrid={true}
       snapGrid={snapGrid}
       onEdgeUpdate={onEdgeUpdate}
+      onConnect={onConnect}
     >
       <MiniMap
         nodeStrokeColor={(n) => {

src/components/Edges/wrapEdge.tsx

@@ -63,10 +63,10 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
       [elementsSelectable, id, source, target, type, data, onClick]
     );
 
-    const handleEitherEndOfEdgePress = useCallback(
+    const handleEdgeUpdaterMouseDown = useCallback(
       (event: React.MouseEvent<SVGGElement, MouseEvent>, isEdgeHeader?: boolean): void => {
         if (elementsSelectable) {
-          setSelectedElements({ id, source, target });
+          addSelectedElements({ id, source, target });
         }
 
         const edgeElement: Edge = { id, source, target, type };
@@ -80,18 +80,18 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
       [elementsSelectable, id, source, target, type, data, onEitherEndOfEdgePress]
     );
 
-    const handleEdgeHeaderPress = useCallback(
+    const handleEdgeTargetMouseDown = useCallback(
       (event: React.MouseEvent<SVGGElement, MouseEvent>): void => {
-        handleEitherEndOfEdgePress(event, true);
+        handleEdgeUpdaterMouseDown(event, true);
       },
-      [handleEitherEndOfEdgePress],
+      [handleEdgeUpdaterMouseDown]
     );
 
-    const handleEdgeFooterPress = useCallback(
+    const handleEdgeSourceMouseDown = useCallback(
       (event: React.MouseEvent<SVGGElement, MouseEvent>): void => {
-        handleEitherEndOfEdgePress(event);
+        handleEdgeUpdaterMouseDown(event);
       },
-      [handleEitherEndOfEdgePress],
+      [handleEdgeUpdaterMouseDown]
     );
 
     if (isHidden) {
@@ -100,9 +100,9 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
 
     return (
       <g className={edgeClasses} onClick={onEdgeClick}>
-        <g onMouseDown={handleEdgeFooterPress}>
+        <g onMouseDown={handleEdgeSourceMouseDown}>
           <circle
-            className="move-handler"
+            className="react-flow__edgeupdater"
             cx={sourceX}
             cy={sourceY}
             r="12"
@@ -133,9 +133,9 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
           targetPosition={targetPosition}
           markerEndId={markerEndId}
         />
-        <g onMouseDown={handleEdgeHeaderPress}>
+        <g onMouseDown={handleEdgeTargetMouseDown}>
           <circle
-            className="move-handler"
+            className="react-flow__edgeupdater"
             cx={targetX}
             cy={targetY}
             r="12"

src/container/EdgeRenderer/index.tsx

@@ -15,7 +15,7 @@ import {
   ConnectionLineType,
   ConnectionLineComponent,
   Connection,
-  OnEdgeUpdateFunc
+  OnEdgeUpdateFunc,
 } from '../../types';
 import { onMouseDown, SetSourceIdFunc } from '../../components/Handle/BaseHandle';
 
@@ -140,7 +140,7 @@ function renderEdge(
   selectedElements: Elements | null,
   elementsSelectable: boolean,
   setConnectionNodeId: SetSourceIdFunc,
-  setPosition: (pos: XYPosition) => void,
+  setPosition: (pos: XYPosition) => void
 ) {
   const sourceId = edge.source;
   const sourceHandleId = edge.sourceHandle || null;
@@ -197,7 +197,7 @@ function renderEdge(
     if (onEdgeUpdate) {
       onEdgeUpdate(edge, connection);
     }
-  }
+  };
 
   const handleEitherEndOfEdgePress = (event: React.MouseEvent, edge: Edge, isEdgeHeader = false) => {
     const { source, target } = edge;
@@ -205,16 +205,8 @@ function renderEdge(
     const isValidConnection = () => true;
     const isTarget = !isEdgeHeader;
 
-    onMouseDown(
+    onMouseDown(event, null, nodeId, setConnectionNodeId, setPosition, onConnect, isTarget, isValidConnection);
-      event,
+  };
-      nodeId,
-      setConnectionNodeId,
-      setPosition,
-      onConnect,
-      isTarget,
-      isValidConnection,
-    )
-  }
 
   return (
     <EdgeComponent
@@ -282,15 +274,8 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
       <MarkerDefinitions color={arrowHeadColor} />
       <g transform={transformStyle}>
         {edges.map((edge: Edge) =>
-          renderEdge(
+          renderEdge(edge, props, nodes, selectedElements, elementsSelectable, setConnectionNodeId, setPosition)
-            edge,
+        )}
-            props,
-            nodes,
-            selectedElements,
-            elementsSelectable,
-            setConnectionNodeId,
-            setPosition,
-          ))}
         {renderConnectionLine && (
           <ConnectionLine
             nodes={nodes}

src/container/ZoomPane/index.tsx

@@ -159,7 +159,10 @@ const ZoomPane = ({
         }
 
         // when the target element is a node, we still allow zooming
-        if (event.target.closest('.react-flow__node') && event.type !== 'wheel') {
+        if (
+          (event.target.closest('.react-flow__node') || event.target.closest('.react-flow__edgeupdater')) &&
+          event.type !== 'wheel'
+        ) {
           return false;
         }
 

src/store/index.ts

@@ -157,8 +157,8 @@ export const storeModel: StoreModel = {
   viewportBox: computed((state) => ({ x: 0, y: 0, width: state.width, height: state.height })),
   transform: [0, 0, 1],
   elements: [],
-  nodes: computed((state) => state.elements.filter((el) => isNode(el)) as Node[]),
+  nodes: computed((state) => state.elements.filter(isNode)),
-  edges: computed((state) => state.elements.filter((el) => isEdge(el)) as Edge[]),
+  edges: computed((state) => state.elements.filter(isEdge)),
   selectedElements: null,
   selectedNodesBbox: { x: 0, y: 0, width: 0, height: 0 },
 

src/style.css

@@ -237,6 +237,6 @@
   transform: translate(0, -50%);
 }
 
-.move-handler {
+.react-flow__edgeupdater {
   cursor: move;
 }