@tscircuit/schematic-viewer 2.0.55 → 2.0.57

package/examples/example7-schematic-viewer-fix-snapping.fixture.tsx

@@ -1,123 +0,0 @@
-import { applyEditEventsToManualEditsFile } from "@tscircuit/core"
-import type { CircuitJson } from "circuit-json"
-import { renderToCircuitJson } from "lib/dev/render-to-circuit-json"
-import { SchematicViewer } from "lib/index"
-import type { ManualEditEvent } from "lib/types/edit-events"
-import { useEffect, useState } from "react"
-import type { ManualEditsFile } from "@tscircuit/props"
-
-export default () => {
-  const [editEvents, setEditEvents] = useState<ManualEditEvent[]>([])
-  const [circuitJson, setCircuitJson] = useState<CircuitJson | null>(null)
-  const [manualEdits, setManualEdits] = useState<ManualEditsFile>({
-    schematic_placements: [
-      {
-        center: {
-          x: 2,
-          y: 3,
-        },
-        relative_to: "group_center",
-        selector: "C1",
-      },
-    ],
-  })
-
-  const rerenderCircuitJson = () => {
-    setCircuitJson(
-      renderToCircuitJson(
-        <board width="10mm" height="10mm" manualEdits={manualEdits}>
-          <resistor name="R1" resistance={1000} />
-          <capacitor name="C1" capacitance="1uF" />
-          <trace from=".R1 .pin2" to=".C1 .pin1" />
-        </board>,
-      ) as any,
-    )
-  }
-
-  useEffect(() => {
-    rerenderCircuitJson()
-  }, [])
-
-  useEffect(() => {
-    // Apply edit events to manual edits for persistence between renders
-    const updatedManualEdits = applyEditEventsToManualEditsFile({
-      circuitJson: circuitJson ?? ([] as any),
-      editEvents,
-      manualEditsFile: manualEdits,
-    })
-    setManualEdits(updatedManualEdits)
-  }, [editEvents, circuitJson])
-
-  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
-        onEditEvent={(event) => {
-          setEditEvents((prev) => [...prev, event])
-        }}
-        circuitJson={circuitJson ?? []}
-        containerStyle={{ height: "100%" }}
-        debugGrid
-        editingEnabled
-      />
-    </div>
-  )
-}

package/examples/example8-color-overrides.fixture.tsx

@@ -1,52 +0,0 @@
-import { SchematicViewer } from "lib/components/SchematicViewer"
-import { renderToCircuitJson } from "lib/dev/render-to-circuit-json"
-
-export default () => (
-  <SchematicViewer
-    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%" }}
-    debugGrid
-    debug
-    colorOverrides={{
-      schematic: {
-        background: "transparent",
-        component_body: "#FFFFFF",
-      },
-    }}
-  />
-)

package/examples/example9-spice-rc-charging-voltage-divider.fixture.tsx

@@ -1,77 +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={16} height={16}>
-    <chip
-      name="V1"
-      footprint="sot23"
-      pinLabels={{
-        pin1: "VOUT",
-        pin2: "GND",
-      }}
-      pinAttributes={{
-        VOUT: { providesPower: true, providesVoltage: 5 },
-        GND: { providesGround: true },
-      }}
-      connections={{
-        pin3: "net.NC",
-      }}
-    />
-
-    <resistor
-      name="R1"
-      resistance="1k"
-      footprint="0402"
-      pcbX={4}
-      pcbY={4}
-      schX={-2}
-      schY={2}
-    />
-    <resistor
-      name="R2"
-      resistance="2k"
-      footprint="0402"
-      pcbX={-4}
-      pcbY={-4}
-      schX={0}
-      schY={4}
-    />
-    <capacitor
-      name="C1"
-      capacitance="10uF"
-      footprint="0402"
-      pcbX={0}
-      pcbY={-2}
-      schX={0}
-      schY={2}
-    />
-
-    <trace from={"net.VOUT"} to={sel.R1.pin1} />
-    <trace from={".V1 > .VOUT"} to={"net.VOUT"} />
-    <trace from={sel.R1.pin2} to={sel.R2.pin1} />
-    <trace from={sel.R2.pin2} to={"net.GND"} />
-    <trace from={"net.GND"} to={".V1 > .GND"} />
-
-    <trace from={sel.C1.pin1} to={sel.R1.pin2} />
-    <trace from={sel.C1.pin2} to={"net.GND"} />
-  </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/index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>@tscircuit/schematic-viewer</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

