@zombie-mermaid/svg-renderer 3.2.0 → 4.0.0

package/src/c4/layout.ts

@@ -17,7 +17,9 @@ import type { Point, RenderOptions } from '@zombie-mermaid/core'
 import {
   C4,
   C4_TEXT_WIDTH,
+  c4CylinderCap,
   c4PersonGeometry,
+  c4QueueCap,
   c4ShapeSize,
   c4TextWidth,
   wrapToWidth,
@@ -129,9 +131,9 @@ interface MeasuredElement extends Placed {
 }
 
 function measureElement(el: C4Element): MeasuredElement {
-  const nameLines = wrapToWidth(el.label, C4_TEXT_WIDTH, C4.nameSize, 700)
+  const nameLines = wrapToWidth(el.label, C4_TEXT_WIDTH, C4.nameSize)
   const descriptionLines = el.description
-    ? wrapToWidth(el.description, C4_TEXT_WIDTH, C4.descrSize, 400)
+    ? wrapToWidth(el.description, C4_TEXT_WIDTH, C4.descrSize)
     : []
   const textWidth = Math.max(
     ...nameLines.map((l) => c4TextWidth(l, C4.nameSize, 700)),
@@ -313,55 +315,150 @@ function rectIntersect(box: Placed, toward: Point): Point {
 }
 
 /**
- * Where the line from a person's centre toward `toward` leaves the figure,
- * which is a round head over a pill, not the box around both (Mermaid clips
- * a relationship against what is drawn).
+ * Where a line from the centre of a person toward `toward` leaves the figure.
+ * Mermaid clips against the polygon it builds for the person (a round head
+ * over a rounded body, 24 points on the head and 12 on each body corner), so
+ * this builds the same polygon and returns the crossing nearest `toward`.
  */
 function personIntersect(box: Placed, toward: Point): Point {
-  const g = c4PersonGeometry(box.width)
+  const g = c4PersonGeometry(box.width, box.height)
   const cx = box.x + box.width / 2
   const cy = box.y + box.height / 2
-  const headY = box.y + g.headRadius
-  const pillTop = box.y + g.pillTop
-  const pillBottom = box.y + box.height
-  const inside = (x: number, y: number): boolean => {
-    if (Math.hypot(x - cx, y - headY) <= g.headRadius) return true
-    if (y < pillTop || y > pillBottom) return false
-    // Round the pill's ends: each is a circle of radius `rx` (clamped).
-    const r = Math.min(g.rx, (pillBottom - pillTop) / 2)
-    const left = box.x + r
-    const right = box.x + box.width - r
-    const nearY = Math.min(Math.max(y, pillTop + r), pillBottom - r)
-    const nearX = Math.min(Math.max(x, left), right)
-    return (
-      x >= box.x &&
-      x <= box.x + box.width &&
-      Math.hypot(x - nearX, y - nearY) <= r
-    )
-  }
-  const len = Math.hypot(toward.x - cx, toward.y - cy)
-  if (len === 0 || !inside(cx, cy)) return rectIntersect(box, toward)
-  const ux = (toward.x - cx) / len
-  const uy = (toward.y - cy) / len
-  const at = (t: number): boolean => inside(cx + ux * t, cy + uy * t)
-  let lo = 0
-  let hi = 0.5
-  while (at(hi) && hi < box.width + box.height) {
-    lo = hi
-    hi += 0.5
-  }
-  for (let i = 0; i < 30; i++) {
-    const mid = (lo + hi) / 2
-    if (at(mid)) lo = mid
-    else hi = mid
-  }
-  return { x: cx + ux * lo, y: cy + uy * lo }
+  const w = box.width
+  const h = box.height
+  const headCentre = -h / 2 + g.headRadius
+  const bodyTop = -h / 2 + g.pillTop
+  const br = g.rx
+  // `n` points on the circle at (ox, oy), sweeping from angle `from` to `to`
+  // in degrees, with Mermaid's sign convention (`generateCirclePoints`).
+  const arc = (
+    ox: number,
+    oy: number,
+    r: number,
+    n: number,
+    from: number,
+    to: number,
+  ): Point[] =>
+    Array.from({ length: n }, (_, i) => {
+      const a = ((from + (i * (to - from)) / (n - 1)) * Math.PI) / 180
+      return { x: ox - r * Math.cos(a), y: oy - r * Math.sin(a) }
+    })
+  // Where the head meets the body's top edge, below the head's centre.
+  const phi =
+    (Math.asin(Math.min(1, (bodyTop - headCentre) / g.headRadius)) * 180) /
+    Math.PI
+  const outline: Point[] = [
+    ...arc(0, headCentre, g.headRadius, 24, 180 + phi, -phi),
+    ...arc(-w / 2 + br, bodyTop + br, br, 12, 90, 0),
+    ...arc(-w / 2 + br, h / 2 - br, br, 12, 360, 270),
+    ...arc(w / 2 - br, h / 2 - br, br, 12, 270, 180),
+    ...arc(w / 2 - br, bodyTop + br, br, 12, 180, 90),
+  ]
+  return nearestCrossing(
+    { x: cx, y: cy },
+    toward,
+    outline.map((p) => ({ x: cx + p.x, y: cy + p.y })),
+  )
+}
+
+/**
+ * The crossing of segment `from`-`toward` with an edge `q1`-`q2`, as Mermaid's
+ * (dagre's) `intersectLine` computes it: it adds half the determinant before
+ * dividing, which rounds the result by up to half a pixel.
+ */
+function lineCrossing(
+  from: Point,
+  toward: Point,
+  q1: Point,
+  q2: Point,
+): Point | undefined {
+  const a1 = toward.y - from.y
+  const b1 = from.x - toward.x
+  const c1 = toward.x * from.y - from.x * toward.y
+  const r3 = a1 * q1.x + b1 * q1.y + c1
+  const r4 = a1 * q2.x + b1 * q2.y + c1
+  if (r3 !== 0 && r4 !== 0 && r3 * r4 > 0) return undefined
+  const a2 = q2.y - q1.y
+  const b2 = q1.x - q2.x
+  const c2 = q2.x * q1.y - q1.x * q2.y
+  const r1 = a2 * from.x + b2 * from.y + c2
+  const r2 = a2 * toward.x + b2 * toward.y + c2
+  if (r1 !== 0 && r2 !== 0 && r1 * r2 > 0) return undefined
+  const denom = a1 * b2 - a2 * b1
+  if (denom === 0) return undefined
+  const offset = Math.abs(denom / 2)
+  let num = b1 * c2 - b2 * c1
+  const x = num < 0 ? (num - offset) / denom : (num + offset) / denom
+  num = a2 * c1 - a1 * c2
+  const y = num < 0 ? (num - offset) / denom : (num + offset) / denom
+  return { x, y }
+}
+
+/** The crossing of segment `from`-`toward` with the polygon nearest `toward`. */
+function nearestCrossing(from: Point, toward: Point, poly: Point[]): Point {
+  let best: Point | undefined
+  let bestDist = Infinity
+  poly.forEach((p, i) => {
+    const hit = lineCrossing(from, toward, p, poly[(i + 1) % poly.length]!)
+    if (!hit) return
+    const d = Math.hypot(hit.x - toward.x, hit.y - toward.y)
+    if (d < bestDist) {
+      best = hit
+      bestDist = d
+    }
+  })
+  return best ?? from
+}
+
+/** Slack for deciding that a point sits exactly on a box edge. */
+const EDGE = 1e-6
+
+/**
+ * A cylinder (`SystemDb`, `ContainerDb`) clips like Mermaid's: the point on
+ * the bounding rectangle, then moved along the curve of the top or bottom cap
+ * where the line meets a cap rather than the straight side.
+ */
+function cylinderIntersect(box: Placed, toward: Point): Point {
+  const pos = rectIntersect(box, toward)
+  const cx = box.x + box.width / 2
+  const cy = box.y + box.height / 2
+  const { rx, ry } = c4CylinderCap(box.width)
+  const x = pos.x - cx
+  const onCap =
+    Math.abs(x) < box.width / 2 - EDGE ||
+    (Math.abs(Math.abs(x) - box.width / 2) <= EDGE &&
+      Math.abs(pos.y - cy) > box.height / 2 - ry)
+  if (rx === 0 || !onCap) return pos
+  const under = ry * ry * (1 - (x * x) / (rx * rx))
+  let drop = ry - (under > 0 ? Math.sqrt(under) : under)
+  if (toward.y - cy > 0) drop = -drop
+  return { x: pos.x, y: pos.y + drop }
+}
+
+/** The same for a queue (`SystemQueue`, `ContainerQueue`), a cylinder on its side. */
+function queueIntersect(box: Placed, toward: Point): Point {
+  const pos = rectIntersect(box, toward)
+  const cx = box.x + box.width / 2
+  const cy = box.y + box.height / 2
+  const { rx, ry } = c4QueueCap(box.height)
+  const y = pos.y - cy
+  const onCap =
+    Math.abs(y) < box.height / 2 - EDGE ||
+    (Math.abs(Math.abs(y) - box.height / 2) <= EDGE &&
+      Math.abs(pos.x - cx) > box.width / 2 - rx)
+  if (ry === 0 || !onCap) return pos
+  const under = rx * rx * (1 - (y * y) / (ry * ry))
+  let drop = rx - Math.sqrt(Math.abs(under))
+  if (toward.x - cx > 0) drop = -drop
+  return { x: pos.x + drop, y: pos.y }
 }
 
 function leave(box: Placed, toward: Point): Point {
-  return (box as Partial<MeasuredElement>).el?.kind === 'person'
-    ? personIntersect(box, toward)
-    : rectIntersect(box, toward)
+  const el = (box as Partial<MeasuredElement>).el
+  if (el?.kind === 'person') return personIntersect(box, toward)
+  if (el?.shape === 'db') return cylinderIntersect(box, toward)
+  if (el?.shape === 'queue') return queueIntersect(box, toward)
+  return rectIntersect(box, toward)
 }
 
 const centre = (b: Placed): Point => ({
@@ -416,6 +513,90 @@ function routeRelationship(
   return out
 }
 
+/** A text line's box: centre x, centre y, width and height. */
+interface TextBox {
+  cx: number
+  cy: number
+  w: number
+  h: number
+}
+
+/** Clear space kept between a label and a shape or another label. */
+const LABEL_CLEARANCE = 2
+/** Extra space kept between a label and a shape, for the arrowhead. */
+const SHAPE_CLEARANCE = 6
+/** How far along the chord each trial position is from the last. */
+const LABEL_STEP = 2
+
+/** The boxes a relationship's label lines occupy, as the renderer draws them. */
+function labelBoxes(rel: PositionedC4Relationship, dx: number): TextBox[] {
+  const pos = rel.labelPosition
+  if (!pos) return []
+  return c4RelLabelLines(rel).map((line, i, all) => {
+    const isTech = rel.technology !== undefined && i === all.length - 1
+    return {
+      cx:
+        (isTech && rel.technologyX !== undefined ? rel.technologyX : pos.x) +
+        dx,
+      cy: pos.y + (i === 0 ? 0 : C4.messageSize + 5),
+      w: c4TextWidth(line, C4.messageSize, 400),
+      h: C4.messageSize,
+    }
+  })
+}
+
+const boxesOverlap = (a: TextBox, b: TextBox): boolean =>
+  Math.abs(a.cx - b.cx) < (a.w + b.w) / 2 + LABEL_CLEARANCE &&
+  Math.abs(a.cy - b.cy) < (a.h + b.h) / 2 + LABEL_CLEARANCE
+
+/**
+ * Mermaid starts a label at the chord's midpoint, so a label can land on a
+ * shape the line passes beside or through (#1290). Slide it along the chord,
+ * nearest the midpoint first, to the first spot clear of every shape and of
+ * the labels already placed; if there is none, leave it where Mermaid does.
+ */
+function clearLabel(
+  rel: PositionedC4Relationship,
+  shapes: TextBox[],
+  placed: TextBox[],
+): void {
+  const start = rel.points[0]
+  const end = rel.points[rel.points.length - 1]
+  if (!rel.labelPosition || !start || !end) return
+  const dx = end.x - start.x
+  const dy = end.y - start.y
+  const len = Math.hypot(dx, dy)
+  if (len === 0) return
+  const ux = dx / len
+  const uy = dy / len
+  const clear = (t: number): TextBox[] | undefined => {
+    const boxes = labelBoxes(rel, t * ux).map((b) => ({
+      ...b,
+      cy: b.cy + t * uy,
+    }))
+    const hit = boxes.some((b) =>
+      [...shapes, ...placed].some((o) => boxesOverlap(b, o)),
+    )
+    return hit ? undefined : boxes
+  }
+  for (let t = 0; t <= len / 2; t += LABEL_STEP) {
+    for (const s of t === 0 ? [1] : [1, -1]) {
+      const boxes = clear(s * t)
+      if (!boxes) continue
+      if (t !== 0) {
+        rel.labelPosition = {
+          x: rel.labelPosition.x + s * t * ux,
+          y: rel.labelPosition.y + s * t * uy,
+        }
+        if (rel.technologyX !== undefined) rel.technologyX += s * t * ux
+      }
+      placed.push(...boxes)
+      return
+    }
+  }
+  placed.push(...labelBoxes(rel, 0))
+}
+
 /** Lay out a parsed C4 diagram the way Mermaid's C4 renderer does. */
 export function layoutC4DiagramSync(
   diagram: C4Diagram,
@@ -466,6 +647,15 @@ export function layoutC4DiagramSync(
   const relationships = diagram.relationships.map((r, i) =>
     routeRelationship(r, i, boxes, shift),
   )
+  const shapeBoxes: TextBox[] = elements.map((e) => ({
+    cx: e.x + e.width / 2,
+    cy: e.y + e.height / 2,
+    // Padded so a label also keeps off the arrowhead that ends a line on it.
+    w: e.width + 2 * SHAPE_CLEARANCE,
+    h: e.height + 2 * SHAPE_CLEARANCE,
+  }))
+  const placedLabels: TextBox[] = []
+  for (const r of relationships) clearLabel(r, shapeBoxes, placedLabels)
 
   const width = layout.maxX + C4.diagramMarginX
   const height = layout.maxY + C4.diagramMarginY + titleExtra

package/src/c4/metrics.ts

@@ -1,5 +1,6 @@
 import type { C4Element } from '@zombie-mermaid/mermaid-parser'
 import { estimateTextWidth } from '../styles.ts'
+import { arialAdvance } from './arial-widths.ts'
 
 // ============================================================================
 // C4 SVG geometry, shared by the layout (which sizes and places shapes) and
@@ -9,8 +10,8 @@ import { estimateTextWidth } from '../styles.ts'
 // The numbers follow Mermaid 11.17's C4 renderer: its default `c4` config for
 // spacing, and sizes fitted to what it draws for each shape (a fixed 216px
 // width, 20px padding, a 14px name, a 0.75em type line and a 0.82em
-// description). Text is measured with this package's own width estimate
-// instead of the browser, so sizes agree with Mermaid's to within a few pixels.
+// description). Text is measured by summing Arial advances instead of in the
+// browser, which matches the recorded Mermaid diagrams to a fraction of a pixel.
 // ============================================================================
 
 export const C4 = {
@@ -42,9 +43,8 @@ export const C4 = {
   /** Each wrapped description line after the first (one `1.1em` row). */
   descrExtraLine: 12.48,
   /**
-   * Mermaid's text is about 8% narrower than this package's width estimate
-   * (its font is Open Sans, this package's is Inter); fitted on a measured
-   * name.
+   * For text outside printable ASCII, which has no Arial advance table:
+   * Arial is about 8% narrower than this package's width estimate (Inter).
    */
   textScale: 0.922,
   // Heights Mermaid measures for a boundary's heading text (fitted): the
@@ -60,14 +60,17 @@ export const C4 = {
   cornerRadius: 12,
   strokeWidth: 2,
   /**
-   * Person proportions at the standard width (Mermaid scales the pill's
-   * corners and head with the width, and the head's rise a little faster).
+   * Person proportions, from Mermaid's person shape: the pill's corner is
+   * 17.7% of the width (at most 45% of the pill's height), the head's radius
+   * is 23% of the width clamped to 16..56, and the head overlaps the pill by
+   * 27% of its radius.
    */
-  personRx: 38.232,
-  personHeadRadius: 49.68,
-  /** Distance from the top of a person to the top of its pill (under the head). */
-  personPillTop: 85.946,
-  personPillTopPerExtraWidth: 0.4,
+  personRx: 0.177,
+  personRxMaxOfHeight: 0.45,
+  personHeadRatio: 0.23,
+  personHeadMin: 16,
+  personHeadMax: 56,
+  personHeadOverlap: 0.27,
   /** Cylinder height lost where its text block meets the lower ellipse. */
   dbTrim: 3.91,
   /** Queue height over its text block. */
@@ -75,27 +78,27 @@ export const C4 = {
 } as const
 
 /**
- * Width the text of an element wraps to. Fitted to Mermaid: a 173px name
- * stays on one line and a 231px one wraps, and a 188px name stays on one.
+ * Width the text of an element wraps to: the shape's width less its padding
+ * on both sides (Mermaid's `c4LabelHelper`).
  */
-export const C4_TEXT_WIDTH = C4.width - C4.shapePadding
+export const C4_TEXT_WIDTH = C4.width - 2 * C4.shapePadding
 
-/** Greedy word wrap by estimated pixel width. */
+/**
+ * Greedy word wrap by estimated pixel width. Mermaid decides where to break
+ * with the text at regular weight and draws a name in bold afterwards, so a
+ * bold name can come out wider than the limit.
+ */
 export function wrapToWidth(
   text: string,
   maxWidth: number,
   fontSize: number,
-  weight: number,
 ): string[] {
   const lines: string[] = []
   for (const paragraph of text.split('\n')) {
     let cur = ''
     for (const word of paragraph.split(/\s+/).filter(Boolean)) {
       const next = cur ? `${cur} ${word}` : word
-      if (
-        cur &&
-        estimateTextWidth(next, fontSize, weight) * C4.textScale > maxWidth
-      ) {
+      if (cur && c4TextWidth(next, fontSize, 400) > maxWidth) {
         lines.push(cur)
         cur = word
       } else {
@@ -107,18 +110,29 @@ export function wrapToWidth(
   return lines
 }
 
-/** A person's pill corner, head radius and pill top for a box of this width. */
-export function c4PersonGeometry(width: number): {
+/**
+ * A person's pill corner, head radius and pill top for a box of this width
+ * (and, when known, this height: a short pill gets smaller corners).
+ */
+export function c4PersonGeometry(
+  width: number,
+  height?: number,
+): {
   rx: number
   headRadius: number
   pillTop: number
 } {
-  const scale = width / C4.width
+  const headRadius = Math.min(
+    Math.max(width * C4.personHeadRatio, C4.personHeadMin),
+    C4.personHeadMax,
+  )
+  // The head's diameter less the part that overlaps the pill.
+  const pillTop = headRadius * (2 - C4.personHeadOverlap)
+  const pillHeight = height === undefined ? Infinity : height - pillTop
   return {
-    rx: C4.personRx * scale,
-    headRadius: C4.personHeadRadius * scale,
-    pillTop:
-      C4.personPillTop + C4.personPillTopPerExtraWidth * (width - C4.width),
+    rx: Math.min(width * C4.personRx, pillHeight * C4.personRxMaxOfHeight),
+    headRadius,
+    pillTop,
   }
 }
 
@@ -158,13 +172,25 @@ export function c4QueueCap(height: number): { rx: number; ry: number } {
   return { rx: ry / (2.5 + height / 50), ry }
 }
 
-/** Estimated width of a text line as Mermaid would measure it. */
+/**
+ * Estimated width of a text line as Mermaid would measure it: sans-serif
+ * advances for printable ASCII, this package's own estimate (scaled to match)
+ * for anything else.
+ */
 export function c4TextWidth(
   text: string,
   fontSize: number,
   weight: number,
 ): number {
-  return estimateTextWidth(text, fontSize, weight) * C4.textScale
+  let width = 0
+  for (const ch of text) {
+    const em = arialAdvance(ch, weight >= 600)
+    width +=
+      em === undefined
+        ? estimateTextWidth(ch, fontSize, weight) * C4.textScale
+        : em * fontSize
+  }
+  return width
 }
 
 /**

package/src/c4/renderer.ts

@@ -252,7 +252,7 @@ function renderElement(el: PositionedC4Element): string {
 /** A rounded pill with a round head rising out of its top, as Mermaid draws a person. */
 function personShape(el: PositionedC4Element, pal: C4Palette): string[] {
   const { x, width: w } = el
-  const { rx, headRadius, pillTop: rise } = c4PersonGeometry(w)
+  const { rx, headRadius, pillTop: rise } = c4PersonGeometry(w, el.height)
   const y = el.y
   const cx = x + w / 2
   const pillTop = y + rise