From 65991de037611783d1387895e2981fab668ab386 Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 2 Nov 2021 12:52:24 +0100 Subject: [PATCH] chore(examples): add layouting with new api --- example/src/CustomNode/index.tsx | 5 +- example/src/Layouting/index.tsx | 99 +++++++++++++++++++ .../Layouting/initial-elements.ts | 11 ++- .../Layouting/layouting.css | 0 example/src/index.tsx | 7 +- example/src_oldapi/Layouting/index.tsx | 86 ---------------- package-lock.json | 4 +- package.json | 2 +- 8 files changed, 120 insertions(+), 94 deletions(-) create mode 100644 example/src/Layouting/index.tsx rename example/{src_oldapi => src}/Layouting/initial-elements.ts (88%) rename example/{src_oldapi => src}/Layouting/layouting.css (100%) delete mode 100644 example/src_oldapi/Layouting/index.tsx diff --git a/example/src/CustomNode/index.tsx b/example/src/CustomNode/index.tsx index 5c786f58..9f444c27 100644 --- a/example/src/CustomNode/index.tsx +++ b/example/src/CustomNode/index.tsx @@ -19,7 +19,10 @@ import ReactFlow, { import ColorSelectorNode from './ColorSelectorNode'; -const onLoad = (reactFlowInstance: OnLoadParams) => console.log('flow loaded:', reactFlowInstance); +const onLoad = (reactFlowInstance: OnLoadParams) => { + console.log('flow loaded:', reactFlowInstance); + reactFlowInstance.fitView(); +}; const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node); const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node); diff --git a/example/src/Layouting/index.tsx b/example/src/Layouting/index.tsx new file mode 100644 index 00000000..cbae1310 --- /dev/null +++ b/example/src/Layouting/index.tsx @@ -0,0 +1,99 @@ +import { useState, useCallback } from 'react'; +import ReactFlow, { + ReactFlowProvider, + addEdge, + applyNodeChanges, + applyEdgeChanges, + Controls, + NodeChange, + EdgeChange, + Node, + Connection, + Edge, + NodeExtent, + Position, +} from 'react-flow-renderer'; +import dagre from 'dagre'; + +import initialNodesAndEdges from './initial-elements'; + +import './layouting.css'; + +const dagreGraph = new dagre.graphlib.Graph(); +dagreGraph.setDefaultEdgeLabel(() => ({})); + +const nodeExtent: NodeExtent = [ + [0, 0], + [1000, 1000], +]; + +const LayoutFlow = () => { + const [nodes, setNodes] = useState(initialNodesAndEdges.nodes); + const [edges, setEdges] = useState(initialNodesAndEdges.edges); + + const onConnect = useCallback((params: Edge | Connection) => { + setEdges((eds) => { + return addEdge(params, eds); + }); + }, []); + + const onLayout = (direction: string) => { + const isHorizontal = direction === 'LR'; + dagreGraph.setGraph({ rankdir: direction }); + + nodes.forEach((node) => { + dagreGraph.setNode(node.id, { width: 150, height: 50 }); + }); + + edges.forEach((edge) => { + dagreGraph.setEdge(edge.source, edge.target); + }); + + dagre.layout(dagreGraph); + + const layoutedNodes = nodes.map((node) => { + const nodeWithPosition = dagreGraph.node(node.id); + node.targetPosition = isHorizontal ? Position.Left : Position.Top; + node.sourcePosition = isHorizontal ? Position.Right : Position.Bottom; + // we need to pass a slightly different position in order to notify react flow about the change + // @TODO how can we change the position handling so that we dont need this hack? + node.position = { x: nodeWithPosition.x + Math.random() / 1000, y: nodeWithPosition.y }; + + return node; + }); + + setNodes(layoutedNodes); + }; + + const onNodesChange = useCallback((changes: NodeChange[]) => setNodes((ns) => applyNodeChanges(changes, ns)), []); + + const onEdgesChange = useCallback((changes: EdgeChange[]) => { + setEdges((es) => applyEdgeChanges(changes, es)); + }, []); + + return ( +
+ + onLayout('TB')} + onNodesChange={onNodesChange} + onEdgesChange={onEdgesChange} + > + + +
+ + +
+ +
+ ); +}; + +export default LayoutFlow; diff --git a/example/src_oldapi/Layouting/initial-elements.ts b/example/src/Layouting/initial-elements.ts similarity index 88% rename from example/src_oldapi/Layouting/initial-elements.ts rename to example/src/Layouting/initial-elements.ts index 404b1b8b..ce763320 100644 --- a/example/src_oldapi/Layouting/initial-elements.ts +++ b/example/src/Layouting/initial-elements.ts @@ -1,8 +1,8 @@ -import { Elements, XYPosition } from 'react-flow-renderer'; +import { Node, Edge, XYPosition } from 'react-flow-renderer'; const position: XYPosition = { x: 0, y: 0 }; -const elements: Elements = [ +const nodes: Node[] = [ { id: '1', type: 'input', @@ -56,6 +56,9 @@ const elements: Elements = [ position, }, { id: '7', type: 'output', data: { label: 'output' }, position: { x: 400, y: 450 } }, +]; + +const edges: Edge[] = [ { id: 'e12', source: '1', target: '2', type: 'smoothstep' }, { id: 'e13', source: '1', target: '3', type: 'smoothstep' }, { id: 'e22a', source: '2', target: '2a', type: 'smoothstep' }, @@ -68,4 +71,6 @@ const elements: Elements = [ { id: 'e57', source: '5', target: '7', type: 'smoothstep' }, ]; -export default elements; +const nodesAndEdges = { nodes, edges }; + +export default nodesAndEdges; diff --git a/example/src_oldapi/Layouting/layouting.css b/example/src/Layouting/layouting.css similarity index 100% rename from example/src_oldapi/Layouting/layouting.css rename to example/src/Layouting/layouting.css diff --git a/example/src/index.tsx b/example/src/index.tsx index 60faf4c0..1f44867f 100644 --- a/example/src/index.tsx +++ b/example/src/index.tsx @@ -1,4 +1,4 @@ -import React, { ChangeEvent } from 'react'; +import { ChangeEvent } from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter as Router, Route, Switch, withRouter } from 'react-router-dom'; @@ -7,6 +7,7 @@ import UpdateNode from './UpdateNode'; import Stress from './Stress'; import CustomNode from './CustomNode'; import FloatingEdges from './FloatingEdges'; +import Layouting from './Layouting'; import './index.css'; @@ -31,6 +32,10 @@ const routes = [ path: '/floating-edges', component: FloatingEdges, }, + { + path: '/layouting', + component: Layouting, + }, ]; const Header = withRouter(({ history, location }) => { diff --git a/example/src_oldapi/Layouting/index.tsx b/example/src_oldapi/Layouting/index.tsx deleted file mode 100644 index 34ee23e6..00000000 --- a/example/src_oldapi/Layouting/index.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import React, { useState } from 'react'; -import ReactFlow, { - ReactFlowProvider, - addEdge, - removeElements, - Controls, - isNode, - Elements, - Connection, - Edge, - NodeExtent, - Position, -} from 'react-flow-renderer'; -import dagre from 'dagre'; - -import initialElements from './initial-elements'; - -import './layouting.css'; - -const dagreGraph = new dagre.graphlib.Graph(); -dagreGraph.setDefaultEdgeLabel(() => ({})); - -const nodeExtent: NodeExtent = [ - [0, 0], - [1000, 1000], -]; - -const LayoutFlow = () => { - const [elements, setElements] = useState(initialElements); - const onConnect = (params: Connection | Edge) => setElements((els) => addEdge(params, els)); - const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els)); - - const onLayout = (direction: string) => { - const isHorizontal = direction === 'LR'; - dagreGraph.setGraph({ rankdir: direction }); - - elements.forEach((el) => { - if (isNode(el)) { - dagreGraph.setNode(el.id, { width: 150, height: 50 }); - } else { - dagreGraph.setEdge(el.source, el.target); - } - }); - - dagre.layout(dagreGraph); - - const layoutedElements = elements.map((el) => { - if (isNode(el)) { - const nodeWithPosition = dagreGraph.node(el.id); - el.targetPosition = isHorizontal ? Position.Left : Position.Top; - el.sourcePosition = isHorizontal ? Position.Right : Position.Bottom; - // we need to pass a slightly different position in order to notify react flow about the change - // @TODO how can we change the position handling so that we dont need this hack? - el.position = { x: nodeWithPosition.x + Math.random() / 1000, y: nodeWithPosition.y }; - } - - return el; - }); - - setElements(layoutedElements); - }; - - return ( -
- - onLayout('TB')} - > - - -
- - -
- -
- ); -}; - -export default LayoutFlow; diff --git a/package-lock.json b/package-lock.json index 491e545e..121210a3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "react-flow-renderer", - "version": "10.0.0-next.6", + "version": "10.0.0-next.7", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "react-flow-renderer", - "version": "10.0.0-next.6", + "version": "10.0.0-next.7", "license": "MIT", "dependencies": { "@babel/runtime": "^7.15.4", diff --git a/package.json b/package.json index 14344f3c..1cd02bc5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-flow-renderer", - "version": "10.0.0-next.6", + "version": "10.0.0-next.7", "engines": { "node": ">=12" },