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;