circuit-to-canvas 0.0.1 → 0.0.2

package/lib/drawer/CircuitToCanvasDrawer.ts

@@ -1,4 +1,19 @@
-import type { AnyCircuitElement, PcbPlatedHole } from "circuit-json"
+import type {
+  AnyCircuitElement,
+  PcbPlatedHole,
+  PCBVia,
+  PCBHole,
+  PcbSmtPad,
+  PCBTrace,
+  PcbBoard,
+  PcbSilkscreenText,
+  PcbSilkscreenRect,
+  PcbSilkscreenCircle,
+  PcbSilkscreenLine,
+  PcbSilkscreenPath,
+  PcbCutout,
+  PcbCopperPour,
+} from "circuit-json"
 import { identity, compose, translate, scale } from "transformation-matrix"
 import type { Matrix } from "transformation-matrix"
 import {
@@ -9,6 +24,20 @@ import {
   DEFAULT_PCB_COLOR_MAP,
 } from "./types"
 import { drawPcbPlatedHole } from "./elements/pcb-plated-hole"
+import { drawPcbVia } from "./elements/pcb-via"
+import { drawPcbHole } from "./elements/pcb-hole"
+import { drawPcbSmtPad } from "./elements/pcb-smtpad"
+import { drawPcbTrace } from "./elements/pcb-trace"
+import { drawPcbBoard } from "./elements/pcb-board"
+import {
+  drawPcbSilkscreenText,
+  drawPcbSilkscreenRect,
+  drawPcbSilkscreenCircle,
+  drawPcbSilkscreenLine,
+  drawPcbSilkscreenPath,
+} from "./elements/pcb-silkscreen"
+import { drawPcbCutout } from "./elements/pcb-cutout"
+import { drawPcbCopperPour } from "./elements/pcb-copper-pour"
 
 export interface DrawElementsOptions {
   layers?: string[]
@@ -115,5 +144,113 @@ export class CircuitToCanvasDrawer {
         colorMap: this.colorMap,
       })
     }
+
+    if (element.type === "pcb_via") {
+      drawPcbVia({
+        ctx: this.ctx,
+        via: element as PCBVia,
+        transform: this.realToCanvasMat,
+        colorMap: this.colorMap,
+      })
+    }
+
+    if (element.type === "pcb_hole") {
+      drawPcbHole({
+        ctx: this.ctx,
+        hole: element as PCBHole,
+        transform: this.realToCanvasMat,
+        colorMap: this.colorMap,
+      })
+    }
+
+    if (element.type === "pcb_smtpad") {
+      drawPcbSmtPad({
+        ctx: this.ctx,
+        pad: element as PcbSmtPad,
+        transform: this.realToCanvasMat,
+        colorMap: this.colorMap,
+      })
+    }
+
+    if (element.type === "pcb_trace") {
+      drawPcbTrace({
+        ctx: this.ctx,
+        trace: element as PCBTrace,
+        transform: this.realToCanvasMat,
+        colorMap: this.colorMap,
+      })
+    }
+
+    if (element.type === "pcb_board") {
+      drawPcbBoard({
+        ctx: this.ctx,
+        board: element as PcbBoard,
+        transform: this.realToCanvasMat,
+        colorMap: this.colorMap,
+      })
+    }
+
+    if (element.type === "pcb_silkscreen_text") {
+      drawPcbSilkscreenText({
+        ctx: this.ctx,
+        text: element as PcbSilkscreenText,
+        transform: this.realToCanvasMat,
+        colorMap: this.colorMap,
+      })
+    }
+
+    if (element.type === "pcb_silkscreen_rect") {
+      drawPcbSilkscreenRect({
+        ctx: this.ctx,
+        rect: element as PcbSilkscreenRect,
+        transform: this.realToCanvasMat,
+        colorMap: this.colorMap,
+      })
+    }
+
+    if (element.type === "pcb_silkscreen_circle") {
+      drawPcbSilkscreenCircle({
+        ctx: this.ctx,
+        circle: element as PcbSilkscreenCircle,
+        transform: this.realToCanvasMat,
+        colorMap: this.colorMap,
+      })
+    }
+
+    if (element.type === "pcb_silkscreen_line") {
+      drawPcbSilkscreenLine({
+        ctx: this.ctx,
+        line: element as PcbSilkscreenLine,
+        transform: this.realToCanvasMat,
+        colorMap: this.colorMap,
+      })
+    }
+
+    if (element.type === "pcb_silkscreen_path") {
+      drawPcbSilkscreenPath({
+        ctx: this.ctx,
+        path: element as PcbSilkscreenPath,
+        transform: this.realToCanvasMat,
+        colorMap: this.colorMap,
+      })
+    }
+
+    if (element.type === "pcb_cutout") {
+      drawPcbCutout({
+        ctx: this.ctx,
+        cutout: element as PcbCutout,
+        transform: this.realToCanvasMat,
+        colorMap: this.colorMap,
+      })
+    }
+
+    if (element.type === "pcb_copper_pour") {
+      drawPcbCopperPour({
+        ctx: this.ctx,
+        pour: element as PcbCopperPour,
+        transform: this.realToCanvasMat,
+        colorMap: this.colorMap,
+      })
+    }
   }
 }

