@zombie-mermaid/svg-renderer 4.2.3 → 5.0.1

package/src/layout-engine.ts

@@ -1,115 +0,0 @@
-/**
- * Layout engine for zombie-mermaid (ELK.js based).
- *
- * Converts MermaidGraph to ELK's JSON format, runs layout, and converts
- * the result back to PositionedGraph. This is the core layout engine used
- * by all graph-based diagram types (flowcharts, state, ER, class).
- *
- * ELK (Eclipse Layout Kernel) features:
- *   - Native orthogonal edge routing (no post-processing needed)
- *   - Proper handling of compound nodes (subgraphs)
- *   - Support for disconnected graphs
- *   - Direction overrides per subgraph
- *   - Sophisticated algorithms for complex graphs
- *
- * Uses elk.bundled.js (pure synchronous JS, no WASM/Workers).
- * Safe for Electron, Node, and browser environments.
- *
- * This file is the public entry point (layoutGraphSync, convertToElkFormat).
- * The implementation is split across src/layout-engine/ by pipeline stage:
- *   - to-elk.ts          MermaidGraph → ELK JSON input
- *   - from-elk.ts         ELK result → PositionedGraph, plus shape clipping
- *   - layer-alignment.ts  post-process: snap same-layer nodes to a uniform position
- *   - edge-bundling.ts    post-process: merge fan-out/fan-in edges into shared trunks
- * See packages/svg-renderer/src/layout-engine/constants.ts for the shared DEFAULTS used across stages.
- */
-
-import type { ElkNode } from 'elkjs'
-import type {
-  MermaidGraph,
-  PositionedGraph,
-  FlowchartRenderOptions,
-} from '@zombie-mermaid/core'
-import { withoutOwnClusterEdges } from '@zombie-mermaid/core'
-import { elkLayoutSync } from './elk-instance.ts'
-import { resolveFontSizes } from './styles.ts'
-import { DEFAULTS } from './layout-engine/constants.ts'
-import { mermaidToElk } from './layout-engine/to-elk.ts'
-import { elkToPositioned } from './layout-engine/from-elk.ts'
-import {
-  canLayOutFlat,
-  layoutCompoundFlat,
-} from './layout-engine/compound-flat.ts'
-import type { LayoutHints } from './layout-engine/layout-hints.ts'
-
-// ============================================================================
-// Public API
-// ============================================================================
-
-/**
- * Lay out a parsed MermaidGraph using ELK.js (synchronous).
- * Returns a fully positioned graph ready for rendering.
- */
-export function layoutGraphSync(
-  graph: MermaidGraph,
-  options: FlowchartRenderOptions = {},
-): PositionedGraph {
-  return layoutWithHints(graph, options)
-}
-
-/** One layout run, with the hints the compound layout gives it. */
-function layoutWithHints(
-  graph: MermaidGraph,
-  options: FlowchartRenderOptions,
-  hints?: LayoutHints,
-): PositionedGraph {
-  const opts = {
-    ...DEFAULTS,
-    ...options,
-    fontSizes: resolveFontSizes(options.fontSizes),
-  }
-  const elkGraph = mermaidToElk(graph, opts, hints)
-  const result = elkLayoutSync(elkGraph, options.layoutCache)
-  return elkToPositioned(result, graph, opts.mergeEdges)
-}
-
-/**
- * Lay out a flowchart, with its subgraphs arranged the way mermaid.js arranges
- * them (see `layout-engine/compound-flat.ts`). Anything that layout doesn't
- * handle, or can't make fit, is laid out by `layoutGraphSync`, so this is a
- * drop-in for it wherever the graph is a flowchart. Other diagram types that
- * share the engine (state, architecture) keep using `layoutGraphSync`.
- */
-export function layoutFlowchartSync(
-  rawGraph: MermaidGraph,
-  options: FlowchartRenderOptions = {},
-): PositionedGraph {
-  // Real mermaid.js draws no line for an edge between a node and a subgraph
-  // containing it (#1310), so it is not laid out or rendered here either.
-  const graph = withoutOwnClusterEdges(rawGraph)
-  if (canLayOutFlat(graph)) {
-    const fontSizes = resolveFontSizes(options.fontSizes)
-    const flat = layoutCompoundFlat(
-      graph,
-      (g, hints) => layoutWithHints(g, options, hints),
-      fontSizes,
-    )
-    if (flat) return flat
-  }
-  return layoutGraphSync(graph, options)
-}
-
-/**
- * Convert MermaidGraph to ELK format (for benchmarking conversion overhead).
- */
-export function convertToElkFormat(
-  graph: MermaidGraph,
-  options: FlowchartRenderOptions = {},
-): ElkNode {
-  const opts = {
-    ...DEFAULTS,
-    ...options,
-    fontSizes: resolveFontSizes(options.fontSizes),
-  }
-  return mermaidToElk(graph, opts)
-}

