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;