From 267187b8d1fc292a5a33fdde83dae85ceaed29b8 Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 14 May 2020 10:56:50 +0200 Subject: [PATCH 1/2] feat(elementUpdater): apply position and style changes #220 --- src/hooks/useElementUpdater.ts | 44 ++++++++++++++++++++++------------ 1 file changed, 29 insertions(+), 15 deletions(-) diff --git a/src/hooks/useElementUpdater.ts b/src/hooks/useElementUpdater.ts index cdd4e9b0..6d141151 100644 --- a/src/hooks/useElementUpdater.ts +++ b/src/hooks/useElementUpdater.ts @@ -6,7 +6,7 @@ import { parseElement, isNode, isEdge } from '../utils/graph'; import { Elements, Node, Edge } from '../types'; const useElementUpdater = (elements: Elements): void => { - const state = useStoreState(s => ({ + const state = useStoreState((s) => ({ nodes: s.nodes, edges: s.edges, transform: s.transform, @@ -14,37 +14,51 @@ const useElementUpdater = (elements: Elements): void => { snapGrid: s.snapGrid, })); - const setNodes = useStoreActions(a => a.setNodes); - const setEdges = useStoreActions(a => a.setEdges); + const setNodes = useStoreActions((a) => a.setNodes); + const setEdges = useStoreActions((a) => a.setEdges); useEffect(() => { const nodes = elements.filter(isNode) as Node[]; const edges = elements .filter(isEdge) - .map(e => - parseElement(e, state.transform, state.snapToGrid, state.snapGrid) - ) as Edge[]; + .map((e) => parseElement(e, state.transform, state.snapToGrid, state.snapGrid)) as Edge[]; - const nextNodes = nodes.map(propNode => { - const existingNode = state.nodes.find(n => n.id === propNode.id); + const nextNodes = nodes.map((propNode) => { + const existingNode = state.nodes.find((n) => n.id === propNode.id); if (existingNode) { const data = !isEqual(existingNode.data, propNode.data) ? { ...existingNode.data, ...propNode.data } : existingNode.data; + const style = !isEqual(existingNode.style, propNode.style) + ? { ...existingNode.style, ...propNode.style } + : existingNode.style; + + const positionChanged = + existingNode.position.x !== propNode.position.x || existingNode.position.y !== propNode.position.y; + + if (positionChanged) { + return { + ...existingNode, + __rg: { + ...existingNode.__rg, + position: propNode.position, + }, + position: propNode.position, + data, + style, + }; + } + return { ...existingNode, data, + style, }; } - return parseElement( - propNode, - state.transform, - state.snapToGrid, - state.snapGrid - ); + return parseElement(propNode, state.transform, state.snapToGrid, state.snapGrid); }) as Node[]; const nodesChanged: boolean = !isEqual(state.nodes, nextNodes); @@ -57,7 +71,7 @@ const useElementUpdater = (elements: Elements): void => { if (edgesChanged) { setEdges(edges); } - }); + }, [elements, state.nodes, state.edges]); }; export default useElementUpdater; From 0b7354610ecdfb514be2d304c95621426ed27017 Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 14 May 2020 10:57:08 +0200 Subject: [PATCH 2/2] 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',