@zombie-mermaid/svg-renderer 4.2.2 → 4.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zombie-mermaid/svg-renderer",
-  "version": "4.2.2",
+  "version": "4.2.3",
   "license": "MIT",
   "description": "SVG rendering primitives and the ELK-backed layout engine behind zombie-mermaid's SVG output.",
   "repository": {
@@ -31,13 +31,14 @@
   },
   "files": [
     "src/",
+    "!src/**/__tests__",
     "dist/",
     "LICENSE"
   ],
   "dependencies": {
     "elkjs": "^0.11.0",
     "entities": "^7.0.1",
-    "@zombie-mermaid/core": "4.2.2",
-    "@zombie-mermaid/mermaid-parser": "4.2.2"
+    "@zombie-mermaid/core": "4.2.3",
+    "@zombie-mermaid/mermaid-parser": "4.2.3"
   }
 }

package/src/index.ts

@@ -202,12 +202,45 @@ export function renderMermaidSVG(
   text: string,
   options: RenderOptions = {},
 ): string {
-  const svg = renderMermaidSVGRaw(text, options)
+  const svg = scopeSvgIds(renderMermaidSVGRaw(text, options))
   return options.resolveColors
     ? resolveCssColors(svg, buildColors(options))
     : svg
 }
 
+/**
+ * Prefix every `id` in the SVG (and each `url(#…)`, `href="#…"` reference to
+ * it) with a hash of the SVG itself, so two diagrams inlined in one HTML
+ * document never share marker/mask ids. Without this every `url(#arrowhead)`
+ * resolves to the first diagram's marker, which draws nothing when that
+ * diagram is in a `display: none` subtree (#1397). Hashing the whole output
+ * (not just the source) keeps same-text renders with different options apart.
+ */
+function scopeSvgIds(svg: string): string {
+  const ids = new Set(
+    Array.from(svg.matchAll(/\sid="([^"]+)"/g), (m) => m[1] ?? ''),
+  )
+  if (ids.size === 0) return svg
+  let h = 0x811c9dc5
+  for (let i = 0; i < svg.length; i++) {
+    h = Math.imul(h ^ svg.charCodeAt(i), 0x01000193)
+  }
+  const prefix = `zm${(h >>> 0).toString(36)}-`
+  // ids already carrying the zm- prefix (aria title/desc, title-gap mask) are unique already
+  const scoped = (id: string) =>
+    ids.has(id) && !id.startsWith('zm-') ? prefix + id : id
+  return svg
+    .replace(
+      /(\sid=")([^"]+)"/g,
+      (_, a: string, id: string) => `${a}${scoped(id)}"`,
+    )
+    .replace(/url\(#([^)]+)\)/g, (_, id: string) => `url(#${scoped(id)})`)
+    .replace(
+      /(href=")#([^"]+)"/g,
+      (_, a: string, id: string) => `${a}#${scoped(id)}"`,
+    )
+}
+
 /** The renderer proper — `renderMermaidSVG` minus the optional `resolveColors` post-pass. */
 function renderMermaidSVGRaw(text: string, options: RenderOptions): string {
   // Decode XML entities that may leak from markdown parsers (e.g. rehype-raw).

package/src/__tests__/c4-label-clearance-1290.test.ts

@@ -1,112 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { splitStatements } from '@zombie-mermaid/core'
-import { c4RelLabelLines, parseC4Diagram } from '@zombie-mermaid/mermaid-parser'
-import { layoutC4DiagramSync } from '../c4/layout.ts'
-import { C4, c4TextWidth } from '../c4/metrics.ts'
-
-// Mermaid starts a relationship label at the chord's midpoint, which can land
-// it on a shape. The label slides along its line to clear every shape (#1290).
-const layout = (src: string) =>
-  layoutC4DiagramSync(parseC4Diagram(splitStatements(src)))
-
-// The C4 Container sample: `Reads/writes [SQL]` and `Publishes [AMQP]` both
-// used to sit on the Database cylinder.
-const container = `C4Container
-  Person(user, "User")
-  System_Boundary(sys, "Shop") {
-    Container(web, "Web App", "React", "Storefront")
-    Container(api, "API", "Node.js", "Business logic")
-    ContainerDb(db, "Database", "PostgreSQL", "Orders")
-    ContainerQueue(q, "Events", "Kafka")
-  }
-  System_Ext(pay, "Payments")
-  Rel(user, web, "Browses")
-  Rel(web, api, "Calls", "JSON/HTTPS")
-  Rel(api, db, "Reads/writes", "SQL")
-  BiRel(api, q, "Publishes", "AMQP")
-  Rel(api, pay, "Charges cards")`
-
-function labelRects(d: ReturnType<typeof layout>) {
-  return d.relationships.flatMap((rel) => {
-    if (!rel.labelPosition) return []
-    const lines = c4RelLabelLines(rel)
-    return lines.map((line, i) => {
-      const isTech = rel.technology !== undefined && i === lines.length - 1
-      const w = c4TextWidth(line, C4.messageSize, 400)
-      const cx =
-        isTech && rel.technologyX !== undefined
-          ? rel.technologyX
-          : rel.labelPosition!.x
-      const cy = rel.labelPosition!.y + (i === 0 ? 0 : C4.messageSize + 5)
-      return {
-        rel: `${rel.from}->${rel.to}`,
-        x0: cx - w / 2,
-        x1: cx + w / 2,
-        y0: cy - C4.messageSize / 2,
-        y1: cy + C4.messageSize / 2,
-      }
-    })
-  })
-}
-
-function overlapping(d: ReturnType<typeof layout>): string[] {
-  const hits: string[] = []
-  for (const r of labelRects(d)) {
-    for (const e of d.elements) {
-      if (
-        r.x0 < e.x + e.width &&
-        r.x1 > e.x &&
-        r.y0 < e.y + e.height &&
-        r.y1 > e.y
-      ) {
-        hits.push(`${r.rel} label over ${e.alias}`)
-      }
-    }
-  }
-  return hits
-}
-
-describe('C4 relationship labels clear the shapes (#1290)', () => {
-  it('keeps every label in the Container sample off every shape', () => {
-    expect(overlapping(layout(container))).toEqual([])
-  })
-
-  it('keeps a label on its own line, only sliding along it', () => {
-    const d = layout(container)
-    const rel = d.relationships.find((r) => r.to === 'db')!
-    const [s, e] = rel.points
-    const dx = e!.x - s!.x
-    const dy = e!.y - s!.y
-    const t = rel.labelPosition!
-    // Same distance from the chord as an unmoved label: Mermaid's label is
-    // half its own width to the right of the midpoint, never further off.
-    const across = Math.abs(
-      ((t.x - s!.x) * dy - (t.y - s!.y) * dx) / Math.hypot(dx, dy),
-    )
-    expect(across).toBeLessThan(40)
-  })
-
-  it('leaves a label that already clears every shape where Mermaid puts it', () => {
-    const d = layout(`C4Context
-  System(a, "A")
-  System(b, "B")
-  Rel(a, b, "Uses")`)
-    const rel = d.relationships[0]!
-    const [s, e] = rel.points
-    const mid = (s!.x + e!.x) / 2
-    const width = c4TextWidth('Uses', C4.messageSize, 400)
-    expect(rel.labelPosition!.x).toBeCloseTo(mid + width / 2, 5)
-  })
-
-  it('does not let two labels in one gap sit on each other', () => {
-    const rects = labelRects(layout(container))
-    for (const [i, a] of rects.entries()) {
-      for (const b of rects.slice(i + 1)) {
-        if (a.rel === b.rel) continue
-        const apart =
-          a.x1 <= b.x0 || b.x1 <= a.x0 || a.y1 <= b.y0 || b.y1 <= a.y0
-        expect(apart, `${a.rel} vs ${b.rel}`).toBe(true)
-      }
-    }
-  })
-})

package/src/__tests__/c4-line-ends-1208.test.ts

@@ -1,52 +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 { c4PersonGeometry } from '../c4/metrics.ts'
-
-// A relationship meets a cylinder, pipe or person where Mermaid's own shape
-// outline puts it, not at the box around the shape (#1208). The pipe and the
-// oblique person cases are checked against recorded Mermaid output in
-// c4-mermaid-reference.test.ts.
-const layout = (src: string) =>
-  layoutC4DiagramSync(parseC4Diagram(splitStatements(src)))
-
-describe('C4 line ends on shaped elements (#1208)', () => {
-  // Row 1 holds four shapes and row 2 starts under the first, so the line from
-  // `b` down to the database arrives from the upper right.
-  const src = `C4Context
-  System(a, "A")
-  System(b, "B")
-  System(c, "C")
-  System(e, "E")
-  SystemDb(db, "Store")
-  Rel(b, db, "Reads")`
-
-  it('ends a slanted line on the curve of the cylinder cap, below the box top', () => {
-    const d = layout(src)
-    const store = d.elements.find((e) => e.alias === 'db')!
-    const [, end] = d.relationships[0]!.points
-    // 84.4px right of the centre the cap (rx 108, ry 15.8) has dropped
-    // 5.9px, so the line ends 5.9px under the top of the box, not on it.
-    expect(end!.y - store.y).toBeCloseTo(5.96, 1)
-  })
-
-  it('ends a line into the bottom middle of a cylinder at the box bottom', () => {
-    const d = layout(`C4Context
-  SystemDb(db, "Store")
-  System(b, "B")
-  System(c, "C")
-  System(e, "E")
-  System(f, "F")
-  Rel(f, db, "Reads")`)
-    const store = d.elements.find((e) => e.alias === 'db')!
-    const [, end] = d.relationships[0]!.points
-    // Straight below the centre the ellipse is at its lowest: no lift.
-    expect(end!.y - (store.y + store.height)).toBeCloseTo(0, 5)
-  })
-
-  it("keeps a wide person head at Mermaid's 56px radius cap", () => {
-    expect(c4PersonGeometry(216).headRadius).toBeCloseTo(49.68, 2)
-    expect(c4PersonGeometry(400).headRadius).toBe(56)
-  })
-})

package/src/__tests__/c4-mermaid-reference.test.ts

@@ -1,124 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { readFileSync } from 'node:fs'
-import { splitStatements } from '@zombie-mermaid/core'
-import { parseC4Diagram } from '@zombie-mermaid/mermaid-parser'
-import { layoutC4DiagramSync } from '../c4/layout.ts'
-
-// Each case is a C4 source rendered by real Mermaid 11.17.2 (headless Chrome,
-// screen width 1440), with the numbers read back from its SVG: the diagram
-// size, the centre of every shape, and each relationship's line and label.
-// The sources vary on purpose (shapes of every kind, wrapped names and
-// descriptions, boundaries nested and side by side, relationships in every
-// direction), so a constant tuned to one sample cannot satisfy all of them.
-//
-// Vertical numbers depend only on heights and gaps, so they must agree to a
-// few pixels. Horizontal ones depend on text widths, which this package sums
-// from Arial advances (Mermaid measures them in a browser), and relationship
-// ends follow each shape's own outline, as Mermaid's do.
-interface Reference {
-  name: string
-  source: string
-  width: number
-  height: number
-  elements: Record<string, [number, number]>
-  relationships: { line: number[]; label?: [number, number] }[]
-}
-
-const cases: Reference[] = JSON.parse(
-  readFileSync(
-    new URL('./fixtures/c4-mermaid-reference.json', import.meta.url),
-    'utf8',
-  ),
-)
-
-const Y = 3
-const X = 2
-const LINE = 3
-// Relationships whose end this package cannot place within LINE, with the
-// reason. Each is a limit of the shape outline, not of the text widths.
-const WIDER_LINE = 9
-const WIDER: Record<string, number[]> = {
-  // A line that skims along the top of a person's body, where the pill meets
-  // the head: 0.25px of height moves where it crosses by about 8px.
-  'v02-person-targets': [3],
-}
-const LABEL = 10
-// Deliberate difference (#1209): Mermaid merges two relationships with the
-// same from/to (the later one wins, one line drawn). This package draws both,
-// so a relationship the author wrote is never dropped. Each entry is a case
-// where Mermaid drew `n` lines for a source with `n + 1` relationships.
-const DUPLICATE_PAIRS = new Set(['v07-dynamic'])
-
-describe('C4 SVG layout against Mermaid on varied diagrams', () => {
-  it('covers a spread of diagrams', () => {
-    expect(cases.length).toBeGreaterThanOrEqual(30)
-  })
-
-  for (const ref of cases) {
-    it(`${ref.name} matches Mermaid`, () => {
-      const d = layoutC4DiagramSync(parseC4Diagram(splitStatements(ref.source)))
-      expect(Math.abs(d.height - ref.height), 'diagram height').toBeLessThan(Y)
-      expect(Math.abs(d.width - ref.width), 'diagram width').toBeLessThan(X)
-
-      for (const e of d.elements) {
-        const r = ref.elements[e.alias]
-        if (!r) continue
-        const cx = e.x + e.width / 2
-        const cy = e.y + e.height / 2
-        expect(Math.abs(cx - r[0]), `${e.alias} centre x`).toBeLessThan(X)
-        expect(Math.abs(cy - r[1]), `${e.alias} centre y`).toBeLessThan(Y)
-      }
-
-      // Mermaid merges duplicate pairs and this package draws both (see
-      // DUPLICATE_PAIRS), so the lines only line up when the counts agree.
-      // A count mismatch is only allowed for a listed case, and there it must
-      // be exactly the duplicate that is drawn extra.
-      if (DUPLICATE_PAIRS.has(ref.name)) {
-        expect(d.relationships.length, 'both duplicate lines drawn').toBe(
-          ref.relationships.length + 1,
-        )
-        const pairs = d.relationships.map((r) => `${r.from}>${r.to}`)
-        expect(
-          new Set(pairs).size,
-          'a pair is drawn twice, as written',
-        ).toBeLessThan(pairs.length)
-        return
-      }
-      expect(d.relationships.length, 'relationship count').toBe(
-        ref.relationships.length,
-      )
-      d.relationships.forEach((rel, i) => {
-        const r = ref.relationships[i]!
-        const [s, e] = rel.points
-        const got = [s!.x, s!.y, e!.x, e!.y]
-        const limit = WIDER[ref.name]?.includes(i + 1) ? WIDER_LINE : LINE
-        got.forEach((v, k) => {
-          expect(
-            Math.abs(v - r.line[k]!),
-            `relationship ${i + 1} line[${k}]`,
-          ).toBeLessThan(limit)
-        })
-        if (r.label && rel.labelPosition) {
-          // Mermaid's label can sit on a shape; this package slides it along
-          // the chord to clear it (#1290). That is the one allowed difference:
-          // the label may move along the line but not off it.
-          const dx = e!.x - s!.x
-          const dy = e!.y - s!.y
-          const len = Math.hypot(dx, dy)
-          const across = (p: { x: number; y: number }): number =>
-            ((p.x - s!.x) * dy - (p.y - s!.y) * dx) / len
-          const ref0 = { x: r.label[0], y: r.label[1] }
-          const moved =
-            Math.abs(rel.labelPosition.x - ref0.x) >= LABEL ||
-            Math.abs(rel.labelPosition.y - ref0.y) >= LABEL
-          if (moved) {
-            expect(
-              Math.abs(across(rel.labelPosition) - across(ref0)),
-              `relationship ${i + 1} label is off the chord`,
-            ).toBeLessThan(LABEL)
-          }
-        }
-      })
-    })
-  }
-})