@transitrix/diagrams 1.6.0 → 1.8.1

package/src/webview/render-blocks.ts

@@ -13,67 +13,23 @@
  * title `<text>`.
  */
 import { layoutNestedBlocks } from '../blocks/layout.js';
-import type { BlocksFile, BlocksLayout, LaidOutBlock } from '../blocks/types.js';
+import type { BlocksFile, BlocksLayout, BlocksLayoutOptions, LaidOutBlock } from '../blocks/types.js';
+import { parseNodeSizePreset, resolveBlocksLeafSize, type NodeSizePreset } from '../node-size-presets.js';
 import { generateSvgEmbedCss, type ThemeId } from '../theme/index.js';
+import {
+  emitCenteredTextSvg,
+  layoutHeaderBlockText,
+  layoutLeafBlockText,
+} from './entity-text-layout.js';
 import { escXml } from './render-util.js';
 import { ENTITY_NODE_RX } from './notation-style.js';
 
 const PAD = 24;
 
-// Approximate character width (px) at text-primary size (12px/600).
-const CHAR_W = 7;
-// Approximate character width (px) at text-id size (10px/600).
-const CHAR_W_ID = 6;
-
-// Vertical spacing between line centres.
-const LINE_H = 14;     // name lines (text-primary, 12 px font)
-const LINE_H_ID = 12;  // id lines (text-id, 10 px font)
-// Minimum gap to avoid overlap: half of name text height (6 px) + half of id
-// text height (5 px) = 11 px. Use 14 px to match the name-line separation and
-// leave a 3 px visual buffer — same as the gap between consecutive name lines.
-const NAME_ID_GAP = 14;
-
-/** Word-wrap `text` to at most `maxLines` lines of `maxChars` each. */
-function wrapWords(text: string, maxChars: number, maxLines: number): string[] {
-  const safeMax = Math.max(2, maxChars);
-  const words = text.split(' ');
-  const lines: string[] = [];
-  let cur = '';
-  for (let i = 0; i < words.length; i++) {
-    const w = words[i];
-    const next = cur ? `${cur} ${w}` : w;
-    if (next.length <= safeMax) {
-      cur = next;
-    } else {
-      if (cur) lines.push(cur);
-      cur = '';
-      if (lines.length >= maxLines) break;
-      if (lines.length === maxLines - 1) {
-        const rest = words.slice(i).join(' ');
-        lines.push(rest.length <= safeMax ? rest : rest.slice(0, safeMax - 1) + '…');
-        return lines;
-      }
-      cur = w.length <= safeMax ? w : w.slice(0, safeMax - 1) + '…';
-    }
-  }
-  if (cur && lines.length < maxLines) lines.push(cur);
-  return lines.length ? lines : [text.slice(0, safeMax - 1) + '…'];
-}
-
-/** Split an ID (no spaces) across at most 2 lines, breaking at `_` or `-`. */
-function wrapId(id: string, maxChars: number): string[] {
-  if (id.length <= maxChars) return [id];
-  const seg = id.slice(0, maxChars);
-  const sepIdx = Math.max(seg.lastIndexOf('_'), seg.lastIndexOf('-'));
-  const cut = sepIdx > Math.floor(maxChars / 3) ? sepIdx : maxChars - 1;
-  const isSep = id[cut] === '_' || id[cut] === '-';
-  const line1 = id.slice(0, cut);
-  const rest = id.slice(cut + (isSep ? 1 : 0));
-  return [line1, rest.length <= maxChars ? rest : rest.slice(0, maxChars - 1) + '…'];
-}
-
 export interface RenderBlocksOptions {
   title?: string;
+  nodeSizePreset?: NodeSizePreset;
+  layoutOptions?: BlocksLayoutOptions;
 }
 
 /**
@@ -89,27 +45,6 @@ function levelClassForDepth(depth: number): string {
   return `level-${idx}`;
 }
 
-// Reserve a small horizontal margin so text never abuts the rounded corners.
-const TEXT_MARGIN_X = 8;
-
-/** Truncate `text` to at most `maxChars` characters, at a word boundary when possible. */
-function truncateLine(text: string, maxChars: number): string {
-  const safeMax = Math.max(2, maxChars);
-  if (text.length <= safeMax) return text;
-  const cut = text.slice(0, safeMax - 1);
-  const lastSpace = cut.lastIndexOf(' ');
-  return (lastSpace > safeMax / 2 ? cut.slice(0, lastSpace) : cut) + '…';
-}
-
-/** Single-line ID truncation that prefers `_`/`-` separators before falling back to a hard cut. */
-function truncateId(id: string, maxChars: number): string {
-  const safeMax = Math.max(2, maxChars);
-  if (id.length <= safeMax) return id;
-  const cut = id.slice(0, safeMax - 1);
-  const sepIdx = Math.max(cut.lastIndexOf('_'), cut.lastIndexOf('-'));
-  return (sepIdx > safeMax / 3 ? cut.slice(0, sepIdx) : cut) + '…';
-}
-
 function emitBlockSvg(b: LaidOutBlock, ox: number, oy: number, parts: string[]): void {
   const cls = levelClassForDepth(b.depth);
   const cx = b.x + ox + b.width / 2;
@@ -117,50 +52,27 @@ function emitBlockSvg(b: LaidOutBlock, ox: number, oy: number, parts: string[]):
     `<rect class="diagram-node ${cls}" x="${b.x + ox}" y="${b.y + oy}" width="${b.width}" height="${b.height}" rx="${ENTITY_NODE_RX}"/>`,
   );
 
