@zombie-mermaid/svg-renderer 3.2.0 → 4.0.0

package/src/__tests__/class-visibility-markers-1237.test.ts

@@ -0,0 +1,27 @@
+import { describe, it, expect } from 'vitest'
+import { renderMermaidSVG } from '../../../../src/index.ts'
+
+// The marker used to share the faint colour and regular weight of the colon,
+// so `~` read as `-` at 1x (#1237). It now gets the member-name colour and a
+// bold weight, in its own tspan.
+describe('class diagram visibility markers (#1237)', () => {
+  const svg = renderMermaidSVG(`classDiagram
+  class User {
+    +String a
+    -String b
+    #String c
+    ~String d
+  }`)
+
+  for (const marker of ['+', '-', '#', '~']) {
+    it(`draws ${marker} in a bold, non-faint tspan`, () => {
+      expect(svg).toContain(
+        `<tspan fill="var(--_text-sec)" font-weight="700">${marker}</tspan>`,
+      )
+    })
+  }
+
+  it('keeps a faint spacer between marker and name', () => {
+    expect(svg).toContain('<tspan fill="var(--_text-faint)"> </tspan>')
+  })
+})

package/src/__tests__/er-attribute-right-padding-1262.test.ts

@@ -0,0 +1,47 @@
+import { describe, it, expect } from 'vitest'
+import { renderMermaidSVG } from '../../../../src/index.ts'
+
+// Mono glyphs advance 0.6em (6.6px at the 11px attribute size). Chromium
+// without subpixel glyph positioning (headless Linux) rounds each advance to a
+// whole pixel, so the worst-case drawn width is chars * ceil(6.6) = chars * 7.
+// A box sized from the unrounded estimate let the type run into the
+// right-aligned name (#1262, same cause as #1238).
+const WORST_CASE_ADVANCE = 7
+// The row text puts two spaces between type and name, so at worst-case
+// advances the gap must not shrink below two whole-pixel glyphs.
+const MIN_GAP_BETWEEN_TYPE_AND_NAME = 2 * WORST_CASE_ADVANCE
+
+const SRC = `erDiagram
+  CUSTOMER {
+    varchar(255) emailAddressPrimary
+    string name
+  }`
+
+const attr = (tag: string, name: string) => {
+  const start = tag.indexOf(`${name}="`) + name.length + 2
+  return Number(tag.slice(start, tag.indexOf('"', start)))
+}
+
+describe('ER attribute row padding (#1262)', () => {
+  const svg = renderMermaidSVG(SRC)
+  const texts = svg.split('<text')
+  const typeText = texts.find((t) => t.includes('varchar(255)')) as string
+  const nameText = texts.find((t) =>
+    t.includes('emailAddressPrimary'),
+  ) as string
+
+  it('finds the type and name text', () => {
+    expect(typeText).toBeDefined()
+    expect(nameText).toBeDefined()
+  })
+
+  it('leaves a gap between type and name even with whole-pixel glyph advances', () => {
+    const typeRight =
+      attr(typeText, 'x') + 'varchar(255)'.length * WORST_CASE_ADVANCE
+    const nameLeft =
+      attr(nameText, 'x') - 'emailAddressPrimary'.length * WORST_CASE_ADVANCE
+    expect(nameLeft - typeRight).toBeGreaterThanOrEqual(
+      MIN_GAP_BETWEEN_TYPE_AND_NAME,
+    )
+  })
+})

package/src/__tests__/er-default-direction-1250.test.ts

