circuit-to-canvas 0.0.3 → 0.0.4

package/lib/drawer/elements/pcb-fabrication-note-path.ts

@@ -0,0 +1,41 @@
+import type { PcbFabricationNotePath } from "circuit-json"
+import type { Matrix } from "transformation-matrix"
+import type { PcbColorMap, CanvasContext } from "../types"
+import { drawLine } from "../shapes/line"
+
+export interface DrawPcbFabricationNotePathParams {
+  ctx: CanvasContext
+  path: PcbFabricationNotePath
+  transform: Matrix
+  colorMap: PcbColorMap
+}
+
+export function drawPcbFabricationNotePath(
+  params: DrawPcbFabricationNotePathParams,
+): void {
+  const { ctx, path, transform, colorMap } = params
+
+  // Use the color from the path if provided, otherwise use a default color
+  // Fabrication notes are typically shown in a distinct color
+  const defaultColor = "rgba(255,255,255,0.5)" // White color for fabrication notes
+  const color = path.color ?? defaultColor
+
+  if (!path.route || path.route.length < 2) return
+
+  // Draw each segment of the path
+  for (let i = 0; i < path.route.length - 1; i++) {
+    const start = path.route[i]
+    const end = path.route[i + 1]
+
+    if (!start || !end) continue
+
+    drawLine({
+      ctx,
+      start: { x: start.x, y: start.y },
+      end: { x: end.x, y: end.y },
+      strokeWidth: path.stroke_width ?? 0.1,
+      stroke: color,
+      transform,
+    })
+  }
+}

package/lib/drawer/elements/pcb-fabrication-note-rect.ts

@@ -0,0 +1,39 @@
+import type { PcbFabricationNoteRect } from "circuit-json"
+import type { Matrix } from "transformation-matrix"
+import type { PcbColorMap, CanvasContext } from "../types"
+import { drawRect } from "../shapes/rect"
+
+export interface DrawPcbFabricationNoteRectParams {
+  ctx: CanvasContext
+  rect: PcbFabricationNoteRect
+  transform: Matrix
+  colorMap: PcbColorMap
+}
+
+export function drawPcbFabricationNoteRect(
+  params: DrawPcbFabricationNoteRectParams,
+): void {
+  const { ctx, rect, transform, colorMap } = params
+
+  // Use the color from the rect if provided, otherwise use a default color
+  // Fabrication notes are typically shown in a distinct color
+  const defaultColor = "rgba(255,255,255,0.5)" // White color for fabrication notes
+  const color = rect.color ?? defaultColor
+
+  const isFilled = rect.is_filled ?? false
+  const hasStroke = rect.has_stroke ?? true
+  const isStrokeDashed = rect.is_stroke_dashed ?? false
+
+  drawRect({
+    ctx,
+    center: rect.center,
+    width: rect.width,
+    height: rect.height,
+    fill: isFilled ? color : undefined,
+    stroke: hasStroke ? color : undefined,
+    strokeWidth: hasStroke ? rect.stroke_width : undefined,
+    borderRadius: rect.corner_radius,
+    transform,
+    isStrokeDashed,
+  })
+}

package/lib/drawer/elements/pcb-fabrication-note-text.ts

@@ -0,0 +1,42 @@
+import type { PcbFabricationNoteText } from "circuit-json"
+import type { Matrix } from "transformation-matrix"
+import type { PcbColorMap, CanvasContext } from "../types"
+import { drawText } from "../shapes/text"
+
+export interface DrawPcbFabricationNoteTextParams {
+  ctx: CanvasContext
+  text: PcbFabricationNoteText
+  transform: Matrix
+  colorMap: PcbColorMap
+}
+
+const DEFAULT_FABRICATION_NOTE_COLOR = "rgba(255,255,255,0.5)"
+
+function layerToColor(layer: string, colorMap: PcbColorMap): string {
+  // For fabrication notes, we use a default color
+  // Could be extended to support per-layer colors in the future
+  return DEFAULT_FABRICATION_NOTE_COLOR
+}
+
+export function drawPcbFabricationNoteText(
+  params: DrawPcbFabricationNoteTextParams,
+): void {
+  const { ctx, text, transform, colorMap } = params
+
+  const defaultColor = layerToColor(text.layer, colorMap)
+  const color = text.color ?? defaultColor
+  const fontSize = text.font_size
+
+  // Use @tscircuit/alphabet to draw text
+  // Pass real-world coordinates and let drawText apply the transform
+  drawText({
+    ctx,
+    text: text.text,
+    x: text.anchor_position.x,
+    y: text.anchor_position.y,
+    fontSize,
+    color,
+    transform,
+    anchorAlignment: text.anchor_alignment,
+  })
+}

