diff --git a/README.md b/README.md index ec0f8c25..2320a31b 100644 --- a/README.md +++ b/README.md @@ -79,23 +79,23 @@ const BasicFlow = () => ; - `onlyRenderVisibleNodes`: default: `true` #### Event Handlers -- `onElementClick(element: Node | Edge)`: called when user clicks node or edge click +- `onElementClick(evt: MouseEvent, element: Node | Edge)`: called when user clicks node or edge click - `onElementsRemove(elements: Elements)`: called when user removes node or edge -- `onNodeDragStart(node: Node)`: node drag start -- `onNodeDragStop(node: Node)`: node drag stop +- `onNodeDragStart(evt: MouseEvent, node: Node)`: node drag start +- `onNodeDragStop(evt: MouseEvent, node: Node)`: node drag stop - `onNodeMouseEnter(evt: MouseEvent, node: Node)`: node mouse enter - `onNodeMouseMove(evt: MouseEvent, node: Node)`: node mouse move - `onNodeMouseLeave(evt: MouseEvent, node: Node)`: node mouse leave - `onNodeContextMenu(evt: MouseEvent, node: Node)`: node context menu - `onConnect({ source, target })`: called when user connects two nodes -- `onConnectStart({ nodeId, handleType })`: called when user starts to drag connection line -- `onConnectStop()`: called when user stops to drag connection line +- `onConnectStart(evt: MouseEvent, { nodeId, handleType })`: called when user starts to drag connection line +- `onConnectStop(evt: MouseEvent)`: called when user stops to drag connection line - `onLoad(reactFlowInstance)`: called after flow is initialized - `onMove()`: called when user is panning or zooming - `onMoveStart()`: called when user starts panning or zooming - `onMoveEnd()`: called when user ends panning or zooming - `onSelectionChange(elements: Elements)`: called when user selects one or multiple elements -- `onPaneClick()`: called when user clicks directly on the canvas +- `onPaneClick(evt: MouseEvent)`: called when user clicks directly on the canvas #### Interaction - `nodesDraggable`: default: `true`. This applies to all nodes. You can also change the behavior of a specific node with the `draggable` node option. diff --git a/example/src/Basic/index.js b/example/src/Basic/index.js index 2e386b24..0a9b6853 100644 --- a/example/src/Basic/index.js +++ b/example/src/Basic/index.js @@ -2,9 +2,9 @@ import React, { useState } from 'react'; import ReactFlow, { removeElements, addEdge, isNode, Background } from 'react-flow-renderer'; -const onNodeDragStop = (node) => console.log('drag stop', node); +const onNodeDragStop = (evt, node) => console.log('drag stop', node); const onLoad = (reactFlowInstance) => console.log('flow loaded:', reactFlowInstance); -const onElementClick = (element) => console.log('click', element); +const onElementClick = (evt, element) => console.log('click', element); const initialElements = [ { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } }, diff --git a/example/src/CustomNode/index.js b/example/src/CustomNode/index.js index e5b11736..8d6072bb 100644 --- a/example/src/CustomNode/index.js +++ b/example/src/CustomNode/index.js @@ -4,8 +4,8 @@ import ReactFlow, { isEdge, removeElements, addEdge, MiniMap, Controls } from 'r import ColorSelectorNode from './ColorSelectorNode'; -const onNodeDragStop = (node) => console.log('drag stop', node); -const onElementClick = (element) => console.log('click', element); +const onNodeDragStop = (evt, node) => console.log('drag stop', node); +const onElementClick = (evt, element) => console.log('click', element); const onLoad = (reactFlowInstance) => console.log('flow loaded:', reactFlowInstance); const initBgColor = '#f0e742'; diff --git a/example/src/Edges/index.js b/example/src/Edges/index.js index 41040cd4..2265541e 100644 --- a/example/src/Edges/index.js +++ b/example/src/Edges/index.js @@ -4,8 +4,8 @@ import ReactFlow, { removeElements, addEdge, MiniMap, Controls, Background } fro import CustomEdge from './CustomEdge'; -const onNodeDragStop = (node) => console.log('drag stop', node); -const onElementClick = (element) => console.log('click', element); +const onNodeDragStop = (evt, node) => console.log('drag stop', node); +const onElementClick = (evt, element) => console.log('click', element); const onLoad = (reactFlowInstance) => reactFlowInstance.fitView(); const initialElements = [ diff --git a/example/src/Empty/index.js b/example/src/Empty/index.js index 07c6daa0..580fa8e0 100644 --- a/example/src/Empty/index.js +++ b/example/src/Empty/index.js @@ -2,9 +2,9 @@ import React, { useState } from 'react'; import ReactFlow, { removeElements, addEdge, MiniMap, Controls, Background } from 'react-flow-renderer'; -const onNodeDragStop = (node) => console.log('drag stop', node); +const onNodeDragStop = (evt, node) => console.log('drag stop', node); const onLoad = (reactFlowInstance) => console.log('flow loaded:', reactFlowInstance); -const onElementClick = (element) => console.log('click', element); +const onElementClick = (evt, element) => console.log('click', element); const EmptyFlow = () => { const [elements, setElements] = useState([]); diff --git a/example/src/Interaction/index.js b/example/src/Interaction/index.js index 96d8d734..6284bcd3 100644 --- a/example/src/Interaction/index.js +++ b/example/src/Interaction/index.js @@ -11,10 +11,10 @@ const initialElements = [ { id: 'e1-3', source: '1', target: '3' }, ]; -const onNodeDragStart = (node) => console.log('drag start', node); -const onNodeDragStop = (node) => console.log('drag stop', node); -const onElementClick = (element) => console.log('click', element); -const onPaneClick = () => console.log('onPaneClick'); +const onNodeDragStart = (evt, node) => console.log('drag start', node); +const onNodeDragStop = (evt, node) => console.log('drag stop', node); +const onElementClick = (evt, element) => console.log('click', evt, element); +const onPaneClick = (evt) => console.log('onPaneClick', evt); const InteractionFlow = () => { const [elements, setElements] = useState(initialElements); diff --git a/example/src/Overview/index.js b/example/src/Overview/index.js index 8c311dce..7a52c2c5 100644 --- a/example/src/Overview/index.js +++ b/example/src/Overview/index.js @@ -2,9 +2,9 @@ import React, { useState } from 'react'; import ReactFlow, { removeElements, addEdge, MiniMap, Controls, Background, isNode } from 'react-flow-renderer'; -const onNodeDragStart = (node) => console.log('drag start', node); -const onNodeDragStop = (node) => console.log('drag stop', node); -const onElementClick = (element) => console.log(`${isNode(element) ? 'node' : 'edge'} click:`, element); +const onNodeDragStart = (evt, node) => console.log('drag start', node); +const onNodeDragStop = (evt, node) => console.log('drag stop', node); +const onElementClick = (evt, element) => console.log(`${isNode(element) ? 'node' : 'edge'} click:`, element); const onSelectionChange = (elements) => console.log('selection change', elements); const onLoad = (reactFlowInstance) => { console.log('flow loaded:', reactFlowInstance); diff --git a/example/src/Provider/index.js b/example/src/Provider/index.js index 77bee534..e9c88b9d 100644 --- a/example/src/Provider/index.js +++ b/example/src/Provider/index.js @@ -5,7 +5,7 @@ import Sidebar from './Sidebar'; import './provider.css'; -const onElementClick = (element) => console.log('click', element); +const onElementClick = (evt, element) => console.log('click', element); const initialElements = [ { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } }, diff --git a/example/src/Validation/index.js b/example/src/Validation/index.js index 48cbeafa..5a25d165 100644 --- a/example/src/Validation/index.js +++ b/example/src/Validation/index.js @@ -15,9 +15,9 @@ const isValidConnection = (connection) => connection.target === 'B'; const onLoad = (reactFlowInstance) => reactFlowInstance.fitView(); -const onConnectStart = ({ nodeId, handleType }) => console.log('on connect start', { nodeId, handleType }); +const onConnectStart = (evt, { nodeId, handleType }) => console.log('on connect start', { nodeId, handleType }); -const onConnectStop = () => console.log('on connect stop'); +const onConnectStop = (evt) => console.log('on connect stop', evt); const CustomInput = () => ( <> diff --git a/src/components/Edges/wrapEdge.tsx b/src/components/Edges/wrapEdge.tsx index 176d29d1..fe21e93a 100644 --- a/src/components/Edges/wrapEdge.tsx +++ b/src/components/Edges/wrapEdge.tsx @@ -14,7 +14,7 @@ interface EdgeWrapperProps { labelShowBg?: boolean; labelBgStyle: CSSProperties; className?: string; - onClick?: (edge: Edge) => void; + onClick?: (evt: React.MouseEvent, edge: Edge) => void; animated?: boolean; selected: boolean; elementsSelectable: boolean; @@ -51,7 +51,7 @@ export default (EdgeComponent: ComponentType) => { const edgeGroupStyle: CSSProperties = { pointerEvents: elementsSelectable ? 'all' : 'none', }; - const onEdgeClick = (): void => { + const onEdgeClick = (evt: React.MouseEvent): void => { if (!elementsSelectable) { return; } @@ -59,7 +59,7 @@ export default (EdgeComponent: ComponentType) => { setSelectedElements({ id, source, target }); if (onClick) { - onClick({ id, source, target, type }); + onClick(evt, { id, source, target, type }); } }; diff --git a/src/components/Handle/BaseHandle.tsx b/src/components/Handle/BaseHandle.tsx index 3eebae64..a94bbed4 100644 --- a/src/components/Handle/BaseHandle.tsx +++ b/src/components/Handle/BaseHandle.tsx @@ -66,7 +66,7 @@ function onMouseDown( setConnectionNodeId({ connectionNodeId: nodeId, connectionHandleType: handleType }); if (onConnectStart) { - onConnectStart({ nodeId, handleType }); + onConnectStart(evt, { nodeId, handleType }); } function resetRecentHandle(): void { @@ -142,7 +142,7 @@ function onMouseDown( setConnectionNodeId({ connectionNodeId: null, connectionHandleType: null }); if (onConnectStop) { - onConnectStop(); + onConnectStop(evt); } document.removeEventListener('mousemove', onMouseMove); diff --git a/src/components/Nodes/wrapNode.tsx b/src/components/Nodes/wrapNode.tsx index 3d790c7b..6d04ebdf 100644 --- a/src/components/Nodes/wrapNode.tsx +++ b/src/components/Nodes/wrapNode.tsx @@ -44,7 +44,7 @@ interface OnDragStartParams { transform: Transform; position: XYPosition; setSelectedElements: (elms: Elements | Node | Edge) => void; - onNodeDragStart?: (node: Node) => void; + onNodeDragStart?: (evt: MouseEvent, node: Node) => void; } const onStart = ({ @@ -74,7 +74,7 @@ const onStart = ({ setOffset({ x: offsetX, y: offsetY }); if (onNodeDragStart) { - onNodeDragStart(node); + onNodeDragStart(evt as MouseEvent, node); } if (selectNodesOnDrag && isSelectable) { @@ -110,6 +110,7 @@ const onDrag = ({ evt, setDragging, id, offset, transform, updateNodePos }: OnDr }; interface OnDragStopParams { + evt: MouseEvent; isDragging: boolean; setDragging: (isDragging: boolean) => void; id: ElementId; @@ -119,11 +120,12 @@ interface OnDragStopParams { selectNodesOnDrag: boolean; isSelectable: boolean; setSelectedElements: (elms: Elements | Node | Edge) => void; - onNodeDragStop?: (node: Node) => void; - onClick?: (node: Node) => void; + onNodeDragStop?: (evt: MouseEvent, node: Node) => void; + onClick?: (evt: MouseEvent, node: Node) => void; } const onStop = ({ + evt, id, type, position, @@ -148,14 +150,14 @@ const onStop = ({ } if (onClick) { - return onClick(node); + return onClick(evt, node); } } setDragging(false); if (onNodeDragStop) { - onNodeDragStop(node); + onNodeDragStop(evt, node); } }; @@ -240,7 +242,7 @@ export default (NodeComponent: ComponentType) => { setSelectedElements({ id: node.id, type: node.type } as Node); if (onClick) { - onClick(node); + return (evt: MouseEvent) => onClick(evt, node); } } @@ -298,8 +300,9 @@ export default (NodeComponent: ComponentType) => { }) } onDrag={(evt) => onDrag({ evt: evt as MouseEvent, setDragging, id, offset, transform, updateNodePos })} - onStop={() => + onStop={(evt) => onStop({ + evt: evt as MouseEvent, onNodeDragStop, selectNodesOnDrag, isSelectable, diff --git a/src/container/EdgeRenderer/index.tsx b/src/container/EdgeRenderer/index.tsx index 806b2821..9f239b3c 100644 --- a/src/container/EdgeRenderer/index.tsx +++ b/src/container/EdgeRenderer/index.tsx @@ -10,7 +10,7 @@ interface EdgeRendererProps { edgeTypes: any; connectionLineType: ConnectionLineType; connectionLineStyle?: CSSProperties; - onElementClick?: (element: Node | Edge) => void; + onElementClick?: (evt: React.MouseEvent, element: Node | Edge) => void; arrowHeadColor: string; markerEndId?: string; } diff --git a/src/container/GraphView/index.tsx b/src/container/GraphView/index.tsx index 4a1f251b..58e105a5 100644 --- a/src/container/GraphView/index.tsx +++ b/src/container/GraphView/index.tsx @@ -26,14 +26,14 @@ import { export interface GraphViewProps { elements: Elements; - onElementClick?: (element: Node | Edge) => void; + onElementClick?: (evt: MouseEvent, element: Node | Edge) => void; onElementsRemove?: (elements: Elements) => void; onNodeMouseEnter?: (evt: MouseEvent, node: Node) => void; onNodeMouseMove?: (evt: MouseEvent, node: Node) => void; onNodeMouseLeave?: (evt: MouseEvent, node: Node) => void; onNodeContextMenu?: (evt: MouseEvent, node: Node) => void; - onNodeDragStart?: (node: Node) => void; - onNodeDragStop?: (node: Node) => void; + onNodeDragStart?: (evt: MouseEvent, node: Node) => void; + onNodeDragStop?: (evt: MouseEvent, node: Node) => void; onConnect?: (connection: Connection | Edge) => void; onConnectStart?: OnConnectStartFunc; onConnectStop?: () => void; @@ -41,7 +41,7 @@ export interface GraphViewProps { onMove?: (flowTransform?: FlowTransform) => void; onMoveStart?: (flowTransform?: FlowTransform) => void; onMoveEnd?: (flowTransform?: FlowTransform) => void; - onPaneClick?: () => void; + onPaneClick?: (evt: MouseEvent) => void; selectionKeyCode: number; nodeTypes: NodeTypesType; edgeTypes: EdgeTypesType; @@ -125,8 +125,8 @@ const GraphView = ({ const fitView = useStoreActions((actions) => actions.fitView); const zoom = useStoreActions((actions) => actions.zoom); - const onZoomPaneClick = useCallback(() => { - onPaneClick?.(); + const onZoomPaneClick = useCallback((evt: React.MouseEvent) => { + onPaneClick?.(evt); unsetNodesSelection(); }, [onPaneClick]); diff --git a/src/container/NodeRenderer/index.tsx b/src/container/NodeRenderer/index.tsx index 8fc90157..4c5d7c84 100644 --- a/src/container/NodeRenderer/index.tsx +++ b/src/container/NodeRenderer/index.tsx @@ -7,13 +7,13 @@ import { Node, Transform, NodeTypesType, WrapNodeProps, Elements, Edge } from '. interface NodeRendererProps { nodeTypes: NodeTypesType; selectNodesOnDrag: boolean; - onElementClick?: (element: Node | Edge) => void; + onElementClick?: (evt: MouseEvent, element: Node | Edge) => void; onNodeMouseEnter?: (evt: MouseEvent, node: Node) => void; onNodeMouseMove?: (evt: MouseEvent, node: Node) => void; onNodeMouseLeave?: (evt: MouseEvent, node: Node) => void; onNodeContextMenu?: (evt: MouseEvent, node: Node) => void; - onNodeDragStart?: (node: Node) => void; - onNodeDragStop?: (node: Node) => void; + onNodeDragStart?: (evt: MouseEvent, node: Node) => void; + onNodeDragStop?: (evt: MouseEvent, node: Node) => void; onlyRenderVisibleNodes?: boolean; } diff --git a/src/container/ReactFlow/index.tsx b/src/container/ReactFlow/index.tsx index 8e383073..92231b86 100644 --- a/src/container/ReactFlow/index.tsx +++ b/src/container/ReactFlow/index.tsx @@ -34,14 +34,14 @@ import '../../style.css'; export interface ReactFlowProps extends Omit, 'onLoad'> { elements: Elements; - onElementClick?: (element: Node | Edge) => void; + onElementClick?: (evt: MouseEvent, element: Node | Edge) => void; onElementsRemove?: (elements: Elements) => void; onNodeMouseEnter?: (evt: MouseEvent, node: Node) => void; onNodeMouseMove?: (evt: MouseEvent, node: Node) => void; onNodeMouseLeave?: (evt: MouseEvent, node: Node) => void; onNodeContextMenu?: (evt: MouseEvent, node: Node) => void; - onNodeDragStart?: (node: Node) => void; - onNodeDragStop?: (node: Node) => void; + onNodeDragStart?: (evt: MouseEvent, node: Node) => void; + onNodeDragStop?: (evt: MouseEvent, node: Node) => void; onConnect?: (connection: Edge | Connection) => void; onConnectStart?: OnConnectStartFunc; onConnectStop?: () => void; diff --git a/src/types/index.ts b/src/types/index.ts index 931c50e5..c6ac6b4a 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -1,4 +1,4 @@ -import { CSSProperties, MouseEvent } from 'react'; +import { CSSProperties, MouseEvent as ReactMouseEvent } from 'react'; export type ElementId = string; @@ -154,13 +154,13 @@ export interface WrapNodeProps { isDraggable: boolean; isConnectable: boolean; selectNodesOnDrag: boolean; - onClick?: (node: Node) => void; - onMouseEnter?: (evt: MouseEvent, node: Node) => void; - onMouseMove?: (evt: MouseEvent, node: Node) => void; - onMouseLeave?: (evt: MouseEvent, node: Node) => void; - onContextMenu?: (evt: MouseEvent, node: Node) => void; - onNodeDragStart?: (node: Node) => void; - onNodeDragStop?: (node: Node) => void; + onClick?: (evt: ReactMouseEvent, node: Node) => void; + onMouseEnter?: (evt: ReactMouseEvent, node: Node) => void; + onMouseMove?: (evt: ReactMouseEvent, node: Node) => void; + onMouseLeave?: (evt: ReactMouseEvent, node: Node) => void; + onContextMenu?: (evt: ReactMouseEvent, node: Node) => void; + onNodeDragStart?: (evt: ReactMouseEvent, node: Node) => void; + onNodeDragStop?: (evt: ReactMouseEvent, node: Node) => void; style?: CSSProperties; className?: string; sourcePosition?: Position; @@ -202,8 +202,8 @@ export type OnConnectStartParams = { nodeId: ElementId | null; handleType: HandleType | null; }; -export type OnConnectStartFunc = (params: OnConnectStartParams) => void; -export type OnConnectStopFunc = () => void; +export type OnConnectStartFunc = (evt: ReactMouseEvent, params: OnConnectStartParams) => void; +export type OnConnectStopFunc = (evt: MouseEvent) => void; export type SetConnectionId = { connectionNodeId: ElementId | null; @@ -235,7 +235,7 @@ export interface EdgeCompProps { labelStyle?: CSSProperties; labelShowBg?: boolean; labelBgStyle?: CSSProperties; - onClick?: (edge: Edge) => void; + onClick?: (evt: ReactMouseEvent, edge: Edge) => void; animated?: boolean; selected?: boolean; data?: any;