circuit-to-canvas 0.0.17 → 0.0.19

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.17",
+  "version": "0.0.19",
   "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)
+})