circuit-to-canvas 0.0.1

package/lib/drawer/CircuitToCanvasDrawer.ts

@@ -0,0 +1,119 @@
+import type { AnyCircuitElement, PcbPlatedHole } from "circuit-json"
+import { identity, compose, translate, scale } from "transformation-matrix"
+import type { Matrix } from "transformation-matrix"
+import {
+  type CanvasContext,
+  type PcbColorMap,
+  type DrawerConfig,
+  type CameraBounds,
+  DEFAULT_PCB_COLOR_MAP,
+} from "./types"
+import { drawPcbPlatedHole } from "./elements/pcb-plated-hole"
+
+export interface DrawElementsOptions {
+  layers?: string[]
+}
+
+interface CanvasLike {
+  getContext(contextId: "2d"): CanvasContext | null
+}
+
+export class CircuitToCanvasDrawer {
+  private ctx: CanvasContext
+  private colorMap: PcbColorMap
+  public realToCanvasMat: Matrix
+
+  constructor(canvasOrContext: CanvasLike | CanvasContext) {
+    // Check if it's a canvas element (works in both browser and Node.js)
+    if (
+      "getContext" in canvasOrContext &&
+      typeof canvasOrContext.getContext === "function"
+    ) {
+      const ctx = canvasOrContext.getContext("2d")
+      if (!ctx) {
+        throw new Error("Failed to get 2D rendering context from canvas")
+      }
+      this.ctx = ctx
+    } else {
+      this.ctx = canvasOrContext as CanvasContext
+    }
+
+    this.colorMap = { ...DEFAULT_PCB_COLOR_MAP }
+    this.realToCanvasMat = identity()
+  }
+
+  configure(config: DrawerConfig): void {
+    if (config.colorOverrides) {
+      this.colorMap = {
+        ...this.colorMap,
+        ...config.colorOverrides,
+        copper: {
+          ...this.colorMap.copper,
+          ...config.colorOverrides.copper,
+        },
+        silkscreen: {
+          ...this.colorMap.silkscreen,
+          ...config.colorOverrides.silkscreen,
+        },
+        soldermask: {
+          ...this.colorMap.soldermask,
+          ...config.colorOverrides.soldermask,
+        },
+        soldermaskWithCopperUnderneath: {
+          ...this.colorMap.soldermaskWithCopperUnderneath,
+          ...config.colorOverrides.soldermaskWithCopperUnderneath,
+        },
+        soldermaskOverCopper: {
+          ...this.colorMap.soldermaskOverCopper,
+          ...config.colorOverrides.soldermaskOverCopper,
+        },
+      }
+    }
+  }
+
+  setCameraBounds(bounds: CameraBounds): void {
+    const canvas = this.ctx.canvas
+    const canvasWidth = canvas.width
+    const canvasHeight = canvas.height
+
+    const realWidth = bounds.maxX - bounds.minX
+    const realHeight = bounds.maxY - bounds.minY
+
+    const scaleX = canvasWidth / realWidth
+    const scaleY = canvasHeight / realHeight
+    const uniformScale = Math.min(scaleX, scaleY)
+
+    // Center the view
+    const offsetX = (canvasWidth - realWidth * uniformScale) / 2
+    const offsetY = (canvasHeight - realHeight * uniformScale) / 2
+
+    this.realToCanvasMat = compose(
+      translate(offsetX, offsetY),
+      scale(uniformScale, uniformScale),
+      translate(-bounds.minX, -bounds.minY),
+    )
+  }
+
+  drawElements(
+    elements: AnyCircuitElement[],
+    options: DrawElementsOptions = {},
+  ): void {
+    for (const element of elements) {
+      this.drawElement(element, options)
+    }
+  }
+
+  private drawElement(
+    element: AnyCircuitElement,
+    options: DrawElementsOptions,
+  ): void {
+    if (element.type === "pcb_plated_hole") {
+      drawPcbPlatedHole({
+        ctx: this.ctx,
+        hole: element as PcbPlatedHole,
+        transform: this.realToCanvasMat,
+        colorMap: this.colorMap,
+      })
+    }
+  }
+}

package/lib/drawer/elements/index.ts

@@ -0,0 +1,4 @@
+export {
+  drawPcbPlatedHole,
+  type DrawPcbPlatedHoleParams,
+} from "./pcb-plated-hole"

