Supply centers of text elements in SVG

projects/frank-config-layout/src/lib/graphics/svg-generator.ts

@@ -120,15 +120,10 @@ function renderOriginalNode(node: PlacedNode, border: number, nodeTextFontSize:
       rx="5">
     </rect>
   </g>
-  <g class="rect-text">${svgText}</g>
+  <g class="rect-text" text-anchor="middle" dominant-baseline="middle">${svgText}</g>
 `;
 }
 
-// TODO: Issue https://github.com/frankframework/frank-config-layout/issues/51.
-// Before this PR there was a <g> around this that specified that the x-coordinate
-// is the center, not the left border. We should restore that and redo calculating
-// x-coordinates. Then the alignment does not depend on the length estimate of
-// function calculateAverageFontCharacterWidth() in text.ts.
 function getNodeGroupClass(id: string): string {
   return `frank-flowchart-node-${id}`;
 }
@@ -175,16 +170,10 @@ function classOfLine(edge: LayoutLineSegment): string {
 }
 
 function renderLabels(labels: EdgeLabel[], edgeLabelFontSize: number): string {
-  return labels.map((label) => renderLabel(label, edgeLabelFontSize)).join('');
+  return `  <g text-anchor="middle" dominant-baseline="middle">${labels.map((label) => renderLabel(label, edgeLabelFontSize)).join('')}</g>`;
 }
 
 function renderLabel(label: EdgeLabel, edgeLabelFontSize: number): string {
-  // TODO: Issue https://github.com/frankframework/frank-config-layout/issues/51.
-  // The horizontal centers of the label boxes are known. We should supply
-  // the center x-coordinate in the <text> and make a <g> tell the SVG
-  // renderer that the center is supplied. Then we do not rely on the
-  // width estimate to properly align multiple labels of an edge.
-  // To reuse code, we should do the same for node texts.
   const coordinates: Point[] = arrangeInBox({
     container: new Box(label.horizontalBox, label.verticalBox),
     border: 0,

projects/frank-config-layout/src/lib/util/util.spec.ts

@@ -170,8 +170,8 @@ describe('Util test', () => {
       itemWidths: [20],
     });
     expect(actual.length).toEqual(1);
-    expect(actual[0].x).toEqual(Interval.createFromCenterSize(Interval.createFromMinMax(10, 110).center, 20).minValue);
-    expect(actual[0].y).toEqual(50);
+    expect(actual[0].x).toEqual(60);
+    expect(actual[0].y).toEqual(45);
   });
 
   it('When arrangeInBox arranges two items then they are equally spaced over the inner height vertically and centered horizontally', () => {
@@ -182,9 +182,9 @@ describe('Util test', () => {
       itemWidths: [20, 30],
     });
     expect(actual.length).toEqual(2);
-    expect(actual[0].x).toEqual(50);
-    expect(actual[1].x).toEqual(45);
-    expect(actual[0].y).toEqual(50);
-    expect(actual[1].y).toEqual(66);
+    expect(actual[0].x).toEqual(60);
+    expect(actual[1].x).toEqual(60);
+    expect(actual[0].y).toEqual(45);
+    expect(actual[1].y).toEqual(61);
   });
 });

projects/frank-config-layout/src/lib/util/util.ts

@@ -16,7 +16,6 @@
 
 import { Box } from '../graphics/box';
 import { Point } from '../graphics/graphics';
-import { Interval } from './interval';
 
 // This can be done in a more concise way, see StackOverflow:
 // https://stackoverflow.com/questions/36947847/how-to-generate-range-of-numbers-from-0-to-n-in-es2015-only
@@ -156,14 +155,15 @@ export interface ArrangeInBoxParameters {
   itemWidths: number[];
 }
 
+// Returns the (x, y) coordinates of the text centers, both horizontally and vertically.
 export function arrangeInBox(parameters: ArrangeInBoxParameters): Point[] {
   if (parameters.itemWidths.length === 0) {
     return [];
   } else if (parameters.itemWidths.length === 1) {
     return [
       new Point(
-        Math.round(parameters.container.horizontalBox.center - parameters.itemWidths[0] / 2),
-        Math.round(parameters.container.verticalBox.center + parameters.commonItemHeight / 2),
+        Math.round(parameters.container.horizontalBox.center),
+        Math.round(parameters.container.verticalBox.center),
       ),
     ];
   } else {
@@ -174,9 +174,9 @@ export function arrangeInBox(parameters: ArrangeInBoxParameters): Point[] {
       Math.max(rawTotalVerticalSpaceBetweenLines, 0) / (parameters.itemWidths.length - 1);
     const result: Point[] = [];
     let currentY = parameters.container.verticalBox.minValue + parameters.border;
-    for (const currentItemWidth of parameters.itemWidths) {
-      const x = Interval.createFromCenterSize(parameters.container.horizontalBox.center, currentItemWidth).minValue;
-      const y = Math.round(currentY + parameters.commonItemHeight);
+    for (const {} of parameters.itemWidths) {
+      const x = parameters.container.horizontalBox.center;
+      const y = Math.round(currentY + parameters.commonItemHeight / 2);
       result.push(new Point(x, y));
       currentY += parameters.commonItemHeight + verticalSpaceBetweenLines;
     }

projects/frank-config-layout/src/public_api.ts

@@ -47,7 +47,7 @@ export function getFactoryDimensions(): Dimensions {
   return {
     nodeTextFontSize: 16,
     nodeTextBorder: 8,
-    layerHeight: 54,
+    layerHeight: 60,
     layerDistance: 120,
     nodeBoxHeight: 54,
     intermediateWidth: 60,