@tscircuit/schematic-viewer 2.0.49 → 2.0.51

package/dist/index.d.ts

@@ -4,7 +4,7 @@ import { ManualEditEvent } from '@tscircuit/props';
 import { CircuitJson } from 'circuit-json';
 import { ReactNode } from 'react';
 
-interface Props {
+interface Props$1 {
     circuitJson: CircuitJson;
     containerStyle?: React.CSSProperties;
     editEvents?: ManualEditEvent[];
@@ -22,7 +22,7 @@ interface Props {
         event: MouseEvent;
     }) => void;
 }
-declare const SchematicViewer: ({ circuitJson, containerStyle, editEvents: unappliedEditEvents, onEditEvent, defaultEditMode, debugGrid, editingEnabled, debug, clickToInteractEnabled, colorOverrides, spiceSimulationEnabled, disableGroups, onSchematicComponentClicked, }: Props) => react_jsx_runtime.JSX.Element;
+declare const SchematicViewer: ({ circuitJson, containerStyle, editEvents: unappliedEditEvents, onEditEvent, defaultEditMode, debugGrid, editingEnabled, debug, clickToInteractEnabled, colorOverrides, spiceSimulationEnabled, disableGroups, onSchematicComponentClicked, }: Props$1) => react_jsx_runtime.JSX.Element;
 
 interface BoundingBoxBounds {
     minX: number;
@@ -42,4 +42,14 @@ declare const useMouseEventsOverBoundingBox: (options: UseMouseEventsOverBoundin
     hovering: boolean;
 };
 
-export { MouseTracker, SchematicViewer, useMouseEventsOverBoundingBox };
+interface Props {
+    circuitJson: CircuitJson;
+    containerStyle?: React.CSSProperties;
+    colorOverrides?: ColorOverrides;
+    width?: number;
+    height?: number;
+    className?: string;
+}
+declare const AnalogSimulationViewer: ({ circuitJson: inputCircuitJson, containerStyle, colorOverrides, width, height, className, }: Props) => react_jsx_runtime.JSX.Element;
+
+export { AnalogSimulationViewer, MouseTracker, SchematicViewer, useMouseEventsOverBoundingBox };

package/dist/index.js

@@ -851,7 +851,7 @@ import { su as su5 } from "@tscircuit/soup-util";
 // package.json
 var package_default = {
   name: "@tscircuit/schematic-viewer",
-  version: "2.0.48",
+  version: "2.0.50",
   main: "dist/index.js",
   type: "module",
   scripts: {
@@ -878,7 +878,7 @@ var package_default = {
     "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"
   },
@@ -888,7 +888,7 @@ var package_default = {
   },
   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",
@@ -2545,7 +2545,267 @@ var SchematicViewer = ({
     )
   ] });
 };
