circuit-to-canvas 0.0.20 → 0.0.22

package/dist/index.js

@@ -647,6 +647,9 @@ function drawPcbBoard(params) {
   }
 }
 
+// lib/drawer/elements/pcb-silkscreen.ts
+import { applyToPoint as applyToPoint9 } from "transformation-matrix";
+
 // lib/drawer/shapes/text/text.ts
 import { lineAlphabet } from "@tscircuit/alphabet";
 import { applyToPoint as applyToPoint8 } from "transformation-matrix";
@@ -766,22 +769,39 @@ function drawText(params) {
 function layerToSilkscreenColor(layer, colorMap) {
   return layer === "bottom" ? colorMap.silkscreen.bottom : colorMap.silkscreen.top;
 }
+function mapAnchorAlignment(alignment) {
+  if (!alignment) return "center";
+  return alignment;
+}
 function drawPcbSilkscreenText(params) {
   const { ctx, text, realToCanvasMat, colorMap } = params;
+  const content = text.text ?? "";
+  if (!content) return;
   const color = layerToSilkscreenColor(text.layer, colorMap);
-  const fontSize = text.font_size ?? 1;
+  const [x, y] = applyToPoint9(realToCanvasMat, [
+    text.anchor_position.x,
+    text.anchor_position.y
+  ]);
+  const scale2 = Math.abs(realToCanvasMat.a);
+  const fontSize = (text.font_size ?? 1) * scale2;
   const rotation = text.ccw_rotation ?? 0;
-  drawText({
-    ctx,
-    text: text.text,
-    x: text.anchor_position.x,
-    y: text.anchor_position.y,
-    fontSize,
-    color,
-    realToCanvasMat,
-    anchorAlignment: text.anchor_alignment ?? "center",
-    rotation
-  });
+  const layout = getAlphabetLayout(content, fontSize);
+  const alignment = mapAnchorAlignment(text.anchor_alignment);
+  const startPos = getTextStartPosition(alignment, layout);
+  ctx.save();
+  ctx.translate(x, y);
+  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();
 }
 function drawPcbSilkscreenRect(params) {
   const { ctx, rect, realToCanvasMat, colorMap } = params;
@@ -876,7 +896,7 @@ function drawPcbCutout(params) {
 }
 
 // lib/drawer/elements/pcb-copper-pour.ts
-import { applyToPoint as applyToPoint9 } from "transformation-matrix";
+import { applyToPoint as applyToPoint10 } from "transformation-matrix";
 function layerToColor3(layer, colorMap) {
   return colorMap.copper[layer] ?? colorMap.copper.top;
 }
@@ -885,7 +905,7 @@ function drawPcbCopperPour(params) {
   const color = layerToColor3(pour.layer, colorMap);
   ctx.save();
   if (pour.shape === "rect") {
-    const [cx, cy] = applyToPoint9(realToCanvasMat, [
+    const [cx, cy] = applyToPoint10(realToCanvasMat, [
       pour.center.x,
       pour.center.y
     ]);
@@ -906,7 +926,7 @@ function drawPcbCopperPour(params) {
   if (pour.shape === "polygon") {
     if (pour.points && pour.points.length >= 3) {
       const canvasPoints = pour.points.map(
-        (p) => applyToPoint9(realToCanvasMat, [p.x, p.y])
+        (p) => applyToPoint10(realToCanvasMat, [p.x, p.y])
       );
       const firstPoint = canvasPoints[0];
       if (!firstPoint) {
@@ -934,12 +954,12 @@ function drawPcbCopperPour(params) {
 }
 
 // lib/drawer/elements/pcb-copper-text.ts
-import { applyToPoint as applyToPoint10 } from "transformation-matrix";
+import { applyToPoint as applyToPoint11 } from "transformation-matrix";
 var DEFAULT_PADDING = { left: 0.2, right: 0.2, top: 0.2, bottom: 0.2 };
 function layerToCopperColor(layer, colorMap) {
   return colorMap.copper[layer] ?? colorMap.copper.top;
 }
-function mapAnchorAlignment(alignment) {
+function mapAnchorAlignment2(alignment) {
   if (!alignment) return "center";
   if (alignment.includes("left")) return "center_left";
   if (alignment.includes("right")) return "center_right";
@@ -949,7 +969,7 @@ function drawPcbCopperText(params) {
   const { ctx, text, realToCanvasMat, colorMap } = params;
   const content = text.text ?? "";
   if (!content) return;
-  const [x, y] = applyToPoint10(realToCanvasMat, [
+  const [x, y] = applyToPoint11(realToCanvasMat, [
     text.anchor_position.x,
     text.anchor_position.y
   ]);
@@ -963,7 +983,7 @@ function drawPcbCopperText(params) {
   const textColor = layerToCopperColor(text.layer, colorMap);
   const layout = getAlphabetLayout(content, fontSize);
   const totalWidth = layout.width + layout.strokeWidth;
-  const alignment = mapAnchorAlignment(text.anchor_alignment);
+  const alignment = mapAnchorAlignment2(text.anchor_alignment);
   const startPos = getTextStartPosition(alignment, layout);
   const startX = startPos.x;
   const startY = startPos.y;
@@ -1133,7 +1153,7 @@ function drawPcbNoteText(params) {
 }
 
 // lib/drawer/elements/pcb-note-dimension.ts
-import { applyToPoint as applyToPoint11 } from "transformation-matrix";
+import { applyToPoint as applyToPoint12 } from "transformation-matrix";
 
 // lib/drawer/shapes/arrow.ts
 function drawArrow(params) {
@@ -1218,11 +1238,11 @@ function drawPcbNoteDimension(params) {
     stroke: color,
     realToCanvasMat
   });
-  const [canvasFromX, canvasFromY] = applyToPoint11(realToCanvasMat, [
+  const [canvasFromX, canvasFromY] = applyToPoint12(realToCanvasMat, [
     fromX,
     fromY
   ]);
-  const [canvasToX, canvasToY] = applyToPoint11(realToCanvasMat, [toX, toY]);
+  const [canvasToX, canvasToY] = applyToPoint12(realToCanvasMat, [toX, toY]);
   const canvasDx = canvasToX - canvasFromX;
   const canvasDy = canvasToY - canvasFromY;
   const lineAngle = Math.atan2(canvasDy, canvasDx);
@@ -1283,15 +1303,15 @@ function drawPcbNoteDimension(params) {
 }
 
 // lib/drawer/elements/pcb-note-line.ts
-import { applyToPoint as applyToPoint12 } from "transformation-matrix";
+import { applyToPoint as applyToPoint13 } from "transformation-matrix";
 function drawPcbNoteLine(params) {
   const { ctx, line, realToCanvasMat, colorMap } = params;
   const defaultColor = "rgb(89, 148, 220)";
   const color = line.color ?? defaultColor;
   const strokeWidth = line.stroke_width ?? 0.1;
   const isDashed = line.is_dashed ?? false;
-  const [x1, y1] = applyToPoint12(realToCanvasMat, [line.x1, line.y1]);
-  const [x2, y2] = applyToPoint12(realToCanvasMat, [line.x2, line.y2]);
+  const [x1, y1] = applyToPoint13(realToCanvasMat, [line.x1, line.y1]);
+  const [x2, y2] = applyToPoint13(realToCanvasMat, [line.x2, line.y2]);
   const scaledStrokeWidth = strokeWidth * Math.abs(realToCanvasMat.a);
   ctx.save();
   if (isDashed) {

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

@@ -6,12 +6,18 @@ import type {
   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"
-import { drawText } from "../shapes/text"
+import {
+  getAlphabetLayout,
+  strokeAlphabetText,
+  getTextStartPosition,
+  type AnchorAlignment,
+} from "../shapes/text"
 
 export interface DrawPcbSilkscreenTextParams {
   ctx: CanvasContext
@@ -54,27 +60,52 @@ function layerToSilkscreenColor(layer: string, colorMap: PcbColorMap): string {
     : 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 fontSize = text.font_size ?? 1
+  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
 
-  // Use @tscircuit/alphabet to draw text (font-independent, stroke-based rendering)
-  drawText({
-    ctx,
-    text: text.text,
-    x: text.anchor_position.x,
-    y: text.anchor_position.y,
-    fontSize,
-    color,
-    realToCanvasMat,
-    anchorAlignment: text.anchor_alignment ?? "center",
-    rotation,
-  })
+  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()
 }
 
 export function drawPcbSilkscreenRect(

package/package.json

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

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

@@ -64,6 +64,116 @@ test("draw silkscreen text bottom layer", async () => {
   )
 })
 
+test("draw silkscreen text with rotation", 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 text: PcbSilkscreenText = {
+    type: "pcb_silkscreen_text",
+    pcb_silkscreen_text_id: "text1",
+    pcb_component_id: "component1",
+    layer: "top",
+    text: "ROT45",
+    anchor_position: { x: 50, y: 50 },
+    anchor_alignment: "center",
+    font: "tscircuit2024",
+    font_size: 8,
+    ccw_rotation: 45,
+  }
+
+  drawer.drawElements([text])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+    "silkscreen-text-rotated",
+  )
+})
+
+test("draw silkscreen text bottom layer with rotation - tests transform order", async () => {
+  const canvas = createCanvas(150, 150)
+  const ctx = canvas.getContext("2d")
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, 150, 150)
+
+  // This test verifies the transform order (translate -> rotate -> scale) is correct
+  // by testing bottom layer text with various rotations
+  const texts: PcbSilkscreenText[] = [
+    {
+      type: "pcb_silkscreen_text",
+      pcb_silkscreen_text_id: "text1",
+      pcb_component_id: "component1",
+      layer: "bottom",
+      text: "0",
+      anchor_position: { x: 75, y: 30 },
+      anchor_alignment: "center",
+      font: "tscircuit2024",
+      font_size: 6,
+      ccw_rotation: 0,
+    },
+    {
+      type: "pcb_silkscreen_text",
+      pcb_silkscreen_text_id: "text2",
+      pcb_component_id: "component1",
+      layer: "bottom",
+      text: "90",
+      anchor_position: { x: 120, y: 75 },
+      anchor_alignment: "center",
+      font: "tscircuit2024",
+      font_size: 6,
+      ccw_rotation: 90,
+    },
+    {
+      type: "pcb_silkscreen_text",
+      pcb_silkscreen_text_id: "text3",
+      pcb_component_id: "component1",
+      layer: "bottom",
+      text: "180",
+      anchor_position: { x: 75, y: 120 },
+      anchor_alignment: "center",
+      font: "tscircuit2024",
+      font_size: 6,
+      ccw_rotation: 180,
+    },
+    {
+      type: "pcb_silkscreen_text",
+      pcb_silkscreen_text_id: "text4",
+      pcb_component_id: "component1",
+      layer: "bottom",
+      text: "270",
+      anchor_position: { x: 30, y: 75 },
+      anchor_alignment: "center",
+      font: "tscircuit2024",
+      font_size: 6,
+      ccw_rotation: 270,
+    },
+    {
+      type: "pcb_silkscreen_text",
+      pcb_silkscreen_text_id: "text5",
+      pcb_component_id: "component1",
+      layer: "bottom",
+      text: "BTM",
+      anchor_position: { x: 75, y: 75 },
+      anchor_alignment: "center",
+      font: "tscircuit2024",
+      font_size: 8,
+      ccw_rotation: 45,
+    },
+  ]
+
+  drawer.drawElements(texts)
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+    "silkscreen-text-bottom-rotated",
+  )
+})
+
 test("draw silkscreen rect", async () => {
   const canvas = createCanvas(100, 100)
   const ctx = canvas.getContext("2d")