package/lib/drawer/elements/pcb-plated-hole.ts

@@ -0,0 +1,168 @@
+import type { PcbPlatedHole } from "circuit-json"
+import type { Matrix } from "transformation-matrix"
+import type { PcbColorMap, CanvasContext } from "../types"
+import { drawCircle } from "../shapes/circle"
+import { drawRect } from "../shapes/rect"
+import { drawOval } from "../shapes/oval"
+import { drawPill } from "../shapes/pill"
+
+export interface DrawPcbPlatedHoleParams {
+  ctx: CanvasContext
+  hole: PcbPlatedHole
+  transform: Matrix
+  colorMap: PcbColorMap
+}
+
+export function drawPcbPlatedHole(params: DrawPcbPlatedHoleParams): void {
+  const { ctx, hole, transform, colorMap } = params
+
+  if (hole.shape === "circle") {
+    // Draw outer copper ring
+    drawCircle({
+      ctx,
+      center: { x: hole.x, y: hole.y },
+      radius: hole.outer_diameter / 2,
+      fill: colorMap.copper.top,
+      transform,
+    })
+
+    // Draw inner drill hole
+    drawCircle({
+      ctx,
+      center: { x: hole.x, y: hole.y },
+      radius: hole.hole_diameter / 2,
+      fill: colorMap.drill,
+      transform,
+    })
+    return
+  }
+
+  if (hole.shape === "oval") {
+    // Draw outer copper oval
+    drawOval({
+      ctx,
+      center: { x: hole.x, y: hole.y },
+      width: hole.outer_width,
+      height: hole.outer_height,
+      fill: colorMap.copper.top,
+      transform,
+      rotation: hole.ccw_rotation,
+    })
+
+    // Draw inner drill hole
+    drawOval({
+      ctx,
+      center: { x: hole.x, y: hole.y },
+      width: hole.hole_width,
+      height: hole.hole_height,
+      fill: colorMap.drill,
+      transform,
+      rotation: hole.ccw_rotation,
+    })
+    return
+  }
+
+  if (hole.shape === "pill") {
+    // Draw outer copper pill
+    drawPill({
+      ctx,
+      center: { x: hole.x, y: hole.y },
+      width: hole.outer_width,
+      height: hole.outer_height,
+      fill: colorMap.copper.top,
+      transform,
+      rotation: hole.ccw_rotation,
+    })
+
+    // Draw inner drill hole
+    drawPill({
+      ctx,
+      center: { x: hole.x, y: hole.y },
+      width: hole.hole_width,
+      height: hole.hole_height,
+      fill: colorMap.drill,
+      transform,
+      rotation: hole.ccw_rotation,
+    })
+    return
+  }
+
+  if (hole.shape === "circular_hole_with_rect_pad") {
+    // Draw rectangular pad
+    drawRect({
+      ctx,
+      center: { x: hole.x, y: hole.y },
+      width: hole.rect_pad_width,
+      height: hole.rect_pad_height,
+      fill: colorMap.copper.top,
+      transform,
+      borderRadius: (hole as any).rect_border_radius ?? 0,
+    })
+
+    // Draw circular drill hole (with offset)
+    const holeX = hole.x + ((hole as any).hole_offset_x ?? 0)
+    const holeY = hole.y + ((hole as any).hole_offset_y ?? 0)
+    drawCircle({
+      ctx,
+      center: { x: holeX, y: holeY },
+      radius: hole.hole_diameter / 2,
+      fill: colorMap.drill,
+      transform,
+    })
+    return
+  }
+
+  if (hole.shape === "pill_hole_with_rect_pad") {
+    // Draw rectangular pad
+    drawRect({
+      ctx,
+      center: { x: hole.x, y: hole.y },
+      width: hole.rect_pad_width,
+      height: hole.rect_pad_height,
+      fill: colorMap.copper.top,
+      transform,
+      borderRadius: (hole as any).rect_border_radius ?? 0,
+    })
+
+    // Draw pill drill hole (with offset)
+    const holeX = hole.x + ((hole as any).hole_offset_x ?? 0)
+    const holeY = hole.y + ((hole as any).hole_offset_y ?? 0)
+    drawPill({
+      ctx,
+      center: { x: holeX, y: holeY },
+      width: hole.hole_width,
+      height: hole.hole_height,
+      fill: colorMap.drill,
+      transform,
+    })
+    return
+  }
+
+  if (hole.shape === "rotated_pill_hole_with_rect_pad") {
+    // Draw rotated rectangular pad
+    drawRect({
+      ctx,
+      center: { x: hole.x, y: hole.y },
+      width: hole.rect_pad_width,
+      height: hole.rect_pad_height,
+      fill: colorMap.copper.top,
+      transform,
+      borderRadius: (hole as any).rect_border_radius ?? 0,
+      rotation: hole.rect_ccw_rotation,
+    })
+
+    // Draw rotated pill drill hole (with offset)
+    const holeX = hole.x + ((hole as any).hole_offset_x ?? 0)
+    const holeY = hole.y + ((hole as any).hole_offset_y ?? 0)
+    drawPill({
+      ctx,
+      center: { x: holeX, y: holeY },
+      width: hole.hole_width,
+      height: hole.hole_height,
+      fill: colorMap.drill,
+      transform,
+      rotation: hole.hole_ccw_rotation,
+    })
+    return
+  }
+}

