fix: live debug grid and port prop changes

examples/example18-live-toggle.fixture.tsx

@@ -0,0 +1,60 @@
+import { useState } from "react"
+import { SchematicViewer } from "lib/components/SchematicViewer"
+import { renderToCircuitJson } from "lib/dev/render-to-circuit-json"
+
+export default () => {
+  const [showDebugGrid, setShowDebugGrid] = useState(true)
+  const [showPorts, setShowPorts] = useState(false)
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+      <div style={{ padding: 10, display: "flex", gap: 10 }}>
+        <button onClick={() => setShowDebugGrid(!showDebugGrid)}>
+          Debug Grid: {String(showDebugGrid)}
+        </button>
+        <button onClick={() => setShowPorts(!showPorts)}>
+          Schematic Ports: {String(showPorts)}
+        </button>
+      </div>
+      <SchematicViewer
+        circuitJson={renderToCircuitJson(
+          <board width="10mm" height="10mm" routingDisabled>
+            <resistor name="R1" resistance={1000} schX={-2} />
+            <capacitor name="C1" capacitance="1uF" schX={2} schY={2} />
+            <capacitor
+              name="C2"
+              schRotation={90}
+              capacitance="1uF"
+              schX={0}
+              schY={-4}
+            />
+            <chip
+              name="U1"
+              pinLabels={{
+                pin1: "D0",
+                pin2: "D1",
+                pin3: "D2",
+                pin4: "GND",
+                pin5: "D3",
+                pin6: "EN",
+                pin7: "D4",
+                pin8: "VCC",
+              }}
+              footprint="soic8"
+              schX={0}
+              schY={-1.5}
+            />
+
+            <trace from=".R1 .pin2" to=".C1 .pin1" />
+            <trace from=".C1 .pin2" to=".U1 .pin4" />
+            <trace from=".U1 .pin8" to=".C2 .pin1" />
+            <trace from=".C2 .pin2" to=".R1 .pin1" />
+            <trace from=".U1 .pin1" to=".U1 .pin5" />
+          </board>,
+        )}
+        debugGrid={showDebugGrid}
+        showSchematicPorts={showPorts}
+      />
+    </div>
+  )
+}

lib/components/SchematicViewer.tsx

@@ -123,7 +123,8 @@ export const SchematicViewer = ({
 
   const [editModeEnabled, setEditModeEnabled] = useState(defaultEditMode)
   const [snapToGrid, setSnapToGrid] = useState(true)
-  const [showGrid, setShowGrid] = useState(debugGrid)
+  const [showGridInternal, setShowGridInternal] = useState(false)
+  const showGrid = debugGrid || showGridInternal
   const [isInteractionEnabled, setIsInteractionEnabled] = useState<boolean>(
     !clickToInteractEnabled,
   )
@@ -513,7 +514,7 @@ export const SchematicViewer = ({
             }
           }}
           showGrid={showGrid}
-          onToggleGrid={setShowGrid}
+          onToggleGrid={setShowGridInternal}
         />
         {spiceSimulationEnabled && (
           <SpiceSimulationIcon onClick={() => setShowSpiceOverlay(true)} />