circuit-to-canvas 0.0.6 → 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> & {
@@ -210,8 +209,6 @@ type AlphabetLayout = {
     letterSpacing: number;
     spaceWidth: number;
     strokeWidth: number;
-    baselineOffset: number;
-    descenderDepth: number;
 };
 declare function getAlphabetLayout(text: string, fontSize: number): AlphabetLayout;
 type AnchorAlignment = "center" | "top_left" | "top_right" | "bottom_left" | "bottom_right" | "left" | "right" | "top" | "bottom";

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();
 }
@@ -821,16 +820,6 @@ var LETTER_SPACING_RATIO = 0.3;
 var SPACE_WIDTH_RATIO = 1;
 var STROKE_WIDTH_RATIO = 0.13;
 var CURVED_GLYPHS = /* @__PURE__ */ new Set(["O", "o", "0"]);
-var LOWERCASE_BASELINE_OFFSET = (() => {
-  const referenceLetters = ["a", "c", "e", "m", "n", "o", "r", "s", "u", "x"];
-  const offsets = referenceLetters.map((letter) => lineAlphabet[letter]).filter(
-    (lines) => lines !== void 0 && lines.length > 0
-  ).map(
-    (lines) => Math.min(...lines.map((line) => Math.min(line.y1, line.y2)))
-  );
-  return offsets.length > 0 ? Math.min(...offsets) : 0;
-})();
-var getBaselineOffsetForLetter = (letter) => letter >= "a" && letter <= "z" ? LOWERCASE_BASELINE_OFFSET : 0;
 function getAlphabetLayout(text, fontSize) {
   const glyphWidth = fontSize * GLYPH_WIDTH_RATIO;
   const letterSpacing = glyphWidth * LETTER_SPACING_RATIO;
@@ -843,24 +832,19 @@ function getAlphabetLayout(text, fontSize) {
     if (index < characters.length - 1) width += letterSpacing;
   });
   const strokeWidth = Math.max(fontSize * STROKE_WIDTH_RATIO, 0.35);