-  const innerW = Math.max(0, b.width - TEXT_MARGIN_X * 2);
   const isLeaf = b.children.length === 0;
   if (isLeaf) {
-    // Leaf block: name (up to 3 lines) then ID (up to 2 lines), centred vertically.
-    const maxCharsName = Math.max(4, Math.floor(innerW / CHAR_W));
-    const maxCharsId = Math.max(4, Math.floor(innerW / CHAR_W_ID));
-    const nameLines = wrapWords(b.name, maxCharsName, 3);
-    const idLines = wrapId(b.id, maxCharsId);
-    const nameTotalSpan = (nameLines.length - 1) * LINE_H;
-    const idTotalSpan = (idLines.length - 1) * LINE_H_ID;
-    const totalSpan = nameTotalSpan + NAME_ID_GAP + idTotalSpan;
-    const firstY = Math.round(b.y + oy + (b.height - totalSpan) / 2);
-    for (let i = 0; i < nameLines.length; i++) {
-      parts.push(
-        `<text class="text-primary" x="${cx}" y="${firstY + i * LINE_H}" text-anchor="middle" dominant-baseline="central">${escXml(nameLines[i])}</text>`,
-      );
-    }
-    const idFirstY = firstY + nameTotalSpan + NAME_ID_GAP;
-    for (let i = 0; i < idLines.length; i++) {
-      parts.push(
-        `<text class="text-id" x="${cx}" y="${idFirstY + i * LINE_H_ID}" text-anchor="middle" dominant-baseline="central">${escXml(idLines[i])}</text>`,
-      );
-    }
+    const specs = layoutLeafBlockText({
+      boxX: b.x + ox,
+      boxY: b.y + oy,
+      boxWidth: b.width,
+      boxHeight: b.height,
+      name: b.name,
+      id: b.id,
+    });
+    parts.push(emitCenteredTextSvg(specs, cx, escXml));
   } else {
-    // Container block: name (text-primary) above, ID (text-id, grey) below — both
-    // single-line, truncated with `…` to fit within `b.width`. The header strip is
-    // only `headerHeight` tall (default 28px), which is enough for one line each at
-    // the configured text sizes. Stacking the ID as its own text-id element keeps
-    // the wrapping/truncation rule consistent with leaves and guarantees no overflow
-    // for any combination of name/ID length.
-    const maxCharsName = Math.max(4, Math.floor(innerW / CHAR_W));
-    const maxCharsId = Math.max(4, Math.floor(innerW / CHAR_W_ID));
-    const nameText = truncateLine(b.name, maxCharsName);
-    const idText = truncateId(b.id, maxCharsId);
-    const headerMid = b.y + oy + b.headerHeight / 2;
-    const halfSpan = (LINE_H + LINE_H_ID) / 4;
-    const nameY = Math.round(headerMid - halfSpan);
-    const idY = Math.round(headerMid + halfSpan);
-    parts.push(
-      `<text class="text-primary" x="${cx}" y="${nameY}" text-anchor="middle" dominant-baseline="central">${escXml(nameText)}</text>`,
-    );
-    parts.push(
-      `<text class="text-id" x="${cx}" y="${idY}" text-anchor="middle" dominant-baseline="central">${escXml(idText)}</text>`,
-    );
+    const specs = layoutHeaderBlockText({
+      boxX: b.x + ox,
+      boxY: b.y + oy,
+      boxWidth: b.width,
+      headerHeight: b.headerHeight,
+      name: b.name,
+      id: b.id,
+    });
+    parts.push(emitCenteredTextSvg(specs, cx, escXml));
     for (const c of b.children) emitBlockSvg(c, ox, oy, parts);
   }
 }
