circuit-to-canvas 0.0.19 → 0.0.20

package/dist/index.js

@@ -647,37 +647,142 @@ function drawPcbBoard(params) {
   }
 }
 
-// lib/drawer/elements/pcb-silkscreen.ts
+// lib/drawer/shapes/text/text.ts
+import { lineAlphabet } from "@tscircuit/alphabet";
 import { applyToPoint as applyToPoint8 } from "transformation-matrix";
-function layerToSilkscreenColor(layer, colorMap) {
-  return layer === "bottom" ? colorMap.silkscreen.bottom : colorMap.silkscreen.top;
+
+// 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
+  };
 }
-function mapAnchorAlignment(alignment) {
-  if (!alignment) return "center";
-  if (alignment.includes("left")) return "left";
-  if (alignment.includes("right")) return "right";
-  return "center";
+
+// 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 };
 }
-function drawPcbSilkscreenText(params) {
-  const { ctx, text, realToCanvasMat, colorMap } = params;
-  const color = layerToSilkscreenColor(text.layer, colorMap);
-  const [x, y] = applyToPoint8(realToCanvasMat, [
-    text.anchor_position.x,
-    text.anchor_position.y
-  ]);
-  const fontSize = (text.font_size ?? 1) * Math.abs(realToCanvasMat.a);
-  const rotation = text.ccw_rotation ?? 0;
+
+// 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(x, y);
+  ctx.translate(canvasX, canvasY);
   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);
+  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 drawPcbSilkscreenText(params) {
+  const { ctx, text, realToCanvasMat, colorMap } = params;
+  const color = layerToSilkscreenColor(text.layer, colorMap);
+  const fontSize = text.font_size ?? 1;
+  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
+  });
+}
 function drawPcbSilkscreenRect(params) {
   const { ctx, rect, realToCanvasMat, colorMap } = params;
   const color = layerToSilkscreenColor(rect.layer, colorMap);
@@ -829,129 +934,12 @@ 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;
 }
-function mapAnchorAlignment2(alignment) {
+function mapAnchorAlignment(alignment) {
   if (!alignment) return "center";
   if (alignment.includes("left")) return "center_left";
   if (alignment.includes("right")) return "center_right";
@@ -961,7 +949,7 @@ function drawPcbCopperText(params) {
   const { ctx, text, realToCanvasMat, colorMap } = params;
   const content = text.text ?? "";
   if (!content) return;
-  const [x, y] = applyToPoint11(realToCanvasMat, [
+  const [x, y] = applyToPoint10(realToCanvasMat, [
     text.anchor_position.x,
     text.anchor_position.y
   ]);
@@ -975,7 +963,7 @@ function drawPcbCopperText(params) {
   const textColor = layerToCopperColor(text.layer, colorMap);
   const layout = getAlphabetLayout(content, fontSize);
   const totalWidth = layout.width + layout.strokeWidth;
-  const alignment = mapAnchorAlignment2(text.anchor_alignment);
+  const alignment = mapAnchorAlignment(text.anchor_alignment);
   const startPos = getTextStartPosition(alignment, layout);
   const startX = startPos.x;
   const startY = startPos.y;
@@ -1145,7 +1133,7 @@ function drawPcbNoteText(params) {
 }
 
 // lib/drawer/elements/pcb-note-dimension.ts
-import { applyToPoint as applyToPoint12 } from "transformation-matrix";
+import { applyToPoint as applyToPoint11 } from "transformation-matrix";
 
 // lib/drawer/shapes/arrow.ts
 function drawArrow(params) {
@@ -1230,11 +1218,11 @@ function drawPcbNoteDimension(params) {
     stroke: color,
     realToCanvasMat
   });
-  const [canvasFromX, canvasFromY] = applyToPoint12(realToCanvasMat, [
+  const [canvasFromX, canvasFromY] = applyToPoint11(realToCanvasMat, [
     fromX,
     fromY
   ]);
-  const [canvasToX, canvasToY] = applyToPoint12(realToCanvasMat, [toX, toY]);
+  const [canvasToX, canvasToY] = applyToPoint11(realToCanvasMat, [toX, toY]);
   const canvasDx = canvasToX - canvasFromX;
   const canvasDy = canvasToY - canvasFromY;
   const lineAngle = Math.atan2(canvasDy, canvasDx);
@@ -1295,15 +1283,15 @@ function drawPcbNoteDimension(params) {
 }
 
 // lib/drawer/elements/pcb-note-line.ts
-import { applyToPoint as applyToPoint13 } from "transformation-matrix";
+import { applyToPoint as applyToPoint12 } 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] = applyToPoint13(realToCanvasMat, [line.x1, line.y1]);
-  const [x2, y2] = applyToPoint13(realToCanvasMat, [line.x2, line.y2]);
+  const [x1, y1] = applyToPoint12(realToCanvasMat, [line.x1, line.y1]);
+  const [x2, y2] = applyToPoint12(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,12 @@ 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"
 
 export interface DrawPcbSilkscreenTextParams {
   ctx: CanvasContext
@@ -54,42 +54,27 @@ function layerToSilkscreenColor(layer: string, colorMap: PcbColorMap): string {
     : 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, realToCanvasMat, colorMap } = params
 
   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 fontSize = text.font_size ?? 1
   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.fillText(text.text, 0, 0)
-  ctx.restore()
+  // 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,
+  })
 }
 
 export function drawPcbSilkscreenRect(

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "circuit-to-canvas",
   "main": "dist/index.js",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "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/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()
+    }
+  }
 }