feat(props): add pane mouse handlers closes #2312

packages/core/src/container/FlowRenderer/index.tsx

@@ -31,6 +31,9 @@ const selector = (s: ReactFlowState) => s.nodesSelectionActive;
 const FlowRenderer = ({
   children,
   onPaneClick,
+  onPaneMouseEnter,
+  onPaneMouseMove,
+  onPaneMouseLeave,
   onPaneContextMenu,
   onPaneScroll,
   deleteKeyCode,
@@ -99,6 +102,9 @@ const FlowRenderer = ({
       <div
         className="react-flow__pane react-flow__container"
         onClick={onClick}
+        onMouseEnter={onPaneMouseEnter}
+        onMouseMove={onPaneMouseMove}
+        onMouseLeave={onPaneMouseLeave}
         onContextMenu={onContextMenu}
         onWheel={onWheel}
       />

packages/core/src/container/GraphView/index.tsx

@@ -64,6 +64,9 @@ const GraphView = ({
   zoomOnDoubleClick,
   panOnDrag,
   onPaneClick,
+  onPaneMouseEnter,
+  onPaneMouseMove,
+  onPaneMouseLeave,
   onPaneScroll,
   onPaneContextMenu,
   onEdgeUpdate,
@@ -85,6 +88,9 @@ const GraphView = ({
   return (
     <FlowRenderer
       onPaneClick={onPaneClick}
+      onPaneMouseEnter={onPaneMouseEnter}
+      onPaneMouseMove={onPaneMouseMove}
+      onPaneMouseLeave={onPaneMouseLeave}
       onPaneContextMenu={onPaneContextMenu}
       onPaneScroll={onPaneScroll}
       deleteKeyCode={deleteKeyCode}

packages/core/src/container/ReactFlow/index.tsx

@@ -115,6 +115,9 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
       zoomOnDoubleClick = true,
       panOnDrag = true,
       onPaneClick,
+      onPaneMouseEnter,
+      onPaneMouseMove,
+      onPaneMouseLeave,
       onPaneScroll,
       onPaneContextMenu,
       children,
@@ -185,6 +188,9 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             panOnScrollMode={panOnScrollMode}
             panOnDrag={panOnDrag}
             onPaneClick={onPaneClick}
+            onPaneMouseEnter={onPaneMouseEnter}
+            onPaneMouseMove={onPaneMouseMove}
+            onPaneMouseLeave={onPaneMouseLeave}
             onPaneScroll={onPaneScroll}
             onPaneContextMenu={onPaneContextMenu}
             onSelectionContextMenu={onSelectionContextMenu}

packages/core/src/types/component-props.ts

@@ -1,10 +1,4 @@
-import React, {
-  ButtonHTMLAttributes,
-  CSSProperties,
-  HTMLAttributes,
-  MouseEvent as ReactMouseEvent,
-  WheelEvent,
-} from 'react';
+import React, { CSSProperties, HTMLAttributes, MouseEvent as ReactMouseEvent, WheelEvent } from 'react';
 
 import {
   OnSelectionChangeFunc,
@@ -80,6 +74,9 @@ export interface ReactFlowProps extends HTMLAttributes<HTMLDivElement> {
   onPaneScroll?: (event?: WheelEvent) => void;
   onPaneClick?: (event: ReactMouseEvent) => void;
   onPaneContextMenu?: (event: ReactMouseEvent) => void;
+  onPaneMouseEnter?: (event: ReactMouseEvent) => void;
+  onPaneMouseMove?: (event: ReactMouseEvent) => void;
+  onPaneMouseLeave?: (event: ReactMouseEvent) => void;
   nodeTypes?: NodeTypes;
   edgeTypes?: EdgeTypes;
   connectionMode?: ConnectionMode;