@zombie-mermaid/svg-renderer 2.2.1

package/src/shape-clipping.ts

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

@@ -0,0 +1,118 @@
+// ============================================================================
+// 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 { measureTextWidth } from '@zombie-mermaid/core'
+
+/** 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