package/lib/drawer/shapes/index.ts

@@ -5,3 +5,12 @@ export { drawPill, type DrawPillParams } from "./pill"
 export { drawPolygon, type DrawPolygonParams } from "./polygon"
 export { drawLine, type DrawLineParams } from "./line"
 export { drawPath, type DrawPathParams } from "./path"
+export {
+  drawText,
+  type DrawTextParams,
+  getAlphabetLayout,
+  strokeAlphabetText,
+  getTextStartPosition,
+  type AlphabetLayout,
+  type AnchorAlignment,
+} from "./text"

package/lib/drawer/shapes/rect.ts

@@ -7,10 +7,13 @@ export interface DrawRectParams {
   center: { x: number; y: number }
   width: number
   height: number
-  fill: string
+  fill?: string
   transform: Matrix
   borderRadius?: number
   rotation?: number
+  stroke?: string
+  strokeWidth?: number
+  isStrokeDashed?: boolean
 }
 
 export function drawRect(params: DrawRectParams): void {
@@ -23,12 +26,18 @@ export function drawRect(params: DrawRectParams): void {
     transform,
     borderRadius = 0,
     rotation = 0,
+    stroke,
+    strokeWidth,
+    isStrokeDashed = false,
   } = params
 
   const [cx, cy] = applyToPoint(transform, [center.x, center.y])
   const scaledWidth = width * Math.abs(transform.a)
   const scaledHeight = height * Math.abs(transform.a)
   const scaledRadius = borderRadius * Math.abs(transform.a)
+  const scaledStrokeWidth = strokeWidth
+    ? strokeWidth * Math.abs(transform.a)
+    : undefined
 
   ctx.save()
   ctx.translate(cx, cy)
@@ -37,6 +46,13 @@ export function drawRect(params: DrawRectParams): void {
     ctx.rotate(-rotation * (Math.PI / 180))
   }
 
+  // Set up dashed line if needed
+  if (isStrokeDashed && scaledStrokeWidth) {
+    ctx.setLineDash([scaledStrokeWidth * 2, scaledStrokeWidth * 2])
+  } else {
+    ctx.setLineDash([])
+  }
+
   ctx.beginPath()
 
   if (scaledRadius > 0) {
@@ -63,7 +79,16 @@ export function drawRect(params: DrawRectParams): void {
     ctx.rect(-scaledWidth / 2, -scaledHeight / 2, scaledWidth, scaledHeight)
   }
 
-  ctx.fillStyle = fill
-  ctx.fill()
+  if (fill) {
+    ctx.fillStyle = fill
+    ctx.fill()
+  }
+
+  if (stroke && scaledStrokeWidth) {
+    ctx.strokeStyle = stroke
+    ctx.lineWidth = scaledStrokeWidth
+    ctx.stroke()
+  }
+
   ctx.restore()
 }

package/lib/drawer/shapes/text.ts

@@ -0,0 +1,218 @@
+import { lineAlphabet } from "@tscircuit/alphabet"
+import type { Matrix } from "transformation-matrix"
+import { applyToPoint } from "transformation-matrix"
+import type { CanvasContext } from "../types"
+
+const GLYPH_WIDTH_RATIO = 0.62
+const LETTER_SPACING_RATIO = 0.3 // Letter spacing between characters (25% of glyph width)
+const SPACE_WIDTH_RATIO = 1
+const STROKE_WIDTH_RATIO = 0.13
+const CURVED_GLYPHS = new Set(["O", "o", "0"])
+
+export type AlphabetLayout = {
+  width: number
+  height: number
+  glyphWidth: number
+  letterSpacing: number
+  spaceWidth: number
+  strokeWidth: number
+}
+
+export function getAlphabetLayout(
+  text: string,
+  fontSize: number,
+): AlphabetLayout {
+  const glyphWidth = fontSize * GLYPH_WIDTH_RATIO
+  const letterSpacing = glyphWidth * LETTER_SPACING_RATIO
+  const spaceWidth = glyphWidth * SPACE_WIDTH_RATIO
+  const characters = Array.from(text)
+
+  let width = 0
+  characters.forEach((char, index) => {
+    const advance = char === " " ? spaceWidth : glyphWidth
+    width += advance
+    if (index < characters.length - 1) width += letterSpacing
+  })
+
+  const strokeWidth = Math.max(fontSize * STROKE_WIDTH_RATIO, 0.35)
+
+  return {
+    width,
+    height: fontSize,
+    glyphWidth,
+    letterSpacing,
+    spaceWidth,
+    strokeWidth,
+  }
+}
+
+const getGlyphLines = (char: string) =>
+  lineAlphabet[char] ?? lineAlphabet[char.toUpperCase()]
+
+export type AnchorAlignment =
+  | "center"
+  | "top_left"
+  | "top_right"
+  | "bottom_left"
+  | "bottom_right"
+  | "left"
+  | "right"
+  | "top"
+  | "bottom"
+
+export function getTextStartPosition(
+  alignment: AnchorAlignment,
+  layout: AlphabetLayout,
+): { x: number; y: number } {
+  const totalWidth = layout.width + layout.strokeWidth
+  const totalHeight = layout.height + layout.strokeWidth
+
+  let x = 0
+  let y = 0
+
+  // Horizontal alignment
+  if (alignment === "center") {
+    x = -totalWidth / 2
+  } else if (
+    alignment === "top_left" ||
+    alignment === "bottom_left" ||
+    alignment === "left"
+  ) {
+    x = 0
+  } else if (
+    alignment === "top_right" ||
+    alignment === "bottom_right" ||
+    alignment === "right"
+  ) {
+    x = -totalWidth
+  }
+
+  // Vertical alignment
+  if (alignment === "center") {
+    y = -totalHeight / 2
+  } else if (
+    alignment === "top_left" ||
+    alignment === "top_right" ||
+    alignment === "top"
+  ) {
+    y = 0
+  } else if (
+    alignment === "bottom_left" ||
+    alignment === "bottom_right" ||
+    alignment === "bottom"
+  ) {
+    y = -totalHeight
+  }
+
+  return { x, y }
+}
+
+export function strokeAlphabetText(
+  ctx: CanvasContext,
+  text: string,
+  layout: AlphabetLayout,
+  startX: number,
+  startY: number,
+): void {
+  const { glyphWidth, letterSpacing, spaceWidth, height, strokeWidth } = layout
+  const yOffset = startY + height / 2
+  const characters = Array.from(text)
+  let cursor = startX + strokeWidth / 2
+
+  characters.forEach((char, index) => {
+    const lines = getGlyphLines(char)
+    const advance = char === " " ? spaceWidth : glyphWidth
+
+    if (CURVED_GLYPHS.has(char)) {
+      const radiusX = Math.max(glyphWidth / 2 - strokeWidth / 2, strokeWidth)
+      const radiusY = Math.max(height / 2 - strokeWidth / 2, strokeWidth)
+      const centerY = yOffset - height / 2
+      ctx.beginPath()
+      ctx.ellipse(
+        cursor + glyphWidth / 2,
+        centerY,
+        radiusX,
+        radiusY,
+        0,
+        0,
+        Math.PI * 2,
+      )
+      ctx.stroke()
+    } else if (lines?.length) {
+      ctx.beginPath()
+      for (const line of lines) {
+        const x1 = cursor + line.x1 * glyphWidth
+        const y1 = yOffset - line.y1 * height
+        const x2 = cursor + line.x2 * glyphWidth
+        const y2 = yOffset - line.y2 * height
+        ctx.moveTo(x1, y1)
+        ctx.lineTo(x2, y2)
+      }
+      ctx.stroke()
+    }
+
+    // Move cursor by the character width
+    cursor += advance
+    // Add letter spacing after each character except the last one
+    // This spacing will be before the next character, creating visible gaps
+    if (index < characters.length - 1) {
+      cursor += letterSpacing
+    }
+  })
+}
+
+export interface DrawTextParams {
+  ctx: CanvasContext
+  text: string
+  x: number
+  y: number
+  fontSize: number
+  color: string
+  transform: Matrix
+  anchorAlignment: AnchorAlignment
+  rotation?: number
+}
+
+export function drawText(params: DrawTextParams): void {
+  const {
+    ctx,
+    text,
+    x,
+    y,
+    fontSize,
+    color,
+    transform,
+    anchorAlignment,
+    rotation = 0,
+  } = params
+
+  if (!text) return
+
+  const [transformedX, transformedY] = applyToPoint(transform, [x, y])
+  const scale = Math.abs(transform.a)
+  const scaledFontSize = fontSize * scale
+  const layout = getAlphabetLayout(text, scaledFontSize)
+  const startPos = getTextStartPosition(anchorAlignment, layout)
+
+  ctx.save()
+  ctx.translate(transformedX, transformedY)
+
+  if (rotation !== 0) {
+    ctx.rotate(-rotation * (Math.PI / 180))
+  }
+
+  ctx.lineWidth = layout.strokeWidth
+  ctx.lineCap = "round"
+  ctx.lineJoin = "round"
+  ctx.strokeStyle = color
+
+  strokeAlphabetText(
+    ctx,
+    text,
+    layout,
+    startPos.x,
+    startPos.y + layout.strokeWidth / 2,
+  )
+
+  ctx.restore()
+}

package/lib/drawer/types.ts

@@ -34,13 +34,21 @@ export interface CanvasContext {
   translate(x: number, y: number): void
   rotate(angle: number): void
   scale(x: number, y: number): void
+  globalCompositeOperation?: string
   fillStyle: string | CanvasGradient | CanvasPattern
   strokeStyle: string | CanvasGradient | CanvasPattern
   lineWidth: number
   lineCap: "butt" | "round" | "square"
   lineJoin: "bevel" | "round" | "miter"
+  setLineDash(segments: number[]): void
   canvas: { width: number; height: number }
   fillText(text: string, x: number, y: number): void
+  fillRect(x: number, y: number, width: number, height: number): void
+  measureText?: (text: string) => {
+    width: number
+    actualBoundingBoxAscent?: number
+    actualBoundingBoxDescent?: number
+  }
   font: string
   textAlign: "start" | "end" | "left" | "right" | "center"
   textBaseline:

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "circuit-to-canvas",
   "main": "dist/index.js",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "type": "module",
   "scripts": {
     "build": "tsup-node ./lib/index.ts --format esm --dts",
@@ -10,6 +10,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^2.3.8",
+    "@tscircuit/alphabet": "^0.0.8",
     "@types/bun": "latest",
     "bun-match-svg": "^0.0.14",
     "canvas": "^3.2.0",
@@ -17,6 +18,7 @@
     "tsup": "^8.5.1"
   },
   "peerDependencies": {
+    "@tscircuit/alphabet": "*",
     "typescript": "^5"
   },
   "dependencies": {

package/tests/elements/pcb-copper-text.test.ts

@@ -0,0 +1,102 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "canvas"
+import type { PcbCopperText } from "circuit-json"
+import { scale } from "transformation-matrix"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw copper text", async () => {
+  const SCALE = 4
+  const canvas = createCanvas(100 * SCALE, 100 * SCALE)
+  const ctx = canvas.getContext("2d")
+  ctx.scale(SCALE, SCALE)
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, canvas.width / SCALE, canvas.height / SCALE)
+
+  const text: PcbCopperText[] = [
+    {
+      type: "pcb_copper_text",
+      pcb_copper_text_id: "copper-text-1",
+      pcb_component_id: "component1",
+      layer: "top",
+      text: "T1",
+      anchor_position: { x: 40, y: 40 },
+      anchor_alignment: "center",
+      font: "tscircuit2024",
+      font_size: 8,
+    },
+
+    {
+      type: "pcb_copper_text",
+      pcb_copper_text_id: "copper-text-2",
+      pcb_component_id: "component1",
+      layer: "bottom",
+      text: "T2",
+      anchor_position: { x: 60, y: 60 },
+      anchor_alignment: "center",
+      font: "tscircuit2024",
+      font_size: 6,
+      is_mirrored: true,
+      ccw_rotation: 90,
+    },
+  ]
+
+  drawer.drawElements(text)
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+    "pcb-copper-text",
+  )
+})
+
+test("draw copper text knockout mirrored with padding", async () => {
+  const SCALE = 4
+  const canvas = createCanvas(100 * SCALE, 60 * SCALE)
+  const ctx = canvas.getContext("2d")
+  ctx.scale(SCALE, SCALE)
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, canvas.width / SCALE, canvas.height / SCALE)
+
+  drawer.realToCanvasMat = scale(2, 2)
+
+  const text: PcbCopperText[] = [
+    {
+      type: "pcb_copper_text",
+      pcb_copper_text_id: "copper-text-2",
+      pcb_component_id: "component1",
+      layer: "bottom",
+      text: "KO1",
+      anchor_position: { x: 25, y: 15 },
+      anchor_alignment: "center",
+      font: "tscircuit2024",
+      font_size: 10,
+      is_knockout: true,
+      is_mirrored: true,
+    },
+
+    {
+      type: "pcb_copper_text",
+      pcb_copper_text_id: "copper-text-3",
+      pcb_component_id: "component1",
+      layer: "top",
+      text: "KO2",
+      anchor_position: { x: 40, y: 20 },
+      anchor_alignment: "center",
+      font: "tscircuit2024",
+      font_size: 8,
+      is_knockout: true,
+      is_mirrored: false,
+      ccw_rotation: 45,
+    },
+  ]
+
+  drawer.drawElements(text)
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+    "pcb-copper-text-knockout",
+  )
+})