package/lib/components/AnalogSimulationViewer.tsx

@@ -1,300 +0,0 @@
-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/ControlledSchematicViewer.tsx

@@ -1,40 +0,0 @@
-import { useState } from "react"
-import { SchematicViewer } from "./SchematicViewer"
-import type { ManualEditEvent } from "@tscircuit/props"
-
-export const ControlledSchematicViewer = ({
-  circuitJson,
-  containerStyle,
-  debugGrid = false,
-  editingEnabled = false,
-  debug = false,
-  clickToInteractEnabled = false,
-  onSchematicComponentClicked,
-}: {
-  circuitJson: any[]
-  containerStyle?: React.CSSProperties
-  debugGrid?: boolean
-  editingEnabled?: boolean
-  debug?: boolean
-  clickToInteractEnabled?: boolean
-  onSchematicComponentClicked?: (options: {
-    schematicComponentId: string
-    event: MouseEvent
-  }) => void
-}) => {
-  const [editEvents, setEditEvents] = useState<ManualEditEvent[]>([])
-
-  return (
-    <SchematicViewer
-      circuitJson={circuitJson}
-      editEvents={editEvents}
-      onEditEvent={(event) => setEditEvents([...editEvents, event])}
-      containerStyle={containerStyle}
-      debugGrid={debugGrid}
-      editingEnabled={editingEnabled}
-      debug={debug}
-      clickToInteractEnabled={clickToInteractEnabled}
-      onSchematicComponentClicked={onSchematicComponentClicked}
-    />
-  )
-}

package/lib/components/EditIcon.tsx

@@ -1,46 +0,0 @@
-import { zIndexMap } from "../utils/z-index-map"
-
-export const EditIcon = ({
-  onClick,
-  active,
-}: { onClick: () => void; active: boolean }) => {
-  const handleInteraction = (e: React.MouseEvent | React.TouchEvent) => {
-    e.preventDefault()
-    onClick()
-  }
-
-  return (
-    <div
-      onClick={handleInteraction}
-      onTouchEnd={handleInteraction}
-      title={active ? "Disable edit mode" : "Enable edit mode"}
-      style={{
-        position: "absolute",
-        top: "16px",
-        right: "64px",
-        backgroundColor: active ? "#4CAF50" : "#fff",
-        color: active ? "#fff" : "#000",
-        padding: "8px",
-        borderRadius: "4px",
-        cursor: "pointer",
-        boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
-        display: "flex",
-        alignItems: "center",
-        gap: "4px",
-        zIndex: zIndexMap.schematicEditIcon,
-      }}
-    >
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-      >
-        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
-        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
-      </svg>
-    </div>
-  )
-}

package/lib/components/GridIcon.tsx

@@ -1,45 +0,0 @@
-import { zIndexMap } from "../utils/z-index-map"
-
-export const GridIcon = ({
-  onClick,
-  active,
-}: { onClick: () => void; active: boolean }) => {
-  const handleInteraction = (e: React.MouseEvent | React.TouchEvent) => {
-    e.preventDefault()
-    onClick()
-  }
-
-  return (
-    <div
-      onClick={handleInteraction}
-      onTouchEnd={handleInteraction}
-      title={active ? "Hide grid" : "Show grid"}
-      style={{
-        position: "absolute",
-        top: "56px",
-        right: "64px",
-        backgroundColor: active ? "#4CAF50" : "#fff",
-        color: active ? "#fff" : "#000",
-        padding: "8px",
-        borderRadius: "4px",
-        cursor: "pointer",
-        boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
-        display: "flex",
-        alignItems: "center",
-        gap: "4px",
-        zIndex: zIndexMap.schematicGridIcon,
-      }}
-    >
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-      >
-        <path d="M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z" />
-      </svg>
-    </div>
-  )
-}