circuit-to-canvas 0.0.43 → 0.0.45

package/dist/index.js

@@ -816,6 +816,12 @@ function drawPcbVia(params) {
 }
 
 // lib/drawer/elements/pcb-hole.ts
+function getRotation(hole) {
+  if ("ccw_rotation" in hole && typeof hole.ccw_rotation === "number") {
+    return hole.ccw_rotation;
+  }
+  return 0;
+}
 function drawPcbHole(params) {
   const { ctx, hole, realToCanvasMat, colorMap } = params;
   const hasSoldermask = hole.is_covered_with_solder_mask === true && hole.soldermask_margin !== void 0 && hole.soldermask_margin > 0;
@@ -841,6 +847,7 @@ function drawPcbHole(params) {
     return;
   }
   if (hole.hole_shape === "square") {
+    const rotation = getRotation(hole);
     if (hasSoldermask && margin > 0) {
       drawRect({
         ctx,
@@ -848,7 +855,8 @@ function drawPcbHole(params) {
         width: hole.hole_diameter + margin * 2,
         height: hole.hole_diameter + margin * 2,
         fill: positiveMarginColor,
-        realToCanvasMat
+        realToCanvasMat,
+        rotation
       });
     }
     drawRect({
@@ -857,11 +865,13 @@ function drawPcbHole(params) {
       width: hole.hole_diameter,
       height: hole.hole_diameter,
       fill: colorMap.drill,
-      realToCanvasMat
+      realToCanvasMat,
+      rotation
     });
     return;
   }
   if (hole.hole_shape === "oval") {
+    const rotation = getRotation(hole);
     if (hasSoldermask && margin > 0) {
       drawOval({
         ctx,
@@ -869,7 +879,8 @@ function drawPcbHole(params) {
         radius_x: hole.hole_width / 2 + margin,
         radius_y: hole.hole_height / 2 + margin,
         fill: positiveMarginColor,
-        realToCanvasMat
+        realToCanvasMat,
+        rotation
       });
     }
     drawOval({
@@ -878,11 +889,13 @@ function drawPcbHole(params) {
       radius_x: hole.hole_width / 2,
       radius_y: hole.hole_height / 2,
       fill: colorMap.drill,
-      realToCanvasMat
+      realToCanvasMat,
+      rotation
     });
     return;
   }
   if (hole.hole_shape === "rect") {
+    const rotation = getRotation(hole);
     if (hasSoldermask && margin > 0) {
       drawRect({
         ctx,
@@ -890,7 +903,8 @@ function drawPcbHole(params) {
         width: hole.hole_width + margin * 2,
         height: hole.hole_height + margin * 2,
         fill: positiveMarginColor,
-        realToCanvasMat
+        realToCanvasMat,
+        rotation
       });
     }
     drawRect({
@@ -899,11 +913,13 @@ function drawPcbHole(params) {
       width: hole.hole_width,
       height: hole.hole_height,
       fill: colorMap.drill,
-      realToCanvasMat
+      realToCanvasMat,
+      rotation
     });
     return;
   }
   if (hole.hole_shape === "pill") {
+    const rotation = getRotation(hole);
     if (hasSoldermask && margin > 0) {
       drawPill({
         ctx,
@@ -911,7 +927,8 @@ function drawPcbHole(params) {
         width: hole.hole_width + margin * 2,
         height: hole.hole_height + margin * 2,
         fill: positiveMarginColor,
-        realToCanvasMat
+        realToCanvasMat,
+        rotation
       });
     }
     drawPill({
@@ -920,12 +937,13 @@ function drawPcbHole(params) {
       width: hole.hole_width,
       height: hole.hole_height,
       fill: colorMap.drill,
-      realToCanvasMat
+      realToCanvasMat,
+      rotation
     });
     return;
   }
   if (hole.hole_shape === "rotated_pill") {
-    const rotation = hole.ccw_rotation ?? 0;
+    const rotation = getRotation(hole);
     if (hasSoldermask && margin > 0) {
       drawPill({
         ctx,
@@ -1825,9 +1843,6 @@ function drawPcbCopperPour(params) {
 // lib/drawer/elements/pcb-copper-text.ts
 import { applyToPoint as applyToPoint13 } from "transformation-matrix";
 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) {
   if (!alignment) return "center";
   if (alignment.includes("left")) return "center_left";
@@ -1849,13 +1864,11 @@ function drawPcbCopperText(params) {
     ...DEFAULT_PADDING,
     ...text.knockout_padding
   };
-  const textColor = layerToCopperColor(text.layer, colorMap);
+  const textColor = colorMap.copper[text.layer] ?? colorMap.copper.top;
   const layout = getAlphabetLayout(content, fontSize);
   const totalWidth = layout.width + layout.strokeWidth;
   const alignment = mapAnchorAlignment2(text.anchor_alignment);
   const startPos = getTextStartPosition(alignment, layout);
-  const startX = startPos.x;
-  const startY = startPos.y;
   ctx.save();
   ctx.translate(x, y);
   if (text.is_mirrored) ctx.scale(-1, 1);
@@ -1868,29 +1881,22 @@ 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 = textBoxTop - paddingTop;
-    const knockoutWidth = totalWidth + paddingLeft + paddingRight;
-    const knockoutHeight = textBoxHeight + paddingTop + paddingBottom;
+    const rectX = startPos.x - paddingLeft * 4;
+    const rectY = startPos.y - paddingTop * 4;
+    const rectWidth = totalWidth + paddingLeft * 2 + paddingRight * 2;
+    const rectHeight = layout.height + layout.strokeWidth + paddingTop * 2 + paddingBottom * 2;
     ctx.fillStyle = textColor;
-    ctx.fillRect(xOffset, yOffset, knockoutWidth, knockoutHeight);
-    const previousCompositeOperation = ctx.globalCompositeOperation;
-    ctx.globalCompositeOperation = "destination-out";
-    ctx.fillStyle = "rgba(0,0,0,1)";
-    ctx.strokeStyle = "rgba(0,0,0,1)";
-    strokeAlphabetText({ ctx, text: content, fontSize, startX, startY });
-    if (previousCompositeOperation) {
-      ctx.globalCompositeOperation = previousCompositeOperation;
-    } else {
-      ctx.globalCompositeOperation = "source-over";
-    }
+    ctx.fillRect(rectX, rectY, rectWidth, rectHeight);
   } else {
     ctx.strokeStyle = textColor;
-    strokeAlphabetText({ ctx, text: content, fontSize, startX, startY });
   }
+  strokeAlphabetText({
+    ctx,
+    text: content,
+    fontSize,
+    startX: startPos.x,
+    startY: startPos.y
+  });
   ctx.restore();
 }
 

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

@@ -1,13 +1,12 @@
-import type { PcbCopperText } from "circuit-json"
+import type { NinePointAnchor, PcbCopperText } from "circuit-json"
 import type { Matrix } from "transformation-matrix"
 import { applyToPoint } from "transformation-matrix"
-import type { PcbColorMap, CanvasContext } from "../types"
 import {
   getAlphabetLayout,
-  strokeAlphabetText,
   getTextStartPosition,
-  type AnchorAlignment,
+  strokeAlphabetText,
 } from "../shapes/text"
+import type { CanvasContext, PcbColorMap } from "../types"
 
 export interface DrawPcbCopperTextParams {
   ctx: CanvasContext
@@ -18,14 +17,8 @@ export interface DrawPcbCopperTextParams {
 
 const DEFAULT_PADDING = { left: 0.2, right: 0.2, top: 0.2, bottom: 0.2 }
 
-function layerToCopperColor(layer: string, colorMap: PcbColorMap): string {
-  return (
-    colorMap.copper[layer as keyof typeof colorMap.copper] ??
-    colorMap.copper.top
-  )
-}
-
-function mapAnchorAlignment(alignment?: string): AnchorAlignment {
+function mapAnchorAlignment(alignment?: string): NinePointAnchor {
+  // Vertical component is intentionally collapsed to center; callers only care about left/center/right.
   if (!alignment) return "center"
   if (alignment.includes("left")) return "center_left"
   if (alignment.includes("right")) return "center_right"
@@ -49,13 +42,13 @@ export function drawPcbCopperText(params: DrawPcbCopperTextParams): void {
     ...DEFAULT_PADDING,
     ...text.knockout_padding,
   }
-  const textColor = layerToCopperColor(text.layer, colorMap)
+  const textColor =
+    colorMap.copper[text.layer as keyof typeof colorMap.copper] ??
+    colorMap.copper.top
   const layout = getAlphabetLayout(content, fontSize)
   const totalWidth = layout.width + layout.strokeWidth
   const alignment = mapAnchorAlignment(text.anchor_alignment)
   const startPos = getTextStartPosition(alignment, layout)
-  const startX = startPos.x
-  const startY = startPos.y
 
   ctx.save()
   ctx.translate(x, y)
@@ -71,32 +64,25 @@ 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 = textBoxTop - paddingTop
-    const knockoutWidth = totalWidth + paddingLeft + paddingRight
-    const knockoutHeight = textBoxHeight + paddingTop + paddingBottom
+    const rectX = startPos.x - paddingLeft * 4
+    const rectY = startPos.y - paddingTop * 4
+    const rectWidth = totalWidth + paddingLeft * 2 + paddingRight * 2
+    const rectHeight =
+      layout.height + layout.strokeWidth + paddingTop * 2 + paddingBottom * 2
 
+    // Draw knockout rectangle
     ctx.fillStyle = textColor
-    ctx.fillRect(xOffset, yOffset, knockoutWidth, knockoutHeight)
-
-    const previousCompositeOperation = ctx.globalCompositeOperation
-    ctx.globalCompositeOperation = "destination-out"
-    ctx.fillStyle = "rgba(0,0,0,1)"
-    ctx.strokeStyle = "rgba(0,0,0,1)"
-    strokeAlphabetText({ ctx, text: content, fontSize, startX, startY })
-    if (previousCompositeOperation) {
-      ctx.globalCompositeOperation = previousCompositeOperation
-    } else {
-      ctx.globalCompositeOperation = "source-over"
-    }
+    ctx.fillRect(rectX, rectY, rectWidth, rectHeight)
   } else {
     ctx.strokeStyle = textColor
-    strokeAlphabetText({ ctx, text: content, fontSize, startX, startY })
   }
+
+  strokeAlphabetText({
+    ctx,
+    text: content,
+    fontSize,
+    startX: startPos.x,
+    startY: startPos.y,
+  })
   ctx.restore()
 }

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

@@ -13,6 +13,14 @@ export interface DrawPcbHoleParams {
   colorMap: PcbColorMap
 }
 
+// Helper function to safely access ccw_rotation property
+function getRotation(hole: PCBHole): number {
+  if ("ccw_rotation" in hole && typeof hole.ccw_rotation === "number") {
+    return hole.ccw_rotation
+  }
+  return 0
+}
+
 export function drawPcbHole(params: DrawPcbHoleParams): void {
   const { ctx, hole, realToCanvasMat, colorMap } = params
 
@@ -47,6 +55,7 @@ export function drawPcbHole(params: DrawPcbHoleParams): void {
   }
 
   if (hole.hole_shape === "square") {
+    const rotation = getRotation(hole)
     // For positive margins, draw extended mask area first
     if (hasSoldermask && margin > 0) {
       drawRect({
@@ -56,6 +65,7 @@ export function drawPcbHole(params: DrawPcbHoleParams): void {
         height: hole.hole_diameter + margin * 2,
         fill: positiveMarginColor,
         realToCanvasMat,
+        rotation,
       })
     }
 
@@ -67,11 +77,13 @@ export function drawPcbHole(params: DrawPcbHoleParams): void {
       height: hole.hole_diameter,
       fill: colorMap.drill,
       realToCanvasMat,
+      rotation,
     })
     return
   }
 
   if (hole.hole_shape === "oval") {
+    const rotation = getRotation(hole)
     // For positive margins, draw extended mask area first
     if (hasSoldermask && margin > 0) {
       drawOval({
@@ -81,6 +93,7 @@ export function drawPcbHole(params: DrawPcbHoleParams): void {
         radius_y: hole.hole_height / 2 + margin,
         fill: positiveMarginColor,
         realToCanvasMat,
+        rotation,
       })
     }
 
@@ -92,11 +105,13 @@ export function drawPcbHole(params: DrawPcbHoleParams): void {
       radius_y: hole.hole_height / 2,
       fill: colorMap.drill,
       realToCanvasMat,
+      rotation,
     })
     return
   }
 
   if (hole.hole_shape === "rect") {
+    const rotation = getRotation(hole)
     // For positive margins, draw extended mask area first
     if (hasSoldermask && margin > 0) {
       drawRect({
@@ -106,6 +121,7 @@ export function drawPcbHole(params: DrawPcbHoleParams): void {
         height: hole.hole_height + margin * 2,
         fill: positiveMarginColor,
         realToCanvasMat,
+        rotation,
       })
     }
 
@@ -117,11 +133,13 @@ export function drawPcbHole(params: DrawPcbHoleParams): void {
       height: hole.hole_height,
       fill: colorMap.drill,
       realToCanvasMat,
+      rotation,
     })
     return
   }
 
   if (hole.hole_shape === "pill") {
+    const rotation = getRotation(hole)
     // For positive margins, draw extended mask area first
     if (hasSoldermask && margin > 0) {
       drawPill({
@@ -131,6 +149,7 @@ export function drawPcbHole(params: DrawPcbHoleParams): void {
         height: hole.hole_height + margin * 2,
         fill: positiveMarginColor,
         realToCanvasMat,
+        rotation,
       })
     }
 
@@ -142,12 +161,13 @@ export function drawPcbHole(params: DrawPcbHoleParams): void {
       height: hole.hole_height,
       fill: colorMap.drill,
       realToCanvasMat,
+      rotation,
     })
     return
   }
 
   if (hole.hole_shape === "rotated_pill") {
-    const rotation = (hole as any).ccw_rotation ?? 0
+    const rotation = getRotation(hole)
 
     // For positive margins, draw extended mask area first
     if (hasSoldermask && margin > 0) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "circuit-to-canvas",
   "main": "dist/index.js",
-  "version": "0.0.43",
+  "version": "0.0.45",
   "type": "module",
   "scripts": {
     "build": "tsup-node ./lib/index.ts --format esm --dts",

package/tests/elements/pcb-hole.test.ts

@@ -103,3 +103,110 @@ test("draw pill hole", async () => {
     "pill-hole",
   )
 })
+
+test("draw rotated oval hole", async () => {
+  const canvas = createCanvas(100, 100)
+  const ctx = canvas.getContext("2d")
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, 100, 100)
+
+  const hole: PCBHole & { ccw_rotation?: number } = {
+    type: "pcb_hole",
+    pcb_hole_id: "hole1",
+    hole_shape: "oval",
+    hole_width: 50,
+    hole_height: 30,
+    x: 50,
+    y: 50,
+    ccw_rotation: 45,
+  }
+
+  drawer.drawElements([hole])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+    "rotated-oval-hole",
+  )
+})
+
+test("draw rotated rect hole", async () => {
+  const canvas = createCanvas(100, 100)
+  const ctx = canvas.getContext("2d")
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, 100, 100)
+
+  const hole: PCBHole & { ccw_rotation?: number } = {
+    type: "pcb_hole",
+    pcb_hole_id: "hole1",
+    hole_shape: "rect",
+    hole_width: 50,
+    hole_height: 30,
+    x: 50,
+    y: 50,
+    ccw_rotation: 45,
+  }
+
+  drawer.drawElements([hole])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+    "rotated-rect-hole",
+  )
+})
+
+test("draw rotated square hole", async () => {
+  const canvas = createCanvas(100, 100)
+  const ctx = canvas.getContext("2d")
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, 100, 100)
+
+  const hole: PCBHole & { ccw_rotation?: number } = {
+    type: "pcb_hole",
+    pcb_hole_id: "hole1",
+    hole_shape: "square",
+    hole_diameter: 30,
+    x: 50,
+    y: 50,
+    ccw_rotation: 45,
+  }
+
+  drawer.drawElements([hole])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+    "rotated-square-hole",
+  )
+})
+
+test("draw rotated pill hole", async () => {
+  const canvas = createCanvas(100, 100)
+  const ctx = canvas.getContext("2d")
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, 100, 100)
+
+  const hole: PCBHole & { ccw_rotation?: number } = {
+    type: "pcb_hole",
+    pcb_hole_id: "hole1",
+    hole_shape: "pill",
+    hole_width: 60,
+    hole_height: 30,
+    x: 50,
+    y: 50,
+    ccw_rotation: 45,
+  }
+
+  drawer.drawElements([hole])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+    "rotated-pill-hole",
+  )
+})