chore(examples): add layouting

example/src/DragNDrop/dnd.css

@@ -40,10 +40,6 @@
   height: 100%;
 }
 
-.dndflow .selectall {
-  margin-top: 10px;
-}
-
 @media screen and (min-width: 768px) {
   .dndflow {
     flex-direction: row;

example/src/Layouting/index.js

@@ -0,0 +1,68 @@
+import React, { useEffect, useState } from 'react';
+import ReactFlow, { ReactFlowProvider, addEdge, removeElements, Controls, isNode } from 'react-flow-renderer';
+import dagre from 'dagre';
+
+import initialElements from './initial-elements';
+
+import './layouting.css';
+
+const dagreGraph = new dagre.graphlib.Graph();
+dagreGraph.setDefaultEdgeLabel(() => ({}));
+
+const LayoutFlow = () => {
+  const [elements, setElements] = useState(initialElements);
+  const onConnect = (params) => setElements((els) => addEdge(params, els));
+  const onElementsRemove = (elementsToRemove) => setElements((els) => removeElements(elementsToRemove, els));
+
+  const onLayout = (direction) => {
+    const isHorizontal = direction === 'LR';
+    dagreGraph.setGraph({ rankdir: direction });
+
+    elements.forEach((el) => {
+      if (isNode(el)) {
+        dagreGraph.setNode(el.id, { width: 150, height: 50 });
+      } else {
+        dagreGraph.setEdge(el.source, el.target);
+      }
+    });
+
+    dagre.layout(dagreGraph);
+
+    const layoutedElements = elements.map((el) => {
+      if (isNode(el)) {
+        const nodeWithPosition = dagreGraph.node(el.id);
+        el.targetPosition = isHorizontal ? 'left' : 'top';
+        el.sourcePosition = isHorizontal ? 'right' : 'bottom';
+        // we need to pass a slighltiy different position in order to notify react flow about the change
+        // @TODO how can we change the position handling so that we dont need this hack?
+        el.position = { x: nodeWithPosition.x + Math.random() / 1000, y: nodeWithPosition.y };
+      }
+
+      return el;
+    });
+
+    setElements(layoutedElements);
+  };
+
+  useEffect(() => {
+    onLayout('TB');
+  }, []);
+
+  return (
+    <div className="layoutflow">
+      <ReactFlowProvider>
+        <ReactFlow elements={elements} onConnect={onConnect} onElementsRemove={onElementsRemove}>
+          <Controls />
+        </ReactFlow>
+        <div className="controls">
+          <button onClick={() => onLayout('TB')} style={{ marginRight: 10 }}>
+            vertical layout
+          </button>
+          <button onClick={() => onLayout('LR')}>horizontal layout</button>
+        </div>
+      </ReactFlowProvider>
+    </div>
+  );
+};
+
+export default LayoutFlow;

example/src/Layouting/initial-elements.js

@@ -0,0 +1,67 @@
+const position = { x: 0, y: 0 };
+
+export default [
+  {
+    id: '1',
+    type: 'input',
+    data: { label: 'input' },
+    position,
+  },
+  {
+    id: '2',
+    data: { label: 'node 2' },
+    position,
+  },
+  {
+    id: '2a',
+    data: { label: 'node 2a' },
+    position,
+  },
+  {
+    id: '2b',
+    data: { label: 'node 2b' },
+    position,
+  },
+  {
+    id: '2c',
+    data: { label: 'node 2c' },
+    position,
+  },
+  {
+    id: '2d',
+    data: { label: 'node 2d' },
+    position,
+  },
+  {
+    id: '3',
+    data: { label: 'node 3' },
+    position,
+  },
+  {
+    id: '4',
+    data: { label: 'node 4' },
+    position,
+  },
+  {
+    id: '5',
+    data: { label: 'node 5' },
+    position,
+  },
+  {
+    id: '6',
+    type: 'output',
+    data: { label: 'output' },
+    position,
+  },
+  { id: '7', type: 'output', data: { label: 'output' }, position: { x: 400, y: 450 } },
+  { id: 'e12', source: '1', target: '2', type: 'smoothstep' },
+  { id: 'e13', source: '1', target: '3', type: 'smoothstep' },
+  { id: 'e22a', source: '2', target: '2a', type: 'smoothstep' },
+  { id: 'e22b', source: '2', target: '2b', type: 'smoothstep' },
+  { id: 'e22c', source: '2', target: '2c', type: 'smoothstep' },
+  { id: 'e2c2d', source: '2c', target: '2d', type: 'smoothstep' },
+
+  { id: 'e45', source: '4', target: '5', type: 'smoothstep' },
+  { id: 'e56', source: '5', target: '6', type: 'smoothstep' },
+  { id: 'e57', source: '5', target: '7', type: 'smoothstep' },
+];

example/src/Layouting/layouting.css

@@ -0,0 +1,11 @@
+.layoutflow {
+  flex-grow: 1;
+  position: relative;
+}
+
+.layoutflow .controls {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  z-index: 10;
+}

example/src/index.js

@@ -19,6 +19,7 @@ import UpdatableEdge from './UpdatableEdge';
 import UpdateNode from './UpdateNode';
 import SaveRestore from './SaveRestore';
 import DragNDrop from './DragNDrop';
+import Layout from './Layouting';
 
 import './index.css';
 
@@ -91,6 +92,10 @@ const routes = [
     path: '/drag-and-drop',
     component: DragNDrop,
   },
+  {
+    path: '/layouting',
+    component: Layout,
+  },
 ];
 
 const Header = withRouter(({ history, location }) => {