feat(viewer): add showPcbNotes toggle to 3D renderer & SVG export (hidden by default)

README.md

@@ -108,6 +108,7 @@ The `convert3dCircuitToSvg` function accepts the following options:
 - `backgroundColor`: Background color in hex format (default: "#ffffff")
 - `padding`: Padding around the board (default: 20)
 - `zoom`: Zoom level (default: 1.5)
+- `showPcbNotes`: Whether to render `pcb_note_*` elements (default: `false`)
 - `camera`: Camera position and lookAt configuration
   - `position`: {x, y, z} coordinates for camera position
   - `lookAt`: {x, y, z} coordinates for camera target
@@ -123,6 +124,7 @@ Props:
 - `circuit-json`: (optional) An array of AnyCircuitElement objects representing the PCB layout.
 - `children`: (optional) React children elements describing the PCB layout (alternative to using `circuit-json`).
 - `resolveStaticAsset`: (optional) Function that receives each component model URL (`obj`, `wrl`, `stl`, `gltf`, `glb`, `step`) and returns the resolved URL to load.
+- `showPcbNotes`: (optional) Show `pcb_note_*` graphics in 3D output. Defaults to `false`.
 
 ### `<board>`
 

src/CadViewerJscad.tsx

@@ -28,6 +28,7 @@ interface Props {
   onUserInteraction?: () => void
   onCameraControllerReady?: (controller: CameraController | null) => void
   resolveStaticAsset?: (modelUrl: string) => string
+  showPcbNotes?: boolean
 }
 
 export const CadViewerJscad = forwardRef<
@@ -43,6 +44,7 @@ export const CadViewerJscad = forwardRef<
       onUserInteraction,
       onCameraControllerReady,
       resolveStaticAsset,
