@zombie-mermaid/svg-renderer 4.2.2 → 5.0.0

package/src/shape-clipping.ts

@@ -1,197 +0,0 @@
-/**
- * Shape-aware edge clipping utilities.
- *
- * ELK.js treats all nodes as rectangles for edge routing. For non-rectangular
- * shapes like diamonds, this causes edges to terminate at the bounding box
- * boundary instead of the actual shape vertices.
- *
- * This module provides utilities to clip edge endpoints to actual shape
- * boundaries after ELK layout is complete.
- */
-
-import type { Point, PositionedNode } from '@zombie-mermaid/core'
-
-/**
- * Clip an edge endpoint to the actual shape boundary of a node.
- *
- * @param points - The edge points array
- * @param node - The node to clip to
- * @param isStart - True if clipping the start point (source), false for end (target)
- * @returns New points array with clipped endpoint
- */
-export function clipEdgeToShape(
-  points: Point[],
-  node: PositionedNode,
-  isStart: boolean,
-): Point[] {
-  if (points.length < 2) return points
-
-  // Only clip non-rectangular shapes
-  if (
-    node.shape === 'rectangle' ||
-    node.shape === 'rounded' ||
-    node.shape === 'stadium'
-  ) {
-    return points
-  }
-
-  const result = [...points]
-
-  if (node.shape === 'diamond') {
-    if (isStart) {
-      result[0] = clipToDiamond(points[0]!, points[1]!, node)
-    } else {
-      const lastIdx = points.length - 1
-      result[lastIdx] = clipToDiamond(
-        points[lastIdx]!,
-        points[lastIdx - 1]!,
-        node,
-      )
-    }
-  }
-  // Future: add clipping for hexagon, circle, etc.
-
-  return result
-}
-
-/**
- * Clip a point to the diamond shape boundary using ray-polygon intersection.
- *
- * Diamond vertices are at the midpoints of the bounding box sides:
- * - Top: (cx, y)
- * - Right: (x + w, cy)
- * - Bottom: (cx, y + h)
- * - Left: (x, cy)
- *
- * For orthogonal edges, we extend the final segment as a ray and find where
- * it intersects the diamond boundary. This preserves orthogonality while
- * ensuring the edge terminates at the actual diamond shape.
- *
- * @param endpoint - The edge endpoint to clip
- * @param adjacent - The adjacent point (to determine ray direction)
- * @param node - The diamond node
- * @returns Clipped point on the diamond boundary
- */
-function clipToDiamond(
-  endpoint: Point,
-  adjacent: Point,
-  node: PositionedNode,
-): Point {
-  const cx = node.x + node.width / 2
-  const cy = node.y + node.height / 2
-
-  // Diamond vertices
-  const top: Point = { x: cx, y: node.y }
-  const right: Point = { x: node.x + node.width, y: cy }
-  const bottom: Point = { x: cx, y: node.y + node.height }
-  const left: Point = { x: node.x, y: cy }
-
-  // Determine approach direction from adjacent point
-  const dx = endpoint.x - adjacent.x
-  const dy = endpoint.y - adjacent.y
-
-  // For orthogonal edges, one of dx or dy will be ~0
-  const isVertical = Math.abs(dx) < Math.abs(dy)
-
-  if (isVertical) {
-    // Vertical ray at x = endpoint.x
-    const rayX = endpoint.x
-
-    if (dy > 0) {
-      // Coming from above (moving down) → intersect with top half of diamond
-      // Top half edges: left-top (left → top) and top-right (top → right)
-      if (rayX <= cx) {
-        // Intersect with left-top edge (from left vertex to top vertex)
-        return intersectVerticalRayWithEdge(rayX, left, top) ?? top
-      } else {
-        // Intersect with top-right edge (from top vertex to right vertex)
-        return intersectVerticalRayWithEdge(rayX, top, right) ?? top
-      }
-    } else {
-      // Coming from below (moving up) → intersect with bottom half of diamond
-      // Bottom half edges: left-bottom (bottom → left) and bottom-right (right → bottom)
-      if (rayX <= cx) {
-        // Intersect with bottom-left edge (from bottom vertex to left vertex)
-        return intersectVerticalRayWithEdge(rayX, bottom, left) ?? bottom
-      } else {
-        // Intersect with bottom-right edge (from right vertex to bottom vertex)
-        return intersectVerticalRayWithEdge(rayX, right, bottom) ?? bottom
-      }
-    }
-  } else {
-    // Horizontal ray at y = endpoint.y
-    const rayY = endpoint.y
-
-    if (dx > 0) {
-      // Coming from left (moving right) → intersect with left half of diamond
-      // Left half edges: top-left (top → left) and left-bottom (left → bottom)
-      if (rayY <= cy) {
-        // Intersect with top-left edge (from top vertex to left vertex)
-        return intersectHorizontalRayWithEdge(rayY, top, left) ?? left
-      } else {
-        // Intersect with left-bottom edge (from left vertex to bottom vertex)
-        return intersectHorizontalRayWithEdge(rayY, left, bottom) ?? left
-      }
-    } else {
-      // Coming from right (moving left) → intersect with right half of diamond
-      // Right half edges: top-right (top → right) and right-bottom (right → bottom)
-      if (rayY <= cy) {
-        // Intersect with top-right edge (from top vertex to right vertex)
-        return intersectHorizontalRayWithEdge(rayY, top, right) ?? right
-      } else {
-        // Intersect with right-bottom edge (from right vertex to bottom vertex)
-        return intersectHorizontalRayWithEdge(rayY, right, bottom) ?? right
-      }
-    }
-  }
-}
-
-/**
- * Find intersection of a horizontal ray (y = rayY) with a line segment.
- * Returns the intersection point or null if no intersection.
- */
-function intersectHorizontalRayWithEdge(
-  rayY: number,
-  p1: Point,
-  p2: Point,
-): Point | null {
-  const dy = p2.y - p1.y
-  if (Math.abs(dy) < 0.001) {
-    // Edge is horizontal, no single intersection
-    return null
-  }
-
-  const t = (rayY - p1.y) / dy
-  if (t < 0 || t > 1) {
-    // Intersection outside the edge segment
-    return null
-  }
-
-  const x = p1.x + t * (p2.x - p1.x)
-  return { x, y: rayY }
-}
-
-/**
- * Find intersection of a vertical ray (x = rayX) with a line segment.
- * Returns the intersection point or null if no intersection.
- */
-function intersectVerticalRayWithEdge(
-  rayX: number,
-  p1: Point,
-  p2: Point,
-): Point | null {
-  const dx = p2.x - p1.x
-  if (Math.abs(dx) < 0.001) {
-    // Edge is vertical, no single intersection
-    return null
-  }
-
-  const t = (rayX - p1.x) / dx
-  if (t < 0 || t > 1) {
-    // Intersection outside the edge segment
-    return null
-  }
-
-  const y = p1.y + t * (p2.y - p1.y)
-  return { x: rayX, y }
-}

