@zombie-mermaid/svg-renderer 4.0.0 → 4.2.0

package/src/registry.ts

@@ -57,6 +57,7 @@ import {
   parseArchitecture,
   architectureToGraph,
   parseC4Diagram,
+  parsePieChart,
 } from '@zombie-mermaid/mermaid-parser'
 import type {
   XYChart,
@@ -70,6 +71,8 @@ import type {
   ArchitectureDiagram,
   C4Diagram,
   PositionedC4Diagram,
+  PieChart,
+  PositionedPieChart,
 } from '@zombie-mermaid/mermaid-parser'
 import { layoutXYChart } from './xychart/layout.ts'
 import { renderXYChartSvg } from './xychart/renderer.ts'
@@ -81,9 +84,11 @@ import { layoutClassDiagramSync } from './class/layout.ts'
 import { renderClassSvg } from './class/renderer.ts'
 import { layoutC4DiagramSync } from './c4/layout.ts'
 import { renderC4Svg } from './c4/renderer.ts'
+import { layoutPieChart } from './pie/layout.ts'
+import { renderPieSvg } from './pie/renderer.ts'
 import { layoutFlowchartSync, layoutGraphSync } from './layout-engine.ts'
 import { renderSvg as renderFlowchartSvg } from './renderer.ts'
-import { parseMermaid } from '../../../src/parser.ts'
+import { parseMermaid } from '@zombie-mermaid/mermaid-parser'
 
 /**
  * Parameters shared by every per-type SVG renderer today, factored out of
@@ -380,6 +385,30 @@ const architectureModule: DiagramModule<
   renderSvg: flowchartModule.renderSvg,
 }
 
+/**
+ * Pie charts parse from the raw `text` rather than `lines` (see
+ * `parsePieChart`'s doc: `splitStatements` would split `title A; B` and
+ * treat `'` as a quote), then lay out and render to Mermaid's geometry —
+ * see ./pie/layout.ts. No direction or interactivity applies.
+ */
+const pieModule: DiagramModule<PieChart, PositionedPieChart> = {
+  type: 'pie',
+  parse: (_lines, text) => parsePieChart(text),
+  layoutForSvg: layoutPieChart,
+  renderSvg(positioned, ctx) {
+    return renderPieSvg(
+      positioned,
+      ctx.colors,
+      ctx.font,
+      ctx.transparent,
+      ctx.embedSource,
+      ctx.title,
+      ctx.decorative,
+      ctx.emit,
+    )
+  },
+}
+
 /**
  * The registry proper — every `DiagramType` is looked up here by the SVG
  * front door (`renderMermaidSVG` in ./index.ts), which has no fallback
@@ -408,4 +437,5 @@ export const diagramRegistry: Record<DiagramType, AnyDiagramModule> = {
   architecture: architectureModule,
 
   c4: c4Module,
+  pie: pieModule,
 }

package/src/styles.ts

@@ -7,7 +7,11 @@
 // contains font metrics, spacing constants, and stroke widths.
 // ============================================================================
 
-import { measureTextWidth } from '@zombie-mermaid/core'
+import { buildStyleBlock, measureTextWidth } from '@zombie-mermaid/core'
+import {
+  MONO_FONT_FAMILY as EMBEDDED_MONO_FONT_FAMILY,
+  MONO_FONT_FACE_CSS as EMBEDDED_MONO_FONT_FACE_CSS,
+} from './generated/mono-font-subset.ts'
 
 /** Average character width in px at the given font size and weight (proportional font) */
 export function estimateTextWidth(
@@ -116,3 +120,26 @@ export const ARROW_HEAD = {
   width: 8,
   height: 5,
 } as const
+
+/**
+ * SVG `<style>` block for a diagram: core's `buildStyleBlock` plus, when
+ * `hasMonoFont` is set, the self-hosted mono font subset for the `.mono`
+ * rule. The subset lives here rather than in `core` because only SVG output
+ * embeds it (#1319).
+ */
+export function buildSvgStyleBlock(
+  font: string,
+  hasMonoFont: boolean,
+  nonce?: string,
+): string {
+  return buildStyleBlock(
+    font,
+    hasMonoFont
+      ? {
+          family: EMBEDDED_MONO_FONT_FAMILY,
+          faceCss: EMBEDDED_MONO_FONT_FACE_CSS,
+        }
+      : false,
+    nonce,
+  )
+}

package/src/title-gaps.ts

@@ -86,14 +86,29 @@ function segmentHitsBox(a: Point, b: Point, box: TitleTextBox): boolean {
   return true
 }
 
-/** Whether any segment of `edge` passes through any of the `boxes`. */
+/** The box without its `GAP_PADDING` clearance: the text itself. */
+function textOnly(box: TitleTextBox): TitleTextBox {
+  return {
+    x: box.x + GAP_PADDING,
+    y: box.y + GAP_PADDING,
+    width: box.width - 2 * GAP_PADDING,
+    height: box.height - 2 * GAP_PADDING,
+  }
+}
+
+/**
+ * Whether any segment of `edge` passes through the text of any of the `boxes`.
+ * The padding only widens the hole that is cut; an edge that merely passes
+ * through the clearance beside the text does not need a gap.
+ */
 export function edgeCrossesTitle(
   edge: PositionedEdge,
   boxes: TitleTextBox[],
 ): boolean {
   const pts = edge.points
+  const texts = boxes.map(textOnly)
   for (let i = 0; i + 1 < pts.length; i++) {
-    if (boxes.some((box) => segmentHitsBox(pts[i]!, pts[i + 1]!, box))) {
+    if (texts.some((box) => segmentHitsBox(pts[i]!, pts[i + 1]!, box))) {
       return true
     }
   }