circuit-to-canvas 0.0.1 → 0.0.3

package/lib/drawer/elements/pcb-smtpad.ts

@@ -0,0 +1,108 @@
+import type { PcbSmtPad } 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 { drawPill } from "../shapes/pill"
+import { drawPolygon } from "../shapes/polygon"
+
+export interface DrawPcbSmtPadParams {
+  ctx: CanvasContext
+  pad: PcbSmtPad
+  transform: Matrix
+  colorMap: PcbColorMap
+}
+
+function layerToColor(layer: string, colorMap: PcbColorMap): string {
+  return (
+    colorMap.copper[layer as keyof typeof colorMap.copper] ??
+    colorMap.copper.top
+  )
+}
+
+export function drawPcbSmtPad(params: DrawPcbSmtPadParams): void {
+  const { ctx, pad, transform, colorMap } = params
+
+  const color = layerToColor(pad.layer, colorMap)
+
+  if (pad.shape === "rect") {
+    drawRect({
+      ctx,
+      center: { x: pad.x, y: pad.y },
+      width: pad.width,
+      height: pad.height,
+      fill: color,
+      transform,
+      borderRadius:
+        (pad as { corner_radius?: number }).corner_radius ??
+        pad.rect_border_radius ??
+        0,
+    })
+    return
+  }
+
+  if (pad.shape === "rotated_rect") {
+    drawRect({
+      ctx,
+      center: { x: pad.x, y: pad.y },
+      width: pad.width,
+      height: pad.height,
+      fill: color,
+      transform,
+      borderRadius:
+        (pad as { corner_radius?: number }).corner_radius ??
+        pad.rect_border_radius ??
+        0,
+      rotation: pad.ccw_rotation ?? 0,
+    })
+    return
+  }
+
+  if (pad.shape === "circle") {
+    drawCircle({
+      ctx,
+      center: { x: pad.x, y: pad.y },
+      radius: pad.radius,
+      fill: color,
+      transform,
+    })
+    return
+  }
+
+  if (pad.shape === "pill") {
+    drawPill({
+      ctx,
+      center: { x: pad.x, y: pad.y },
+      width: pad.width,
+      height: pad.height,
+      fill: color,
+      transform,
+    })
+    return
+  }
+
+  if (pad.shape === "rotated_pill") {
+    drawPill({
+      ctx,
+      center: { x: pad.x, y: pad.y },
+      width: pad.width,
+      height: pad.height,
+      fill: color,
+      transform,
+      rotation: pad.ccw_rotation ?? 0,
+    })
+    return
+  }
+
+  if (pad.shape === "polygon") {
+    if (pad.points && pad.points.length >= 3) {
+      drawPolygon({
+        ctx,
+        points: pad.points,
+        fill: color,
+        transform,
+      })
+    }
+    return
+  }
+}

package/lib/drawer/elements/pcb-trace.ts

@@ -0,0 +1,59 @@
+import type { PCBTrace } from "circuit-json"
+import type { Matrix } from "transformation-matrix"
+import type { PcbColorMap, CanvasContext } from "../types"
+import { drawLine } from "../shapes/line"
+
+export interface DrawPcbTraceParams {
+  ctx: CanvasContext
+  trace: PCBTrace
+  transform: Matrix
+  colorMap: PcbColorMap
+}
+
+function layerToColor(layer: string, colorMap: PcbColorMap): string {
+  return (
+    colorMap.copper[layer as keyof typeof colorMap.copper] ??
+    colorMap.copper.top
+  )
+}
+
+export function drawPcbTrace(params: DrawPcbTraceParams): void {
+  const { ctx, trace, transform, colorMap } = params
+
+  if (!trace.route || !Array.isArray(trace.route) || trace.route.length < 2) {
+    return
+  }
+
+  // Draw each segment of the trace
+  for (let i = 0; i < trace.route.length - 1; i++) {
+    const start = trace.route[i]
+    const end = trace.route[i + 1]
+
+    if (!start || !end) continue
+
+    // Get the layer from either point
+    const layer =
+      "layer" in start
+        ? start.layer
+        : "layer" in end
+          ? (end as any).layer
+          : null
+    if (!layer) continue
+
+    const color = layerToColor(layer, colorMap)
+
+    // Get the trace width from either point
+    const traceWidth =
+      "width" in start ? start.width : "width" in end ? (end as any).width : 0.1
+
+    drawLine({
+      ctx,
+      start: { x: start.x, y: start.y },
+      end: { x: end.x, y: end.y },
+      strokeWidth: traceWidth,
+      stroke: color,
+      transform,
+      lineCap: "round",
+    })
+  }
+}

package/lib/drawer/elements/pcb-via.ts

