diff --git a/README.md b/README.md index df7d14bc..6ee73a3e 100644 --- a/README.md +++ b/README.md @@ -69,6 +69,10 @@ const BasicFlow = () => ; - `onElementsRemove(elements: Elements)`: element remove callback - `onNodeDragStart(node: Node)`: node drag start callback - `onNodeDragStop(node: Node)`: node drag stop callback +- `onNodeMouseEnter(evt: MouseEvent, node: Node)`: node mouse enter callback +- `onNodeMouseMove(evt: MouseEvent, node: Node)`: node mouse move callback +- `onNodeMouseLeave(evt: MouseEvent, node: Node)`: node mouse leave callback +- `onNodeContextMenu(evt: MouseEvent, node: Node)`: node context menu callback - `onConnect({ source, target })`: connect callback - `onLoad(reactFlowInstance)`: editor load callback - `onMove()`: move callback diff --git a/example/src/Horizontal/index.js b/example/src/Horizontal/index.js index f2926d2c..0e18b911 100644 --- a/example/src/Horizontal/index.js +++ b/example/src/Horizontal/index.js @@ -4,6 +4,14 @@ import ReactFlow, { removeElements, addEdge } from 'react-flow-renderer'; const onLoad = (reactFlowInstance) => reactFlowInstance.fitView(); +const onNodeMouseEnter = (evt, node) => console.log('mouse enter:', node); +const onNodeMouseMove = (evt, node) => console.log('mouse move:', node); +const onNodeMouseLeave = (evt, node) => console.log('mouse leave:', node); +const onNodeContextMenu = (evt, node) => { + evt.preventDefault(); + console.log('context menu:', node); +}; + const initialElements = [ { id: '1', @@ -21,13 +29,13 @@ const initialElements = [ { id: '7', sourcePosition: 'right', targetPosition: 'left', data: { label: 'Node 7' }, position: { x: 750, y: 50 } }, { id: '8', sourcePosition: 'right', targetPosition: 'left', data: { label: 'Node 8' }, position: { x: 750, y: 300 } }, - { id: 'e1-2', source: '1', target: '2', animated: true }, - { id: 'e1-3', source: '1', target: '3', animated: true }, - { id: 'e1-4', source: '2', target: '4', label: 'edge label' }, - { id: 'e3-5', source: '3', target: '5', animated: true }, - { id: 'e3-6', source: '3', target: '6', animated: true }, - { id: 'e5-7', source: '5', target: '7', animated: true }, - { id: 'e6-8', source: '6', target: '8', animated: true }, + { id: 'e1-2', source: '1', type: 'smoothstep', target: '2', animated: true }, + { id: 'e1-3', source: '1', type: 'smoothstep', target: '3', animated: true }, + { id: 'e1-4', source: '2', type: 'smoothstep', target: '4', label: 'edge label' }, + { id: 'e3-5', source: '3', type: 'smoothstep', target: '5', animated: true }, + { id: 'e3-6', source: '3', type: 'smoothstep', target: '6', animated: true }, + { id: 'e5-7', source: '5', type: 'smoothstep', target: '7', animated: true }, + { id: 'e6-8', source: '6', type: 'smoothstep', target: '8', animated: true }, ]; const HorizontalFlow = () => { @@ -53,6 +61,10 @@ const HorizontalFlow = () => { onConnect={onConnect} onLoad={onLoad} selectNodesOnDrag={false} + onNodeMouseEnter={onNodeMouseEnter} + onNodeMouseMove={onNodeMouseMove} + onNodeMouseLeave={onNodeMouseLeave} + onNodeContextMenu={onNodeContextMenu} >