chore(examples): add overview, cleanup

example/src/Overview/index.tsx

@@ -1,20 +1,18 @@
-import React, { useState, MouseEvent, CSSProperties } from 'react';
-
+import { MouseEvent, CSSProperties } from 'react';
 import ReactFlow, {
-  removeElements,
   addEdge,
   MiniMap,
   Controls,
   Background,
-  isNode,
   Node,
-  Elements,
-  FlowElement,
-  OnLoadParams,
   FlowTransform,
   SnapGrid,
   Connection,
   Edge,
+  ReactFlowInstance,
+  useNodesState,
+  useEdgesState,
+  OnSelectionChangeParams,
 } from 'react-flow-renderer';
 
 const onNodeDragStart = (_: MouseEvent, node: Node) => console.log('drag start', node);
@@ -31,10 +29,10 @@ const onSelectionContextMenu = (event: MouseEvent, nodes: Node[]) => {
   event.preventDefault();
   console.log('selection context menu', nodes);
 };
-const onElementClick = (_: MouseEvent, element: FlowElement) =>
-  console.log(`${isNode(element) ? 'node' : 'edge'} click:`, element);
-const onSelectionChange = (elements: Elements | null) => console.log('selection change', elements);
-const onLoad = (reactFlowInstance: OnLoadParams) => {
+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();
 };