package/lib/drawer/index.ts

@@ -0,0 +1,5 @@
+export { CircuitToCanvasDrawer } from "./CircuitToCanvasDrawer"
+export type { DrawElementsOptions } from "./CircuitToCanvasDrawer"
+export * from "./types"
+export * from "./shapes"
+export * from "./elements"

package/lib/drawer/shapes/circle.ts

@@ -0,0 +1,23 @@
+import type { Matrix } from "transformation-matrix"
+import { applyToPoint } from "transformation-matrix"
+import type { CanvasContext } from "../types"
+
+export interface DrawCircleParams {
+  ctx: CanvasContext
+  center: { x: number; y: number }
+  radius: number
+  fill: string
+  transform: Matrix
+}
+
+export function drawCircle(params: DrawCircleParams): void {
+  const { ctx, center, radius, fill, transform } = params
+
+  const [cx, cy] = applyToPoint(transform, [center.x, center.y])
+  const scaledRadius = radius * Math.abs(transform.a)
+
+  ctx.beginPath()
+  ctx.arc(cx, cy, scaledRadius, 0, Math.PI * 2)
+  ctx.fillStyle = fill
+  ctx.fill()
+}

package/lib/drawer/shapes/index.ts

@@ -0,0 +1,4 @@
+export { drawCircle, type DrawCircleParams } from "./circle"
+export { drawRect, type DrawRectParams } from "./rect"
+export { drawOval, type DrawOvalParams } from "./oval"
+export { drawPill, type DrawPillParams } from "./pill"

package/lib/drawer/shapes/oval.ts

@@ -0,0 +1,34 @@
+import type { Matrix } from "transformation-matrix"
+import { applyToPoint } from "transformation-matrix"
+import type { CanvasContext } from "../types"
+
+export interface DrawOvalParams {
+  ctx: CanvasContext
+  center: { x: number; y: number }
+  width: number
+  height: number
+  fill: string
+  transform: Matrix
+  rotation?: number
+}
+
+export function drawOval(params: DrawOvalParams): void {
+  const { ctx, center, width, height, fill, transform, rotation = 0 } = params
+
+  const [cx, cy] = applyToPoint(transform, [center.x, center.y])
+  const scaledWidth = width * Math.abs(transform.a)
+  const scaledHeight = height * Math.abs(transform.a)
+
+  ctx.save()
+  ctx.translate(cx, cy)
+
+  if (rotation !== 0) {
+    ctx.rotate(-rotation * (Math.PI / 180))
+  }
+
+  ctx.beginPath()
+  ctx.ellipse(0, 0, scaledWidth / 2, scaledHeight / 2, 0, 0, Math.PI * 2)
+  ctx.fillStyle = fill
+  ctx.fill()
+  ctx.restore()
+}

package/lib/drawer/shapes/pill.ts