package/tests/elements/pcb-fabrication-note-path-custom-color.test.ts

@@ -0,0 +1,37 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "canvas"
+import type { PcbFabricationNotePath } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw fabrication note path with custom color", async () => {
+  const canvas = createCanvas(100, 100)
+  const ctx = canvas.getContext("2d")
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, 100, 100)
+
+  const path: PcbFabricationNotePath = {
+    type: "pcb_fabrication_note_path",
+    pcb_fabrication_note_path_id: "path1",
+    pcb_component_id: "component1",
+    layer: "top",
+    route: [
+      { x: 10, y: 50 },
+      { x: 30, y: 20 },
+      { x: 70, y: 20 },
+      { x: 90, y: 50 },
+      { x: 70, y: 80 },
+      { x: 30, y: 80 },
+      { x: 10, y: 50 },
+    ],
+    stroke_width: 2,
+    color: "#FF0000", // Red color
+  }
+
+  drawer.drawElements([path])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

package/tests/elements/pcb-fabrication-note-path-thick-stroke.test.ts

@@ -0,0 +1,37 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "canvas"
+import type { PcbFabricationNotePath } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw fabrication note path with thick stroke", async () => {
+  const canvas = createCanvas(100, 100)
+  const ctx = canvas.getContext("2d")
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, 100, 100)
+
+  const path: PcbFabricationNotePath = {
+    type: "pcb_fabrication_note_path",
+    pcb_fabrication_note_path_id: "path1",
+    pcb_component_id: "component1",
+    layer: "top",
+    route: [
+      { x: 10, y: 50 },
+      { x: 30, y: 20 },
+      { x: 70, y: 20 },
+      { x: 90, y: 50 },
+      { x: 70, y: 80 },
+      { x: 30, y: 80 },
+      { x: 10, y: 50 },
+    ],
+    stroke_width: 5, // Thick stroke
+    color: "#00FFFF", // Cyan color
+  }
+
+  drawer.drawElements([path])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})