@@ -47,7 +45,7 @@ const onEdgeMouseMove = (_: MouseEvent, edge: Edge) => console.log('edge mouse m
 const onEdgeMouseLeave = (_: MouseEvent, edge: Edge) => console.log('edge mouse leave', edge);
 const onEdgeDoubleClick = (_: MouseEvent, edge: Edge) => console.log('edge double click', edge);
 
-const initialElements: Elements = [
+const initialNodes: Node[] = [
   {
     id: '1',
     type: 'input',
@@ -121,6 +119,9 @@ const initialElements: Elements = [
     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' },
@@ -157,15 +158,17 @@ const nodeColor = (n: Node): string => {
 };
 
 const OverviewFlow = () => {
-  const [elements, setElements] = useState(initialElements);
-  const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els));
-  const onConnect = (params: Connection | Edge) => setElements((els) => addEdge(params, els));
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));
 
   return (
     <ReactFlow
-      elements={elements}
-      onElementClick={onElementClick}
-      onElementsRemove={onElementsRemove}
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onNodeClick={onNodeClick}
       onConnect={onConnect}
       onPaneClick={onPaneClick}
       onPaneScroll={onPaneScroll}
@@ -181,7 +184,7 @@ const OverviewFlow = () => {
       onSelectionChange={onSelectionChange}
       onMoveStart={onMoveStart}
       onMoveEnd={onMoveEnd}
-      onLoad={onLoad}
+      onPaneReady={onPaneReady}
       connectionLineStyle={connectionLineStyle}
       snapToGrid={true}
       snapGrid={snapGrid}

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,
   },
   {

example/src_oldapi/Basic/index.tsx

@@ -1,98 +0,0 @@
-import React, { useState, MouseEvent } from 'react';
-
-import ReactFlow, {
-  removeElements,
-  addEdge,
-  isNode,
-  Background,
-  Elements,
-  BackgroundVariant,
-  FlowElement,
-  Node,
-  Edge,
-  Connection,
-  OnLoadParams,
-} from 'react-flow-renderer';
-
-const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
-const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element);
-
-const initialNodes: Node[] = [
-  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' },
-  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' },
-  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' },
-  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' },
-];
-
-const initialEdges: Edge[] = [
-  { id: 'e1-2', source: '1', target: '2', animated: true },
-  { id: 'e1-3', source: '1', target: '3' },
-];
-
-const BasicFlow = () => {
-  const [rfInstance, setRfInstance] = useState<OnLoadParams | null>(null);
-  const [nodes, setNodes] = useState<Node[]>(initialNodes);
-  const [edges, setEdges] = useState<Edge[]>(initialEdges);
-  // const onElementsRemove = (elementsToRemove: Elements) => setNodes((els) => removeElements(elementsToRemove, els));
-  // const onConnect = (params: Edge | Connection) => setNodes((els) => addEdge(params, els));
-  const onLoad = (reactFlowInstance: OnLoadParams) => setRfInstance(reactFlowInstance);
-
-  const updatePos = () => {
-    setNodes((nds) => {
-      return nds.map((n) => {
-        n.position = {
-          x: Math.random() * 400,
-          y: Math.random() * 400,
-        };
-
-        return n;
-      });
-    });
-  };
-
-  const logToObject = () => console.log(rfInstance?.toObject());
-  const resetTransform = () => rfInstance?.setTransform({ x: 0, y: 0, zoom: 1 });
-
-  const toggleClassnames = () => {
-    setNodes((nds) => {
-      return nds.map((n) => {
-        n.className = n.className === 'light' ? 'dark' : 'light';
-
-        return n;
-      });
-    });
-  };
-
-  return (
-    <ReactFlow
-      nodes={nodes}
-      edges={edges}
-      onLoad={onLoad}
-      onElementClick={onElementClick}
-      // onElementsRemove={onElementsRemove}
-      // onConnect={onConnect}
-      onNodeDragStop={onNodeDragStop}
-      className="react-flow-basic-example"
-      defaultZoom={1.5}
-      minZoom={0.2}
-      maxZoom={4}
-    >
-      <Background variant={BackgroundVariant.Lines} />
-
-      <div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}>
-        <button onClick={resetTransform} style={{ marginRight: 5 }}>
-          reset transform
-        </button>
-        <button onClick={updatePos} style={{ marginRight: 5 }}>
-          change pos
-        </button>
-        <button onClick={toggleClassnames} style={{ marginRight: 5 }}>
-          toggle classnames
-        </button>
-        <button onClick={logToObject}>toObject</button>
-      </div>
-    </ReactFlow>
-  );
-};
-
-export default BasicFlow;

example/src_oldapi/CustomNode/ColorSelectorNode.tsx

@@ -1,25 +0,0 @@
-import React, { memo, FC, CSSProperties } from 'react';
-
-import { Handle, Position, NodeProps, Connection, Edge } from 'react-flow-renderer';
-
-const targetHandleStyle: CSSProperties = { background: '#555' };
-const sourceHandleStyleA: CSSProperties = { ...targetHandleStyle, top: 10 };
-const sourceHandleStyleB: CSSProperties = { ...targetHandleStyle, bottom: 10, top: 'auto' };
-
-const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params);
-
-const ColorSelectorNode: FC<NodeProps> = ({ data, isConnectable }) => {
-  return (
-    <>
-      <Handle type="target" position={Position.Left} style={targetHandleStyle} onConnect={onConnect} />
-      <div>
-        Custom Color Picker Node: <strong>{data.color}</strong>
-      </div>
-      <input className="nodrag" type="color" onChange={data.onChange} defaultValue={data.color} />
-      <Handle type="source" position={Position.Right} id="a" style={sourceHandleStyleA} isConnectable={isConnectable} />
-      <Handle type="source" position={Position.Right} id="b" style={sourceHandleStyleB} isConnectable={isConnectable} />
-    </>
-  );
-};
-
-export default memo(ColorSelectorNode);

example/src_oldapi/CustomNode/index.tsx

@@ -1,135 +0,0 @@
-import React, { useState, useEffect, MouseEvent } from 'react';
-import { ChangeEvent } from 'react';
-
-import ReactFlow, {
-  isEdge,
-  removeElements,
-  addEdge,
-  MiniMap,
-  Controls,
-  Node,
-  FlowElement,
-  OnLoadParams,
-  Elements,
-  Position,
-  SnapGrid,
-  Connection,
-  Edge,
-} from 'react-flow-renderer';
-
-import ColorSelectorNode from './ColorSelectorNode';
-
-const onLoad = (reactFlowInstance: OnLoadParams) => console.log('flow loaded:', reactFlowInstance);
-const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
-const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element);
-
-const initBgColor = '#1A192B';
-
-const connectionLineStyle = { stroke: '#fff' };
-const snapGrid: SnapGrid = [16, 16];
-const nodeTypes = {
-  selectorNode: ColorSelectorNode,
-};
-
-const CustomNodeFlow = () => {
-  const [elements, setElements] = useState<Elements>([]);
-  const [bgColor, setBgColor] = useState<string>(initBgColor);
-
-  useEffect(() => {
-    const onChange = (event: ChangeEvent<HTMLInputElement>) => {
-      setElements((els) =>
-        els.map((e) => {
-          if (isEdge(e) || e.id !== '2') {
-            return e;
-          }
-
-          const color = event.target.value;
-
-          setBgColor(color);
-
-          return {
-            ...e,
-            data: {
-              ...e.data,
-              color,
-            },
-          };
-        })
-      );
-    };
-
-    setElements([
-      {
-        id: '1',
-        type: 'input',
-        data: { label: 'An input node' },
-        position: { x: 0, y: 50 },
-        sourcePosition: Position.Right,
-      },
-      {
-        id: '2',
-        type: 'selectorNode',
-        data: { onChange: onChange, color: initBgColor },
-        style: { border: '1px solid #777', padding: 10 },
-        position: { x: 250, y: 50 },
-      },
-      {
-        id: '3',
-        type: 'output',
-        data: { label: 'Output A' },
-        position: { x: 550, y: 25 },
-        targetPosition: Position.Left,
-      },
-      {
-        id: '4',
-        type: 'output',
-        data: { label: 'Output B' },
-        position: { x: 550, y: 100 },
-        targetPosition: Position.Left,
-      },
-
-      { id: 'e1-2', source: '1', target: '2', animated: true, style: { stroke: '#fff' } },
-      { id: 'e2a-3', source: '2', sourceHandle: 'a', target: '3', animated: true, style: { stroke: '#fff' } },
-      { id: 'e2b-4', source: '2', sourceHandle: 'b', target: '4', animated: true, style: { stroke: '#fff' } },
-    ]);
-  }, []);
-
-  const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els));
-  const onConnect = (params: Connection | Edge) =>
-    setElements((els) => addEdge({ ...params, animated: true, style: { stroke: '#fff' } }, els));
-
-  return (
-    <ReactFlow
-      elements={elements}
-      onElementClick={onElementClick}
-      onElementsRemove={onElementsRemove}
-      onConnect={onConnect}
-      onNodeDragStop={onNodeDragStop}
-      style={{ background: bgColor }}
-      onLoad={onLoad}
-      nodeTypes={nodeTypes}
-      connectionLineStyle={connectionLineStyle}
-      snapToGrid={true}
-      snapGrid={snapGrid}
-      defaultZoom={1.5}
-    >
-      <MiniMap
-        nodeStrokeColor={(n: Node): string => {
-          if (n.type === 'input') return '#0041d0';
-          if (n.type === 'selectorNode') return bgColor;
-          if (n.type === 'output') return '#ff0072';
-
-          return '#eee';
-        }}
-        nodeColor={(n: Node): string => {
-          if (n.type === 'selectorNode') return bgColor;
-
-          return '#fff';
-        }}
-      />
-      <Controls />
-    </ReactFlow>
-  );
-};
-
-export default CustomNodeFlow;

