@tscircuit/schematic-viewer 2.0.49 → 2.0.51

package/examples/example15-analog-simulation-viewer.fixture.tsx

@@ -0,0 +1,145 @@
+import React from "react"
+import { AnalogSimulationViewer } from "../lib/components/AnalogSimulationViewer"
+import * as Core from "@tscircuit/core"
+import createNgspiceSpiceEngine from "@tscircuit/ngspice-spice-engine"
+
+// TSX circuit definition
+const SwitchCircuitElement = (
+  <board schMaxTraceDistance={10} routingDisabled>
+    <voltagesource name="V1" voltage="5V" />
+    <resistor name="R_base" resistance="10k" schY={2} />
+    <switch name="SW1" simSwitchFrequency="1kHz" schX={1.5} schY={2} />
+    <transistor
+      name="Q1"
+      type="npn"
+      footprint="sot23"
+      schX={2}
+      schY={0.3}
+      schRotation={180}
+    />
+    <resistor name="R_collector" resistance="10k" schY={-2} />
+
+    <trace from=".V1 > .pin1" to=".R_base > .pin1" />
+    <trace from=".R_base > .pin2" to=".SW1 > .pin1" />
+    <trace from=".SW1 > .pin2" to=".Q1 > .base" />
+
+    <trace from=".V1 > .pin1" to=".R_collector > .pin1" />
+    <trace from=".R_collector > .pin2" to=".Q1 > .collector" />
+
+    <trace from=".Q1 > .emitter" to=".V1 > .pin2" />
+
+    <voltageprobe name="VP_COLLECTOR" connectsTo=".R_collector > .pin2" />
+
+    <analogsimulation duration="4ms" timePerStep="1us" spiceEngine="ngspice" />
+  </board>
+)
+
+// Convert TSX to CircuitJSON and add simulation data
+const createSimulatedCircuitJson = async () => {
+  try {
+    // Step 1: Create circuit with platform configuration
+    const circuit = new Core.Circuit()
+
+    const ngspiceEngine = await createNgspiceSpiceEngine()
+    circuit.setPlatform({
+      spiceEngineMap: {
+        ngspice: ngspiceEngine,
+      },
+    })
+
+    // Step 2: Add the circuit element
+    circuit.add(SwitchCircuitElement)
+    await circuit.renderUntilSettled()
+
+    // Step 3: Get CircuitJSON (includes simulation data if produced by the platform)
+    return circuit.getCircuitJson()
+  } catch (error) {
+    console.error("Simulation failed:", error)
+    // Return basic CircuitJSON if simulation fails
+    const fallbackCircuit = new Core.Circuit()
+    fallbackCircuit.add(SwitchCircuitElement)
+    await fallbackCircuit.renderUntilSettled()
+    return fallbackCircuit.getCircuitJson()
+  }
+}
+
+export default () => {
+  const [simulatedCircuitJson, setSimulatedCircuitJson] = React.useState<
+    any[] | null
+  >(null)
+  const [isLoading, setIsLoading] = React.useState(true)
+  const [error, setError] = React.useState<string | null>(null)
+
+  React.useEffect(() => {
+    const loadAndSimulateCircuit = async () => {
+      try {
+        setIsLoading(true)
+        setError(null)
+
+        const result = await createSimulatedCircuitJson()
+        setSimulatedCircuitJson(result)
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Failed to load circuit")
+        console.error("Error loading circuit:", err)
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    loadAndSimulateCircuit()
+  }, [])
+
+  if (isLoading) {
+    return (
+      <div style={{ padding: "20px", textAlign: "center" }}>
+        <h2>Analog Simulation Viewer Example</h2>
+        <p>Converting TSX to CircuitJSON and running SPICE simulation...</p>
+        <div
+          style={{
+            display: "inline-block",
+            padding: "20px",
+            backgroundColor: "#f5f5f5",
+            borderRadius: "8px",
+            marginTop: "20px",
+          }}
+        >
+          Loading and simulating circuit...
+        </div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div style={{ padding: "20px", textAlign: "center" }}>
+        <h2>Analog Simulation Viewer Example</h2>
+        <div
+          style={{
+            display: "inline-block",
+            padding: "20px",
+            backgroundColor: "#fef2f2",
+            borderRadius: "8px",
+            border: "1px solid #fecaca",
+            color: "#dc2626",
+            marginTop: "20px",
+          }}
+        >
+          <h4>Error:</h4>
+          <p>{error}</p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    simulatedCircuitJson && (
+      <AnalogSimulationViewer
+        circuitJson={simulatedCircuitJson}
+        containerStyle={{
+          width: "100vw",
+          height: "100vh",
+        }}
+      />
+    )
+  )
+}

package/examples/example16-no-analog-simulation.fixture.tsx

@@ -0,0 +1,13 @@
+import { AnalogSimulationViewer } from "lib/components/AnalogSimulationViewer"
+import { renderToCircuitJson } from "lib/dev/render-to-circuit-json"
+
+const circuitJson = renderToCircuitJson(
+  <board width="10mm" height="10mm" routingDisabled></board>,
+)
+
+export default () => (
+  <AnalogSimulationViewer
+    circuitJson={circuitJson}
+    containerStyle={{ height: "100%" }}
+  />
+)

package/lib/components/AnalogSimulationViewer.tsx

@@ -0,0 +1,300 @@
+import {
+  convertCircuitJsonToSchematicSimulationSvg,
+  type ColorOverrides,
+} from "circuit-to-svg"
+import { useEffect, useState, useMemo, useRef } from "react"
+import { useResizeHandling } from "../hooks/use-resize-handling"
+import { useMouseMatrixTransform } from "use-mouse-matrix-transform"
+import { toString as transformToString } from "transformation-matrix"
+import type { CircuitJson } from "circuit-json"
+
+interface Props {
+  circuitJson: CircuitJson
+  containerStyle?: React.CSSProperties
+  colorOverrides?: ColorOverrides
+  width?: number
+  height?: number
+  className?: string
+}
+
+export const AnalogSimulationViewer = ({
+  circuitJson: inputCircuitJson,
+  containerStyle,
+  colorOverrides,
+  width,
+  height,
+  className,
+}: Props) => {
+  const [circuitJson, setCircuitJson] = useState<CircuitJson | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [svgObjectUrl, setSvgObjectUrl] = useState<string | null>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const imgRef = useRef<HTMLImageElement>(null)
+
+  const { containerWidth, containerHeight } = useResizeHandling(
+    containerRef as React.RefObject<HTMLElement>,
+  )
+
+  const [isDragging, setIsDragging] = useState(false)
+
+  const {
+    ref: transformRef,
+    cancelDrag: _cancelDrag,
+    transform: _svgToScreenProjection,
+  } = useMouseMatrixTransform({
+    onSetTransform(transform) {
+      if (imgRef.current) {
+        imgRef.current.style.transform = transformToString(transform)
+      }
+    },
+  })
+
+  const effectiveWidth = width || containerWidth || 1000
+  const effectiveHeight = height || containerHeight || 600
+
+  // Set CircuitJSON from props
+  useEffect(() => {
+    setIsLoading(true)
+    setError(null)
+    setCircuitJson(inputCircuitJson)
+    setIsLoading(false)
+  }, [inputCircuitJson])
+
+  // Find simulation experiment ID from circuit JSON
+  const simulationExperimentId = useMemo(() => {
+    if (!circuitJson) return null
+    const simulationElement = circuitJson.find(
+      (el) => el.type === "simulation_experiment",
+    )
+    return simulationElement?.simulation_experiment_id || null
+  }, [circuitJson])
+
+  // Find simulation graph IDs from circuit JSON
+  const simulationGraphIds = useMemo(() => {
+    if (!circuitJson) return []
+    return circuitJson
+      .filter((el) => el.type === "simulation_transient_voltage_graph")
+      .map((el) => el.simulation_transient_voltage_graph_id)
+  }, [circuitJson])
+
+  // Generate SVG from CircuitJSON
+  const simulationSvg = useMemo(() => {
+    if (
+      !circuitJson ||
+      !effectiveWidth ||
+      !effectiveHeight ||
+      !simulationExperimentId
+    )
+      return ""
+
+    try {
+      return convertCircuitJsonToSchematicSimulationSvg({
+        circuitJson,
+        simulation_experiment_id: simulationExperimentId,
+        simulation_transient_voltage_graph_ids: simulationGraphIds,
+        width: effectiveWidth,
+        height: effectiveHeight,
+        schematicOptions: { colorOverrides },
+      })
+    } catch (fallbackErr) {
+      console.error("Failed to generate fallback schematic SVG:", fallbackErr)
+      return ""
+    }
+  }, [
+    circuitJson,
+    effectiveWidth,
+    effectiveHeight,
+    colorOverrides,
+    simulationExperimentId,
+    simulationGraphIds,
+  ])
+
+  // Create/revoke object URL whenever the SVG changes
+  useEffect(() => {
+    if (!simulationSvg) {
+      setSvgObjectUrl(null)
+      return
+    }
+
+    try {
+      const blob = new Blob([simulationSvg], { type: "image/svg+xml" })
+      const url = URL.createObjectURL(blob)
+      setSvgObjectUrl(url)
+      return () => {
+        URL.revokeObjectURL(url)
+      }
+    } catch (error) {
+      console.error("Failed to create SVG object URL:", error)
+      setSvgObjectUrl(null)
+    }
+  }, [simulationSvg])
+
+  const containerBackgroundColor = useMemo(() => {
+    if (!simulationSvg) return "transparent"
+    const match = simulationSvg.match(
+      /<svg[^>]*style="[^"]*background-color:\s*([^;\"]+)/i,
+    )
+    return match?.[1] ?? "transparent"
+  }, [simulationSvg])
+
+  const handleMouseDown = (_e: React.MouseEvent) => {
+    setIsDragging(true)
+  }
+
+  const handleTouchStart = (_e: React.TouchEvent) => {
+    setIsDragging(true)
+  }
+
+  useEffect(() => {
+    const handleMouseUp = () => {
+      setIsDragging(false)
+    }
+
+    const handleTouchEnd = () => {
+      setIsDragging(false)
+    }
+
+    window.addEventListener("mouseup", handleMouseUp)
+    window.addEventListener("touchend", handleTouchEnd)
+
+    return () => {
+      window.removeEventListener("mouseup", handleMouseUp)
+      window.removeEventListener("touchend", handleTouchEnd)
+    }
+  }, [])
+
+  if (isLoading) {
+    return (
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "#f5f5f5",
+          minHeight: "300px",
+          fontFamily: "sans-serif",
+          fontSize: "16px",
+          color: "#666",
+          ...containerStyle,
+        }}
+        className={className}
+      >
+        Loading circuit...
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "#fef2f2",
+          minHeight: "300px",
+          fontFamily: "sans-serif",
+          fontSize: "16px",
+          color: "#dc2626",
+          ...containerStyle,
+        }}
+        className={className}
+      >
+        <div style={{ textAlign: "center", padding: "20px" }}>
+          <div style={{ fontWeight: "bold", marginBottom: "8px" }}>
+            Circuit Conversion Error
+          </div>
+          <div style={{ fontSize: "14px" }}>{error}</div>
+        </div>
+      </div>
+    )
+  }
+
+  if (!simulationSvg) {
+    return (
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "#f8fafc",
+          minHeight: "300px",
+          fontFamily: "sans-serif",
+          gap: "12px",
+          ...containerStyle,
+        }}
+        className={className}
+      >
+        <div style={{ fontSize: "16px", color: "#475569", fontWeight: 500 }}>
+          No Simulation Found
+        </div>
+        <div style={{ fontSize: "14px", color: "#64748b" }}>
+          Use{" "}
+          <code
+            style={{
+              backgroundColor: "#e2e8f0",
+              padding: "2px 6px",
+              borderRadius: "4px",
+              fontFamily: "monospace",
+              fontSize: "13px",
+            }}
+          >
+            {"<analogsimulation />"}
+          </code>{" "}
+          to create simulations
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div
+      ref={(node) => {
+        containerRef.current = node
+        transformRef.current = node
+      }}
+      style={{
+        position: "relative",
+        backgroundColor: containerBackgroundColor,
+        overflow: "hidden",
+        minHeight: "300px",
+        cursor: isDragging ? "grabbing" : "grab",
+        ...containerStyle,
+      }}
+      className={className}
+      onMouseDown={handleMouseDown}
+      onTouchStart={handleTouchStart}
+    >
+      {svgObjectUrl ? (
+        <img
+          ref={imgRef}
+          src={svgObjectUrl}
+          alt="Circuit Simulation"
+          style={{
+            transformOrigin: "0 0",
+            width: "100%",
+            height: "100%",
+            display: "block",
+            objectFit: "contain",
+          }}
+        />
+      ) : (
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            height: "100%",
+            minHeight: "300px",
+            color: "#666",
+            fontFamily: "sans-serif",
+          }}
+        >
+          Failed to render SVG
+        </div>
+      )}
+    </div>
+  )
+}

