@zombie-mermaid/svg-renderer 4.2.2 → 5.0.0

package/src/__tests__/c4-text-width-1210.test.ts

@@ -1,43 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { splitStatements } from '@zombie-mermaid/core'
-import { parseC4Diagram } from '@zombie-mermaid/mermaid-parser'
-import { layoutC4DiagramSync } from '../c4/layout.ts'
-import { C4, C4_TEXT_WIDTH, c4TextWidth, wrapToWidth } from '../c4/metrics.ts'
-
-// Mermaid 11.17.2 measures C4 text in the browser. The widths below are read
-// back from its SVG (see c4-mermaid-reference.test.ts for the full set), and
-// text near the wrap limit is where an estimate that is a few percent off
-// changes a shape's width (#1210).
-const shapes = (src: string) =>
-  layoutC4DiagramSync(parseC4Diagram(splitStatements(src))).elements
-
-describe('C4 text widths (#1210)', () => {
-  it('measures a bold name as Mermaid does', () => {
-    // Mermaid made the shape for this name 227.6px wide: text plus 2 x 20.
-    expect(
-      c4TextWidth('Personal Banking Customer', C4.nameSize, 700),
-    ).toBeCloseTo(227.6 - 2 * C4.shapePadding, 0)
-  })
-
-  it('wraps at the shape width less its padding, measured at regular weight', () => {
-    expect(C4_TEXT_WIDTH).toBe(176)
-    // 187.6px in bold, 175.9px in regular: it stays on one line, as in
-    // Mermaid, even though the drawn name is wider than the limit.
-    const name = 'Personal Banking Customer'
-    expect(wrapToWidth(name, C4_TEXT_WIDTH, C4.nameSize)).toEqual([name])
-    expect(c4TextWidth(name, C4.nameSize, 700)).toBeGreaterThan(C4_TEXT_WIDTH)
-  })
-
-  it('keeps a person with a three-line description at the standard width', () => {
-    const [p] = shapes(
-      'C4Context\n  Person(p, "Customer", "A description that is long enough to wrap into three lines at the standard width of a shape")',
-    )
-    expect(p!.descriptionLines).toHaveLength(3)
-    // Mermaid: 216px. A wider estimate widened it to 222px.
-    expect(p!.width).toBeCloseTo(216, 1)
-  })
-
-  it('falls back to a scaled estimate outside printable ASCII', () => {
-    expect(c4TextWidth('中文', C4.descrSize, 400)).toBeGreaterThan(0)
-  })
-})

package/src/__tests__/class-component-order-1249.test.ts

@@ -1,40 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { splitStatements } from '@zombie-mermaid/core'
-import { parseClassDiagram } from '@zombie-mermaid/mermaid-parser'
-import { layoutClassDiagramSync } from '../class/layout.ts'
-
-const layout = (src: string) =>
-  layoutClassDiagramSync(parseClassDiagram(splitStatements(src)))
-
-// Mermaid places disconnected components left to right in declaration order
-// (#1249). ELK's layered algorithm otherwise orders them by its own graph
-// traversal, so the layout has to keep the declared order.
-describe('class diagram disconnected components (#1249)', () => {
-  it('places each component left to right in source order, in one row', () => {
-    const p = layout(`classDiagram
-  A <|-- B : inheritance
-  C *-- D : composition
-  E o-- F : aggregation
-  G --> H : association
-  I ..> J : dependency
-  K ..|> L : realization`)
-    const at = (id: string) => p.classes.find((c) => c.id === id)!
-    const roots = ['A', 'C', 'E', 'G', 'I', 'K'].map((id) => at(id))
-    const lefts = roots.map((c, i) => Math.min(c.x, at('BDFHJL'[i]!).x))
-    for (let i = 1; i < lefts.length; i++) {
-      expect(lefts[i]!).toBeGreaterThan(lefts[i - 1]!)
-    }
-    // Single row: every component starts at the same top.
-    expect(new Set(roots.map((c) => c.y)).size).toBe(1)
-  })
-
-  it('orders components by first appearance, not by relationship order', () => {
-    const p = layout(`classDiagram
-  class Z
-  class Y
-  Z <|-- Q
-  Y <|-- R`)
-    const x = (id: string) => p.classes.find((c) => c.id === id)!.x
-    expect(x('Z')).toBeLessThan(x('Y'))
-  })
-})