@@ -0,0 +1,33 @@
+import type { PCBVia } from "circuit-json"
+import type { Matrix } from "transformation-matrix"
+import type { PcbColorMap, CanvasContext } from "../types"
+import { drawCircle } from "../shapes/circle"
+
+export interface DrawPcbViaParams {
+  ctx: CanvasContext
+  via: PCBVia
+  transform: Matrix
+  colorMap: PcbColorMap
+}
+
+export function drawPcbVia(params: DrawPcbViaParams): void {
+  const { ctx, via, transform, colorMap } = params
+
+  // Draw outer copper ring
+  drawCircle({
+    ctx,
+    center: { x: via.x, y: via.y },
+    radius: via.outer_diameter / 2,
+    fill: colorMap.copper.top,
+    transform,
+  })
+
+  // Draw inner drill hole
+  drawCircle({
+    ctx,
+    center: { x: via.x, y: via.y },
+    radius: via.hole_diameter / 2,
+    fill: colorMap.drill,
+    transform,
+  })
+}

package/lib/drawer/shapes/index.ts

@@ -2,3 +2,6 @@ export { drawCircle, type DrawCircleParams } from "./circle"
 export { drawRect, type DrawRectParams } from "./rect"
 export { drawOval, type DrawOvalParams } from "./oval"
 export { drawPill, type DrawPillParams } from "./pill"
+export { drawPolygon, type DrawPolygonParams } from "./polygon"
+export { drawLine, type DrawLineParams } from "./line"
+export { drawPath, type DrawPathParams } from "./path"

package/lib/drawer/shapes/line.ts

@@ -0,0 +1,37 @@
+import type { Matrix } from "transformation-matrix"
+import { applyToPoint } from "transformation-matrix"
+import type { CanvasContext } from "../types"
+
+export interface DrawLineParams {
+  ctx: CanvasContext
+  start: { x: number; y: number }
+  end: { x: number; y: number }
+  strokeWidth: number
+  stroke: string
+  transform: Matrix
+  lineCap?: "butt" | "round" | "square"
+}
+
+export function drawLine(params: DrawLineParams): void {
+  const {
+    ctx,
+    start,
+    end,
+    strokeWidth,
+    stroke,
+    transform,
+    lineCap = "round",
+  } = params
+
+  const [x1, y1] = applyToPoint(transform, [start.x, start.y])
+  const [x2, y2] = applyToPoint(transform, [end.x, end.y])
+  const scaledStrokeWidth = strokeWidth * Math.abs(transform.a)
+
+  ctx.beginPath()
+  ctx.moveTo(x1, y1)
+  ctx.lineTo(x2, y2)
+  ctx.lineWidth = scaledStrokeWidth
+  ctx.strokeStyle = stroke
+  ctx.lineCap = lineCap
+  ctx.stroke()
+}

package/lib/drawer/shapes/path.ts

@@ -0,0 +1,61 @@
+import type { Matrix } from "transformation-matrix"
+import { applyToPoint } from "transformation-matrix"
+import type { CanvasContext } from "../types"
+
+export interface DrawPathParams {
+  ctx: CanvasContext
+  points: Array<{ x: number; y: number }>
+  fill?: string
+  stroke?: string
+  strokeWidth?: number
+  transform: Matrix
+  closePath?: boolean
+}
+
+export function drawPath(params: DrawPathParams): void {
+  const {
+    ctx,
+    points,
+    fill,
+    stroke,
+    strokeWidth = 1,
+    transform,
+    closePath = false,
+  } = params
+
+  if (points.length < 2) return
+
+  ctx.beginPath()
+
+  const transformedPoints = points.map((p) =>
+    applyToPoint(transform, [p.x, p.y]),
+  )
+
+  const firstPoint = transformedPoints[0]
+  if (!firstPoint) return
+  const [firstX, firstY] = firstPoint
+  ctx.moveTo(firstX, firstY)
+
+  for (let i = 1; i < transformedPoints.length; i++) {
+    const point = transformedPoints[i]
+    if (!point) continue
+    const [x, y] = point
+    ctx.lineTo(x, y)
+  }
+
+  if (closePath) {
+    ctx.closePath()
+  }
+
+  if (fill) {
+    ctx.fillStyle = fill
+    ctx.fill()
+  }
+
+  if (stroke) {
+    const scaledStrokeWidth = strokeWidth * Math.abs(transform.a)
+    ctx.strokeStyle = stroke
+    ctx.lineWidth = scaledStrokeWidth
+    ctx.stroke()
+  }
+}

package/lib/drawer/shapes/polygon.ts

@@ -0,0 +1,38 @@
+import type { Matrix } from "transformation-matrix"
+import { applyToPoint } from "transformation-matrix"
+import type { CanvasContext } from "../types"
+
+export interface DrawPolygonParams {
+  ctx: CanvasContext
+  points: Array<{ x: number; y: number }>
+  fill: string
+  transform: Matrix
+}
+
+export function drawPolygon(params: DrawPolygonParams): void {
+  const { ctx, points, fill, transform } = params
+
+  if (points.length < 3) return
+
+  ctx.beginPath()
+
+  const transformedPoints = points.map((p) =>
+    applyToPoint(transform, [p.x, p.y]),
+  )
+
+  const firstPoint = transformedPoints[0]
+  if (!firstPoint) return
+  const [firstX, firstY] = firstPoint
+  ctx.moveTo(firstX, firstY)
+
+  for (let i = 1; i < transformedPoints.length; i++) {
+    const point = transformedPoints[i]
+    if (!point) continue
+    const [x, y] = point
+    ctx.lineTo(x, y)
+  }
+
+  ctx.closePath()
+  ctx.fillStyle = fill
+  ctx.fill()
+}

