From 0d28e8fb0cc480c484f0b85bda3a2bd3598cb568 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 11 May 2020 22:21:37 +0200
Subject: [PATCH] feat(examples): add horizontal flow

---
 README.md                       |  2 ++
 example/src/Basic/index.js      |  6 +++---
 example/src/Horizontal/index.js | 35 +++++++++++++++++++++++++++++++++
 example/src/index.js            |  5 +++++
 4 files changed, 45 insertions(+), 3 deletions(-)
 create mode 100644 example/src/Horizontal/index.js

diff --git a/README.md b/README.md
index cf3a2550..c2683522 100644
--- a/README.md
+++ b/README.md
@@ -199,6 +199,7 @@ edgeTypes={{
 
 You can now use type `special` for an edge.
 The `straight`, `default` and `step` types will be still available except you overwrite one of them.
+There is an implementation of a custom edge in the [edges example](/example/src/Edges/index.js).
 
 ## Helper Functions
 
@@ -283,6 +284,7 @@ You can find all examples in the [example](example) folder or check out the live
 - [rich](https://react-flow.netlify.app/)
 - [basic](https://react-flow.netlify.app/basic)
 - [custom node](https://react-flow.netlify.app/custom-node)
+- [horizontal](https://react-flow.netlify.app/horizontal)
 - [stress](https://react-flow.netlify.app/stress)
 - [edges](https://react-flow.netlify.app/edges)
 - [empty](https://react-flow.netlify.app/empty)
diff --git a/example/src/Basic/index.js b/example/src/Basic/index.js
index ca736bed..f1210672 100644
--- a/example/src/Basic/index.js
+++ b/example/src/Basic/index.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import ReactFlow, { removeElements, addEdge } from 'react-flow-renderer';
+import Graph, { removeElements, addEdge } from 'react-flow-renderer';
 
 const onNodeDragStop = node => console.log('drag stop', node);
 const onLoad = graphInstance => console.log('graph loaded:', graphInstance);
@@ -11,7 +11,7 @@ const initialElements = [
   { 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 } },
-  { id: 'e1-2', source: '1', target: '2', animated: true, label: 'edge text' },
+  { id: 'e1-2', source: '1', target: '2', animated: true },
   { id: 'e1-3', source: '1', target: '3' },
 ];
 
@@ -22,7 +22,7 @@ const BasicGraph = () => {
   const onConnect = (params) => setElements(els => addEdge(params, els));
 
   return (
-    <ReactFlow
+    <Graph
       elements={elements}
       onLoad={onLoad}
       onElementClick={onElementClick}
diff --git a/example/src/Horizontal/index.js b/example/src/Horizontal/index.js
new file mode 100644
index 00000000..622167d4
--- /dev/null
+++ b/example/src/Horizontal/index.js
@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+
+import ReactFlow, { removeElements, addEdge } from 'react-flow-renderer';
+
+const onLoad = (graph) => {
+  graph.fitView();
+};
+
+const initialElements = [
+  { id: '1', sourcePosition: 'right', type: 'input', data: { label: 'Input' }, position: { x: 0, y: 80 } },
+  { id: '2', sourcePosition: 'right', targetPosition: 'left', data: { label: 'A Node' }, position: { x: 250, y: 0 } },
+  { id: '3', sourcePosition: 'right', targetPosition: 'left', data: { label: 'Another node' }, position: { x: 250, y: 160 } },
+  { id: '4', sourcePosition: 'right', targetPosition: 'left', data: { label: 'Node 4' }, position: { x: 500, y: 80 } },
+  { id: 'e1-2', source: '1', target: '2', animated: true,  },
+  { id: 'e1-3', source: '1', target: '3', animated: true, },
+  { id: 'e1-4', source: '2', target: '4', label: 'edge label' }
+];
+
+const HorizontalFlow = () => {
+  const [elements, setElements] = useState(initialElements);
+  const onElementsRemove = (elementsToRemove) =>
+    setElements(els => removeElements(elementsToRemove, els));
+  const onConnect = (params) => setElements(els => addEdge(params, els));
+
+  return (
+    <ReactFlow
+      elements={elements}
+      onElementsRemove={onElementsRemove}
+      onConnect={onConnect}
+      onLoad={onLoad}
+    />
+  );
+}
+
+export default HorizontalFlow;
diff --git a/example/src/index.js b/example/src/index.js
index 76b5ed84..0ca8f17a 100644
--- a/example/src/index.js
+++ b/example/src/index.js
@@ -9,6 +9,7 @@ import Stress from './Stress';
 import Inactive from './Inactive';
 import Empty from './Empty';
 import Edges from './Edges';
+import Horizontal from './Horizontal';
 
 import './index.css';
 
@@ -28,6 +29,10 @@ const routes = [{
   path: '/custom-node',
   component: CustomNode,
   label: 'CustomNode'
+}, {
+  path: '/horizontal',
+  component: Horizontal,
+  label: 'Horizontal'
 }, {
   path: '/stress',
   component: Stress,