package/src/__tests__/class-diamond-markers-1232.test.ts

@@ -1,59 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { renderMermaidSVG } from '../../../../src/index.ts'
-
-// String slicing rather than RegExp(variable): the repo's Semgrep gate blocks
-// non-literal regexes (detect-non-literal-regexp), even in tests.
-const marker = (svg: string, id: string) => {
-  const start = svg.indexOf(`<marker id="${id}"`)
-  const end = svg.indexOf('</marker>', start)
-  return start === -1 || end === -1 ? '' : svg.slice(start, end)
-}
-
-const attrValue = (def: string, attr: string) => {
-  const start = def.indexOf(`${attr}="`) + attr.length + 2
-  return def.slice(start, def.indexOf('"', start))
-}
-
-const num = (def: string, attr: string) => Number(attrValue(def, attr))
-
-const relationship = (svg: string, type: string) =>
-  svg.split('<polyline').find((p) => p.includes(`data-type="${type}"`)) ?? ''
-
-// The diamond's tip must sit on the line's endpoint. With orient
-// auto-start-reverse the marker's +x points away from the line at the start,
-// so refX has to be the tip's x; refX=0 pushes the whole diamond outward
-// under the class box (#1232). The polygon must also be inset by half its
-// stroke, or the marker viewport clips the diamond's points flat.
-describe('class diagram diamond markers (#1232)', () => {
-  const cases = [
-    ['composition', 'C *-- D', 'cls-composition', 'var(--_arrow)'],
-    ['aggregation', 'E o-- F', 'cls-aggregation', 'var(--bg)'],
-  ] as const
-
-  for (const [type, line, id, fill] of cases) {
-    it(`${type} references its marker at the owning end`, () => {
-      const svg = renderMermaidSVG(`classDiagram\n  ${line}`)
-      expect(relationship(svg, type)).toContain(`marker-start="url(#${id})"`)
-      expect(marker(svg, id)).toContain(`fill="${fill}"`)
-    })
-
-    it(`${type} anchors its tip on the endpoint without clipping the stroke`, () => {
-      const def = marker(renderMermaidSVG(`classDiagram\n  ${line}`), id)
-      const points = attrValue(def, 'points')
-        .split(',')
-        .map((p) => p.trim().split(/\s+/).map(Number) as [number, number])
-      const xs = points.map((p) => p[0])
-      const ys = points.map((p) => p[1])
-      const half = num(def, 'stroke-width') / 2
-      expect(num(def, 'refX')).toBe(Math.max(...xs))
-      expect(Math.min(...xs) - half).toBeGreaterThanOrEqual(0)
-      expect(Math.min(...ys) - half).toBeGreaterThanOrEqual(0)
-      expect(Math.max(...xs) + half).toBeLessThanOrEqual(
-        num(def, 'markerWidth'),
-      )
-      expect(Math.max(...ys) + half).toBeLessThanOrEqual(
-        num(def, 'markerHeight'),
-      )
-    })
-  }
-})

package/src/__tests__/class-member-right-padding-1238.test.ts

@@ -1,43 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { renderMermaidSVG } from '../../../../src/index.ts'
-
-// Mono glyphs advance 0.6em (6.6px at the 11px member 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 a long member run into the right
-// border in the Linux baselines (#1238).
-const WORST_CASE_ADVANCE = 7
-const MIN_RIGHT_PADDING = 8
-
-const SRC = `classDiagram
-  class Controller {
-    -model Model
-    +handleInput(event) void
-    +updateModel(data) void
-  }`
-
-const attr = (tag: string, name: string) => {
-  const start = tag.indexOf(`${name}="`) + name.length + 2
-  return Number(tag.slice(start, tag.indexOf('"', start)))
-}
-
-describe('class member right padding (#1238)', () => {
-  const svg = renderMermaidSVG(SRC)
-  const box =
-    (svg.split('<g class="class-node"')[1] ?? '').split('<rect')[1] ?? ''
-  const text = svg
-    .split('<text')
-    .find((t) => t.includes('handleInput(event)')) as string
-  const drawnChars = '+ handleInput(event): void'.length
-
-  it('finds the box and the member text', () => {
-    expect(box).not.toBe('')
-    expect(text).toBeDefined()
-  })
-
-  it('keeps the minimum right padding even with whole-pixel glyph advances', () => {
-    const boxRight = attr(box, 'x') + attr(box, 'width')
-    const textRight = attr(text, 'x') + drawnChars * WORST_CASE_ADVANCE
-    expect(boxRight - textRight).toBeGreaterThanOrEqual(MIN_RIGHT_PADDING)
-  })
-})