@@ -0,0 +1,69 @@
+/**
+ * #1250: an ER diagram with no `direction` statement laid out left-to-right,
+ * while official Mermaid lays it out top-to-bottom. The relationship line
+ * between two entities is the layout axis: vertical when stacked, horizontal
+ * when side by side.
+ */
+import { describe, it, expect } from 'vitest'
+import { renderMermaidSVG } from '@zombie-mermaid/svg-renderer'
+
+const SOURCE = 'ORDER ||--|{ LINE_ITEM : contains'
+
+function endpoints(svg: string): { dx: number; dy: number } {
+  const points = svg.match(/class="er-relationship"[^>]*points="([^"]+)"/)?.[1]
+  expect(points).toBeDefined()
+  const pts = (points ?? '').split(' ').map((p) => p.split(',').map(Number))
+  const first = pts[0] ?? []
+  const last = pts[pts.length - 1] ?? []
+  return {
+    dx: Math.abs((last[0] ?? 0) - (first[0] ?? 0)),
+    dy: Math.abs((last[1] ?? 0) - (first[1] ?? 0)),
+  }
+}
+
+describe('ER default layout direction (#1250)', () => {
+  it('stacks entities top-to-bottom when the source has no direction', () => {
+    const { dx, dy } = endpoints(renderMermaidSVG(`erDiagram\n  ${SOURCE}`))
+    expect(dy).toBeGreaterThan(dx)
+  })
+
+  it('still honors an explicit `direction LR` in the source', () => {
+    const { dx, dy } = endpoints(
+      renderMermaidSVG(`erDiagram\n  direction LR\n  ${SOURCE}`),
+    )
+    expect(dx).toBeGreaterThan(dy)
+  })
+
+  it('still honors the direction render option', () => {
+    const { dx, dy } = endpoints(
+      renderMermaidSVG(`erDiagram\n  ${SOURCE}`, { direction: 'LR' }),
+    )
+    expect(dx).toBeGreaterThan(dy)
+  })
+
+  it('keeps declaration order within a layer and centers a shared child', () => {
+    const svg = renderMermaidSVG(`erDiagram
+  CUSTOMER ||--o{ ORDER : places
+  ORDER ||--|{ LINE_ITEM : contains
+  PRODUCT ||--o{ LINE_ITEM : includes`)
+    const box = (id: string): { left: number; right: number } => {
+      const start = svg.indexOf(`data-id="${id}"`)
+      expect(start).toBeGreaterThanOrEqual(0)
+      const m = svg
+        .slice(start)
+        .match(/>\s*<rect x="([\d.]+)"[^>]*width="([\d.]+)"/)
+      expect(m).not.toBeNull()
+      const x = Number(m?.[1])
+      return { left: x, right: x + Number(m?.[2]) }
+    }
+    const order = box('ORDER')
+    const product = box('PRODUCT')
+    const lineItem = box('LINE_ITEM')
+    // ORDER is declared before PRODUCT, so it sits to its left.
+    expect(order.left).toBeLessThan(product.left)
+    // LINE_ITEM sits between its two parents, not off to one side.
+    const mid = (lineItem.left + lineItem.right) / 2
+    expect(mid).toBeGreaterThan(order.left)
+    expect(mid).toBeLessThan(product.right)
+  })
+})

package/src/__tests__/er-edge-label-contrast-1244.test.ts

