refactor(examples): on connect use connection type

example/src/Basic/index.tsx

@@ -111,9 +111,9 @@ const BasicFlow = () => {
   const [nodes, setNodes] = useState<Node[]>(initialNodes);
   const [edges, setEdges] = useState<Edge[]>(initialEdges);
 
-  const onConnect = useCallback((params: Edge | Connection) => {
+  const onConnect = useCallback((connection: Connection) => {
     setEdges((eds) => {
-      return addEdge(params, eds);
+      return addEdge(connection, eds);
     });
   }, []);
   const onLoad = useCallback((reactFlowInstance: OnLoadParams) => setRfInstance(reactFlowInstance), []);

example/src/CustomNode/index.tsx

@@ -100,8 +100,8 @@ const CustomNodeFlow = () => {
     ]);
   }, []);
 
-  const onConnect = (params: Connection | Edge) =>
-    setEdges((eds) => addEdge({ ...params, animated: true, style: { stroke: '#fff' } }, eds));
+  const onConnect = (connection: Connection) =>
+    setEdges((eds) => addEdge({ ...connection, animated: true, style: { stroke: '#fff' } }, eds));
 
   const onNodesChange = useCallback((changes: NodeChange[]) => {
     setNodes((ns) => applyNodeChanges(changes, ns));

example/src/FloatingEdges/index.tsx

@@ -32,8 +32,8 @@ const FloatingEdges = () => {
   const [nodes, setNodes] = useState<Node[]>(initialNodes);
   const [edges, setEdges] = useState<Edge[]>(initialEdges);
 
-  const onConnect = useCallback((params: Edge | Connection) => {
-    setEdges((eds) => addEdge(params, eds));
+  const onConnect = useCallback((connection: Connection) => {
+    setEdges((eds) => addEdge(connection, eds));
   }, []);
 
   const onNodesChange = useCallback((changes: NodeChange[]) => {

example/src/Hidden/index.tsx

@@ -27,8 +27,8 @@ const HiddenFlow = () => {
   const [edges, setEdges] = useState<Edge[]>(initialEdges);
   const [isHidden, setIsHidden] = useState<boolean>(true);
 
-  const onConnect = useCallback((params: Edge | Connection) => {
-    setEdges((eds) => addEdge(params, eds));
+  const onConnect = useCallback((connection: Connection) => {
+    setEdges((eds) => addEdge(connection, eds));
   }, []);
 
   useEffect(() => {

example/src/Layouting/index.tsx

@@ -31,10 +31,8 @@ const LayoutFlow = () => {
   const [nodes, setNodes] = useState<Node[]>(initialNodesAndEdges.nodes);
   const [edges, setEdges] = useState<Edge[]>(initialNodesAndEdges.edges);
 
-  const onConnect = useCallback((params: Edge | Connection) => {
-    setEdges((eds) => {
-      return addEdge(params, eds);
-    });
+  const onConnect = useCallback((connection: Connection) => {
+    setEdges((eds) => addEdge(connection, eds));
   }, []);
 
   const onLayout = (direction: string) => {

example/src/NestedNodes/index.tsx

@@ -85,19 +85,13 @@ const initialEdges: Edge[] = [
   { id: 'e4b1-4b2', source: '4b1', target: '4b2' },
 ];
 
-function shuffle() {
-  return Math.random() - Math.random();
-}
-
 const NestedFlow = () => {
   const [rfInstance, setRfInstance] = useState<OnLoadParams | null>(null);
   const [nodes, setNodes] = useState<Node[]>(initialNodes);
   const [edges, setEdges] = useState<Edge[]>(initialEdges);
 
-  const onConnect = useCallback((params: Edge | Connection) => {
-    setEdges((eds) => {
-      return addEdge(params, eds);
-    });
+  const onConnect = useCallback((connection: Connection) => {
+    setEdges((eds) => addEdge(connection, eds));
   }, []);
   const onLoad = useCallback((reactFlowInstance: OnLoadParams) => setRfInstance(reactFlowInstance), []);
 

example/src/Stress/index.tsx

@@ -26,8 +26,8 @@ const { nodes: initialNodes, edges: initialEdges } = getNodesAndEdges(30, 30);
 const StressFlow = () => {
   const [nodes, setNodes] = useState<Node[]>(initialNodes);
   const [edges, setEdges] = useState<Edge[]>(initialEdges);
-  const onConnect = useCallback((params: Edge | Connection) => {
-    setEdges((eds) => addEdge(params, eds));
+  const onConnect = useCallback((connection: Connection) => {
+    setEdges((eds) => addEdge(connection, eds));
   }, []);
   const updatePos = () => {
     setNodes((nds) => {
@@ -51,8 +51,6 @@ const StressFlow = () => {
   };
 
   const onNodesChange = useCallback((changes: NodeChange[]) => {
-    console.log('node change', changes);
-
     setNodes((ns) => applyNodeChanges(changes, ns));
   }, []);
 

example/src/UpdatableEdge/index.tsx

@@ -62,7 +62,7 @@ const UpdatableEdge = () => {
   const [edges, setEdges] = useState<Edge[]>(initialEdges);
   const onEdgeUpdate = (oldEdge: Edge, newConnection: Connection) =>
     setEdges((els) => updateEdge(oldEdge, newConnection, els));
-  const onConnect = (params: Connection | Edge) => setEdges((els) => addEdge(params, els));
+  const onConnect = (connection: Connection) => setEdges((els) => addEdge(connection, els));
 
   const onNodesChange = useCallback((changes: NodeChange[]) => {
     setNodes((ns) => applyNodeChanges(changes, ns));