@@ -210,9 +122,14 @@ ${parts.join('\n')}
  * with the shared theme CSS embedded so the output is self-contained.
  */
 export function renderBlocksSvg(doc: BlocksFile, options: RenderBlocksOptions = {}): string {
-  const { title = '' } = options;
-
-  const layout: BlocksLayout = layoutNestedBlocks(doc);
+  const { title = '', nodeSizePreset = 'normal', layoutOptions } = options;
+  const leaf = resolveBlocksLeafSize(parseNodeSizePreset(nodeSizePreset));
+
+  const layout: BlocksLayout = layoutNestedBlocks(doc, {
+    leafWidth: leaf.width,
+    leafHeight: leaf.height,
+    ...layoutOptions,
+  });
 
   if (layout.blocks.length === 0) {
     return `<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 0 0"></svg>`;

package/src/webview/render-fgca.ts

@@ -1,28 +1,30 @@
 /**
- * Browser-safe SVG renderer for the canonical FGCA and FGA notations.
+ * Browser-safe SVG renderer for the canonical DGCA and DGA notations.
  *
  * Step 4 of the IntelliJ epic (ADR 0001): the webview bundle must turn a
- * validated FGCA/FGA document into renderable SVG so JCEF can drop it into the
- * preview panel. The VS Code path lives in `extension/src/fgca-preview.ts` and
+ * validated DGCA/DGA document into renderable SVG so JCEF can drop it into the
+ * preview panel. The VS Code path lives in `extension/src/dgca-preview.ts` and
  * pulls in VS Code-specific concerns (themes, title block, save dialogs,
  * spacing/scope controls); this module is the host-neutral subset — pure
  * column layout → SVG with no VS Code APIs, no `node:fs`, no `node:path`.
  *
- * FGCA and FGA share the same renderer; FGA only differs by hiding the
+ * DGCA and DGA share the same renderer; DGA only differs by hiding the
  * `change` column (`hideChanges` / the layout's Goal → Activity collapse),
  * exactly as the extension preview does.
  */
 import {
   layoutFGCAPreview,
-  FGCA_NODE_W as NODE_W,
-  FGCA_NODE_H as NODE_H,
+  FGCA_NODE_W,
+  FGCA_NODE_H,
   FGCA_HEADER_H as HEADER_H,
   FGCA_PAD as PAD,
   type FGCAPreviewColumn,
 } from '../fgca/preview-layout.js';
 import type { FGCADoc } from '../fgca/validate.js';
 import { horizontalCubicEdgePath, DEFAULT_EDGE_CURVATURE } from '../edge-path.js';
+import { parseNodeSizePreset, resolveDgcaNodeSize, type NodeSizePreset } from '../node-size-presets.js';
 import { generateSvgEmbedCss } from '../theme/index.js';
+import { emitCenteredTextSvg, layoutCenteredEntityText, truncateLine } from './entity-text-layout.js';
 import { escXml } from './render-util.js';
 
 const COL_LABELS: Record<FGCAPreviewColumn, string> = {
@@ -34,8 +36,13 @@ const COL_LABELS: Record<FGCAPreviewColumn, string> = {
 
 type FgcaLayout = ReturnType<typeof layoutFGCAPreview>;
 
+export interface RenderFgcaBodyOptions {
+  nodeWidth?: number;
+  nodeHeight?: number;
+}
+
 /**
- * Canonical FGCA/FGA body — the column headers, node rects and edge paths that
+ * Canonical DGCA/DGA body — the column headers, node rects and edge paths that
  * go inside the `<svg>`, shared verbatim by the VS Code preview (`buildSvg`)
  * and the host-neutral wrapper below. Excludes the host-specific title block
  * and the (identical) `<defs>` arrow marker. Coordinates are absolute (the
@@ -49,12 +56,17 @@ export function renderFgcaBody(
   edges: FgcaLayout['edges'],
   curvature: number,
   entryCurvature: number | undefined,
+  bodyOptions: RenderFgcaBodyOptions = {},
 ): string {
+  const nodeWidth = bodyOptions.nodeWidth ?? FGCA_NODE_W;
+  const nodeHeight = bodyOptions.nodeHeight ?? FGCA_NODE_H;
+  const headerTruncate = Math.max(8, Math.floor((nodeWidth - 16) / 7));
+
   const headerSvg = columns
     .map(({ col, x }) =>
       [
-        `<rect class="diagram-node layer-${col}" x="${x}" y="${PAD}" width="${NODE_W}" height="${HEADER_H}" rx="6"/>`,
-        `<text class="text-header" x="${x + NODE_W / 2}" y="${PAD + HEADER_H / 2}" text-anchor="middle" dominant-baseline="central">${escXml(COL_LABELS[col])}</text>`,
+        `<rect class="diagram-node layer-${col}" x="${x}" y="${PAD}" width="${nodeWidth}" height="${HEADER_H}" rx="6"/>`,
+        `<text class="text-header" x="${x + nodeWidth / 2}" y="${PAD + HEADER_H / 2}" text-anchor="middle" dominant-baseline="central">${escXml(truncateLine(COL_LABELS[col], headerTruncate))}</text>`,
       ].join('\n'),
     )
     .join('\n');
@@ -68,34 +80,22 @@ export function renderFgcaBody(
 
   const nodeSvg = nodes
     .map((n) => {
-      const words = n.label.split(' ');
-      let line1 = '';
-      let line2 = '';
-      for (const w of words) {
-        if ((line1 + ' ' + w).trim().length <= 26) {
-          line1 = (line1 + ' ' + w).trim();
-        } else if ((line2 + ' ' + w).trim().length <= 26) {
-          line2 = (line2 + ' ' + w).trim();
-        } else if (!line2) {
-          line2 = w.slice(0, 24) + '…';
-          break;
-        }
-      }
-      const twoLines = line2.length > 0;
-      const y1 = twoLines ? n.y + 16 : n.y + 26;
-      const y2 = n.y + 32;
-      const idY = twoLines ? n.y + 54 : n.y + 50;
       const entityId = n.id.slice(n.id.indexOf('_') + 1);
+      const specs = layoutCenteredEntityText({
+        boxX: n.x,
+        boxY: n.y,
+        boxWidth: nodeWidth,
+        boxHeight: nodeHeight,
+        name: n.label,
+        id: entityId,
+        nameMaxLines: 2,
+        idMaxLines: 1,
+      });
+      const textSvg = emitCenteredTextSvg(specs, n.x + nodeWidth / 2, escXml);
       return [
-        `<rect class="diagram-node layer-${n.col}" x="${n.x}" y="${n.y}" width="${NODE_W}" height="${NODE_H}" rx="8"/>`,
-        `<text class="text-primary" x="${n.x + NODE_W / 2}" y="${y1}" text-anchor="middle" dominant-baseline="central">${escXml(line1)}</text>`,
-        twoLines
-          ? `<text class="text-primary" x="${n.x + NODE_W / 2}" y="${y2}" text-anchor="middle" dominant-baseline="central">${escXml(line2)}</text>`
-          : '',
-        `<text class="text-id" x="${n.x + NODE_W / 2}" y="${idY}" text-anchor="middle" dominant-baseline="central">${escXml(entityId)}</text>`,
-      ]
-        .filter(Boolean)
-        .join('\n');
+        `<rect class="diagram-node layer-${n.col}" x="${n.x}" y="${n.y}" width="${nodeWidth}" height="${nodeHeight}" rx="8"/>`,
+        textSvg,
+      ].join('\n');
     })
     .join('\n');
 
@@ -103,35 +103,50 @@ export function renderFgcaBody(
 }
 
 export interface RenderFgcaOptions {
-  /** `'fga'` hides the Changes column; defaults to `'fgca'`. */
-  variant?: 'fgca' | 'fga';
+  /** `'dga'` hides the Changes column; defaults to `'dgca'`. */
+  variant?: 'dgca' | 'dga';
   /** Optional heading rendered as a left-anchored `text-header` line. */
   title?: string;
   /** Exit edge curvature; 1 = default, 0 = straight, higher = stronger arc. */
   curvature?: number;
   /** Entry curvature at the target node; defaults to `curvature` when omitted. */
   entryCurvature?: number;
+  nodeSizePreset?: NodeSizePreset;
+  layoutOptions?: Parameters<typeof layoutFGCAPreview>[1];
 }
 
 export function renderFgcaSvg(doc: FGCADoc, options: RenderFgcaOptions = {}): string {
-  const { variant = 'fgca', title = '', curvature = DEFAULT_EDGE_CURVATURE, entryCurvature } = options;
-  const hideChanges = variant === 'fga';
+  const {
+    variant = 'dgca',
+    title = '',
+    curvature = DEFAULT_EDGE_CURVATURE,
+    entryCurvature,
+    nodeSizePreset = 'normal',
+    layoutOptions,
+  } = options;
+  const hideChanges = variant === 'dga';
+  const nodeSize = resolveDgcaNodeSize(parseNodeSizePreset(nodeSizePreset));
 
-  const { nodes, edges, columns, width, height } = layoutFGCAPreview(doc, { hideChanges });
+  const { nodes, edges, columns, width, height } = layoutFGCAPreview(doc, {
+    hideChanges,
+    nodeWidth: nodeSize.width,
+    nodeHeight: nodeSize.height,
+    ...layoutOptions,
+  });
 
   if (nodes.length === 0) {
     return `<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 0 0"></svg>`;
   }
 
-  const body = renderFgcaBody(columns, nodes, edges, curvature, entryCurvature);
+  const body = renderFgcaBody(columns, nodes, edges, curvature, entryCurvature, {
+    nodeWidth: nodeSize.width,
+    nodeHeight: nodeSize.height,
+  });
 
   const titleSvg = title
     ? `<text class="text-header" x="${PAD}" y="${PAD - 6}">${escXml(title)}</text>`
     : '';
 
-  // Embed the shared theme CSS inside the SVG so the rendered output is
-  // self-contained — the JCEF host page only needs to drop the SVG into the
-  // DOM and styling resolves without any cooperation from the host stylesheet.
   const embedCss = generateSvgEmbedCss('transitrix');
 
   return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">

package/src/webview/render-goals.ts

@@ -2,8 +2,8 @@
  * Browser-safe SVG renderer for the canonical Goals notation.
  *
  * Step 3 of the IntelliJ epic (ADR 0001): the webview bundle must turn a
- * validated GoalTree into renderable SVG so JCEF can drop it into the preview
- * panel. The VS Code path lives in `extension/src/goals-preview.ts` and pulls
+ * validated GoalTree into renderable SVG so JCEF can drop it into the
+ * preview panel. The VS Code path lives in `extension/src/goals-preview.ts` and pulls
  * in VS Code-specific concerns (themes, title block, save dialogs); this
  * module is the host-neutral subset — pure layout → SVG with no VS Code APIs,
  * no `node:fs`, no `node:path`.
@@ -12,22 +12,23 @@
  */
 import { layoutGoalTree } from '../goals/layout.js';
 import type { GoalTree, GoalTreeLayout, LaidOutEdge } from '../goals/types.js';
+import { displayGoalId } from '../goals/parse-canonical.js';
 import { horizontalCubicEdgePath, DEFAULT_EDGE_CURVATURE } from '../edge-path.js';
+import { parseNodeSizePreset, resolveGoalsNodeSize, type NodeSizePreset } from '../node-size-presets.js';
 import { generateSvgEmbedCss, type ThemeId } from '../theme/index.js';
+import { emitCenteredTextSvg, layoutCenteredEntityText } from './entity-text-layout.js';
 import { escXml } from './render-util.js';
 import { ENTITY_NODE_RX } from './notation-style.js';
 
-const NODE_W = 250;
-const NODE_H = 72;
 const RANK_SEP = 100;
 const NODE_SEP = 24;
 const PAD = 24;
-const LABEL_CHARS = 30;
 
 export interface RenderGoalsOptions {
   treeName?: string;
   curvature?: number;
   entryCurvature?: number;
+  nodeSizePreset?: NodeSizePreset;
 }
 
 /**
@@ -36,11 +37,12 @@ export interface RenderGoalsOptions {
  * with the shared theme CSS embedded so the output is self-contained.
  */
 export function renderGoalsSvg(tree: GoalTree, options: RenderGoalsOptions = {}): string {
-  const { treeName = '', curvature = DEFAULT_EDGE_CURVATURE, entryCurvature } = options;
+  const { treeName = '', curvature = DEFAULT_EDGE_CURVATURE, entryCurvature, nodeSizePreset = 'normal' } = options;
+  const nodeSize = resolveGoalsNodeSize(parseNodeSizePreset(nodeSizePreset));
 
   const layout: GoalTreeLayout = layoutGoalTree(tree, {
-    nodeWidth: NODE_W,
-    nodeHeight: NODE_H,
+    nodeWidth: nodeSize.width,
+    nodeHeight: nodeSize.height,
     rankSep: RANK_SEP,
     nodeSep: NODE_SEP,
   });
@@ -53,10 +55,6 @@ export function renderGoalsSvg(tree: GoalTree, options: RenderGoalsOptions = {})
     ? `<text class="text-header" x="${PAD}" y="${PAD - 6}">${escXml(`Goal tree — ${treeName}`)}</text>`
     : '';
 
-  // Embed the shared theme CSS so the JCEF host page only needs to drop the SVG
-  // into the DOM — styling resolves without help from the host stylesheet. The
-  // VS Code preview omits this (its webview supplies the CSS) and embeds it only
-  // on export via `prepareSvgForExport`.
   return renderGoalsLayoutSvg(layout, { curvature, entryCurvature, title, embedCssTheme: 'transitrix' });
 }
 
@@ -110,32 +108,23 @@ export function renderGoalsLayoutSvg(layout: GoalTreeLayout, options: RenderGoal
       const y = n.y + oy;
       const level = n.data.level % 8;
       const labelText = n.data.name ?? String(n.id);
-      const words = labelText.split(' ');
-      let line1 = '';
-      let line2 = '';
-      for (const w of words) {
-        if ((line1 + ' ' + w).trim().length <= LABEL_CHARS) {
-          line1 = (line1 + ' ' + w).trim();
-        } else if ((line2 + ' ' + w).trim().length <= LABEL_CHARS) {
-          line2 = (line2 + ' ' + w).trim();
-        } else if (!line2) {
-          line2 = w.slice(0, LABEL_CHARS - 2) + '…';
-          break;
-        }
-      }
-      const twoLines = line2.length > 0;
-      const nameY1 = twoLines ? y + 12 : y + 16;
-      const nameY2 = y + 26;
-      const typeY = twoLines ? y + 43 : y + 35;
-      const idY = twoLines ? y + 59 : y + 55;
       const typeLabel = n.data.type ?? '';
-      const idText = String(n.data.id);
+      const idText = displayGoalId(n.data);
+      const specs = layoutCenteredEntityText({
+        boxX: x,
+        boxY: y,
+        boxWidth: n.width,
+        boxHeight: n.height,
+        name: labelText,
+        type: typeLabel || undefined,
+        id: idText,
+        nameMaxLines: 2,
+        idMaxLines: 1,
+      });
+      const textSvg = emitCenteredTextSvg(specs, x + n.width / 2, escXml);
       return `<g>
   <rect class="diagram-node level-${level}" x="${x}" y="${y}" width="${n.width}" height="${n.height}" rx="${ENTITY_NODE_RX}"/>
-  <text class="text-primary" x="${x + n.width / 2}" y="${nameY1}" text-anchor="middle" dominant-baseline="central">${escXml(line1)}</text>${twoLines ? `
-  <text class="text-primary" x="${x + n.width / 2}" y="${nameY2}" text-anchor="middle" dominant-baseline="central">${escXml(line2)}</text>` : ''}${typeLabel ? `
-  <text class="text-secondary" x="${x + n.width / 2}" y="${typeY}" text-anchor="middle" dominant-baseline="central">${escXml(typeLabel)}</text>` : ''}
-  <text class="text-id" x="${x + n.width / 2}" y="${idY}" text-anchor="middle" dominant-baseline="central">${escXml(idText)}</text>
+  ${textSvg}
 </g>`;
     })
     .join('\n');