refactor(connect-events): add onClickConnect events

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",

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 (
     <ReactFlow

example/src/TouchDevice/index.tsx

@@ -33,7 +33,11 @@ const initialEdges: Edge[] = [];
 const TouchDeviceFlow = () => {
   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 (
     <ReactFlow
@@ -42,6 +46,10 @@ const TouchDeviceFlow = () => {
       onConnect={onConnect}
       onNodesChange={onNodesChange}
       onEdgesChange={onEdgesChange}
+      onConnectStart={onConnectStart}
+      onConnectStop={onConnectStop}
+      onClickConnectStart={onClickConnectStart}
+      onClickConnectStop={onClickConnectStop}
       className="touchdevice-flow"
     />
   );

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<HTMLDivElement, HandleComponentProps>(
       onConnectStart,
       onConnectStop,
       onConnectEnd,
+      onClickConnectStart,
+      onClickConnectStop,
+      onClickConnectEnd,
       connectionMode,
       connectionStartHandle,
       connectOnClick,
@@ -95,7 +101,7 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
 
     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<HTMLDivElement, HandleComponentProps>(
         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 });
     };

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

src/container/ReactFlow/index.tsx

@@ -68,6 +68,9 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
       onConnectStart,
       onConnectStop,
       onConnectEnd,
+      onClickConnectStart,
+      onClickConnectStop,
+      onClickConnectEnd,
       onNodeMouseEnter,
       onNodeMouseMove,
       onNodeMouseLeave,
@@ -216,6 +219,9 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             onConnectStart={onConnectStart}
             onConnectStop={onConnectStop}
             onConnectEnd={onConnectEnd}
+            onClickConnectStart={onClickConnectStart}
+            onClickConnectStop={onClickConnectStop}
+            onClickConnectEnd={onClickConnectEnd}
             nodesDraggable={nodesDraggable}
             nodesConnectable={nodesConnectable}
             elementsSelectable={elementsSelectable}

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;

src/types/component-props.ts

@@ -65,6 +65,9 @@ export interface ReactFlowProps extends HTMLAttributes<HTMLDivElement> {
   onConnectStart?: OnConnectStart;
   onConnectStop?: OnConnectStop;
   onConnectEnd?: OnConnectEnd;
+  onClickConnectStart?: OnConnectStart;
+  onClickConnectStop?: OnConnectStop;
+  onClickConnectEnd?: OnConnectEnd;
   onInit?: OnInit;
   onMove?: OnMove;
   onMoveStart?: OnMoveStart;

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;