@tscircuit/schematic-viewer 2.0.55 → 2.0.57

package/examples/example12-spice-boost-converter.fixture.tsx

@@ -1,78 +0,0 @@
-import { renderToCircuitJson } from "lib/dev/render-to-circuit-json"
-import { SchematicViewer } from "lib/index"
-import type { CircuitJson } from "circuit-json"
-import { sel } from "tscircuit"
-
-const circuit = (
-  <board width={30} height={30}>
-    <voltagesource
-      name="V1"
-      voltage={"5V"}
-      schY={2}
-      schX={-5}
-      schRotation={270}
-    />
-    <trace from={".V1 > .pin1"} to={".L1 > .pin1"} />
-    <trace from={".L1 > .pin2"} to={".D1 > .anode"} />
-    <trace from={".D1 > .cathode"} to={".C1 > .pin1"} />
-    <trace from={".D1 > .cathode"} to={".R1 > .pin1"} />
-    <trace from={".C1 > .pin2"} to={".R1 > .pin2"} />
-    <trace from={".R1 > .pin2"} to={".V1 > .pin2"} />
-    <trace from={".L1 > .pin2"} to={".M1 > .drain"} />
-    <trace from={".M1 > .source"} to={".V1 > .pin2"} />
-    <trace from={".M1 > .source"} to={"net.GND"} />
-    <trace from={".M1 > .gate"} to={".V2 > .pin1"} />
-    <trace from={".V2 > .pin2"} to={".V1 > .pin2"} />
-    <inductor name="L1" inductance={"1H"} schY={3} pcbY={3} />
-    <diode name="D1" footprint={"0603"} schY={3} schX={3} pcbY={6} pcbX={3} />
-    <capacitor
-      polarized
-      schRotation={270}
-      name="C1"
-      capacitance={"10uF"}
-      footprint={"0603"}
-      schX={3}
-      pcbX={3}
-    />
-    <resistor
-      schRotation={270}
-      name="R1"
-      resistance={"1k"}
-      footprint={"0603"}
-      schX={6}
-      pcbX={9}
-    />
-    <voltagesource
-      name="V2"
-      schRotation={270}
-      voltage={"10V"}
-      waveShape="square"
-      dutyCycle={0.68}
-      frequency={"1kHz"}
-      schX={-3}
-    />
-    <mosfet
-      channelType="n"
-      footprint={"sot23"}
-      name="M1"
-      mosfetMode="enhancement"
-      pcbX={-4}
-    />
-  </board>
-)
-
-export default () => {
-  const circuitJson = renderToCircuitJson(circuit) as CircuitJson
-
-  return (
-    <div style={{ position: "relative", height: "100%" }}>
-      <SchematicViewer
-        circuitJson={circuitJson}
-        containerStyle={{ height: "100%" }}
-        debugGrid
-        editingEnabled
-        spiceSimulationEnabled
-      />
-    </div>
-  )
-}

package/examples/example13-disablegroups.fixture.tsx

@@ -1,30 +0,0 @@
-import { SchematicViewer } from "lib/components/SchematicViewer"
-import { renderToCircuitJson } from "lib/dev/render-to-circuit-json"
-
-const circuitJson = renderToCircuitJson(
-  <board>
-    <group name="Alpha Node">
-      <resistor resistance="1k" footprint="0402" name="R1" schX={3} />
-      <capacitor capacitance="1000pF" footprint="0402" name="C1" schX={-3} />
-      <trace from=".R1 > .pin1" to=".C1 > .pin1" />
-    </group>
-  </board>,
-)
-
-export default () => {
-  return (
-    <div style={{ position: "relative", height: "100%" }}>
-      <SchematicViewer
-        circuitJson={circuitJson}
-        containerStyle={{
-          width: "100vw",
-          height: "100vh",
-          backgroundColor: "#f8f9fa",
-        }}
-        debugGrid={false}
-        editingEnabled={false}
-        disableGroups
-      />
-    </div>
-  )
-}

package/examples/example14-schematic-component-click.fixture.tsx

