@zombie-mermaid/svg-renderer 4.2.2 → 5.0.0

package/src/__tests__/elk-adapter-utils.test.ts

@@ -1,166 +0,0 @@
-/**
- * Unit tests for the shared ELK edge-geometry extraction helpers
- * (`extractEdgePoints` / `extractEdgeLabelPosition`).
- *
- * `from-elk.ts`, `class/layout.ts`, and `er/layout.ts` all exercise this
- * module indirectly through full-diagram integration tests, but those
- * only ever hit the "happy path" (an edge with sections and, sometimes,
- * a placed label). These tests cover the defensive branches directly —
- * missing/empty sections, missing/empty labels, an unplaced label, and
- * missing bend points/label dimensions — so every branch has direct
- * coverage rather than relying on an integration test to happen to hit it.
- */
-import { describe, it, expect } from 'vitest'
-import type { ElkExtendedEdge } from 'elkjs'
-import {
-  extractEdgePoints,
-  extractEdgeLabelPosition,
-} from '@zombie-mermaid/svg-renderer'
-
-function edge(partial: Partial<ElkExtendedEdge>): ElkExtendedEdge {
-  return { id: 'e0', sources: ['a'], targets: ['b'], ...partial }
-}
-
-describe('extractEdgePoints', () => {
-  it('returns an empty array when the edge has no sections property', () => {
-    expect(extractEdgePoints(edge({}))).toEqual([])
-  })
-
-  it('returns an empty array when sections is an empty array', () => {
-    expect(extractEdgePoints(edge({ sections: [] }))).toEqual([])
-  })
-
-  it('walks start -> end with no bend points', () => {
-    const e = edge({
-      sections: [
-        {
-          id: 's0',
-          startPoint: { x: 10, y: 20 },
-          endPoint: { x: 30, y: 40 },
-        },
-      ],
-    })
-    expect(extractEdgePoints(e)).toEqual([
-      { x: 10, y: 20 },
-      { x: 30, y: 40 },
-    ])
-  })
-
-  it('walks start -> bendPoints -> end when bend points are present', () => {
-    const e = edge({
-      sections: [
-        {
-          id: 's0',
-          startPoint: { x: 0, y: 0 },
-          endPoint: { x: 100, y: 0 },
-          bendPoints: [
-            { x: 25, y: 50 },
-            { x: 75, y: 50 },
-          ],
-        },
-      ],
-    })
-    expect(extractEdgePoints(e)).toEqual([
-      { x: 0, y: 0 },
-      { x: 25, y: 50 },
-      { x: 75, y: 50 },
-      { x: 100, y: 0 },
-    ])
-  })
-
-  it('translates every point by offsetX/offsetY when provided', () => {
-    const e = edge({
-      sections: [
-        {
-          id: 's0',
-          startPoint: { x: 0, y: 0 },
-          endPoint: { x: 10, y: 10 },
-          bendPoints: [{ x: 5, y: 5 }],
-        },
-      ],
-    })
-    expect(extractEdgePoints(e, 100, 200)).toEqual([
-      { x: 100, y: 200 },
-      { x: 105, y: 205 },
-      { x: 110, y: 210 },
-    ])
-  })
-
-  it('only reads the first section when multiple are present', () => {
-    const e = edge({
-      sections: [
-        { id: 's0', startPoint: { x: 0, y: 0 }, endPoint: { x: 1, y: 1 } },
-        { id: 's1', startPoint: { x: 9, y: 9 }, endPoint: { x: 8, y: 8 } },
-      ],
-    })
-    expect(extractEdgePoints(e)).toEqual([
-      { x: 0, y: 0 },
-      { x: 1, y: 1 },
-    ])
-  })
-})
-
-describe('extractEdgeLabelPosition', () => {
-  it('returns undefined when the edge has no labels property', () => {
-    expect(extractEdgeLabelPosition(edge({}))).toBeUndefined()
-  })
-
-  it('returns undefined when labels is an empty array', () => {
-    expect(extractEdgeLabelPosition(edge({ labels: [] }))).toBeUndefined()
-  })
-
-  it('returns undefined when the label has no x/y (ELK left it unplaced)', () => {
-    expect(
-      extractEdgeLabelPosition(edge({ labels: [{ text: 'foo' }] })),
-    ).toBeUndefined()
-  })
-
-  it('returns undefined when only x is set (y still unplaced)', () => {
-    expect(
-      extractEdgeLabelPosition(edge({ labels: [{ text: 'foo', x: 5 }] })),
-    ).toBeUndefined()
-  })
-
-  it('computes the label center, defaulting missing width/height to 0', () => {
-    expect(
-      extractEdgeLabelPosition(
-        edge({ labels: [{ text: 'foo', x: 10, y: 20 }] }),
-      ),
-    ).toEqual({ x: 10, y: 20 })
-  })
-
-  it('computes the label center from x/y/width/height', () => {
-    expect(
-      extractEdgeLabelPosition(
-        edge({
-          labels: [{ text: 'foo', x: 10, y: 20, width: 40, height: 10 }],
-        }),
-      ),
-    ).toEqual({ x: 30, y: 25 })
-  })
-
-  it('translates the computed center by offsetX/offsetY when provided', () => {
-    expect(
-      extractEdgeLabelPosition(
-        edge({
-          labels: [{ text: 'foo', x: 10, y: 20, width: 40, height: 10 }],
-        }),
-        100,
-        200,
-      ),
-    ).toEqual({ x: 130, y: 225 })
-  })
-
-  it('only reads the first label when multiple are present', () => {
-    expect(
-      extractEdgeLabelPosition(
-        edge({
-          labels: [
-            { text: 'first', x: 0, y: 0 },
-            { text: 'second', x: 100, y: 100 },
-          ],
-        }),
-      ),
-    ).toEqual({ x: 0, y: 0 })
-  })
-})

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

@@ -1,47 +0,0 @@
-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-cardinality-markers-1233.test.ts

@@ -1,35 +0,0 @@
-/**
- * #1233: one-or-many (`|{`) was drawn as a bare crow's foot. The visual suite's
- * tolerance can't see a missing bar, so assert the drawn primitives directly.
- */
-import { describe, it, expect } from 'vitest'
-import { renderMermaidSVG } from '@zombie-mermaid/svg-renderer'
-
-function count(src: string): { lines: number; circles: number } {
-  const svg = renderMermaidSVG(src)
-  return {
-    lines: (svg.match(/<line /g) ?? []).length,
-    circles: (svg.match(/<circle /g) ?? []).length,
-  }
-}
-
-/** Primitives drawn for the right-hand cardinality token, net of an `||` end. */
-function rightEnd(token: string): { lines: number; circles: number } {
-  const base = count('erDiagram\n  A ||--|| B : r')
-  const v = count(`erDiagram\n  A ||--${token} B : r`)
-  return { lines: v.lines - base.lines, circles: v.circles - base.circles }
-}
-
-describe('ER cardinality markers (#1233)', () => {
-  it('draws one-or-many as foot (3 lines) + bar, vs 2 lines for exactly one', () => {
-    expect(rightEnd('|{')).toEqual({ lines: 2, circles: 0 })
-  })
-
-  it('draws zero-or-many as foot + circle, with no bar', () => {
-    expect(rightEnd('o{')).toEqual({ lines: 1, circles: 1 })
-  })
-
-  it('distinguishes one-or-many from zero-or-many', () => {
-    expect(rightEnd('|{')).not.toEqual(rightEnd('o{'))
-  })
-})

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

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

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