-  const hasLowercase = /[a-z]/.test(text);
-  const baselineOffset = hasLowercase ? (1 - LOWERCASE_BASELINE_OFFSET) * fontSize : fontSize;
-  const descenderDepth = hasLowercase ? LOWERCASE_BASELINE_OFFSET * fontSize : 0;
   return {
     width,
     height: fontSize,
     glyphWidth,
     letterSpacing,
     spaceWidth,
-    strokeWidth,
-    baselineOffset,
-    descenderDepth
+    strokeWidth
   };
 }
 var getGlyphLines = (char) => lineAlphabet[char] ?? lineAlphabet[char.toUpperCase()];
 function getTextStartPosition(alignment, layout) {
   const totalWidth = layout.width + layout.strokeWidth;
-  const totalHeight = layout.height + layout.descenderDepth + layout.strokeWidth;
+  const totalHeight = layout.height + layout.strokeWidth;
   let x = 0;
   let y = 0;
   if (alignment === "center") {
@@ -871,36 +855,27 @@ function getTextStartPosition(alignment, layout) {
     x = -totalWidth;
   }
   if (alignment === "center") {
-    y = layout.baselineOffset - layout.height / 2;
+    y = -totalHeight / 2;
   } else if (alignment === "top_left" || alignment === "top_right" || alignment === "top") {
-    y = layout.baselineOffset;
+    y = 0;
   } else if (alignment === "bottom_left" || alignment === "bottom_right" || alignment === "bottom") {
-    y = -layout.descenderDepth;
+    y = -totalHeight;
   } else {
     y = 0;
   }
   return { x, y };
 }
 function strokeAlphabetText(ctx, text, layout, startX, startY) {
-  const {
-    glyphWidth,
-    letterSpacing,
-    spaceWidth,
-    height,
-    strokeWidth,
-    baselineOffset
-  } = layout;
-  const baselineY = 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;
-    const charBaselineOffset = getBaselineOffsetForLetter(char);
     if (CURVED_GLYPHS.has(char)) {
       const normalizedCenterY = 0.5;
-      const adjustedCenterY = normalizedCenterY - charBaselineOffset;
-      const centerY = baselineY - adjustedCenterY * height;
+      const centerY = topY + normalizedCenterY * height;
       const radiusX = Math.max(glyphWidth / 2 - strokeWidth / 2, strokeWidth);
       const radiusY = Math.max(height / 2 - strokeWidth / 2, strokeWidth);
       ctx.beginPath();
@@ -917,12 +892,10 @@ function strokeAlphabetText(ctx, text, layout, startX, startY) {
     } else if (lines?.length) {
       ctx.beginPath();
       for (const line of lines) {
-        const adjusted_y1 = line.y1 - charBaselineOffset;
-        const adjusted_y2 = line.y2 - charBaselineOffset;
         const x1 = cursor + line.x1 * glyphWidth;
-        const y1 = baselineY - adjusted_y1 * height;
+        const y1 = topY + (1 - line.y1) * height;
         const x2 = cursor + line.x2 * glyphWidth;
-        const y2 = baselineY - adjusted_y2 * height;
+        const y2 = topY + (1 - line.y2) * height;
         ctx.moveTo(x1, y1);
         ctx.lineTo(x2, y2);
       }
@@ -1010,8 +983,8 @@ function drawPcbCopperText(params) {
     const paddingRight = padding.right * scale2;
     const paddingTop = padding.top * scale2;
     const paddingBottom = padding.bottom * scale2;
-    const textBoxTop = startY - layout.baselineOffset - layout.strokeWidth / 2;
-    const textBoxBottom = startY + layout.descenderDepth + layout.strokeWidth / 2;
+    const textBoxTop = startY - layout.strokeWidth / 2;
+    const textBoxBottom = startY + layout.height + layout.strokeWidth / 2;
     const textBoxHeight = textBoxBottom - textBoxTop;
     const xOffset = startX - paddingLeft;
     const yOffset = textBoxTop - paddingTop;

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

@@ -72,10 +72,8 @@ export function drawPcbCopperText(params: DrawPcbCopperTextParams): void {
     const paddingTop = padding.top * scale
     const paddingBottom = padding.bottom * scale
     // Calculate knockout rectangle to cover the text box
-    // startY is the baseline position, text box extends from (baseline - baselineOffset) to (baseline + descenderDepth)
-    const textBoxTop = startY - layout.baselineOffset - layout.strokeWidth / 2
-    const textBoxBottom =
-      startY + layout.descenderDepth + layout.strokeWidth / 2
+    const textBoxTop = startY - layout.strokeWidth / 2
+    const textBoxBottom = startY + layout.height + layout.strokeWidth / 2
     const textBoxHeight = textBoxBottom - textBoxTop
 
     const xOffset = startX - paddingLeft

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

@@ -9,25 +9,6 @@ const SPACE_WIDTH_RATIO = 1
 const STROKE_WIDTH_RATIO = 0.13
 const CURVED_GLYPHS = new Set(["O", "o", "0"])
 
-// Calculate baseline offset from reference lowercase letters (same as working implementation)
-const LOWERCASE_BASELINE_OFFSET = (() => {
-  const referenceLetters = ["a", "c", "e", "m", "n", "o", "r", "s", "u", "x"]
-  const offsets = referenceLetters
-    .map((letter) => lineAlphabet[letter])
-    .filter(
-      (lines): lines is NonNullable<typeof lines> =>
-        lines !== undefined && lines.length > 0,
-    )
-    .map((lines) =>
-      Math.min(...lines.map((line) => Math.min(line.y1, line.y2))),
-    )
-  return offsets.length > 0 ? Math.min(...offsets) : 0
-})()
-
-// Get baseline offset for a specific letter (only lowercase letters get offset)
-const getBaselineOffsetForLetter = (letter: string) =>
-  letter >= "a" && letter <= "z" ? LOWERCASE_BASELINE_OFFSET : 0
-
 export type AlphabetLayout = {
   width: number
   height: number
@@ -35,8 +16,6 @@ export type AlphabetLayout = {
   letterSpacing: number
   spaceWidth: number
   strokeWidth: number
-  baselineOffset: number // Distance from top to baseline
-  descenderDepth: number // Distance from baseline to bottom (for descenders)
 }
 
 export function getAlphabetLayout(
@@ -56,15 +35,6 @@ export function getAlphabetLayout(
   })
 
   const strokeWidth = Math.max(fontSize * STROKE_WIDTH_RATIO, 0.35)
-  // Calculate baseline offset: distance from top of text box to baseline
-  // In normalized coords: y=0 is bottom, y=1 is top
-  // LOWERCASE_BASELINE_OFFSET is the minimum y (baseline position) in normalized coords
-  const hasLowercase = /[a-z]/.test(text)
-  const baselineOffset = hasLowercase
-    ? (1 - LOWERCASE_BASELINE_OFFSET) * fontSize
-    : fontSize
-  // Descender depth: distance from baseline to bottom (for descenders like g, j, p, q, y)
-  const descenderDepth = hasLowercase ? LOWERCASE_BASELINE_OFFSET * fontSize : 0
 
   return {
     width,
@@ -73,8 +43,6 @@ export function getAlphabetLayout(
     letterSpacing,
     spaceWidth,
     strokeWidth,
-    baselineOffset,
-    descenderDepth,
   }
 }
 
@@ -97,8 +65,7 @@ export function getTextStartPosition(
   layout: AlphabetLayout,
 ): { x: number; y: number } {
   const totalWidth = layout.width + layout.strokeWidth
-  // Total height includes descender depth for proper vertical alignment
-  const totalHeight = layout.height + layout.descenderDepth + layout.strokeWidth
+  const totalHeight = layout.height + layout.strokeWidth
 
   let x = 0
   let y = 0
@@ -120,22 +87,21 @@ export function getTextStartPosition(
     x = -totalWidth
   }
 
-  // Vertical alignment - positions relative to baseline
-  // Text extends from (baseline - baselineOffset) at top to (baseline + descenderDepth) at bottom
+  // Vertical alignment
   if (alignment === "center") {
-    y = layout.baselineOffset - layout.height / 2
+    y = -totalHeight / 2
   } else if (
     alignment === "top_left" ||
     alignment === "top_right" ||
     alignment === "top"
   ) {
-    y = layout.baselineOffset
+    y = 0
   } else if (
     alignment === "bottom_left" ||
     alignment === "bottom_right" ||
     alignment === "bottom"
   ) {
-    y = -layout.descenderDepth
+    y = -totalHeight
   } else {
     y = 0
   }
@@ -150,29 +116,18 @@ export function strokeAlphabetText(
   startX: number,
   startY: number,
 ): void {
-  const {
-    glyphWidth,
-    letterSpacing,
-    spaceWidth,
-    height,
-    strokeWidth,
-    baselineOffset,
-  } = layout
-  const baselineY = 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
-    // Get normalized baseline offset for this specific character (0-1 range)
-    const charBaselineOffset = getBaselineOffsetForLetter(char)
 
     if (CURVED_GLYPHS.has(char)) {
-      // For curved glyphs, adjust coordinates by baseline offset
       const normalizedCenterY = 0.5
-      const adjustedCenterY = normalizedCenterY - charBaselineOffset
-      const centerY = baselineY - adjustedCenterY * height
+      const centerY = topY + normalizedCenterY * height
       const radiusX = Math.max(glyphWidth / 2 - strokeWidth / 2, strokeWidth)
       const radiusY = Math.max(height / 2 - strokeWidth / 2, strokeWidth)
       ctx.beginPath()
@@ -190,12 +145,11 @@ export function strokeAlphabetText(
       ctx.beginPath()
       for (const line of lines) {
         // Convert normalized y coordinates to canvas coordinates (inverted for canvas)
-        const adjusted_y1 = line.y1 - charBaselineOffset
-        const adjusted_y2 = line.y2 - charBaselineOffset
+        // In normalized coords: y=0 is bottom, y=1 is top
         const x1 = cursor + line.x1 * glyphWidth
-        const y1 = baselineY - adjusted_y1 * height
+        const y1 = topY + (1 - line.y1) * height
         const x2 = cursor + line.x2 * glyphWidth
-        const y2 = baselineY - adjusted_y2 * height
+        const y2 = topY + (1 - line.y2) * height
         ctx.moveTo(x1, y1)
         ctx.lineTo(x2, y2)
       }

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.6",
+  "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

@@ -13,7 +13,7 @@ test("draw lowercase text with descenders", async () => {
   ctx.fillStyle = "#1a1a1a"
   ctx.fillRect(0, 0, canvas.width / SCALE, canvas.height / SCALE)
 
-  // Draw baseline reference line
+  // Draw reference line
   ctx.strokeStyle = "#666666"
   ctx.lineWidth = 0.5
   ctx.beginPath()

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-baseline-anchors.test.ts

@@ -1,80 +0,0 @@
-import { expect, test } from "bun:test"
-import { createCanvas } from "canvas"
-import type { PcbFabricationNoteText } from "circuit-json"
-import { CircuitToCanvasDrawer } from "../../lib/drawer"
-
-test("draw text baseline alignment with different anchor positions", async () => {
-  const SCALE = 4
-  const canvas = createCanvas(300 * SCALE, 200 * 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 lines
-  ctx.strokeStyle = "#444444"
-  ctx.lineWidth = 0.5
-  // Top line
-  ctx.beginPath()
-  ctx.moveTo(10, 50)
-  ctx.lineTo(290, 50)
-  ctx.stroke()
-  // Center/baseline line
-  ctx.beginPath()
-  ctx.moveTo(10, 100)
-  ctx.lineTo(290, 100)
-  ctx.stroke()
-  // Bottom line
-  ctx.beginPath()
-  ctx.moveTo(10, 150)
-  ctx.lineTo(290, 150)
-  ctx.stroke()
-
-  // Test with top alignment
-  const textTop: PcbFabricationNoteText = {
-    type: "pcb_fabrication_note_text",
-    pcb_fabrication_note_text_id: "fab-note-top",
-    pcb_component_id: "component1",
-    layer: "top",
-    text: "gap",
-    anchor_position: { x: 50, y: 50 },
-    anchor_alignment: "top_left",
-    font: "tscircuit2024",
-    font_size: 16,
-  }
-
-  // Test with center alignment (baseline at center)
-  const textCenter: PcbFabricationNoteText = {
-    type: "pcb_fabrication_note_text",
-    pcb_fabrication_note_text_id: "fab-note-center",
-    pcb_component_id: "component2",
-    layer: "top",
-    text: "gap",
-    anchor_position: { x: 150, y: 100 },
-    anchor_alignment: "center",
-    font: "tscircuit2024",
-    font_size: 16,
-  }
-
-  // Test with bottom alignment
-  const textBottom: PcbFabricationNoteText = {
-    type: "pcb_fabrication_note_text",
-    pcb_fabrication_note_text_id: "fab-note-bottom",
-    pcb_component_id: "component3",
-    layer: "top",
-    text: "gap",
-    anchor_position: { x: 250, y: 150 },
-    anchor_alignment: "bottom_left",
-    font: "tscircuit2024",
-    font_size: 16,
-  }
-
-  drawer.drawElements([textTop, textCenter, textBottom])
-
-  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
-    import.meta.path,
-    "fabrication-note-text-baseline-anchors",
-  )
-})

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

@@ -1,43 +0,0 @@
-import { expect, test } from "bun:test"
-import { createCanvas } from "canvas"
-import type { PcbFabricationNoteText } from "circuit-json"
-import { CircuitToCanvasDrawer } from "../../lib/drawer"
-
-test("draw text with baseline alignment and descenders", async () => {
-  const SCALE = 4
-  const canvas = createCanvas(200 * SCALE, 150 * 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 baseline reference line
-  ctx.strokeStyle = "#444444"
-  ctx.lineWidth = 0.5
-  ctx.beginPath()
-  ctx.moveTo(10, 75)
-  ctx.lineTo(190, 75)
-  ctx.stroke()
-
-  // Test text with lowercase letters and descenders (g, j, p, q, y)
-  const text: PcbFabricationNoteText = {
-    type: "pcb_fabrication_note_text",
-    pcb_fabrication_note_text_id: "fab-note-baseline",
-    pcb_component_id: "component1",
-    layer: "top",
-    text: "gap jqpy",
-    anchor_position: { x: 100, y: 75 },
-    anchor_alignment: "center",
-    font: "tscircuit2024",
-    font_size: 20,
-  }
-
-  drawer.drawElements([text])
-
-  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
-    import.meta.path,
-    "fabrication-note-text-baseline",
-  )
-})