From cd1baadf414f2e3d927d308f243eaa5bba1e0701 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Fri, 12 Mar 2021 20:46:14 +0100
Subject: [PATCH] feat(edges): add mouse handler closes #987

---
 example/src/Overview/index.tsx       |  6 +++++
 src/components/Edges/wrapEdge.tsx    | 33 +++++++++++++++++++++++++++-
 src/container/EdgeRenderer/index.tsx |  8 ++++++-
 src/container/GraphView/index.tsx    |  6 +++++
 src/container/ReactFlow/index.tsx    | 13 +++++++++--
 src/types/index.ts                   |  5 ++++-
 6 files changed, 66 insertions(+), 5 deletions(-)

diff --git a/example/src/Overview/index.tsx b/example/src/Overview/index.tsx
index 27fd4137..f5233afc 100644
--- a/example/src/Overview/index.tsx
+++ b/example/src/Overview/index.tsx
@@ -41,6 +41,9 @@ const onLoad = (reactFlowInstance: OnLoadParams) => {
 
 const onMoveEnd = (transform?: FlowTransform) => console.log('zoom/move end', transform);
 const onEdgeContextMenu = (_: MouseEvent, edge: Edge) => console.log('edge context menu', edge);
+const onEdgeMouseEnter = (_: MouseEvent, edge: Edge) => console.log('edge mouse enter', edge);
+const onEdgeMouseMove = (_: MouseEvent, edge: Edge) => console.log('edge mouse move', edge);
+const onEdgeMouseLeave = (_: MouseEvent, edge: Edge) => console.log('edge mouse leave', edge);
 
 const initialElements: Elements = [
   {
@@ -179,6 +182,9 @@ const OverviewFlow = () => {
       snapToGrid={true}
       snapGrid={snapGrid}
       onEdgeContextMenu={onEdgeContextMenu}
+      onEdgeMouseEnter={onEdgeMouseEnter}
+      onEdgeMouseMove={onEdgeMouseMove}
+      onEdgeMouseLeave={onEdgeMouseLeave}
     >
       <MiniMap nodeStrokeColor={nodeStrokeColor} nodeColor={nodeColor} nodeBorderRadius={2} />
       <Controls />
diff --git a/src/components/Edges/wrapEdge.tsx b/src/components/Edges/wrapEdge.tsx
index 3f2fc7c8..173f1821 100644
--- a/src/components/Edges/wrapEdge.tsx
+++ b/src/components/Edges/wrapEdge.tsx
@@ -39,6 +39,9 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
     handleEdgeUpdate,
     onConnectEdge,
     onContextMenu,
+    onMouseEnter,
+    onMouseMove,
+    onMouseLeave,
     edgeUpdaterRadius,
   }: WrapEdgeProps): JSX.Element | null => {
     const addSelectedElements = useStoreActions((actions) => actions.addSelectedElements);
@@ -99,6 +102,27 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
       [edgeElement, onContextMenu]
     );
 
+    const onEdgeMouseEnter = useCallback(
+      (event: React.MouseEvent<SVGGElement, MouseEvent>): void => {
+        onMouseEnter?.(event, edgeElement);
+      },
+      [edgeElement, onContextMenu]
+    );
+
+    const onEdgeMouseMove = useCallback(
+      (event: React.MouseEvent<SVGGElement, MouseEvent>): void => {
+        onMouseMove?.(event, edgeElement);
+      },
+      [edgeElement, onContextMenu]
+    );
+
+    const onEdgeMouseLeave = useCallback(
+      (event: React.MouseEvent<SVGGElement, MouseEvent>): void => {
+        onMouseLeave?.(event, edgeElement);
+      },
+      [edgeElement, onContextMenu]
+    );
+
     const handleEdgeUpdater = useCallback(
       (event: React.MouseEvent<SVGGElement, MouseEvent>, isSourceHandle: boolean) => {
         const nodeId = isSourceHandle ? target : source;
@@ -143,7 +167,14 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
     }
 
     return (
-      <g className={edgeClasses} onClick={onEdgeClick} onContextMenu={onEdgeContextMenu}>
+      <g
+        className={edgeClasses}
+        onClick={onEdgeClick}
+        onContextMenu={onEdgeContextMenu}
+        onMouseEnter={onEdgeMouseEnter}
+        onMouseMove={onEdgeMouseMove}
+        onMouseLeave={onEdgeMouseLeave}
+      >
         {handleEdgeUpdate && (
           <g
             onMouseDown={onEdgeUpdaterSourceMouseDown}
diff --git a/src/container/EdgeRenderer/index.tsx b/src/container/EdgeRenderer/index.tsx
index f8469d61..9713cc4a 100644
--- a/src/container/EdgeRenderer/index.tsx
+++ b/src/container/EdgeRenderer/index.tsx
@@ -29,7 +29,10 @@ interface EdgeRendererProps {
   markerEndId?: string;
   onlyRenderVisibleElements: boolean;
   onEdgeUpdate?: OnEdgeUpdateFunc;
-  onEdgeContextMenu?: (event: React.MouseEvent, element: Edge) => void;
+  onEdgeContextMenu?: (event: React.MouseEvent, edge: Edge) => void;
+  onEdgeMouseEnter?: (event: React.MouseEvent, edge: Edge) => void;
+  onEdgeMouseMove?: (event: React.MouseEvent, edge: Edge) => void;
+  onEdgeMouseLeave?: (event: React.MouseEvent, edge: Edge) => void;
   edgeUpdaterRadius?: number;
 }
 
@@ -166,6 +169,9 @@ const Edge = ({
       onConnectEdge={onConnectEdge}
       handleEdgeUpdate={typeof props.onEdgeUpdate !== 'undefined'}
       onContextMenu={props.onEdgeContextMenu}
+      onMouseEnter={props.onEdgeMouseEnter}
+      onMouseMove={props.onEdgeMouseMove}
+      onMouseLeave={props.onEdgeMouseLeave}
       edgeUpdaterRadius={props.edgeUpdaterRadius}
     />
   );
diff --git a/src/container/GraphView/index.tsx b/src/container/GraphView/index.tsx
index 2355a1be..bd31e6a8 100644
--- a/src/container/GraphView/index.tsx
+++ b/src/container/GraphView/index.tsx
@@ -86,6 +86,9 @@ const GraphView = ({
   onPaneContextMenu,
   onEdgeUpdate,
   onEdgeContextMenu,
+  onEdgeMouseEnter,
+  onEdgeMouseMove,
+  onEdgeMouseLeave,
   edgeUpdaterRadius,
 }: GraphViewProps) => {
   const isInitialized = useRef<boolean>(false);
@@ -265,6 +268,9 @@ const GraphView = ({
         onEdgeUpdate={onEdgeUpdate}
         onlyRenderVisibleElements={onlyRenderVisibleElements}
         onEdgeContextMenu={onEdgeContextMenu}
+        onEdgeMouseEnter={onEdgeMouseEnter}
+        onEdgeMouseMove={onEdgeMouseMove}
+        onEdgeMouseLeave={onEdgeMouseLeave}
         edgeUpdaterRadius={edgeUpdaterRadius}
       />
     </FlowRenderer>
diff --git a/src/container/ReactFlow/index.tsx b/src/container/ReactFlow/index.tsx
index f1ed85df..fd2790c0 100644
--- a/src/container/ReactFlow/index.tsx
+++ b/src/container/ReactFlow/index.tsx
@@ -109,8 +109,11 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   panOnScrollMode?: PanOnScrollMode;
   zoomOnDoubleClick?: boolean;
   onEdgeUpdate?: OnEdgeUpdateFunc;
-  onEdgeContextMenu?: (event: MouseEvent, nodes: Edge) => void;
-  edgeUpdaterRadius?: number
+  onEdgeContextMenu?: (event: MouseEvent, edge: Edge) => void;
+  onEdgeMouseEnter?: (event: MouseEvent, edge: Edge) => void;
+  onEdgeMouseMove?: (event: MouseEvent, edge: Edge) => void;
+  onEdgeMouseLeave?: (event: MouseEvent, edge: Edge) => void;
+  edgeUpdaterRadius?: number;
 }
 
 const ReactFlow = ({
@@ -176,6 +179,9 @@ const ReactFlow = ({
   children,
   onEdgeUpdate,
   onEdgeContextMenu,
+  onEdgeMouseEnter,
+  onEdgeMouseMove,
+  onEdgeMouseLeave,
   edgeUpdaterRadius = 10,
   ...rest
 }: ReactFlowProps) => {
@@ -245,6 +251,9 @@ const ReactFlow = ({
           onSelectionContextMenu={onSelectionContextMenu}
           onEdgeUpdate={onEdgeUpdate}
           onEdgeContextMenu={onEdgeContextMenu}
+          onEdgeMouseEnter={onEdgeMouseEnter}
+          onEdgeMouseMove={onEdgeMouseMove}
+          onEdgeMouseLeave={onEdgeMouseLeave}
           edgeUpdaterRadius={edgeUpdaterRadius}
         />
         <ElementUpdater elements={elements} />
diff --git a/src/types/index.ts b/src/types/index.ts
index 616abe80..7786503f 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -125,7 +125,10 @@ export interface WrapEdgeProps<T = any> {
   isHidden?: boolean;
   handleEdgeUpdate: boolean;
   onConnectEdge: OnConnectFunc;
-  onContextMenu: (event: React.MouseEvent, edge: Edge) => void;
+  onContextMenu?: (event: React.MouseEvent, edge: Edge) => void;
+  onMouseEnter?: (event: React.MouseEvent, edge: Edge) => void;
+  onMouseMove?: (event: React.MouseEvent, edge: Edge) => void;
+  onMouseLeave?: (event: React.MouseEvent, edge: Edge) => void;
   edgeUpdaterRadius?: number;
 }