@@ -0,0 +1,60 @@
+import type { Matrix } from "transformation-matrix"
+import { applyToPoint } from "transformation-matrix"
+import type { CanvasContext } from "../types"
+
+export interface DrawPillParams {
+  ctx: CanvasContext
+  center: { x: number; y: number }
+  width: number
+  height: number
+  fill: string
+  transform: Matrix
+  rotation?: number
+}
+
+export function drawPill(params: DrawPillParams): void {
+  const { ctx, center, width, height, fill, transform, rotation = 0 } = params
+
+  const [cx, cy] = applyToPoint(transform, [center.x, center.y])
+  const scaledWidth = width * Math.abs(transform.a)
+  const scaledHeight = height * Math.abs(transform.a)
+
+  ctx.save()
+  ctx.translate(cx, cy)
+
+  if (rotation !== 0) {
+    ctx.rotate(-rotation * (Math.PI / 180))
+  }
+
+  ctx.beginPath()
+
+  if (scaledWidth > scaledHeight) {
+    // Horizontal pill
+    const radius = scaledHeight / 2
+    const straightLength = scaledWidth - scaledHeight
+
+    ctx.moveTo(-straightLength / 2, -radius)
+    ctx.lineTo(straightLength / 2, -radius)
+    ctx.arc(straightLength / 2, 0, radius, -Math.PI / 2, Math.PI / 2)
+    ctx.lineTo(-straightLength / 2, radius)
+    ctx.arc(-straightLength / 2, 0, radius, Math.PI / 2, -Math.PI / 2)
+  } else if (scaledHeight > scaledWidth) {
+    // Vertical pill
+    const radius = scaledWidth / 2
+    const straightLength = scaledHeight - scaledWidth
+
+    ctx.moveTo(radius, -straightLength / 2)
+    ctx.lineTo(radius, straightLength / 2)
+    ctx.arc(0, straightLength / 2, radius, 0, Math.PI)
+    ctx.lineTo(-radius, -straightLength / 2)
+    ctx.arc(0, -straightLength / 2, radius, Math.PI, 0)
+  } else {
+    // Circle (width === height)
+    ctx.arc(0, 0, scaledWidth / 2, 0, Math.PI * 2)
+  }
+
+  ctx.closePath()
+  ctx.fillStyle = fill
+  ctx.fill()
+  ctx.restore()
+}

package/lib/drawer/shapes/rect.ts

@@ -0,0 +1,69 @@
+import type { Matrix } from "transformation-matrix"
+import { applyToPoint } from "transformation-matrix"
+import type { CanvasContext } from "../types"
+
+export interface DrawRectParams {
+  ctx: CanvasContext
+  center: { x: number; y: number }
+  width: number
+  height: number
+  fill: string
+  transform: Matrix
+  borderRadius?: number
+  rotation?: number
+}
+
+export function drawRect(params: DrawRectParams): void {
+  const {
+    ctx,
+    center,
+    width,
+    height,
+    fill,
+    transform,
+    borderRadius = 0,
+    rotation = 0,
+  } = 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)
+
+  ctx.save()
+  ctx.translate(cx, cy)
+
+  if (rotation !== 0) {
+    ctx.rotate(-rotation * (Math.PI / 180))
+  }
+
+  ctx.beginPath()
+
+  if (scaledRadius > 0) {
+    const x = -scaledWidth / 2
+    const y = -scaledHeight / 2
+    const r = Math.min(scaledRadius, scaledWidth / 2, scaledHeight / 2)
+
+    ctx.moveTo(x + r, y)
+    ctx.lineTo(x + scaledWidth - r, y)
+    ctx.arcTo(x + scaledWidth, y, x + scaledWidth, y + r, r)
+    ctx.lineTo(x + scaledWidth, y + scaledHeight - r)
+    ctx.arcTo(
+      x + scaledWidth,
+      y + scaledHeight,
+      x + scaledWidth - r,
+      y + scaledHeight,
+      r,
+    )
+    ctx.lineTo(x + r, y + scaledHeight)
+    ctx.arcTo(x, y + scaledHeight, x, y + scaledHeight - r, r)
+    ctx.lineTo(x, y + r)
+    ctx.arcTo(x, y, x + r, y, r)
+  } else {
+    ctx.rect(-scaledWidth / 2, -scaledHeight / 2, scaledWidth, scaledHeight)
+  }
+
+  ctx.fillStyle = fill
+  ctx.fill()
+  ctx.restore()
+}

package/lib/drawer/types.ts

