@zombie-mermaid/svg-renderer 4.2.2 → 5.0.0

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

@@ -1,162 +0,0 @@
-/**
- * #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

@@ -1,37 +0,0 @@
-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__/svg-edge-to-own-cluster-1310.test.ts

@@ -1,32 +0,0 @@
-/**
- * #1310 — real mermaid.js (11.17.2) draws no line for an edge between a node
- * and a subgraph that contains it (the edge path is zero-length). The SVG
- * renderer used to draw degenerate stubs for it; it now omits the edge, so the
- * output equals the same diagram without that edge.
- */
-import { describe, it, expect } from 'vitest'
-import { renderMermaidSVG } from '../../../../src/index.ts'
-
-const base = 'flowchart TD; subgraph Sub; B; end; A --> B'
-
-describe('SVG: an edge between a node and its own subgraph (#1310)', () => {
-  it.each([
-    ['member to subgraph', `${base}; B --> Sub`],
-    ['subgraph to member', `${base}; Sub --> B`],
-    [
-      'nested containment',
-      'flowchart TD; subgraph Outer; subgraph Inner; B; end; end; A --> B; B --> Outer; Inner --> B; Outer --> Inner',
-    ],
-  ])('renders %s identically to the diagram without the edge', (_, src) => {
-    const without = src.includes('Outer')
-      ? 'flowchart TD; subgraph Outer; subgraph Inner; B; end; end; A --> B'
-      : base
-    expect(renderMermaidSVG(src)).toBe(renderMermaidSVG(without))
-  })
-
-  it('still draws an edge from an outside node to the subgraph', () => {
-    expect(renderMermaidSVG(`${base}; X --> Sub`)).not.toBe(
-      renderMermaidSVG(base),
-    )
-  })
-})

package/src/__tests__/xychart-smooth-curve.test.ts

@@ -1,42 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { smoothCurvePath } from '../xychart/renderer.ts'
-
-/** Every y coordinate in the path (Bezier control points bound the curve). */
-function pathYs(d: string): number[] {
-  return [...d.matchAll(/(-?\d+(?:\.\d+)?),(-?\d+(?:\.\d+)?)/g)].map((m) =>
-    Number(m[2]),
-  )
-}
-
-function expectWithinRange(values: number[]) {
-  const points = values.map((y, i) => ({ x: i * 50, y }))
-  const ys = pathYs(smoothCurvePath(points))
-  const lo = Math.min(...values)
-  const hi = Math.max(...values)
-  for (const y of ys) {
-    expect(y).toBeGreaterThanOrEqual(lo - 0.01)
-    expect(y).toBeLessThanOrEqual(hi + 0.01)
-  }
-}
-
-describe('smoothCurvePath', () => {
-  it('stays within the data range on a sharp spike after a flat run', () => {
-    expectWithinRange([5, 12, 45, 380, 420, 250, 35, 8])
-    expectWithinRange([0, 0, 0, 100, 0, 0, 0])
-  })
-
-  it('stays within the data range on a flat run and alternating values', () => {
-    expectWithinRange([10, 10, 10, 10, 10])
-    expectWithinRange([0, 100, 0, 100, 0])
-  })
-
-  it('passes through every data point', () => {
-    const d = smoothCurvePath([
-      { x: 0, y: 10 },
-      { x: 50, y: 80 },
-      { x: 100, y: 20 },
-    ])
-    expect(d).toContain('50,80')
-    expect(d.endsWith('100,20')).toBe(true)
-  })
-})

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

@@ -1,62 +0,0 @@
-/**
- * #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

@@ -1,59 +0,0 @@
-// 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
-}