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

examples/nextjs/pages/Overview/index.tsx

@@ -70,6 +70,8 @@ const onEdgeDoubleClick = (_: ReactMouseEvent, edge: Edge) =>
   console.log('edge double click', edge);
 const onNodesDelete = (nodes: Node[]) => console.log('nodes delete', nodes);
 const onEdgesDelete = (edges: Edge[]) => console.log('edges delete', edges);
+const onPaneMouseMove = (e: ReactMouseEvent) =>
+  console.log('pane move', e.clientX);
 
 const initialNodes: Node[] = [
   {
@@ -120,9 +122,9 @@ const initialNodes: Node[] = [
         <>
           You can find the docs on{' '}
           <a
-            href='https://github.com/wbkd/react-flow'
+            href="https://github.com/wbkd/react-flow"
-            target='_blank'
+            target="_blank"
-            rel='noopener noreferrer'
+            rel="noopener noreferrer"
           >
             Github
           </a>
@@ -250,10 +252,11 @@ const OverviewFlow = () => {
       onEdgeDoubleClick={onEdgeDoubleClick}
       fitView
       fitViewOptions={{ padding: 0.2 }}
-      attributionPosition='top-right'
+      attributionPosition="top-right"
       maxZoom={Infinity}
       onNodesDelete={onNodesDelete}
       onEdgesDelete={onEdgesDelete}
+      onPaneMouseMove={onPaneMouseMove}
     >
       <MiniMap
         nodeStrokeColor={nodeStrokeColor}
@@ -261,7 +264,7 @@ const OverviewFlow = () => {
         nodeBorderRadius={2}
       />
       <Controls />
-      <Background color='#aaa' gap={25} />
+      <Background color="#aaa" gap={25} />
     </ReactFlow>
   );
 };

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, {
+import React, { CSSProperties, HTMLAttributes, MouseEvent as ReactMouseEvent, WheelEvent } from 'react';
-  ButtonHTMLAttributes,
-  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;