package/src/pie/layout.ts

@@ -1,234 +0,0 @@
-// ============================================================================
-// Pie chart layout
-//
-// Turns a parsed PieChart into absolute SVG geometry, following Mermaid's own
-// renderer (packages/mermaid/src/diagrams/pie/pieRenderer.ts, default config:
-// textPosition 0.75, no donut hole, legend on the right):
-//
-//   - a 450 x 450 frame with a 40px margin, so the pie radius is 185 and its
-//     centre sits at (225, 225); a 2px outline circle of radius 186 around it
-//   - slices in source order, clockwise from 12 o'clock (d3.pie with
-//     sort(null)); slices under 1% of the total are left out and the rest
-//     share the full circle between them
-//   - each drawn slice labelled with `toFixed(0)` of its share of the
-//     *whole* total (omitted slices included), at 0.75 of the radius
-//   - the title centred over the pie with its baseline 25px from the top
-//   - a legend row for every slice, omitted ones included: an 18px swatch
-//     and the label (or `label [value]` with showData), rows 22px apart,
-//     vertically centred on the pie, starting 216px right of its centre
-//   - width = pie + margin + swatch + gap + longest legend text, widened to
-//     fit a title wider than that
-//
-// Two places differ from Mermaid on purpose, both where Mermaid's output is
-// broken rather than a style choice:
-//   - A legend taller than the 450px frame (more than ~20 rows) grows the
-//     viewBox instead of being clipped at the top and bottom.
-//   - A chart with no slices keeps the pie's own width. Mermaid's width
-//     formula takes Math.max() of an empty list there (-Infinity), which
-//     leaves a viewBox that crops the circle in half.
-//
-// Lengths are kept from Mermaid as-is. Text widths come from this library's
-// own metrics for its own font, not Mermaid's "trebuchet ms".
-// ============================================================================
-
-import type {
-  PieChart,
-  PositionedPieChart,
-  PositionedPieLegendItem,
-  PositionedPieSlice,
-} from '@zombie-mermaid/mermaid-parser'
-import { estimateTextWidth } from '../styles.ts'
-
-/** Mermaid pieRenderer.ts constants (default config and default theme). */
-export const PIE = {
-  /** Frame height; the pie's own width equals it. */
-  height: 450,
-  margin: 40,
-  legendRectSize: 18,
-  legendSpacing: 4,
-  /** `pie.textPosition` default: label distance as a fraction of the radius. */
-  textPosition: 0.75,
-  /** `pieOuterStrokeWidth`; the outline circle sits half of it outside the pie. */
-  outerStrokeWidth: 2,
-  /** `pieTitleTextSize` */
-  titleFontSize: 25,
-  /** `pieSectionTextSize` */
-  sectionFontSize: 17,
-  /** `pieLegendTextSize` */
-  legendFontSize: 17,
-  fontWeight: 400,
-  /** Mermaid's `pie1`..`pie12` scale wraps after this many colours. */
-  paletteSize: 12,
-  /** Slices below this percentage of the total are not drawn. */
-  minPercent: 1,
-} as const
-
-const TAU = Math.PI * 2
-
-/** Round to two decimals for compact path data. */
-function r(n: number): string {
-  return String(Math.round(n * 100) / 100)
-}
-
-/** Point on a circle, angle in radians clockwise from 12 o'clock (d3's convention). */
-function polar(
-  cx: number,
-  cy: number,
-  radius: number,
-  angle: number,
-): { x: number; y: number } {
-  return { x: cx + radius * Math.sin(angle), y: cy - radius * Math.cos(angle) }
-}
-
-/** Wedge path, or a full circle when the slice covers the whole pie. */
-function slicePath(
-  cx: number,
-  cy: number,
-  radius: number,
-  start: number,
-  end: number,
-): string {
-  if (end - start >= TAU - 1e-9) {
-    return (
-      `M${r(cx)},${r(cy - radius)}` +
-      `A${r(radius)},${r(radius)},0,1,1,${r(cx)},${r(cy + radius)}` +
-      `A${r(radius)},${r(radius)},0,1,1,${r(cx)},${r(cy - radius)}Z`
-    )
-  }
-  const p0 = polar(cx, cy, radius, start)
-  const p1 = polar(cx, cy, radius, end)
-  const large = end - start > Math.PI ? 1 : 0
-  return (
-    `M${r(p0.x)},${r(p0.y)}` +
-    `A${r(radius)},${r(radius)},0,${large},1,${r(p1.x)},${r(p1.y)}` +
-    `L${r(cx)},${r(cy)}Z`
-  )
-}
-
-/** Legend row text, as Mermaid builds it: `String(value)`, no number formatting. */
-function legendText(label: string, value: number, showData: boolean): string {
-  return showData ? `${label} [${String(value)}]` : label
-}
-
-/** Lay out a parsed pie chart. Options are accepted for registry parity; none apply. */
-export function layoutPieChart(
-  chart: PieChart,
-  _options: unknown = {},
-): PositionedPieChart {
-  const height = PIE.height
-  const pieWidth = height
-  const radius = Math.min(pieWidth, height) / 2 - PIE.margin
-  // Everything below is first computed in Mermaid's frame (pie centre at
-  // (225, 225)), then shifted so the viewBox starts at (0, 0).
-  const cx0 = pieWidth / 2
-  const cy0 = height / 2
-
-  const total = chart.slices.reduce((sum, s) => sum + s.value, 0)
-
-  // createPieArcs(): keep slices at or above 1% of the total. A zero total
-  // gives NaN here, which drops every slice, as in Mermaid. (Mermaid filters
-  // a second time on `toFixed(0) !== '0'`, which nothing at or above 1% can
-  // fail, so that step is not repeated.)
-  const drawn = chart.slices
-    .map((slice, index) => ({ slice, colorIndex: index % PIE.paletteSize }))
-    .filter(({ slice }) => (slice.value / total) * 100 >= PIE.minPercent)
-  // d3.pie() spreads the full circle over the slices it is given.
-  const drawnTotal = drawn.reduce((sum, d) => sum + d.slice.value, 0)
-
-  // Legend geometry (Mermaid's 'right' position).
-  const rowHeight = PIE.legendRectSize + PIE.legendSpacing
-  const rowCount = chart.slices.length
-  const legendOffset = (rowHeight * rowCount) / 2
-  const legendX0 = cx0 + 12 * PIE.legendRectSize
-  const legendTexts = chart.slices.map((s) =>
-    legendText(s.label, s.value, chart.showData),
-  )
-  const longestText = Math.max(
-    0,
-    ...legendTexts.map((t) =>
-      estimateTextWidth(t, PIE.legendFontSize, PIE.fontWeight),
-    ),
-  )
-
-  const chartAndLegendWidth =
-    rowCount > 0
-      ? pieWidth +
-        PIE.margin +
-        PIE.legendRectSize +
-        PIE.legendSpacing +
-        longestText
-      : pieWidth + PIE.margin
-
-  const titleText = chart.title ?? ''
-  const titleWidth =
-    titleText.length > 0
-      ? estimateTextWidth(titleText, PIE.titleFontSize, PIE.fontWeight)
-      : 0
-  const titleLeft = cx0 - titleWidth / 2
-  const titleRight = cx0 + titleWidth / 2
-
-  const minX = Math.min(0, titleLeft)
-  const maxX = Math.max(chartAndLegendWidth, titleRight)
-  const legendTop = cy0 - legendOffset
-  const legendBottom =
-    cy0 + (rowCount - 1) * rowHeight - legendOffset + PIE.legendRectSize
-  const minY = rowCount > 0 ? Math.min(0, legendTop) : 0
-  const maxY = rowCount > 0 ? Math.max(height, legendBottom) : height
-
-  const dx = -minX
-  const dy = -minY
-  const cx = cx0 + dx
-  const cy = cy0 + dy
-
-  const slices: PositionedPieSlice[] = []
-  let angle = 0
-  const labelRadius = radius * PIE.textPosition
-  for (const { slice, colorIndex } of drawn) {
-    const start = angle
-    const end = angle + (slice.value / drawnTotal) * TAU
-    angle = end
-    const label = polar(cx, cy, labelRadius, (start + end) / 2)
-    slices.push({
-      label: slice.label,
-      value: slice.value,
-      colorIndex,
-      startAngle: start,
-      endAngle: end,
-      path: slicePath(cx, cy, radius, start, end),
-      percentText: `${((slice.value / total) * 100).toFixed(0)}%`,
-      labelX: label.x,
-      labelY: label.y,
-    })
-  }
-
-  const legend: PositionedPieLegendItem[] = legendTexts.map((text, index) => {
-    const x = legendX0 + dx
-    const y = cy0 + index * rowHeight - legendOffset + dy
-    return {
-      text,
-      colorIndex: index % PIE.paletteSize,
-      x,
-      y,
-      size: PIE.legendRectSize,
-      textX: x + PIE.legendRectSize + PIE.legendSpacing,
-      textY: y + PIE.legendRectSize - PIE.legendSpacing,
-    }
-  })
-
-  return {
-    width: Math.ceil(maxX - minX),
-    height: Math.ceil(maxY - minY),
-    cx,
-    cy,
-    radius,
-    outerRadius: radius + PIE.outerStrokeWidth / 2,
-    title:
-      titleText.length > 0
-        ? { text: titleText, x: cx, y: cy - (height - 50) / 2 }
-        : undefined,
-    slices,
-    legend,
-    accTitle: chart.accTitle,
-    accDescr: chart.accDescr,
-  }
-}

