Merge pull request #1092 from Anna-Smith/edge-double-click

onEdgeDoubleClick support

src/components/Edges/wrapEdge.tsx

@@ -13,6 +13,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
     type,
     data,
     onClick,
+    onEdgeDoubleClick,
     selected,
     animated,
     label,
@@ -162,6 +163,10 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
     const onEdgeUpdaterMouseEnter = useCallback(() => setUpdating(true), [setUpdating]);
     const onEdgeUpdaterMouseOut = useCallback(() => setUpdating(false), [setUpdating]);
 
+    const onEdgeDoubleClickHandler = useCallback((event: React.MouseEvent<SVGGElement, MouseEvent>) => {
+      onEdgeDoubleClick?.(event, edgeElement)
+    }, [edgeElement, onEdgeDoubleClick])
+
     if (isHidden) {
       return null;
     }
@@ -170,6 +175,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
       <g
         className={edgeClasses}
         onClick={onEdgeClick}
+        onDoubleClick={onEdgeDoubleClickHandler}
         onContextMenu={onEdgeContextMenu}
         onMouseEnter={onEdgeMouseEnter}
         onMouseMove={onEdgeMouseMove}

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;

src/types/index.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, MouseEvent as ReactMouseEvent, HTMLAttributes, ReactNode } from 'react';
+import React, { CSSProperties, MouseEvent as ReactMouseEvent, HTMLAttributes, ReactNode } from 'react';
 import { Selection as D3Selection, ZoomBehavior } from 'd3';
 
 export type ElementId = string;
@@ -100,6 +100,7 @@ export interface WrapEdgeProps<T = any> {
   type: string;
   data?: T;
   onClick?: (event: React.MouseEvent, edge: Edge) => void;
+  onEdgeDoubleClick?: (event: React.MouseEvent, edge: Edge) => void;
   selected: boolean;
   animated?: boolean;
   label?: string | ReactNode;