test(examples): use new api for test examples

2021-12-22 14:19:57 +01:00
parent ca77d0ef4c
commit 8014fb0f44
16 changed files with 341 additions and 216 deletions
@@ -1,130 +1,49 @@
-import { useState, MouseEvent, useCallback } from 'react';
+import { useState, MouseEvent } from 'react';

 import ReactFlow, {
  addEdge,
  Background,
-  MiniMap,
-  Controls,
+  BackgroundVariant,
+  FlowElement,
  Node,
  Edge,
-  ReactFlowInstance,
  Connection,
-  MarkerType,
  useNodesState,
  useEdgesState,
+  ReactFlowInstance,
 } from 'react-flow-renderer';
-import DebugNode from './DebugNode';

 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
-const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
-const onEdgeClick = (_: MouseEvent, edge: Edge) => console.log('click', edge);
+const onNodeClick = (_: 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: '4',
-    data: { label: 'Node 4' },
-    position: { x: 100, y: 200 },
-    className: 'light',
-    style: { backgroundColor: 'rgba(255,50, 50, 0.5)', width: 500, height: 300 },
-  },
-  {
-    id: '4a',
-    data: { label: 'Node 4a' },
-    position: { x: 15, y: 15 },
-    className: 'light',
-    parentNode: '4',
-    extent: 'parent',
-  },
-  {
-    id: '4b',
-    data: { label: 'Node 4b' },
-    position: { x: 150, y: 50 },
-    className: 'light',
-    style: { backgroundColor: 'rgba(50, 50, 255, 0.5)', height: 200, width: 300 },
-    parentNode: '4',
-  },
-  {
-    id: '4b1',
-    data: { label: 'Node 4b1' },
-    position: { x: 20, y: 20 },
-    className: 'light',
-    parentNode: '4b',
-  },
-  {
-    id: '4b2',
-    data: { label: 'Node 4b2' },
-    position: { x: 100, y: 100 },
-    className: 'light',
-    parentNode: '4b',
-  },
-  {
-    id: '5',
-    data: { label: 'Node 5' },
-    position: { x: 650, y: 250 },
-    className: 'light',
-    style: { backgroundColor: 'rgba(20 ,200, 255, 1.5)', width: 400, height: 150 },
-    zIndex: 1000,
-  },
-  {
-    id: '5a',
-    data: { label: 'Node 5a' },
-    position: { x: 25, y: 50 },
-    className: 'light',
-    parentNode: '5',
-  },
-  {
-    id: '5b',
-    data: { label: 'Node 5b' },
-    position: { x: 225, y: 50 },
-    className: 'light',
-    parentNode: '5',
-  },
  { 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',
-    markerEnd: { type: MarkerType.Arrow, strokeWidth: 2, width: 15, height: 15, color: '#f00' },
-  },
+  { id: 'e1-2', source: '1', target: '2', animated: true },
  { id: 'e1-3', source: '1', target: '3' },
-  { id: 'e3-4', source: '3', target: '4', zIndex: 100 },
-  { id: 'e3-4b', source: '3', target: '4b' },
-  { id: 'e4a-4b1', source: '4a', target: '4b1' },
-  { id: 'e4a-4b2', source: '4a', target: '4b2', zIndex: 100 },
-  { id: 'e4b1-4b2', source: '4b1', target: '4b2' },
-  { id: '3-5', source: '3', target: '5' },
 ];

