feat: Render copper text via circuit-to-canvas on copper layers

src/components/CanvasPrimitiveRenderer.tsx

@@ -22,6 +22,7 @@ import React, { useEffect, useRef } from "react"
 import { SuperGrid, toMMSI } from "react-supergrid"
 import type { Matrix } from "transformation-matrix"
 import { useGlobalStore } from "../global-store"
+import { drawCopperTextElementsForLayer } from "lib/draw-copper-text"
 
 interface Props {
   primitives: Primitive[]
@@ -414,6 +415,17 @@ export const CanvasPrimitiveRenderer = ({
           realToCanvasMat: transform,
         })
       }
+
+      // Draw copper text elements last so knockout text stays visible
+      for (const { canvas, copperLayer } of copperLayers) {
+        if (!canvas) continue
+        drawCopperTextElementsForLayer({
+          canvas,
+          elements,
+          layers: [copperLayer],
+          realToCanvasMat: transform,
+        })
+      }
     }
 
     drawer.orderAndFadeLayers()

src/examples/2025/copper-text.fixture.tsx

@@ -34,7 +34,6 @@ export const CopperText: React.FC = () => {
       ],
     },
     // Trace under "BOTTOM KO" on bottom layer
-
     // Top layer basic text
     {
       type: "pcb_copper_text",
@@ -58,6 +57,7 @@ export const CopperText: React.FC = () => {
       layer: "bottom",
       anchor_position: { x: -15, y: 10 },
       anchor_alignment: "center",
+      is_mirrored: true,
     },
     {
       type: "pcb_silkscreen_text",
@@ -80,6 +80,7 @@ export const CopperText: React.FC = () => {
       anchor_position: { x: -15, y: 8 },
       anchor_alignment: "center",
       text: "BOTTOM LAYER",
+      is_mirrored: true,
     },
     // Text with knockout on top layer (using default padding)
     {
@@ -106,6 +107,7 @@ export const CopperText: React.FC = () => {
       anchor_position: { x: 0, y: 10 },
       anchor_alignment: "center",
       is_knockout: true,
+      is_mirrored: true,
     },
     // Rotated text 45° on top layer
     {
@@ -132,6 +134,7 @@ export const CopperText: React.FC = () => {
       anchor_position: { x: 15, y: 10 },
       anchor_alignment: "center",
       ccw_rotation: 90,
+      is_mirrored: true,
     },
     // Rotated text with knockout on top layer (using default padding)
     {
@@ -160,6 +163,7 @@ export const CopperText: React.FC = () => {
       anchor_alignment: "center",
       ccw_rotation: -15,
       is_knockout: true,
+      is_mirrored: true,
     },
     // Mirrored text on top layer
     {
@@ -185,6 +189,7 @@ export const CopperText: React.FC = () => {
       layer: "bottom",
       anchor_position: { x: 15, y: -4 },
       anchor_alignment: "center",
+      is_mirrored: true,
     },
     // Different anchor alignments on top layer
     {
@@ -208,6 +213,7 @@ export const CopperText: React.FC = () => {
       layer: "bottom",
       anchor_position: { x: -10, y: -12 },
       anchor_alignment: "bottom_right",
+      is_mirrored: true,
     },
     // Combined: bottom + rotation + knockout + multiline (using default padding)
     {
@@ -222,6 +228,7 @@ export const CopperText: React.FC = () => {
       anchor_alignment: "center",
       ccw_rotation: 25,
       is_knockout: true,
+      is_mirrored: true,
     },
   ]
   return (

src/lib/convert-element-to-primitive.ts

@@ -11,8 +11,6 @@ import {
   convertSmtpadRotatedPill,
 } from "./element-to-primitive-converters/convert-smtpad-pill"
 
-import { convertPcbCopperTextToPrimitive } from "./element-to-primitive/convert-pcb-copper-text-to-primitive"
-
 type MetaData = {
   _parent_pcb_component?: any
   _parent_source_component?: any
@@ -553,13 +551,8 @@ export const convertElementToPrimitives = (
       }
     }
 
-    case "pcb_copper_text": {
-      return convertPcbCopperTextToPrimitive(element, {
-        _parent_pcb_component,
-        _parent_source_component,
-      })
+    default: {
+      return []
     }
   }
-
-  return []
 }

src/lib/draw-copper-text.ts

@@ -0,0 +1,50 @@
+import type { AnyCircuitElement, PcbRenderLayer } from "circuit-json"
+import {
+  CircuitToCanvasDrawer,
+  DEFAULT_PCB_COLOR_MAP,
+  type PcbColorMap,
+} from "circuit-to-canvas"
+import type { Matrix } from "transformation-matrix"
+import colors from "./colors"
+
+const PCB_VIEWER_COLOR_MAP: PcbColorMap = {
+  ...DEFAULT_PCB_COLOR_MAP,
+  copper: {
+    top: colors.board.copper.f,
+    bottom: colors.board.copper.b,
+    inner1: colors.board.copper.in1,
+    inner2: colors.board.copper.in2,
+    inner3: colors.board.copper.in3,
+    inner4: colors.board.copper.in4,
+    inner5: colors.board.copper.in5,
+    inner6: colors.board.copper.in6,
+  },
+}
+
+export function isCopperTextElement(element: AnyCircuitElement) {
+  return element.type === "pcb_copper_text"
+}
+
+export function drawCopperTextElementsForLayer({
+  canvas,
+  elements,
+  layers,
+  realToCanvasMat,
+}: {
+  canvas: HTMLCanvasElement
+  elements: AnyCircuitElement[]
+  layers: PcbRenderLayer[]
+  realToCanvasMat: Matrix
+}) {
+  const drawer = new CircuitToCanvasDrawer(canvas)
+
+  drawer.configure({
+    colorOverrides: PCB_VIEWER_COLOR_MAP,
+  })
+
+  drawer.realToCanvasMat = realToCanvasMat
+
+  const copperTextElements = elements.filter(isCopperTextElement)
+
+  drawer.drawElements(copperTextElements, { layers })
+}