@zombie-mermaid/ascii-renderer 2.2.1

package/src/shapes/rounded.ts

@@ -0,0 +1,31 @@
+// ============================================================================
+// Rounded rectangle shape renderer — uses rounded corner decorators
+// ============================================================================
+
+import type { ShapeRenderer } from './types.ts'
+import {
+  getBoxDimensions,
+  renderBox,
+  getBoxAttachmentPoint,
+} from './rectangle.ts'
+import { getCorners } from './corners.ts'
+
+/**
+ * Rounded rectangle shape renderer.
+ * Uses rounded corner markers (╭╮╰╯) to indicate soft edges.
+ *
+ * Renders as:
+ *   ╭─────────╮
+ *   │  Label  │
+ *   ╰─────────╯
+ */
+export const roundedRenderer: ShapeRenderer = {
+  getDimensions: getBoxDimensions,
+
+  render(label, dimensions, options) {
+    const corners = getCorners('rounded', options.useAscii)
+    return renderBox(label, dimensions, corners, options.useAscii)
+  },
+
+  getAttachmentPoint: getBoxAttachmentPoint,
+}

package/src/shapes/special.ts

@@ -0,0 +1,360 @@
+// ============================================================================
+// Special shape renderers — subroutine, doublecircle, cylinder, etc.
+// ============================================================================
+//
+// Some shapes have unique internal structure (subroutine, cylinder) and keep
+// custom rendering. Others use the corner decorator pattern for simplicity.
+
+import type { Canvas } from '../types.ts'
+import { mkCanvas } from '../canvas.ts'
+import { splitLines } from '../multiline-utils.ts'
+import { displayWidth, toDisplayCells } from '../display-width.ts'
+import type {
+  ShapeRenderer,
+  ShapeDimensions,
+  ShapeRenderOptions,
+} from './types.ts'
+import {
+  getBoxDimensions,
+  renderBox,
+  getBoxAttachmentPoint,
+} from './rectangle.ts'
+import { getCorners } from './corners.ts'
+
+// ============================================================================
+// Subroutine — keeps custom double-border rendering
+// ============================================================================
+
+/**
+ * Subroutine shape renderer — double-bordered rectangle.
+ * Renders as:
+ *   ┌┬─────────┬┐
+ *   ││  Label  ││
+ *   └┴─────────┴┘
+ */
+export const subroutineRenderer: ShapeRenderer = {
+  getDimensions(label: string, options: ShapeRenderOptions): ShapeDimensions {
+    const lines = splitLines(label)
+    const maxLineWidth = Math.max(...lines.map((l) => displayWidth(l)), 0)
+    const lineCount = lines.length
+
+    const innerWidth = 2 * options.padding + maxLineWidth
+    const width = innerWidth + 4 // Double borders on each side
+    const innerHeight = lineCount + 2 * options.padding
+    const height = innerHeight + 2
+
+    return {
+      width,
+      height,
+      labelArea: {
+        x: 2 + options.padding,
+        y: 1 + options.padding,
+        width: maxLineWidth,
+        height: lineCount,
+      },
+      gridColumns: [2, innerWidth, 2],
+      gridRows: [1, innerHeight, 1],
+    }
+  },
+
+  render(
+    label: string,
+    dimensions: ShapeDimensions,
+    options: ShapeRenderOptions,
+  ): Canvas {
+    const { width, height } = dimensions
+    const canvas = mkCanvas(width - 1, height - 1)
+
+    const hChar = options.useAscii ? '-' : '─'
+    const vChar = options.useAscii ? '|' : '│'
+
+    // Top border
+    canvas[0]![0] = options.useAscii ? '+' : '┌'
+    canvas[1]![0] = options.useAscii ? '+' : '┬'
+    for (let x = 2; x < width - 2; x++) canvas[x]![0] = hChar
+    canvas[width - 2]![0] = options.useAscii ? '+' : '┬'
+    canvas[width - 1]![0] = options.useAscii ? '+' : '┐'
+
+    // Sides with double border
+    for (let y = 1; y < height - 1; y++) {
+      canvas[0]![y] = vChar
+      canvas[1]![y] = vChar
+      canvas[width - 2]![y] = vChar
+      canvas[width - 1]![y] = vChar
+    }
+
+    // Bottom border
+    canvas[0]![height - 1] = options.useAscii ? '+' : '└'
+    canvas[1]![height - 1] = options.useAscii ? '+' : '┴'
+    for (let x = 2; x < width - 2; x++) canvas[x]![height - 1] = hChar
+    canvas[width - 2]![height - 1] = options.useAscii ? '+' : '┴'
+    canvas[width - 1]![height - 1] = options.useAscii ? '+' : '┘'
+
+    // Center the label
+    const lines = splitLines(label)
+    const centerY = Math.floor(height / 2)
+    const startY = centerY - Math.floor((lines.length - 1) / 2)
+
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i]!
+      const textX = Math.floor(width / 2) - Math.floor(displayWidth(line) / 2)
+      const cells = toDisplayCells(line)
+      for (let j = 0; j < cells.length; j++) {
+        const x = textX + j
+        const y = startY + i
+        if (x > 1 && x < width - 2 && y > 0 && y < height - 1) {
+          canvas[x]![y] = cells[j]!
+        }
+      }
+    }
+
+    return canvas
+  },
+
+  getAttachmentPoint: getBoxAttachmentPoint,
+}
+
+// ============================================================================
+// Double circle — uses corner decorators
+// ============================================================================
+
+/**
+ * Double circle shape renderer.
+ * Uses double circle markers (◎) at corners.
+ *
+ * Renders as:
+ *   ◎─────────◎
+ *   │  Label  │
+ *   ◎─────────◎
+ */
+export const doublecircleRenderer: ShapeRenderer = {
+  getDimensions: getBoxDimensions,
+
+  render(label, dimensions, options) {
+    const corners = getCorners('doublecircle', options.useAscii)
+    return renderBox(label, dimensions, corners, options.useAscii)
+  },
+
+  getAttachmentPoint: getBoxAttachmentPoint,
+}
+
+// ============================================================================
+// Cylinder — keeps custom rendering for database appearance
+// ============================================================================
+
+/**
+ * Cylinder shape renderer — database symbol.
+ * Renders as:
+ *   ╭─────╮
+ *   │─────│
+ *   │ DB  │
+ *   │─────│
+ *   ╰─────╯
+ */
+export const cylinderRenderer: ShapeRenderer = {
+  getDimensions(label: string, options: ShapeRenderOptions): ShapeDimensions {
+    const lines = splitLines(label)
+    const maxLineWidth = Math.max(...lines.map((l) => displayWidth(l)), 0)
+    const lineCount = lines.length
+
+    const innerWidth = 2 * options.padding + maxLineWidth
+    const width = innerWidth + 2
+    const innerHeight = lineCount + 2 * options.padding + 2 // Extra for curved top/bottom
+    const height = innerHeight + 2
+
+    return {
+      width,
+      height,
+      labelArea: {
+        x: 1 + options.padding,
+        y: 2 + options.padding,
+        width: maxLineWidth,
+        height: lineCount,
+      },
+      gridColumns: [1, innerWidth, 1],
+      gridRows: [2, innerHeight - 2, 2],
+    }
+  },
+
+  render(
+    label: string,
+    dimensions: ShapeDimensions,
+    options: ShapeRenderOptions,
+  ): Canvas {
+    const { width, height } = dimensions
+    const canvas = mkCanvas(width - 1, height - 1)
+
+    const hChar = options.useAscii ? '-' : '─'
+    const vChar = options.useAscii ? '|' : '│'
+
+    // Top ellipse
+    canvas[0]![0] = options.useAscii ? '.' : '╭'
+    for (let x = 1; x < width - 1; x++) canvas[x]![0] = hChar
+    canvas[width - 1]![0] = options.useAscii ? '.' : '╮'
+
+    // Second row - bottom of top ellipse
+    canvas[0]![1] = vChar
+    for (let x = 1; x < width - 1; x++) canvas[x]![1] = hChar
+    canvas[width - 1]![1] = vChar
+
+    // Middle section
+    for (let y = 2; y < height - 2; y++) {
+      canvas[0]![y] = vChar
+      canvas[width - 1]![y] = vChar
+    }
+
+    // Second to last row - top of bottom ellipse
+    canvas[0]![height - 2] = vChar
+    for (let x = 1; x < width - 1; x++) canvas[x]![height - 2] = hChar
+    canvas[width - 1]![height - 2] = vChar
+
+    // Bottom ellipse
+    canvas[0]![height - 1] = options.useAscii ? "'" : '╰'
+    for (let x = 1; x < width - 1; x++) canvas[x]![height - 1] = hChar
+    canvas[width - 1]![height - 1] = options.useAscii ? "'" : '╯'
+
+    // Center the label
+    const lines = splitLines(label)
+    const centerY = Math.floor(height / 2)
+    const startY = centerY - Math.floor((lines.length - 1) / 2)
+
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i]!
+      const textX = Math.floor(width / 2) - Math.floor(displayWidth(line) / 2)
+      const cells = toDisplayCells(line)
+      for (let j = 0; j < cells.length; j++) {
+        const x = textX + j
+        const y = startY + i
+        if (x > 0 && x < width - 1 && y > 1 && y < height - 2) {
+          canvas[x]![y] = cells[j]!
+        }
+      }
+    }
+
+    return canvas
+  },
+
+  getAttachmentPoint: getBoxAttachmentPoint,
+}
+
+// ============================================================================
+// Asymmetric (flag) — uses corner decorators
+// ============================================================================
+
+/**
+ * Asymmetric (flag/banner) shape renderer.
+ * Uses arrow markers (▷) on left corners.
+ *
+ * Renders as:
+ *   ▷─────────┐
+ *   │  Label  │
+ *   ▷─────────┘
+ */
+export const asymmetricRenderer: ShapeRenderer = {
+  getDimensions: getBoxDimensions,
+
+  render(label, dimensions, options) {
+    const corners = getCorners('asymmetric', options.useAscii)
+    return renderBox(label, dimensions, corners, options.useAscii)
+  },
+
+  getAttachmentPoint: getBoxAttachmentPoint,
+}
+
+// ============================================================================
+// Trapezoid — uses corner decorators instead of diagonal sides
+// ============================================================================
+
+/**
+ * Trapezoid shape renderer — wider at bottom.
+ * Uses plain slash slope markers (/ \, see corners.ts's
+ * `SHAPE_CORNERS.trapezoid`) on top corners — not the ◸◹ corner-triangle
+ * glyphs this comment used to claim: JetBrains Mono NL has no glyph for
+ * those at all, and the renderer hasn't actually emitted them since
+ * corners.ts moved to the diagonal-slash style. See issue #1062.
+ *
+ * Renders as:
+ *   /─────────\
+ *   │  Label  │
+ *   └─────────┘
+ */
+export const trapezoidRenderer: ShapeRenderer = {
+  getDimensions: getBoxDimensions,
+
+  render(label, dimensions, options) {
+    const corners = getCorners('trapezoid', options.useAscii)
+    return renderBox(label, dimensions, corners, options.useAscii)
+  },
+
+  getAttachmentPoint: getBoxAttachmentPoint,
+}
+
+// ============================================================================
+// Trapezoid-alt — uses corner decorators instead of diagonal sides
+// ============================================================================
+
+/**
+ * Trapezoid-alt shape renderer — wider at top.
+ * Uses plain slash slope markers (\ /, see corners.ts's
+ * `SHAPE_CORNERS['trapezoid-alt']`) on bottom corners — not the ◺◿
+ * corner-triangle glyphs this comment used to claim: JetBrains Mono NL has
+ * no glyph for those at all, and the renderer hasn't actually emitted them
+ * since corners.ts moved to the diagonal-slash style. See issue #1062.
+ *
+ * Renders as:
+ *   ┌─────────┐
+ *   │  Label  │
+ *   \─────────/
+ */
+export const trapezoidAltRenderer: ShapeRenderer = {
+  getDimensions: getBoxDimensions,
+
+  render(label, dimensions, options) {
+    const corners = getCorners('trapezoid-alt', options.useAscii)
+    return renderBox(label, dimensions, corners, options.useAscii)
+  },
+
+  getAttachmentPoint: getBoxAttachmentPoint,
+}
+
+// ============================================================================
+// Parallelogram — both sides slope the same way
+// ============================================================================
+
+/**
+ * Parallelogram shape renderer — leans right.
+ *
+ * Renders as:
+ *   /─────────/
+ *   │  Label  │
+ *   /─────────/
+ */
+export const parallelogramRenderer: ShapeRenderer = {
+  getDimensions: getBoxDimensions,
+
+  render(label, dimensions, options) {
+    const corners = getCorners('parallelogram', options.useAscii)
+    return renderBox(label, dimensions, corners, options.useAscii)
+  },
+
+  getAttachmentPoint: getBoxAttachmentPoint,
+}
+
+/**
+ * Parallelogram-alt shape renderer — leans left.
+ *
+ * Renders as:
+ *   \─────────\
+ *   │  Label  │
+ *   \─────────\
+ */
+export const parallelogramAltRenderer: ShapeRenderer = {
+  getDimensions: getBoxDimensions,
+
+  render(label, dimensions, options) {
+    const corners = getCorners('parallelogram-alt', options.useAscii)
+    return renderBox(label, dimensions, corners, options.useAscii)
+  },
+
+  getAttachmentPoint: getBoxAttachmentPoint,
+}

