circuit-to-canvas 0.0.5 → 0.0.7

package/dist/index.d.ts

@@ -41,7 +41,6 @@ interface CanvasContext {
     };
     font: string;
     textAlign: "start" | "end" | "left" | "right" | "center";
-    textBaseline: "top" | "hanging" | "middle" | "alphabetic" | "ideographic" | "bottom";
 }
 type CopperLayerName = "top" | "bottom" | "inner1" | "inner2" | "inner3" | "inner4" | "inner5" | "inner6";
 type CopperColorMap = Record<CopperLayerName, string> & {

package/dist/index.js

@@ -659,7 +659,6 @@ function drawPcbSilkscreenText(params) {
   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();
 }
@@ -861,21 +860,24 @@ function getTextStartPosition(alignment, layout) {
     y = 0;
   } else if (alignment === "bottom_left" || alignment === "bottom_right" || alignment === "bottom") {
     y = -totalHeight;
+  } else {
+    y = 0;
   }
   return { x, y };
 }
 function strokeAlphabetText(ctx, text, layout, startX, startY) {
   const { glyphWidth, letterSpacing, spaceWidth, height, strokeWidth } = layout;
-  const yOffset = startY + height / 2;
+  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 (CURVED_GLYPHS.has(char)) {
+      const normalizedCenterY = 0.5;
+      const centerY = topY + normalizedCenterY * height;
       const radiusX = Math.max(glyphWidth / 2 - strokeWidth / 2, strokeWidth);
       const radiusY = Math.max(height / 2 - strokeWidth / 2, strokeWidth);
-      const centerY = yOffset - height / 2;
       ctx.beginPath();
       ctx.ellipse(
         cursor + glyphWidth / 2,
@@ -891,9 +893,9 @@ function strokeAlphabetText(ctx, text, layout, startX, startY) {
       ctx.beginPath();
       for (const line of lines) {
         const x1 = cursor + line.x1 * glyphWidth;
-        const y1 = yOffset - line.y1 * height;
+        const y1 = topY + (1 - line.y1) * height;
         const x2 = cursor + line.x2 * glyphWidth;
-        const y2 = yOffset - line.y2 * height;
+        const y2 = topY + (1 - line.y2) * height;
         ctx.moveTo(x1, y1);
         ctx.lineTo(x2, y2);
       }
@@ -932,13 +934,7 @@ function drawText(params) {
   ctx.lineCap = "round";
   ctx.lineJoin = "round";
   ctx.strokeStyle = color;
-  strokeAlphabetText(
-    ctx,
-    text,
-    layout,
-    startPos.x,
-    startPos.y + layout.strokeWidth / 2
-  );
+  strokeAlphabetText(ctx, text, layout, startPos.x, startPos.y);
   ctx.restore();
 }
 
@@ -971,11 +967,10 @@ function drawPcbCopperText(params) {
   const textColor = layerToCopperColor(text.layer, colorMap);
   const layout = getAlphabetLayout(content, fontSize);
   const totalWidth = layout.width + layout.strokeWidth;
-  const totalHeight = layout.height + layout.strokeWidth;
   const alignment = mapAnchorAlignment2(text.anchor_alignment);
   const startPos = getTextStartPosition(alignment, layout);
   const startX = startPos.x;
-  const startY = 0;
+  const startY = startPos.y;
   ctx.save();
   ctx.translate(x, y);
   if (text.is_mirrored) ctx.scale(-1, 1);
@@ -988,10 +983,13 @@ function drawPcbCopperText(params) {
     const paddingRight = padding.right * scale2;
     const paddingTop = padding.top * scale2;
     const paddingBottom = padding.bottom * scale2;
+    const textBoxTop = startY - layout.strokeWidth / 2;
+    const textBoxBottom = startY + layout.height + layout.strokeWidth / 2;
+    const textBoxHeight = textBoxBottom - textBoxTop;
     const xOffset = startX - paddingLeft;
-    const yOffset = -(layout.height / 2) - layout.strokeWidth / 2 - paddingTop;
+    const yOffset = textBoxTop - paddingTop;
     const knockoutWidth = totalWidth + paddingLeft + paddingRight;
-    const knockoutHeight = totalHeight + paddingTop + paddingBottom;
+    const knockoutHeight = textBoxHeight + paddingTop + paddingBottom;
     ctx.fillStyle = textColor;
     ctx.fillRect(xOffset, yOffset, knockoutWidth, knockoutHeight);
     const previousCompositeOperation = ctx.globalCompositeOperation;

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

@@ -52,12 +52,10 @@ export function drawPcbCopperText(params: DrawPcbCopperTextParams): void {
   const textColor = layerToCopperColor(text.layer, colorMap)
   const layout = getAlphabetLayout(content, fontSize)
   const totalWidth = layout.width + layout.strokeWidth
-  const totalHeight = layout.height + layout.strokeWidth
   const alignment = mapAnchorAlignment(text.anchor_alignment)
   const startPos = getTextStartPosition(alignment, layout)
-  // Copper text always centers vertically (startY=0), uses startPos.x for horizontal alignment
   const startX = startPos.x
-  const startY = 0 // Centers vertically at y=0 (shared function calculates yOffset = startY + height/2)
+  const startY = startPos.y
 
   ctx.save()
   ctx.translate(x, y)
@@ -73,10 +71,15 @@ export function drawPcbCopperText(params: DrawPcbCopperTextParams): void {
     const paddingRight = padding.right * scale
     const paddingTop = padding.top * scale
     const paddingBottom = padding.bottom * scale
+    // Calculate knockout rectangle to cover the text box
+    const textBoxTop = startY - layout.strokeWidth / 2
+    const textBoxBottom = startY + layout.height + layout.strokeWidth / 2
+    const textBoxHeight = textBoxBottom - textBoxTop
+
     const xOffset = startX - paddingLeft
-    const yOffset = -(layout.height / 2) - layout.strokeWidth / 2 - paddingTop
+    const yOffset = textBoxTop - paddingTop
     const knockoutWidth = totalWidth + paddingLeft + paddingRight
-    const knockoutHeight = totalHeight + paddingTop + paddingBottom
+    const knockoutHeight = textBoxHeight + paddingTop + paddingBottom
 
     ctx.fillStyle = textColor
     ctx.fillRect(xOffset, yOffset, knockoutWidth, knockoutHeight)

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

@@ -88,7 +88,6 @@ export function drawPcbSilkscreenText(
   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()
 }

package/lib/drawer/shapes/text.ts

@@ -102,6 +102,8 @@ export function getTextStartPosition(
     alignment === "bottom"
   ) {
     y = -totalHeight
+  } else {
+    y = 0
   }
 
   return { x, y }
@@ -115,7 +117,7 @@ export function strokeAlphabetText(
   startY: number,
 ): void {
   const { glyphWidth, letterSpacing, spaceWidth, height, strokeWidth } = layout
-  const yOffset = startY + height / 2
+  const topY = startY
   const characters = Array.from(text)
   let cursor = startX + strokeWidth / 2
 
@@ -124,9 +126,10 @@ export function strokeAlphabetText(
     const advance = char === " " ? spaceWidth : glyphWidth
 
     if (CURVED_GLYPHS.has(char)) {
+      const normalizedCenterY = 0.5
+      const centerY = topY + normalizedCenterY * height
       const radiusX = Math.max(glyphWidth / 2 - strokeWidth / 2, strokeWidth)
       const radiusY = Math.max(height / 2 - strokeWidth / 2, strokeWidth)
-      const centerY = yOffset - height / 2
       ctx.beginPath()
       ctx.ellipse(
         cursor + glyphWidth / 2,
@@ -141,20 +144,19 @@ export function strokeAlphabetText(
     } else if (lines?.length) {
       ctx.beginPath()
       for (const line of lines) {
+        // Convert normalized y coordinates to canvas coordinates (inverted for canvas)
+        // In normalized coords: y=0 is bottom, y=1 is top
         const x1 = cursor + line.x1 * glyphWidth
-        const y1 = yOffset - line.y1 * height
+        const y1 = topY + (1 - line.y1) * height
         const x2 = cursor + line.x2 * glyphWidth
-        const y2 = yOffset - line.y2 * height
+        const y2 = topY + (1 - line.y2) * height
         ctx.moveTo(x1, y1)
         ctx.lineTo(x2, y2)
       }
       ctx.stroke()
     }
 
-    // Move cursor by the character width
     cursor += advance
-    // Add letter spacing after each character except the last one
-    // This spacing will be before the next character, creating visible gaps
     if (index < characters.length - 1) {
       cursor += letterSpacing
     }
@@ -206,13 +208,7 @@ export function drawText(params: DrawTextParams): void {
   ctx.lineJoin = "round"
   ctx.strokeStyle = color
 
-  strokeAlphabetText(
-    ctx,
-    text,
-    layout,
-    startPos.x,
-    startPos.y + layout.strokeWidth / 2,
-  )
+  strokeAlphabetText(ctx, text, layout, startPos.x, startPos.y)
 
   ctx.restore()
 }

package/lib/drawer/types.ts

@@ -51,13 +51,6 @@ export interface CanvasContext {
   }
   font: string
   textAlign: "start" | "end" | "left" | "right" | "center"
-  textBaseline:
-    | "top"
-    | "hanging"
-    | "middle"
-    | "alphabetic"
-    | "ideographic"
-    | "bottom"
 }
 
 export type CopperLayerName =

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "circuit-to-canvas",
   "main": "dist/index.js",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "type": "module",
   "scripts": {
     "build": "tsup-node ./lib/index.ts --format esm --dts",
@@ -10,7 +10,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^2.3.8",
-    "@tscircuit/alphabet": "^0.0.8",
+    "@tscircuit/alphabet": "^0.0.9",
     "@types/bun": "latest",
     "bun-match-svg": "^0.0.14",
     "canvas": "^3.2.0",

package/tests/elements/pcb-copper-text.test.ts

@@ -20,7 +20,7 @@ test("draw copper text", async () => {
       pcb_copper_text_id: "copper-text-1",
       pcb_component_id: "component1",
       layer: "top",
-      text: "T1",
+      text: "AabcbCdde",
       anchor_position: { x: 40, y: 40 },
       anchor_alignment: "center",
       font: "tscircuit2024",

package/tests/elements/pcb-fabrication-note-text-descenders.test.ts

@@ -0,0 +1,43 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "canvas"
+import type { PcbFabricationNoteText } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw lowercase text with descenders", async () => {
+  const SCALE = 4
+  const canvas = createCanvas(250 * SCALE, 100 * SCALE)
+  const ctx = canvas.getContext("2d")
+  ctx.scale(SCALE, SCALE)
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, canvas.width / SCALE, canvas.height / SCALE)
+
+  // Draw reference line
+  ctx.strokeStyle = "#666666"
+  ctx.lineWidth = 0.5
+  ctx.beginPath()
+  ctx.moveTo(10, 50)
+  ctx.lineTo(240, 50)
+  ctx.stroke()
+
+  // Test all descender letters: g, j, p, q, y
+  const text: PcbFabricationNoteText = {
+    type: "pcb_fabrication_note_text",
+    pcb_fabrication_note_text_id: "fab-note-descenders",
+    pcb_component_id: "component1",
+    layer: "top",
+    text: "gjpqy",
+    anchor_position: { x: 125, y: 50 },
+    anchor_alignment: "center",
+    font: "tscircuit2024",
+    font_size: 24,
+  }
+
+  drawer.drawElements([text])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+    "fabrication-note-text-descenders",
+  )
+})

package/tests/elements/pcb-fabrication-note-text-full-charset.test.ts

@@ -0,0 +1,84 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "canvas"
+import type { PcbFabricationNoteText } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw full character set", async () => {
+  const SCALE = 4
+  const canvas = createCanvas(800 * SCALE, 300 * SCALE)
+  const ctx = canvas.getContext("2d")
+  ctx.scale(SCALE, SCALE)
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, canvas.width / SCALE, canvas.height / SCALE)
+
+  const fontSize = 20
+  const lineHeight = 40
+  let y = 30
+
+  // Lowercase letters
+  const lowercaseText: PcbFabricationNoteText = {
+    type: "pcb_fabrication_note_text",
+    pcb_fabrication_note_text_id: "fab-note-lowercase",
+    pcb_component_id: "component1",
+    layer: "top",
+    text: "abcdefghijklmnopqrstuvwxyz",
+    anchor_position: { x: 400, y },
+    anchor_alignment: "center",
+    font: "tscircuit2024",
+    font_size: fontSize,
+  }
+  drawer.drawElements([lowercaseText])
+  y += lineHeight
+
+  // Uppercase letters
+  const uppercaseText: PcbFabricationNoteText = {
+    type: "pcb_fabrication_note_text",
+    pcb_fabrication_note_text_id: "fab-note-uppercase",
+    pcb_component_id: "component2",
+    layer: "top",
+    text: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
+    anchor_position: { x: 400, y },
+    anchor_alignment: "center",
+    font: "tscircuit2024",
+    font_size: fontSize,
+  }
+  drawer.drawElements([uppercaseText])
+  y += lineHeight
+
+  // Numbers
+  const numbersText: PcbFabricationNoteText = {
+    type: "pcb_fabrication_note_text",
+    pcb_fabrication_note_text_id: "fab-note-numbers",
+    pcb_component_id: "component3",
+    layer: "top",
+    text: "0123456789",
+    anchor_position: { x: 400, y },
+    anchor_alignment: "center",
+    font: "tscircuit2024",
+    font_size: fontSize,
+  }
+  drawer.drawElements([numbersText])
+  y += lineHeight
+
+  // Common symbols
+  const symbolsText: PcbFabricationNoteText = {
+    type: "pcb_fabrication_note_text",
+    pcb_fabrication_note_text_id: "fab-note-symbols",
+    pcb_component_id: "component4",
+    layer: "top",
+    text: "()!@#$%^&*",
+    anchor_position: { x: 400, y },
+    anchor_alignment: "center",
+    font: "tscircuit2024",
+    font_size: fontSize,
+  }
+  drawer.drawElements([symbolsText])
+  y += lineHeight
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+    "fabrication-note-text-full-charset",
+  )
+})

package/tests/elements/pcb-fabrication-note-text-small.test.ts

@@ -18,7 +18,7 @@ test("draw fabrication note text small size", async () => {
     pcb_fabrication_note_text_id: "fab-note-small",
     pcb_component_id: "component1",
     layer: "top",
-    text: "SMAL",
+    text: "Smapq876",
     anchor_position: { x: 50, y: 50 },
     anchor_alignment: "center",
     font: "tscircuit2024",