@@ -1,46 +0,0 @@
-import { useState } from "react"
-import { ControlledSchematicViewer } from "lib/components/ControlledSchematicViewer"
-import { renderToCircuitJson } from "lib/dev/render-to-circuit-json"
-
-const circuitJson = renderToCircuitJson(
-  <board width="12mm" height="12mm">
-    <resistor name="R1" resistance={1000} schX={-2} schY={0} />
-    <capacitor name="C1" capacitance="1uF" schX={2} schY={0} />
-    <trace from=".R1 .pin2" to=".C1 .pin1" />
-    <trace from=".R1 .pin1" to=".C1 .pin2" />
-  </board>,
-)
-
-export default function Example() {
-  const [clickedComponentId, setClickedComponentId] = useState<string | null>(
-    null,
-  )
-
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        gap: "12px",
-        padding: "16px",
-        height: "100%",
-        boxSizing: "border-box",
-      }}
-    >
-      <div style={{ fontFamily: "sans-serif" }}>
-        {clickedComponentId
-          ? `Last clicked component: ${clickedComponentId}`
-          : "Click a component to highlight it"}
-      </div>
-      <div style={{ flex: 1, minHeight: 320 }}>
-        <ControlledSchematicViewer
-          circuitJson={circuitJson}
-          containerStyle={{ height: "100%" }}
-          onSchematicComponentClicked={({ schematicComponentId }) => {
-            setClickedComponentId(schematicComponentId)
-          }}
-        />
-      </div>
-    </div>
-  )
-}

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

@@ -1,145 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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/examples/example17-schematic-ports.fixture.tsx

@@ -1,49 +0,0 @@
-import { SchematicViewer } from "lib/components/SchematicViewer"
-import { renderToCircuitJson } from "lib/dev/render-to-circuit-json"
-
-const 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>,
-)
-
-export default () => (
-  <SchematicViewer
-    circuitJson={circuitJson}
-    containerStyle={{ height: "100%" }}
-    showSchematicPorts
-    onSchematicPortClicked={({ schematicPortId }) => {
-      console.log("Port clicked:", schematicPortId)
-    }}
-  />
-)

package/examples/example2-small-circuit.fixture.tsx

@@ -1,48 +0,0 @@
-import { ControlledSchematicViewer } from "lib/components/ControlledSchematicViewer"
-import { renderToCircuitJson } from "lib/dev/render-to-circuit-json"
-
-const 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>,
-)
-
-export default () => (
-  <ControlledSchematicViewer
-    circuitJson={circuitJson}
-    editingEnabled
-    containerStyle={{ height: "100%" }}
-    debugGrid
-    debug
-  />
-)

package/examples/example3-small-circuit-without-debug-grid.fixture.tsx

@@ -1,44 +0,0 @@
-import { ControlledSchematicViewer } from "lib/components/ControlledSchematicViewer"
-import { renderToCircuitJson } from "lib/dev/render-to-circuit-json"
-
-export default () => (
-  <ControlledSchematicViewer
-    circuitJson={renderToCircuitJson(
-      <board width="10mm" height="10mm">
-        <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>,
-    )}
-    editingEnabled
-    containerStyle={{ height: "100%" }}
-  />
-)

package/examples/example4-reset-edit-events.fixture.tsx

@@ -1,57 +0,0 @@
-import { useState } from "react"
-import { ControlledSchematicViewer } from "lib/components/ControlledSchematicViewer"
-import { renderToCircuitJson } from "lib/dev/render-to-circuit-json"
-import type { ManualEditEvent } from "lib/types/edit-events"
-import { SchematicViewer } from "lib/index"
-
-export default () => {
-  const [editEvents, setEditEvents] = useState<ManualEditEvent[]>([])
-
-  return (
-    <div style={{ position: "relative", height: "100%" }}>
-      <button
-        type="button"
-        onClick={() => setEditEvents([])}
-        style={{
-          position: "absolute",
-          top: "16px",
-          right: "64px",
-          zIndex: 1001,
-          backgroundColor: "#f44336",
-          color: "#fff",
-          padding: "8px",
-          borderRadius: "4px",
-          cursor: "pointer",
-          border: "none",
-          boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
-        }}
-      >
-        Reset Edits
-      </button>
-      <SchematicViewer
-        editEvents={editEvents}
-        onEditEvent={(event) => setEditEvents([...editEvents, event])}
-        circuitJson={
-          renderToCircuitJson(
-            <board width="10mm" height="10mm">
-              <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}
-              />
-              <trace from=".R1 .pin2" to=".C1 .pin1" />
-              <trace from=".C1 .pin2" to=".C2 .pin1" />
-            </board>,
-          ) as any
-        }
-        containerStyle={{ height: "100%" }}
-        debugGrid
-        editingEnabled
-      />
-    </div>
-  )
-}

package/examples/example5-circuit-json-rerender.fixture.tsx