package/lib/drawer/elements/index.ts

@@ -2,3 +2,33 @@ export {
   drawPcbPlatedHole,
   type DrawPcbPlatedHoleParams,
 } from "./pcb-plated-hole"
+
+export { drawPcbVia, type DrawPcbViaParams } from "./pcb-via"
+
+export { drawPcbHole, type DrawPcbHoleParams } from "./pcb-hole"
+
+export { drawPcbSmtPad, type DrawPcbSmtPadParams } from "./pcb-smtpad"
+
+export { drawPcbTrace, type DrawPcbTraceParams } from "./pcb-trace"
+
+export { drawPcbBoard, type DrawPcbBoardParams } from "./pcb-board"
+
+export {
+  drawPcbSilkscreenText,
+  drawPcbSilkscreenRect,
+  drawPcbSilkscreenCircle,
+  drawPcbSilkscreenLine,
+  drawPcbSilkscreenPath,
+  type DrawPcbSilkscreenTextParams,
+  type DrawPcbSilkscreenRectParams,
+  type DrawPcbSilkscreenCircleParams,
+  type DrawPcbSilkscreenLineParams,
+  type DrawPcbSilkscreenPathParams,
+} from "./pcb-silkscreen"
+
+export { drawPcbCutout, type DrawPcbCutoutParams } from "./pcb-cutout"
+
+export {
+  drawPcbCopperPour,
+  type DrawPcbCopperPourParams,
+} from "./pcb-copper-pour"

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

@@ -0,0 +1,62 @@
+import type { PcbBoard } from "circuit-json"
+import type { Matrix } from "transformation-matrix"
+import type { PcbColorMap, CanvasContext } from "../types"
+import { drawPath } from "../shapes/path"
+import { drawRect } from "../shapes/rect"
+
+export interface DrawPcbBoardParams {
+  ctx: CanvasContext
+  board: PcbBoard
+  transform: Matrix
+  colorMap: PcbColorMap
+}
+
+export function drawPcbBoard(params: DrawPcbBoardParams): void {
+  const { ctx, board, transform, colorMap } = params
+  const { width, height, center, outline } = board
+
+  // If the board has a custom outline, draw it as a path
+  if (outline && Array.isArray(outline) && outline.length >= 3) {
+    drawPath({
+      ctx,
+      points: outline.map((p) => ({ x: p.x, y: p.y })),
+      stroke: colorMap.boardOutline,
+      strokeWidth: 0.1,
+      transform,
+      closePath: true,
+    })
+    return
+  }
+
+  // Otherwise draw a rectangle
+  if (width !== undefined && height !== undefined && center) {
+    // Draw the board outline as a rectangle stroke
+    drawRect({
+      ctx,
+      center,
+      width,
+      height,
+      fill: "transparent",
+      transform,
+    })
+
+    // Draw the outline stroke separately using path
+    const halfWidth = width / 2
+    const halfHeight = height / 2
+    const corners = [
+      { x: center.x - halfWidth, y: center.y - halfHeight },
+      { x: center.x + halfWidth, y: center.y - halfHeight },
+      { x: center.x + halfWidth, y: center.y + halfHeight },
+      { x: center.x - halfWidth, y: center.y + halfHeight },
+    ]
+
+    drawPath({
+      ctx,
+      points: corners,
+      stroke: colorMap.boardOutline,
+      strokeWidth: 0.1,
+      transform,
+      closePath: true,
+    })
+  }
+}

