refactor(examples): rename graph to flow

example/src/Basic/index.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import Graph, { removeElements, addEdge } from 'react-flow-renderer';
+import ReactFlow, { removeElements, addEdge, isNode } from 'react-flow-renderer';
 
 const onNodeDragStop = node => console.log('drag stop', node);
 const onLoad = graphInstance => console.log('graph loaded:', graphInstance);
@@ -15,14 +15,32 @@ const initialElements = [
   { id: 'e1-3', source: '1', target: '3' },
 ];
 
-const BasicGraph = () => {
+const BasicFlow = () => {
   const [elements, setElements] = useState(initialElements);
   const onElementsRemove = (elementsToRemove) =>
     setElements(els => removeElements(elementsToRemove, els));
   const onConnect = (params) => setElements(els => addEdge(params, els));
 
+  const updatePos = () => {
+    setElements(elms => {
+      return elms.map(el => {
+        if (isNode(el)) {
+          return {
+            ...el,
+            position: {
+              x: Math.random() * 400,
+              y: Math.random() * 400
+            }
+          }
+        }
+
+        return el;
+      })
+    })
+  }
+
   return (
-    <Graph
+    <ReactFlow
       elements={elements}
       onLoad={onLoad}
       onElementClick={onElementClick}
@@ -31,8 +49,15 @@ const BasicGraph = () => {
       onNodeDragStop={onNodeDragStop}
       style={{ width: '100%', height: '100%' }}
       backgroundType="lines"
-    />
+    >
+      <button
+        onClick={updatePos}
+        style={{ position: 'absolute', right: 10, top: 30, zIndex: 4 }}
+      >
+        change pos
+      </button>
+    </ReactFlow>
   );
 }
 
-export default BasicGraph;
+export default BasicFlow;

example/src/CustomNode/index.js

@@ -6,13 +6,11 @@ import ColorSelectorNode from './ColorSelectorNode';
 
 const onNodeDragStop = node => console.log('drag stop', node);
 const onElementClick = element => console.log('click', element);
-const onLoad = (graph) => {
+const onLoad = (graph) => console.log('graph loaded:', graph);
-  console.log('graph loaded:', graph);
-};
 
 const initBgColor = '#f0e742';
 
-const CustomNodeGraph = () => {
+const CustomNodeFlow = () => {
   const [elements, setElements] = useState([]);
   const [bgColor, setBgColor] = useState(initBgColor);
 
@@ -83,4 +81,4 @@ const CustomNodeGraph = () => {
   );
 }
 
-export default CustomNodeGraph;
+export default CustomNodeFlow;

example/src/Edges/index.js

@@ -6,9 +6,7 @@ import CustomEdge from './CustomEdge';
 
 const onNodeDragStop = node => console.log('drag stop', node);
 const onElementClick = element => console.log('click', element);
-const onLoad = (graph) => {
+const onLoad = (graph) => graph.fitView();
-  graph.fitView();
-};
 
 const initialElements = [
   { id: '1', type: 'input', data: { label: 'Input 1' }, position: { x: 250, y: 0 } },

example/src/Empty/index.js

@@ -6,7 +6,7 @@ const onNodeDragStop = node => console.log('drag stop', node);
 const onLoad = graphInstance => console.log('graph loaded:', graphInstance);
 const onElementClick = element => console.log('click', element);
 
-const EmptyGraph = () => {
+const EmptyFlow = () => {
   const [elements, setElements] = useState([]);
   const onElementsRemove = (elementsToRemove) =>
     setElements(els => removeElements(elementsToRemove, els));
@@ -45,4 +45,4 @@ const EmptyGraph = () => {
   );
 }
 
-export default EmptyGraph;
+export default EmptyFlow;

example/src/Inactive/index.js

@@ -11,7 +11,7 @@ const initialElements = [
   { id: 'e1-3', source: '1', target: '3' },
 ];
 
-const EmptyGraph = () => {
+const InactiveFlow = () => {
   const [isInteractive, setIsInteractive] = useState(false);
   const onToggleInteractive = (evt) => {
     setIsInteractive(evt.target.checked);
@@ -43,4 +43,4 @@ const EmptyGraph = () => {
   );
 }
 
-export default EmptyGraph;
+export default InactiveFlow;

example/src/Overview/index.js

@@ -31,7 +31,7 @@ const initialElements = [
   { id: 'e5-7', source: '5', target: '7', type: 'step', label: 'a step edge', labelStyle: { fill: 'red', fontWeight: 700 } },
 ];
 
-const RichGraph = () => {
+const OverviewFlow = () => {
   const [elements, setElements] = useState(initialElements);
 
   const addRandomNode = () => {
@@ -82,4 +82,4 @@ const RichGraph = () => {
   );
 }
 
-export default RichGraph;
+export default OverviewFlow;

example/src/index.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter as Router, Route, Switch, NavLink, withRouter } from 'react-router-dom';
 
-import Rich from './Rich';
+import Overview from './Overview';
 import Basic from './Basic';
 import CustomNode from './CustomNode';
 import Stress from './Stress';
@@ -15,7 +15,7 @@ import './index.css';
 
 const routes = [{
   path: '/',
-  component: Rich,
+  component: Overview,
   label: 'Overview'
 }, {
   path: '/basic',