Export Layout & handle service like a service (#70)

Matthbo · web-flow · commit 36d5a7770863 · 2026-06-10T11:01:29.000+02:00
diff --git a/projects/frank-config-layout/src/lib/dimensions.ts b/projects/frank-config-layout/src/lib/dimensions.ts
@@ -1,9 +1,25 @@
-import { Dimensions } from '../public_api';
 import { EdgeLabelDimensions } from './graphics/edge-label-layouter';
 import { NodeAndEdgeDimensions } from './graphics/layout';
 import { SvgGenerationDimensions } from './graphics/svg-generator';
 import { calculateAverageFontCharacterWidth, NodeTextDimensions } from './model/text';
 
+export interface Dimensions {
+  nodeTextFontSize: number; // 16
+  nodeTextBorder: number;
+  horizontalNodeBorder: number;
+  intermediateWidth: number;
+  layerHeight: number;
+  layerDistance: number;
+  nodeBoxHeight: number;
+  boxConnectorAreaPerc: number;
+  intermediateLayerPassedByVerticalLine: boolean;
+  boxCrossProtectionMargin: number;
+  lineTransgressionPerc: number;
+  edgeLabelFontSize: number;
+  preferredVertDistanceFromOrigin: number;
+  strictlyKeepLabelOutOfBox: boolean;
+}
+
 export interface DerivedDimensions
   extends EdgeLabelDimensions, NodeAndEdgeDimensions, SvgGenerationDimensions, NodeTextDimensions {}
 
diff --git a/projects/frank-config-layout/src/lib/flow-layout.spec.ts b/projects/frank-config-layout/src/lib/flow-layout.spec.ts
@@ -1,5 +1,5 @@
-import { Flow2svgService } from './flow2svg';
-import { getFactoryDimensions, SvgResult } from '../public_api';
+import { FlowLayoutService, LayoutStatisticsResult } from './flow-layout';
+import { getFactoryDimensions } from '../public_api';
 
 const input = `Start('<text>My start</text>'):::normal
 N1('<text>Node 1</text>'):::normal
@@ -282,11 +282,11 @@ const expectedMultiline = `<svg class="svg" xmlns="http://www.w3.org/2000/svg"
   <g text-anchor="middle" dominant-baseline="middle"><text class="label-text" x="92" y="78" font-size="10">success</text><text class="label-text" x="92" y="94" font-size="10">other</text><text class="label-text" x="138" y="78" font-size="10">success</text><text class="label-text" x="138" y="94" font-size="10">other</text><text class="label-text" x="207" y="86" font-size="10">success</text><text class="label-text" x="101" y="206" font-size="10">success</text><text class="label-text" x="160" y="206" font-size="10">failure</text><text class="label-text" x="249" y="206" font-size="10">success</text><text class="label-text" x="93" y="326" font-size="10">success</text></g></svg>`;
 
 describe('Flow2svg - please maintain this test using the GUI', () => {
-  let service: Flow2svgService;
+  let service: FlowLayoutService;
 
   beforeEach(() => {
     // No need to test injection - if injection does not work then the app does not show
-    service = new Flow2svgService(getFactoryDimensions());
+    service = new FlowLayoutService(getFactoryDimensions());
   });
 
   it('Test the plain SVG', (done) => {
@@ -305,18 +305,18 @@ describe('Flow2svg - please maintain this test using the GUI', () => {
     });
   });
 
-  it('Test with statistics', (done) => {
-    service.flow2svgStatistics(input).then((statistics) => {
-      expect(statistics.svg).toEqual(expectedSvg);
-      expect(statistics.numNodes).toEqual(5);
-      expect(statistics.numEdges).toEqual(7);
-      expect(statistics.numNodeVisitsDuringLayerCalculation).toEqual(8);
-      done();
-    });
+  it('Test with statistics', async () => {
+    const flowSvg = await service.flow2svg(input);
+    expect(flowSvg).toEqual(expectedSvg);
+
+    const statistics = await service.flow2LayoutStatistics(input);
+    expect(statistics.numNodes).toEqual(5);
+    expect(statistics.numEdges).toEqual(7);
+    expect(statistics.numNodeVisitsDuringLayerCalculation).toEqual(8);
   });
 
   it('Test that real calculation is done only once', (done) => {
-    const first: Promise<SvgResult> = service.flow2svgStatistics(input);
+    const first: Promise<LayoutStatisticsResult> = service.flow2LayoutStatistics(input);
     const second: Promise<string> = service.flow2svg(input);
     Promise.all([first, second]).then(() => {
       expect(service.numSvgCalculations).toEqual(1);
diff --git a/projects/frank-config-layout/src/lib/flow-layout.ts b/projects/frank-config-layout/src/lib/flow-layout.ts
@@ -26,72 +26,78 @@ import {
   calculateLayerNumbersLongestPath,
   IntermediatesCreationResult,
 } from './model/horizontal-grouping';
-import { SvgResult, Dimensions } from '../public_api';
 import { LayoutModel, LayoutModelBuilder } from './model/layout-model';
-import { DerivedDimensions, getDerivedDimensions } from './dimensions';
+import { DerivedDimensions, Dimensions, getDerivedDimensions } from './dimensions';
 
-export class Flow2svgService {
-  private cache = new AsynchronousCache<SvgResult>();
+export interface LayoutStatisticsResult {
+  layout: Layout;
+  numNodes: number;
+  numEdges: number;
+  numNodeVisitsDuringLayerCalculation: number;
+}
+
+export class FlowLayoutService {
+  private cache = new AsynchronousCache<LayoutStatisticsResult>();
 
   private _numSvgCalculations = 0;
   get numSvgCalculations(): number {
     return this._numSvgCalculations;
   }
 
   getHashes(): string[] {
-    return [...this.cache.getSortedKeys()];
+    return this.cache.getSortedKeys();
   }
 
-  private dimensions: DerivedDimensions;
+  private readonly dimensions: DerivedDimensions;
 
   constructor(dimensions: Dimensions) {
     this.dimensions = getDerivedDimensions(dimensions);
   }
 
   async flow2svg(flow: string): Promise<string> {
-    const statistics = await this.flow2svgStatistics(flow);
-    return statistics.svg;
+    const statistics = await this.flow2LayoutStatistics(flow);
+    return generateSvg(statistics.layout, this.dimensions);
+  }
+
+  async flow2Layout(flow: string): Promise<Layout> {
+    const statistics = await this.flow2LayoutStatistics(flow);
+    return statistics.layout;
   }
 
-  async flow2svgStatistics(flow: string): Promise<SvgResult> {
-    let hash: string;
+  async flow2LayoutStatistics(flow: string): Promise<LayoutStatisticsResult> {
     try {
-      hash = await sha256(flow);
+      const hash = await sha256(flow);
+      return this.cache.get(hash, () => this.flow2LayoutStatisticsImpl(flow));
     } catch (error) {
-      console.log(error);
-      throw new Error('Could not calculate hash');
+      throw new Error('Could not calculate hash', error as Error);
     }
-    return await this.cache.get(hash, () => this.flow2svgStatisticsImpl(flow));
   }
 
-  private async flow2svgStatisticsImpl(flow: string): Promise<SvgResult> {
+  private async flow2LayoutStatisticsImpl(flow: string): Promise<LayoutStatisticsResult> {
     ++this._numSvgCalculations;
-    const b: FlowGraph = getGraphFromFlow(flow, this.dimensions);
-    const g: OriginalGraph = findErrorFlow(b);
+    const flowGraph: FlowGraph = getGraphFromFlow(flow, this.dimensions);
+    const graph: OriginalGraph = findErrorFlow(flowGraph);
     let numNodeVisits = 0;
-    const nodeIdToLayer: Map<string, number> = calculateLayerNumbersLongestPath(g, () => ++numNodeVisits);
-    const intermediates: IntermediatesCreationResult = introduceIntermediateNodesAndEdges(g, nodeIdToLayer);
-    let lb: LayoutBase;
-    try {
-      lb = LayoutBase.create(
-        intermediates.intermediate.nodes.map((n) => n.id),
-        intermediates.intermediate,
-      );
-    } catch (error) {
-      throw error;
-    }
-    lb = minimizeNumCrossings(lb);
-    const layoutModel: LayoutModel = new LayoutModelBuilder(lb, intermediates.intermediate).run();
+    const nodeIdToLayer: Map<string, number> = calculateLayerNumbersLongestPath(graph, () => ++numNodeVisits);
+    const intermediates: IntermediatesCreationResult = introduceIntermediateNodesAndEdges(graph, nodeIdToLayer);
+    const layoutBase = LayoutBase.create(
+      intermediates.intermediate.nodes.map((n) => n.id),
+      intermediates.intermediate,
+    );
+    const layoutModel: LayoutModel = new LayoutModelBuilder(
+      minimizeNumCrossings(layoutBase),
+      intermediates.intermediate,
+    ).run();
     const layout: Layout = new LayoutBuilder(
       layoutModel,
       intermediates.original,
       this.dimensions,
       this.dimensions,
     ).run();
     return {
-      svg: generateSvg(layout, this.dimensions),
-      numNodes: g.nodes.length,
-      numEdges: g.edges.length,
+      layout,
+      numNodes: graph.nodes.length,
+      numEdges: graph.edges.length,
       numNodeVisitsDuringLayerCalculation: numNodeVisits,
     };
   }
diff --git a/projects/frank-config-layout/src/lib/graphics/svg-generator.ts b/projects/frank-config-layout/src/lib/graphics/svg-generator.ts
@@ -120,11 +120,7 @@ function getNodeGroupClass(id: string): string {
 }
 
 function getRectangleClass(n: PlacedNode): string {
-  if (n.errorStatus === ERROR_STATUS_ERROR) {
-    return 'rectangle errorOutline';
-  } else {
-    return 'rectangle';
-  }
+  return n.errorStatus === ERROR_STATUS_ERROR ? 'rectangle errorOutline' : 'rectangle';
 }
 
 function renderEdges(edges: LayoutLineSegment[]): string {
@@ -143,11 +139,7 @@ function getEdgeGroupClass(key: string): string {
 }
 
 function getMarkerEnd(lineSegment: LayoutLineSegment): string {
-  if (lineSegment.isLastLineSegment) {
-    return 'marker-end="url(#arrow)"';
-  } else {
-    return '';
-  }
+  return lineSegment.isLastLineSegment ? 'marker-end="url(#arrow)"' : '';
 }
 
 function classOfLine(edge: LayoutLineSegment): string {
@@ -172,9 +164,9 @@ function renderLabel(label: EdgeLabel, edgeLabelFontSize: number, estEdgeLabelCh
     commonItemHeight: edgeLabelFontSize,
   });
   let result: string = '';
-  for (let i = 0; i < label.text.lines.length; ++i) {
-    const p: Point = coordinates[i];
-    result += renderSingleLayerText(p.x, p.y, edgeLabelFontSize, label.text.lines[i].svg);
+  for (let index = 0; index < label.text.lines.length; ++index) {
+    const p: Point = coordinates[index];
+    result += renderSingleLayerText(p.x, p.y, edgeLabelFontSize, label.text.lines[index].svg);
   }
   return result;
 }
@@ -198,9 +190,9 @@ function getSvgTextElements(node: PlacedNode, border: number, fontSize: number):
     itemWidths: nodeText.parts.map((p) => p.innerWidth),
   });
   let totalSvgText = '';
-  for (let i = 0; i < nodeText.parts.length; ++i) {
-    const p: Point = textCoordinates[i];
-    totalSvgText += getSvgTextElement(nodeText.parts[i], p.x, p.y);
+  for (let index = 0; index < nodeText.parts.length; ++index) {
+    const p: Point = textCoordinates[index];
+    totalSvgText += getSvgTextElement(nodeText.parts[index], p.x, p.y);
   }
   return totalSvgText;
 }
diff --git a/projects/frank-config-layout/src/lib/model/layout-base.ts b/projects/frank-config-layout/src/lib/model/layout-base.ts
@@ -1,5 +1,5 @@
 /*
-   Copyright 2025 WeAreFrank!
+   Copyright 2025, 2026 WeAreFrank!
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
@@ -219,14 +219,18 @@ export class NumCrossingsJudgement {
   }
 }
 
-export function minimizeNumCrossings(lb: LayoutBase): LayoutBase {
-  const current = lb.clone();
+export function minimizeNumCrossings(layoutBase: LayoutBase): LayoutBase {
+  const current = layoutBase.clone();
   while (true) {
     const crossingsChanges = calculateNumCrossingsChangesFromAligning(current);
     const judgements: NumCrossingsJudgement[] = [];
-    for (let layerNumber = 0; layerNumber < lb.numLayers; ++layerNumber) {
+    for (let layerNumber = 0; layerNumber < layoutBase.numLayers; ++layerNumber) {
       judgements.push(
-        new NumCrossingsJudgement(layerNumber, lb.getIdsOfLayer(layerNumber).length, -crossingsChanges[layerNumber]),
+        new NumCrossingsJudgement(
+          layerNumber,
+          layoutBase.getIdsOfLayer(layerNumber).length,
+          -crossingsChanges[layerNumber],
+        ),
       );
     }
     judgements.sort((a, b) => a.compareTo(b));
diff --git a/projects/frank-config-layout/src/lib/model/layout-model.ts b/projects/frank-config-layout/src/lib/model/layout-model.ts
@@ -1,5 +1,5 @@
 /*
-   Copyright 2025 WeAreFrank!
+   Copyright 2025, 2026 WeAreFrank!
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
@@ -67,10 +67,10 @@ export class LayoutModelBuilder<T extends WithLayerNumber, C extends Connection<
   private connectionsByEdgeKey = new Map<string, LayoutConnection>();
 
   constructor(
-    readonly lb: LayoutBase,
-    readonly g: Graph<T, C>,
+    readonly layoutBase: LayoutBase,
+    readonly graph: Graph<T, C>,
   ) {
-    for (let layer = 0; layer < lb.numLayers; ++layer) {
+    for (let layer = 0; layer < layoutBase.numLayers; ++layer) {
       this.positionsOfLayer.push([]);
     }
   }
@@ -81,7 +81,7 @@ export class LayoutModelBuilder<T extends WithLayerNumber, C extends Connection<
     this.buildConnectors();
     this.buildConnectionsFromEdges();
     return new LayoutModel(
-      this.lb.numLayers,
+      this.layoutBase.numLayers,
       this.positionsByKey,
       this.connectorsByKey,
       this.positionsOfLayer,
@@ -93,8 +93,8 @@ export class LayoutModelBuilder<T extends WithLayerNumber, C extends Connection<
   }
 
   private establishPositions(): void {
-    for (let layerNumber = 0; layerNumber < this.lb.numLayers; ++layerNumber) {
-      for (const [position, id] of this.lb.getIdsOfLayer(layerNumber).entries()) {
+    for (let layerNumber = 0; layerNumber < this.layoutBase.numLayers; ++layerNumber) {
+      for (const [position, id] of this.layoutBase.getIdsOfLayer(layerNumber).entries()) {
         const positionObject: LayoutPosition = new LayoutPosition(layerNumber, position, id);
         this.positionsByKey.set(positionObject.key, positionObject);
         this.positionsOfLayer[layerNumber].push(positionObject);
@@ -105,7 +105,7 @@ export class LayoutModelBuilder<T extends WithLayerNumber, C extends Connection<
 
   private relatePositions(): void {
     this.forEachPositionAndAdjacentLayerCombi((referencePositionObject, otherLayerNumber) => {
-      const positionsInOther: number[] = this.lb.getConnections(referencePositionObject.id, otherLayerNumber);
+      const positionsInOther: number[] = this.layoutBase.getConnections(referencePositionObject.id, otherLayerNumber);
       for (const positionInOther of positionsInOther) {
         const relatedPositionObjectKey = `${otherLayerNumber}-${positionInOther}`;
         const relatedPositionObject: LayoutPosition | undefined = this.positionsByKey.get(relatedPositionObjectKey);
@@ -131,9 +131,9 @@ export class LayoutModelBuilder<T extends WithLayerNumber, C extends Connection<
   private forEachPositionAndAdjacentLayerCombi(
     action: (referencePositionObject: LayoutPosition, otherLayerNumber: number) => void,
   ): void {
-    for (let layerNumber = 0; layerNumber < this.lb.numLayers; ++layerNumber) {
+    for (let layerNumber = 0; layerNumber < this.layoutBase.numLayers; ++layerNumber) {
       const otherLayerNumbers: number[] = [layerNumber - 1, layerNumber + 1].filter(
-        (otherLayerNumber) => otherLayerNumber >= 0 && otherLayerNumber < this.lb.numLayers,
+        (otherLayerNumber) => otherLayerNumber >= 0 && otherLayerNumber < this.layoutBase.numLayers,
       );
       for (const positionObject of this.positionsOfLayer[layerNumber]) {
         for (const otherLayerNumber of otherLayerNumbers) {
@@ -149,7 +149,7 @@ export class LayoutModelBuilder<T extends WithLayerNumber, C extends Connection<
       for (const relatedPositionObject of this.getRelatedPositionObjects(referencePositionObject, otherLayerNumber)) {
         const idRef = referencePositionObject.id;
         const idRel = relatedPositionObject.id;
-        const edgesInOut: C[] = [this.g.searchEdge(idRel, idRef), this.g.searchEdge(idRef, idRel)].filter(
+        const edgesInOut: C[] = [this.graph.searchEdge(idRel, idRef), this.graph.searchEdge(idRef, idRel)].filter(
           (edge) => edge !== undefined,
         );
         let edges: C[];
diff --git a/projects/frank-config-layout/src/public_api.ts b/projects/frank-config-layout/src/public_api.ts
diff --git a/src/app/components/calculated-static-svg/calculated-static-svg.component.ts b/src/app/components/calculated-static-svg/calculated-static-svg.component.ts
diff --git a/src/app/components/static-svg-statistics/static-svg-statistics.component.ts b/src/app/components/static-svg-statistics/static-svg-statistics.component.ts