@@ -0,0 +1,125 @@
+import type { Matrix } from "transformation-matrix"
+
+/**
+ * Canvas context type that works with both browser and node-canvas.
+ * Uses a subset of CanvasRenderingContext2D methods that are common to both.
+ */
+export interface CanvasContext {
+  beginPath(): void
+  closePath(): void
+  arc(
+    x: number,
+    y: number,
+    radius: number,
+    startAngle: number,
+    endAngle: number,
+  ): void
+  arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
+  ellipse(
+    x: number,
+    y: number,
+    radiusX: number,
+    radiusY: number,
+    rotation: number,
+    startAngle: number,
+    endAngle: number,
+  ): void
+  fill(): void
+  rect(x: number, y: number, w: number, h: number): void
+  lineTo(x: number, y: number): void
+  moveTo(x: number, y: number): void
+  save(): void
+  restore(): void
+  translate(x: number, y: number): void
+  rotate(angle: number): void
+  fillStyle: string | CanvasGradient | CanvasPattern
+  canvas: { width: number; height: number }
+}
+
+export type CopperLayerName =
+  | "top"
+  | "bottom"
+  | "inner1"
+  | "inner2"
+  | "inner3"
+  | "inner4"
+  | "inner5"
+  | "inner6"
+
+export type CopperColorMap = Record<CopperLayerName, string> & {
+  [layer: string]: string
+}
+
+export interface PcbColorMap {
+  copper: CopperColorMap
+  drill: string
+  silkscreen: {
+    top: string
+    bottom: string
+  }
+  boardOutline: string
+  soldermask: {
+    top: string
+    bottom: string
+  }
+  soldermaskWithCopperUnderneath: {
+    top: string
+    bottom: string
+  }
+  soldermaskOverCopper: {
+    top: string
+    bottom: string
+  }
+  substrate: string
+  courtyard: string
+}
+
+export const DEFAULT_PCB_COLOR_MAP: PcbColorMap = {
+  copper: {
+    top: "rgb(200, 52, 52)",
+    inner1: "rgb(255, 140, 0)",
+    inner2: "rgb(255, 215, 0)",
+    inner3: "rgb(50, 205, 50)",
+    inner4: "rgb(64, 224, 208)",
+    inner5: "rgb(138, 43, 226)",
+    inner6: "rgb(255, 105, 180)",
+    bottom: "rgb(77, 127, 196)",
+  },
+  soldermaskWithCopperUnderneath: {
+    top: "rgb(18, 82, 50)",
+    bottom: "rgb(77, 127, 196)",
+  },
+  soldermask: {
+    top: "rgb(12, 55, 33)",
+    bottom: "rgb(12, 55, 33)",
+  },
+  soldermaskOverCopper: {
+    top: "rgb(52, 135, 73)",
+    bottom: "rgb(52, 135, 73)",
+  },
+  substrate: "rgb(201, 162, 110)",
+  drill: "#FF26E2",
+  silkscreen: {
+    top: "#f2eda1",
+    bottom: "#5da9e9",
+  },
+  boardOutline: "rgba(255, 255, 255, 0.5)",
+  courtyard: "#FF00FF",
+}
+
+export interface DrawerConfig {
+  colorOverrides?: Partial<PcbColorMap>
+}
+
+export interface CameraBounds {
+  minX: number
+  maxX: number
+  minY: number
+  maxY: number
+}
+
+export interface DrawContext {
+  ctx: CanvasRenderingContext2D
+  transform: Matrix
+  colorMap: PcbColorMap
+}

package/lib/index.ts

@@ -0,0 +1 @@
+export * from "./drawer"

package/lib/pcb/index.ts

@@ -0,0 +1,5 @@
+// PCB-specific exports (re-exported from drawer)
+export {
+  drawPcbPlatedHole,
+  type DrawPcbPlatedHoleParams,
+} from "../drawer/elements/pcb-plated-hole"

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "circuit-to-canvas",
+  "main": "dist/index.js",
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "build": "tsup-node ./lib/index.ts --format esm --dts",
+    "format": "biome format --write .",
+    "format:check": "biome format --check ."
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.3.8",
+    "@types/bun": "latest",
+    "bun-match-svg": "^0.0.14",
+    "canvas": "^3.2.0",
+    "circuit-json": "^0.0.327",
+    "tsup": "^8.5.1"
+  },
+  "peerDependencies": {
+    "typescript": "^5"
+  },
+  "dependencies": {
+    "transformation-matrix": "^3.1.0"
+  }
+}

package/tests/__snapshots__/svg.snap.svg

@@ -0,0 +1,3 @@
+<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">                                       
+   <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />                                            
+ </svg>