package/src/shapes/stadium.ts

@@ -0,0 +1,122 @@
+// ============================================================================
+// Stadium (pill) shape renderer — special parentheses-based rendering
+// ============================================================================
+//
+// Stadium has unique rendering: single-line is inline `(Label)`, multi-line
+// uses parentheses or rounded corners. This differs from other shapes that
+// use corner decorators with box lines.
+
+import type { Canvas } from '../types.ts'
+import { mkCanvas } from '../canvas.ts'
+import { splitLines } from '../multiline-utils.ts'
+import { displayWidth, toDisplayCells } from '../display-width.ts'
+import type {
+  ShapeRenderer,
+  ShapeDimensions,
+  ShapeRenderOptions,
+} from './types.ts'
+import { getBoxAttachmentPoint } from './rectangle.ts'
+
+/**
+ * Stadium (pill) shape renderer.
+ *
+ * Single-line:  ( Label )
+ *
+ * Multi-line unicode:
+ *   ╭──────────╮
+ *   │  Label   │
+ *   ╰──────────╯
+ *
+ * Multi-line ASCII:
+ *   (----------)
+ *   (  Label   )
+ *   (----------)
+ */
+export const stadiumRenderer: ShapeRenderer = {
+  getDimensions(label: string, options: ShapeRenderOptions): ShapeDimensions {
+    const lines = splitLines(label)
+    const maxLineWidth = Math.max(...lines.map((l) => displayWidth(l)), 0)
+    const lineCount = lines.length
+
+    const innerWidth = 2 * options.padding + maxLineWidth
+    const width = innerWidth + 4 // Extra for rounded ends
+    const innerHeight = lineCount + 2 * options.padding
+    const height = Math.max(innerHeight + 2, 3)
+
+    return {
+      width,
+      height,
+      labelArea: {
+        x: 2 + options.padding,
+        y: 1 + options.padding,
+        width: maxLineWidth,
+        height: lineCount,
+      },
+      gridColumns: [2, innerWidth, 2],
+      gridRows: [1, innerHeight, 1],
+    }
+  },
+
+  render(
+    label: string,
+    dimensions: ShapeDimensions,
+    options: ShapeRenderOptions,
+  ): Canvas {
+    const { width, height } = dimensions
+    const canvas = mkCanvas(width - 1, height - 1)
+
+    const centerY = Math.floor(height / 2)
+    const hChar = options.useAscii ? '-' : '─'
+
+    if (height === 3) {
+      // Single row pill: (  Label  )
+      canvas[0]![centerY] = '('
+      canvas[width - 1]![centerY] = ')'
+    } else if (!options.useAscii) {
+      // Multi-row stadium with rounded corners (unicode)
+      canvas[0]![0] = '╭'
+      for (let x = 1; x < width - 1; x++) canvas[x]![0] = hChar
+      canvas[width - 1]![0] = '╮'
+
+      for (let y = 1; y < height - 1; y++) {
+        canvas[0]![y] = '│'
+        canvas[width - 1]![y] = '│'
+      }
+
+      canvas[0]![height - 1] = '╰'
+      for (let x = 1; x < width - 1; x++) canvas[x]![height - 1] = hChar
+      canvas[width - 1]![height - 1] = '╯'
+    } else {
+      // Multi-row stadium ASCII — parentheses on all sides
+      for (let y = 0; y < height; y++) {
+        canvas[0]![y] = '('
+        canvas[width - 1]![y] = ')'
+      }
+      for (let x = 1; x < width - 1; x++) {
+        canvas[x]![0] = hChar
+        canvas[x]![height - 1] = hChar
+      }
+    }
+
+    // Center the label
+    const lines = splitLines(label)
+    const startY = centerY - Math.floor((lines.length - 1) / 2)
+
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i]!
+      const textX = Math.floor(width / 2) - Math.floor(displayWidth(line) / 2)
+      const cells = toDisplayCells(line)
+      for (let j = 0; j < cells.length; j++) {
+        const x = textX + j
+        const y = startY + i
+        if (x > 0 && x < width - 1 && y >= 0 && y < height) {
+          canvas[x]![y] = cells[j]!
+        }
+      }
+    }
+
+    return canvas
+  },
+
+  getAttachmentPoint: getBoxAttachmentPoint,
+}