circuit-to-canvas 0.0.69 → 0.0.71

package/.github/CODEOWNERS

@@ -1 +1 @@
-* @ShiboSoftwareDev @Abse2001
+* @ShiboSoftwareDev @Abse2001 @techmannih

package/dist/index.js

@@ -2028,6 +2028,7 @@ function drawPcbSilkscreenRect(params) {
 
 // lib/drawer/elements/pcb-silkscreen-text.ts
 import { applyToPoint as applyToPoint15 } from "transformation-matrix";
+var DEFAULT_PADDING2 = { left: 0.2, right: 0.2, top: 0.2, bottom: 0.2 };
 function layerToSilkscreenColor7(layer, colorMap) {
   return layer === "bottom" ? colorMap.silkscreen.bottom : colorMap.silkscreen.top;
 }
@@ -2047,7 +2048,12 @@ function drawPcbSilkscreenText(params) {
   const scale2 = Math.abs(realToCanvasMat.a);
   const fontSize = (text.font_size ?? 1) * scale2;
   const rotation = text.ccw_rotation ?? 0;
+  const padding = {
+    ...DEFAULT_PADDING2,
+    ...text.knockout_padding
+  };
   const layout = getAlphabetLayout(content, fontSize);
+  const totalWidth = layout.width + layout.strokeWidth;
   const alignment = mapAnchorAlignment2(text.anchor_alignment);
   const startPos = getTextStartPosition(alignment, layout);
   ctx.save();
@@ -2061,7 +2067,20 @@ function drawPcbSilkscreenText(params) {
   ctx.lineWidth = layout.strokeWidth;
   ctx.lineCap = "round";
   ctx.lineJoin = "round";
-  ctx.strokeStyle = color;
+  if (text.is_knockout) {
+    const paddingLeft = padding.left * scale2;
+    const paddingRight = padding.right * scale2;
+    const paddingTop = padding.top * scale2;
+    const paddingBottom = padding.bottom * scale2;
+    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 = color;
+    ctx.fillRect(rectX, rectY, rectWidth, rectHeight);
+  } else {
+    ctx.strokeStyle = color;
+  }
   const { lines, lineWidths, lineHeight, width, strokeWidth } = layout;
   lines.forEach((line, lineIndex) => {
     const lineStartX = startPos.x + getLineStartX({

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

@@ -17,6 +17,8 @@ export interface DrawPcbSilkscreenTextParams {
   colorMap: PcbColorMap
 }
 
+const DEFAULT_PADDING = { left: 0.2, right: 0.2, top: 0.2, bottom: 0.2 }
+
 function layerToSilkscreenColor(layer: string, colorMap: PcbColorMap): string {
   return layer === "bottom"
     ? colorMap.silkscreen.bottom
@@ -44,8 +46,13 @@ export function drawPcbSilkscreenText(
   const scale = Math.abs(realToCanvasMat.a)
   const fontSize = (text.font_size ?? 1) * scale
   const rotation = text.ccw_rotation ?? 0
+  const padding = {
+    ...DEFAULT_PADDING,
+    ...text.knockout_padding,
+  }
 
   const layout = getAlphabetLayout(content, fontSize)
+  const totalWidth = layout.width + layout.strokeWidth
   const alignment = mapAnchorAlignment(text.anchor_alignment)
   const startPos = getTextStartPosition(alignment, layout)
 
@@ -64,7 +71,23 @@ export function drawPcbSilkscreenText(
   ctx.lineWidth = layout.strokeWidth
   ctx.lineCap = "round"
   ctx.lineJoin = "round"
-  ctx.strokeStyle = color
+
+  if (text.is_knockout) {
+    const paddingLeft = padding.left * scale
+    const paddingRight = padding.right * scale
+    const paddingTop = padding.top * scale
+    const paddingBottom = padding.bottom * scale
+    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 = color
+    ctx.fillRect(rectX, rectY, rectWidth, rectHeight)
+  } else {
+    ctx.strokeStyle = color
+  }
 
   const { lines, lineWidths, lineHeight, width, strokeWidth } = layout
 

package/package.json

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

package/tests/elements/pcb-silkscreen-text-knockout.test.ts

@@ -0,0 +1,65 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import type { PcbSilkscreenText } from "circuit-json"
+import { scale } from "transformation-matrix"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw silkscreen text knockout", async () => {
+  const SCALE = 4
+  const canvas = createCanvas(100 * SCALE, 60 * 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)
+
+  drawer.realToCanvasMat = scale(2, 2)
+
+  const text: PcbSilkscreenText[] = [
+    {
+      type: "pcb_silkscreen_text",
+      pcb_silkscreen_text_id: "text1",
+      pcb_component_id: "component1",
+      layer: "top",
+      text: "U1",
+      anchor_position: { x: 25, y: 15 },
+      anchor_alignment: "center",
+      font: "tscircuit2024",
+      font_size: 8,
+      is_knockout: true,
+    },
+    {
+      type: "pcb_silkscreen_text",
+      pcb_silkscreen_text_id: "text2",
+      pcb_component_id: "component1",
+      layer: "bottom",
+      text: "R1",
+      anchor_position: { x: 25, y: 25 },
+      anchor_alignment: "center",
+      font: "tscircuit2024",
+      font_size: 6,
+      is_knockout: true,
+      knockout_padding: { left: 0.5, right: 0.5, top: 0.3, bottom: 0.3 },
+    },
+    {
+      type: "pcb_silkscreen_text",
+      pcb_silkscreen_text_id: "text3",
+      pcb_component_id: "component1",
+      layer: "top",
+      text: "C1",
+      anchor_position: { x: 40, y: 20 },
+      anchor_alignment: "center",
+      font: "tscircuit2024",
+      font_size: 8,
+      is_knockout: true,
+      ccw_rotation: 45,
+    },
+  ]
+
+  drawer.drawElements(text)
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})