@@ -0,0 +1,58 @@
+/**
+ * #1244: ER edge labels were drawn in `--_text-muted` (fg mixed at 40% into
+ * bg), ~2.4:1 on the default white background. Read the mix the renderer
+ * actually emits and assert it clears WCAG AA for text (4.5:1) against the
+ * default theme.
+ */
+import { describe, it, expect } from 'vitest'
+import { DEFAULTS, MIX } from '@zombie-mermaid/core'
+import { renderMermaidSVG } from '@zombie-mermaid/svg-renderer'
+
+type Rgb = readonly [number, number, number]
+
+function channels(hex: string): Rgb {
+  const c = (i: number) => parseInt(hex.slice(i, i + 2), 16)
+  return [c(1), c(3), c(5)]
+}
+
+function luminance([r, g, b]: Rgb): number {
+  const lin = (c: number) => {
+    const v = c / 255
+    return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4
+  }
+  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b)
+}
+
+/** Contrast of `color-mix(in srgb, fg pct%, bg)` against bg. */
+function mixContrast(pct: number): number {
+  const [fr, fgc, fb] = channels(DEFAULTS.fg)
+  const [br, bgc, bb] = channels(DEFAULTS.bg)
+  const mix = (f: number, b: number) => (f * pct + b * (100 - pct)) / 100
+  const mixed: Rgb = [mix(fr, br), mix(fgc, bgc), mix(fb, bb)]
+  const l1 = luminance(mixed)
+  const l2 = luminance([br, bgc, bb])
+  return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05)
+}
+
+describe('ER edge label contrast (#1244)', () => {
+  const svg = renderMermaidSVG('erDiagram\n  ORDER ||--|{ LINE_ITEM : contains')
+  const label = svg.match(/<text[^>]*>contains<\/text>/)?.[0] ?? ''
+  const percent = Number(
+    label.match(
+      /fill="color-mix\(in srgb, var\(--fg\) (\d+)%, var\(--bg\)\)"/,
+    )?.[1],
+  )
+
+  it('mixes the relationship label color from --fg and --bg', () => {
+    expect(Number.isFinite(percent)).toBe(true)
+  })
+
+  it('clears WCAG AA (4.5:1) with the default theme', () => {
+    expect(mixContrast(percent)).toBeGreaterThanOrEqual(4.5)
+  })
+
+  it('is darker than the shared muted/secondary text tokens that failed AA', () => {
+    expect(mixContrast(MIX.textMuted)).toBeLessThan(4.5)
+    expect(mixContrast(MIX.textSec)).toBeLessThan(4.5)
+  })
+})

package/src/__tests__/sequence-label-clearance-1242.test.ts

