diff --git a/examples/nextjs/pages/Overview/index.tsx b/examples/nextjs/pages/Overview/index.tsx
index f380741e..40782570 100644
--- a/examples/nextjs/pages/Overview/index.tsx
+++ b/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{' '}
Github
@@ -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}
>
{
nodeBorderRadius={2}
/>
-
+
);
};
diff --git a/packages/core/src/container/FlowRenderer/index.tsx b/packages/core/src/container/FlowRenderer/index.tsx
index 1eae6797..b9e7dd72 100644
--- a/packages/core/src/container/FlowRenderer/index.tsx
+++ b/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 = ({
diff --git a/packages/core/src/container/GraphView/index.tsx b/packages/core/src/container/GraphView/index.tsx
index f7774444..54f00f06 100644
--- a/packages/core/src/container/GraphView/index.tsx
+++ b/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 (
(
zoomOnDoubleClick = true,
panOnDrag = true,
onPaneClick,
+ onPaneMouseEnter,
+ onPaneMouseMove,
+ onPaneMouseLeave,
onPaneScroll,
onPaneContextMenu,
children,
@@ -185,6 +188,9 @@ const ReactFlow = forwardRef(
panOnScrollMode={panOnScrollMode}
panOnDrag={panOnDrag}
onPaneClick={onPaneClick}
+ onPaneMouseEnter={onPaneMouseEnter}
+ onPaneMouseMove={onPaneMouseMove}
+ onPaneMouseLeave={onPaneMouseLeave}
onPaneScroll={onPaneScroll}
onPaneContextMenu={onPaneContextMenu}
onSelectionContextMenu={onSelectionContextMenu}
diff --git a/packages/core/src/types/component-props.ts b/packages/core/src/types/component-props.ts
index 425cbba8..b213c78e 100644
--- a/packages/core/src/types/component-props.ts
+++ b/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 {
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;