@@ -1,110 +0,0 @@
-import { useCallback, useEffect, useState } from "react"
-import { ControlledSchematicViewer } from "lib/components/ControlledSchematicViewer"
-import { renderToCircuitJson } from "lib/dev/render-to-circuit-json"
-import type { ManualEditEvent } from "lib/types/edit-events"
-import { SchematicViewer } from "lib/index"
-import type { CircuitJson } from "circuit-json"
-
-export default () => {
-  const [editEvents, setEditEvents] = useState<ManualEditEvent[]>([])
-  const [circuitJson, setCircuitJson] = useState<CircuitJson | null>(null)
-
-  const rerenderCircuitJson = useCallback(() => {
-    setCircuitJson(
-      renderToCircuitJson(
-        <board width="10mm" height="10mm">
-          <resistor name="R1" resistance={1000} schX={Math.random() * 8 - 4} />
-          <capacitor
-            name="C1"
-            capacitance="1uF"
-            schX={Math.random() * 8 - 4}
-            schY={Math.random() * 8 - 4}
-          />
-          <capacitor
-            name="C2"
-            schRotation={90}
-            capacitance="1uF"
-            schX={Math.random() * 8 - 4}
-            schY={Math.random() * 8 - 4}
-          />
-          <trace from=".R1 .pin2" to=".C1 .pin1" />
-          <trace from=".C1 .pin2" to=".C2 .pin1" />
-        </board>,
-      ) as any,
-    )
-  }, [])
-
-  useEffect(() => {
-    rerenderCircuitJson()
-  }, [])
-
-  return (
-    <div style={{ position: "relative", height: "100%" }}>
-      <button
-        type="button"
-        onClick={rerenderCircuitJson}
-        style={{
-          position: "absolute",
-          top: "16px",
-          right: "64px",
-          zIndex: 1001,
-          backgroundColor: "#f44336",
-          color: "#fff",
-          padding: "8px",
-          borderRadius: "4px",
-          cursor: "pointer",
-          border: "none",
-          boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
-        }}
-      >
-        Rerender Circuit JSON
-      </button>
-      <button
-        type="button"
-        onClick={() => setEditEvents([])}
-        style={{
-          position: "absolute",
-          top: "16px",
-          right: "220px",
-          zIndex: 1001,
-          backgroundColor: "#2196f3",
-          color: "#fff",
-          padding: "8px",
-          borderRadius: "4px",
-          cursor: "pointer",
-          border: "none",
-          boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
-        }}
-      >
-        Reset Edits
-      </button>
-      <pre
-        style={{
-          position: "absolute",
-          top: "64px",
-          right: "64px",
-          zIndex: 1001,
-          backgroundColor: "#fff",
-          padding: "12px",
-          borderRadius: "4px",
-          border: "1px solid #ccc",
-          boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
-          maxHeight: "300px",
-          overflowY: "auto",
-          fontSize: "12px",
-          fontFamily: "monospace",
-        }}
-      >
-        {JSON.stringify(editEvents, null, 2)}
-      </pre>
-      <SchematicViewer
-        editEvents={editEvents}
-        onEditEvent={(event) => setEditEvents([...editEvents, event])}
-        circuitJson={circuitJson ?? []}
-        containerStyle={{ height: "100%" }}
-        debugGrid
-        editingEnabled
-      />
-    </div>
-  )
-}

package/examples/example6-click-to-interact.fixture.tsx

@@ -1,36 +0,0 @@
-import { ControlledSchematicViewer } from "lib/components/ControlledSchematicViewer"
-import { renderToCircuitJson } from "lib/dev/render-to-circuit-json"
-
-export default () => (
-  <div style={{ position: "relative", height: "100%" }}>
-    <div
-      style={{
-        position: "absolute",
-        top: "16px",
-        right: "64px",
-        zIndex: 1001,
-        backgroundColor: "#fff",
-        padding: "12px",
-        borderRadius: "4px",
-        border: "1px solid #ccc",
-        boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
-        fontSize: "14px",
-        fontFamily: "sans-serif",
-      }}
-    >
-      This example demonstrates the clickToInteractEnabled feature
-    </div>
-    <ControlledSchematicViewer
-      circuitJson={renderToCircuitJson(
-        <board width="10mm" height="10mm">
-          <resistor name="R1" resistance={1000} schX={-2} />
-          <capacitor name="C1" capacitance="1uF" schX={2} />
-          <trace from=".R1 .pin2" to=".C1 .pin1" />
-        </board>,
-      )}
-      containerStyle={{ height: "100%" }}
-      debugGrid
-      clickToInteractEnabled={true}
-    />
-  </div>
-)