+
+// lib/components/AnalogSimulationViewer.tsx
+import {
+  convertCircuitJsonToSchematicSimulationSvg
+} from "circuit-to-svg";
+import { useEffect as useEffect12, useState as useState7, useMemo as useMemo6, useRef as useRef8 } from "react";
+import { useMouseMatrixTransform as useMouseMatrixTransform2 } from "use-mouse-matrix-transform";
+import { toString as transformToString2 } from "transformation-matrix";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+var AnalogSimulationViewer = ({
+  circuitJson: inputCircuitJson,
+  containerStyle,
+  colorOverrides,
+  width,
+  height,
+  className
+}) => {
+  const [circuitJson, setCircuitJson] = useState7(null);
+  const [isLoading, setIsLoading] = useState7(true);
+  const [error, setError] = useState7(null);
+  const [svgObjectUrl, setSvgObjectUrl] = useState7(null);
+  const containerRef = useRef8(null);
+  const imgRef = useRef8(null);
+  const { containerWidth, containerHeight } = useResizeHandling(
+    containerRef
+  );
+  const [isDragging, setIsDragging] = useState7(false);
+  const {
+    ref: transformRef,
+    cancelDrag: _cancelDrag,
+    transform: _svgToScreenProjection
+  } = useMouseMatrixTransform2({
+    onSetTransform(transform) {
+      if (imgRef.current) {
+        imgRef.current.style.transform = transformToString2(transform);
+      }
+    }
+  });
+  const effectiveWidth = width || containerWidth || 1e3;
+  const effectiveHeight = height || containerHeight || 600;
+  useEffect12(() => {
+    setIsLoading(true);
+    setError(null);
+    setCircuitJson(inputCircuitJson);
+    setIsLoading(false);
+  }, [inputCircuitJson]);
+  const simulationExperimentId = useMemo6(() => {
+    if (!circuitJson) return null;
+    const simulationElement = circuitJson.find(
+      (el) => el.type === "simulation_experiment"
+    );
+    return simulationElement?.simulation_experiment_id || null;
+  }, [circuitJson]);
+  const simulationGraphIds = useMemo6(() => {
+    if (!circuitJson) return [];
+    return circuitJson.filter((el) => el.type === "simulation_transient_voltage_graph").map((el) => el.simulation_transient_voltage_graph_id);
+  }, [circuitJson]);
+  const simulationSvg = useMemo6(() => {
+    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
+  ]);
+  useEffect12(() => {
+    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 (error2) {
+      console.error("Failed to create SVG object URL:", error2);
+      setSvgObjectUrl(null);
+    }
+  }, [simulationSvg]);
+  const containerBackgroundColor = useMemo6(() => {
+    if (!simulationSvg) return "transparent";
+    const match = simulationSvg.match(
+      /<svg[^>]*style="[^"]*background-color:\s*([^;\"]+)/i
+    );
+    return match?.[1] ?? "transparent";
+  }, [simulationSvg]);
+  const handleMouseDown = (_e) => {
+    setIsDragging(true);
+  };
+  const handleTouchStart = (_e) => {
+    setIsDragging(true);
+  };
+  useEffect12(() => {
+    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 /* @__PURE__ */ jsx12(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "#f5f5f5",
+          minHeight: "300px",
+          fontFamily: "sans-serif",
+          fontSize: "16px",
+          color: "#666",
+          ...containerStyle
+        },
+        className,
+        children: "Loading circuit..."
+      }
+    );
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx12(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "#fef2f2",
+          minHeight: "300px",
+          fontFamily: "sans-serif",
+          fontSize: "16px",
+          color: "#dc2626",
+          ...containerStyle
+        },
+        className,
+        children: /* @__PURE__ */ jsxs7("div", { style: { textAlign: "center", padding: "20px" }, children: [
+          /* @__PURE__ */ jsx12("div", { style: { fontWeight: "bold", marginBottom: "8px" }, children: "Circuit Conversion Error" }),
+          /* @__PURE__ */ jsx12("div", { style: { fontSize: "14px" }, children: error })
+        ] })
+      }
+    );
+  }
+  if (!simulationSvg) {
+    return /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "#f8fafc",
+          minHeight: "300px",
+          fontFamily: "sans-serif",
+          gap: "12px",
+          ...containerStyle
+        },
+        className,
+        children: [
+          /* @__PURE__ */ jsx12("div", { style: { fontSize: "16px", color: "#475569", fontWeight: 500 }, children: "No Simulation Found" }),
+          /* @__PURE__ */ jsxs7("div", { style: { fontSize: "14px", color: "#64748b" }, children: [
+            "Use",
+            " ",
+            /* @__PURE__ */ jsx12(
+              "code",
+              {
+                style: {
+                  backgroundColor: "#e2e8f0",
+                  padding: "2px 6px",
+                  borderRadius: "4px",
+                  fontFamily: "monospace",
+                  fontSize: "13px"
+                },
+                children: "<analogsimulation />"
+              }
+            ),
+            " ",
+            "to create simulations"
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx12(
+    "div",
+    {
+      ref: (node) => {
+        containerRef.current = node;
+        transformRef.current = node;
+      },
+      style: {
+        position: "relative",
+        backgroundColor: containerBackgroundColor,
+        overflow: "hidden",
+        minHeight: "300px",
+        cursor: isDragging ? "grabbing" : "grab",
+        ...containerStyle
+      },
+      className,
+      onMouseDown: handleMouseDown,
+      onTouchStart: handleTouchStart,
+      children: svgObjectUrl ? /* @__PURE__ */ jsx12(
+        "img",
+        {
+          ref: imgRef,
+          src: svgObjectUrl,
+          alt: "Circuit Simulation",
+          style: {
+            transformOrigin: "0 0",
+            width: "100%",
+            height: "100%",
+            display: "block",
+            objectFit: "contain"
+          }
+        }
+      ) : /* @__PURE__ */ jsx12(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            height: "100%",
+            minHeight: "300px",
+            color: "#666",
+            fontFamily: "sans-serif"
+          },
+          children: "Failed to render SVG"
+        }
+      )
+    }
+  );
+};
 export {
+  AnalogSimulationViewer,
   MouseTracker,
   SchematicViewer,
   useMouseEventsOverBoundingBox