onEdgeDoubleClick support

src/container/EdgeRenderer/index.tsx

@@ -25,6 +25,7 @@ interface EdgeRendererProps {
   connectionLineComponent?: ConnectionLineComponent;
   connectionMode?: ConnectionMode;
   onElementClick?: (event: React.MouseEvent, element: Node | Edge) => void;
+  onEdgeDoubleClick?: (event: React.MouseEvent, edge: Edge) => void;
   arrowHeadColor: string;
   markerEndId?: string;
   onlyRenderVisibleElements: boolean;
@@ -173,6 +174,7 @@ const Edge = ({
       onMouseMove={props.onEdgeMouseMove}
       onMouseLeave={props.onEdgeMouseLeave}
       edgeUpdaterRadius={props.edgeUpdaterRadius}
+      onEdgeDoubleClick={props.onEdgeDoubleClick}
     />
   );
 };

src/container/GraphView/index.tsx

@@ -36,6 +36,7 @@ const GraphView = ({
   onLoad,
   onElementClick,
   onNodeDoubleClick,
+  onEdgeDoubleClick,
   onNodeMouseEnter,
   onNodeMouseMove,
   onNodeMouseLeave,
@@ -261,6 +262,7 @@ const GraphView = ({
       <EdgeRenderer
         edgeTypes={edgeTypes}
         onElementClick={onElementClick}
+        onEdgeDoubleClick={onEdgeDoubleClick}
         connectionLineType={connectionLineType}
         connectionLineStyle={connectionLineStyle}
         connectionLineComponent={connectionLineComponent}

src/container/ReactFlow/index.tsx

@@ -114,6 +114,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   onEdgeMouseEnter?: (event: MouseEvent, edge: Edge) => void;
   onEdgeMouseMove?: (event: MouseEvent, edge: Edge) => void;
   onEdgeMouseLeave?: (event: MouseEvent, edge: Edge) => void;
+  onEdgeDoubleClick?: (event: MouseEvent, edge: Edge) => void;
   edgeUpdaterRadius?: number;
   nodeTypesId?: string;
   edgeTypesId?: string;
@@ -187,6 +188,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
       children,
       onEdgeUpdate,
       onEdgeContextMenu,
+      onEdgeDoubleClick,
       onEdgeMouseEnter,
       onEdgeMouseMove,
       onEdgeMouseLeave,
@@ -264,6 +266,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             onSelectionContextMenu={onSelectionContextMenu}
             onEdgeUpdate={onEdgeUpdate}
             onEdgeContextMenu={onEdgeContextMenu}
+            onEdgeDoubleClick={onEdgeDoubleClick}
             onEdgeMouseEnter={onEdgeMouseEnter}
             onEdgeMouseMove={onEdgeMouseMove}
             onEdgeMouseLeave={onEdgeMouseLeave}

src/container/ZoomPane/index.tsx

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