@zombie-mermaid/svg-renderer 4.2.2 → 4.2.3

package/src/__tests__/c4-svg.test.ts

@@ -1,337 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { splitStatements } from '@zombie-mermaid/core'
-import { parseC4Diagram } from '@zombie-mermaid/mermaid-parser'
-import type { PositionedC4Diagram } from '@zombie-mermaid/mermaid-parser'
-import { renderMermaidSVG } from '../../../../src/index.ts'
-import { layoutC4DiagramSync } from '../c4/layout.ts'
-
-function layout(src: string, direction?: 'LR'): PositionedC4Diagram {
-  const d = parseC4Diagram(splitStatements(src))
-  return layoutC4DiagramSync(direction ? { ...d, direction } : d)
-}
-
-const el = (p: PositionedC4Diagram, alias: string) =>
-  p.elements.find((e) => e.alias === alias)!
-const centerX = (e: { x: number; width: number }) => e.x + e.width / 2
-
-// The layout follows Mermaid's own C4 renderer: shapes go in rows in
-// declaration order, relationships are drawn afterwards and move nothing.
-describe('C4 SVG layout (Mermaid grid)', () => {
-  const SYSTEMS = (n: number) =>
-    `C4Context\n${Array.from({ length: n }, (_, i) => `  System(s${i}, "S${i}")`).join('\n')}`
-
-  it('fills a row left to right in declaration order, four to a row', () => {
-    const p = layout(SYSTEMS(5))
-    const xs = [0, 1, 2, 3, 4].map((i) => el(p, `s${i}`).x)
-    // Columns are one shape plus two margins apart: 216 + 100.
-    expect(xs[1]! - xs[0]!).toBeCloseTo(316, 0)
-    expect(xs[2]! - xs[1]!).toBeCloseTo(316, 0)
-    expect(xs[3]! - xs[2]!).toBeCloseTo(316, 0)
-    const ys = [0, 1, 2, 3].map((i) => el(p, `s${i}`).y)
-    expect(new Set(ys).size).toBe(1)
-    // The fifth wraps to the next row, back under the first.
-    expect(el(p, 's4').x).toBeCloseTo(xs[0]!, 0)
-    expect(el(p, 's4').y).toBeGreaterThan(ys[0]! + 60)
-  })
-
-  it('ignores Rel_U/D/L/R hints and the direction, as Mermaid does', () => {
-    const plain = `C4Context
-  System(a, "A")
-  System(b, "B")
-  System(c, "C")
-  Rel(a, b, "x")
-  Rel(a, c, "y")`
-    const hinted = plain
-      .replace('Rel(a, b', 'Rel_D(a, b')
-      .replace('Rel(a, c', 'Rel_U(a, c')
-    const pos = (p: PositionedC4Diagram) =>
-      p.elements.map((e) => [e.alias, e.x, e.y])
-    expect(pos(layout(hinted))).toEqual(pos(layout(plain)))
-    expect(pos(layout(plain, 'LR'))).toEqual(pos(layout(plain)))
-  })
-
-  it('widens a shape whose text is wider than the standard width', () => {
-    const p = layout(`C4Context
-  Person(a, "Personal Banking Customer", "A customer of the bank")
-  System(b, "B")`)
-    expect(el(p, 'a').width).toBeGreaterThan(216)
-    expect(el(p, 'b').width).toBe(216)
-    // The next shape moves right by the same amount.
-    expect(el(p, 'b').x - (el(p, 'a').x + el(p, 'a').width)).toBeCloseTo(100, 0)
-  })
-
-  it('wraps a long name to the text width and grows the box by a line', () => {
-    const one = layout('C4Context\nSystem(a, "Banking Banking Banking")')
-    const two = layout(
-      'C4Context\nSystem(a, "Banking Banking Banking Banking")',
-    )
-    expect(el(one, 'a').nameLines).toHaveLength(1)
-    expect(el(two, 'a').nameLines).toHaveLength(2)
-    expect(el(two, 'a').height - el(one, 'a').height).toBeCloseTo(15.35, 1)
-  })
-
-  it('gives shapes the heights Mermaid does', () => {
-    const p = layout(`C4Container
-  System(plain, "Plain")
-  System(desc, "Described", "One line")
-  ContainerDb(db, "DB", "PG", "Rows")
-  ContainerQueue(q, "Q", "Kafka")`)
-    expect(el(p, 'plain').height).toBeCloseTo(71.07, 0)
-    expect(el(p, 'desc').height).toBeCloseTo(88.2, 0)
-    expect(el(p, 'db').height).toBeCloseTo(115.8, 0)
-    expect(el(p, 'q').height).toBeCloseTo(41.07, 0)
-  })
-
-  it('reproduces the size and frame of a real Mermaid render', () => {
-    // The context sample, measured on Mermaid 11.17.2.
-    const p = layout(`C4Context
-  title System Context for Internet Banking
-  Person(customer, "Personal Banking Customer", "A customer of the bank")
-  Enterprise_Boundary(b0, "Bank") {
-    System(banking, "Internet Banking System", "Lets customers view accounts")
-    SystemDb(ledger, "Ledger", "Stores transactions")
-  }
-  System_Ext(mail, "E-mail System", "Sends e-mails")
-  Rel(customer, banking, "Uses", "HTTPS")`)
-    expect(p.width).toBeCloseTo(932, -1)
-    expect(p.height).toBeCloseTo(888.4, -1)
-    const frame = p.boundaries[0]!
-    expect(frame.x).toBeCloseTo(150, 0)
-    expect(frame.width).toBeCloseTo(632, 0)
-    expect(frame.height).toBeCloseTo(265.8, 0)
-    expect(centerX(el(p, 'banking'))).toBeCloseTo(308, 0)
-    expect(centerX(el(p, 'ledger'))).toBeCloseTo(624, 0)
-  })
-
-  it('puts two boundaries on a row and keeps nested elements inside', () => {
-    const p = layout(`C4Container
-  Boundary(outer, "Outer", "System") {
-    Boundary(inner, "Inner") {
-      Container(a, "A", "Go")
-    }
-    Container(b, "B", "Go")
-  }
-  Boundary(other, "Other") {
-    Container(c, "C", "Go")
-  }
-  Boundary(third, "Third") {
-    Container(d, "D", "Go")
-  }
-  Rel(a, b, "x")`)
-    const by = (alias: string) => p.boundaries.find((b) => b.alias === alias)!
-    const outer = by('outer')
-    const inner = by('inner')
-    expect(outer.depth).toBe(0)
-    expect(inner.depth).toBe(1)
-    // Outer boundaries are listed first so inner ones paint on top.
-    expect(p.boundaries.indexOf(outer)).toBeLessThan(
-      p.boundaries.indexOf(inner),
-    )
-    const inside = (
-      o: { x: number; y: number; width: number; height: number },
-      i: { x: number; y: number; width: number; height: number },
-    ) =>
-      i.x >= o.x &&
-      i.y >= o.y &&
-      i.x + i.width <= o.x + o.width &&
-      i.y + i.height <= o.y + o.height
-    expect(inside(outer, inner)).toBe(true)
-    expect(inside(inner, el(p, 'a'))).toBe(true)
-    expect(inside(outer, el(p, 'b'))).toBe(true)
-    expect(inside(inner, el(p, 'b'))).toBe(false)
-    // Mermaid lays boundaries out two to a row: the third starts a new row.
-    expect(by('other').y).toBeCloseTo(outer.y, 0)
-    expect(by('other').x).toBeGreaterThan(outer.x + outer.width)
-    expect(by('third').y).toBeGreaterThan(outer.y + outer.height)
-  })
-
-  it('draws the first relationship straight and later ones as curves', () => {
-    const p = layout(`C4Context
-  System(a, "A")
-  System(b, "B")
-  System(c, "C")
-  Rel(a, b, "first")
-  Rel(a, c, "second")
-  Rel(b, c, "third")`)
-    const [first, second, third] = p.relationships
-    expect(first!.curve).toBeUndefined()
-    const [s, e] = second!.points
-    expect(second!.curve).toEqual({
-      x: s!.x + (e!.x - s!.x) / 4,
-      y: s!.y + (e!.y - s!.y) / 2,
-    })
-    expect(third!.curve).toBeDefined()
-  })
-
-  it('starts a relationship label at the middle of its chord', () => {
-    const p = layout(`C4Context
-  System(a, "A")
-  System(b, "B")
-  Rel(a, b, "label", "tech")`)
-    const rel = p.relationships[0]!
-    const [s, e] = rel.points
-    const midX = (s!.x + e!.x) / 2
-    // Mermaid gives its text routine the midpoint as the block's left edge, so
-    // the label is centred half its own width to the right of it.
-    expect(rel.labelPosition!.x).toBeGreaterThan(midX + 5)
-    expect(rel.labelPosition!.x).toBeLessThan(midX + 40)
-    expect(rel.labelPosition!.y).toBeCloseTo((s!.y + e!.y) / 2, 5)
-    // The technology is centred on its own, at least as far along.
-    expect(rel.technologyX!).toBeGreaterThanOrEqual(rel.labelPosition!.x)
-  })
-
-  it('leaves a person along the drawn head and pill, not the box around them', () => {
-    const p = layout(`C4Context
-  Person(u, "Customer", "Buys things")
-  System(s, "Shop", "Online store")
-  Rel(u, s, "Orders from")`)
-    const u = el(p, 'u')
-    const start = p.relationships[0]!.points[0]!
-    const headCx = u.x + u.width / 2
-    const headCy = u.y + 49.68
-    // Mermaid's line leaves on the head circle (in its own drawing, at 295.7),
-    // well inside the box's right edge rather than in the air beside the head.
-    expect(start.x).toBeLessThan(u.x + u.width - 40)
-    expect(Math.hypot(start.x - headCx, start.y - headCy)).toBeCloseTo(49.68, 0)
-  })
-
-  it('routes a relationship that ends on a populated boundary to its frame', () => {
-    const p = layout(`C4Context
-  System(o, "O")
-  Boundary(b, "B") {
-    System(s, "S")
-  }
-  Rel(o, b, "into the boundary")`)
-    const rel = p.relationships[0]!
-    const b = p.boundaries[0]!
-    const end = rel.points[rel.points.length - 1]!
-    const onFrame =
-      Math.abs(end.x - b.x) < 1 ||
-      Math.abs(end.x - (b.x + b.width)) < 1 ||
-      Math.abs(end.y - b.y) < 1 ||
-      Math.abs(end.y - (b.y + b.height)) < 1
-    expect(onFrame).toBe(true)
-  })
-
-  it('shifts everything below a title, as Mermaid does', () => {
-    const plain = layout('C4Context\nSystem(a, "A")')
-    const titled = layout('C4Context\ntitle T\nSystem(a, "A")')
-    expect(el(titled, 'a').y - el(plain, 'a').y).toBeCloseTo(60, 0)
-    expect(titled.titlePosition).toBeDefined()
-    expect(titled.height - plain.height).toBeCloseTo(60, 0)
-  })
-})
-
-describe('C4 SVG rendering', () => {
-  const SRC = `C4Container
-  title Shop
-  Person(u, "User")
-  Person_Ext(x, "Partner")
-  System_Boundary(sys, "Shop") {
-    Container(web, "Web App", "React", "Storefront")
-    ContainerDb(db, "Database", "PostgreSQL")
-    ContainerQueue(q, "Events", "Kafka")
-    Component(c, "Comp", "TS")
-  }
-  Rel(u, web, "Browses", "HTTPS")
-  BiRel(web, q, "Publishes")
-  Rel(web, db, "Reads")`
-
-  it('draws a person as a pill with a round head, only for persons', () => {
-    const svg = renderMermaidSVG(SRC)
-    // One circle per person (the user and the external partner).
-    expect(svg.match(/<circle/g)).toHaveLength(2)
-    expect(svg).not.toContain('c4-person-glyph')
-    expect(renderMermaidSVG('C4Context\nSystem(s, "S")')).not.toContain(
-      '<circle',
-    )
-  })
-
-  it('draws cylinders for databases and pipes for queues', () => {
-    const svg = renderMermaidSVG(SRC)
-    expect(svg.match(/<ellipse/g)).toHaveLength(2) // one cap each: db, queue
-    expect(svg).toContain('data-shape="db"')
-    expect(svg).toContain('data-shape="queue"')
-  })
-
-  it("shows a queue's ellipse face at its right end, as Mermaid does", () => {
-    const svg = renderMermaidSVG('C4Container\nContainerQueue(q, "Events")')
-    expect(svg).toContain('data-shape="queue"')
-    const ell = /<ellipse cx="([\d.-]+)" cy="[\d.-]+" rx="([\d.-]+)"/.exec(svg)!
-    const path = /<path d="M ([\d.-]+) [\d.-]+ H ([\d.-]+) A/.exec(svg)!
-    const cx = +ell[1]!
-    const rx = +ell[2]!
-    // The body starts at the face centre (right) and runs left to its
-    // rounded end.
-    expect(+path[1]!).toBeCloseTo(cx, 1)
-    expect(+path[2]!).toBeLessThan(cx - rx)
-  })
-
-  it('uses Mermaid’s palette by kind, lighter for external elements', () => {
-    const svg = renderMermaidSVG(SRC)
-    expect(svg).toContain('#08427b') // person
-    expect(svg).toContain('#686868') // external person
-    expect(svg).toContain('#438dd5') // container
-    expect(svg).toContain('#85bbf0') // component
-  })
-
-  it('draws the diagram title, boundary title and technology text', () => {
-    const svg = renderMermaidSVG(SRC)
-    expect(svg).toContain('class="c4-title"')
-    expect(svg).toContain('>Shop</text>')
-    expect(svg).toContain('[HTTPS]')
-    expect(svg).toContain('[Container: React]')
-    expect(svg).toContain('[Person]')
-  })
-
-  it('puts arrowheads at both ends of a BiRel and one end otherwise', () => {
-    const svg = renderMermaidSVG(
-      'C4Context\nSystem(a, "A")\nSystem(b, "B")\nRel(a, b, "one")',
-    )
-    const bi = renderMermaidSVG(
-      'C4Context\nSystem(a, "A")\nSystem(b, "B")\nBiRel(a, b, "two")',
-    )
-    expect(svg.match(/<polygon/g)).toHaveLength(1)
-    expect(bi.match(/<polygon/g)).toHaveLength(2)
-  })
-
-  it('draws the first relationship as a line and the rest as quadratic curves', () => {
-    const svg = renderMermaidSVG(`C4Context
-  System(a, "A")
-  System(b, "B")
-  System(c, "C")
-  Rel(a, b, "one")
-  Rel(a, c, "two")`)
-    const ds = [
-      ...svg.matchAll(/<path class="c4-relationship"[^>]* d="([^"]+)"/g),
-    ]
-    expect(ds).toHaveLength(2)
-    expect(ds[0]![1]).toMatch(/^M [\d.-]+,[\d.-]+ L /)
-    expect(ds[1]![1]).toMatch(/^M [\d.-]+,[\d.-]+ Q /)
-  })
-
-  it('escapes user text', () => {
-    const svg = renderMermaidSVG(
-      'C4Context\nSystem(a, "A <b> & \\"q\\"")\nSystem(b, "B")\nRel(a, b, "x<y")',
-    )
-    expect(svg).not.toContain('A <b>')
-    expect(svg).toContain('x&lt;y')
-  })
-
-  it('uses the diagram title as the accessible name when no title option is set', () => {
-    expect(renderMermaidSVG(SRC)).toContain('<title')
-    expect(renderMermaidSVG(SRC, { title: 'Mine' })).toContain('>Mine</title>')
-  })
-
-  it('renders empty and boundary-only diagrams', () => {
-    expect(renderMermaidSVG('C4Context')).toContain('<svg')
-    const svg = renderMermaidSVG('C4Context\nBoundary(b, "Empty", "Type")')
-    expect(svg).toContain('class="c4-boundary"')
-  })
-
-  it('is deterministic', () => {
-    // The accessible-name id counter advances per render; everything else is fixed.
-    const strip = (svg: string) => svg.replace(/zm-title-\d+/g, 'zm-title')
-    expect(strip(renderMermaidSVG(SRC))).toBe(strip(renderMermaidSVG(SRC)))
-  })
-})

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()
-  })
-})