circuit-to-canvas 0.0.16 → 0.0.18

package/README.md

@@ -56,7 +56,7 @@ This checklist tracks PCB drawing features from [circuit-to-svg](https://github.
 
 ### Copper Text
 
-- [ ] `pcb_copper_text` - Text rendered on copper layers (supports knockout mode, mirroring)
+- [x] `pcb_copper_text` - Text rendered on copper layers (supports knockout mode, mirroring)
 
 ### Error Visualization
 

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { AnyCircuitElement, PcbPlatedHole, PCBVia, PCBHole, PcbSmtPad, PCBTrace, PcbBoard, PcbSilkscreenText, PcbSilkscreenRect, PcbSilkscreenCircle, PcbSilkscreenLine, PcbSilkscreenPath, PcbCutout, PcbCopperPour, PcbCopperText, PcbFabricationNoteText, PcbFabricationNoteRect, PcbNoteRect, PcbFabricationNotePath, PcbNotePath, PcbNoteText } from 'circuit-json';
+import { AnyCircuitElement, NinePointAnchor, PcbPlatedHole, PCBVia, PCBHole, PcbSmtPad, PCBTrace, PcbBoard, PcbSilkscreenText, PcbSilkscreenRect, PcbSilkscreenCircle, PcbSilkscreenLine, PcbSilkscreenPath, PcbCutout, PcbCopperPour, PcbCopperText, PcbFabricationNoteText, PcbFabricationNoteRect, PcbNoteRect, PcbFabricationNotePath, PcbNotePath, PcbNoteText } from 'circuit-json';
 import { Matrix } from 'transformation-matrix';
 
 /**
@@ -211,11 +211,7 @@ type AlphabetLayout = {
     strokeWidth: number;
 };
 declare function getAlphabetLayout(text: string, fontSize: number): AlphabetLayout;
-type AnchorAlignment = "center" | "top_left" | "top_right" | "bottom_left" | "bottom_right" | "left" | "right" | "top" | "bottom";
-declare function getTextStartPosition(alignment: AnchorAlignment, layout: AlphabetLayout): {
-    x: number;
-    y: number;
-};
+
 declare function strokeAlphabetText(ctx: CanvasContext, text: string, layout: AlphabetLayout, startX: number, startY: number): void;
 interface DrawTextParams {
     ctx: CanvasContext;
@@ -225,11 +221,17 @@ interface DrawTextParams {
     fontSize: number;
     color: string;
     realToCanvasMat: Matrix;
-    anchorAlignment: AnchorAlignment;
+    anchorAlignment: NinePointAnchor;
     rotation?: number;
 }
 declare function drawText(params: DrawTextParams): void;
 
+type AnchorAlignment = NinePointAnchor;
+declare function getTextStartPosition(alignment: NinePointAnchor, layout: AlphabetLayout): {
+    x: number;
+    y: number;
+};
+
 interface DrawPcbPlatedHoleParams {
     ctx: CanvasContext;
     hole: PcbPlatedHole;

package/dist/index.js

@@ -831,9 +831,11 @@ function drawPcbCopperPour(params) {
 // lib/drawer/elements/pcb-copper-text.ts
 import { applyToPoint as applyToPoint11 } from "transformation-matrix";
 
-// lib/drawer/shapes/text.ts
+// 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;
@@ -859,7 +861,8 @@ function getAlphabetLayout(text, fontSize) {
     strokeWidth
   };
 }
-var getGlyphLines = (char) => lineAlphabet[char] ?? lineAlphabet[char.toUpperCase()];
+
+// lib/drawer/shapes/text/getTextStartPosition.ts
 function getTextStartPosition(alignment, layout) {
   const totalWidth = layout.width + layout.strokeWidth;
   const totalHeight = layout.height + layout.strokeWidth;
@@ -867,22 +870,25 @@ function getTextStartPosition(alignment, layout) {
   let y = 0;
   if (alignment === "center") {
     x = -totalWidth / 2;
-  } else if (alignment === "top_left" || alignment === "bottom_left" || alignment === "left") {
+  } else if (alignment === "top_left" || alignment === "bottom_left" || alignment === "center_left") {
     x = 0;
-  } else if (alignment === "top_right" || alignment === "bottom_right" || alignment === "right") {
+  } 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") {
+  } else if (alignment === "top_left" || alignment === "top_right" || alignment === "top_center") {
     y = 0;
-  } else if (alignment === "bottom_left" || alignment === "bottom_right" || alignment === "bottom") {
+  } 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;
@@ -947,8 +953,8 @@ function layerToCopperColor(layer, colorMap) {
 }
 function mapAnchorAlignment2(alignment) {
   if (!alignment) return "center";
-  if (alignment.includes("left")) return "left";
-  if (alignment.includes("right")) return "right";
+  if (alignment.includes("left")) return "center_left";
+  if (alignment.includes("right")) return "center_right";
   return "center";
 }
 function drawPcbCopperText(params) {
@@ -1224,8 +1230,8 @@ var CircuitToCanvasDrawer = class {
     const offsetY = (canvasHeight - realHeight * uniformScale) / 2;
     this.realToCanvasMat = compose(
       translate(offsetX, offsetY),
-      scale(uniformScale, uniformScale),
-      translate(-bounds.minX, -bounds.minY)
+      scale(uniformScale, -uniformScale),
+      translate(-bounds.minX, -bounds.maxY)
     );
   }
   drawElements(elements, options = {}) {

package/lib/drawer/CircuitToCanvasDrawer.ts

@@ -132,10 +132,11 @@ export class CircuitToCanvasDrawer {
     const offsetX = (canvasWidth - realWidth * uniformScale) / 2
     const offsetY = (canvasHeight - realHeight * uniformScale) / 2
 
+    // Flip Y axis: PCB uses Y-up, canvas uses Y-down
     this.realToCanvasMat = compose(
       translate(offsetX, offsetY),
-      scale(uniformScale, uniformScale),
-      translate(-bounds.minX, -bounds.minY),
+      scale(uniformScale, -uniformScale),
+      translate(-bounds.minX, -bounds.maxY),
     )
   }
 

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

@@ -27,8 +27,8 @@ function layerToCopperColor(layer: string, colorMap: PcbColorMap): string {
 
 function mapAnchorAlignment(alignment?: string): AnchorAlignment {
   if (!alignment) return "center"
-  if (alignment.includes("left")) return "left"
-  if (alignment.includes("right")) return "right"
+  if (alignment.includes("left")) return "center_left"
+  if (alignment.includes("right")) return "center_right"
   return "center"
 }
 

package/lib/drawer/shapes/text/getAlphabetLayout.ts

@@ -0,0 +1,41 @@
+export const GLYPH_WIDTH_RATIO = 0.62
+export const LETTER_SPACING_RATIO = 0.3 // Letter spacing between characters (25% of glyph width)
+export const SPACE_WIDTH_RATIO = 1
+export const STROKE_WIDTH_RATIO = 0.13
+
+export type AlphabetLayout = {
+  width: number
+  height: number
+  glyphWidth: number
+  letterSpacing: number
+  spaceWidth: number
+  strokeWidth: number
+}
+
+export function getAlphabetLayout(
+  text: string,
+  fontSize: number,
+): AlphabetLayout {
+  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,
+  }
+}

package/lib/drawer/shapes/text/getTextStartPosition.ts

@@ -0,0 +1,53 @@
+import type { NinePointAnchor } from "circuit-json"
+import type { AlphabetLayout } from "./getAlphabetLayout"
+
+export type AnchorAlignment = NinePointAnchor
+
+export function getTextStartPosition(
+  alignment: NinePointAnchor,
+  layout: AlphabetLayout,
+): { x: number; y: number } {
+  const totalWidth = layout.width + layout.strokeWidth
+  const totalHeight = layout.height + layout.strokeWidth
+
+  let x = 0
+  let y = 0
+
+  // Horizontal alignment
+  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
+  }
+
+  // Vertical alignment
+  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 }
+}

package/lib/drawer/shapes/text/index.ts

@@ -0,0 +1,3 @@
+export * from "./text"
+export * from "./getAlphabetLayout"
+export * from "./getTextStartPosition"

package/lib/drawer/shapes/{text.ts → text/text.ts}

@@ -1,113 +1,14 @@
 import { lineAlphabet } from "@tscircuit/alphabet"
 import type { Matrix } from "transformation-matrix"
 import { applyToPoint } from "transformation-matrix"
-import type { CanvasContext } from "../types"
-
-const GLYPH_WIDTH_RATIO = 0.62
-const LETTER_SPACING_RATIO = 0.3 // Letter spacing between characters (25% of glyph width)
-const SPACE_WIDTH_RATIO = 1
-const STROKE_WIDTH_RATIO = 0.13
-
-export type AlphabetLayout = {
-  width: number
-  height: number
-  glyphWidth: number
-  letterSpacing: number
-  spaceWidth: number
-  strokeWidth: number
-}
-
-export function getAlphabetLayout(
-  text: string,
-  fontSize: number,
-): AlphabetLayout {
-  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,
-  }
-}
+import type { CanvasContext } from "../../types"
+import type { NinePointAnchor } from "circuit-json"
+import { getAlphabetLayout, type AlphabetLayout } from "./getAlphabetLayout"
+import { getTextStartPosition } from "./getTextStartPosition"
 
 const getGlyphLines = (char: string) =>
   lineAlphabet[char] ?? lineAlphabet[char.toUpperCase()]
 
-export type AnchorAlignment =
-  | "center"
-  | "top_left"
-  | "top_right"
-  | "bottom_left"
-  | "bottom_right"
-  | "left"
-  | "right"
-  | "top"
-  | "bottom"
-
-export function getTextStartPosition(
-  alignment: AnchorAlignment,
-  layout: AlphabetLayout,
-): { x: number; y: number } {
-  const totalWidth = layout.width + layout.strokeWidth
-  const totalHeight = layout.height + layout.strokeWidth
-
-  let x = 0
-  let y = 0
-
-  // Horizontal alignment
-  if (alignment === "center") {
-    x = -totalWidth / 2
-  } else if (
-    alignment === "top_left" ||
-    alignment === "bottom_left" ||
-    alignment === "left"
-  ) {
-    x = 0
-  } else if (
-    alignment === "top_right" ||
-    alignment === "bottom_right" ||
-    alignment === "right"
-  ) {
-    x = -totalWidth
-  }
-
-  // Vertical alignment
-  if (alignment === "center") {
-    y = -totalHeight / 2
-  } else if (
-    alignment === "top_left" ||
-    alignment === "top_right" ||
-    alignment === "top"
-  ) {
-    y = 0
-  } else if (
-    alignment === "bottom_left" ||
-    alignment === "bottom_right" ||
-    alignment === "bottom"
-  ) {
-    y = -totalHeight
-  } else {
-    y = 0
-  }
-
-  return { x, y }
-}
-
 export function strokeAlphabetText(
   ctx: CanvasContext,
   text: string,
@@ -154,7 +55,7 @@ export interface DrawTextParams {
   fontSize: number
   color: string
   realToCanvasMat: Matrix
-  anchorAlignment: AnchorAlignment
+  anchorAlignment: NinePointAnchor
   rotation?: number
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "circuit-to-canvas",
   "main": "dist/index.js",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "type": "module",
   "scripts": {
     "build": "tsup-node ./lib/index.ts --format esm --dts",
@@ -20,6 +20,7 @@
     "circuit-json": "^0.0.335",
     "circuit-json-to-connectivity-map": "^0.0.23",
     "circuit-to-svg": "^0.0.297",
+    "looks-same": "^10.0.1",
     "schematic-symbols": "^0.0.202",
     "tsup": "^8.5.1"
   },

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

@@ -0,0 +1,15 @@
+import { expect, test } from "bun:test"
+import type { AnyCircuitElement } from "circuit-json"
+import { getStackedPngSvgComparison } from "../fixtures/getStackedPngSvgComparison"
+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 () => {
+  const stackedPng = await getStackedPngSvgComparison(circuitElements, {
+    width: 400,
+    height: 800,
+  })
+
+  await expect(stackedPng).toMatchPngSnapshot(import.meta.path)
+})