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;