chore(examples): cleanup

examples/vite-app/package.json

@@ -25,6 +25,7 @@
   },
   "devDependencies": {
     "@cypress/skip-test": "^2.6.1",
+    "@types/dagre": "^0.7.48",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
     "@vitejs/plugin-react": "^3.0.1",

examples/vite-app/src/examples/Backgrounds/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import ReactFlow, {
   Node,

examples/vite-app/src/examples/Basic/index.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEvent } from 'react';
+import { MouseEvent } from 'react';
 import ReactFlow, {
   MiniMap,
   Background,
@@ -8,7 +8,6 @@ import ReactFlow, {
   Node,
   Edge,
   useReactFlow,
-  NodeOrigin,
 } from 'reactflow';
 
 const onNodeDrag = (_: MouseEvent, node: Node) => console.log('drag', node);
@@ -22,7 +21,6 @@ const initialNodes: Node[] = [
     data: { label: 'Node 1' },
     position: { x: 250, y: 5 },
     className: 'light',
-    draggable: false,
   },
   {
     id: '2',

examples/vite-app/src/examples/CustomConnectionLine/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import ReactFlow, {
   Node,
   addEdge,

examples/vite-app/src/examples/CustomNode/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, MouseEvent, ChangeEvent, useCallback } from 'react';
+import { useState, useEffect, MouseEvent, ChangeEvent, useCallback } from 'react';
 import ReactFlow, {
   MiniMap,
   Controls,

examples/vite-app/src/examples/DefaultNodes/index.tsx

@@ -1,4 +1,12 @@
-import ReactFlow, { useReactFlow, Node, Edge, ReactFlowProvider, Background, BackgroundVariant } from 'reactflow';
+import ReactFlow, {
+  useReactFlow,
+  Node,
+  Edge,
+  ReactFlowProvider,
+  Background,
+  BackgroundVariant,
+  Panel,
+} from 'reactflow';
 
 const defaultNodes: Node[] = [
   {
@@ -72,18 +80,12 @@ const DefaultNodes = () => {
     <ReactFlow defaultNodes={defaultNodes} defaultEdges={defaultEdges} defaultEdgeOptions={defaultEdgeOptions} fitView>
       <Background variant={BackgroundVariant.Lines} />
 
-      <div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}>
+      <Panel position="top-right">
-        <button onClick={resetTransform} style={{ marginRight: 5 }}>
+        <button onClick={resetTransform}>reset transform</button>
-          reset transform
+        <button onClick={updateNodePositions}>change pos</button>
-        </button>
+        <button onClick={updateEdgeColors}>red edges</button>
-        <button onClick={updateNodePositions} style={{ marginRight: 5 }}>
-          change pos
-        </button>
-        <button onClick={updateEdgeColors} style={{ marginRight: 5 }}>
-          red edges
-        </button>
         <button onClick={logToObject}>toObject</button>
-      </div>
+      </Panel>
     </ReactFlow>
   );
 };

examples/vite-app/src/examples/DragHandle/index.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEvent } from 'react';
+import { MouseEvent } from 'react';
 import ReactFlow, { Node, Edge, useNodesState, useEdgesState } from 'reactflow';
 
 import DragHandleNode from './DragHandleNode';

examples/vite-app/src/examples/DragNDrop/Sidebar.tsx

@@ -1,4 +1,5 @@
-import React, { DragEvent } from 'react';
+import { DragEvent } from 'react';
+
 import styles from './dnd.module.css';
 
 const onDragStart = (event: DragEvent, nodeType: string) => {
@@ -9,25 +10,19 @@ const onDragStart = (event: DragEvent, nodeType: string) => {
 const Sidebar = () => {
   return (
     <aside className={styles.aside}>
-      <div className={styles.description}>
+      <div className={styles.description}>You can drag these nodes to the pane on the left.</div>
-        You can drag these nodes to the pane on the left.
+      <div className="react-flow__node-input" onDragStart={(event: DragEvent) => onDragStart(event, 'input')} draggable>
-      </div>
-      <div
-        className='react-flow__node-input'
-        onDragStart={(event: DragEvent) => onDragStart(event, 'input')}
-        draggable
-      >
         Input Node
       </div>
       <div
-        className='react-flow__node-default'
+        className="react-flow__node-default"
         onDragStart={(event: DragEvent) => onDragStart(event, 'default')}
         draggable
       >
         Default Node
       </div>
       <div
-        className='react-flow__node-output'
+        className="react-flow__node-output"
         onDragStart={(event: DragEvent) => onDragStart(event, 'output')}
         draggable
       >

examples/vite-app/src/examples/DragNDrop/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, DragEvent } from 'react';
+import { useState, DragEvent } from 'react';
 import ReactFlow, {
   ReactFlowProvider,
   addEdge,

examples/vite-app/src/examples/EdgeRenderer/index.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEvent, useCallback } from 'react';
+import { MouseEvent, useCallback } from 'react';
 import ReactFlow, {
   Controls,
   Background,

examples/vite-app/src/examples/EdgeTypes/index.tsx

@@ -1,7 +1,4 @@
-/**
+import { useCallback } from 'react';
- * Example for checking the different edge types and source and target positions
- */
-import React, { useCallback } from 'react';
 
 import ReactFlow, {
   Background,

examples/vite-app/src/examples/Edges/index.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEvent, useCallback } from 'react';
+import { MouseEvent, useCallback } from 'react';
 import ReactFlow, {
   Controls,
   Background,

examples/vite-app/src/examples/Empty/index.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEvent, CSSProperties, useCallback } from 'react';
+import { MouseEvent, CSSProperties, useCallback } from 'react';
 
 import ReactFlow, {
   Background,

examples/vite-app/src/examples/FloatingEdges/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 
 import ReactFlow, {
   Background,

examples/vite-app/src/examples/Hidden/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 
 import ReactFlow, { addEdge, Connection, Edge, Node, useNodesState, useEdgesState, MiniMap, Controls } from 'reactflow';
 

examples/vite-app/src/examples/Interaction/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, MouseEvent as ReactMouseEvent, WheelEvent } from 'react';
+import { useState, MouseEvent as ReactMouseEvent, WheelEvent } from 'react';
 import ReactFlow, {
   addEdge,
   Node,

examples/vite-app/src/examples/Layouting/index.tsx

@@ -1,4 +1,5 @@
 import { useCallback } from 'react';
+import dagre from 'dagre';
 import ReactFlow, {
   Controls,
   ReactFlowProvider,
@@ -14,8 +15,6 @@ import ReactFlow, {
   useReactFlow,
 } from 'reactflow';
 
-import dagre from 'dagre';
-
 import initialItems from './initial-elements';
 
 import styles from './layouting.module.css';

examples/vite-app/src/examples/MultiFlows/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import ReactFlow, {
   Background,

examples/vite-app/src/examples/NestedNodes/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, MouseEvent, useCallback } from 'react';
+import { useState, MouseEvent, useCallback } from 'react';
 import ReactFlow, {
   Controls,
   MiniMap,

examples/vite-app/src/examples/NodeTypeChange/index.tsx

@@ -1,5 +1,4 @@
-import React, { CSSProperties, useCallback } from 'react';
+import { CSSProperties, useCallback } from 'react';
-
 import ReactFlow, { addEdge, Node, Position, Connection, Edge, useNodesState, useEdgesState } from 'reactflow';
 
 const initialNodes: Node[] = [

examples/vite-app/src/examples/NodeTypesObjectChange/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, CSSProperties, FC, useCallback } from 'react';
+import { useState, CSSProperties, FC, useCallback } from 'react';
 import ReactFlow, {
   addEdge,
   Node,

examples/vite-app/src/examples/Overview/index.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEvent as ReactMouseEvent, CSSProperties, useCallback } from 'react';
+import { MouseEvent as ReactMouseEvent, CSSProperties, useCallback } from 'react';
 import ReactFlow, {
   addEdge,
   Node,

examples/vite-app/src/examples/Provider/index.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEvent, useCallback } from 'react';
+import { MouseEvent, useCallback } from 'react';
 import ReactFlow, {
   Controls,
   ReactFlowProvider,

examples/vite-app/src/examples/SaveRestore/index.tsx

@@ -1,5 +1,6 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import ReactFlow, { ReactFlowProvider, Node, addEdge, Connection, Edge, useNodesState, useEdgesState } from 'reactflow';
+
 import Controls from './Controls';
 
 const initialNodes: Node[] = [

examples/vite-app/src/examples/Stress/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, CSSProperties, useCallback } from 'react';
+import { useState, CSSProperties, useCallback } from 'react';
 import ReactFlow, {
   ReactFlowInstance,
   Edge,

examples/vite-app/src/examples/Subflow/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, MouseEvent, useCallback } from 'react';
+import { useState, MouseEvent, useCallback } from 'react';
 import ReactFlow, {
   addEdge,
   Node,
@@ -12,7 +12,6 @@ import ReactFlow, {
   MiniMap,
   Background,
   Panel,
-  NodeOrigin,
 } from 'reactflow';
 
 import DebugNode from './DebugNode';

examples/vite-app/src/examples/TouchDevice/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import ReactFlow, { Node, Edge, useNodesState, useEdgesState, Position, Connection, addEdge } from 'reactflow';
 
 import styles from './touch-device.module.css';

examples/vite-app/src/examples/Undirectional/index.tsx

@@ -182,12 +182,13 @@ const getId = () => `${id++}`;
 const UpdateNodeInternalsFlow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-
-  const onConnect = (params: Edge | Connection) => setEdges((els) => addEdge(params, els));
-
   const { project } = useReactFlow();
-  const onEdgeUpdate = (oldEdge: Edge, newConnection: Connection) =>
+
-    setEdges((els) => updateEdge(oldEdge, newConnection, els));
+  const onConnect = useCallback((params: Edge | Connection) => setEdges((els) => addEdge(params, els)), [setEdges]);
+  const onEdgeUpdate = useCallback(
+    (oldEdge: Edge, newConnection: Connection) => setEdges((els) => updateEdge(oldEdge, newConnection, els)),
+    []
+  );
 
   const onPaneClick = useCallback(
     (evt: MouseEvent) =>

examples/vite-app/src/examples/UpdatableEdge/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import { useState, useCallback, MouseEvent as ReactMouseEvent } from 'react';
 import ReactFlow, {
   Controls,
   updateEdge,
@@ -60,9 +60,9 @@ const initialNodes: Node[] = [
 const initialEdges = [{ id: 'e1-2', source: '1', target: '2', label: 'This is a draggable edge' }];
 
 const onInit = (reactFlowInstance: ReactFlowInstance) => reactFlowInstance.fitView();
-const onEdgeUpdateStart = (_: React.MouseEvent, edge: Edge, handleType: HandleType) =>
+const onEdgeUpdateStart = (_: ReactMouseEvent, edge: Edge, handleType: HandleType) =>
   console.log(`start update ${handleType} handle`, edge);
-const onEdgeUpdateEnd = (_: MouseEvent, edge: Edge, handleType: HandleType) =>
+const onEdgeUpdateEnd = (_: MouseEvent | TouchEvent, edge: Edge, handleType: HandleType) =>
   console.log(`end update ${handleType} handle`, edge);
 
 const UpdatableEdge = () => {
@@ -91,8 +91,8 @@ const UpdatableEdge = () => {
       snapToGrid={true}
       onEdgeUpdate={onEdgeUpdate}
       onConnect={onConnect}
-      // onEdgeUpdateStart={onEdgeUpdateStart}
+      onEdgeUpdateStart={onEdgeUpdateStart}
-      // onEdgeUpdateEnd={onEdgeUpdateEnd}
+      onEdgeUpdateEnd={onEdgeUpdateEnd}
     >
       <Controls />
     </ReactFlow>

examples/vite-app/src/examples/UpdateNode/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import ReactFlow, { Node, Edge, useNodesState, useEdgesState } from 'reactflow';
 
 import styles from './updatenode.module.css';

examples/vite-app/src/examples/UseReactFlow/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, MouseEvent, useEffect } from 'react';
+import { useCallback, MouseEvent, useEffect } from 'react';
 import ReactFlow, {
   Background,
   MiniMap,
@@ -10,6 +10,7 @@ import ReactFlow, {
   Edge,
   useNodesState,
   useEdgesState,
+  Panel,
 } from 'reactflow';
 
 const initialNodes: Node[] = [
@@ -65,7 +66,7 @@ const UseZoomPanHelperFlow = () => {
     addEdges,
     getNodes,
     getEdges,
-    deleteElements
+    deleteElements,
   } = useReactFlow();
 
   const onPaneClick = useCallback(
@@ -114,14 +115,14 @@ const UseZoomPanHelperFlow = () => {
   }, [getNodes, getEdges]);
 
   const deleteSelectedElements = useCallback(() => {
-    const selectedNodes = nodes.filter(node => node.selected);
+    const selectedNodes = nodes.filter((node) => node.selected);
-    const selectedEdges = edges.filter(edge => edge.selected);
+    const selectedEdges = edges.filter((edge) => edge.selected);
     deleteElements({ nodes: selectedNodes, edges: selectedEdges });
-  }, [deleteElements, nodes, edges])
+  }, [deleteElements, nodes, edges]);
 
   const deleteSomeElements = useCallback(() => {
-    deleteElements({ nodes: [{ id: '2' }], edges: [{ id: 'e1-3' }] })
+    deleteElements({ nodes: [{ id: '2' }], edges: [{ id: 'e1-3' }] });
-  }, [])
+  }, []);
 
   useEffect(() => {
     addEdges({ id: 'e3-4', source: '3', target: '4' });
@@ -142,7 +143,7 @@ const UseZoomPanHelperFlow = () => {
       fitViewOptions={{ duration: 1200, padding: 0.2 }}
       maxZoom={Infinity}
     >
-      <div style={{ position: 'absolute', left: 0, top: 0, zIndex: 100 }}>
+      <Panel position="top-right">
         <button onClick={() => zoomIn({ duration: 1200 })}>zoomIn</button>
         <button onClick={() => zoomOut({ duration: 0 })}>zoomOut</button>
         <button onClick={() => fitView({ duration: 1200, padding: 0.3 })}>fitView</button>
@@ -151,7 +152,7 @@ const UseZoomPanHelperFlow = () => {
         <button onClick={logNodes}>useNodes</button>
         <button onClick={deleteSelectedElements}>deleteSelectedElements</button>
         <button onClick={deleteSomeElements}>deleteSomeElements</button>
-      </div>
+      </Panel>
       <Background />
       <MiniMap />
     </ReactFlow>

pnpm-lock.yaml

@@ -58,6 +58,7 @@ importers:
     specifiers:
       '@cypress/skip-test': ^2.6.1
       '@reactflow/node-resizer': workspace:*
+      '@types/dagre': ^0.7.48
       '@types/react': ^18.0.17
       '@types/react-dom': ^18.0.6
       '@vitejs/plugin-react': ^3.0.1
@@ -84,6 +85,7 @@ importers:
       reactflow: link:../../packages/reactflow
     devDependencies:
       '@cypress/skip-test': registry.npmjs.org/@cypress/skip-test/2.6.1
+      '@types/dagre': registry.npmjs.org/@types/dagre/0.7.48
       '@types/react': registry.npmjs.org/@types/react/18.0.19
       '@types/react-dom': registry.npmjs.org/@types/react-dom/18.0.6
       '@vitejs/plugin-react': registry.npmjs.org/@vitejs/plugin-react/3.0.1_vite@4.0.4
@@ -2046,6 +2048,12 @@ packages:
       '@types/d3-zoom': registry.npmjs.org/@types/d3-zoom/3.0.1
     dev: false
 
+  registry.npmjs.org/@types/dagre/0.7.48:
+    resolution: {integrity: sha512-rF3yXSwHIrDxEkN6edCE4TXknb5YSEpiXfLaspw1I08grC49ZFuAVGOQCmZGIuLUGoFgcqGlUFBL/XrpgYpQgw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/dagre/-/dagre-0.7.48.tgz}
+    name: '@types/dagre'
+    version: 0.7.48
+    dev: true
+
   registry.npmjs.org/@types/estree/0.0.39:
     resolution: {integrity: sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==, registry: https://registry.npmjs.com/, tarball: https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz}
     name: '@types/estree'