package/lib/drawer/types.ts

@@ -25,6 +25,7 @@ export interface CanvasContext {
     endAngle: number,
   ): void
   fill(): void
+  stroke(): void
   rect(x: number, y: number, w: number, h: number): void
   lineTo(x: number, y: number): void
   moveTo(x: number, y: number): void
@@ -32,8 +33,23 @@ export interface CanvasContext {
   restore(): void
   translate(x: number, y: number): void
   rotate(angle: number): void
+  scale(x: number, y: number): void
   fillStyle: string | CanvasGradient | CanvasPattern
+  strokeStyle: string | CanvasGradient | CanvasPattern
+  lineWidth: number
+  lineCap: "butt" | "round" | "square"
+  lineJoin: "bevel" | "round" | "miter"
   canvas: { width: number; height: number }
+  fillText(text: string, x: number, y: number): void
+  font: string
+  textAlign: "start" | "end" | "left" | "right" | "center"
+  textBaseline:
+    | "top"
+    | "hanging"
+    | "middle"
+    | "alphabetic"
+    | "ideographic"
+    | "bottom"
 }
 
 export type CopperLayerName =

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "circuit-to-canvas",
   "main": "dist/index.js",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "scripts": {
     "build": "tsup-node ./lib/index.ts --format esm --dts",
     "format": "biome format --write .",
-    "format:check": "biome format --check ."
+    "format:check": "biome format ."
   },
   "devDependencies": {
     "@biomejs/biome": "^2.3.8",

package/tests/elements/pcb-board.test.ts

@@ -0,0 +1,155 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "canvas"
+import type { PcbBoard } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw rectangular board", 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 board: PcbBoard = {
+    type: "pcb_board",
+    pcb_board_id: "board1",
+    center: { x: 50, y: 50 },
+    width: 80,
+    height: 60,
+    thickness: 1.6,
+    num_layers: 2,
+    material: "fr4",
+  }
+
+  drawer.drawElements([board])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})
+
+test("draw board with custom outline", 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)
+
+  // L-shaped board outline
+  const board: PcbBoard = {
+    type: "pcb_board",
+    pcb_board_id: "board1",
+    center: { x: 50, y: 50 },
+    width: 80,
+    height: 80,
+    thickness: 1.6,
+    num_layers: 2,
+    material: "fr4",
+    outline: [
+      { x: 10, y: 10 },
+      { x: 90, y: 10 },
+      { x: 90, y: 50 },
+      { x: 50, y: 50 },
+      { x: 50, y: 90 },
+      { x: 10, y: 90 },
+    ],
+  }
+
+  drawer.drawElements([board])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+    "custom-outline-board",
+  )
+})
+
+test("draw board with elements", async () => {
+  const canvas = createCanvas(200, 150)
+  const ctx = canvas.getContext("2d")
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, 200, 150)
+
+  const elements = [
+    {
+      type: "pcb_board" as const,
+      pcb_board_id: "board1",
+      center: { x: 100, y: 75 },
+      width: 180,
+      height: 130,
+    },
+    {
+      type: "pcb_smtpad" as const,
+      pcb_smtpad_id: "pad1",
+      shape: "rect" as const,
+      x: 50,
+      y: 50,
+      width: 20,
+      height: 10,
+      layer: "top" as const,
+    },
+    {
+      type: "pcb_smtpad" as const,
+      pcb_smtpad_id: "pad2",
+      shape: "rect" as const,
+      x: 150,
+      y: 50,
+      width: 20,
+      height: 10,
+      layer: "top" as const,
+    },
+    {
+      type: "pcb_trace" as const,
+      pcb_trace_id: "trace1",
+      route: [
+        {
+          route_type: "wire" as const,
+          x: 50,
+          y: 50,
+          width: 3,
+          layer: "top" as const,
+        },
+        {
+          route_type: "wire" as const,
+          x: 100,
+          y: 50,
+          width: 3,
+          layer: "top" as const,
+        },
+        {
+          route_type: "wire" as const,
+          x: 100,
+          y: 100,
+          width: 3,
+          layer: "top" as const,
+        },
+        {
+          route_type: "wire" as const,
+          x: 150,
+          y: 100,
+          width: 3,
+          layer: "top" as const,
+        },
+      ],
+    },
+    {
+      type: "pcb_via" as const,
+      pcb_via_id: "via1",
+      x: 100,
+      y: 75,
+      outer_diameter: 10,
+      hole_diameter: 5,
+      layers: ["top", "bottom"],
+    },
+  ]
+
+  drawer.drawElements(elements)
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+    "board-with-elements",
+  )
+})