+      showPcbNotes = false,
     },
     ref,
   ) => {
@@ -148,6 +150,7 @@ export const CadViewerJscad = forwardRef<
           circuitJson={internalCircuitJson}
           pcbThickness={pcbThickness}
           isFaux={isFauxBoard}
+          showPcbNotes={showPcbNotes}
         />
         {cad_components.map((cad_component) => (
           <ThreeErrorBoundary

src/CadViewerManifold.tsx

@@ -128,6 +128,7 @@ type CadViewerManifoldProps = {
   onUserInteraction?: () => void
   onCameraControllerReady?: (controller: CameraController | null) => void
   resolveStaticAsset?: (modelUrl: string) => string
+  showPcbNotes?: boolean
 } & (
   | { circuitJson: AnyCircuitElement[]; children?: React.ReactNode }
   | { circuitJson?: never; children: React.ReactNode }
@@ -143,6 +144,7 @@ const CadViewerManifold: React.FC<CadViewerManifoldProps> = ({
   children,
   onCameraControllerReady,
   resolveStaticAsset,
+  showPcbNotes = false,
 }) => {
   const childrenCircuitJson = useConvertChildrenToCircuitJson(children)
   const circuitJson = useMemo(() => {
@@ -241,7 +243,12 @@ try {
     isLoading: builderIsLoading,
     boardData,
     isFauxBoard,
-  } = useManifoldBoardBuilder(manifoldJSModule, circuitJson, visibility)
+  } = useManifoldBoardBuilder(
+    manifoldJSModule,
+    circuitJson,
+    visibility,
+    showPcbNotes,
+  )
 
   const geometryMeshes = useMemo(() => createGeometryMeshes(geoms), [geoms])
   const textureMeshes = useMemo(

src/convert-circuit-json-to-3d-svg.ts

@@ -16,6 +16,7 @@ interface CircuitToSvgOptions {
   backgroundColor?: string
   padding?: number
   zoom?: number
+  showPcbNotes?: boolean
   camera?: {
     position: {
       x: number
@@ -42,8 +43,15 @@ export async function convertCircuitJsonTo3dSvg(
     backgroundColor = "#ffffff",
     padding = 20,
     zoom = 1.5,
+    showPcbNotes = false,
   } = options
 
+  const filteredCircuitJson = showPcbNotes
+    ? circuitJson
+    : circuitJson.filter(
+        (element) => !(element.type as string).startsWith("pcb_note_"),
+      )
+
   // Initialize scene and renderer
   const scene = new THREE.Scene()
   const renderer = new SVGRenderer()
@@ -88,15 +96,15 @@ export async function convertCircuitJsonTo3dSvg(
   scene.add(pointLight)
 
   // Add components
-  const components = su(circuitJson).cad_component.list()
+  const components = su(filteredCircuitJson).cad_component.list()
   for (const component of components) {
     await renderComponent(component, scene)
   }
 
-  const boardData = su(circuitJson).pcb_board.list()[0]
+  const boardData = su(filteredCircuitJson).pcb_board.list()[0]
 
   // Add board geometry after components
-  const boardGeom = createBoardGeomFromCircuitJson(circuitJson)
+  const boardGeom = createBoardGeomFromCircuitJson(filteredCircuitJson)
   if (boardGeom) {
     // Use green solder mask color for the board
     const solderMaskColor = colors.fr4SolderMaskGreen

src/hooks/useManifoldBoardBuilder.ts

@@ -58,6 +58,7 @@ export const useManifoldBoardBuilder = (
   manifoldJSModule: ManifoldToplevel | null,
   circuitJson: AnyCircuitElement[],
   visibility: LayerVisibilityState,
+  showPcbNotes = false,
 ): UseManifoldBoardBuilderResult => {
   const [geoms, setGeoms] = useState<ManifoldGeoms | null>(null)
   const [pcbThickness, setPcbThickness] = useState<number | null>(null)
@@ -354,8 +355,9 @@ export const useManifoldBoardBuilder = (
       boardData,
       traceTextureResolution,
       visibility,
+      showPcbNotes,
     })
-  }, [circuitJson, boardData, traceTextureResolution, visibility])
+  }, [circuitJson, boardData, traceTextureResolution, visibility, showPcbNotes])
 
   return {
     geoms,

src/textures/create-combined-board-textures.ts

@@ -72,11 +72,13 @@ export function createCombinedBoardTextures({
   boardData,
   traceTextureResolution,
   visibility,
+  showPcbNotes = false,
 }: {
   circuitJson: AnyCircuitElement[]
   boardData: PcbBoard
   traceTextureResolution: number
   visibility?: Partial<LayerVisibilityState>
+  showPcbNotes?: boolean
 }): CombinedBoardTextures {
   const traceColorWithMask = toRgb(defaultColors.fr4TracesWithMaskGreen)
   const traceColorWithoutMask = toRgb(defaultColors.fr4TracesWithoutMaskTan)
@@ -154,7 +156,7 @@ export function createCombinedBoardTextures({
         })
       : null
 
-    const pcbNoteTexture = showSilkscreen
+    const pcbNoteTexture = showPcbNotes
       ? createPcbNoteTextureForLayer({
           layer,
           circuitJson,

src/three-components/JscadBoardTextures.tsx

@@ -16,12 +16,14 @@ interface JscadBoardTexturesProps {
   circuitJson: AnyCircuitElement[]
   pcbThickness: number
   isFaux?: boolean
+  showPcbNotes?: boolean
 }
 
 export function JscadBoardTextures({
   circuitJson,
   pcbThickness,
   isFaux = false,
+  showPcbNotes = false,
 }: JscadBoardTexturesProps) {
   const { rootObject } = useThree()
   const { visibility } = useLayerVisibility()
@@ -70,8 +72,9 @@ export function JscadBoardTextures({
       boardData,
       traceTextureResolution,
       visibility,
+      showPcbNotes,
     })
-  }, [circuitJson, boardData, traceTextureResolution, visibility])
+  }, [circuitJson, boardData, traceTextureResolution, visibility, showPcbNotes])
 
   useEffect(() => {
     if (!rootObject || !boardData || !textures) return
@@ -176,17 +179,19 @@ export function JscadBoardTextures({
     }
 
     return () => {
-      meshes.forEach((mesh) => {
+      for (const mesh of meshes) {
         if (mesh.parent === rootObject) {
           rootObject.remove(mesh)
         }
         mesh.geometry.dispose()
         if (Array.isArray(mesh.material)) {
-          mesh.material.forEach((material) => disposeTextureMaterial(material))
+          for (const material of mesh.material) {
+            disposeTextureMaterial(material)
+          }
         } else if (mesh.material instanceof THREE.Material) {
           disposeTextureMaterial(mesh.material)
         }
-      })
+      }
 
       textures.topBoard?.dispose()
       textures.bottomBoard?.dispose()

stories/PcbNoteLine.stories.tsx

@@ -1,4 +1,5 @@
 import { CadViewer } from "src/CadViewer"
+import type { Meta, StoryObj } from "@storybook/react"
 
 const pcbNoteLineCircuit = [
   {
@@ -143,11 +144,23 @@ const pcbNoteLineCircuit = [
   },
 ]
 
-export const PcbNoteLines = () => (
-  <CadViewer circuitJson={pcbNoteLineCircuit as any} />
-)
-
-export default {
+const meta = {
   title: "PCB Note Line",
-  component: PcbNoteLines,
+  component: CadViewer,
+  argTypes: {
+    showPcbNotes: {
+      control: "boolean",
+      description: "Show/hide pcb_note_* elements in the 3D view",
+    },
+  },
+} satisfies Meta<typeof CadViewer>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const PcbNoteLines: Story = {
+  args: {
+    circuitJson: pcbNoteLineCircuit as any,
+    showPcbNotes: true,
+  },
 }

tests/pcb-notes-visibility.test.ts

@@ -0,0 +1,72 @@
+import { expect, test } from "bun:test"
+import type { AnyCircuitElement, PcbBoard } from "circuit-json"
+import { JSDOM } from "jsdom"
+import { createCombinedBoardTextures } from "../src/textures"
+import { applyJsdomShim } from "../src/utils/jsdom-shim"
+
+test("pcb notes are hidden by default in board textures unless showPcbNotes is enabled", () => {
+  const dom = new JSDOM()
+  applyJsdomShim(dom)
+
+  const boardData: PcbBoard = {
+    type: "pcb_board",
+    pcb_board_id: "board_1",
+    center: { x: 0, y: 0 },
+    width: 10,
+    height: 8,
+    thickness: 1.6,
+    material: "fr4",
+    num_layers: 2,
+  }
+
+  const circuitJson: AnyCircuitElement[] = [
+    boardData,
+    {
+      type: "pcb_note_line",
+      pcb_note_line_id: "pcb_note_line_1",
+      pcb_component_id: "pcb_component_1",
+      x1: -3,
+      y1: 1,
+      x2: 3,
+      y2: 1,
+      stroke_width: 0.15,
+      layer: "top",
+    } as AnyCircuitElement,
+  ]
+
+  const hiddenByDefault = createCombinedBoardTextures({
+    circuitJson,
+    boardData,
+    traceTextureResolution: 32,
+    visibility: {
+      boardBody: false,
+      topCopper: false,
+      bottomCopper: false,
+      topSilkscreen: false,
+      bottomSilkscreen: false,
+      topMask: false,
+      bottomMask: false,
+    },
+  })
+
+  expect(hiddenByDefault.topBoard).toBeNull()
+
+  const explicitlyShown = createCombinedBoardTextures({
+    circuitJson,
+    boardData,
+    traceTextureResolution: 32,
+    showPcbNotes: true,
+    visibility: {
+      boardBody: false,
+      topCopper: false,
+      bottomCopper: false,
+      topSilkscreen: false,
+      bottomSilkscreen: false,
+      topMask: false,
+      bottomMask: false,
+    },
+  })
+
+  expect(explicitlyShown.topBoard).not.toBeNull()
+  expect(explicitlyShown.topBoard?.image).toBeDefined()
+})