circuit-to-canvas 0.0.22 → 0.0.24

package/dist/index.d.ts

@@ -300,34 +300,38 @@ interface DrawPcbSilkscreenTextParams {
     realToCanvasMat: Matrix;
     colorMap: PcbColorMap;
 }
+declare function drawPcbSilkscreenText(params: DrawPcbSilkscreenTextParams): void;
+
 interface DrawPcbSilkscreenRectParams {
     ctx: CanvasContext;
     rect: PcbSilkscreenRect;
     realToCanvasMat: Matrix;
     colorMap: PcbColorMap;
 }
+declare function drawPcbSilkscreenRect(params: DrawPcbSilkscreenRectParams): void;
+
 interface DrawPcbSilkscreenCircleParams {
     ctx: CanvasContext;
     circle: PcbSilkscreenCircle;
     realToCanvasMat: Matrix;
     colorMap: PcbColorMap;
 }
+declare function drawPcbSilkscreenCircle(params: DrawPcbSilkscreenCircleParams): void;
+
 interface DrawPcbSilkscreenLineParams {
     ctx: CanvasContext;
     line: PcbSilkscreenLine;
     realToCanvasMat: Matrix;
     colorMap: PcbColorMap;
 }
+declare function drawPcbSilkscreenLine(params: DrawPcbSilkscreenLineParams): void;
+
 interface DrawPcbSilkscreenPathParams {
     ctx: CanvasContext;
     path: PcbSilkscreenPath;
     realToCanvasMat: Matrix;
     colorMap: PcbColorMap;
 }
-declare function drawPcbSilkscreenText(params: DrawPcbSilkscreenTextParams): void;
-declare function drawPcbSilkscreenRect(params: DrawPcbSilkscreenRectParams): void;
-declare function drawPcbSilkscreenCircle(params: DrawPcbSilkscreenCircleParams): void;
-declare function drawPcbSilkscreenLine(params: DrawPcbSilkscreenLineParams): void;
 declare function drawPcbSilkscreenPath(params: DrawPcbSilkscreenPathParams): void;
 
 interface DrawPcbCutoutParams {

package/dist/index.js

@@ -647,7 +647,7 @@ function drawPcbBoard(params) {
   }
 }
 
-// lib/drawer/elements/pcb-silkscreen.ts
+// lib/drawer/elements/pcb-silkscreen-text.ts
 import { applyToPoint as applyToPoint9 } from "transformation-matrix";
 
 // lib/drawer/shapes/text/text.ts
@@ -765,7 +765,7 @@ function drawText(params) {
   ctx.restore();
 }
 
-// lib/drawer/elements/pcb-silkscreen.ts
+// lib/drawer/elements/pcb-silkscreen-text.ts
 function layerToSilkscreenColor(layer, colorMap) {
   return layer === "bottom" ? colorMap.silkscreen.bottom : colorMap.silkscreen.top;
 }
@@ -803,9 +803,14 @@ function drawPcbSilkscreenText(params) {
   strokeAlphabetText(ctx, content, layout, startPos.x, startPos.y);
   ctx.restore();
 }
