@tscircuit/schematic-viewer 2.0.29 → 2.0.31

package/dist/index.js

@@ -457,7 +457,7 @@ var enableDebug = () => {
 var debug_default = debug;
 
 // lib/components/SchematicViewer.tsx
-import { useEffect as useEffect7, useMemo as useMemo2, useRef as useRef4, useState as useState4 } from "react";
+import { useEffect as useEffect8, useMemo as useMemo3, useRef as useRef4, useState as useState5 } from "react";
 import {
   fromString,
   identity,
@@ -962,6 +962,7 @@ var SpiceSimulationIcon = ({
 };
 
 // lib/components/SpicePlot.tsx
+import { useMemo as useMemo2 } from "react";
 import {
   Chart as ChartJS,
   CategoryScale,
@@ -1013,6 +1014,14 @@ var SpicePlot = ({
   isLoading,
   error
 }) => {
+  const yAxisLabel = useMemo2(() => {
+    const hasVoltage = nodes.some((n) => n.toLowerCase().startsWith("v("));
+    const hasCurrent = nodes.some((n) => n.toLowerCase().startsWith("i("));
+    if (hasVoltage && hasCurrent) return "Value";
+    if (hasVoltage) return "Voltage (V)";
+    if (hasCurrent) return "Current (A)";
+    return "Value";
+  }, [nodes]);
   if (isLoading) {
     return /* @__PURE__ */ jsx7(
       "div",
@@ -1122,7 +1131,7 @@ var SpicePlot = ({
       y: {
         title: {
           display: true,
-          text: "Voltage",
+          text: yAxisLabel,
           font: {
             family: "sans-serif"
           }
@@ -1139,6 +1148,7 @@ var SpicePlot = ({
 };
 
 // lib/components/SpiceSimulationOverlay.tsx
+import { useEffect as useEffect6, useState as useState3 } from "react";
 import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var SpiceSimulationOverlay = ({
   spiceString,
@@ -1146,8 +1156,34 @@ var SpiceSimulationOverlay = ({
   plotData,
   nodes,
   isLoading,
-  error
+  error,
+  simOptions,
+  onSimOptionsChange
 }) => {
+  const [startTimeDraft, setStartTimeDraft] = useState3(
+    String(simOptions.startTime)
+  );
+  const [durationDraft, setDurationDraft] = useState3(
+    String(simOptions.duration)
+  );
+  useEffect6(() => {
+    setStartTimeDraft(String(simOptions.startTime));
+    setDurationDraft(String(simOptions.duration));
+  }, [simOptions.startTime, simOptions.duration]);
+  const handleRerun = () => {
+    onSimOptionsChange({
+      ...simOptions,
+      startTime: Number(startTimeDraft),
+      duration: Number(durationDraft)
+    });
+  };
+  const filteredNodes = nodes.filter((node) => {
+    const isVoltage = node.toLowerCase().startsWith("v(");
+    const isCurrent = node.toLowerCase().startsWith("i(");
+    if (simOptions.showVoltage && isVoltage) return true;
+    if (simOptions.showCurrent && isCurrent) return true;
+    return false;
+  });
   return /* @__PURE__ */ jsx8(
     "div",
     {
@@ -1223,11 +1259,119 @@ var SpiceSimulationOverlay = ({
               SpicePlot,
               {
                 plotData,
-                nodes,
+                nodes: filteredNodes,
                 isLoading,
                 error
               }
             ) }),
+            /* @__PURE__ */ jsxs5(
+              "div",
+              {
+                style: {
+                  marginTop: "16px",
+                  padding: "12px",
+                  backgroundColor: "#f7f7f7",
+                  borderRadius: "6px",
+                  display: "flex",
+                  flexWrap: "wrap",
+                  gap: "24px",
+                  alignItems: "center",
+                  fontSize: "14px"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs5("div", { style: { display: "flex", gap: "16px" }, children: [
+                    /* @__PURE__ */ jsxs5(
+                      "label",
+                      {
+                        style: { display: "flex", alignItems: "center", gap: "6px" },
+                        children: [
+                          /* @__PURE__ */ jsx8(
+                            "input",
+                            {
+                              type: "checkbox",
+                              checked: simOptions.showVoltage,
+                              onChange: (e) => onSimOptionsChange({
+                                ...simOptions,
+                                showVoltage: e.target.checked
+                              })
+                            }
+                          ),
+                          "Voltage"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs5(
+                      "label",
+                      {
+                        style: { display: "flex", alignItems: "center", gap: "6px" },
+                        children: [
+                          /* @__PURE__ */ jsx8(
+                            "input",
+                            {
+                              type: "checkbox",
+                              checked: simOptions.showCurrent,
+                              onChange: (e) => onSimOptionsChange({
+                                ...simOptions,
+                                showCurrent: e.target.checked
+                              })
+                            }
+                          ),
+                          "Current"
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs5("div", { style: { display: "flex", gap: "16px", alignItems: "center" }, children: [
+                    /* @__PURE__ */ jsx8("label", { htmlFor: "startTime", children: "Start Time (ms):" }),
+                    /* @__PURE__ */ jsx8(
+                      "input",
+                      {
+                        id: "startTime",
+                        type: "number",
+                        value: startTimeDraft,
+                        onChange: (e) => setStartTimeDraft(e.target.value),
+                        style: {
+                          width: "80px",
+                          padding: "4px 8px",
+                          borderRadius: "4px",
+                          border: "1px solid #ccc"
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx8("label", { htmlFor: "duration", children: "Duration (ms):" }),
+                    /* @__PURE__ */ jsx8(
+                      "input",
+                      {
+                        id: "duration",
+                        type: "number",
+                        value: durationDraft,
+                        onChange: (e) => setDurationDraft(e.target.value),
+                        style: {
+                          width: "80px",
+                          padding: "4px 8px",
+                          borderRadius: "4px",
+                          border: "1px solid #ccc"
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx8(
+                      "button",
+                      {
+                        onClick: handleRerun,
+                        style: {
+                          padding: "4px 12px",
+                          borderRadius: "4px",
+                          border: "1px solid #ccc",
+                          backgroundColor: "#f0f0f0",
+                          cursor: "pointer"
+                        },
+                        children: "Rerun"
+                      }
+                    )
+                  ] })
+                ]
+              }
+            ),
             /* @__PURE__ */ jsxs5("div", { style: { marginTop: "24px" }, children: [
               /* @__PURE__ */ jsx8(
                 "h3",
@@ -1268,7 +1412,7 @@ var SpiceSimulationOverlay = ({
 };
 
 // lib/hooks/useSpiceSimulation.ts
-import { useState as useState3, useEffect as useEffect6 } from "react";
+import { useState as useState4, useEffect as useEffect7 } from "react";
 
 // lib/workers/spice-simulation.worker.blob.js
 var b64 = "dmFyIGU9bnVsbCxzPWFzeW5jKCk9Pihhd2FpdCBpbXBvcnQoImh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vZWVjaXJjdWl0LWVuZ2luZUAxLjUuMi8rZXNtIikpLlNpbXVsYXRpb24sYz1hc3luYygpPT57aWYoZSYmZS5pc0luaXRpYWxpemVkKCkpcmV0dXJuO2xldCBpPWF3YWl0IHMoKTtlPW5ldyBpLGF3YWl0IGUuc3RhcnQoKX07c2VsZi5vbm1lc3NhZ2U9YXN5bmMgaT0+e3RyeXtpZihhd2FpdCBjKCksIWUpdGhyb3cgbmV3IEVycm9yKCJTaW11bGF0aW9uIG5vdCBpbml0aWFsaXplZCIpO2xldCB0PWkuZGF0YS5zcGljZVN0cmluZyxhPXQubWF0Y2goL3dyZGF0YVxzKyhcUyspXHMrKC4qKS9pKTtpZihhKXtsZXQgbz1gLnByb2JlICR7YVsyXS50cmltKCkuc3BsaXQoL1xzKy8pLmpvaW4oIiAiKX1gO3Q9dC5yZXBsYWNlKC93cmRhdGEuKi9pLG8pfWVsc2UgaWYoIXQubWF0Y2goL1wucHJvYmUvaSkpdGhyb3cgdC5tYXRjaCgvcGxvdFxzKyguKikvaSk/bmV3IEVycm9yKCJUaGUgJ3Bsb3QnIGNvbW1hbmQgaXMgbm90IHN1cHBvcnRlZCBmb3IgZGF0YSBleHRyYWN0aW9uLiBQbGVhc2UgdXNlICd3cmRhdGEgPGZpbGVuYW1lPiA8dmFyMT4gLi4uJyBvciAnLnByb2JlIDx2YXIxPiAuLi4nIGluc3RlYWQuIik6bmV3IEVycm9yKCJObyAnLnByb2JlJyBvciAnd3JkYXRhJyBjb21tYW5kIGZvdW5kIGluIFNQSUNFIGZpbGUuIFVzZSAnd3JkYXRhIDxmaWxlbmFtZT4gPHZhcjE+IC4uLicgdG8gc3BlY2lmeSBvdXRwdXQuIik7ZS5zZXROZXRMaXN0KHQpO2xldCBuPWF3YWl0IGUucnVuU2ltKCk7c2VsZi5wb3N0TWVzc2FnZSh7dHlwZToicmVzdWx0IixyZXN1bHQ6bn0pfWNhdGNoKHQpe3NlbGYucG9zdE1lc3NhZ2Uoe3R5cGU6ImVycm9yIixlcnJvcjp0Lm1lc3NhZ2V9KX19Owo=";
@@ -1308,24 +1452,22 @@ var parseEecEngineOutput = (result) => {
   }
   const timeValues = columnData[timeKey];
   const probedVariables = Object.keys(columnData).filter((k) => k !== timeKey);
-  const plotableNodes = probedVariables.map(
-    (n) => n.replace(/v\(([^)]+)\)/i, "$1")
-  );
+  const plotableNodes = probedVariables;
   const plotData = timeValues.map((t, i) => {
     const point = { name: t.toExponential(2) };
-    probedVariables.forEach((variable, j) => {
-      point[plotableNodes[j]] = columnData[variable][i];
+    probedVariables.forEach((variable) => {
+      point[variable] = columnData[variable][i];
     });
     return point;
   });
   return { plotData, nodes: plotableNodes };
 };
 var useSpiceSimulation = (spiceString) => {
-  const [plotData, setPlotData] = useState3([]);
-  const [nodes, setNodes] = useState3([]);
-  const [isLoading, setIsLoading] = useState3(true);
-  const [error, setError] = useState3(null);
-  useEffect6(() => {
+  const [plotData, setPlotData] = useState4([]);
+  const [nodes, setNodes] = useState4([]);
+  const [isLoading, setIsLoading] = useState4(true);
+  const [error, setError] = useState4(null);
+  useEffect7(() => {
     if (!spiceString) {
       setIsLoading(false);
       setPlotData([]);
@@ -1373,7 +1515,19 @@ var useSpiceSimulation = (spiceString) => {
 
 // lib/utils/spice-utils.ts
 import { circuitJsonToSpice } from "circuit-json-to-spice";
-var getSpiceFromCircuitJson = (circuitJson) => {
+var formatSimTime = (seconds) => {
+  if (seconds === 0) return "0";
+  const absSeconds = Math.abs(seconds);
+  const precision = (v) => v.toPrecision(4);
+  if (absSeconds >= 1) return precision(seconds);
+  if (absSeconds >= 1e-3) return `${precision(seconds * 1e3)}m`;
+  if (absSeconds >= 1e-6) return `${precision(seconds * 1e6)}u`;
+  if (absSeconds >= 1e-9) return `${precision(seconds * 1e9)}n`;
+  if (absSeconds >= 1e-12) return `${precision(seconds * 1e12)}p`;
+  if (absSeconds >= 1e-15) return `${precision(seconds * 1e15)}f`;
+  return seconds.toExponential(3);
+};
+var getSpiceFromCircuitJson = (circuitJson, options) => {
   const spiceNetlist = circuitJsonToSpice(circuitJson);
   const baseSpiceString = spiceNetlist.toSpiceString();
   const lines = baseSpiceString.split("\n").filter((l) => l.trim() !== "");
@@ -1382,13 +1536,18 @@ var getSpiceFromCircuitJson = (circuitJson) => {
   );
   const allNodes = /* @__PURE__ */ new Set();
   const capacitorNodes = /* @__PURE__ */ new Set();
+  const componentNamesToProbeCurrent = /* @__PURE__ */ new Set();
   for (const line of componentLines) {
     const parts = line.trim().split(/\s+/);
     if (parts.length < 3) continue;
-    const componentType = parts[0][0].toUpperCase();
+    const componentName = parts[0];
+    const componentType = componentName[0].toUpperCase();
     let nodesOnLine = [];
     if (["R", "C", "L", "V", "I", "D"].includes(componentType)) {
       nodesOnLine = parts.slice(1, 3);
+      if (componentType === "V") {
+        componentNamesToProbeCurrent.add(componentName);
+      }
     } else if (componentType === "Q" && parts.length >= 4) {
       nodesOnLine = parts.slice(1, 4);
     } else if (componentType === "M" && parts.length >= 5) {
@@ -1406,9 +1565,23 @@ var getSpiceFromCircuitJson = (circuitJson) => {
   allNodes.delete("0");
   capacitorNodes.delete("0");
   const icLines = Array.from(capacitorNodes).map((node) => `.ic V(${node})=0`);
-  const probeNodes = Array.from(allNodes).map((node) => `V(${node})`);
-  const probeLine = probeNodes.length > 0 ? `.probe ${probeNodes.join(" ")}` : "";
-  const tranLine = ".tran 0.1ms 50ms UIC";
+  const probes = [];
+  const probeVoltages = Array.from(allNodes).map((node) => `V(${node})`);
+  probes.push(...probeVoltages);
+  const probeCurrents = Array.from(componentNamesToProbeCurrent).map(
+    (name) => `I(${name})`
+  );
+  probes.push(...probeCurrents);
+  const probeLine = probes.length > 0 ? `.probe ${probes.join(" ")}` : "";
+  const tstart_ms = options?.startTime ?? 0;
+  const duration_ms = options?.duration ?? 20;
+  const tstart = tstart_ms * 1e-3;
+  const duration = duration_ms * 1e-3;
+  const tstop = tstart + duration;
+  const tstep = duration / 50;
+  const tranLine = `.tran ${formatSimTime(tstep)} ${formatSimTime(
+    tstop
+  )} ${formatSimTime(tstart)} UIC`;
   const endStatement = ".end";
   const originalLines = baseSpiceString.split("\n");
   let endIndex = -1;
@@ -1448,36 +1621,49 @@ var SchematicViewer = ({
   if (debug3) {
     enableDebug();
   }
-  const [showSpiceOverlay, setShowSpiceOverlay] = useState4(false);
+  const [showSpiceOverlay, setShowSpiceOverlay] = useState5(false);
+  const [spiceSimOptions, setSpiceSimOptions] = useState5({
+    showVoltage: true,
+    showCurrent: false,
+    startTime: 0,
+    // in ms
+    duration: 20
+    // in ms
+  });
   const getCircuitHash = (circuitJson2) => {
     return `${circuitJson2?.length || 0}_${circuitJson2?.editCount || 0}`;
   };
-  const circuitJsonKey = useMemo2(
+  const circuitJsonKey = useMemo3(
     () => getCircuitHash(circuitJson),
     [circuitJson]
   );
-  const spiceString = useMemo2(() => {
+  const spiceString = useMemo3(() => {
     if (!spiceSimulationEnabled) return null;
     try {
-      return getSpiceFromCircuitJson(circuitJson);
+      return getSpiceFromCircuitJson(circuitJson, spiceSimOptions);
     } catch (e) {
       console.error("Failed to generate SPICE string", e);
       return null;
     }
-  }, [circuitJsonKey, spiceSimulationEnabled]);
+  }, [
+    circuitJsonKey,
+    spiceSimulationEnabled,
+    spiceSimOptions.startTime,
+    spiceSimOptions.duration
+  ]);
   const {
     plotData,
     nodes,
     isLoading: isSpiceSimLoading,
     error: spiceSimError
   } = useSpiceSimulation(spiceString);
-  const [editModeEnabled, setEditModeEnabled] = useState4(defaultEditMode);
-  const [snapToGrid, setSnapToGrid] = useState4(true);
-  const [isInteractionEnabled, setIsInteractionEnabled] = useState4(
+  const [editModeEnabled, setEditModeEnabled] = useState5(defaultEditMode);
+  const [snapToGrid, setSnapToGrid] = useState5(true);
+  const [isInteractionEnabled, setIsInteractionEnabled] = useState5(
     !clickToInteractEnabled
   );
-  const [showViewMenu, setShowViewMenu] = useState4(false);
-  const [showSchematicGroups, setShowSchematicGroups] = useState4(false);
+  const [showViewMenu, setShowViewMenu] = useState5(false);
+  const [showSchematicGroups, setShowSchematicGroups] = useState5(false);
   const svgDivRef = useRef4(null);
   const touchStartRef = useRef4(null);
   const handleTouchStart = (e) => {
@@ -1499,9 +1685,9 @@ var SchematicViewer = ({
     }
     touchStartRef.current = null;
   };
-  const [internalEditEvents, setInternalEditEvents] = useState4([]);
+  const [internalEditEvents, setInternalEditEvents] = useState5([]);
   const circuitJsonRef = useRef4(circuitJson);
-  useEffect7(() => {
+  useEffect8(() => {
     const circuitHash = getCircuitHash(circuitJson);
     const circuitHashRef = getCircuitHash(circuitJsonRef.current);
     if (circuitHash !== circuitHashRef) {
@@ -1522,7 +1708,7 @@ var SchematicViewer = ({
     enabled: isInteractionEnabled && !showSpiceOverlay
   });
   const { containerWidth, containerHeight } = useResizeHandling(containerRef);
-  const svgString = useMemo2(() => {
+  const svgString = useMemo3(() => {
     if (!containerWidth || !containerHeight) return "";
     return convertCircuitJsonToSchematicSvg(circuitJson, {
       width: containerWidth,
@@ -1533,14 +1719,14 @@ var SchematicViewer = ({
       },
       colorOverrides
     });
-  }, [circuitJson, containerWidth, containerHeight]);
-  const containerBackgroundColor = useMemo2(() => {
+  }, [circuitJsonKey, containerWidth, containerHeight]);
+  const containerBackgroundColor = useMemo3(() => {
     const match = svgString.match(
       /<svg[^>]*style="[^"]*background-color:\s*([^;\"]+)/i
     );
     return match?.[1] ?? "transparent";
   }, [svgString]);
-  const realToSvgProjection = useMemo2(() => {
+  const realToSvgProjection = useMemo3(() => {
     if (!svgString) return identity();
     const transformString = svgString.match(
       /data-real-to-screen-transform="([^"]+)"/
@@ -1558,7 +1744,7 @@ var SchematicViewer = ({
       onEditEvent(event);
     }
   };
-  const editEventsWithUnappliedEditEvents = useMemo2(() => {
+  const editEventsWithUnappliedEditEvents = useMemo3(() => {
     return [...unappliedEditEvents, ...internalEditEvents];
   }, [unappliedEditEvents, internalEditEvents]);
   const { handleMouseDown, isDragging, activeEditEvent } = useComponentDragging(
@@ -1592,7 +1778,7 @@ var SchematicViewer = ({
     circuitJsonKey,
     showGroups: showSchematicGroups
   });
-  const svgDiv = useMemo2(
+  const svgDiv = useMemo3(
     () => /* @__PURE__ */ jsx9(
       "div",
       {
@@ -1724,7 +1910,9 @@ var SchematicViewer = ({
             plotData,
             nodes,
             isLoading: isSpiceSimLoading,
-            error: spiceSimError
+            error: spiceSimError,
+            simOptions: spiceSimOptions,
+            onSimOptionsChange: setSpiceSimOptions
           }
         ),
         svgDiv