From f565676233a9d7accbed1dc90d1608bbbb3f1cac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=90=D0=BD=D0=BD=D0=B0=20=D0=9A=D1=83=D0=B7=D0=BD=D0=B5?=
 =?UTF-8?q?=D1=86=D0=BE=D0=B2=D0=B0?= <avkuznetsova@totsystems.ru>
Date: Tue, 13 Apr 2021 20:29:39 +0500
Subject: [PATCH] onEdgeDoubleClick support

---
 src/components/Edges/wrapEdge.tsx    | 6 ++++++
 src/container/EdgeRenderer/index.tsx | 2 ++
 src/container/GraphView/index.tsx    | 2 ++
 src/container/ReactFlow/index.tsx    | 3 +++
 src/container/ZoomPane/index.tsx     | 2 +-
 src/types/index.ts                   | 3 ++-
 6 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/Edges/wrapEdge.tsx b/src/components/Edges/wrapEdge.tsx
index 173f1821..0875ae17 100644
--- a/src/components/Edges/wrapEdge.tsx
+++ b/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}
diff --git a/src/container/EdgeRenderer/index.tsx b/src/container/EdgeRenderer/index.tsx
index 9713cc4a..6c291786 100644
--- a/src/container/EdgeRenderer/index.tsx
+++ b/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}
     />
   );
 };
diff --git a/src/container/GraphView/index.tsx b/src/container/GraphView/index.tsx
index 7408d54d..23894ee8 100644
--- a/src/container/GraphView/index.tsx
+++ b/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}
diff --git a/src/container/ReactFlow/index.tsx b/src/container/ReactFlow/index.tsx
index e91ae27f..0d7b4fca 100644
--- a/src/container/ReactFlow/index.tsx
+++ b/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}
diff --git a/src/container/ZoomPane/index.tsx b/src/container/ZoomPane/index.tsx
index 99e72806..c7feec67 100644
--- a/src/container/ZoomPane/index.tsx
+++ b/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;
diff --git a/src/types/index.ts b/src/types/index.ts
index a7fdb413..d2993b40 100644
--- a/src/types/index.ts
+++ b/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;