package/src/styles.ts

@@ -1,145 +0,0 @@
-// ============================================================================
-// Font metrics — character width estimates for Inter at different sizes.
-// Used to approximate text bounding boxes without DOM measurement.
-// These are calibrated for Inter's typical glyph widths.
-//
-// NOTE: Theme/color system has moved to packages/core/src/theme.ts. This file only
-// contains font metrics, spacing constants, and stroke widths.
-// ============================================================================
-
-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(
-  text: string,
-  fontSize: number,
-  fontWeight: number,
-): number {
-  // Delegate to variable-width character measurement for better accuracy
-  // with mixed character sets (Latin narrow/wide, CJK, emoji, etc.)
-  return measureTextWidth(text, fontSize, fontWeight)
-}
-
-/** Average character width in px for monospace fonts (uniform glyph width) */
-export function estimateMonoTextWidth(text: string, fontSize: number): number {
-  // Monospace fonts have uniform character width — 0.6 of fontSize matches actual
-  // glyph widths for JetBrains Mono / SF Mono / Fira Code at small sizes (11px).
-  // Previous value of 0.55 underestimated widths, causing class member labels to
-  // extend beyond their box boundaries.
-  return text.length * fontSize * 0.6
-}
-
-/** Monospace font family used for code-like text (class members, types) */
-export const MONO_FONT = "'JetBrains Mono'" as const
-
-/** Full CSS fallback chain for monospace text */
-export const MONO_FONT_STACK =
-  `${MONO_FONT}, 'SF Mono', 'Fira Code', ui-monospace, monospace` as const
-
-/** Default font sizes used in the renderer (in px). Overridable via `RenderOptions.fontSizes`. */
-export const FONT_SIZES = {
-  /** Node label text */
-  nodeLabel: 13,
-  /** Edge label text */
-  edgeLabel: 11,
-  /** Subgraph header text */
-  groupHeader: 12,
-} as const
-
-/** Resolved font-size set — same shape as {@link FONT_SIZES} but mutable numbers. */
-export type FontSizes = { [K in keyof typeof FONT_SIZES]: number }
-
-/** Partial font-size overrides, as accepted by `RenderOptions.fontSizes`. */
-export type FontSizeOptions = Partial<FontSizes>
-
-/**
- * Merge user-provided font-size overrides over the {@link FONT_SIZES} defaults.
- * Any field left unspecified (or `undefined`) falls back to its default.
- */
-export function resolveFontSizes(overrides?: FontSizeOptions): FontSizes {
-  return {
-    nodeLabel: overrides?.nodeLabel ?? FONT_SIZES.nodeLabel,
-    edgeLabel: overrides?.edgeLabel ?? FONT_SIZES.edgeLabel,
-    groupHeader: overrides?.groupHeader ?? FONT_SIZES.groupHeader,
-  }
-}
-
-/** Font weights used per element type */
-export const FONT_WEIGHTS = {
-  nodeLabel: 500,
-  edgeLabel: 400,
-  groupHeader: 600,
-} as const
-
-// ============================================================================
-// Spacing & sizing constants
-// ============================================================================
-
-/** Vertical gap between a subgraph header band and the content area below it (px).
- * Without this, nested subgraph headers sit flush against their parent's header band.
- * Increased from 8 to 12 to provide more clearance for edges routing near headers. */
-export const GROUP_HEADER_CONTENT_PAD = 12
-
-/** Padding inside node shapes */
-export const NODE_PADDING = {
-  /** Horizontal padding inside rectangles/rounded/stadium (increased from 16 for better label fit) */
-  horizontal: 20,
-  /** Vertical padding inside rectangles/rounded/stadium */
-  vertical: 10,
-  /** Extra padding for diamond shapes (they need more space due to rotation) */
-  diamondExtra: 24,
-} as const
-
-/** Stroke widths per element type (in px) */
-export const STROKE_WIDTHS = {
-  outerBox: 1,
-  innerBox: 0.75,
-  /** Edge connector stroke (increased from 0.75 for better visibility) */
-  connector: 1,
-} as const
-
-/**
- * Vertical shift applied to all text elements for font-agnostic centering.
- *
- * Instead of relying on `dominant-baseline="central"` (which each font interprets
- * differently based on its own ascent/descent metrics), we use the default alphabetic
- * baseline and shift down by 0.35em. This places the optical center of text at the
- * y coordinate, regardless of font family (Inter, JetBrains Mono, system fallbacks).
- *
- * The 0.35em value approximates the distance from alphabetic baseline to visual
- * center of Latin text. Using `em` units ensures it scales with font size.
- */
-export const TEXT_BASELINE_SHIFT = '0.35em' as const
-
-/** Arrow head dimensions — matches spec: 8px wide × ~5px tall */
-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