package/src/__tests__/class-namespace-1196.test.ts

@@ -1,165 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { splitStatements } from '@zombie-mermaid/core'
-import { parseClassDiagram } from '@zombie-mermaid/mermaid-parser'
-import { layoutClassDiagramSync } from '../class/layout.ts'
-import { renderMermaidSVG } from '../index.ts'
-
-const SRC = `classDiagram
-namespace Core {
-  class A
-  class B
-}
-namespace Extras {
-  class C
-}
-class D
-A --> C
-A --> B
-D --> B`
-
-const layout = (src: string) =>
-  layoutClassDiagramSync(parseClassDiagram(splitStatements(src)))
-
-describe('class diagram namespaces (#1196)', () => {
-  const p = layout(SRC)
-  const cls = (id: string) => p.classes.find((c) => c.id === id)!
-  const ns = (name: string) => p.namespaces.find((n) => n.name === name)!
-
-  it('lays out one frame per namespace', () => {
-    expect(p.namespaces.map((n) => n.name)).toEqual(['Core', 'Extras'])
-  })
-
-  it('encloses each member class and no outsider', () => {
-    const inside = (n: string, id: string) => {
-      const f = ns(n)
-      const c = cls(id)
-      return (
-        c.x >= f.x &&
-        c.y >= f.y &&
-        c.x + c.width <= f.x + f.width &&
-        c.y + c.height <= f.y + f.height
-      )
-    }
-    expect(inside('Core', 'A')).toBe(true)
-    expect(inside('Core', 'B')).toBe(true)
-    expect(inside('Extras', 'C')).toBe(true)
-    expect(inside('Core', 'C')).toBe(false)
-    expect(inside('Core', 'D')).toBe(false)
-    expect(inside('Extras', 'D')).toBe(false)
-  })
-
-  it('keeps frames inside the canvas and apart from each other', () => {
-    for (const f of p.namespaces) {
-      expect(f.x).toBeGreaterThanOrEqual(0)
-      expect(f.y).toBeGreaterThanOrEqual(0)
-      expect(f.x + f.width).toBeLessThanOrEqual(p.width)
-      expect(f.y + f.height).toBeLessThanOrEqual(p.height)
-    }
-    const a = ns('Core')
-    const b = ns('Extras')
-    const disjoint =
-      a.x + a.width <= b.x ||
-      b.x + b.width <= a.x ||
-      a.y + a.height <= b.y ||
-      b.y + b.height <= a.y
-    expect(disjoint).toBe(true)
-  })
-
-  it('leaves room for the title above the classes', () => {
-    expect(cls('A').y - ns('Core').y).toBeGreaterThanOrEqual(28)
-  })
-
-  it('routes edges to the class boxes, including edges inside a namespace', () => {
-    const touches = (pt: { x: number; y: number }, id: string) => {
-      const c = cls(id)
-      const tol = 1.5
-      return (
-        pt.x >= c.x - tol &&
-        pt.x <= c.x + c.width + tol &&
-        pt.y >= c.y - tol &&
-        pt.y <= c.y + c.height + tol
-      )
-    }
-    for (const rel of p.relationships) {
-      const first = rel.points[0]!
-      const last = rel.points[rel.points.length - 1]!
-      expect(touches(first, rel.from)).toBe(true)
-      expect(touches(last, rel.to)).toBe(true)
-    }
-  })
-
-  it('draws the namespace names and frames in SVG', () => {
-    const svg = renderMermaidSVG(SRC)
-    expect(svg).toContain('>Core</text>')
-    expect(svg).toContain('>Extras</text>')
-    expect(svg.match(/class="class-namespace"/g)).toHaveLength(2)
-    // Frames sit behind the class boxes.
-    expect(svg.indexOf('class-namespace')).toBeLessThan(
-      svg.indexOf('class-node'),
-    )
-  })
-
-  it('escapes the namespace name', () => {
-    const svg = renderMermaidSVG(`classDiagram
-namespace a&b {
-  class A
-}`)
-    expect(svg).toContain('>a&amp;b</text>')
-  })
-
-  it('ignores a namespace with no classes and a class claimed twice', () => {
-    const q = layout(`classDiagram
-namespace Empty {
-}
-namespace One {
-  class A
-}
-namespace Two {
-  class A
-  class B
-}`)
-    expect(q.namespaces.map((n) => [n.name, n.classIds])).toEqual([
-      ['One', ['A']],
-      ['Two', ['B']],
-    ])
-  })
-
-  it('leaves diagrams without namespaces unframed', () => {
-    expect(layout('classDiagram\nA --> B').namespaces).toEqual([])
-  })
-
-  it('returns no frames for an empty diagram', () => {
-    expect(layout('classDiagram').namespaces).toEqual([])
-  })
-
-  it('keeps a note link attached to a class inside a namespace', () => {
-    const q = layout(`classDiagram
-namespace Core {
-  class A
-  class B
-}
-A --> B
-note for A "hello"`)
-    const a = q.classes.find((c) => c.id === 'A')!
-    const note = q.notes[0]!
-    expect(note.linkPoints).toBeDefined()
-    const pts = note.linkPoints!
-    const end = pts[pts.length - 1]!
-    const tol = 1.5
-    const touchesA =
-      end.x >= a.x - tol &&
-      end.x <= a.x + a.width + tol &&
-      end.y >= a.y - tol &&
-      end.y <= a.y + a.height + tol
-    expect(touchesA).toBe(true)
-  })
-
-  it('lays out a note that has no link', () => {
-    const q = layout(`classDiagram
-namespace Core {
-  class A
-}
-note "free floating"`)
-    expect(q.notes[0]!.linkPoints).toBeUndefined()
-  })
-})

