Merge pull request #55 from frankframework/do-not-deform-characters

Author: Matthbo

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

@@ -80,10 +80,6 @@ function renderDefs(): string {
         font-family: "Inter", "trebuchet ms", serif;
       }
 
-      .rect-text > text[data-html-node="a"] {
-        font-size: 28px;
-      }
-
       .rect-text > text[data-html-node="b"] {
         font-weight: bold;
       }
@@ -215,5 +211,5 @@ function getSvgTextElements(node: PlacedNode, border: number, fontSize: number):
 }
 
 function getSvgTextElement(textPart: NodeTextPart, x: number, y: number): string {
-  return `<text data-html-node=${textPart.name} x="${x}" y="${y}" textLength="${textPart.innerWidth}" lengthAdjust="spacingAndGlyphs">${textPart.text}</text>`;
+  return `<text data-html-node=${textPart.name} x="${x}" y="${y}">${textPart.text}</text>`;
 }

projects/frank-config-layout/src/lib/model/text.ts

@@ -89,8 +89,9 @@ export function createNodeText(html: string, d: NodeTextDimensions): NodeText {
     const node = nodes[index];
     const name = node.nodeName.toLowerCase();
     if (name === 'br') continue;
+    const isBold: boolean = name === 'b';
     const text = node.textContent ?? '';
-    textParts.push(createNodeTextPart(name, text, d));
+    textParts.push(createNodeTextPart(name, text, isBold, d));
   }
   const innerWidth = Math.max(...textParts.map((p) => p.innerWidth));
   return {
@@ -101,9 +102,8 @@ export function createNodeText(html: string, d: NodeTextDimensions): NodeText {
   };
 }
 
-function createNodeTextPart(nodeName: string, text: string, d: NodeTextDimensions): NodeTextPart {
-  // TODO: Calculate this only once.
-  const fontWidth: number = calculateAverageFontCharacterWidth(d.nodeTextFontSize);
+function createNodeTextPart(nodeName: string, text: string, isBold: boolean, d: NodeTextDimensions): NodeTextPart {
+  const fontWidth: number = calculateAverageFontCharacterWidth(d.nodeTextFontSize, isBold);
   const innerWidth: number = Math.round(text.length * fontWidth);
   const outerWidth: number = innerWidth + 2 * d.nodeTextBorder;
   return {

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

@@ -46,7 +46,7 @@ export function initMermaid2Svg(d: Dimensions): void {
 export function getFactoryDimensions(): Dimensions {
   return {
     nodeTextFontSize: 16,
-    nodeTextBorder: 8,
+    nodeTextBorder: 12,
     layerHeight: 60,
     layerDistance: 120,
     nodeBoxHeight: 54,

src/assets/nodeTextSizeTest.txt

@@ -0,0 +1,28 @@
+flowchart
+  d266e7("<b>DirectoryListener<b>"):::listener
+  d266e10("<a style='font-size:28px'>MFHIn</a>"):::normal
+  d266e32("FixedQuerySender"):::sender
+  d266e55("JdbcTableListener"):::listener
+  d266e60("JavaListener"):::listener
+  d266e63("<b>MFHProcessor</b>"):::normal
+  classDef normal fill:#fff,stroke-width:4px,stroke:#8bc34a;
+  classDef listener0 fill:#fff,stroke-width:4px,stroke:#fe41ff;
+  classDef listener1 fill:#fff,stroke-width:4px,stroke:#18a689;
+  classDef listener2 fill:#fff,stroke-width:4px,stroke:#18a689;
+  classDef listener3 fill:#fff,stroke-width:4px,stroke:#4150ff;
+  classDef listener4 fill:#fff,stroke-width:4px,stroke:#ffc107;
+  classDef listener5 fill:#fff,stroke-width:4px,stroke:#ff417e;
+  classDef sender0 fill:#fff,stroke-width:4px,stroke:#fe41ff;
+  classDef sender1 fill:#fff,stroke-width:4px,stroke:#8bc34a;
+  classDef sender2 fill:#fff,stroke-width:4px,stroke:#00abff;
+  classDef sender3 fill:#fff,stroke-width:4px,stroke:#4150ff;
+  classDef sender4 fill:#fff,stroke-width:4px,stroke:#ffc107;
+  classDef sender5 fill:#fff,stroke-width:4px,stroke:#ff417e;
+  classDef sender6 fill:#fff,stroke-width:4px,stroke:#8a41ff;
+  classDef sender7 fill:#fff,stroke-width:4px,stroke:#ff8741;
+  classDef sender8 fill:#fff,stroke-width:4px,stroke:#8bc34a;
+  d266e7 --> d266e10
+  d266e10 --> d266e32
+  d266e55 --> d266e63
+  d266e60 --> d266e63
+  linkStyle 0,1,2,3 stroke:#8bc34a,stroke-width:3px,fill:none;