package/lib/drawer/elements/pcb-copper-pour.ts

@@ -0,0 +1,84 @@
+import type { PcbCopperPour } from "circuit-json"
+import type { Matrix } from "transformation-matrix"
+import { applyToPoint } from "transformation-matrix"
+import type { PcbColorMap, CanvasContext } from "../types"
+import { drawRect } from "../shapes/rect"
+import { drawPolygon } from "../shapes/polygon"
+
+export interface DrawPcbCopperPourParams {
+  ctx: CanvasContext
+  pour: PcbCopperPour
+  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 drawPcbCopperPour(params: DrawPcbCopperPourParams): void {
+  const { ctx, pour, transform, colorMap } = params
+
+  const color = layerToColor(pour.layer, colorMap)
+
+  // Save context to apply opacity
+  ctx.save()
+
+  if (pour.shape === "rect") {
+    // Draw the copper pour rectangle with 50% opacity
+    const [cx, cy] = applyToPoint(transform, [pour.center.x, pour.center.y])
+    const scaledWidth = pour.width * Math.abs(transform.a)
+    const scaledHeight = pour.height * Math.abs(transform.a)
+
+    ctx.translate(cx, cy)
+
+    if (pour.rotation) {
+      ctx.rotate(-pour.rotation * (Math.PI / 180))
+    }
+
+    ctx.beginPath()
+    ctx.rect(-scaledWidth / 2, -scaledHeight / 2, scaledWidth, scaledHeight)
+    ctx.fillStyle = color
+    ;(ctx as any).globalAlpha = 0.5
+    ctx.fill()
+    ctx.restore()
+    return
+  }
+
+  if (pour.shape === "polygon") {
+    if (pour.points && pour.points.length >= 3) {
+      const transformedPoints = pour.points.map((p: { x: number; y: number }) =>
+        applyToPoint(transform, [p.x, p.y]),
+      )
+
+      const firstPoint = transformedPoints[0]
+      if (!firstPoint) {
+        ctx.restore()
+        return
+      }
+
+      ctx.beginPath()
+      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 = color
+      ;(ctx as any).globalAlpha = 0.5
+      ctx.fill()
+    }
+    ctx.restore()
+    return
+  }
+
+  ctx.restore()
+}

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

@@ -0,0 +1,53 @@
+import type { PcbCutout } from "circuit-json"
+import type { Matrix } from "transformation-matrix"
+import type { PcbColorMap, CanvasContext } from "../types"
+import { drawRect } from "../shapes/rect"
+import { drawCircle } from "../shapes/circle"
+import { drawPolygon } from "../shapes/polygon"
+
+export interface DrawPcbCutoutParams {
+  ctx: CanvasContext
+  cutout: PcbCutout
+  transform: Matrix
+  colorMap: PcbColorMap
+}
+
+export function drawPcbCutout(params: DrawPcbCutoutParams): void {
+  const { ctx, cutout, transform, colorMap } = params
+
+  if (cutout.shape === "rect") {
+    drawRect({
+      ctx,
+      center: cutout.center,
+      width: cutout.width,
+      height: cutout.height,
+      fill: colorMap.drill,
+      transform,
+      rotation: cutout.rotation ?? 0,
+    })
+    return
+  }
+
+  if (cutout.shape === "circle") {
+    drawCircle({
+      ctx,
+      center: cutout.center,
+      radius: cutout.radius,
+      fill: colorMap.drill,
+      transform,
+    })
+    return
+  }
+
+  if (cutout.shape === "polygon") {
+    if (cutout.points && cutout.points.length >= 3) {
+      drawPolygon({
+        ctx,
+        points: cutout.points,
+        fill: colorMap.drill,
+        transform,
+      })
+    }
+    return
+  }
+}

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

@@ -0,0 +1,90 @@
+import type { PCBHole } 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 DrawPcbHoleParams {
+  ctx: CanvasContext
+  hole: PCBHole
+  transform: Matrix
+  colorMap: PcbColorMap
+}
+
+export function drawPcbHole(params: DrawPcbHoleParams): void {
+  const { ctx, hole, transform, colorMap } = params
+
+  if (hole.hole_shape === "circle") {
+    drawCircle({
+      ctx,
+      center: { x: hole.x, y: hole.y },
+      radius: hole.hole_diameter / 2,
+      fill: colorMap.drill,
+      transform,
+    })
+    return
+  }
+
+  if (hole.hole_shape === "square") {
+    drawRect({
+      ctx,
+      center: { x: hole.x, y: hole.y },
+      width: hole.hole_diameter,
+      height: hole.hole_diameter,
+      fill: colorMap.drill,
+      transform,
+    })
+    return
+  }
+
+  if (hole.hole_shape === "oval") {
+    drawOval({
+      ctx,
+      center: { x: hole.x, y: hole.y },
+      width: hole.hole_width,
+      height: hole.hole_height,
+      fill: colorMap.drill,
+      transform,
+    })
+    return
+  }
+
+  if (hole.hole_shape === "rect") {
+    drawRect({
+      ctx,
+      center: { x: hole.x, y: hole.y },
+      width: hole.hole_width,
+      height: hole.hole_height,
+      fill: colorMap.drill,
+      transform,
+    })
+    return
+  }
+
+  if (hole.hole_shape === "pill") {
+    drawPill({
+      ctx,
+      center: { x: hole.x, y: hole.y },
+      width: hole.hole_width,
+      height: hole.hole_height,
+      fill: colorMap.drill,
+      transform,
+    })
+    return
+  }
+
+  if (hole.hole_shape === "rotated_pill") {
+    drawPill({
+      ctx,
+      center: { x: hole.x, y: hole.y },
+      width: hole.hole_width,
+      height: hole.hole_height,
+      fill: colorMap.drill,
+      transform,
+      rotation: (hole as any).ccw_rotation ?? 0,
+    })
+    return
+  }
+}

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

@@ -0,0 +1,171 @@
+import type {
+  PcbSilkscreenText,
+  PcbSilkscreenRect,
+  PcbSilkscreenCircle,
+  PcbSilkscreenLine,
+  PcbSilkscreenPath,
+} from "circuit-json"
+import type { Matrix } from "transformation-matrix"
+import { applyToPoint } from "transformation-matrix"
+import type { PcbColorMap, CanvasContext } from "../types"
+import { drawRect } from "../shapes/rect"
+import { drawCircle } from "../shapes/circle"
+import { drawLine } from "../shapes/line"
+import { drawPath } from "../shapes/path"
+
+export interface DrawPcbSilkscreenTextParams {
+  ctx: CanvasContext
+  text: PcbSilkscreenText
+  transform: Matrix
+  colorMap: PcbColorMap
+}
+
+export interface DrawPcbSilkscreenRectParams {
+  ctx: CanvasContext
+  rect: PcbSilkscreenRect
+  transform: Matrix
+  colorMap: PcbColorMap
+}
+
+export interface DrawPcbSilkscreenCircleParams {
+  ctx: CanvasContext
+  circle: PcbSilkscreenCircle
+  transform: Matrix
+  colorMap: PcbColorMap
+}
+
+export interface DrawPcbSilkscreenLineParams {
+  ctx: CanvasContext
+  line: PcbSilkscreenLine
+  transform: Matrix
+  colorMap: PcbColorMap
+}
+
+export interface DrawPcbSilkscreenPathParams {
+  ctx: CanvasContext
+  path: PcbSilkscreenPath
+  transform: Matrix
+  colorMap: PcbColorMap
+}
+
+function layerToSilkscreenColor(layer: string, colorMap: PcbColorMap): string {
+  return layer === "bottom"
+    ? colorMap.silkscreen.bottom
+    : colorMap.silkscreen.top
+}
+
+function mapAnchorAlignment(
+  alignment?: string,
+): "start" | "end" | "left" | "right" | "center" {
+  if (!alignment) return "center"
+  if (alignment.includes("left")) return "left"
+  if (alignment.includes("right")) return "right"
+  return "center"
+}
+
+export function drawPcbSilkscreenText(
+  params: DrawPcbSilkscreenTextParams,
+): void {
+  const { ctx, text, transform, colorMap } = params
+
+  const color = layerToSilkscreenColor(text.layer, colorMap)
+  const [x, y] = applyToPoint(transform, [
+    text.anchor_position.x,
+    text.anchor_position.y,
+  ])
+
+  const fontSize = (text.font_size ?? 1) * Math.abs(transform.a)
+  const rotation = text.ccw_rotation ?? 0
+
+  ctx.save()
+  ctx.translate(x, y)
+
+  // Apply rotation (CCW rotation in degrees)
+  if (rotation !== 0) {
+    ctx.rotate(-rotation * (Math.PI / 180))
+  }
+
+  ctx.font = `${fontSize}px sans-serif`
+  ctx.fillStyle = color
+  ctx.textAlign = mapAnchorAlignment(text.anchor_alignment)
+  ctx.textBaseline = "middle"
+  ctx.fillText(text.text, 0, 0)
+  ctx.restore()
+}
+
+export function drawPcbSilkscreenRect(
+  params: DrawPcbSilkscreenRectParams,
+): void {
+  const { ctx, rect, transform, colorMap } = params
+
+  const color = layerToSilkscreenColor(rect.layer, colorMap)
+
+  drawRect({
+    ctx,
+    center: rect.center,
+    width: rect.width,
+    height: rect.height,
+    fill: color,
+    transform,
+  })
+}
+
+export function drawPcbSilkscreenCircle(
+  params: DrawPcbSilkscreenCircleParams,
+): void {
+  const { ctx, circle, transform, colorMap } = params
+
+  const color = layerToSilkscreenColor(circle.layer, colorMap)
+
+  drawCircle({
+    ctx,
+    center: circle.center,
+    radius: circle.radius,
+    fill: color,
+    transform,
+  })
+}
+
+export function drawPcbSilkscreenLine(
+  params: DrawPcbSilkscreenLineParams,
+): void {
+  const { ctx, line, transform, colorMap } = params
+
+  const color = layerToSilkscreenColor(line.layer, colorMap)
+
+  drawLine({
+    ctx,
+    start: { x: line.x1, y: line.y1 },
+    end: { x: line.x2, y: line.y2 },
+    strokeWidth: line.stroke_width ?? 0.1,
+    stroke: color,
+    transform,
+  })
+}
+
+export function drawPcbSilkscreenPath(
+  params: DrawPcbSilkscreenPathParams,
+): void {
+  const { ctx, path, transform, colorMap } = params
+
+  const color = layerToSilkscreenColor(path.layer, colorMap)
+
+  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,
+    })
+  }
+}