diff --git a/frontend/src/components/ProofingTab/GraphDiagram/GraphDiagram.tsx b/frontend/src/components/ProofingTab/GraphDiagram/GraphDiagram.tsx index 93566124..cac2ff4b 100644 --- a/frontend/src/components/ProofingTab/GraphDiagram/GraphDiagram.tsx +++ b/frontend/src/components/ProofingTab/GraphDiagram/GraphDiagram.tsx @@ -1,10 +1,9 @@ -import React, {useEffect, useRef, useState} from "react"; +import React, {useEffect, useLayoutEffect, useRef, useState} from "react"; import InfoMenu from "./InfoMenu"; import NavigationMenu from "./NavigationMenu"; import createEngine, { - BasePositionModelOptions, - DiagramModel, -} from '@projectstorm/react-diagrams'; + BasePositionModelOptions, DagreEngine, + DiagramModel, PathFindingLinkFactory, DiagramEngine } from '@projectstorm/react-diagrams'; import {CanvasWidget} from '@projectstorm/react-canvas-core'; import {CustomNodeFactory} from "./Factories/CustomNodeFactory"; import { @@ -39,6 +38,34 @@ interface GraphDiagramProps { } +function genDagreEngine() { + return new DagreEngine({ + graph: { + rankdir: 'TB', + ranksep: 300, + nodesep: 250, + marginx: 50, + marginy: 50 + }, + }); +} +function reroute(engine: DiagramEngine) { + engine.getLinkFactories().getFactory(PathFindingLinkFactory.NAME).calculateRoutingMatrix(); +} +function autoDistribute(engine: DiagramEngine) { + const model = engine.getModel(); + + if (!model || model.getNodes().length === 0) { + return; + } + + const dagreEngine = genDagreEngine(); + dagreEngine.redistribute(model); + + reroute(engine); + engine.repaintCanvas(); +} + const GraphDiagram: React.FC = ({ origins, vias, @@ -105,8 +132,20 @@ const GraphDiagram: React.FC = ({ setModelFitted(true); } }, [modelUpdated, modelFitted, engine]); - - return ( + + useLayoutEffect(() => { + autoDistribute(engine); + }, [engine, modelUpdated]); + + useEffect(() => { + const currentContainer = containerRef.current; + + if (modelUpdated && currentContainer) { + autoDistribute(engine); + } + }, [engine, modelUpdated, destinations, vias, origins]); + + return ( modelUpdated ? (