feat(props): add onConnectEnd function #451

README.md

@@ -91,6 +91,7 @@ const BasicFlow = () => <ReactFlow elements={elements} />;
 - `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

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}
     />
   );
 };

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}

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}

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]);

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<HTMLAttributes<HTMLDivElement>, '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}

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<StoreModel, OnConnectFunc>;
   setOnConnectStart: Action<StoreModel, OnConnectStartFunc>;
   setOnConnectStop: Action<StoreModel, OnConnectStopFunc>;
+  setOnConnectEnd: Action<StoreModel, OnConnectEndFunc>;
 
   setElements: Action<StoreModel, Elements>;
 
@@ -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;

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;