chore(examples): add overview, cleanup

example/src/Overview/index.tsx

@@ -0,0 +1,204 @@
+import { MouseEvent, CSSProperties } from 'react';
+import ReactFlow, {
+  addEdge,
+  MiniMap,
+  Controls,
+  Background,
+  Node,
+  FlowTransform,
+  SnapGrid,
+  Connection,
+  Edge,
+  ReactFlowInstance,
+  useNodesState,
+  useEdgesState,
+  OnSelectionChangeParams,
+} from 'react-flow-renderer';
+
+const onNodeDragStart = (_: MouseEvent, node: Node) => console.log('drag start', node);
+const onNodeDrag = (_: MouseEvent, node: Node) => console.log('drag', node);
+const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
+const onNodeDoubleClick = (_: MouseEvent, node: Node) => console.log('node double click', node);
+const onPaneClick = (event: MouseEvent) => console.log('pane click', event);
+const onPaneScroll = (event?: MouseEvent) => console.log('pane scroll', event);
+const onPaneContextMenu = (event: MouseEvent) => console.log('pane context menu', event);
+const onSelectionDrag = (_: MouseEvent, nodes: Node[]) => console.log('selection drag', nodes);
+const onSelectionDragStart = (_: MouseEvent, nodes: Node[]) => console.log('selection drag start', nodes);
+const onSelectionDragStop = (_: MouseEvent, nodes: Node[]) => console.log('selection drag stop', nodes);
+const onSelectionContextMenu = (event: MouseEvent, nodes: Node[]) => {
+  event.preventDefault();
+  console.log('selection context menu', nodes);
+};
+const onNodeClick = (_: MouseEvent, node: Node) => console.log('node click:', node);
+
+const onSelectionChange = ({ nodes, edges }: OnSelectionChangeParams) => console.log('selection change', nodes, edges);
+const onPaneReady = (reactFlowInstance: ReactFlowInstance) => {
+  console.log('flow loaded:', reactFlowInstance);
+  reactFlowInstance.fitView();
+};
+
+const onMoveStart = (transform?: FlowTransform) => console.log('zoom/move start', transform);
+const onMoveEnd = (transform?: FlowTransform) => console.log('zoom/move end', transform);
+const onEdgeContextMenu = (_: MouseEvent, edge: Edge) => console.log('edge context menu', edge);
+const onEdgeMouseEnter = (_: MouseEvent, edge: Edge) => console.log('edge mouse enter', edge);
+const onEdgeMouseMove = (_: MouseEvent, edge: Edge) => console.log('edge mouse move', edge);
+const onEdgeMouseLeave = (_: MouseEvent, edge: Edge) => console.log('edge mouse leave', edge);
+const onEdgeDoubleClick = (_: MouseEvent, edge: Edge) => console.log('edge double click', edge);
+
+const initialNodes: Node[] = [
+  {
+    id: '1',
+    type: 'input',
+    data: {
+      label: (
+        <>
+          Welcome to <strong>React Flow!</strong>
+        </>
+      ),
+    },
+    position: { x: 250, y: 0 },
+  },
+  {
+    id: '2',
+    data: {
+      label: (
+        <>
+          This is a <strong>default node</strong>
+        </>
+      ),
+    },
+    position: { x: 100, y: 100 },
+  },
+  {
+    id: '3',
+    data: {
+      label: (
+        <>
+          This one has a <strong>custom style</strong>
+        </>
+      ),
+    },
+    position: { x: 400, y: 100 },
+    style: { background: '#D6D5E6', color: '#333', border: '1px solid #222138', width: 180 },
+  },
+  {
+    id: '4',
+    position: { x: 250, y: 200 },
+    data: {
+      label: (
+        <>
+          You can find the docs on{' '}
+          <a href="https://github.com/wbkd/react-flow" target="_blank" rel="noopener noreferrer">
+            Github
+          </a>
+        </>
+      ),
+    },
+  },
+  {
+    id: '5',
+    data: {
+      label: (
+        <>
+          Or check out the other <strong>examples</strong>
+        </>
+      ),
+    },
+    position: { x: 250, y: 325 },
+  },
+  {
+    id: '6',
+    type: 'output',
+    data: {
+      label: (
+        <>
+          An <strong>output node</strong>
+        </>
+      ),
+    },
+    position: { x: 100, y: 480 },
+  },
+  { id: '7', type: 'output', data: { label: 'Another output node' }, position: { x: 400, y: 450 } },
+];
+
+const initialEdges: Edge[] = [
+  { id: 'e1-2', source: '1', target: '2', label: 'this is an edge label' },
+  { id: 'e1-3', source: '1', target: '3' },
+  { id: 'e3-4', source: '3', target: '4', animated: true, label: 'animated edge' },
+  { id: 'e4-5', source: '4', target: '5', label: 'edge with arrow head' },
+  { id: 'e5-6', source: '5', target: '6', type: 'smoothstep', label: 'smooth step edge' },
+  {
+    id: 'e5-7',
+    source: '5',
+    target: '7',
+    type: 'step',
+    style: { stroke: '#f6ab6c' },
+    label: 'a step edge',
+    animated: true,
+    labelStyle: { fill: '#f6ab6c', fontWeight: 700 },
+  },
+];
+
+const connectionLineStyle: CSSProperties = { stroke: '#ddd' };
+const snapGrid: SnapGrid = [16, 16];
+
+const nodeStrokeColor = (n: Node): string => {
+  if (n.style?.background) return n.style.background as string;
+  if (n.type === 'input') return '#0041d0';
+  if (n.type === 'output') return '#ff0072';
+  if (n.type === 'default') return '#1a192b';
+
+  return '#eee';
+};
+
+const nodeColor = (n: Node): string => {
+  if (n.style?.background) return n.style.background as string;
+
+  return '#fff';
+};
+
+const OverviewFlow = () => {
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onNodeClick={onNodeClick}
+      onConnect={onConnect}
+      onPaneClick={onPaneClick}
+      onPaneScroll={onPaneScroll}
+      onPaneContextMenu={onPaneContextMenu}
+      onNodeDragStart={onNodeDragStart}
+      onNodeDrag={onNodeDrag}
+      onNodeDragStop={onNodeDragStop}
+      onNodeDoubleClick={onNodeDoubleClick}
+      onSelectionDragStart={onSelectionDragStart}
+      onSelectionDrag={onSelectionDrag}
+      onSelectionDragStop={onSelectionDragStop}
+      onSelectionContextMenu={onSelectionContextMenu}
+      onSelectionChange={onSelectionChange}
+      onMoveStart={onMoveStart}
+      onMoveEnd={onMoveEnd}
+      onPaneReady={onPaneReady}
+      connectionLineStyle={connectionLineStyle}
+      snapToGrid={true}
+      snapGrid={snapGrid}
+      onEdgeContextMenu={onEdgeContextMenu}
+      onEdgeMouseEnter={onEdgeMouseEnter}
+      onEdgeMouseMove={onEdgeMouseMove}
+      onEdgeMouseLeave={onEdgeMouseLeave}
+      onEdgeDoubleClick={onEdgeDoubleClick}
+    >
+      <MiniMap nodeStrokeColor={nodeStrokeColor} nodeColor={nodeColor} nodeBorderRadius={2} />
+      <Controls />
+      <Background color="#aaa" gap={20} />
+    </ReactFlow>
+  );
+};
+
+export default OverviewFlow;

example/src/TouchDevice/index.tsx

@@ -42,6 +42,7 @@ const TouchDeviceFlow = () => {
       onConnect={onConnect}
       onNodesChange={onNodesChange}
       onEdgesChange={onEdgesChange}
+      className="touchdevice-flow"
     />
   );
 };

example/src/TouchDevice/touch-device.css

@@ -1,11 +1,11 @@
-.react-flow .react-flow__handle {
+.touchdevice-flow .react-flow__handle {
   width: 20px;
   height: 20px;
   border-radius: 3px;
   background-color: #9f7aea;
 }
 
-.react-flow__handle.connecting {
+.touchdevice-flow .react-flow__handle.connecting {
   animation: bounce 1600ms infinite ease-out;
 }
 

example/src/index.tsx

@@ -2,6 +2,7 @@ import { ChangeEvent } from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter as Router, Route, Switch, withRouter } from 'react-router-dom';
 
+import Overview from './Overview';
 import Basic from './Basic';
 import UpdateNode from './UpdateNode';
 import Stress from './Stress';
@@ -18,6 +19,10 @@ import './index.css';
 const routes = [
   {
     path: '/',
+    component: Overview,
+  },
+  {
+    path: '/basic',
     component: Basic,
   },
   {