@@ -0,0 +1,162 @@
+/**
+ * #1242: lifelines were drawn straight through message labels and block
+ * titles, and a stick-figure actor's label sat on the first message arrow.
+ * The visual suite's tolerance can't see either, so assert the geometry.
+ */
+import { describe, it, expect } from 'vitest'
+import { parseSequenceDiagram } from '@zombie-mermaid/mermaid-parser'
+import { renderMermaidSVG } from '../../../../src/index.ts'
+import { layoutSequenceDiagram } from '../sequence/layout.ts'
+
+function lifelineSegments(
+  svg: string,
+  actor: string,
+): Array<{ x: number; y1: number; y2: number }> {
+  const out: Array<{ x: number; y1: number; y2: number }> = []
+  const re =
+    /<line class="lifeline" data-actor="([^"]*)" x1="([\d.]+)" y1="([\d.]+)" x2="[\d.]+" y2="([\d.]+)"/g
+  for (const m of svg.matchAll(re)) {
+    if (m[1] !== actor) continue
+    out.push({ x: Number(m[2]), y1: Number(m[3]), y2: Number(m[4]) })
+  }
+  return out
+}
+
+/** Centre y of the `<text>` whose content is `label`. */
+function textY(svg: string, label: string): number {
+  for (const m of svg.matchAll(
+    /<text [^>]*y="([\d.]+)"[^>]*>([^<]*)<\/text>/g,
+  )) {
+    if (m[2] === label) return Number(m[1])
+  }
+  return NaN
+}
+
+/** True when no lifeline segment of `actor` covers height `y`. */
+function lifelineClearAt(svg: string, actor: string, y: number): boolean {
+  return lifelineSegments(svg, actor).every((s) => y < s.y1 || y > s.y2)
+}
+
+describe('lifelines stay out of message labels (#1242)', () => {
+  const svg = renderMermaidSVG(`sequenceDiagram
+  participant A
+  participant B
+  participant C
+  A->>B: first
+  A->>C: label crossing the middle lifeline
+  A->>B: next`)
+
+  it('cuts the crossed lifeline around the label instead of running through it', () => {
+    const labelY = textY(svg, 'label crossing the middle lifeline')
+    expect(lifelineSegments(svg, 'B').length).toBeGreaterThan(1)
+    expect(lifelineClearAt(svg, 'B', labelY)).toBe(true)
+  })
+
+  it('leaves a lifeline whole where no label crosses it', () => {
+    expect(lifelineSegments(svg, 'A')).toHaveLength(1)
+  })
+
+  it('cuts lifelines around a block title tab', () => {
+    const blockSvg = renderMermaidSVG(`sequenceDiagram
+  participant A
+  participant B
+  A->>B: hi
+  alt Multiple panels
+    B->>A: yes
+  end`)
+    // The tab sits at the block's top-left; the lifeline under it is cut.
+    const rect = blockSvg.match(
+      /<g class="block"[^>]*>\s*<rect x="([\d.]+)" y="([\d.]+)"/,
+    )
+    const blockY = Number(rect?.[2])
+    expect(lifelineSegments(blockSvg, 'A').length).toBeGreaterThan(1)
+    expect(lifelineClearAt(blockSvg, 'A', blockY + 9)).toBe(true)
+  })
+
+  it('cuts a lifeline beside a self-message label', () => {
+    const selfSvg = renderMermaidSVG(`sequenceDiagram
+  participant A
+  participant B
+  A->>A: a long self message label crossing B
+  A->>B: after`)
+    const y = textY(selfSvg, 'a long self message label crossing B')
+    expect(lifelineSegments(selfSvg, 'B').length).toBeGreaterThan(1)
+    expect(lifelineClearAt(selfSvg, 'B', y)).toBe(true)
+  })
+
+  it('cuts lifelines around a bare divider label', () => {
+    const divSvg = renderMermaidSVG(`sequenceDiagram
+  participant A
+  participant B
+  alt first
+    A->>B: x
+  else other case
+    B->>A: y
+  end`)
+    const y = textY(divSvg, '[other case]')
+    expect(lifelineSegments(divSvg, 'A').length).toBeGreaterThan(1)
+    expect(lifelineClearAt(divSvg, 'A', y)).toBe(true)
+  })
+
+  it('ignores unlabeled blocks and dividers', () => {
+    const bareSvg = renderMermaidSVG(`sequenceDiagram
+  participant A
+  participant B
+  loop
+    B->>A: ping
+  else
+    A->>B: pong
+  end`)
+    expect(lifelineSegments(bareSvg, 'A').length).toBeGreaterThan(0)
+    expect(lifelineSegments(bareSvg, 'B').length).toBeGreaterThan(0)
+  })
+
+  it('never drops a lifeline entirely, even under a label taller than it', () => {
+    const lines = Array.from({ length: 8 }, (_, i) => `l${i}`).join('<br/>')
+    const tall = renderMermaidSVG(`sequenceDiagram
+  participant A
+  participant B
+  participant C
+  A->>C: ${lines}`)
+    // The label spans B's whole lifeline; B keeps one uncut line.
+    expect(lifelineSegments(tall, 'B')).toHaveLength(1)
+  })
+})
+
+describe('stick-figure actor label clears the first message (#1242)', () => {
+  const src = `sequenceDiagram
+  actor U as User
+  participant S as System
+  U->>S: Click button`
+  const svg = renderMermaidSVG(src)
+  const layout = layoutSequenceDiagram(
+    parseSequenceDiagram(
+      src
+        .split('\n')
+        .slice(1)
+        .map((text, line) => ({ text: text.trim(), line })),
+    ),
+  )
+
+  it('starts the actor lifeline below its label', () => {
+    const [seg] = lifelineSegments(svg, 'U')
+    expect(seg!.y1).toBeGreaterThan(textY(svg, 'User') + 6)
+  })
+
+  it('places the first message arrow clear of the label', () => {
+    const first = layout.messages[0]!
+    // label is 13px-ish text centred at textY; arrow must be well below it
+    expect(first.y).toBeGreaterThan(textY(svg, 'User') + 16)
+  })
+
+  it('keeps the original compact header when no stick figure is used', () => {
+    const plain = layoutSequenceDiagram(
+      parseSequenceDiagram([
+        { text: 'participant A', line: 0 },
+        { text: 'participant B', line: 1 },
+        { text: 'A->>B: hi', line: 2 },
+      ]),
+    )
+    expect(plain.messages[0]!.y - (plain.actors[0]!.y + 40)).toBe(20)
+  })
+})

