@zombie-mermaid/svg-renderer 3.0.0 → 3.2.0

package/src/class/renderer.ts

@@ -16,6 +16,7 @@ import {
   escapeXml as escapeXmlUtil,
   escapeAttr,
   safeHref,
+  f,
 } from '@zombie-mermaid/core'
 import { withDataSrc } from '../renderer.ts'
 import {
@@ -161,13 +162,14 @@ function relationshipMarkerDefs(): string {
     `  <marker id="cls-inherit" markerWidth="12" markerHeight="10" refX="12" refY="5" orient="auto-start-reverse">` +
     `\n    <polygon points="0 0, 12 5, 0 10" fill="var(--bg)" stroke="var(--_arrow)" stroke-width="1.5" />` +
     `\n  </marker>` +
-    // Filled diamond (composition) — points at source
-    `\n  <marker id="cls-composition" markerWidth="12" markerHeight="10" refX="0" refY="5" orient="auto-start-reverse">` +
-    `\n    <polygon points="6 0, 12 5, 6 10, 0 5" fill="var(--_arrow)" stroke="var(--_arrow)" stroke-width="1" />` +
+    // Filled diamond (composition) — tip sits on the endpoint, body runs along the line;
+    // the polygon is inset so the stroke isn't clipped by the marker viewport
+    `\n  <marker id="cls-composition" markerWidth="18" markerHeight="14" refX="16.5" refY="7" orient="auto-start-reverse">` +
+    `\n    <polygon points="9 1.5, 16.5 7, 9 12.5, 1.5 7" fill="var(--_arrow)" stroke="var(--_arrow)" stroke-width="1" />` +
     `\n  </marker>` +
-    // Hollow diamond (aggregation) — points at source
-    `\n  <marker id="cls-aggregation" markerWidth="12" markerHeight="10" refX="0" refY="5" orient="auto-start-reverse">` +
-    `\n    <polygon points="6 0, 12 5, 6 10, 0 5" fill="var(--bg)" stroke="var(--_arrow)" stroke-width="1.5" />` +
+    // Hollow diamond (aggregation) — tip sits on the endpoint, body runs along the line
+    `\n  <marker id="cls-aggregation" markerWidth="18" markerHeight="14" refX="16.5" refY="7" orient="auto-start-reverse">` +
+    `\n    <polygon points="9 1.5, 16.5 7, 9 12.5, 1.5 7" fill="var(--bg)" stroke="var(--_arrow)" stroke-width="1.5" />` +
     `\n  </marker>` +
     // Open arrow (association, dependency)
     `\n  <marker id="cls-arrow" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto-start-reverse">` +
@@ -230,20 +232,20 @@ function renderClassBox(
   // data-label: class name
   // data-annotation: stereotype (interface, abstract, etc.)
   const annotationAttr = cls.annotation
-    ? ` data-annotation="${escapeAttr(cls.annotation)}"`
+    ? f` data-annotation="${escapeAttr(cls.annotation)}"`
     : ''
   // A style class from `cssClass`/`class A name`/`:::name` is emitted onto
   // the group so external CSS can target it, after the same allowlist the
   // flowchart renderer applies.
   const safeClassName = sanitizeClassName(cls.className)
   const groupAttrs = [
-    `class="${safeClassName ? `class-node ${safeClassName}` : 'class-node'}"`,
-    `data-id="${escapeAttr(cls.id)}"`,
-    `data-label="${escapeAttr(cls.label)}"`,
+    f`class="${safeClassName ? f`class-node ${safeClassName}` : 'class-node'}"`,
+    f`data-id="${escapeAttr(cls.id)}"`,
+    f`data-label="${escapeAttr(cls.label)}"`,
   ]
   // `click ClassName call fn()` is parsed, never invoked, and never written
   // into the markup — see renderNode() in packages/svg-renderer/src/renderer.ts for the rationale.
-  parts.push(`<g ${groupAttrs.join(' ')}${annotationAttr}>`)
+  parts.push(f`<g ${groupAttrs.join(' ')}${annotationAttr}>`)
 
   // An href becomes a real SVG link, which needs no script to work.
   // `interactivity: 'none'` strips it — a link is meaningless in
@@ -251,28 +253,28 @@ function renderClassBox(
   const href = linksEnabled ? safeHref(interaction?.href) : undefined
   if (href) {
     const targetAttr = interaction?.target
-      ? ` target="${escapeAttr(interaction.target)}"`
+      ? f` target="${escapeAttr(interaction.target)}"`
       : ''
-    parts.push(`  <a href="${escapeAttr(href)}"${targetAttr}>`)
+    parts.push(f`  <a href="${escapeAttr(href)}"${targetAttr}>`)
   }
 
   if (linksEnabled && interaction?.tooltip) {
     // <title> is SVG's native tooltip — no script, no CSS. Gated by
     // linksEnabled alongside href above: both come from the same `click`
     // statement, and 'none' strips both.
-    parts.push(`  <title>${escapeXml(interaction.tooltip)}</title>`)
+    parts.push(f`  <title>${escapeXml(interaction.tooltip)}</title>`)
   }
 
   // Outer rectangle (full box)
   parts.push(
-    `  <rect x="${x}" y="${y}" width="${width}" height="${height}" ` +
-      `rx="0" ry="0" fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" />`,
+    f`  <rect x="${x}" y="${y}" width="${width}" height="${height}" ` +
+      f`rx="0" ry="0" fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" />`,
   )
 
   // Header background
   parts.push(
-    `  <rect x="${x}" y="${y}" width="${width}" height="${headerHeight}" ` +
-      `rx="0" ry="0" fill="${headerFill}" stroke="${stroke}" stroke-width="${strokeWidth}" />`,
+    f`  <rect x="${x}" y="${y}" width="${width}" height="${headerHeight}" ` +
+      f`rx="0" ry="0" fill="${headerFill}" stroke="${stroke}" stroke-width="${strokeWidth}" />`,
   )
 
   // Annotation (<<interface>>, <<abstract>>, etc.)
@@ -280,9 +282,9 @@ function renderClassBox(
   if (cls.annotation) {
     const annotY = y + 12
     parts.push(
-      `  <text x="${x + width / 2}" y="${annotY}" text-anchor="middle" dy="${TEXT_BASELINE_SHIFT}" ` +
-        `font-size="${CLS_FONT.annotationSize}" font-weight="${CLS_FONT.annotationWeight}" ` +
-        `font-style="italic" fill="${textColor ?? 'var(--_text-muted)'}">&lt;&lt;${escapeXml(cls.annotation)}&gt;&gt;</text>`,
+      f`  <text x="${x + width / 2}" y="${annotY}" text-anchor="middle" dy="${TEXT_BASELINE_SHIFT}" ` +
+        f`font-size="${CLS_FONT.annotationSize}" font-weight="${CLS_FONT.annotationWeight}" ` +
+        f`font-style="italic" fill="${textColor ?? 'var(--_text-muted)'}">&lt;&lt;${escapeXml(cls.annotation)}&gt;&gt;</text>`,
     )
     nameY = y + headerHeight / 2 + 6
   }
@@ -295,15 +297,15 @@ function renderClassBox(
         x + width / 2,
         nameY,
         fontSizes.nodeLabel,
-        `text-anchor="middle" font-size="${fontSizes.nodeLabel}" font-weight="700" fill="${textColor ?? 'var(--_text)'}"`,
+        f`text-anchor="middle" font-size="${fontSizes.nodeLabel}" font-weight="700" fill="${textColor ?? 'var(--_text)'}"`,
       ),
   )
 
   // Divider line between header and attributes
   const attrTop = y + headerHeight
   parts.push(
-    `  <line x1="${x}" y1="${attrTop}" x2="${x + width}" y2="${attrTop}" ` +
-      `stroke="${stroke}" stroke-width="${STROKE_WIDTHS.innerBox}" />`,
+    f`  <line x1="${x}" y1="${attrTop}" x2="${x + width}" y2="${attrTop}" ` +
+      f`stroke="${stroke}" stroke-width="${STROKE_WIDTHS.innerBox}" />`,
   )
 
   // Attributes
@@ -317,8 +319,8 @@ function renderClassBox(
   // Divider line between attributes and methods
   const methodTop = attrTop + attrHeight
   parts.push(
-    `  <line x1="${x}" y1="${methodTop}" x2="${x + width}" y2="${methodTop}" ` +
-      `stroke="${stroke}" stroke-width="${STROKE_WIDTHS.innerBox}" />`,
+    f`  <line x1="${x}" y1="${methodTop}" x2="${x + width}" y2="${methodTop}" ` +
+      f`stroke="${stroke}" stroke-width="${STROKE_WIDTHS.innerBox}" />`,
   )
 
   // Methods
@@ -366,27 +368,27 @@ function renderMember(
 
   if (member.visibility) {
     spans.push(
-      `<tspan fill="${faint}">${escapeXml(member.visibility)} </tspan>`,
+      f`<tspan fill="${faint}">${escapeXml(member.visibility)} </tspan>`,
     )
   }
 
   // Add parentheses for methods to distinguish from attributes, including parameters if present
   const displayName = member.isMethod
-    ? `${member.name}(${member.params || ''})`
+    ? f`${member.name}(${member.params || ''})`
     : member.name
   // False positive: displayName is passed through escapeXml() (see packages/core/src/multiline-utils.ts),
   // which escapes &, <, >, ", ' before interpolation, so this is not raw/unescaped HTML.
-  spans.push(`<tspan fill="${secondary}">${escapeXml(displayName)}</tspan>`) // nosemgrep: javascript.express.security.injection.raw-html-format.raw-html-format
+  spans.push(f`<tspan fill="${secondary}">${escapeXml(displayName)}</tspan>`) // nosemgrep: javascript.express.security.injection.raw-html-format.raw-html-format
 
   if (member.type) {
-    spans.push(`<tspan fill="${faint}">: </tspan>`)
-    spans.push(`<tspan fill="${muted}">${escapeXml(member.type)}</tspan>`)
+    spans.push(f`<tspan fill="${faint}">: </tspan>`)
+    spans.push(f`<tspan fill="${muted}">${escapeXml(member.type)}</tspan>`)
   }
 
   return (
-    `<text x="${x}" y="${y}" class="mono" dy="${TEXT_BASELINE_SHIFT}" ` +
-    `font-size="${CLS_FONT.memberSize}" font-weight="${CLS_FONT.memberWeight}"${fontStyle}${decoration}>` +
-    `${spans.join('')}</text>`
+    f`<text x="${x}" y="${y}" class="mono" dy="${TEXT_BASELINE_SHIFT}" ` +
+    f`font-size="${CLS_FONT.memberSize}" font-weight="${CLS_FONT.memberWeight}"${fontStyle}${decoration}>` +
+    f`${spans.join('')}</text>`
   )
 }
 
@@ -408,33 +410,33 @@ function renderNote(note: PositionedClassNote, fontSizes: FontSizes): string {
   const { x, y, width: w, height: h } = note
   const forAttr =
     note.forClass !== undefined
-      ? ` data-for="${escapeAttr(note.forClass)}"`
+      ? f` data-for="${escapeAttr(note.forClass)}"`
       : ''
 
   // Note body: (x,y) → (x+w-fold,y) → (x+w,y+fold) → (x+w,y+h) → (x,y+h)
   const bodyPoints = [
-    `${x},${y}`,
-    `${x + w - NOTE_FOLD},${y}`,
-    `${x + w},${y + NOTE_FOLD}`,
-    `${x + w},${y + h}`,
-    `${x},${y + h}`,
+    f`${x},${y}`,
+    f`${x + w - NOTE_FOLD},${y}`,
+    f`${x + w},${y + NOTE_FOLD}`,
+    f`${x + w},${y + h}`,
+    f`${x},${y + h}`,
   ].join(' ')
   const foldPoints =
-    `${x + w - NOTE_FOLD},${y} ${x + w},${y + NOTE_FOLD} ` +
-    `${x + w - NOTE_FOLD},${y + NOTE_FOLD}`
+    f`${x + w - NOTE_FOLD},${y} ${x + w},${y + NOTE_FOLD} ` +
+    f`${x + w - NOTE_FOLD},${y + NOTE_FOLD}`
 
   return (
-    `<g class="class-note"${forAttr}>` +
-    `\n  <polygon points="${bodyPoints}" ` +
-    `fill="var(--bg)" stroke="var(--_node-stroke)" stroke-width="${STROKE_WIDTHS.innerBox}" />` +
-    `\n  <polygon points="${foldPoints}" ` +
-    `fill="var(--_inner-stroke)" stroke="var(--_node-stroke)" stroke-width="${STROKE_WIDTHS.innerBox}" />` +
-    `\n  ${renderMultilineText(
+    f`<g class="class-note"${forAttr}>` +
+    f`\n  <polygon points="${bodyPoints}" ` +
+    f`fill="var(--bg)" stroke="var(--_node-stroke)" stroke-width="${STROKE_WIDTHS.innerBox}" />` +
+    f`\n  <polygon points="${foldPoints}" ` +
+    f`fill="var(--_inner-stroke)" stroke="var(--_node-stroke)" stroke-width="${STROKE_WIDTHS.innerBox}" />` +
+    f`\n  ${renderMultilineText(
       note.text,
       x + w / 2,
       y + h / 2,
       fontSizes.edgeLabel,
-      `font-size="${fontSizes.edgeLabel}" text-anchor="middle" font-weight="${FONT_WEIGHTS.edgeLabel}" fill="var(--_text-muted)"`,
+      f`font-size="${fontSizes.edgeLabel}" text-anchor="middle" font-weight="${FONT_WEIGHTS.edgeLabel}" fill="var(--_text-muted)"`,
     )}` +
     `\n</g>`
   )
@@ -446,14 +448,14 @@ function renderNote(note: PositionedClassNote, fontSizes: FontSizes): string {
  */
 function renderNoteLink(note: PositionedClassNote): string {
   if (!note.linkPoints || note.linkPoints.length < 2) return ''
-  const pathData = note.linkPoints.map((p) => `${p.x},${p.y}`).join(' ')
+  const pathData = note.linkPoints.map((p) => f`${p.x},${p.y}`).join(' ')
   const forAttr =
     note.forClass !== undefined
-      ? ` data-for="${escapeAttr(note.forClass)}"`
+      ? f` data-for="${escapeAttr(note.forClass)}"`
       : ''
   return (
-    `<polyline class="class-note-link"${forAttr} points="${pathData}" ` +
-    `fill="none" stroke="var(--_line)" stroke-width="${STROKE_WIDTHS.connector}" stroke-dasharray="2 3" />`
+    f`<polyline class="class-note-link"${forAttr} points="${pathData}" ` +
+    f`fill="none" stroke="var(--_line)" stroke-width="${STROKE_WIDTHS.connector}" stroke-dasharray="2 3" />`
   )
 }
 
@@ -468,7 +470,7 @@ function renderNoteLink(note: PositionedClassNote): string {
 function renderRelationship(rel: PositionedClassRelationship): string {
   if (rel.points.length < 2) return ''
 
-  const pathData = rel.points.map((p) => `${p.x},${p.y}`).join(' ')
+  const pathData = rel.points.map((p) => f`${p.x},${p.y}`).join(' ')
   const isDashed = rel.type === 'dependency' || rel.type === 'realization'
   const dashArray = isDashed ? ' stroke-dasharray="6 4"' : ''
 
@@ -484,24 +486,26 @@ function renderRelationship(rel: PositionedClassRelationship): string {
   // - data-label: relationship label if present
   const dataAttrs = [
     'class="class-relationship"',
-    `data-from="${escapeAttr(rel.from)}"`,
-    `data-to="${escapeAttr(rel.to)}"`,
-    `data-type="${rel.type}"`,
-    `data-marker-at="${rel.markerAt}"`,
+    f`data-from="${escapeAttr(rel.from)}"`,
+    f`data-to="${escapeAttr(rel.to)}"`,
+    f`data-type="${rel.type}"`,
+    f`data-marker-at="${rel.markerAt}"`,
   ]
   if (rel.label) {
-    dataAttrs.push(`data-label="${escapeAttr(rel.label)}"`)
+    dataAttrs.push(f`data-label="${escapeAttr(rel.label)}"`)
   }
   if (rel.fromCardinality) {
-    dataAttrs.push(`data-from-cardinality="${escapeAttr(rel.fromCardinality)}"`)
+    dataAttrs.push(
+      f`data-from-cardinality="${escapeAttr(rel.fromCardinality)}"`,
+    )
   }
   if (rel.toCardinality) {
-    dataAttrs.push(`data-to-cardinality="${escapeAttr(rel.toCardinality)}"`)
+    dataAttrs.push(f`data-to-cardinality="${escapeAttr(rel.toCardinality)}"`)
   }
 
   return (
-    `<polyline ${dataAttrs.join(' ')} points="${pathData}" fill="none" stroke="var(--_line)" ` +
-    `stroke-width="${STROKE_WIDTHS.connector}"${dashArray}${markers} />`
+    f`<polyline ${dataAttrs.join(' ')} points="${pathData}" fill="none" stroke="var(--_line)" ` +
+    f`stroke-width="${STROKE_WIDTHS.connector}"${dashArray}${markers} />`
   )
 }
 
@@ -519,9 +523,9 @@ function getRelationshipMarkers(
   if (!markerId) return ''
 
   if (markerAt === 'from') {
-    return ` marker-start="url(#${markerId})"`
+    return f` marker-start="url(#${markerId})"`
   } else {
-    return ` marker-end="url(#${markerId})"`
+    return f` marker-end="url(#${markerId})"`
   }
 }
 
@@ -562,7 +566,7 @@ function renderRelationshipLabels(
         pos.x,
         pos.y - 8,
         fontSizes.edgeLabel,
-        `font-size="${fontSizes.edgeLabel}" text-anchor="middle" font-weight="${FONT_WEIGHTS.edgeLabel}" fill="var(--_text-muted)"`,
+        f`font-size="${fontSizes.edgeLabel}" text-anchor="middle" font-weight="${FONT_WEIGHTS.edgeLabel}" fill="var(--_text-muted)"`,
       ),
     )
   }
@@ -578,7 +582,7 @@ function renderRelationshipLabels(
         p.x + offset.x,
         p.y + offset.y,
         fontSizes.edgeLabel,
-        `font-size="${fontSizes.edgeLabel}" text-anchor="middle" font-weight="${FONT_WEIGHTS.edgeLabel}" fill="var(--_text-muted)"`,
+        f`font-size="${fontSizes.edgeLabel}" text-anchor="middle" font-weight="${FONT_WEIGHTS.edgeLabel}" fill="var(--_text-muted)"`,
       ),
     )
   }
@@ -594,7 +598,7 @@ function renderRelationshipLabels(
         p.x + offset.x,
         p.y + offset.y,
         fontSizes.edgeLabel,
-        `font-size="${fontSizes.edgeLabel}" text-anchor="middle" font-weight="${FONT_WEIGHTS.edgeLabel}" fill="var(--_text-muted)"`,
+        f`font-size="${fontSizes.edgeLabel}" text-anchor="middle" font-weight="${FONT_WEIGHTS.edgeLabel}" fill="var(--_text-muted)"`,
       ),
     )
   }

package/src/edge-curves.ts

@@ -10,10 +10,11 @@
 // ============================================================================
 
 import type { Point, CurveStyle } from '@zombie-mermaid/core'
+import { f } from '@zombie-mermaid/core'
 
 /** `M x y` for the first point. */
 function moveTo(p: Point): string {
-  return `M ${p.x} ${p.y}`
+  return f`M ${p.x} ${p.y}`
 }
 
 /** Straight segments through every point — the historical default. */
@@ -22,7 +23,7 @@ function linearPath(points: Point[]): string {
     moveTo(points[0]!) +
     points
       .slice(1)
-      .map((p) => ` L ${p.x} ${p.y}`)
+      .map((p) => f` L ${p.x} ${p.y}`)
       .join('')
   )
 }
@@ -51,14 +52,14 @@ function basisPath(points: Point[]): string {
 
   /** One B-spline segment across three successive control points. */
   const segment = (p0: Point, p1: Point, p2: Point): string =>
-    ` C ${(2 * p0.x + p1.x) / 3} ${(2 * p0.y + p1.y) / 3},` +
-    ` ${(p0.x + 2 * p1.x) / 3} ${(p0.y + 2 * p1.y) / 3},` +
-    ` ${(p0.x + 4 * p1.x + p2.x) / 6} ${(p0.y + 4 * p1.y + p2.y) / 6}`
+    f` C ${(2 * p0.x + p1.x) / 3} ${(2 * p0.y + p1.y) / 3},` +
+    f` ${(p0.x + 2 * p1.x) / 3} ${(p0.y + 2 * p1.y) / 3},` +
+    f` ${(p0.x + 4 * p1.x + p2.x) / 6} ${(p0.y + 4 * p1.y + p2.y) / 6}`
 
   // Lead-in to the first knot, one sixth of the way along the opening leg.
   parts.push(
-    ` L ${(5 * points[0]!.x + points[1]!.x) / 6}` +
-      ` ${(5 * points[0]!.y + points[1]!.y) / 6}`,
+    f` L ${(5 * points[0]!.x + points[1]!.x) / 6}` +
+      f` ${(5 * points[0]!.y + points[1]!.y) / 6}`,
   )
 
   for (let i = 2; i < points.length; i++) {
@@ -67,7 +68,7 @@ function basisPath(points: Point[]): string {
 
   // d3 closes by feeding the last point twice, then drawing to it.
   parts.push(segment(points[points.length - 2]!, last, last))
-  parts.push(` L ${last.x} ${last.y}`)
+  parts.push(f` L ${last.x} ${last.y}`)
 
   return parts.join('')
 }
@@ -109,7 +110,7 @@ function naturalPath(points: Point[]): string {
     // A zero-length leg means duplicated routed points; there is no corner
     // to round, so pass straight through.
     if (inLen === 0 || outLen === 0) {
-      parts.push(` L ${corner.x} ${corner.y}`)
+      parts.push(f` L ${corner.x} ${corner.y}`)
       continue
     }
 
@@ -123,12 +124,12 @@ function naturalPath(points: Point[]): string {
     const endY = corner.y + ((next.y - corner.y) / outLen) * radius
 
     // Straight up to the fillet, then a quadratic through the corner.
-    parts.push(` L ${startX} ${startY}`)
-    parts.push(` Q ${corner.x} ${corner.y}, ${endX} ${endY}`)
+    parts.push(f` L ${startX} ${startY}`)
+    parts.push(f` Q ${corner.x} ${corner.y}, ${endX} ${endY}`)
   }
 
   const last = points[points.length - 1]!
-  parts.push(` L ${last.x} ${last.y}`)
+  parts.push(f` L ${last.x} ${last.y}`)
 
   return parts.join('')
 }
@@ -155,17 +156,17 @@ function stepPath(points: Point[], where: 'mid' | 'before' | 'after'): string {
     const b = points[i + 1]!
 
     if (i === lastIndex - 1) {
-      parts.push(` L ${b.x} ${b.y}`)
+      parts.push(f` L ${b.x} ${b.y}`)
       break
     }
 
     if (where === 'before') {
-      parts.push(` L ${a.x} ${b.y} L ${b.x} ${b.y}`)
+      parts.push(f` L ${a.x} ${b.y} L ${b.x} ${b.y}`)
     } else if (where === 'after') {
-      parts.push(` L ${b.x} ${a.y} L ${b.x} ${b.y}`)
+      parts.push(f` L ${b.x} ${a.y} L ${b.x} ${b.y}`)
     } else {
       const midY = (a.y + b.y) / 2
-      parts.push(` L ${a.x} ${midY} L ${b.x} ${midY} L ${b.x} ${b.y}`)
+      parts.push(f` L ${a.x} ${midY} L ${b.x} ${midY} L ${b.x} ${b.y}`)
     }
   }