circuit-to-canvas 0.0.21 → 0.0.22

package/dist/index.js

@@ -648,34 +648,159 @@ 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";
+
+// lib/drawer/shapes/text/getAlphabetLayout.ts
+var GLYPH_WIDTH_RATIO = 0.62;
+var LETTER_SPACING_RATIO = 0.3;
+var SPACE_WIDTH_RATIO = 1;
+var STROKE_WIDTH_RATIO = 0.13;
+function getAlphabetLayout(text, fontSize) {
+  const glyphWidth = fontSize * GLYPH_WIDTH_RATIO;
+  const letterSpacing = glyphWidth * LETTER_SPACING_RATIO;
+  const spaceWidth = glyphWidth * SPACE_WIDTH_RATIO;
+  const characters = Array.from(text);
+  let width = 0;
+  characters.forEach((char, index) => {
+    const advance = char === " " ? spaceWidth : glyphWidth;
+    width += advance;
+    if (index < characters.length - 1) width += letterSpacing;
+  });
+  const strokeWidth = Math.max(fontSize * STROKE_WIDTH_RATIO, 0.35);
+  return {
+    width,
+    height: fontSize,
+    glyphWidth,
+    letterSpacing,
+    spaceWidth,
+    strokeWidth
+  };
+}
+
+// lib/drawer/shapes/text/getTextStartPosition.ts
+function getTextStartPosition(alignment, layout) {
+  const totalWidth = layout.width + layout.strokeWidth;
+  const totalHeight = layout.height + layout.strokeWidth;
+  let x = 0;
+  let y = 0;
+  if (alignment === "center") {
+    x = -totalWidth / 2;
+  } else if (alignment === "top_left" || alignment === "bottom_left" || alignment === "center_left") {
+    x = 0;
+  } else if (alignment === "top_right" || alignment === "bottom_right" || alignment === "center_right") {
+    x = -totalWidth;
+  }
+  if (alignment === "center") {
+    y = -totalHeight / 2;
+  } else if (alignment === "top_left" || alignment === "top_right" || alignment === "top_center") {
+    y = 0;
+  } else if (alignment === "bottom_left" || alignment === "bottom_right" || alignment === "bottom_center") {
+    y = -totalHeight;
+  } else {
+    y = 0;
+  }
+  return { x, y };
+}
+
+// lib/drawer/shapes/text/text.ts
+var getGlyphLines = (char) => lineAlphabet[char] ?? lineAlphabet[char.toUpperCase()];
+function strokeAlphabetText(ctx, text, layout, startX, startY) {
+  const { glyphWidth, letterSpacing, spaceWidth, height, strokeWidth } = layout;
+  const topY = startY;
+  const characters = Array.from(text);
+  let cursor = startX + strokeWidth / 2;
+  characters.forEach((char, index) => {
+    const lines = getGlyphLines(char);
+    const advance = char === " " ? spaceWidth : glyphWidth;
+    if (lines?.length) {
+      ctx.beginPath();
+      for (const line of lines) {
+        const x1 = cursor + line.x1 * glyphWidth;
+        const y1 = topY + (1 - line.y1) * height;
+        const x2 = cursor + line.x2 * glyphWidth;
+        const y2 = topY + (1 - line.y2) * height;
+        ctx.moveTo(x1, y1);
+        ctx.lineTo(x2, y2);
+      }
+      ctx.stroke();
+    }
+    cursor += advance;
+    if (index < characters.length - 1) {
+      cursor += letterSpacing;
+    }
+  });
+}
+function drawText(params) {
+  const {
+    ctx,
+    text,
+    x,
+    y,
+    fontSize,
+    color,
+    realToCanvasMat,
+    anchorAlignment,
+    rotation = 0
+  } = params;
+  if (!text) return;
+  const [canvasX, canvasY] = applyToPoint8(realToCanvasMat, [x, y]);
+  const scale2 = Math.abs(realToCanvasMat.a);
+  const scaledFontSize = fontSize * scale2;
+  const layout = getAlphabetLayout(text, scaledFontSize);
+  const startPos = getTextStartPosition(anchorAlignment, layout);
+  ctx.save();
+  ctx.translate(canvasX, canvasY);
+  if (rotation !== 0) {
+    ctx.rotate(-rotation * (Math.PI / 180));
+  }
+  ctx.lineWidth = layout.strokeWidth;
+  ctx.lineCap = "round";
+  ctx.lineJoin = "round";
+  ctx.strokeStyle = color;
+  strokeAlphabetText(ctx, text, layout, startPos.x, startPos.y);
+  ctx.restore();
+}
+
+// lib/drawer/elements/pcb-silkscreen.ts
 function layerToSilkscreenColor(layer, colorMap) {
   return layer === "bottom" ? colorMap.silkscreen.bottom : colorMap.silkscreen.top;
 }
 function mapAnchorAlignment(alignment) {
   if (!alignment) return "center";
-  if (alignment.includes("left")) return "left";
-  if (alignment.includes("right")) return "right";
-  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 [x, y] = applyToPoint8(realToCanvasMat, [
+  const [x, y] = applyToPoint9(realToCanvasMat, [
     text.anchor_position.x,
     text.anchor_position.y
   ]);
-  const fontSize = (text.font_size ?? 1) * Math.abs(realToCanvasMat.a);
+  const scale2 = Math.abs(realToCanvasMat.a);
+  const fontSize = (text.font_size ?? 1) * scale2;
   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);
   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.fillText(text.text, 0, 0);
+  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) {
@@ -771,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;
 }
@@ -780,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
     ]);
