diff --git a/example/package-lock.json b/example/package-lock.json index 99bbb95b..b5b4f3d8 100644 --- a/example/package-lock.json +++ b/example/package-lock.json @@ -27,7 +27,7 @@ }, "..": { "name": "react-flow-renderer", - "version": "10.2.3-next.1", + "version": "10.2.3", "license": "MIT", "dependencies": { "@babel/runtime": "^7.17.9", @@ -53,6 +53,7 @@ "@types/resize-observer-browser": "^0.1.7", "autoprefixer": "^10.4.7", "babel-preset-react-app": "^10.0.1", + "cross-env": "^7.0.3", "cypress": "^9.6.1", "postcss": "^8.4.13", "postcss-cli": "^9.1.0", @@ -31536,6 +31537,7 @@ "autoprefixer": "^10.4.7", "babel-preset-react-app": "^10.0.1", "classcat": "^5.0.3", + "cross-env": "^7.0.3", "cypress": "^9.6.1", "d3-drag": "^3.0.0", "d3-selection": "^3.0.0", diff --git a/example/src/Overview/index.tsx b/example/src/Overview/index.tsx index 4113b0ec..b31966d1 100644 --- a/example/src/Overview/index.tsx +++ b/example/src/Overview/index.tsx @@ -1,4 +1,4 @@ -import { MouseEvent as ReactMouseEvent, CSSProperties } from 'react'; +import { MouseEvent as ReactMouseEvent, CSSProperties, useCallback } from 'react'; import ReactFlow, { addEdge, MiniMap, @@ -162,7 +162,7 @@ const nodeColor = (n: Node): string => { const OverviewFlow = () => { const [nodes, , onNodesChange] = useNodesState(initialNodes); const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); - const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)); + const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]); return ( { const [nodes, , onNodesChange] = useNodesState(initialNodes); const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); - const onConnect = useCallback((connection: Connection) => setEdges((eds) => addEdge(connection, eds)), []); + const onConnect = useCallback((connection: Connection) => setEdges((eds) => addEdge(connection, eds)), [setEdges]); + const onConnectStart = useCallback(() => console.log('connect start'), []); + const onConnectStop = useCallback(() => console.log('connect end'), []); + const onClickConnectStart = useCallback(() => console.log('click connect start'), []); + const onClickConnectStop = useCallback(() => console.log('click connect end'), []); return ( { onConnect={onConnect} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} + onConnectStart={onConnectStart} + onConnectStop={onConnectStop} + onClickConnectStart={onClickConnectStart} + onClickConnectStop={onClickConnectStop} className="touchdevice-flow" /> ); diff --git a/src/components/Handle/index.tsx b/src/components/Handle/index.tsx index c9cc85fc..1bdb973d 100644 --- a/src/components/Handle/index.tsx +++ b/src/components/Handle/index.tsx @@ -18,6 +18,9 @@ const selector = (s: ReactFlowState) => ({ onConnectStart: s.onConnectStart, onConnectStop: s.onConnectStop, onConnectEnd: s.onConnectEnd, + onClickConnectStart: s.onClickConnectStart, + onClickConnectStop: s.onClickConnectStop, + onClickConnectEnd: s.onClickConnectEnd, connectionMode: s.connectionMode, connectionStartHandle: s.connectionStartHandle, connectOnClick: s.connectOnClick, @@ -47,6 +50,9 @@ const Handle = forwardRef( onConnectStart, onConnectStop, onConnectEnd, + onClickConnectStart, + onClickConnectStop, + onClickConnectEnd, connectionMode, connectionStartHandle, connectOnClick, @@ -95,7 +101,7 @@ const Handle = forwardRef( const onClick = (event: React.MouseEvent) => { if (!connectionStartHandle) { - onConnectStart?.(event, { nodeId, handleId, handleType: type }); + onClickConnectStart?.(event, { nodeId, handleId, handleType: type }); store.setState({ connectionStartHandle: { nodeId, type, handleId } }); return; } @@ -111,13 +117,13 @@ const Handle = forwardRef( doc ); - onConnectStop?.(event as unknown as MouseEvent); + onClickConnectStop?.(event as unknown as MouseEvent); if (isValid) { onConnectExtended(connection); } - onConnectEnd?.(event as unknown as MouseEvent); + onClickConnectEnd?.(event as unknown as MouseEvent); store.setState({ connectionStartHandle: null }); }; diff --git a/src/components/StoreUpdater/index.tsx b/src/components/StoreUpdater/index.tsx index afefe1b0..c693d4af 100644 --- a/src/components/StoreUpdater/index.tsx +++ b/src/components/StoreUpdater/index.tsx @@ -19,7 +19,7 @@ import { DefaultEdgeOptions, FitViewOptions, OnNodesDelete, - OnEdgesDelete + OnEdgesDelete, } from '../../types'; interface StoreUpdaterProps { @@ -31,6 +31,9 @@ interface StoreUpdaterProps { onConnectStart?: OnConnectStart; onConnectStop?: OnConnectStop; onConnectEnd?: OnConnectEnd; + onClickConnectStart?: OnConnectStart; + onClickConnectStop?: OnConnectStop; + onClickConnectEnd?: OnConnectEnd; nodesDraggable?: boolean; nodesConnectable?: boolean; minZoom?: number; @@ -88,6 +91,9 @@ const StoreUpdater = ({ onConnectStart, onConnectStop, onConnectEnd, + onClickConnectStart, + onClickConnectStop, + onClickConnectEnd, nodesDraggable, nodesConnectable, minZoom, @@ -133,6 +139,9 @@ const StoreUpdater = ({ 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); useDirectStoreUpdater('elementsSelectable', elementsSelectable, store.setState); diff --git a/src/container/ReactFlow/index.tsx b/src/container/ReactFlow/index.tsx index f51b9a31..269e5b8e 100644 --- a/src/container/ReactFlow/index.tsx +++ b/src/container/ReactFlow/index.tsx @@ -68,6 +68,9 @@ const ReactFlow = forwardRef( onConnectStart, onConnectStop, onConnectEnd, + onClickConnectStart, + onClickConnectStop, + onClickConnectEnd, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, @@ -216,6 +219,9 @@ const ReactFlow = forwardRef( onConnectStart={onConnectStart} onConnectStop={onConnectStop} onConnectEnd={onConnectEnd} + onClickConnectStart={onClickConnectStart} + onClickConnectStop={onClickConnectStop} + onClickConnectEnd={onClickConnectEnd} nodesDraggable={nodesDraggable} nodesConnectable={nodesConnectable} elementsSelectable={elementsSelectable} diff --git a/src/hooks/useDrag/index.ts b/src/hooks/useDrag/index.ts index 0079a1ab..bec8950e 100644 --- a/src/hooks/useDrag/index.ts +++ b/src/hooks/useDrag/index.ts @@ -148,7 +148,7 @@ function useDrag({ .filter((event: MouseEvent) => { const target = event.target as HTMLDivElement; const filter = - !event.ctrlKey && !event.button && (!noDragClassName || !target.className?.includes?.(noDragClassName)); + !event.ctrlKey && !event.button && (!noDragClassName || !target.classList?.contains?.(noDragClassName)); return handleSelector ? selectorExistsTargetToNode(target as HTMLDivElement, handleSelector, nodeRef) && filter : filter; diff --git a/src/types/component-props.ts b/src/types/component-props.ts index 4d2a8f50..57b45804 100644 --- a/src/types/component-props.ts +++ b/src/types/component-props.ts @@ -65,6 +65,9 @@ export interface ReactFlowProps extends HTMLAttributes { onConnectStart?: OnConnectStart; onConnectStop?: OnConnectStop; onConnectEnd?: OnConnectEnd; + onClickConnectStart?: OnConnectStart; + onClickConnectStop?: OnConnectStop; + onClickConnectEnd?: OnConnectEnd; onInit?: OnInit; onMove?: OnMove; onMoveStart?: OnMoveStart; diff --git a/src/types/general.ts b/src/types/general.ts index 3adee294..978de52a 100644 --- a/src/types/general.ts +++ b/src/types/general.ts @@ -165,6 +165,10 @@ export type ReactFlowStore = { onConnectStop?: OnConnectStop; onConnectEnd?: OnConnectEnd; + onClickConnectStart?: OnConnectStart; + onClickConnectStop?: OnConnectStop; + onClickConnectEnd?: OnConnectEnd; + connectOnClick: boolean; defaultEdgeOptions?: DefaultEdgeOptions;