diff --git a/examples/nextjs/pages/TouchDevice/index.tsx b/examples/nextjs/pages/TouchDevice/index.tsx index 561bb465..472e5433 100644 --- a/examples/nextjs/pages/TouchDevice/index.tsx +++ b/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} /> ); diff --git a/packages/core/src/components/Handle/handler.ts b/packages/core/src/components/Handle/handler.ts index 6e03da96..a446eb21 100644 --- a/packages/core/src/components/Handle/handler.ts +++ b/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); diff --git a/packages/core/src/components/Handle/index.tsx b/packages/core/src/components/Handle/index.tsx index 289d934f..357eac76 100644 --- a/packages/core/src/components/Handle/index.tsx +++ b/packages/core/src/components/Handle/index.tsx @@ -74,7 +74,7 @@ const Handle = forwardRef( }; 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( doc ); - onClickConnectStop?.(event as unknown as MouseEvent); - if (isValid) { onConnectExtended(connection); } diff --git a/packages/core/src/components/StoreUpdater/index.tsx b/packages/core/src/components/StoreUpdater/index.tsx index 315d68ec..2ccc56cc 100644 --- a/packages/core/src/components/StoreUpdater/index.tsx +++ b/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); diff --git a/packages/core/src/container/ReactFlow/index.tsx b/packages/core/src/container/ReactFlow/index.tsx index 100712ed..1ad3c333 100644 --- a/packages/core/src/container/ReactFlow/index.tsx +++ b/packages/core/src/container/ReactFlow/index.tsx @@ -65,10 +65,8 @@ const ReactFlow = forwardRef( onMoveEnd, onConnect, onConnectStart, - onConnectStop, onConnectEnd, onClickConnectStart, - onClickConnectStop, onClickConnectEnd, onNodeMouseEnter, onNodeMouseMove, @@ -216,10 +214,8 @@ const ReactFlow = forwardRef( defaultEdges={defaultEdges} onConnect={onConnect} onConnectStart={onConnectStart} - onConnectStop={onConnectStop} onConnectEnd={onConnectEnd} onClickConnectStart={onClickConnectStart} - onClickConnectStop={onClickConnectStop} onClickConnectEnd={onClickConnectEnd} nodesDraggable={nodesDraggable} nodesConnectable={nodesConnectable} diff --git a/packages/core/src/types/component-props.ts b/packages/core/src/types/component-props.ts index c6110bee..1c8f72da 100644 --- a/packages/core/src/types/component-props.ts +++ b/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 { onEdgesDelete?: OnEdgesDelete; onConnect?: OnConnect; onConnectStart?: OnConnectStart; - onConnectStop?: OnConnectStop; onConnectEnd?: OnConnectEnd; onClickConnectStart?: OnConnectStart; - onClickConnectStop?: OnConnectStop; onClickConnectEnd?: OnConnectEnd; onInit?: OnInit; onMove?: OnMove; diff --git a/packages/core/src/types/general.ts b/packages/core/src/types/general.ts index 8754e640..38181736 100644 --- a/packages/core/src/types/general.ts +++ b/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;