package/src/__tests__/class-namespace-sparse-elk-1196.test.ts

@@ -1,96 +0,0 @@
-import { describe, it, expect, vi } from 'vitest'
-import type { ElkNode } from 'elkjs/lib/elk-api'
-import { splitStatements } from '@zombie-mermaid/core'
-import { parseClassDiagram } from '@zombie-mermaid/mermaid-parser'
-
-// ELK's result type marks every coordinate optional. Strip them (and
-// optionally drop a node) so the layout extractor's fallbacks run.
-const mode = vi.hoisted(() => ({
-  strip: false,
-  dropNamespaces: false,
-  emptyNamespaces: false,
-  noChildren: false,
-}))
-
-vi.mock('../elk-instance.ts', async (importOriginal) => {
-  const real = await importOriginal<typeof import('../elk-instance.ts')>()
-  const bare = (n: ElkNode): ElkNode => {
-    return { id: n.id, edges: n.edges, children: n.children?.map(bare) }
-  }
-  return {
-    ...real,
-    elkLayoutSync: (...args: Parameters<typeof real.elkLayoutSync>) => {
-      const result = real.elkLayoutSync(...args)
-      if (mode.noChildren) return { ...result, children: undefined }
-      if (mode.emptyNamespaces) {
-        return {
-          ...result,
-          children: result.children?.map((c) =>
-            c.id.startsWith('namespace') ? { ...c, children: undefined } : c,
-          ),
-        }
-      }
-      if (mode.dropNamespaces) {
-        return {
-          ...result,
-          children: result.children?.filter(
-            (c) => !c.id.startsWith('namespace'),
-          ),
-        }
-      }
-      return mode.strip ? bare(result) : result
-    },
-  }
-})
-
-const { layoutClassDiagramSync } = await import('../class/layout.ts')
-
-const SRC = `classDiagram
-namespace Core {
-  class A
-  class B
-}
-A --> B`
-
-const layout = () =>
-  layoutClassDiagramSync(parseClassDiagram(splitStatements(SRC)))
-
-describe('class namespace layout against sparse ELK output (#1196)', () => {
-  it('falls back to the origin and measured sizes when ELK omits geometry', () => {
-    mode.strip = true
-    mode.dropNamespaces = false
-    const p = layout()
-    expect(p.namespaces).toEqual([
-      { name: 'Core', classIds: ['A', 'B'], x: 0, y: 0, width: 0, height: 0 },
-    ])
-    for (const c of p.classes) {
-      expect(c.x).toBe(0)
-      expect(c.width).toBeGreaterThan(0)
-    }
-  })
-
-  it('tolerates a namespace node without children', () => {
-    mode.strip = false
-    mode.dropNamespaces = false
-    mode.emptyNamespaces = true
-    expect(layout().namespaces).toHaveLength(1)
-  })
-
-  it('tolerates a result without any children', () => {
-    mode.strip = false
-    mode.dropNamespaces = false
-    mode.emptyNamespaces = false
-    mode.noChildren = true
-    const p = layout()
-    expect(p.namespaces).toEqual([])
-    expect(p.classes).toEqual([])
-  })
-
-  it('skips a namespace ELK did not return', () => {
-    mode.strip = false
-    mode.noChildren = false
-    mode.emptyNamespaces = false
-    mode.dropNamespaces = true
-    expect(layout().namespaces).toEqual([])
-  })
-})

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