package/src/pie/renderer.ts

@@ -1,161 +0,0 @@
-// ============================================================================
-// Pie chart SVG renderer
-//
-// Draws a PositionedPieChart (see ./layout.ts) in Mermaid's own structure and
-// paint order: outline circle, slices, percentage labels, title, legend.
-//
-// Styling follows Mermaid's pieStyles.ts and default theme, mapped onto this
-// library's CSS custom properties so every theme (and live theme switching
-// through `--bg`/`--fg`/`--accent`) applies:
-//
-//   Mermaid                         here
-//   pie1..pie12                     --pie-color-0..11: the theme accent, then
-//                                   getSeriesColor() shades of it (the same
-//                                   palette xychart series use)
-//   slice opacity 0.7               opacity: 0.7 (on fill and stroke, as there)
-//   pieStrokeColor black, 2px       var(--fg), 2px
-//   pieOuterStrokeColor black, 2px  var(--fg), 2px
-//   title 25px, legend/labels 17px  same sizes, regular weight
-//   text colours (black / #333)     var(--_text)
-//
-// The legend swatch is filled and stroked with the slice colour at full
-// opacity, as in Mermaid. There are no tooltips or hover effects: Mermaid
-// draws none by default (`highlightSlice` is off), so `interactivity` does
-// not change the output.
-// ============================================================================
-
-import type { PositionedPieChart } from '@zombie-mermaid/mermaid-parser'
-import type { DiagramColors, SvgEmitOptions } from '@zombie-mermaid/core'
-import {
-  svgOpenTag,
-  buildStyleBlock,
-  styleOpenTag,
-  escapeXml,
-  escapeAttr,
-} from '@zombie-mermaid/core'
-import {
-  getSeriesColor,
-  CHART_ACCENT_FALLBACK,
-} from '@zombie-mermaid/mermaid-parser'
-import { withDataSrc } from '../renderer.ts'
-import { PIE } from './layout.ts'
-
-function r(n: number): string {
-  return String(Math.round(n * 100) / 100)
-}
-
-/** CSS value for palette slot `index`: slot 0 follows `--accent` live. */
-export function pieColorValue(
-  index: number,
-  accent: string | undefined,
-  bg: string,
-): string {
-  if (index === 0) return `var(--accent, ${CHART_ACCENT_FALLBACK})`
-  return getSeriesColor(index, accent ?? CHART_ACCENT_FALLBACK, bg)
-}
-
-function pieStyles(
-  chart: PositionedPieChart,
-  colors: DiagramColors,
-  nonce?: string,
-): string {
-  const used = new Set<number>()
-  for (const s of chart.slices) used.add(s.colorIndex)
-  for (const l of chart.legend) used.add(l.colorIndex)
-  const indices = [...used].sort((a, b) => a - b)
-
-  const vars = indices.map(
-    (i) =>
-      `    --pie-color-${i}: ${pieColorValue(i, colors.accent, colors.bg)};`,
-  )
-  const rules = indices.map(
-    (i) =>
-      `  .pie-color-${i} { fill: var(--pie-color-${i}); }\n` +
-      `  rect.pie-color-${i} { stroke: var(--pie-color-${i}); }`,
-  )
-  const varsBlock = vars.length > 0 ? `\n  svg {\n${vars.join('\n')}\n  }` : ''
-
-  return `${styleOpenTag(nonce)}
-  .pie-outer { fill: none; stroke: var(--fg); stroke-width: ${PIE.outerStrokeWidth}px; }
-  .pie-slice { stroke: var(--fg); stroke-width: 2px; opacity: 0.7; }
-  .pie-slice-label { fill: var(--_text); font-size: ${PIE.sectionFontSize}px; font-weight: ${PIE.fontWeight}; }
-  .pie-title { fill: var(--_text); font-size: ${PIE.titleFontSize}px; font-weight: ${PIE.fontWeight}; }
-  .pie-legend-text { fill: var(--_text); font-size: ${PIE.legendFontSize}px; font-weight: ${PIE.fontWeight}; }${varsBlock}
-${rules.join('\n')}
-</style>`
-}
-
-/**
- * Render a positioned pie chart as an SVG string.
- *
- * The accessible name is `title` (from `options.title`) when given,
- * otherwise the chart's own `accTitle`; `accDescr` becomes the root
- * `<desc>`. Both are dropped when `decorative` is set — see svgOpenTag() in
- * packages/core/src/theme.ts.
- */
-export function renderPieSvg(
-  chart: PositionedPieChart,
-  colors: DiagramColors,
-  font: string = 'Inter',
-  transparent: boolean = false,
-  embedSource?: string,
-  title?: string,
-  decorative?: boolean,
-  emit: SvgEmitOptions = {},
-): string {
-  const parts: string[] = []
-
-  parts.push(
-    withDataSrc(
-      svgOpenTag(
-        chart.width,
-        chart.height,
-        colors,
-        transparent,
-        title ?? chart.accTitle,
-        decorative,
-        undefined,
-        emit.styleAttribute,
-        chart.accDescr,
-      ),
-      embedSource,
-    ),
-  )
-  parts.push(buildStyleBlock(font, false, emit.nonce))
-  parts.push(pieStyles(chart, colors, emit.nonce))
-
-  parts.push(
-    `<circle cx="${r(chart.cx)}" cy="${r(chart.cy)}" r="${r(chart.outerRadius)}" class="pie-outer"/>`,
-  )
-
-  for (const s of chart.slices) {
-    parts.push(
-      `<path d="${s.path}" class="pie-slice pie-color-${s.colorIndex}"` +
-        ` data-label="${escapeAttr(s.label)}" data-value="${s.value}"/>`,
-    )
-  }
-
-  for (const s of chart.slices) {
-    parts.push(
-      `<text x="${r(s.labelX)}" y="${r(s.labelY)}" text-anchor="middle" class="pie-slice-label">${escapeXml(s.percentText)}</text>`,
-    )
-  }
-
-  if (chart.title) {
-    parts.push(
-      `<text x="${r(chart.title.x)}" y="${r(chart.title.y)}" text-anchor="middle" class="pie-title">${escapeXml(chart.title.text)}</text>`,
-    )
-  }
-
-  for (const item of chart.legend) {
-    parts.push(
-      `<g class="pie-legend">` +
-        `<rect x="${r(item.x)}" y="${r(item.y)}" width="${item.size}" height="${item.size}" class="pie-legend-swatch pie-color-${item.colorIndex}"/>` +
-        `<text x="${r(item.textX)}" y="${r(item.textY)}" class="pie-legend-text">${escapeXml(item.text)}</text>` +
-        `</g>`,
-    )
-  }
-
-  parts.push('</svg>')
-  return parts.join('\n')
-}