example/src_oldapi/Stress/index.tsx

@@ -1,70 +0,0 @@
-import React, { useState, CSSProperties } from 'react';
-import ReactFlow, {
-  removeElements,
-  addEdge,
-  MiniMap,
-  isNode,
-  Controls,
-  Background,
-  OnLoadParams,
-  Elements,
-  Connection,
-  Edge,
-} from 'react-flow-renderer';
-
-import { getElements } from './utils';
-
-const buttonWrapperStyles: CSSProperties = { position: 'absolute', right: 10, top: 10, zIndex: 4 };
-
-const onLoad = (reactFlowInstance: OnLoadParams) => {
-  reactFlowInstance.fitView();
-  console.log(reactFlowInstance.getElements());
-};
-
-const initialElements: Elements = getElements(30, 30);
-
-const StressFlow = () => {
-  const [elements, setElements] = useState<Elements>(initialElements);
-  const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els));
-  const onConnect = (params: Connection | Edge) => setElements((els) => addEdge(params, els));
-
-  const updatePos = () => {
-    setElements((elms) => {
-      return elms.map((el) => {
-        if (isNode(el)) {
-          return {
-            ...el,
-            position: {
-              x: Math.random() * window.innerWidth,
-              y: Math.random() * window.innerHeight,
-            },
-          };
-        }
-
-        return el;
-      });
-    });
-  };
-
-  const updateElements = () => {
-    const grid = Math.ceil(Math.random() * 10);
-    setElements(getElements(grid, grid));
-  };
-
-  return (
-    <ReactFlow elements={elements} onLoad={onLoad} onElementsRemove={onElementsRemove} onConnect={onConnect}>
-      <MiniMap />
-      <Controls />
-      <Background />
-
-      <div style={buttonWrapperStyles}>
-        <button onClick={updatePos} style={{ marginRight: 5 }}>
-          change pos
-        </button>
-        <button onClick={updateElements}>update elements</button>
-      </div>
-    </ReactFlow>
-  );
-};
-
-export default StressFlow;

example/src_oldapi/Stress/utils.ts

@@ -1,30 +0,0 @@
-import { Elements } from 'react-flow-renderer';
-
-export function getElements(xElements: number = 10, yElements: number = 10): Elements {
-  const initialElements = [];
-  let nodeId = 1;
-  let recentNodeId = null;
-
-  for (let y = 0; y < yElements; y++) {
-    for (let x = 0; x < xElements; x++) {
-      const position = { x: x * 100, y: y * 50 };
-      const data = { label: `Node ${nodeId}` };
-      const node = {
-        id: nodeId.toString(),
-        style: { width: 50, fontSize: 11 },
-        data,
-        position,
-      };
-      initialElements.push(node);
-
-      if (recentNodeId && nodeId <= xElements * yElements) {
-        initialElements.push({ id: `${x}-${y}`, source: recentNodeId.toString(), target: nodeId.toString() });
-      }
-
-      recentNodeId = nodeId;
-      nodeId++;
-    }
-  }
-
-  return initialElements;
-}

src/types/general.ts

@@ -206,4 +206,9 @@ export type ReactFlowState = ReactFlowStore & ReactFlowActions;
 
 export type UpdateNodeInternals = (nodeId: string) => void;
 
-export type OnSelectionChangeFunc = (params: { nodes: Node[]; edges: Edge[] }) => void;
+export type OnSelectionChangeParams = {
+  nodes: Node[];
+  edges: Edge[];
+};
+
+export type OnSelectionChangeFunc = (params: OnSelectionChangeParams) => void;