@@ -1,27 +0,0 @@
-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__/edge-jog-straightening-1388.test.ts

@@ -1,57 +0,0 @@
-/**
- * #1388: parallel edges between differently sized, centered nodes kinked by a
- * fraction of a pixel near the target and tilted the arrowhead.
- */
-import { describe, it, expect } from 'vitest'
-import { parseMermaid } from '@zombie-mermaid/mermaid-parser'
-import { layoutGraphSync } from '@zombie-mermaid/svg-renderer'
-import { straightenTinyJogs } from '../layout-engine/jog-straightening.ts'
-
-describe('straightenTinyJogs', () => {
-  it('collapses a sub-pixel vertical jog into one straight run', () => {
-    const out = straightenTinyJogs([
-      { x: 62.48, y: 76.9 },
-      { x: 62.48, y: 112.9 },
-      { x: 63.11, y: 112.9 },
-      { x: 63.11, y: 124.9 },
-    ])
-    expect(out).toHaveLength(2)
-    expect(out[0]!.x).toBeCloseTo(out[1]!.x, 6)
-    expect(out[0]!.y).toBe(76.9)
-    expect(out[1]!.y).toBe(124.9)
-  })
-
-  it('collapses a sub-pixel horizontal jog', () => {
-    const out = straightenTinyJogs([
-      { x: 0, y: 10 },
-      { x: 20, y: 10 },
-      { x: 20, y: 10.6 },
-      { x: 40, y: 10.6 },
-    ])
-    expect(out).toHaveLength(2)
-    expect(out[0]!.y).toBeCloseTo(out[1]!.y, 6)
-  })
-
-  it('keeps a real bend', () => {
-    const pts = [
-      { x: 0, y: 0 },
-      { x: 0, y: 20 },
-      { x: 30, y: 20 },
-      { x: 30, y: 40 },
-    ]
-    expect(straightenTinyJogs(pts)).toEqual(pts)
-  })
-})
-
-describe('parallel edges between different-width nodes (#1388)', () => {
-  it('routes both edges as straight vertical lines', () => {
-    const g = layoutGraphSync(
-      parseMermaid('graph TD\n  Top <--> Bot\n  Top <-.- Bot'),
-    )
-    expect(g.edges).toHaveLength(2)
-    for (const e of g.edges) {
-      const xs = new Set(e.points.map((p) => p.x.toFixed(2)))
-      expect(xs.size, JSON.stringify(e.points)).toBe(1)
-    }
-  })
-})