feat: update PCBViewer to only auto-resize when board bounds change

src/PCBViewer.tsx

@@ -12,7 +12,6 @@ import useMouseMatrixTransform from "use-mouse-matrix-transform"
 import { CanvasElementsRenderer } from "./components/CanvasElementsRenderer"
 import type { ManualEditEvent } from "@tscircuit/props"
 import { zIndexMap } from "lib/util/z-index-map"
-import { calculateCircuitJsonKey } from "lib/calculate-circuit-json-key"
 
 const defaultTransform = compose(translate(400, 300), scale(40, -40))
 
@@ -61,10 +60,32 @@ export const PCBViewer = ({
 
   const initialRenderCompleted = useRef(false)
   const touchStartRef = useRef<{ x: number; y: number } | null>(null)
-  const circuitJsonKey = useMemo(
-    () => calculateCircuitJsonKey(circuitJson),
-    [circuitJson],
-  )
+
+  const pcbElmsPreEdit = useMemo(() => {
+    return (
+      circuitJson?.filter(
+        (e: any) => e.type.startsWith("pcb_") || e.type.startsWith("source_"),
+      ) ?? []
+    )
+  }, [circuitJson])
+
+  const elements = useMemo(() => {
+    return applyEditEvents({
+      circuitJson: pcbElmsPreEdit as any,
+      editEvents,
+    })
+  }, [pcbElmsPreEdit, editEvents])
+
+  // Track the pcb_board element's explicit width/height
+  const boardDimensions = useMemo(() => {
+    const pcbBoard = elements.find((e) => e.type === "pcb_board") as any
+    if (!pcbBoard?.width || !pcbBoard?.height) return null
+    return { width: pcbBoard.width, height: pcbBoard.height }
+  }, [elements])
+
+  // Extract width/height as primitives to avoid object reference changes triggering useEffect
+  const boardWidth = boardDimensions?.width ?? null
+  const boardHeight = boardDimensions?.height ?? null
 
   const resetTransform = () => {
     const elmBounds =
@@ -93,31 +114,29 @@ export const PCBViewer = ({
     return
   }
 
+  useEffect(() => {
+    if (initialRenderCompleted.current === true) {
+      resetTransform()
+    }
+  }, [
+    boardWidth,
+    boardHeight,
+    elements
+      .filter((e) => e.type === "pcb_board")
+      .flatMap((e: any) => [e.center?.x ?? 0, e.center?.y ?? 0])
+      .join(","),
+  ])
+
   useEffect(() => {
     if (!refDimensions?.width) return
-    if (!circuitJson) return
-    if (circuitJson.length === 0) return
+    if (boardWidth === null || boardHeight === null) return
 
     if (!initialRenderCompleted.current) {
       resetTransform()
       initialRenderCompleted.current = true
+      return
     }
-  }, [circuitJson, refDimensions])
-
-  const pcbElmsPreEdit = useMemo(() => {
-    return (
-      circuitJson?.filter(
-        (e: any) => e.type.startsWith("pcb_") || e.type.startsWith("source_"),
-      ) ?? []
-    )
-  }, [circuitJsonKey])
-
-  const elements = useMemo(() => {
-    return applyEditEvents({
-      circuitJson: pcbElmsPreEdit as any,
-      editEvents,
-    })
-  }, [pcbElmsPreEdit, editEvents])
+  }, [boardWidth, boardHeight, refDimensions])
 
   const onCreateEditEvent = (event: ManualEditEvent) => {
     setEditEvents([...editEvents, event])

src/examples/board-resize-test.fixture.tsx

@@ -0,0 +1,89 @@
+import { Circuit } from "@tscircuit/core"
+import { PCBViewer } from "../PCBViewer"
+import { useState, useMemo } from "react"
+
+export const BoardResizeTest = () => {
+  const [boardSize, setBoardSize] = useState<"small" | "medium" | "large">(
+    "small",
+  )
+  const [showComponent, setShowComponent] = useState(false)
+
+  // Generate circuit JSON for each board size - memoized to avoid recreation
+  const soup = useMemo(() => {
+    const circuit = new Circuit()
+
+    const sizes = {
+      small: { width: "10mm", height: "10mm" },
+      medium: { width: "30mm", height: "30mm" },
+      large: { width: "60mm", height: "60mm" },
+    }
+
+    circuit.add(
+      <board width={sizes[boardSize].width} height={sizes[boardSize].height}>
+        <resistor name="R1" footprint="0805" resistance="10k" />
+        {boardSize === "medium" && showComponent && (
+          <resistor
+            name="R2"
+            footprint="0805"
+            resistance="20k"
+            pcbX={5}
+            pcbY={5}
+          />
+        )}
+        {boardSize === "large" && (
+          <>
+            <resistor
+              name="R3"
+              footprint="0805"
+              resistance="30k"
+              pcbX={40}
+              pcbY={20}
+            />
+            <resistor
+              name="R4"
+              footprint="0805"
+              resistance="40k"
+              pcbX={-40}
+              pcbY={-20}
+            />
+          </>
+        )}
+      </board>,
+    )
+
+    return circuit.getCircuitJson()
+  }, [boardSize, showComponent])
+
+  return (
+    <div>
+      <div style={{ padding: "10px", background: "#333", color: "white" }}>
+        <button onClick={() => setBoardSize("small")} style={{ margin: "5px" }}>
+          Small (10mm)
+        </button>
+        <button
+          onClick={() => setBoardSize("medium")}
+          style={{ margin: "5px" }}
+        >
+          Medium (30mm)
+        </button>
+        <button onClick={() => setBoardSize("large")} style={{ margin: "5px" }}>
+          Large (60mm)
+        </button>
+        <span style={{ marginLeft: "10px" }}>Current: {boardSize}</span>
+        {boardSize === "medium" && (
+          <button
+            onClick={() => setShowComponent(!showComponent)}
+            style={{ margin: "5px", marginLeft: "20px" }}
+          >
+            {showComponent ? "Hide" : "Show"} Component
+          </button>
+        )}
+      </div>
+      <div style={{ backgroundColor: "black" }}>
+        <PCBViewer circuitJson={soup as any} />
+      </div>
+    </div>
+  )
+}
+
+export default BoardResizeTest