package/lib/components/SpicePlot.tsx

@@ -172,7 +172,7 @@ export const SpicePlot = ({
           title: (tooltipItems) => {
             if (tooltipItems.length > 0) {
               const item = tooltipItems[0]
-              return formatTimeWithUnits(item.parsed.x)
+              return formatTimeWithUnits(item.parsed.x as number)
             }
             return ""
           },

package/lib/components/ViewMenu.tsx

@@ -36,7 +36,7 @@ export const ViewMenu = ({
         const componentTypes = new Set()
         for (const comp of schematicComponents) {
           const sourceComp = su(circuitJson).source_component.get(
-            comp.source_component_id,
+            comp.source_component_id!,
           )
           if (sourceComp?.ftype) {
             componentTypes.add(sourceComp.ftype)

package/lib/hooks/useChangeSchematicTracesForMovedComponents.ts

@@ -57,7 +57,7 @@ export const useChangeSchematicTracesForMovedComponents = ({
           const src_traces = su(circuitJson)
             .source_trace.list()
             .filter((st) =>
-              st.connected_source_port_ids?.some((spi) =>
+              st.connected_source_port_ids?.some((spi: string) =>
                 src_port_ids.has(spi),
               ),
             )
@@ -66,7 +66,7 @@ export const useChangeSchematicTracesForMovedComponents = ({
           )
           const schematic_traces = su(circuitJson)
             .schematic_trace.list()
-            .filter((st) => src_trace_ids.has(st.source_trace_id))
+            .filter((st) => src_trace_ids.has(st.source_trace_id!))
 
           // Make the connected traces dashed
           schematic_traces.forEach((trace) => {

package/lib/hooks/useSchematicGroupsOverlay.ts

@@ -122,7 +122,7 @@ export const useSchematicGroupsOverlay = (
 
           for (const comp of schematicComponents) {
             const sourceComp = su(circuitJson).source_component.get(
-              comp.source_component_id,
+              comp.source_component_id!,
             )
             if (sourceComp?.source_group_id) {
               if (!groupMap.has(sourceComp.source_group_id)) {

package/lib/index.ts

@@ -1,3 +1,4 @@
 export { SchematicViewer } from "./components/SchematicViewer"
 export { MouseTracker } from "./components/MouseTracker"
 export { useMouseEventsOverBoundingBox } from "./hooks/useMouseEventsOverBoundingBox"
+export { AnalogSimulationViewer } from "./components/AnalogSimulationViewer"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/schematic-viewer",
-  "version": "2.0.49",
+  "version": "2.0.51",
   "main": "dist/index.js",
   "type": "module",
   "scripts": {
@@ -27,7 +27,7 @@
     "react-dom": "^19.1.0",
     "react-reconciler": "^0.31.0",
     "semver": "^7.7.2",
-    "tscircuit": "^0.0.611",
+    "tscircuit": "^0.0.1037",
     "tsup": "^8.3.5",
     "vite": "^6.0.3"
   },
@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "chart.js": "^4.5.0",
-    "circuit-json-to-spice": "^0.0.10",
+    "circuit-json-to-spice": "^0.0.30",
     "debug": "^4.4.0",
     "performance-now": "^2.1.0",
     "react-chartjs-2": "^5.3.0",