From 0b7354610ecdfb514be2d304c95621426ed27017 Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 14 May 2020 10:57:08 +0200 Subject: [PATCH] refactor(examples): rename graph to flow --- example/src/Basic/index.js | 35 +++++++++++++++++++++---- example/src/CustomNode/index.js | 8 +++--- example/src/Edges/index.js | 4 +-- example/src/Empty/index.js | 4 +-- example/src/Inactive/index.js | 4 +-- example/src/{Rich => Overview}/index.js | 4 +-- example/src/index.js | 4 +-- 7 files changed, 42 insertions(+), 21 deletions(-) rename example/src/{Rich => Overview}/index.js (98%) diff --git a/example/src/Basic/index.js b/example/src/Basic/index.js index f1210672..100651cb 100644 --- a/example/src/Basic/index.js +++ b/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 ( - { onNodeDragStop={onNodeDragStop} style={{ width: '100%', height: '100%' }} backgroundType="lines" - /> + > + + ); } -export default BasicGraph; +export default BasicFlow; diff --git a/example/src/CustomNode/index.js b/example/src/CustomNode/index.js index 655219ca..3b765738 100644 --- a/example/src/CustomNode/index.js +++ b/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) => { - console.log('graph loaded:', graph); -}; +const onLoad = (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; \ No newline at end of file +export default CustomNodeFlow; \ No newline at end of file diff --git a/example/src/Edges/index.js b/example/src/Edges/index.js index 16333481..ddc6e4ed 100644 --- a/example/src/Edges/index.js +++ b/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) => { - graph.fitView(); -}; +const onLoad = (graph) => graph.fitView(); const initialElements = [ { id: '1', type: 'input', data: { label: 'Input 1' }, position: { x: 250, y: 0 } }, diff --git a/example/src/Empty/index.js b/example/src/Empty/index.js index 710b47a2..760a0ca5 100644 --- a/example/src/Empty/index.js +++ b/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; diff --git a/example/src/Inactive/index.js b/example/src/Inactive/index.js index 007f9527..3f6490b6 100644 --- a/example/src/Inactive/index.js +++ b/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; diff --git a/example/src/Rich/index.js b/example/src/Overview/index.js similarity index 98% rename from example/src/Rich/index.js rename to example/src/Overview/index.js index ab545a51..097bd54c 100644 --- a/example/src/Rich/index.js +++ b/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; \ No newline at end of file +export default OverviewFlow; \ No newline at end of file diff --git a/example/src/index.js b/example/src/index.js index 73efafea..7f83d66f 100644 --- a/example/src/index.js +++ b/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',