refactor(props): remove onConnectStop #2299

examples/nextjs/pages/TouchDevice/index.tsx

@@ -38,12 +38,12 @@ const TouchDeviceFlow = () => {
     [setEdges]
   );
   const onConnectStart = useCallback(() => console.log('connect start'), []);
-  const onConnectStop = useCallback(() => console.log('connect end'), []);
+  const onConnectEnd = useCallback(() => console.log('connect end'), []);
   const onClickConnectStart = useCallback(
     () => console.log('click connect start'),
     []
   );
-  const onClickConnectStop = useCallback(
+  const onClickConnectEnd = useCallback(
     () => console.log('click connect end'),
     []
   );
@@ -56,9 +56,9 @@ const TouchDeviceFlow = () => {
       onNodesChange={onNodesChange}
       onEdgesChange={onEdgesChange}
       onConnectStart={onConnectStart}
-      onConnectStop={onConnectStop}
+      onConnectEnd={onConnectEnd}
       onClickConnectStart={onClickConnectStart}
-      onClickConnectStop={onClickConnectStop}
+      onClickConnectEnd={onClickConnectEnd}
       className={styles.flow}
     />
   );

packages/core/src/components/Handle/handler.ts

@@ -160,7 +160,6 @@ export function handleMouseDown({
   }
 
   function onMouseUp(event: MouseEvent) {
-    const { onConnectStop, onConnectEnd } = getState();
     const { connection, isValid } = checkElementBelowIsValid(
       event,
       connectionMode,
@@ -171,13 +170,11 @@ export function handleMouseDown({
       doc
     );
 
-    onConnectStop?.(event);
-
     if (isValid) {
       onConnect?.(connection);
     }
 
-    onConnectEnd?.(event);
+    getState().onConnectEnd?.(event);
 
     if (elementEdgeUpdaterType && onEdgeUpdateEnd) {
       onEdgeUpdateEnd(event);

packages/core/src/components/Handle/index.tsx

@@ -74,7 +74,7 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
     };
 
     const onClick = (event: React.MouseEvent) => {
-      const { onClickConnectStart, onClickConnectStop, onClickConnectEnd, connectionMode } = store.getState();
+      const { onClickConnectStart, onClickConnectEnd, connectionMode } = store.getState();
       if (!connectionStartHandle) {
         onClickConnectStart?.(event, { nodeId, handleId, handleType: type });
         store.setState({ connectionStartHandle: { nodeId, type, handleId } });
@@ -92,8 +92,6 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
         doc
       );
 
-      onClickConnectStop?.(event as unknown as MouseEvent);
-
       if (isValid) {
         onConnectExtended(connection);
       }

packages/core/src/components/StoreUpdater/index.tsx

@@ -13,10 +13,8 @@ type StoreUpdaterProps = Pick<
   | 'defaultEdges'
   | 'onConnect'
   | 'onConnectStart'
-  | 'onConnectStop'
   | 'onConnectEnd'
   | 'onClickConnectStart'
-  | 'onClickConnectStop'
   | 'onClickConnectEnd'
   | 'nodesDraggable'
   | 'nodesConnectable'
@@ -79,10 +77,8 @@ const StoreUpdater = ({
   defaultEdges,
   onConnect,
   onConnectStart,
-  onConnectStop,
   onConnectEnd,
   onClickConnectStart,
-  onClickConnectStop,
   onClickConnectEnd,
   nodesDraggable,
   nodesConnectable,
@@ -133,10 +129,8 @@ const StoreUpdater = ({
   useDirectStoreUpdater('connectionMode', connectionMode, store.setState);
   useDirectStoreUpdater('onConnect', onConnect, store.setState);
   useDirectStoreUpdater('onConnectStart', onConnectStart, store.setState);
-  useDirectStoreUpdater('onConnectStop', onConnectStop, store.setState);
   useDirectStoreUpdater('onConnectEnd', onConnectEnd, store.setState);
   useDirectStoreUpdater('onClickConnectStart', onClickConnectStart, store.setState);
-  useDirectStoreUpdater('onClickConnectStop', onClickConnectStop, store.setState);
   useDirectStoreUpdater('onClickConnectEnd', onClickConnectEnd, store.setState);
   useDirectStoreUpdater('nodesDraggable', nodesDraggable, store.setState);
   useDirectStoreUpdater('nodesConnectable', nodesConnectable, store.setState);

packages/core/src/container/ReactFlow/index.tsx

@@ -65,10 +65,8 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
       onMoveEnd,
       onConnect,
       onConnectStart,
-      onConnectStop,
       onConnectEnd,
       onClickConnectStart,
-      onClickConnectStop,
       onClickConnectEnd,
       onNodeMouseEnter,
       onNodeMouseMove,
@@ -216,10 +214,8 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             defaultEdges={defaultEdges}
             onConnect={onConnect}
             onConnectStart={onConnectStart}
-            onConnectStop={onConnectStop}
             onConnectEnd={onConnectEnd}
             onClickConnectStart={onClickConnectStart}
-            onClickConnectStop={onClickConnectStop}
             onClickConnectEnd={onClickConnectEnd}
             nodesDraggable={nodesDraggable}
             nodesConnectable={nodesConnectable}

packages/core/src/types/component-props.ts

@@ -10,7 +10,6 @@ import {
   ConnectionLineType,
   ConnectionLineComponent,
   OnConnectStart,
-  OnConnectStop,
   OnConnectEnd,
   OnConnect,
   CoordinateExtent,
@@ -58,10 +57,8 @@ export interface ReactFlowProps extends HTMLAttributes<HTMLDivElement> {
   onEdgesDelete?: OnEdgesDelete;
   onConnect?: OnConnect;
   onConnectStart?: OnConnectStart;
-  onConnectStop?: OnConnectStop;
   onConnectEnd?: OnConnectEnd;
   onClickConnectStart?: OnConnectStart;
-  onClickConnectStop?: OnConnectStop;
   onClickConnectEnd?: OnConnectEnd;
   onInit?: OnInit;
   onMove?: OnMove;

packages/core/src/types/general.ts

@@ -76,9 +76,6 @@ export type OnConnectStartParams = {
 };
 
 export type OnConnectStart = (event: ReactMouseEvent, params: OnConnectStartParams) => void;
-
-export type OnConnectStop = (event: MouseEvent) => void;
-
 export type OnConnectEnd = (event: MouseEvent) => void;
 
 export type Viewport = {
@@ -180,11 +177,9 @@ export type ReactFlowStore = {
 
   onConnect?: OnConnect;
   onConnectStart?: OnConnectStart;
-  onConnectStop?: OnConnectStop;
   onConnectEnd?: OnConnectEnd;
 
   onClickConnectStart?: OnConnectStart;
-  onClickConnectStop?: OnConnectStop;
   onClickConnectEnd?: OnConnectEnd;
 
   connectOnClick: boolean;