package/src/__tests__/sequence-nested-activation-1241.test.ts

@@ -0,0 +1,37 @@
+import { describe, it, expect } from 'vitest'
+import { parseSequenceDiagram } from '@zombie-mermaid/mermaid-parser'
+import { renderMermaidSVG } from '../../../../src/index.ts'
+import { layoutSequenceDiagram } from '../sequence/layout.ts'
+
+const SRC = [
+  'participant C as Client',
+  'participant S as Server',
+  'C->>+S: Request',
+  'S->>+S: Process',
+  'S->>-S: Done',
+  'S-->>-C: Response',
+]
+
+describe('nested self-message activation (#1241)', () => {
+  const layout = layoutSequenceDiagram(
+    parseSequenceDiagram(SRC.map((text, line) => ({ text, line }))),
+  )
+  const server = layout.activations.filter((a) => a.actorId === 'S')
+
+  it('yields two activations on the actor with depths 0 and 1', () => {
+    expect(server.map((a) => a.depth)).toEqual([0, 1])
+  })
+
+  it('offsets the nested bar right by half a bar, inside the parent span', () => {
+    const outer = server.find((a) => a.depth === 0)!
+    const inner = server.find((a) => a.depth === 1)!
+    expect(inner.x - outer.x).toBe(outer.width / 2)
+    expect(inner.topY).toBeGreaterThan(outer.topY)
+    expect(inner.bottomY).toBeLessThan(outer.bottomY)
+  })
+
+  it('draws both bars, outer first so the nested one is painted on top', () => {
+    const svg = renderMermaidSVG(`sequenceDiagram\n  ${SRC.join('\n  ')}`)
+    expect(svg.match(/class="activation"/g)).toHaveLength(2)
+  })
+})

package/src/__tests__/xychart-x-label-overlap-1243.test.ts

@@ -0,0 +1,62 @@
+/**
+ * #1243: with many categories the x-axis labels touched. The visual suite's
+ * tolerance can't see labels moving a few pixels, so assert on the layout.
+ */
+import { describe, it, expect } from 'vitest'
+import { parseXYChart } from '@zombie-mermaid/mermaid-parser'
+import { splitStatements } from '@zombie-mermaid/core'
+import { layoutXYChart } from '../xychart/layout.ts'
+import { estimateTextWidth } from '../styles.ts'
+
+function layout(src: string) {
+  return layoutXYChart(parseXYChart(splitStatements(src)))
+}
+
+function shown(src: string) {
+  return layout(src).xAxis.ticks.filter((t) => t.label !== '')
+}
+
+function minGap(ticks: ReturnType<typeof shown>): number {
+  let gap = Infinity
+  for (let i = 1; i < ticks.length; i++) {
+    const a = ticks[i - 1]!
+    const b = ticks[i]!
+    const half =
+      (estimateTextWidth(a.label, 14, 400) +
+        estimateTextWidth(b.label, 14, 400)) /
+      2
+    gap = Math.min(gap, b.labelX - a.labelX - half)
+  }
+  return gap
+}
+
+const QUARTERS = `xychart-beta
+    x-axis [21Q1, 21Q2, 21Q3, 21Q4, 22Q1, 22Q2, 22Q3, 22Q4, 23Q1, 23Q2, 23Q3, 23Q4, 24Q1, 24Q2, 24Q3, 24Q4]
+    bar [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]`
+
+describe('xychart x-axis label spacing (#1243)', () => {
+  it('drops labels so adjacent shown labels do not touch', () => {
+    const ticks = shown(QUARTERS)
+    expect(ticks.length).toBeLessThan(16)
+    expect(ticks.length).toBeGreaterThan(1)
+    expect(minGap(ticks)).toBeGreaterThan(0)
+  })
+
+  it('keeps every label when they all fit', () => {
+    const src = `xychart-beta
+    x-axis [Q1, Q2, Q3, Q4]
+    bar [1, 2, 3, 4]`
+    expect(shown(src).map((t) => t.label)).toEqual(['Q1', 'Q2', 'Q3', 'Q4'])
+  })
+
+  it('does not thin a roomy axis because of one long label', () => {
+    const src = `xychart-beta
+    x-axis [A, B, "A Rather Long Category", D, E]
+    bar [1, 2, 3, 4, 5]`
+    expect(shown(src)).toHaveLength(5)
+  })
+
+  it('keeps the tick marks of dropped labels', () => {
+    expect(layout(QUARTERS).xAxis.ticks).toHaveLength(16)
+  })
+})