+
+// lib/drawer/elements/pcb-silkscreen-rect.ts
+function layerToSilkscreenColor2(layer, colorMap) {
+  return layer === "bottom" ? colorMap.silkscreen.bottom : colorMap.silkscreen.top;
+}
 function drawPcbSilkscreenRect(params) {
   const { ctx, rect, realToCanvasMat, colorMap } = params;
-  const color = layerToSilkscreenColor(rect.layer, colorMap);
+  const color = layerToSilkscreenColor2(rect.layer, colorMap);
   drawRect({
     ctx,
     center: rect.center,
@@ -815,9 +820,14 @@ function drawPcbSilkscreenRect(params) {
     realToCanvasMat
   });
 }
+
+// lib/drawer/elements/pcb-silkscreen-circle.ts
+function layerToSilkscreenColor3(layer, colorMap) {
+  return layer === "bottom" ? colorMap.silkscreen.bottom : colorMap.silkscreen.top;
+}
 function drawPcbSilkscreenCircle(params) {
   const { ctx, circle, realToCanvasMat, colorMap } = params;
-  const color = layerToSilkscreenColor(circle.layer, colorMap);
+  const color = layerToSilkscreenColor3(circle.layer, colorMap);
   drawCircle({
     ctx,
     center: circle.center,
@@ -826,9 +836,14 @@ function drawPcbSilkscreenCircle(params) {
     realToCanvasMat
   });
 }
+
+// lib/drawer/elements/pcb-silkscreen-line.ts
+function layerToSilkscreenColor4(layer, colorMap) {
+  return layer === "bottom" ? colorMap.silkscreen.bottom : colorMap.silkscreen.top;
+}
 function drawPcbSilkscreenLine(params) {
   const { ctx, line, realToCanvasMat, colorMap } = params;
-  const color = layerToSilkscreenColor(line.layer, colorMap);
+  const color = layerToSilkscreenColor4(line.layer, colorMap);
   drawLine({
     ctx,
     start: { x: line.x1, y: line.y1 },
@@ -838,9 +853,14 @@ function drawPcbSilkscreenLine(params) {
     realToCanvasMat
   });
 }
+
+// lib/drawer/elements/pcb-silkscreen-path.ts
+function layerToSilkscreenColor5(layer, colorMap) {
+  return layer === "bottom" ? colorMap.silkscreen.bottom : colorMap.silkscreen.top;
+}
 function drawPcbSilkscreenPath(params) {
   const { ctx, path, realToCanvasMat, colorMap } = params;
-  const color = layerToSilkscreenColor(path.layer, colorMap);
+  const color = layerToSilkscreenColor5(path.layer, colorMap);
   if (!path.route || path.route.length < 2) return;
   for (let i = 0; i < path.route.length - 1; i++) {
     const start = path.route[i];

package/lib/drawer/CircuitToCanvasDrawer.ts

@@ -38,13 +38,11 @@ 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 { drawPcbSilkscreenText } from "./elements/pcb-silkscreen-text"
+import { drawPcbSilkscreenRect } from "./elements/pcb-silkscreen-rect"
+import { drawPcbSilkscreenCircle } from "./elements/pcb-silkscreen-circle"
+import { drawPcbSilkscreenLine } from "./elements/pcb-silkscreen-line"
+import { drawPcbSilkscreenPath } from "./elements/pcb-silkscreen-path"
 import { drawPcbCutout } from "./elements/pcb-cutout"
 import { drawPcbCopperPour } from "./elements/pcb-copper-pour"
 import { drawPcbCopperText } from "./elements/pcb-copper-text"

package/lib/drawer/elements/index.ts

@@ -15,16 +15,28 @@ export { drawPcbBoard, type DrawPcbBoardParams } from "./pcb-board"
 
 export {
   drawPcbSilkscreenText,
-  drawPcbSilkscreenRect,
-  drawPcbSilkscreenCircle,
-  drawPcbSilkscreenLine,
-  drawPcbSilkscreenPath,
   type DrawPcbSilkscreenTextParams,
+} from "./pcb-silkscreen-text"
+
+export {
+  drawPcbSilkscreenRect,
   type DrawPcbSilkscreenRectParams,
+} from "./pcb-silkscreen-rect"
+
+export {
+  drawPcbSilkscreenCircle,
   type DrawPcbSilkscreenCircleParams,
+} from "./pcb-silkscreen-circle"
+
+export {
+  drawPcbSilkscreenLine,
   type DrawPcbSilkscreenLineParams,
+} from "./pcb-silkscreen-line"
+
+export {
+  drawPcbSilkscreenPath,
   type DrawPcbSilkscreenPathParams,
-} from "./pcb-silkscreen"
+} from "./pcb-silkscreen-path"
 
 export { drawPcbCutout, type DrawPcbCutoutParams } from "./pcb-cutout"
 

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

@@ -0,0 +1,33 @@
+import type { PcbSilkscreenCircle } from "circuit-json"
+import type { Matrix } from "transformation-matrix"
+import type { PcbColorMap, CanvasContext } from "../types"
+import { drawCircle } from "../shapes/circle"
+
+export interface DrawPcbSilkscreenCircleParams {
+  ctx: CanvasContext
+  circle: PcbSilkscreenCircle
+  realToCanvasMat: Matrix
+  colorMap: PcbColorMap
+}
+
+function layerToSilkscreenColor(layer: string, colorMap: PcbColorMap): string {
+  return layer === "bottom"
+    ? colorMap.silkscreen.bottom
+    : colorMap.silkscreen.top
+}
+
+export function drawPcbSilkscreenCircle(
+  params: DrawPcbSilkscreenCircleParams,
+): void {
+  const { ctx, circle, realToCanvasMat, colorMap } = params
+
+  const color = layerToSilkscreenColor(circle.layer, colorMap)
+
+  drawCircle({
+    ctx,
+    center: circle.center,
+    radius: circle.radius,
+    fill: color,
+    realToCanvasMat,
+  })
+}

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

@@ -0,0 +1,34 @@
+import type { PcbSilkscreenLine } from "circuit-json"
+import type { Matrix } from "transformation-matrix"
+import type { PcbColorMap, CanvasContext } from "../types"
+import { drawLine } from "../shapes/line"
+
+export interface DrawPcbSilkscreenLineParams {
+  ctx: CanvasContext
+  line: PcbSilkscreenLine
+  realToCanvasMat: Matrix
+  colorMap: PcbColorMap
+}
+
+function layerToSilkscreenColor(layer: string, colorMap: PcbColorMap): string {
+  return layer === "bottom"
+    ? colorMap.silkscreen.bottom
+    : colorMap.silkscreen.top
+}
+
+export function drawPcbSilkscreenLine(
+  params: DrawPcbSilkscreenLineParams,
+): void {
+  const { ctx, line, realToCanvasMat, 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,
+    realToCanvasMat,
+  })
+}

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

@@ -0,0 +1,44 @@
+import type { PcbSilkscreenPath } from "circuit-json"
+import type { Matrix } from "transformation-matrix"
+import type { PcbColorMap, CanvasContext } from "../types"
+import { drawLine } from "../shapes/line"
+
+export interface DrawPcbSilkscreenPathParams {
+  ctx: CanvasContext
+  path: PcbSilkscreenPath
+  realToCanvasMat: Matrix
+  colorMap: PcbColorMap
+}
+
+function layerToSilkscreenColor(layer: string, colorMap: PcbColorMap): string {
+  return layer === "bottom"
+    ? colorMap.silkscreen.bottom
+    : colorMap.silkscreen.top
+}
+
+export function drawPcbSilkscreenPath(
+  params: DrawPcbSilkscreenPathParams,
+): void {
+  const { ctx, path, realToCanvasMat, 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,
+      realToCanvasMat,
+    })
+  }
+}

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

@@ -0,0 +1,34 @@
+import type { PcbSilkscreenRect } from "circuit-json"
+import type { Matrix } from "transformation-matrix"
+import type { PcbColorMap, CanvasContext } from "../types"
+import { drawRect } from "../shapes/rect"
+
+export interface DrawPcbSilkscreenRectParams {
+  ctx: CanvasContext
+  rect: PcbSilkscreenRect
+  realToCanvasMat: Matrix
+  colorMap: PcbColorMap
+}
+
+function layerToSilkscreenColor(layer: string, colorMap: PcbColorMap): string {
+  return layer === "bottom"
+    ? colorMap.silkscreen.bottom
+    : colorMap.silkscreen.top
+}
+
+export function drawPcbSilkscreenRect(
+  params: DrawPcbSilkscreenRectParams,
+): void {
+  const { ctx, rect, realToCanvasMat, colorMap } = params
+
+  const color = layerToSilkscreenColor(rect.layer, colorMap)
+
+  drawRect({
+    ctx,
+    center: rect.center,
+    width: rect.width,
+    height: rect.height,
+    fill: color,
+    realToCanvasMat,
+  })
+}

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

@@ -0,0 +1,71 @@
+import type { PcbSilkscreenText } from "circuit-json"
+import type { Matrix } from "transformation-matrix"
+import { applyToPoint } from "transformation-matrix"
+import type { PcbColorMap, CanvasContext } from "../types"
+import {
+  getAlphabetLayout,
+  strokeAlphabetText,
+  getTextStartPosition,
+  type AnchorAlignment,
+} from "../shapes/text"
+
+export interface DrawPcbSilkscreenTextParams {
+  ctx: CanvasContext
+  text: PcbSilkscreenText
+  realToCanvasMat: Matrix
+  colorMap: PcbColorMap
+}
+
+function layerToSilkscreenColor(layer: string, colorMap: PcbColorMap): string {
+  return layer === "bottom"
+    ? colorMap.silkscreen.bottom
+    : colorMap.silkscreen.top
+}
+
+function mapAnchorAlignment(alignment?: string): AnchorAlignment {
+  if (!alignment) return "center"
+  return alignment as AnchorAlignment
+}
+
+export function drawPcbSilkscreenText(
+  params: DrawPcbSilkscreenTextParams,
+): void {
+  const { ctx, text, realToCanvasMat, colorMap } = params
+
+  const content = text.text ?? ""
+  if (!content) return
+
+  const color = layerToSilkscreenColor(text.layer, colorMap)
+  const [x, y] = applyToPoint(realToCanvasMat, [
+    text.anchor_position.x,
+    text.anchor_position.y,
+  ])
+  const scale = Math.abs(realToCanvasMat.a)
+  const fontSize = (text.font_size ?? 1) * scale
+  const rotation = text.ccw_rotation ?? 0
+
+  const layout = getAlphabetLayout(content, fontSize)
+  const alignment = mapAnchorAlignment(text.anchor_alignment)
+  const startPos = getTextStartPosition(alignment, layout)
+
+  ctx.save()
+  ctx.translate(x, y)
+
+  // Apply rotation (CCW rotation in degrees)
+  if (rotation !== 0) {
+    ctx.rotate(-rotation * (Math.PI / 180))
+  }
+
+  if (text.layer === "bottom") {
+    ctx.scale(-1, 1)
+  }
+
+  ctx.lineWidth = layout.strokeWidth
+  ctx.lineCap = "round"
+  ctx.lineJoin = "round"
+  ctx.strokeStyle = color
+
+  strokeAlphabetText(ctx, content, layout, startPos.x, startPos.y)
+
+  ctx.restore()
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "circuit-to-canvas",
   "main": "dist/index.js",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "type": "module",
   "scripts": {
     "build": "tsup-node ./lib/index.ts --format esm --dts",

package/tests/elements/pcb-silkscreen-circle.test.ts

@@ -0,0 +1,29 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import type { PcbSilkscreenCircle } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw silkscreen circle", 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 circle: PcbSilkscreenCircle = {
+    type: "pcb_silkscreen_circle",
+    pcb_silkscreen_circle_id: "circle1",
+    pcb_component_id: "component1",
+    layer: "top",
+    center: { x: 50, y: 50 },
+    radius: 20,
+    stroke_width: 0.2,
+  }
+
+  drawer.drawElements([circle])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

package/tests/elements/pcb-silkscreen-line.test.ts

@@ -0,0 +1,31 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import type { PcbSilkscreenLine } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw silkscreen line", 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 line: PcbSilkscreenLine = {
+    type: "pcb_silkscreen_line",
+    pcb_silkscreen_line_id: "line1",
+    pcb_component_id: "component1",
+    layer: "top",
+    x1: 20,
+    y1: 20,
+    x2: 80,
+    y2: 80,
+    stroke_width: 2,
+  }
+
+  drawer.drawElements([line])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

package/tests/elements/pcb-silkscreen-on-component.test.ts

@@ -0,0 +1,75 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw silkscreen on component", async () => {
+  const canvas = createCanvas(150, 100)
+  const ctx = canvas.getContext("2d")
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, 150, 100)
+
+  const elements = [
+    // Component outline
+    {
+      type: "pcb_silkscreen_rect" as const,
+      pcb_silkscreen_rect_id: "outline1",
+      pcb_component_id: "component1",
+      layer: "top" as const,
+      center: { x: 75, y: 50 },
+      width: 60,
+      height: 30,
+      stroke_width: 0.2,
+    },
+    // Pin 1 indicator
+    {
+      type: "pcb_silkscreen_circle" as const,
+      pcb_silkscreen_circle_id: "pin1marker",
+      pcb_component_id: "component1",
+      layer: "top" as const,
+      center: { x: 55, y: 40 },
+      radius: 3,
+      stroke_width: 0.2,
+    },
+    // Component label
+    {
+      type: "pcb_silkscreen_text" as const,
+      pcb_silkscreen_text_id: "label1",
+      pcb_component_id: "component1",
+      layer: "top" as const,
+      text: "IC1",
+      anchor_position: { x: 75, y: 50 },
+      anchor_alignment: "center" as const,
+      font: "tscircuit2024" as const,
+      font_size: 8,
+    },
+    // SMT pads
+    {
+      type: "pcb_smtpad" as const,
+      pcb_smtpad_id: "pad1",
+      shape: "rect" as const,
+      x: 55,
+      y: 50,
+      width: 10,
+      height: 5,
+      layer: "top" as const,
+    },
+    {
+      type: "pcb_smtpad" as const,
+      pcb_smtpad_id: "pad2",
+      shape: "rect" as const,
+      x: 95,
+      y: 50,
+      width: 10,
+      height: 5,
+      layer: "top" as const,
+    },
+  ]
+
+  drawer.drawElements(elements)
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

package/tests/elements/pcb-silkscreen-path.test.ts

@@ -0,0 +1,36 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import type { PcbSilkscreenPath } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw silkscreen path", 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: PcbSilkscreenPath = {
+    type: "pcb_silkscreen_path",
+    pcb_silkscreen_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,
+  }
+
+  drawer.drawElements([path])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

package/tests/elements/pcb-silkscreen-rect.test.ts

@@ -0,0 +1,30 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import type { PcbSilkscreenRect } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw silkscreen rect", 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 rect: PcbSilkscreenRect = {
+    type: "pcb_silkscreen_rect",
+    pcb_silkscreen_rect_id: "rect1",
+    pcb_component_id: "component1",
+    layer: "top",
+    center: { x: 50, y: 50 },
+    width: 40,
+    height: 20,
+    stroke_width: 0.2,
+  }
+
+  drawer.drawElements([rect])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})