-const nodeTypes = {
-  default: DebugNode,
-};
-
 const BasicFlow = () => {
  const [rfInstance, setRfInstance] = useState<ReactFlowInstance | null>(null);
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-
-  const onConnect = useCallback((connection: Connection) => {
-    setEdges((eds) => {
-      return addEdge(connection, eds);
-    });
-  }, []);
-  const onPaneReady = useCallback((reactFlowInstance: ReactFlowInstance) => setRfInstance(reactFlowInstance), []);
+  const onConnect = (params: Edge | Connection) => setEdges((els) => addEdge(params, els));
+  const onPaneReady = (reactFlowInstance: ReactFlowInstance) => setRfInstance(reactFlowInstance);

  const updatePos = () => {
    setNodes((nds) => {
-      return nds.map((n) => {
-        n.position = {
+      return nds.map((node) => {
+        node.position = {
          x: Math.random() * 400,
          y: Math.random() * 400,
        };

-        return n;
+        return node;
      });
    });
  };
@@ -134,18 +53,10 @@ const BasicFlow = () => {

  const toggleClassnames = () => {
    setNodes((nds) => {
-      return nds.map((n) => {
-        n.className = n.className === 'light' ? 'dark' : 'light';
-        return n;
-      });
-    });
-  };
+      return nds.map((node) => {
+        node.className = node.className === 'light' ? 'dark' : 'light';

-  const toggleChildNodes = () => {
-    setNodes((nds) => {
-      return nds.map((n) => {
-        n.hidden = !!n.parentNode && !n.hidden;
-        return n;
+        return node;
      });
    });
  };
@@ -154,24 +65,18 @@ const BasicFlow = () => {
    <ReactFlow
      nodes={nodes}
      edges={edges}
-      onPaneReady={onPaneReady}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
+      onPaneReady={onPaneReady}
      onNodeClick={onNodeClick}
-      onEdgeClick={onEdgeClick}
      onConnect={onConnect}
      onNodeDragStop={onNodeDragStop}
      className="react-flow-basic-example"
      defaultZoom={1.5}
      minZoom={0.2}
      maxZoom={4}
-      onlyRenderVisibleElements={false}
-      nodeTypes={nodeTypes}
-      fitViewOnInit
    >
-      <MiniMap />
-      <Controls />
-      <Background />
+      <Background variant={BackgroundVariant.Lines} />

      <div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}>
        <button onClick={resetTransform} style={{ marginRight: 5 }}>
@@ -183,9 +88,6 @@ const BasicFlow = () => {
        <button onClick={toggleClassnames} style={{ marginRight: 5 }}>
          toggle classnames
        </button>
-        <button style={{ marginRight: 5 }} onClick={toggleChildNodes}>
-          toggleChildNodes
-        </button>
        <button onClick={logToObject}>toObject</button>
      </div>
    </ReactFlow>
@@ -0,0 +1,33 @@
+import { memo, FC } from 'react';
+
+import { Handle, Position, NodeProps, Connection, Edge } from 'react-flow-renderer';
+
+const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params);
+
+const labelStyle = {
+  display: 'flex',
+  alignItems: 'center',
+};
+
+const dragHandleStyle = {
+  display: 'inline-block',
+  width: 25,
+  height: 25,
+  backgroundColor: 'teal',
+  marginLeft: 5,
+  borderRadius: '50%',
+};
+
+const ColorSelectorNode: FC<NodeProps> = () => {
+  return (
+    <>
+      <Handle type="target" position={Position.Left} onConnect={onConnect} />
+      <div style={labelStyle}>
+        Only draggable here → <span className="custom-drag-handle" style={dragHandleStyle} />
+      </div>
+      <Handle type="source" position={Position.Right} />
+    </>
+  );
+};
+
+export default memo(ColorSelectorNode);
@@ -0,0 +1,29 @@
+import ReactFlow, { Node, Edge, useNodesState, useEdgesState } from 'react-flow-renderer';
+
+import DragHandleNode from './DragHandleNode';
+
+const nodeTypes = {
+  dragHandleNode: DragHandleNode,
+};
+
+const initialNodes: Node[] = [
+  {
+    id: '2',
+    type: 'dragHandleNode',
+    dragHandle: '.custom-drag-handle',
+    style: { border: '1px solid #ddd', padding: '20px 40px' },
+    position: { x: 200, y: 200 },
+    data: null,
+  },
+];
+
+const initialEdges: Edge[] = [];
+
+const DragHandleFlow = () => {
+  const [nodes, , onNodesChange] = useNodesState(initialNodes);
+  const [edges] = useEdgesState(initialEdges);
+
+  return <ReactFlow nodes={nodes} onNodesChange={onNodesChange} edges={edges} nodeTypes={nodeTypes} />;
+};
+
+export default DragHandleFlow;
@@ -0,0 +1,59 @@
+import { MouseEvent, CSSProperties } from 'react';
+
+import ReactFlow, {
+  addEdge,
+  Controls,
+  Background,
+  Node,
+  BackgroundVariant,
+  Connection,
+  Edge,
+  useNodesState,
+  useEdgesState,
+  ReactFlowInstance,
+} from 'react-flow-renderer';
+
+const onPaneReady = (reactFlowInstance: ReactFlowInstance) => console.log('flow loaded:', reactFlowInstance);
+const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
+const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
+
+const buttonStyle: CSSProperties = { position: 'absolute', left: 10, top: 10, zIndex: 4 };
+
+const EmptyFlow = () => {
+  const [nodes, setNodes, onNodesChange] = useNodesState([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+
+  const onConnect = (params: Connection | Edge) => setEdges((els) => addEdge(params, els));
+  const addRandomNode = () => {
+    const nodeId = (nodes.length + 1).toString();
+    const newNode: Node = {
+      id: nodeId,
+      data: { label: `Node: ${nodeId}` },
+      position: { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight },
+    };
+    setNodes((nds) => nds.concat(newNode));
+  };
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onPaneReady={onPaneReady}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onNodeClick={onNodeClick}
+      onConnect={(p) => onConnect(p)}
+      onNodeDragStop={onNodeDragStop}
+      onlyRenderVisibleElements={false}
+    >
+      <Controls />
+      <Background variant={BackgroundVariant.Lines} />
+
+      <button type="button" onClick={addRandomNode} style={buttonStyle}>
+        add node
+      </button>
+    </ReactFlow>
+  );
+};
+
+export default EmptyFlow;
@@ -0,0 +1,237 @@
+import { useState, MouseEvent, WheelEvent } from 'react';
+import ReactFlow, {
+  addEdge,
+  MiniMap,
+  Controls,
+  Node,
+  Connection,
+  Edge,
+  PanOnScrollMode,
+  FlowTransform,
+  useNodesState,
+  useEdgesState,
+} from 'react-flow-renderer';
+
+const initialNodes: Node[] = [
+  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
+  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
+  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
+  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
+];
+
+const initialEdges: Edge[] = [
+  { id: 'e1-2', source: '1', target: '2', animated: true },
+  { id: 'e1-3', source: '1', target: '3' },
+];
+
+const onNodeDragStart = (_: MouseEvent, node: Node) => console.log('drag start', node);
+const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
+const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
+const onEdgeClick = (_: MouseEvent, edge: Edge) => console.log('click', edge);
+const onPaneClick = (event: MouseEvent) => console.log('onPaneClick', event);
+const onPaneScroll = (event?: WheelEvent) => console.log('onPaneScroll', event);
+const onPaneContextMenu = (event: MouseEvent) => console.log('onPaneContextMenu', event);
+const onMoveEnd = (flowTranasform?: FlowTransform) => console.log('onMoveEnd', flowTranasform);
+
+const InteractionFlow = () => {
+  const [nodes, , onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  const onConnect = (params: Connection | Edge) => setEdges((els) => addEdge(params, els));
+
+  const [isSelectable, setIsSelectable] = useState<boolean>(false);
+  const [isDraggable, setIsDraggable] = useState<boolean>(false);
+  const [isConnectable, setIsConnectable] = useState<boolean>(false);
+  const [zoomOnScroll, setZoomOnScroll] = useState<boolean>(false);
+  const [zoomOnPinch, setZoomOnPinch] = useState<boolean>(false);
+  const [panOnScroll, setPanOnScroll] = useState<boolean>(false);
+  const [panOnScrollMode, setPanOnScrollMode] = useState<PanOnScrollMode>(PanOnScrollMode.Free);
+  const [zoomOnDoubleClick, setZoomOnDoubleClick] = useState<boolean>(false);
+  const [paneMoveable, setPaneMoveable] = useState<boolean>(true);
+  const [captureZoomClick, setCaptureZoomClick] = useState<boolean>(false);
+  const [captureZoomScroll, setCaptureZoomScroll] = useState<boolean>(false);
+  const [captureElementClick, setCaptureElementClick] = useState<boolean>(false);
+
+  console.log(11, captureElementClick);
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      elementsSelectable={isSelectable}
+      nodesConnectable={isConnectable}
+      nodesDraggable={isDraggable}
+      zoomOnScroll={zoomOnScroll}
+      zoomOnPinch={zoomOnPinch}
+      panOnScroll={panOnScroll}
+      panOnScrollMode={panOnScrollMode}
+      zoomOnDoubleClick={zoomOnDoubleClick}
+      onConnect={onConnect}
+      onNodeClick={captureElementClick ? onNodeClick : undefined}
+      onEdgeClick={captureElementClick ? onEdgeClick : undefined}
+      onNodeDragStart={onNodeDragStart}
+      onNodeDragStop={onNodeDragStop}
+      paneMoveable={paneMoveable}
+      onPaneClick={captureZoomClick ? onPaneClick : undefined}
+      onPaneScroll={captureZoomScroll ? onPaneScroll : undefined}
+      onPaneContextMenu={captureZoomClick ? onPaneContextMenu : undefined}
+      onMoveEnd={onMoveEnd}
+    >
+      <MiniMap />
+      <Controls />
+
+      <div style={{ position: 'absolute', left: 10, top: 10, zIndex: 4 }}>
+        <div>
+          <label htmlFor="draggable">
+            nodesDraggable
+            <input
+              id="draggable"
+              type="checkbox"
+              checked={isDraggable}
+              onChange={(event) => setIsDraggable(event.target.checked)}
+              className="react-flow__draggable"
+            />
+          </label>
+        </div>
+        <div>
+          <label htmlFor="connectable">
+            nodesConnectable
+            <input
+              id="connectable"
+              type="checkbox"
+              checked={isConnectable}
+              onChange={(event) => setIsConnectable(event.target.checked)}
+              className="react-flow__connectable"
+            />
+          </label>
+        </div>
+        <div>
+          <label htmlFor="selectable">
+            elementsSelectable
+            <input
+              id="selectable"
+              type="checkbox"
+              checked={isSelectable}
+              onChange={(event) => setIsSelectable(event.target.checked)}
+              className="react-flow__selectable"
+            />
+          </label>
+        </div>
+        <div>
+          <label htmlFor="zoomonscroll">
+            zoomOnScroll
+            <input
+              id="zoomonscroll"
+              type="checkbox"
+              checked={zoomOnScroll}
+              onChange={(event) => setZoomOnScroll(event.target.checked)}
+              className="react-flow__zoomonscroll"
+            />
+          </label>
+        </div>
+        <div>
+          <label htmlFor="zoomonpinch">
+            zoomOnPinch
+            <input
+              id="zoomonpinch"
+              type="checkbox"
+              checked={zoomOnPinch}
+              onChange={(event) => setZoomOnPinch(event.target.checked)}
+              className="react-flow__zoomonpinch"
+            />
+          </label>
+        </div>
+        <div>
+          <label htmlFor="panonscroll">
+            panOnScroll
+            <input
+              id="panonscroll"
+              type="checkbox"
+              checked={panOnScroll}
+              onChange={(event) => setPanOnScroll(event.target.checked)}
+              className="react-flow__panonscroll"
+            />
+          </label>
+        </div>
+        <div>
+          <label htmlFor="panonscrollmode">
+            panOnScrollMode
+            <select
+              id="panonscrollmode"
+              value={panOnScrollMode}
+              onChange={(event) => setPanOnScrollMode(event.target.value as PanOnScrollMode)}
+              className="react-flow__panonscrollmode"
+            >
+              <option value="free">free</option>
+              <option value="horizontal">horizontal</option>
+              <option value="vertical">vertical</option>
+            </select>
+          </label>
+        </div>
+        <div>
+          <label htmlFor="zoomondbl">
+            zoomOnDoubleClick
+            <input
+              id="zoomondbl"
+              type="checkbox"
+              checked={zoomOnDoubleClick}
+              onChange={(event) => setZoomOnDoubleClick(event.target.checked)}
+              className="react-flow__zoomondbl"
+            />
+          </label>
+        </div>
+        <div>
+          <label htmlFor="panemoveable">
+            paneMoveable
+            <input
+              id="panemoveable"
+              type="checkbox"
+              checked={paneMoveable}
+              onChange={(event) => setPaneMoveable(event.target.checked)}
+              className="react-flow__panemoveable"
+            />
+          </label>
+        </div>
+        <div>
+          <label htmlFor="capturezoompaneclick">
+            capture onPaneClick
+            <input
+              id="capturezoompaneclick"
+              type="checkbox"
+              checked={captureZoomClick}
+              onChange={(event) => setCaptureZoomClick(event.target.checked)}
+              className="react-flow__capturezoompaneclick"
+            />
+          </label>
+        </div>
+        <div>
+          <label htmlFor="capturezoompanescroll">
+            capture onPaneScroll
+            <input
+              id="capturezoompanescroll"
+              type="checkbox"
+              checked={captureZoomScroll}
+              onChange={(event) => setCaptureZoomScroll(event.target.checked)}
+              className="react-flow__capturezoompanescroll"
+            />
+          </label>
+        </div>
+        <div>
+          <label htmlFor="captureelementclick">
+            capture onElementClick
+            <input
+              id="captureelementclick"
+              type="checkbox"
+              checked={captureElementClick}
+              onChange={(event) => setCaptureElementClick(event.target.checked)}
+              className="react-flow__captureelementclick"
+            />
+          </label>
+        </div>
+      </div>
+    </ReactFlow>
+  );
+};
+
+export default InteractionFlow;
@@ -0,0 +1,195 @@
+import { useState, MouseEvent, useCallback } from 'react';
+
+import ReactFlow, {
+  addEdge,
+  Background,
+  MiniMap,
+  Controls,
+  Node,
+  Edge,
+  ReactFlowInstance,
+  Connection,
+  MarkerType,
+  useNodesState,
+  useEdgesState,
+} from 'react-flow-renderer';
+import DebugNode from './DebugNode';
+
+const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
+const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
+const onEdgeClick = (_: MouseEvent, edge: Edge) => console.log('click', edge);
+
+const initialNodes: Node[] = [
+  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' },
+  {
+    id: '4',
+    data: { label: 'Node 4' },
+    position: { x: 100, y: 200 },
+    className: 'light',
+    style: { backgroundColor: 'rgba(255,50, 50, 0.5)', width: 500, height: 300 },
+  },
+  {
+    id: '4a',
+    data: { label: 'Node 4a' },
+    position: { x: 15, y: 15 },
+    className: 'light',
+    parentNode: '4',
+    extent: 'parent',
+  },
+  {
+    id: '4b',
+    data: { label: 'Node 4b' },
+    position: { x: 150, y: 50 },
+    className: 'light',
+    style: { backgroundColor: 'rgba(50, 50, 255, 0.5)', height: 200, width: 300 },
+    parentNode: '4',
+  },
+  {
+    id: '4b1',
+    data: { label: 'Node 4b1' },
+    position: { x: 20, y: 20 },
+    className: 'light',
+    parentNode: '4b',
+  },
+  {
+    id: '4b2',
+    data: { label: 'Node 4b2' },
+    position: { x: 100, y: 100 },
+    className: 'light',
+    parentNode: '4b',
+  },
+  {
+    id: '5',
+    data: { label: 'Node 5' },
+    position: { x: 650, y: 250 },
+    className: 'light',
+    style: { backgroundColor: 'rgba(20 ,200, 255, 1.5)', width: 400, height: 150 },
+    zIndex: 1000,
+  },
+  {
+    id: '5a',
+    data: { label: 'Node 5a' },
+    position: { x: 25, y: 50 },
+    className: 'light',
+    parentNode: '5',
+  },
+  {
+    id: '5b',
+    data: { label: 'Node 5b' },
+    position: { x: 225, y: 50 },
+    className: 'light',
+    parentNode: '5',
+  },
+  { 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' },
+];
+
+const initialEdges: Edge[] = [
+  {
+    id: 'e1-2',
+    source: '1',
+    target: '2',
+    markerEnd: { type: MarkerType.Arrow, strokeWidth: 2, width: 15, height: 15, color: '#f00' },
+  },
+  { id: 'e1-3', source: '1', target: '3' },
+  { id: 'e3-4', source: '3', target: '4', zIndex: 100 },
+  { id: 'e3-4b', source: '3', target: '4b' },
+  { id: 'e4a-4b1', source: '4a', target: '4b1' },
+  { id: 'e4a-4b2', source: '4a', target: '4b2', zIndex: 100 },
+  { id: 'e4b1-4b2', source: '4b1', target: '4b2' },
+  { id: '3-5', source: '3', target: '5' },
+];
+
+const nodeTypes = {
+  default: DebugNode,
+};
+
+const BasicFlow = () => {
+  const [rfInstance, setRfInstance] = useState<ReactFlowInstance | null>(null);
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+
+  const onConnect = useCallback((connection: Connection) => {
+    setEdges((eds) => {
+      return addEdge(connection, eds);
+    });
+  }, []);
+  const onPaneReady = useCallback((reactFlowInstance: ReactFlowInstance) => 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;
+      });
+    });
+  };
+
+  const toggleChildNodes = () => {
+    setNodes((nds) => {
+      return nds.map((n) => {
+        n.hidden = !!n.parentNode && !n.hidden;
+        return n;
+      });
+    });
+  };
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onPaneReady={onPaneReady}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onNodeClick={onNodeClick}
+      onEdgeClick={onEdgeClick}
+      onConnect={onConnect}
+      onNodeDragStop={onNodeDragStop}
+      className="react-flow-basic-example"
+      defaultZoom={1.5}
+      minZoom={0.2}
+      maxZoom={4}
+      onlyRenderVisibleElements={false}
+      nodeTypes={nodeTypes}
+      fitViewOnInit
+    >
+      <MiniMap />
+      <Controls />
+      <Background />
+
+      <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 style={{ marginRight: 5 }} onClick={toggleChildNodes}>
+          toggleChildNodes
+        </button>
+        <button onClick={logToObject}>toObject</button>
+      </div>
+    </ReactFlow>
+  );
+};
+
+export default BasicFlow;
@@ -13,6 +13,10 @@ import NestedNodes from './NestedNodes';
 import Hidden from './Hidden';
 import UpdatableEdge from './UpdatableEdge';
 import TouchDevice from './TouchDevice';
+import Subflow from './Subflow';
+import Interaction from './Interaction';
+import Empty from './Empty';
+import DragHandle from './DragHandle';

 import './index.css';

@@ -61,6 +65,22 @@ const routes = [
    path: '/touch-device',
    component: TouchDevice,
  },
+  {
+    path: '/subflow',
+    component: Subflow,
+  },
+  {
+    path: '/interaction',
+    component: Interaction,
+  },
+  {
+    path: '/empty',
+    component: Empty,
+  },
+  {
+    path: '/draghandle',
+    component: DragHandle,
+  },
 ];

 const Header = withRouter(({ history, location }) => {