@@ -1,161 +0,0 @@
-/**
- * Break an edge where it crosses a subgraph's title text.
- *
- * Layout treats a subgraph's title bar as plain padding, so an edge that
- * enters a box from above can run straight over the title. mermaid.js draws
- * such an edge through the text as well; here the edge is simply not painted
- * over the text itself, and picks up again on the other side. The edge stays
- * one element with its geometry untouched: a `<mask>` hides the stroke inside
- * the text box (#1239).
- */
-
-import { measureMultilineText } from '@zombie-mermaid/core'
-import type {
-  PositionedEdge,
-  PositionedGroup,
-  Point,
-} from '@zombie-mermaid/core'
-import type { FontSizes } from './styles.ts'
-import { FONT_WEIGHTS } from './styles.ts'
-
-/** Left inset of the title text inside the box, matching `renderGroup`. */
-const TITLE_TEXT_INSET = 12
-
-/** Space left clear around the title text, in px. */
-const GAP_PADDING = 2
-
-export interface TitleTextBox {
-  x: number
-  y: number
-  width: number
-  height: number
-}
-
-function flattenGroups(groups: PositionedGroup[]): PositionedGroup[] {
-  return groups.flatMap((g) => [g, ...flattenGroups(g.children)])
-}
-
-/** The rectangle each subgraph's title text occupies, padded by `GAP_PADDING`. */
-export function titleTextBoxes(
-  groups: PositionedGroup[],
-  fontSizes: FontSizes,
-): TitleTextBox[] {
-  const headerHeight = fontSizes.groupHeader + 16
-  return flattenGroups(groups)
-    .filter((g) => g.label !== '')
-    .map((g) => {
-      const text = measureMultilineText(
-        g.label,
-        fontSizes.groupHeader,
-        FONT_WEIGHTS.groupHeader,
-      )
-      return {
-        x: g.x + TITLE_TEXT_INSET - GAP_PADDING,
-        y: g.y + headerHeight / 2 - text.height / 2 - GAP_PADDING,
-        width: text.width + 2 * GAP_PADDING,
-        height: text.height + 2 * GAP_PADDING,
-      }
-    })
-}
-
-/** Whether the segment a-b touches the rectangle (Liang-Barsky clipping). */
-function segmentHitsBox(a: Point, b: Point, box: TitleTextBox): boolean {
-  const dx = b.x - a.x
-  const dy = b.y - a.y
-  const p = [-dx, dx, -dy, dy]
-  const q = [
-    a.x - box.x,
-    box.x + box.width - a.x,
-    a.y - box.y,
-    box.y + box.height - a.y,
-  ]
-  let t0 = 0
-  let t1 = 1
-  for (let i = 0; i < 4; i++) {
-    const pi = p[i]!
-    const qi = q[i]!
-    if (pi === 0) {
-      if (qi < 0) return false
-    } else {
-      const t = qi / pi
-      if (pi < 0) t0 = Math.max(t0, t)
-      else t1 = Math.min(t1, t)
-      if (t0 > t1) return false
-    }
-  }
-  return true
-}
-
-/** 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 (texts.some((box) => segmentHitsBox(pts[i]!, pts[i + 1]!, box))) {
-      return true
-    }
-  }
-  return false
-}
-
-/** Small stable hash (FNV-1a) for a mask id that is the same for the same boxes. */
-function hashBoxes(boxes: TitleTextBox[]): string {
-  let h = 0x811c9dc5
-  for (const ch of boxes
-    .map((b) => `${b.x},${b.y},${b.width},${b.height}`)
-    .join(';')) {
-    h = Math.imul(h ^ ch.charCodeAt(0), 0x01000193)
-  }
-  return (h >>> 0).toString(36)
-}
-
-export interface TitleGapMask {
-  id: string
-  /** The `<mask>` element, for `<defs>`. */
-  markup: string
-}
-
-/**
- * The mask that hides edge strokes inside `boxes`. The id comes from the box
- * positions, so two inline diagrams never share an id with different content.
- *
- * `maskUnits="userSpaceOnUse"` is required: the default bounding-box units
- * give a straight vertical or horizontal edge a zero-size box, which masks the
- * whole edge away.
- */
-export function titleGapMask(
-  boxes: TitleTextBox[],
-  width: number,
-  height: number,
-): TitleGapMask {
-  const id = `zm-title-gap-${hashBoxes(boxes)}`
-  const holes = boxes
-    .map(
-      (b) =>
-        `    <rect x="${b.x}" y="${b.y}" width="${b.width}" height="${b.height}" fill="#000" />`,
-    )
-    .join('\n')
-  const markup =
-    `  <mask id="${id}" maskUnits="userSpaceOnUse" x="0" y="0" width="${width}" height="${height}">\n` +
-    `    <rect x="0" y="0" width="${width}" height="${height}" fill="#fff" />\n` +
-    `${holes}\n` +
-    `  </mask>`
-  return { id, markup }
-}