@@ -801,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) {
@@ -830,123 +955,6 @@ function drawPcbCopperPour(params) {
 
 // lib/drawer/elements/pcb-copper-text.ts
 import { applyToPoint as applyToPoint11 } from "transformation-matrix";
-
-// lib/drawer/shapes/text/text.ts
-import { lineAlphabet } from "@tscircuit/alphabet";
-import { applyToPoint as applyToPoint10 } from "transformation-matrix";
-
-// lib/drawer/shapes/text/getAlphabetLayout.ts
-var GLYPH_WIDTH_RATIO = 0.62;
-var LETTER_SPACING_RATIO = 0.3;
-var SPACE_WIDTH_RATIO = 1;
-var STROKE_WIDTH_RATIO = 0.13;
-function getAlphabetLayout(text, fontSize) {
-  const glyphWidth = fontSize * GLYPH_WIDTH_RATIO;
-  const letterSpacing = glyphWidth * LETTER_SPACING_RATIO;
-  const spaceWidth = glyphWidth * SPACE_WIDTH_RATIO;
-  const characters = Array.from(text);
-  let width = 0;
-  characters.forEach((char, index) => {
-    const advance = char === " " ? spaceWidth : glyphWidth;
-    width += advance;
-    if (index < characters.length - 1) width += letterSpacing;
-  });
-  const strokeWidth = Math.max(fontSize * STROKE_WIDTH_RATIO, 0.35);
-  return {
-    width,
-    height: fontSize,
-    glyphWidth,
-    letterSpacing,
-    spaceWidth,
-    strokeWidth
-  };
-}
-
-// lib/drawer/shapes/text/getTextStartPosition.ts
-function getTextStartPosition(alignment, layout) {
-  const totalWidth = layout.width + layout.strokeWidth;
-  const totalHeight = layout.height + layout.strokeWidth;
-  let x = 0;
-  let y = 0;
-  if (alignment === "center") {
-    x = -totalWidth / 2;
-  } else if (alignment === "top_left" || alignment === "bottom_left" || alignment === "center_left") {
-    x = 0;
-  } else if (alignment === "top_right" || alignment === "bottom_right" || alignment === "center_right") {
-    x = -totalWidth;
-  }
-  if (alignment === "center") {
-    y = -totalHeight / 2;
-  } else if (alignment === "top_left" || alignment === "top_right" || alignment === "top_center") {
-    y = 0;
-  } else if (alignment === "bottom_left" || alignment === "bottom_right" || alignment === "bottom_center") {
-    y = -totalHeight;
-  } else {
-    y = 0;
-  }
-  return { x, y };
-}
-
-// lib/drawer/shapes/text/text.ts
-var getGlyphLines = (char) => lineAlphabet[char] ?? lineAlphabet[char.toUpperCase()];
-function strokeAlphabetText(ctx, text, layout, startX, startY) {
-  const { glyphWidth, letterSpacing, spaceWidth, height, strokeWidth } = layout;
-  const topY = startY;
-  const characters = Array.from(text);
-  let cursor = startX + strokeWidth / 2;
-  characters.forEach((char, index) => {
-    const lines = getGlyphLines(char);
-    const advance = char === " " ? spaceWidth : glyphWidth;
-    if (lines?.length) {
-      ctx.beginPath();
-      for (const line of lines) {
-        const x1 = cursor + line.x1 * glyphWidth;
-        const y1 = topY + (1 - line.y1) * height;
-        const x2 = cursor + line.x2 * glyphWidth;
-        const y2 = topY + (1 - line.y2) * height;
-        ctx.moveTo(x1, y1);
-        ctx.lineTo(x2, y2);
-      }
-      ctx.stroke();
-    }
-    cursor += advance;
-    if (index < characters.length - 1) {
-      cursor += letterSpacing;
-    }
-  });
-}
-function drawText(params) {
-  const {
-    ctx,
-    text,
-    x,
-    y,
-    fontSize,
-    color,
-    realToCanvasMat,
-    anchorAlignment,
-    rotation = 0
-  } = params;
-  if (!text) return;
-  const [canvasX, canvasY] = applyToPoint10(realToCanvasMat, [x, y]);
-  const scale2 = Math.abs(realToCanvasMat.a);
-  const scaledFontSize = fontSize * scale2;
-  const layout = getAlphabetLayout(text, scaledFontSize);
-  const startPos = getTextStartPosition(anchorAlignment, layout);
-  ctx.save();
-  ctx.translate(canvasX, canvasY);
-  if (rotation !== 0) {
-    ctx.rotate(-rotation * (Math.PI / 180));
-  }
-  ctx.lineWidth = layout.strokeWidth;
-  ctx.lineCap = "round";
-  ctx.lineJoin = "round";
-  ctx.strokeStyle = color;
-  strokeAlphabetText(ctx, text, layout, startPos.x, startPos.y);
-  ctx.restore();
-}
-
-// lib/drawer/elements/pcb-copper-text.ts
 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;

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

@@ -12,6 +12,12 @@ import { drawRect } from "../shapes/rect"
 import { drawCircle } from "../shapes/circle"
 import { drawLine } from "../shapes/line"
 import { drawPath } from "../shapes/path"
+import {
+  getAlphabetLayout,
+  strokeAlphabetText,
+  getTextStartPosition,
+  type AnchorAlignment,
+} from "../shapes/text"
 
 export interface DrawPcbSilkscreenTextParams {
   ctx: CanvasContext
@@ -54,13 +60,9 @@ function layerToSilkscreenColor(layer: string, colorMap: PcbColorMap): string {
     : colorMap.silkscreen.top
 }
 
-function mapAnchorAlignment(
-  alignment?: string,
-): "start" | "end" | "left" | "right" | "center" {
+function mapAnchorAlignment(alignment?: string): AnchorAlignment {
   if (!alignment) return "center"
-  if (alignment.includes("left")) return "left"
-  if (alignment.includes("right")) return "right"
-  return "center"
+  return alignment as AnchorAlignment
 }
 
 export function drawPcbSilkscreenText(
@@ -68,15 +70,22 @@ export function drawPcbSilkscreenText(
 ): 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 fontSize = (text.font_size ?? 1) * Math.abs(realToCanvasMat.a)
+  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)
 
@@ -85,10 +94,17 @@ export function drawPcbSilkscreenText(
     ctx.rotate(-rotation * (Math.PI / 180))
   }
 
-  ctx.font = `${fontSize}px sans-serif`
-  ctx.fillStyle = color
-  ctx.textAlign = mapAnchorAlignment(text.anchor_alignment)
-  ctx.fillText(text.text, 0, 0)
+  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.21",
+  "version": "0.0.22",
   "type": "module",
   "scripts": {
     "build": "tsup-node ./lib/index.ts --format esm --dts",
@@ -12,7 +12,7 @@
     "@biomejs/biome": "^2.3.8",
     "@napi-rs/canvas": "^0.1.84",
     "@resvg/resvg-js": "^2.6.2",
-    "@tscircuit/alphabet": "^0.0.9",
+    "@tscircuit/alphabet": "^0.0.17",
     "@tscircuit/circuit-json-util": "^0.0.73",
     "@tscircuit/math-utils": "^0.0.29",
     "@types/bun": "latest",

package/tests/board-snapshot/usb-c-flashlight-board.test.ts

@@ -5,7 +5,7 @@ import usbcFlashlightCircuit from "./usb-c-flashlight.json"
 
 const circuitElements = usbcFlashlightCircuit as AnyCircuitElement[]
 
-test.skip("USB-C flashlight - comprehensive comparison (circuit-to-canvas vs circuit-to-svg)", async () => {
+test("USB-C flashlight - comprehensive comparison (circuit-to-canvas vs circuit-to-svg)", async () => {
   const stackedPng = await getStackedPngSvgComparison(circuitElements, {
     width: 400,
     height: 800,

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")

package/tests/fixtures/stackPngsVertically.ts

@@ -1,7 +1,9 @@
 import { createCanvas, loadImage } from "@napi-rs/canvas"
-import { Resvg } from "@resvg/resvg-js"
+import { Resvg, type ResvgRenderOptions } from "@resvg/resvg-js"
 import * as fs from "node:fs"
+import * as os from "node:os"
 import * as path from "node:path"
+import tscircuitFont from "@tscircuit/alphabet/base64font"
 
 // Pre-generated label PNGs for common labels
 const labelPngCache: Map<string, Buffer> = new Map()
@@ -76,7 +78,44 @@ export const stackPngsVertically = async (
   return canvas.toBuffer("image/png")
 }
 
-export const svgToPng = (svg: string): Buffer => {
-  const resvg = new Resvg(svg)
-  return resvg.render().asPng()
+export const svgToPng = (svgString: string): Buffer => {
+  const fontBuffer = Buffer.from(tscircuitFont, "base64")
+
+  let tempFontPath: string | undefined
+  let cleanupFn: (() => void) | undefined
+
+  try {
+    const tempDir = fs.mkdtempSync(path.join(os.tmpdir(), "resvg-font-"))
+    tempFontPath = path.join(tempDir, "tscircuit-font.ttf")
+    fs.writeFileSync(tempFontPath, fontBuffer)
+
+    cleanupFn = () => {
+      try {
+        fs.unlinkSync(tempFontPath!)
+      } catch {
+        // Ignore errors during cleanup
+      }
+    }
+
+    const opts: ResvgRenderOptions = {
+      font: {
+        fontFiles: [tempFontPath],
+        loadSystemFonts: false,
+        defaultFontFamily: "TscircuitAlphabet",
+        monospaceFamily: "TscircuitAlphabet",
+        sansSerifFamily: "TscircuitAlphabet",
+      },
+    }
+
+    const resvg = new Resvg(svgString, opts)
+    const pngData = resvg.render()
+    const pngBuffer = pngData.asPng()
+
+    return Buffer.from(pngBuffer)
+  } finally {
+    // Clean up temporary font file
+    if (cleanupFn) {
+      cleanupFn()
+    }
+  }
 }