package/src/c4/arial-widths.ts

@@ -0,0 +1,59 @@
+// Advance widths, in 1/2048 em, of Arial (the metrics Liberation Sans and
+// Helvetica share) for the printable ASCII range, regular and bold. Mermaid's
+// C4 renderer measures its text in the browser, and the 32 diagrams recorded
+// in `__tests__/fixtures/c4-mermaid-reference.json` are laid out to within a
+// fraction of a pixel by summing these advances, which a scaled copy of this
+// package's own Inter-based estimate could not do (see `c4TextWidth`).
+const UNITS_PER_EM = 2048
+
+const REGULAR =
+  // Indexed from U+0020: ` !"#$%&'()*+,-./`
+  [
+    569, 569, 727, 1139, 1139, 1821, 1366, 391, 682, 682, 797, 1196, 569, 682,
+    569, 569,
+    // 0-9
+    1139, 1139, 1139, 1139, 1139, 1139, 1139, 1139, 1139, 1139,
+    // :;<=>?@
+    569, 569, 1196, 1196, 1196, 1139, 2079,
+    // A-Z
+    1366, 1366, 1479, 1479, 1366, 1251, 1593, 1479, 569, 1024, 1366, 1139, 1706,
+    1479, 1593, 1366, 1593, 1479, 1366, 1251, 1479, 1366, 1933, 1366, 1366,
+    1251,
+    // [\]^_`
+    569, 569, 569, 961, 1139, 682,
+    // a-z
+    1139, 1139, 1024, 1139, 1139, 569, 1139, 1139, 455, 455, 1024, 455, 1706,
+    1139, 1139, 1139, 1139, 682, 1024, 569, 1139, 1024, 1479, 1024, 1024, 1024,
+    // {|}~
+    684, 532, 684, 1196,
+  ]
+
+const BOLD = [
+  // ` !"#$%&'()*+,-./`
+  569, 682, 971, 1139, 1139, 1821, 1479, 487, 682, 682, 797, 1196, 569, 682,
+  569, 569,
+  // 0-9
+  1139, 1139, 1139, 1139, 1139, 1139, 1139, 1139, 1139, 1139,
+  // :;<=>?@
+  682, 682, 1196, 1196, 1196, 1251, 1992,
+  // A-Z
+  1479, 1479, 1479, 1479, 1366, 1251, 1593, 1479, 569, 1139, 1479, 1251, 1706,
+  1479, 1593, 1366, 1593, 1479, 1366, 1251, 1479, 1366, 1933, 1366, 1366, 1251,
+  // [\]^_`
+  682, 569, 682, 1196, 1139, 682,
+  // a-z
+  1139, 1251, 1139, 1251, 1139, 682, 1251, 1251, 569, 569, 1139, 569, 1821,
+  1251, 1251, 1251, 1251, 797, 1139, 682, 1251, 1139, 1593, 1139, 1139, 1024,
+  // {|}~
+  801, 573, 801, 1196,
+]
+
+/**
+ * Width in em of `ch`, or `undefined` outside printable ASCII (the caller
+ * falls back to its own estimate).
+ */
+export function arialAdvance(ch: string, bold: boolean): number | undefined {
+  const code = ch.codePointAt(0)!
+  if (code < 0x20 || code > 0x7e) return undefined
+  return (bold ? BOLD : REGULAR)[code - 0x20]! / UNITS_PER_EM
+}