diff --git a/README.md b/README.md index 158f2b85..99977a9c 100644 --- a/README.md +++ b/README.md @@ -91,6 +91,7 @@ const BasicFlow = () => ; - `onConnect({ source, target })`: called when user connects two nodes - `onConnectStart(event: MouseEvent, { nodeId, handleType })`: called when user starts to drag connection line - `onConnectStop(event: MouseEvent)`: called when user stops to drag connection line +- `onConnectEnd(event: MouseEvent)`: called after user stops or connects nodes - `onLoad(reactFlowInstance)`: called after flow is initialized - `onMove()`: called when user is panning or zooming - `onMoveStart()`: called when user starts panning or zooming diff --git a/example/src/Validation/index.js b/example/src/Validation/index.js index 897029ff..02d4bc57 100644 --- a/example/src/Validation/index.js +++ b/example/src/Validation/index.js @@ -15,6 +15,7 @@ const onLoad = (reactFlowInstance) => reactFlowInstance.fitView(); const isValidConnection = (connection) => connection.target === 'B'; const onConnectStart = (event, { nodeId, handleType }) => console.log('on connect start', { nodeId, handleType }); const onConnectStop = (event) => console.log('on connect stop', event); +const onConnectEnd = (event) => console.log('on connect end', event); const CustomInput = () => ( <> @@ -53,6 +54,7 @@ const HorizontalFlow = () => { nodeTypes={nodeTypes} onConnectStart={onConnectStart} onConnectStop={onConnectStop} + onConnectEnd={onConnectEnd} /> ); }; diff --git a/src/components/Handle/BaseHandle.tsx b/src/components/Handle/BaseHandle.tsx index 06481513..4b432557 100644 --- a/src/components/Handle/BaseHandle.tsx +++ b/src/components/Handle/BaseHandle.tsx @@ -9,6 +9,7 @@ import { OnConnectFunc, OnConnectStartFunc, OnConnectStopFunc, + OnConnectEndFunc, Connection, SetConnectionId, } from '../../types'; @@ -22,6 +23,7 @@ interface BaseHandleProps { onConnect: OnConnectFunc; onConnectStart?: OnConnectStartFunc; onConnectStop?: OnConnectStopFunc; + onConnectEnd?: OnConnectEndFunc; position: Position; setConnectionNodeId: SetSourceIdFunc; setPosition: (pos: XYPosition) => void; @@ -47,7 +49,8 @@ function onMouseDown( isTarget: boolean, isValidConnection: ValidConnectionFunc, onConnectStart?: OnConnectStartFunc, - onConnectStop?: OnConnectStopFunc + onConnectStop?: OnConnectStopFunc, + onConnectEnd?: OnConnectEndFunc ): void { const reactFlowNode = document.querySelector('.react-flow'); @@ -142,6 +145,10 @@ function onMouseDown( onConnect(connection); } + if (onConnectEnd) { + onConnectEnd(event); + } + resetRecentHandle(); setConnectionNodeId({ connectionNodeId: null, connectionHandleType: null }); @@ -159,6 +166,7 @@ const BaseHandle = ({ onConnect, onConnectStart, onConnectStop, + onConnectEnd, position, setConnectionNodeId, setPosition, @@ -196,7 +204,8 @@ const BaseHandle = ({ isTarget, isValidConnection, onConnectStart, - onConnectStop + onConnectStop, + onConnectEnd ) } {...rest} diff --git a/src/components/Handle/index.tsx b/src/components/Handle/index.tsx index 884d22f6..627afb86 100644 --- a/src/components/Handle/index.tsx +++ b/src/components/Handle/index.tsx @@ -23,6 +23,8 @@ const Handle = ({ const onConnectAction = useStoreState((state) => state.onConnect); const onConnectStart = useStoreState((state) => state.onConnectStart); const onConnectStop = useStoreState((state) => state.onConnectStop); + const onConnectEnd = useStoreState((state) => state.onConnectEnd); + const onConnectExtended = (params: Connection) => { if (onConnectAction) { onConnectAction(params); @@ -44,6 +46,7 @@ const Handle = ({ onConnect={onConnectExtended} onConnectStart={onConnectStart} onConnectStop={onConnectStop} + onConnectEnd={onConnectEnd} type={type} position={position} isValidConnection={isValidConnection} diff --git a/src/container/GraphView/index.tsx b/src/container/GraphView/index.tsx index 51718fbd..c3daeaf6 100644 --- a/src/container/GraphView/index.tsx +++ b/src/container/GraphView/index.tsx @@ -23,6 +23,7 @@ import { FlowTransform, OnConnectStartFunc, OnConnectStopFunc, + OnConnectEndFunc, } from '../../types'; export interface GraphViewProps { @@ -38,6 +39,7 @@ export interface GraphViewProps { onConnect?: (connection: Connection | Edge) => void; onConnectStart?: OnConnectStartFunc; onConnectStop?: OnConnectStopFunc; + onConnectEnd?: OnConnectEndFunc; onLoad?: OnLoadFunc; onMove?: (flowTransform?: FlowTransform) => void; onMoveStart?: (flowTransform?: FlowTransform) => void; @@ -91,6 +93,7 @@ const GraphView = ({ onConnect, onConnectStart, onConnectStop, + onConnectEnd, snapToGrid, snapGrid, onlyRenderVisibleNodes, @@ -119,6 +122,7 @@ const GraphView = ({ const setOnConnect = useStoreActions((actions) => actions.setOnConnect); const setOnConnectStart = useStoreActions((actions) => actions.setOnConnectStart); const setOnConnectStop = useStoreActions((actions) => actions.setOnConnectStop); + const setOnConnectEnd = useStoreActions((actions) => actions.setOnConnectEnd); const setSnapGrid = useStoreActions((actions) => actions.setSnapGrid); const setNodesDraggable = useStoreActions((actions) => actions.setNodesDraggable); const setNodesConnectable = useStoreActions((actions) => actions.setNodesConnectable); @@ -209,6 +213,12 @@ const GraphView = ({ } }, [onConnectStop]); + useEffect(() => { + if (onConnectEnd) { + setOnConnectEnd(onConnectEnd); + } + }, [onConnectEnd]); + useEffect(() => { setSnapGrid({ snapToGrid, snapGrid }); }, [snapToGrid, snapGrid]); diff --git a/src/container/ReactFlow/index.tsx b/src/container/ReactFlow/index.tsx index 037b3828..9bb2c328 100644 --- a/src/container/ReactFlow/index.tsx +++ b/src/container/ReactFlow/index.tsx @@ -29,6 +29,7 @@ import { FlowTransform, OnConnectStartFunc, OnConnectStopFunc, + OnConnectEndFunc, } from '../../types'; import '../../style.css'; @@ -46,6 +47,7 @@ export interface ReactFlowProps extends Omit, 'on onConnect?: (connection: Edge | Connection) => void; onConnectStart?: OnConnectStartFunc; onConnectStop?: OnConnectStopFunc; + onConnectEnd?: OnConnectEndFunc; onLoad?: OnLoadFunc; onMove?: (flowTransform?: FlowTransform) => void; onMoveStart?: (flowTransform?: FlowTransform) => void; @@ -93,6 +95,7 @@ const ReactFlow = ({ onConnect, onConnectStart, onConnectStop, + onConnectEnd, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, @@ -153,6 +156,7 @@ const ReactFlow = ({ onConnect={onConnect} onConnectStart={onConnectStart} onConnectStop={onConnectStop} + onConnectEnd={onConnectEnd} snapToGrid={snapToGrid} snapGrid={snapGrid} onlyRenderVisibleNodes={onlyRenderVisibleNodes} diff --git a/src/store/index.ts b/src/store/index.ts index a05f16e4..913ba56e 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -20,6 +20,7 @@ import { OnConnectFunc, OnConnectStartFunc, OnConnectStopFunc, + OnConnectEndFunc, SelectionRect, HandleType, SetConnectionId, @@ -86,10 +87,12 @@ export interface StoreModel { onConnect?: OnConnectFunc; onConnectStart?: OnConnectStartFunc; onConnectStop?: OnConnectStopFunc; + onConnectEnd?: OnConnectEndFunc; setOnConnect: Action; setOnConnectStart: Action; setOnConnectStop: Action; + setOnConnectEnd: Action; setElements: Action; @@ -186,6 +189,9 @@ export const storeModel: StoreModel = { setOnConnectStop: action((state, onConnectStop) => { state.onConnectStop = onConnectStop; }), + setOnConnectEnd: action((state, onConnectEnd) => { + state.onConnectEnd = onConnectEnd; + }), setElements: action((state, elements) => { state.elements = elements; diff --git a/src/types/index.ts b/src/types/index.ts index 08376b16..8837c769 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -211,6 +211,7 @@ export type OnConnectStartParams = { }; export type OnConnectStartFunc = (event: ReactMouseEvent, params: OnConnectStartParams) => void; export type OnConnectStopFunc = (event: MouseEvent) => void; +export type OnConnectEndFunc = (event: MouseEvent) => void; export type SetConnectionId = { connectionNodeId: ElementId | null;