feat(edges): add mouse handler closes #987

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 />

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}

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}
     />
   );

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>

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} />

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;
 }