refactor(connect-events): add onClickConnect events

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