@tscircuit/schematic-viewer 2.0.14 → 2.0.15

package/dist/index.d.ts

@@ -1,8 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ManualEditEvent } from '@tscircuit/props';
+import { CircuitJson } from 'circuit-json';
 
 interface Props {
-    circuitJson: any[];
+    circuitJson: CircuitJson;
     containerStyle?: React.CSSProperties;
     editEvents?: ManualEditEvent[];
     onEditEvent?: (event: ManualEditEvent) => void;
@@ -12,6 +13,6 @@ interface Props {
     debug?: boolean;
     clickToInteractEnabled?: boolean;
 }
-declare const SchematicViewer: ({ circuitJson, containerStyle, editEvents, onEditEvent, defaultEditMode, debugGrid, editingEnabled, debug, clickToInteractEnabled, }: Props) => react_jsx_runtime.JSX.Element;
+declare const SchematicViewer: ({ circuitJson, containerStyle, editEvents: unappliedEditEvents, onEditEvent, defaultEditMode, debugGrid, editingEnabled, debug, clickToInteractEnabled, }: Props) => react_jsx_runtime.JSX.Element;
 
 export { SchematicViewer };

package/dist/index.js

@@ -1,86 +1,10 @@
 // lib/components/SchematicViewer.tsx
-import { useMouseMatrixTransform } from "use-mouse-matrix-transform";
 import { convertCircuitJsonToSchematicSvg } from "circuit-to-svg";
-import { useMemo, useRef as useRef4, useState as useState3 } from "react";
 
-// lib/components/EditIcon.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var EditIcon = ({
-  onClick,
-  active
-}) => {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      onClick,
-      style: {
-        position: "absolute",
-        top: "16px",
-        right: "16px",
-        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: 1e3
-      },
-      children: /* @__PURE__ */ jsxs(
-        "svg",
-        {
-          width: "16",
-          height: "16",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          children: [
-            /* @__PURE__ */ jsx("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
-            /* @__PURE__ */ jsx("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" })
-          ]
-        }
-      )
-    }
-  );
-};
-
-// lib/hooks/use-resize-handling.ts
-import { useEffect, useState } from "react";
-var useResizeHandling = (containerRef) => {
-  const [containerWidth, setContainerWidth] = useState(0);
-  const [containerHeight, setContainerHeight] = useState(0);
-  useEffect(() => {
-    if (!containerRef.current) return;
-    const updateDimensions = () => {
-      const rect = containerRef.current?.getBoundingClientRect();
-      setContainerWidth(rect?.width || 0);
-      setContainerHeight(rect?.height || 0);
-    };
-    updateDimensions();
-    const resizeObserver = new ResizeObserver(updateDimensions);
-    resizeObserver.observe(containerRef.current);
-    window.addEventListener("resize", updateDimensions);
-    return () => {
-      resizeObserver.disconnect();
-      window.removeEventListener("resize", updateDimensions);
-    };
-  }, []);
-  return { containerWidth, containerHeight };
-};
-
-// lib/hooks/useComponentDragging.ts
-import { su } from "@tscircuit/soup-util";
-
-// lib/utils/debug.ts
-import Debug from "debug";
-var debug = Debug("schematic-viewer");
-var enableDebug = () => {
-  Debug.enable("schematic-viewer*");
-};
-var debug_default = debug;
+// lib/hooks/useChangeSchematicComponentLocationsInSvg.ts
+import "@tscircuit/soup-util";
+import "transformation-matrix";
+import { useEffect, useRef } from "react";
 
 // lib/utils/get-component-offset-due-to-events.ts
 var getComponentOffsetDueToEvents = ({
@@ -104,134 +28,7 @@ var getComponentOffsetDueToEvents = ({
   };
 };
 
-// lib/hooks/useComponentDragging.ts
-import { useCallback, useEffect as useEffect2, useRef, useState as useState2 } from "react";
-import {
-  compose
-} from "transformation-matrix";
-var debug2 = debug_default.extend("useComponentDragging");
-var useComponentDragging = ({
-  onEditEvent,
-  editEvents = [],
-  circuitJson,
-  cancelDrag,
-  svgToScreenProjection,
-  realToSvgProjection,
-  enabled = false
-}) => {
-  const [activeEditEvent, setActiveEditEvent] = useState2(null);
-  const realToScreenProjection = compose(
-    realToSvgProjection,
-    svgToScreenProjection
-  );
-  const dragStartPosRef = useRef(null);
-  const activeEditEventRef = useRef(null);
-  const handleMouseDown = useCallback(
-    (e) => {
-      if (!enabled) return;
-      const target = e.target;
-      const componentGroup = target.closest(
-        '[data-circuit-json-type="schematic_component"]'
-      );
-      if (!componentGroup) return;
-      const schematic_component_id = componentGroup.getAttribute(
-        "data-schematic-component-id"
-      );
-      if (!schematic_component_id) return;
-      if (cancelDrag) cancelDrag();
-      const schematic_component = su(circuitJson).schematic_component.get(
-        schematic_component_id
-      );
-      if (!schematic_component) return;
-      const editEventOffset = getComponentOffsetDueToEvents({
-        editEvents,
-        schematic_component_id
-      });
-      dragStartPosRef.current = {
-        x: e.clientX,
-        y: e.clientY
-      };
-      const current_position = {
-        x: schematic_component.center.x + editEventOffset.x,
-        y: schematic_component.center.y + editEventOffset.y
-      };
-      const newEditEvent = {
-        edit_event_id: Math.random().toString(36).substr(2, 9),
-        edit_event_type: "edit_schematic_component_location",
-        schematic_component_id,
-        original_center: current_position,
-        new_center: { ...current_position },
-        in_progress: true,
-        created_at: Date.now(),
-        _element: componentGroup
-      };
-      activeEditEventRef.current = newEditEvent;
-    },
-    [cancelDrag, enabled, circuitJson, editEvents]
-  );
-  const handleMouseMove = useCallback(
-    (e) => {
-      if (!activeEditEventRef.current || !dragStartPosRef.current) return;
-      const screenDelta = {
-        x: e.clientX - dragStartPosRef.current.x,
-        y: e.clientY - dragStartPosRef.current.y
-      };
-      const mmDelta = {
-        x: screenDelta.x / realToScreenProjection.a,
-        y: screenDelta.y / realToScreenProjection.d
-      };
-      const newEditEvent = {
-        ...activeEditEventRef.current,
-        new_center: {
-          x: activeEditEventRef.current.original_center.x + mmDelta.x,
-          y: activeEditEventRef.current.original_center.y + mmDelta.y
-        }
-      };
-      activeEditEventRef.current = newEditEvent;
-      setActiveEditEvent(newEditEvent);
-    },
-    [realToScreenProjection]
-  );
-  const handleMouseUp = useCallback(() => {
-    if (!activeEditEventRef.current) return;
-    const finalEvent = {
-      ...activeEditEventRef.current,
-      in_progress: false
-    };
-    debug2("handleMouseUp calling onEditEvent with new edit event", {
-      newEditEvent: finalEvent
-    });
-    if (onEditEvent) onEditEvent(finalEvent);
-    activeEditEventRef.current = null;
-    dragStartPosRef.current = null;
-    setActiveEditEvent(null);
-  }, [onEditEvent]);
-  useEffect2(() => {
-    window.addEventListener("mousemove", handleMouseMove);
-    window.addEventListener("mouseup", handleMouseUp);
-    return () => {
-      window.removeEventListener("mousemove", handleMouseMove);
-      window.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [handleMouseMove, handleMouseUp]);
-  return {
-    handleMouseDown,
-    isDragging: !!activeEditEventRef.current,
-    activeEditEvent
-  };
-};
-
-// lib/components/SchematicViewer.tsx
-import {
-  identity,
-  fromString,
-  toString as transformToString
-} from "transformation-matrix";
-
 // lib/hooks/useChangeSchematicComponentLocationsInSvg.ts
-import "@tscircuit/soup-util";
-import "transformation-matrix";
-import { useEffect as useEffect3, useRef as useRef2 } from "react";
 var useChangeSchematicComponentLocationsInSvg = ({
   svgDivRef,
   realToSvgProjection,
@@ -239,8 +36,8 @@ var useChangeSchematicComponentLocationsInSvg = ({
   activeEditEvent,
   editEvents
 }) => {
-  const lastSvgContentRef = useRef2(null);
-  useEffect3(() => {
+  const lastSvgContentRef = useRef(null);
+  useEffect(() => {
     const svg = svgDivRef.current;
     if (!svg) return;
     const observer = new MutationObserver((mutations) => {
@@ -304,16 +101,16 @@ var useChangeSchematicComponentLocationsInSvg = ({
 };
 
 // lib/hooks/useChangeSchematicTracesForMovedComponents.ts
-import { useEffect as useEffect4, useRef as useRef3 } from "react";
-import { su as su3 } from "@tscircuit/soup-util";
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { su as su2 } from "@tscircuit/soup-util";
 var useChangeSchematicTracesForMovedComponents = ({
   svgDivRef,
   circuitJson,
   activeEditEvent,
   editEvents
 }) => {
-  const lastSvgContentRef = useRef3(null);
-  useEffect4(() => {
+  const lastSvgContentRef = useRef2(null);
+  useEffect2(() => {
     const svg = svgDivRef.current;
     if (!svg) return;
     const updateTraceStyles = () => {
@@ -329,15 +126,15 @@ var useChangeSchematicTracesForMovedComponents = ({
         ...activeEditEvent ? [activeEditEvent] : []
       ]) {
         if ("schematic_component_id" in editEvent && editEvent.edit_event_type === "edit_schematic_component_location") {
-          const sch_component = su3(circuitJson).schematic_component.get(
+          const sch_component = su2(circuitJson).schematic_component.get(
             editEvent.schematic_component_id
           );
           if (!sch_component) return;
-          const src_ports = su3(circuitJson).source_port.list({
+          const src_ports = su2(circuitJson).source_port.list({
             source_component_id: sch_component.source_component_id
           });
           const src_port_ids = new Set(src_ports.map((sp) => sp.source_port_id));
-          const src_traces = su3(circuitJson).source_trace.list().filter(
+          const src_traces = su2(circuitJson).source_trace.list().filter(
             (st) => st.connected_source_port_ids?.some(
               (spi) => src_port_ids.has(spi)
             )
@@ -345,7 +142,7 @@ var useChangeSchematicTracesForMovedComponents = ({
           const src_trace_ids = new Set(
             src_traces.map((st) => st.source_trace_id)
           );
-          const schematic_traces = su3(circuitJson).schematic_trace.list().filter((st) => src_trace_ids.has(st.source_trace_id));
+          const schematic_traces = su2(circuitJson).schematic_trace.list().filter((st) => src_trace_ids.has(st.source_trace_id));
           schematic_traces.forEach((trace) => {
             const traceElements = svg.querySelectorAll(
               `[data-schematic-trace-id="${trace.schematic_trace_id}"] path`
@@ -393,12 +190,238 @@ var useChangeSchematicTracesForMovedComponents = ({
   }, [svgDivRef, activeEditEvent, circuitJson, editEvents]);
 };
 
+// lib/utils/debug.ts
+import Debug from "debug";
+var debug = Debug("schematic-viewer");
+var enableDebug = () => {
+  Debug.enable("schematic-viewer*");
+};
+var debug_default = debug;
+
+// lib/components/SchematicViewer.tsx
+import { useEffect as useEffect5, useMemo, useRef as useRef4, useState as useState3 } from "react";
+import {
+  fromString,
+  identity,
+  toString as transformToString
+} from "transformation-matrix";
+import { useMouseMatrixTransform } from "use-mouse-matrix-transform";
+
+// lib/hooks/use-resize-handling.ts
+import { useEffect as useEffect3, useState } from "react";
+var useResizeHandling = (containerRef) => {
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [containerHeight, setContainerHeight] = useState(0);
+  useEffect3(() => {
+    if (!containerRef.current) return;
+    const updateDimensions = () => {
+      const rect = containerRef.current?.getBoundingClientRect();
+      setContainerWidth(rect?.width || 0);
+      setContainerHeight(rect?.height || 0);
+    };
+    updateDimensions();
+    const resizeObserver = new ResizeObserver(updateDimensions);
+    resizeObserver.observe(containerRef.current);
+    window.addEventListener("resize", updateDimensions);
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("resize", updateDimensions);
+    };
+  }, []);
+  return { containerWidth, containerHeight };
+};
+
+// lib/hooks/useComponentDragging.ts
+import { su as su3 } from "@tscircuit/soup-util";
+import { useCallback, useEffect as useEffect4, useRef as useRef3, useState as useState2 } from "react";
+import {
+  compose as compose2
+} from "transformation-matrix";
+var debug2 = debug_default.extend("useComponentDragging");
+var useComponentDragging = ({
+  onEditEvent,
+  editEvents = [],
+  circuitJson,
+  cancelDrag,
+  svgToScreenProjection,
+  realToSvgProjection,
+  enabled = false
+}) => {
+  const [activeEditEvent, setActiveEditEvent] = useState2(null);
+  const realToScreenProjection = compose2(
+    realToSvgProjection,
+    svgToScreenProjection
+  );
+  const dragStartPosRef = useRef3(null);
+  const activeEditEventRef = useRef3(null);
+  const componentPositionsRef = useRef3(/* @__PURE__ */ new Map());
+  useEffect4(() => {
+    editEvents.forEach((event) => {
+      if ("edit_event_type" in event && event.edit_event_type === "edit_schematic_component_location" && !event.in_progress) {
+        componentPositionsRef.current.set(
+          event.schematic_component_id,
+          { ...event.new_center }
+        );
+      }
+    });
+  }, [editEvents]);
+  const handleMouseDown = useCallback(
+    (e) => {
+      if (!enabled) return;
+      const target = e.target;
+      const componentGroup = target.closest(
+        '[data-circuit-json-type="schematic_component"]'
+      );
+      if (!componentGroup) return;
+      const schematic_component_id = componentGroup.getAttribute(
+        "data-schematic-component-id"
+      );
+      if (!schematic_component_id) return;
+      if (cancelDrag) cancelDrag();
+      const schematic_component = su3(circuitJson).schematic_component.get(
+        schematic_component_id
+      );
+      if (!schematic_component) return;
+      dragStartPosRef.current = {
+        x: e.clientX,
+        y: e.clientY
+      };
+      let current_position;
+      const trackedPosition = componentPositionsRef.current.get(schematic_component_id);
+      if (trackedPosition) {
+        current_position = { ...trackedPosition };
+      } else {
+        const editEventOffset = getComponentOffsetDueToEvents({
+          editEvents,
+          schematic_component_id
+        });
+        current_position = {
+          x: schematic_component.center.x + editEventOffset.x,
+          y: schematic_component.center.y + editEventOffset.y
+        };
+        componentPositionsRef.current.set(schematic_component_id, { ...current_position });
+      }
+      const newEditEvent = {
+        edit_event_id: Math.random().toString(36).substr(2, 9),
+        edit_event_type: "edit_schematic_component_location",
+        schematic_component_id,
+        original_center: current_position,
+        new_center: { ...current_position },
+        in_progress: true,
+        created_at: Date.now(),
+        _element: componentGroup
+      };
+      activeEditEventRef.current = newEditEvent;
+      setActiveEditEvent(newEditEvent);
+    },
+    [cancelDrag, enabled, circuitJson, editEvents]
+  );
+  const handleMouseMove = useCallback(
+    (e) => {
+      if (!activeEditEventRef.current || !dragStartPosRef.current) return;
+      const screenDelta = {
+        x: e.clientX - dragStartPosRef.current.x,
+        y: e.clientY - dragStartPosRef.current.y
+      };
+      const mmDelta = {
+        x: screenDelta.x / realToScreenProjection.a,
+        y: screenDelta.y / realToScreenProjection.d
+      };
+      const newEditEvent = {
+        ...activeEditEventRef.current,
+        new_center: {
+          x: activeEditEventRef.current.original_center.x + mmDelta.x,
+          y: activeEditEventRef.current.original_center.y + mmDelta.y
+        }
+      };
+      activeEditEventRef.current = newEditEvent;
+      setActiveEditEvent(newEditEvent);
+    },
+    [realToScreenProjection]
+  );
+  const handleMouseUp = useCallback(() => {
+    if (!activeEditEventRef.current) return;
+    const finalEvent = {
+      ...activeEditEventRef.current,
+      in_progress: false
+    };
+    componentPositionsRef.current.set(
+      finalEvent.schematic_component_id,
+      { ...finalEvent.new_center }
+    );
+    debug2("handleMouseUp calling onEditEvent with new edit event", {
+      newEditEvent: finalEvent
+    });
+    if (onEditEvent) onEditEvent(finalEvent);
+    activeEditEventRef.current = null;
+    dragStartPosRef.current = null;
+    setActiveEditEvent(null);
+  }, [onEditEvent]);
+  useEffect4(() => {
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [handleMouseMove, handleMouseUp]);
+  return {
+    handleMouseDown,
+    isDragging: !!activeEditEventRef.current,
+    activeEditEvent
+  };
+};
+
+// lib/components/EditIcon.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var EditIcon = ({
+  onClick,
+  active
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      onClick,
+      style: {
+        position: "absolute",
+        top: "16px",
+        right: "16px",
+        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: 1e3
+      },
+      children: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          children: [
+            /* @__PURE__ */ jsx("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
+            /* @__PURE__ */ jsx("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" })
+          ]
+        }
+      )
+    }
+  );
+};
+
 // lib/components/SchematicViewer.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var SchematicViewer = ({
   circuitJson,
   containerStyle,
-  editEvents = [],
+  editEvents: unappliedEditEvents = [],
   onEditEvent,
   defaultEditMode = false,
   debugGrid = false,
@@ -414,6 +437,19 @@ var SchematicViewer = ({
     !clickToInteractEnabled
   );
   const svgDivRef = useRef4(null);
+  const [internalEditEvents, setInternalEditEvents] = useState3([]);
+  const circuitJsonRef = useRef4(circuitJson);
+  const getCircuitHash = (circuitJson2) => {
+    return `${circuitJson2?.length || 0}_${circuitJson2?.editCount || 0}`;
+  };
+  useEffect5(() => {
+    const circuitHash = getCircuitHash(circuitJson);
+    const circuitHashRef = getCircuitHash(circuitJsonRef.current);
+    if (circuitHash !== circuitHashRef) {
+      setInternalEditEvents([]);
+      circuitJsonRef.current = circuitJson;
+    }
+  }, [circuitJson]);
   const {
     ref: containerRef,
     cancelDrag,
@@ -450,20 +486,29 @@ var SchematicViewer = ({
       return identity();
     }
   }, [svgString]);
+  const handleEditEvent = (event) => {
+    setInternalEditEvents((prev) => [...prev, event]);
+    if (onEditEvent) {
+      onEditEvent(event);
+    }
+  };
+  const editEventsWithUnappliedEditEvents = useMemo(() => {
+    return [...unappliedEditEvents, ...internalEditEvents];
+  }, [unappliedEditEvents, internalEditEvents]);
   const { handleMouseDown, isDragging, activeEditEvent } = useComponentDragging(
     {
-      onEditEvent,
+      onEditEvent: handleEditEvent,
       cancelDrag,
       realToSvgProjection,
       svgToScreenProjection,
       circuitJson,
-      editEvents,
+      editEvents: editEventsWithUnappliedEditEvents,
       enabled: editModeEnabled && isInteractionEnabled
     }
   );
   useChangeSchematicComponentLocationsInSvg({
     svgDivRef,
-    editEvents,
+    editEvents: editEventsWithUnappliedEditEvents,
     realToSvgProjection,
     svgToScreenProjection,
     activeEditEvent
@@ -472,7 +517,7 @@ var SchematicViewer = ({
     svgDivRef,
     circuitJson,
     activeEditEvent,
-    editEvents
+    editEvents: editEventsWithUnappliedEditEvents
   });
   const svgDiv = useMemo(
     () => /* @__PURE__ */ jsx2(

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../lib/components/SchematicViewer.tsx","../lib/components/EditIcon.tsx","../lib/hooks/use-resize-handling.ts","../lib/hooks/useComponentDragging.ts","../lib/utils/debug.ts","../lib/utils/get-component-offset-due-to-events.ts","../lib/hooks/useChangeSchematicComponentLocationsInSvg.ts","../lib/hooks/useChangeSchematicTracesForMovedComponents.ts"],"sourcesContent":["import { useMouseMatrixTransform } from \"use-mouse-matrix-transform\"\nimport { convertCircuitJsonToSchematicSvg } from \"circuit-to-svg\"\nimport { useMemo, useRef, useState } from \"react\"\nimport { EditIcon } from \"./EditIcon\"\nimport { useResizeHandling } from \"../hooks/use-resize-handling\"\nimport { useComponentDragging } from \"../hooks/useComponentDragging\"\nimport type { ManualEditEvent } from \"../types/edit-events\"\nimport {\n  identity,\n  fromString,\n  toString as transformToString,\n} from \"transformation-matrix\"\nimport { useChangeSchematicComponentLocationsInSvg } from \"lib/hooks/useChangeSchematicComponentLocationsInSvg\"\nimport { useChangeSchematicTracesForMovedComponents } from \"lib/hooks/useChangeSchematicTracesForMovedComponents\"\nimport type { CircuitJson } from \"circuit-json\"\nimport { enableDebug } from \"lib/utils/debug\"\n\ninterface Props {\n  circuitJson: any[]\n  containerStyle?: React.CSSProperties\n  editEvents?: ManualEditEvent[]\n  onEditEvent?: (event: ManualEditEvent) => void\n  defaultEditMode?: boolean\n  debugGrid?: boolean\n  editingEnabled?: boolean\n  debug?: boolean\n  clickToInteractEnabled?: boolean\n}\n\nexport const SchematicViewer = ({\n  circuitJson,\n  containerStyle,\n  editEvents = [],\n  onEditEvent,\n  defaultEditMode = false,\n  debugGrid = false,\n  editingEnabled = false,\n  debug = false,\n  clickToInteractEnabled = false,\n}: Props) => {\n  if (debug) {\n    enableDebug()\n  }\n  const [editModeEnabled, setEditModeEnabled] = useState(defaultEditMode)\n  const [isInteractionEnabled, setIsInteractionEnabled] = useState<boolean>(\n    !clickToInteractEnabled,\n  )\n  const svgDivRef = useRef<HTMLDivElement>(null)\n\n  const {\n    ref: containerRef,\n    cancelDrag,\n    transform: svgToScreenProjection,\n  } = useMouseMatrixTransform({\n    onSetTransform(transform) {\n      if (!svgDivRef.current) return\n      svgDivRef.current.style.transform = transformToString(transform)\n    },\n    // @ts-ignore disabled is a valid prop but not typed\n    enabled: isInteractionEnabled,\n  })\n\n  const { containerWidth, containerHeight } = useResizeHandling(containerRef)\n  const svgString = useMemo(() => {\n    if (!containerWidth || !containerHeight) return \"\"\n\n    return convertCircuitJsonToSchematicSvg(circuitJson as any, {\n      width: containerWidth,\n      height: containerHeight || 720,\n      grid: !debugGrid\n        ? undefined\n        : {\n            cellSize: 1,\n            labelCells: true,\n          },\n    })\n  }, [circuitJson, containerWidth, containerHeight])\n\n  const realToSvgProjection = useMemo(() => {\n    if (!svgString) return identity()\n    const transformString = svgString.match(\n      /data-real-to-screen-transform=\"([^\"]+)\"/,\n    )?.[1]!\n\n    try {\n      return fromString(transformString)\n    } catch (e) {\n      console.error(e)\n      return identity()\n    }\n  }, [svgString])\n\n  const { handleMouseDown, isDragging, activeEditEvent } = useComponentDragging(\n    {\n      onEditEvent,\n      cancelDrag,\n      realToSvgProjection,\n      svgToScreenProjection,\n      circuitJson,\n      editEvents,\n      enabled: editModeEnabled && isInteractionEnabled,\n    },\n  )\n\n  useChangeSchematicComponentLocationsInSvg({\n    svgDivRef,\n    editEvents,\n    realToSvgProjection,\n    svgToScreenProjection,\n    activeEditEvent,\n  })\n\n  useChangeSchematicTracesForMovedComponents({\n    svgDivRef,\n    circuitJson,\n    activeEditEvent,\n    editEvents,\n  })\n\n  const svgDiv = useMemo(\n    () => (\n      <div\n        ref={svgDivRef}\n        style={{\n          pointerEvents: clickToInteractEnabled\n            ? isInteractionEnabled\n              ? \"auto\"\n              : \"none\"\n            : \"auto\",\n          transformOrigin: \"0 0\",\n        }}\n        // biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>\n        dangerouslySetInnerHTML={{ __html: svgString }}\n      />\n    ),\n    [svgString, isInteractionEnabled, clickToInteractEnabled],\n  )\n\n  return (\n    <div\n      ref={containerRef}\n      style={{\n        position: \"relative\",\n        backgroundColor: \"#F5F1ED\",\n        overflow: \"hidden\",\n        cursor: isDragging\n          ? \"grabbing\"\n          : clickToInteractEnabled && !isInteractionEnabled\n            ? \"pointer\"\n            : \"grab\",\n        minHeight: \"300px\",\n        ...containerStyle,\n      }}\n      onMouseDown={(e) => {\n        if (clickToInteractEnabled && !isInteractionEnabled) {\n          e.preventDefault()\n          e.stopPropagation()\n          return\n        }\n        handleMouseDown(e)\n      }}\n      onMouseDownCapture={(e) => {\n        if (clickToInteractEnabled && !isInteractionEnabled) {\n          e.preventDefault()\n          e.stopPropagation()\n          return\n        }\n      }}\n    >\n      {!isInteractionEnabled && clickToInteractEnabled && (\n        <div\n          onClick={(e) => {\n            e.preventDefault()\n            e.stopPropagation()\n            setIsInteractionEnabled(true)\n          }}\n          style={{\n            position: \"absolute\",\n            inset: 0,\n            cursor: \"pointer\",\n            zIndex: 10,\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            pointerEvents: \"all\",\n          }}\n        >\n          <div\n            style={{\n              backgroundColor: \"rgba(0, 0, 0, 0.8)\",\n              color: \"white\",\n              padding: \"12px 24px\",\n              borderRadius: \"8px\",\n              fontSize: \"16px\",\n              fontFamily: \"sans-serif\",\n              pointerEvents: \"none\",\n            }}\n          >\n            Click to Interact\n          </div>\n        </div>\n      )}\n      {editingEnabled && (\n        <EditIcon\n          active={editModeEnabled}\n          onClick={() => setEditModeEnabled(!editModeEnabled)}\n        />\n      )}\n      {svgDiv}\n    </div>\n  )\n}\n","export const EditIcon = ({\n  onClick,\n  active,\n}: { onClick: () => void; active: boolean }) => {\n  return (\n    <div\n      onClick={onClick}\n      style={{\n        position: \"absolute\",\n        top: \"16px\",\n        right: \"16px\",\n        backgroundColor: active ? \"#4CAF50\" : \"#fff\",\n        color: active ? \"#fff\" : \"#000\",\n        padding: \"8px\",\n        borderRadius: \"4px\",\n        cursor: \"pointer\",\n        boxShadow: \"0 2px 4px rgba(0,0,0,0.1)\",\n        display: \"flex\",\n        alignItems: \"center\",\n        gap: \"4px\",\n        zIndex: 1000,\n      }}\n    >\n      <svg\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n      >\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" />\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" />\n      </svg>\n    </div>\n  )\n}\n","import { useEffect, useState } from \"react\"\n\nexport const useResizeHandling = (\n  containerRef: React.RefObject<HTMLElement>,\n) => {\n  const [containerWidth, setContainerWidth] = useState(0)\n  const [containerHeight, setContainerHeight] = useState(0)\n\n  useEffect(() => {\n    if (!containerRef.current) return\n\n    const updateDimensions = () => {\n      const rect = containerRef.current?.getBoundingClientRect()\n      setContainerWidth(rect?.width || 0)\n      setContainerHeight(rect?.height || 0)\n    }\n\n    // Set initial dimensions\n    updateDimensions()\n\n    // Add resize listener\n    const resizeObserver = new ResizeObserver(updateDimensions)\n    resizeObserver.observe(containerRef.current)\n\n    // Fallback to window resize\n    window.addEventListener(\"resize\", updateDimensions)\n\n    return () => {\n      resizeObserver.disconnect()\n      window.removeEventListener(\"resize\", updateDimensions)\n    }\n  }, [])\n\n  return { containerWidth, containerHeight }\n}\n","import { su } from \"@tscircuit/soup-util\"\nimport Debug from \"lib/utils/debug\"\nimport { getComponentOffsetDueToEvents } from \"lib/utils/get-component-offset-due-to-events\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport {\n  type Matrix,\n  compose\n} from \"transformation-matrix\"\nimport type {\n  EditSchematicComponentLocationEventWithElement,\n  ManualEditEvent,\n} from \"../types/edit-events\"\n\nconst debug = Debug.extend(\"useComponentDragging\")\n\nexport const useComponentDragging = ({\n  onEditEvent,\n  editEvents = [],\n  circuitJson,\n  cancelDrag,\n  svgToScreenProjection,\n  realToSvgProjection,\n  enabled = false,\n}: {\n  circuitJson: any[]\n  editEvents: ManualEditEvent[]\n  /** The projection returned from use-mouse-matrix-transform, indicating zoom on svg */\n  svgToScreenProjection: Matrix\n  /** The projection returned from circuit-to-svg, mm to svg */\n  realToSvgProjection: Matrix\n  onEditEvent?: (event: ManualEditEvent) => void\n  cancelDrag?: () => void\n  enabled?: boolean\n}): {\n  handleMouseDown: (e: React.MouseEvent) => void\n  isDragging: boolean\n  activeEditEvent: EditSchematicComponentLocationEventWithElement | null\n} => {\n  const [activeEditEvent, setActiveEditEvent] =\n    useState<EditSchematicComponentLocationEventWithElement | null>(null)\n  const realToScreenProjection = compose(\n    realToSvgProjection,\n    svgToScreenProjection,\n  )\n\n  /**\n   * Drag start position in screen space\n   */\n  const dragStartPosRef = useRef<{\n    x: number\n    y: number\n  } | null>(null)\n\n  const activeEditEventRef =\n    useRef<EditSchematicComponentLocationEventWithElement | null>(null)\n\n  const handleMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      if (!enabled) return\n\n      const target = e.target as SVGElement\n      const componentGroup = target.closest(\n        '[data-circuit-json-type=\"schematic_component\"]',\n      )\n      if (!componentGroup) return\n\n      const schematic_component_id = componentGroup.getAttribute(\n        \"data-schematic-component-id\",\n      )\n      if (!schematic_component_id) return\n\n      if (cancelDrag) cancelDrag()\n\n      const schematic_component = su(circuitJson).schematic_component.get(\n        schematic_component_id,\n      )\n      if (!schematic_component) return\n      const editEventOffset = getComponentOffsetDueToEvents({\n        editEvents,\n        schematic_component_id: schematic_component_id,\n      })\n\n      dragStartPosRef.current = {\n        x: e.clientX,\n        y: e.clientY,\n      }\n\n      const current_position = {\n        x: schematic_component.center.x + editEventOffset.x,\n        y: schematic_component.center.y + editEventOffset.y,\n      }\n\n      const newEditEvent: EditSchematicComponentLocationEventWithElement = {\n        edit_event_id: Math.random().toString(36).substr(2, 9),\n        edit_event_type: \"edit_schematic_component_location\",\n        schematic_component_id: schematic_component_id,\n        original_center: current_position,\n        new_center: { ...current_position },\n        in_progress: true,\n        created_at: Date.now(),\n        _element: componentGroup as any,\n      }\n\n      activeEditEventRef.current = newEditEvent\n    },\n    [cancelDrag, enabled, circuitJson, editEvents],\n  )\n\n  const handleMouseMove = useCallback(\n    (e: MouseEvent) => {\n      if (!activeEditEventRef.current || !dragStartPosRef.current) return\n\n      const screenDelta = {\n        x: e.clientX - dragStartPosRef.current.x,\n        y: e.clientY - dragStartPosRef.current.y,\n      }\n\n      const mmDelta = {\n        x: screenDelta.x / realToScreenProjection.a,\n        y: screenDelta.y / realToScreenProjection.d,\n      }\n\n      const newEditEvent = {\n        ...activeEditEventRef.current,\n        new_center: {\n          x: activeEditEventRef.current.original_center.x + mmDelta.x,\n          y: activeEditEventRef.current.original_center.y + mmDelta.y,\n        },\n      }\n\n      activeEditEventRef.current = newEditEvent\n      setActiveEditEvent(newEditEvent)\n    },\n    [realToScreenProjection],\n  )\n\n  const handleMouseUp = useCallback(() => {\n    if (!activeEditEventRef.current) return\n    const finalEvent = {\n      ...activeEditEventRef.current,\n      in_progress: false,\n    }\n    debug(\"handleMouseUp calling onEditEvent with new edit event\", {\n      newEditEvent: finalEvent,\n    })\n    if (onEditEvent) onEditEvent(finalEvent)\n    activeEditEventRef.current = null\n    dragStartPosRef.current = null\n    setActiveEditEvent(null)\n  }, [onEditEvent])\n\n  useEffect(() => {\n    window.addEventListener(\"mousemove\", handleMouseMove)\n    window.addEventListener(\"mouseup\", handleMouseUp)\n    return () => {\n      window.removeEventListener(\"mousemove\", handleMouseMove)\n      window.removeEventListener(\"mouseup\", handleMouseUp)\n    }\n  }, [handleMouseMove, handleMouseUp])\n\n  return {\n    handleMouseDown,\n    isDragging: !!activeEditEventRef.current,\n    activeEditEvent: activeEditEvent,\n  }\n}\n","import Debug from \"debug\"\n\nexport const debug = Debug(\"schematic-viewer\")\n\nexport const enableDebug = () => {\n  Debug.enable(\"schematic-viewer*\")\n}\n\nexport default debug\n","import type {\n  EditSchematicComponentLocationEvent,\n  EditSchematicComponentLocationEventWithElement,\n  ManualEditEvent,\n} from \"lib/types/edit-events\"\n\n/**\n * Returns the total offset of a component due to a set of edit events in\n * mm\n */\nexport const getComponentOffsetDueToEvents = ({\n  editEvents,\n  schematic_component_id,\n}: {\n  editEvents: ManualEditEvent[]\n  schematic_component_id: string\n}) => {\n  const editEventsForComponent: EditSchematicComponentLocationEvent[] =\n    editEvents\n      .filter(\n        (event) =>\n          \"schematic_component_id\" in event &&\n          event.schematic_component_id === schematic_component_id,\n      )\n      .filter(\n        (event) =>\n          \"edit_event_type\" in event &&\n          event.edit_event_type === \"edit_schematic_component_location\",\n      )\n\n  const totalOffsetX = editEventsForComponent.reduce((acc, event) => {\n    return acc + event.new_center.x - event.original_center.x\n  }, 0)\n\n  const totalOffsetY = editEventsForComponent.reduce((acc, event) => {\n    return acc + event.new_center.y - event.original_center.y\n  }, 0)\n\n  return {\n    x: totalOffsetX,\n    y: totalOffsetY,\n  }\n}\n","import { su } from \"@tscircuit/soup-util\"\nimport type {\n  ManualEditEvent,\n  EditSchematicComponentLocationEventWithElement,\n} from \"lib/types/edit-events\"\nimport { type Matrix, compose, applyToPoint } from \"transformation-matrix\"\nimport { useEffect, useRef } from \"react\"\nimport { getComponentOffsetDueToEvents } from \"lib/utils/get-component-offset-due-to-events\"\nimport type { CircuitJson } from \"circuit-json\"\n\n/**\n * This hook automatically applies the edit events to the schematic components\n * inside the svg div.\n *\n * Schematic components are \"<g>\" elements with a \"data-circuit-json-type\"\n * attribute equal to \"schematic_component\", these elements also have a\n * data-schematic-component-id attribute equal to the schematic_component_id\n */\nexport const useChangeSchematicComponentLocationsInSvg = ({\n  svgDivRef,\n  realToSvgProjection,\n  svgToScreenProjection,\n  activeEditEvent,\n  editEvents,\n}: {\n  svgDivRef: React.RefObject<HTMLDivElement | null>\n  realToSvgProjection: Matrix\n  svgToScreenProjection: Matrix\n  activeEditEvent: EditSchematicComponentLocationEventWithElement | null\n  editEvents: ManualEditEvent[]\n}) => {\n  // Keep track of the last known SVG content\n  const lastSvgContentRef = useRef<string | null>(null)\n\n  useEffect(() => {\n    const svg = svgDivRef.current\n    if (!svg) return\n\n    // Create a MutationObserver to watch for changes in the div's content\n    const observer = new MutationObserver((mutations) => {\n      // Check if the SVG content has changed\n      const currentSvgContent = svg.innerHTML\n      if (currentSvgContent !== lastSvgContentRef.current) {\n        lastSvgContentRef.current = currentSvgContent\n\n        // Apply the transforms\n        applyTransforms()\n      }\n    })\n\n    // Function to apply transforms to components\n    const applyTransforms = () => {\n      const componentsThatHaveBeenMoved = new Set<string>()\n      for (const event of editEvents) {\n        if (\n          \"edit_event_type\" in event &&\n          event.edit_event_type === \"edit_schematic_component_location\"\n        ) {\n          componentsThatHaveBeenMoved.add(event.schematic_component_id)\n        }\n      }\n      if (activeEditEvent) {\n        componentsThatHaveBeenMoved.add(activeEditEvent.schematic_component_id)\n      }\n\n      // Reset all transforms\n      const allComponents = svg.querySelectorAll(\n        '[data-circuit-json-type=\"schematic_component\"]',\n      )\n\n      for (const component of Array.from(allComponents)) {\n        const schematic_component_id = component.getAttribute(\n          \"data-schematic-component-id\",\n        )!\n\n        const offsetMm = getComponentOffsetDueToEvents({\n          editEvents: [\n            ...editEvents,\n            ...(activeEditEvent ? [activeEditEvent] : []),\n          ],\n          schematic_component_id,\n        })\n\n        const offsetPx = {\n          x: offsetMm.x * realToSvgProjection.a,\n          y: offsetMm.y * realToSvgProjection.d,\n        }\n\n        const style: any = (component as any).style\n        style.transform = `translate(${offsetPx.x}px, ${offsetPx.y}px)`\n        if (\n          activeEditEvent?.schematic_component_id === schematic_component_id\n        ) {\n          style.outline = \"solid 2px rgba(255,0,0,0.5)\"\n          style.outlineOffset = \"5px\"\n        } else if (style.outline) {\n          style.outline = \"\"\n        }\n      }\n    }\n\n    // Start observing the div for changes\n    observer.observe(svg, {\n      childList: true, // Watch for changes to the child elements\n      subtree: false, // Watch for changes in the entire subtree\n      characterData: false, // Watch for changes to text content\n    })\n\n    // Apply transforms immediately on mount or when editEvents change\n    applyTransforms()\n\n    // Cleanup function\n    return () => {\n      observer.disconnect()\n    }\n  }, [svgDivRef, editEvents, activeEditEvent]) // Dependencies remain the same\n}\n","import { useEffect, useRef } from \"react\"\nimport { su } from \"@tscircuit/soup-util\"\nimport type { ManualEditEvent } from \"../types/edit-events\"\nimport type { CircuitJson } from \"circuit-json\"\n\n/**\n * This hook makes traces dashed when their connected components are being moved\n */\nexport const useChangeSchematicTracesForMovedComponents = ({\n  svgDivRef,\n  circuitJson,\n  activeEditEvent,\n  editEvents,\n}: {\n  svgDivRef: React.RefObject<HTMLDivElement | null>\n  circuitJson: CircuitJson\n  activeEditEvent: ManualEditEvent | null\n  editEvents: ManualEditEvent[]\n}) => {\n  // Keep track of the last known SVG content\n  const lastSvgContentRef = useRef<string | null>(null)\n\n  useEffect(() => {\n    const svg = svgDivRef.current\n    if (!svg) return\n\n    const updateTraceStyles = () => {\n      // Reset all traces to solid\n      const allTraces = svg.querySelectorAll(\n        '[data-circuit-json-type=\"schematic_trace\"] path',\n      )\n\n      // Reset all traces to solid\n      for (const trace of Array.from(allTraces)) {\n        trace.setAttribute(\"stroke-dasharray\", \"0\")\n        ;(trace as any).style.animation = \"\"\n      }\n\n      // If there's an active edit event, make connected traces dashed\n      for (const editEvent of [\n        ...editEvents,\n        ...(activeEditEvent ? [activeEditEvent] : []),\n      ]) {\n        if (\n          \"schematic_component_id\" in editEvent &&\n          editEvent.edit_event_type === \"edit_schematic_component_location\"\n        ) {\n          const sch_component = su(circuitJson).schematic_component.get(\n            editEvent.schematic_component_id,\n          )\n          if (!sch_component) return\n\n          const src_ports = su(circuitJson).source_port.list({\n            source_component_id: sch_component.source_component_id,\n          })\n          const src_port_ids = new Set(src_ports.map((sp) => sp.source_port_id))\n          const src_traces = su(circuitJson)\n            .source_trace.list()\n            .filter((st) =>\n              st.connected_source_port_ids?.some((spi) =>\n                src_port_ids.has(spi),\n              ),\n            )\n          const src_trace_ids = new Set(\n            src_traces.map((st) => st.source_trace_id),\n          )\n          const schematic_traces = su(circuitJson)\n            .schematic_trace.list()\n            .filter((st) => src_trace_ids.has(st.source_trace_id))\n\n          // Make the connected traces dashed\n          schematic_traces.forEach((trace) => {\n            const traceElements = svg.querySelectorAll(\n              `[data-schematic-trace-id=\"${trace.schematic_trace_id}\"] path`,\n            )\n            for (const traceElement of Array.from(traceElements)) {\n              if (traceElement.getAttribute(\"class\")?.includes(\"invisible\"))\n                continue\n              traceElement.setAttribute(\"stroke-dasharray\", \"20,20\")\n              ;(traceElement as any).style.animation =\n                \"dash-animation 350ms linear infinite, pulse-animation 900ms linear infinite\"\n\n              if (!svg.querySelector(\"style#dash-animation\")) {\n                const style = document.createElement(\"style\")\n                style.id = \"dash-animation\"\n                style.textContent = `\n                  @keyframes dash-animation {\n                    to {\n                      stroke-dashoffset: -40;\n                    }\n                  }\n                  @keyframes pulse-animation {\n                    0% { opacity: 0.6; }\n                    50% { opacity: 0.2; }\n                    100% { opacity: 0.6; }\n                  }\n                `\n                svg.appendChild(style)\n              }\n            }\n          })\n        }\n      }\n    }\n\n    // Apply styles immediately\n    updateTraceStyles()\n\n    // Cleanup function\n    const observer = new MutationObserver(updateTraceStyles)\n    observer.observe(svg, {\n      childList: true, // Watch for changes to the child elements\n      subtree: false, // Watch for changes in the entire subtree\n      characterData: false, // Watch for changes to text content\n    })\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [svgDivRef, activeEditEvent, circuitJson, editEvents])\n}\n"],"mappings":";AAAA,SAAS,+BAA+B;AACxC,SAAS,wCAAwC;AACjD,SAAS,SAAS,UAAAA,SAAQ,YAAAC,iBAAgB;;;ACqBpC,SAQE,KARF;AAvBC,IAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA;AACF,MAAgD;AAC9C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,QACL,UAAU;AAAA,QACV,KAAK;AAAA,QACL,OAAO;AAAA,QACP,iBAAiB,SAAS,YAAY;AAAA,QACtC,OAAO,SAAS,SAAS;AAAA,QACzB,SAAS;AAAA,QACT,cAAc;AAAA,QACd,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,KAAK;AAAA,QACL,QAAQ;AAAA,MACV;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,OAAM;AAAA,UACN,QAAO;AAAA,UACP,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,QAAO;AAAA,UACP,aAAY;AAAA,UAEZ;AAAA,gCAAC,UAAK,GAAE,8DAA6D;AAAA,YACrE,oBAAC,UAAK,GAAE,2DAA0D;AAAA;AAAA;AAAA,MACpE;AAAA;AAAA,EACF;AAEJ;;;ACpCA,SAAS,WAAW,gBAAgB;AAE7B,IAAM,oBAAoB,CAC/B,iBACG;AACH,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,CAAC;AACtD,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,CAAC;AAExD,YAAU,MAAM;AACd,QAAI,CAAC,aAAa,QAAS;AAE3B,UAAM,mBAAmB,MAAM;AAC7B,YAAM,OAAO,aAAa,SAAS,sBAAsB;AACzD,wBAAkB,MAAM,SAAS,CAAC;AAClC,yBAAmB,MAAM,UAAU,CAAC;AAAA,IACtC;AAGA,qBAAiB;AAGjB,UAAM,iBAAiB,IAAI,eAAe,gBAAgB;AAC1D,mBAAe,QAAQ,aAAa,OAAO;AAG3C,WAAO,iBAAiB,UAAU,gBAAgB;AAElD,WAAO,MAAM;AACX,qBAAe,WAAW;AAC1B,aAAO,oBAAoB,UAAU,gBAAgB;AAAA,IACvD;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO,EAAE,gBAAgB,gBAAgB;AAC3C;;;AClCA,SAAS,UAAU;;;ACAnB,OAAO,WAAW;AAEX,IAAM,QAAQ,MAAM,kBAAkB;AAEtC,IAAM,cAAc,MAAM;AAC/B,QAAM,OAAO,mBAAmB;AAClC;AAEA,IAAO,gBAAQ;;;ACER,IAAM,gCAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AACF,MAGM;AACJ,QAAM,yBACJ,WACG;AAAA,IACC,CAAC,UACC,4BAA4B,SAC5B,MAAM,2BAA2B;AAAA,EACrC,EACC;AAAA,IACC,CAAC,UACC,qBAAqB,SACrB,MAAM,oBAAoB;AAAA,EAC9B;AAEJ,QAAM,eAAe,uBAAuB,OAAO,CAAC,KAAK,UAAU;AACjE,WAAO,MAAM,MAAM,WAAW,IAAI,MAAM,gBAAgB;AAAA,EAC1D,GAAG,CAAC;AAEJ,QAAM,eAAe,uBAAuB,OAAO,CAAC,KAAK,UAAU;AACjE,WAAO,MAAM,MAAM,WAAW,IAAI,MAAM,gBAAgB;AAAA,EAC1D,GAAG,CAAC;AAEJ,SAAO;AAAA,IACL,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AACF;;;AFvCA,SAAS,aAAa,aAAAC,YAAW,QAAQ,YAAAC,iBAAgB;AACzD;AAAA,EAEE;AAAA,OACK;AAMP,IAAMC,SAAQ,cAAM,OAAO,sBAAsB;AAE1C,IAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA,aAAa,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AACZ,MAcK;AACH,QAAM,CAAC,iBAAiB,kBAAkB,IACxCD,UAAgE,IAAI;AACtE,QAAM,yBAAyB;AAAA,IAC7B;AAAA,IACA;AAAA,EACF;AAKA,QAAM,kBAAkB,OAGd,IAAI;AAEd,QAAM,qBACJ,OAA8D,IAAI;AAEpE,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAAwB;AACvB,UAAI,CAAC,QAAS;AAEd,YAAM,SAAS,EAAE;AACjB,YAAM,iBAAiB,OAAO;AAAA,QAC5B;AAAA,MACF;AACA,UAAI,CAAC,eAAgB;AAErB,YAAM,yBAAyB,eAAe;AAAA,QAC5C;AAAA,MACF;AACA,UAAI,CAAC,uBAAwB;AAE7B,UAAI,WAAY,YAAW;AAE3B,YAAM,sBAAsB,GAAG,WAAW,EAAE,oBAAoB;AAAA,QAC9D;AAAA,MACF;AACA,UAAI,CAAC,oBAAqB;AAC1B,YAAM,kBAAkB,8BAA8B;AAAA,QACpD;AAAA,QACA;AAAA,MACF,CAAC;AAED,sBAAgB,UAAU;AAAA,QACxB,GAAG,EAAE;AAAA,QACL,GAAG,EAAE;AAAA,MACP;AAEA,YAAM,mBAAmB;AAAA,QACvB,GAAG,oBAAoB,OAAO,IAAI,gBAAgB;AAAA,QAClD,GAAG,oBAAoB,OAAO,IAAI,gBAAgB;AAAA,MACpD;AAEA,YAAM,eAA+D;AAAA,QACnE,eAAe,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,OAAO,GAAG,CAAC;AAAA,QACrD,iBAAiB;AAAA,QACjB;AAAA,QACA,iBAAiB;AAAA,QACjB,YAAY,EAAE,GAAG,iBAAiB;AAAA,QAClC,aAAa;AAAA,QACb,YAAY,KAAK,IAAI;AAAA,QACrB,UAAU;AAAA,MACZ;AAEA,yBAAmB,UAAU;AAAA,IAC/B;AAAA,IACA,CAAC,YAAY,SAAS,aAAa,UAAU;AAAA,EAC/C;AAEA,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAAkB;AACjB,UAAI,CAAC,mBAAmB,WAAW,CAAC,gBAAgB,QAAS;AAE7D,YAAM,cAAc;AAAA,QAClB,GAAG,EAAE,UAAU,gBAAgB,QAAQ;AAAA,QACvC,GAAG,EAAE,UAAU,gBAAgB,QAAQ;AAAA,MACzC;AAEA,YAAM,UAAU;AAAA,QACd,GAAG,YAAY,IAAI,uBAAuB;AAAA,QAC1C,GAAG,YAAY,IAAI,uBAAuB;AAAA,MAC5C;AAEA,YAAM,eAAe;AAAA,QACnB,GAAG,mBAAmB;AAAA,QACtB,YAAY;AAAA,UACV,GAAG,mBAAmB,QAAQ,gBAAgB,IAAI,QAAQ;AAAA,UAC1D,GAAG,mBAAmB,QAAQ,gBAAgB,IAAI,QAAQ;AAAA,QAC5D;AAAA,MACF;AAEA,yBAAmB,UAAU;AAC7B,yBAAmB,YAAY;AAAA,IACjC;AAAA,IACA,CAAC,sBAAsB;AAAA,EACzB;AAEA,QAAM,gBAAgB,YAAY,MAAM;AACtC,QAAI,CAAC,mBAAmB,QAAS;AACjC,UAAM,aAAa;AAAA,MACjB,GAAG,mBAAmB;AAAA,MACtB,aAAa;AAAA,IACf;AACA,IAAAC,OAAM,yDAAyD;AAAA,MAC7D,cAAc;AAAA,IAChB,CAAC;AACD,QAAI,YAAa,aAAY,UAAU;AACvC,uBAAmB,UAAU;AAC7B,oBAAgB,UAAU;AAC1B,uBAAmB,IAAI;AAAA,EACzB,GAAG,CAAC,WAAW,CAAC;AAEhB,EAAAF,WAAU,MAAM;AACd,WAAO,iBAAiB,aAAa,eAAe;AACpD,WAAO,iBAAiB,WAAW,aAAa;AAChD,WAAO,MAAM;AACX,aAAO,oBAAoB,aAAa,eAAe;AACvD,aAAO,oBAAoB,WAAW,aAAa;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,iBAAiB,aAAa,CAAC;AAEnC,SAAO;AAAA,IACL;AAAA,IACA,YAAY,CAAC,CAAC,mBAAmB;AAAA,IACjC;AAAA,EACF;AACF;;;AH9JA;AAAA,EACE;AAAA,EACA;AAAA,EACA,YAAY;AAAA,OACP;;;AMXP,OAAmB;AAKnB,OAAmD;AACnD,SAAS,aAAAG,YAAW,UAAAC,eAAc;AAY3B,IAAM,4CAA4C,CAAC;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAMM;AAEJ,QAAM,oBAAoBC,QAAsB,IAAI;AAEpD,EAAAC,WAAU,MAAM;AACd,UAAM,MAAM,UAAU;AACtB,QAAI,CAAC,IAAK;AAGV,UAAM,WAAW,IAAI,iBAAiB,CAAC,cAAc;AAEnD,YAAM,oBAAoB,IAAI;AAC9B,UAAI,sBAAsB,kBAAkB,SAAS;AACnD,0BAAkB,UAAU;AAG5B,wBAAgB;AAAA,MAClB;AAAA,IACF,CAAC;AAGD,UAAM,kBAAkB,MAAM;AAC5B,YAAM,8BAA8B,oBAAI,IAAY;AACpD,iBAAW,SAAS,YAAY;AAC9B,YACE,qBAAqB,SACrB,MAAM,oBAAoB,qCAC1B;AACA,sCAA4B,IAAI,MAAM,sBAAsB;AAAA,QAC9D;AAAA,MACF;AACA,UAAI,iBAAiB;AACnB,oCAA4B,IAAI,gBAAgB,sBAAsB;AAAA,MACxE;AAGA,YAAM,gBAAgB,IAAI;AAAA,QACxB;AAAA,MACF;AAEA,iBAAW,aAAa,MAAM,KAAK,aAAa,GAAG;AACjD,cAAM,yBAAyB,UAAU;AAAA,UACvC;AAAA,QACF;AAEA,cAAM,WAAW,8BAA8B;AAAA,UAC7C,YAAY;AAAA,YACV,GAAG;AAAA,YACH,GAAI,kBAAkB,CAAC,eAAe,IAAI,CAAC;AAAA,UAC7C;AAAA,UACA;AAAA,QACF,CAAC;AAED,cAAM,WAAW;AAAA,UACf,GAAG,SAAS,IAAI,oBAAoB;AAAA,UACpC,GAAG,SAAS,IAAI,oBAAoB;AAAA,QACtC;AAEA,cAAM,QAAc,UAAkB;AACtC,cAAM,YAAY,aAAa,SAAS,CAAC,OAAO,SAAS,CAAC;AAC1D,YACE,iBAAiB,2BAA2B,wBAC5C;AACA,gBAAM,UAAU;AAChB,gBAAM,gBAAgB;AAAA,QACxB,WAAW,MAAM,SAAS;AACxB,gBAAM,UAAU;AAAA,QAClB;AAAA,MACF;AAAA,IACF;AAGA,aAAS,QAAQ,KAAK;AAAA,MACpB,WAAW;AAAA;AAAA,MACX,SAAS;AAAA;AAAA,MACT,eAAe;AAAA;AAAA,IACjB,CAAC;AAGD,oBAAgB;AAGhB,WAAO,MAAM;AACX,eAAS,WAAW;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,WAAW,YAAY,eAAe,CAAC;AAC7C;;;ACpHA,SAAS,aAAAC,YAAW,UAAAC,eAAc;AAClC,SAAS,MAAAC,WAAU;AAOZ,IAAM,6CAA6C,CAAC;AAAA,EACzD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAKM;AAEJ,QAAM,oBAAoBD,QAAsB,IAAI;AAEpD,EAAAD,WAAU,MAAM;AACd,UAAM,MAAM,UAAU;AACtB,QAAI,CAAC,IAAK;AAEV,UAAM,oBAAoB,MAAM;AAE9B,YAAM,YAAY,IAAI;AAAA,QACpB;AAAA,MACF;AAGA,iBAAW,SAAS,MAAM,KAAK,SAAS,GAAG;AACzC,cAAM,aAAa,oBAAoB,GAAG;AACzC,QAAC,MAAc,MAAM,YAAY;AAAA,MACpC;AAGA,iBAAW,aAAa;AAAA,QACtB,GAAG;AAAA,QACH,GAAI,kBAAkB,CAAC,eAAe,IAAI,CAAC;AAAA,MAC7C,GAAG;AACD,YACE,4BAA4B,aAC5B,UAAU,oBAAoB,qCAC9B;AACA,gBAAM,gBAAgBE,IAAG,WAAW,EAAE,oBAAoB;AAAA,YACxD,UAAU;AAAA,UACZ;AACA,cAAI,CAAC,cAAe;AAEpB,gBAAM,YAAYA,IAAG,WAAW,EAAE,YAAY,KAAK;AAAA,YACjD,qBAAqB,cAAc;AAAA,UACrC,CAAC;AACD,gBAAM,eAAe,IAAI,IAAI,UAAU,IAAI,CAAC,OAAO,GAAG,cAAc,CAAC;AACrE,gBAAM,aAAaA,IAAG,WAAW,EAC9B,aAAa,KAAK,EAClB;AAAA,YAAO,CAAC,OACP,GAAG,2BAA2B;AAAA,cAAK,CAAC,QAClC,aAAa,IAAI,GAAG;AAAA,YACtB;AAAA,UACF;AACF,gBAAM,gBAAgB,IAAI;AAAA,YACxB,WAAW,IAAI,CAAC,OAAO,GAAG,eAAe;AAAA,UAC3C;AACA,gBAAM,mBAAmBA,IAAG,WAAW,EACpC,gBAAgB,KAAK,EACrB,OAAO,CAAC,OAAO,cAAc,IAAI,GAAG,eAAe,CAAC;AAGvD,2BAAiB,QAAQ,CAAC,UAAU;AAClC,kBAAM,gBAAgB,IAAI;AAAA,cACxB,6BAA6B,MAAM,kBAAkB;AAAA,YACvD;AACA,uBAAW,gBAAgB,MAAM,KAAK,aAAa,GAAG;AACpD,kBAAI,aAAa,aAAa,OAAO,GAAG,SAAS,WAAW;AAC1D;AACF,2BAAa,aAAa,oBAAoB,OAAO;AACpD,cAAC,aAAqB,MAAM,YAC3B;AAEF,kBAAI,CAAC,IAAI,cAAc,sBAAsB,GAAG;AAC9C,sBAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,sBAAM,KAAK;AACX,sBAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYpB,oBAAI,YAAY,KAAK;AAAA,cACvB;AAAA,YACF;AAAA,UACF,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAGA,sBAAkB;AAGlB,UAAM,WAAW,IAAI,iBAAiB,iBAAiB;AACvD,aAAS,QAAQ,KAAK;AAAA,MACpB,WAAW;AAAA;AAAA,MACX,SAAS;AAAA;AAAA,MACT,eAAe;AAAA;AAAA,IACjB,CAAC;AAED,WAAO,MAAM;AACX,eAAS,WAAW;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,WAAW,iBAAiB,aAAa,UAAU,CAAC;AAC1D;;;APCM,gBAAAC,MAkBF,QAAAC,aAlBE;AA5FC,IAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA;AAAA,EACA,aAAa,CAAC;AAAA,EACd;AAAA,EACA,kBAAkB;AAAA,EAClB,YAAY;AAAA,EACZ,iBAAiB;AAAA,EACjB,OAAAC,SAAQ;AAAA,EACR,yBAAyB;AAC3B,MAAa;AACX,MAAIA,QAAO;AACT,gBAAY;AAAA,EACd;AACA,QAAM,CAAC,iBAAiB,kBAAkB,IAAIC,UAAS,eAAe;AACtE,QAAM,CAAC,sBAAsB,uBAAuB,IAAIA;AAAA,IACtD,CAAC;AAAA,EACH;AACA,QAAM,YAAYC,QAAuB,IAAI;AAE7C,QAAM;AAAA,IACJ,KAAK;AAAA,IACL;AAAA,IACA,WAAW;AAAA,EACb,IAAI,wBAAwB;AAAA,IAC1B,eAAe,WAAW;AACxB,UAAI,CAAC,UAAU,QAAS;AACxB,gBAAU,QAAQ,MAAM,YAAY,kBAAkB,SAAS;AAAA,IACjE;AAAA;AAAA,IAEA,SAAS;AAAA,EACX,CAAC;AAED,QAAM,EAAE,gBAAgB,gBAAgB,IAAI,kBAAkB,YAAY;AAC1E,QAAM,YAAY,QAAQ,MAAM;AAC9B,QAAI,CAAC,kBAAkB,CAAC,gBAAiB,QAAO;AAEhD,WAAO,iCAAiC,aAAoB;AAAA,MAC1D,OAAO;AAAA,MACP,QAAQ,mBAAmB;AAAA,MAC3B,MAAM,CAAC,YACH,SACA;AAAA,QACE,UAAU;AAAA,QACV,YAAY;AAAA,MACd;AAAA,IACN,CAAC;AAAA,EACH,GAAG,CAAC,aAAa,gBAAgB,eAAe,CAAC;AAEjD,QAAM,sBAAsB,QAAQ,MAAM;AACxC,QAAI,CAAC,UAAW,QAAO,SAAS;AAChC,UAAM,kBAAkB,UAAU;AAAA,MAChC;AAAA,IACF,IAAI,CAAC;AAEL,QAAI;AACF,aAAO,WAAW,eAAe;AAAA,IACnC,SAAS,GAAG;AACV,cAAQ,MAAM,CAAC;AACf,aAAO,SAAS;AAAA,IAClB;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,EAAE,iBAAiB,YAAY,gBAAgB,IAAI;AAAA,IACvD;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,mBAAmB;AAAA,IAC9B;AAAA,EACF;AAEA,4CAA0C;AAAA,IACxC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,6CAA2C;AAAA,IACzC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,SAAS;AAAA,IACb,MACE,gBAAAJ;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,OAAO;AAAA,UACL,eAAe,yBACX,uBACE,SACA,SACF;AAAA,UACJ,iBAAiB;AAAA,QACnB;AAAA,QAEA,yBAAyB,EAAE,QAAQ,UAAU;AAAA;AAAA,IAC/C;AAAA,IAEF,CAAC,WAAW,sBAAsB,sBAAsB;AAAA,EAC1D;AAEA,SACE,gBAAAC;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,OAAO;AAAA,QACL,UAAU;AAAA,QACV,iBAAiB;AAAA,QACjB,UAAU;AAAA,QACV,QAAQ,aACJ,aACA,0BAA0B,CAAC,uBACzB,YACA;AAAA,QACN,WAAW;AAAA,QACX,GAAG;AAAA,MACL;AAAA,MACA,aAAa,CAAC,MAAM;AAClB,YAAI,0BAA0B,CAAC,sBAAsB;AACnD,YAAE,eAAe;AACjB,YAAE,gBAAgB;AAClB;AAAA,QACF;AACA,wBAAgB,CAAC;AAAA,MACnB;AAAA,MACA,oBAAoB,CAAC,MAAM;AACzB,YAAI,0BAA0B,CAAC,sBAAsB;AACnD,YAAE,eAAe;AACjB,YAAE,gBAAgB;AAClB;AAAA,QACF;AAAA,MACF;AAAA,MAEC;AAAA,SAAC,wBAAwB,0BACxB,gBAAAD;AAAA,UAAC;AAAA;AAAA,YACC,SAAS,CAAC,MAAM;AACd,gBAAE,eAAe;AACjB,gBAAE,gBAAgB;AAClB,sCAAwB,IAAI;AAAA,YAC9B;AAAA,YACA,OAAO;AAAA,cACL,UAAU;AAAA,cACV,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,QAAQ;AAAA,cACR,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,gBAAgB;AAAA,cAChB,eAAe;AAAA,YACjB;AAAA,YAEA,0BAAAA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO;AAAA,kBACL,iBAAiB;AAAA,kBACjB,OAAO;AAAA,kBACP,SAAS;AAAA,kBACT,cAAc;AAAA,kBACd,UAAU;AAAA,kBACV,YAAY;AAAA,kBACZ,eAAe;AAAA,gBACjB;AAAA,gBACD;AAAA;AAAA,YAED;AAAA;AAAA,QACF;AAAA,QAED,kBACC,gBAAAA;AAAA,UAAC;AAAA;AAAA,YACC,QAAQ;AAAA,YACR,SAAS,MAAM,mBAAmB,CAAC,eAAe;AAAA;AAAA,QACpD;AAAA,QAED;AAAA;AAAA;AAAA,EACH;AAEJ;","names":["useRef","useState","useEffect","useState","debug","useEffect","useRef","useRef","useEffect","useEffect","useRef","su","jsx","jsxs","debug","useState","useRef"]}
+{"version":3,"sources":["../lib/components/SchematicViewer.tsx","../lib/hooks/useChangeSchematicComponentLocationsInSvg.ts","../lib/utils/get-component-offset-due-to-events.ts","../lib/hooks/useChangeSchematicTracesForMovedComponents.ts","../lib/utils/debug.ts","../lib/hooks/use-resize-handling.ts","../lib/hooks/useComponentDragging.ts","../lib/components/EditIcon.tsx"],"sourcesContent":["import { convertCircuitJsonToSchematicSvg } from \"circuit-to-svg\"\nimport { useChangeSchematicComponentLocationsInSvg } from \"lib/hooks/useChangeSchematicComponentLocationsInSvg\"\nimport { useChangeSchematicTracesForMovedComponents } from \"lib/hooks/useChangeSchematicTracesForMovedComponents\"\nimport { enableDebug } from \"lib/utils/debug\"\nimport { useEffect, useMemo, useRef, useState } from \"react\"\nimport {\n  fromString,\n  identity,\n  toString as transformToString,\n} from \"transformation-matrix\"\nimport { useMouseMatrixTransform } from \"use-mouse-matrix-transform\"\nimport { useResizeHandling } from \"../hooks/use-resize-handling\"\nimport { useComponentDragging } from \"../hooks/useComponentDragging\"\nimport type { ManualEditEvent } from \"../types/edit-events\"\nimport { EditIcon } from \"./EditIcon\"\nimport type { CircuitJson } from \"circuit-json\"\n\ninterface Props {\n  circuitJson: CircuitJson\n  containerStyle?: React.CSSProperties\n  editEvents?: ManualEditEvent[]\n  onEditEvent?: (event: ManualEditEvent) => void\n  defaultEditMode?: boolean\n  debugGrid?: boolean\n  editingEnabled?: boolean\n  debug?: boolean\n  clickToInteractEnabled?: boolean\n}\n\nexport const SchematicViewer = ({\n  circuitJson,\n  containerStyle,\n  editEvents: unappliedEditEvents = [],\n  onEditEvent,\n  defaultEditMode = false,\n  debugGrid = false,\n  editingEnabled = false,\n  debug = false,\n  clickToInteractEnabled = false,\n}: Props) => {\n  if (debug) {\n    enableDebug()\n  }\n  const [editModeEnabled, setEditModeEnabled] = useState(defaultEditMode)\n  const [isInteractionEnabled, setIsInteractionEnabled] = useState<boolean>(\n    !clickToInteractEnabled,\n  )\n  const svgDivRef = useRef<HTMLDivElement>(null)\n\n  const [internalEditEvents, setInternalEditEvents] = useState<ManualEditEvent[]>([])\n  const circuitJsonRef = useRef<CircuitJson>(circuitJson)\n\n  const getCircuitHash = (circuitJson: CircuitJson) => {\n    return `${circuitJson?.length || 0}_${(circuitJson as any)?.editCount || 0}`\n  }\n\n  useEffect(() => {\n    const circuitHash = getCircuitHash(circuitJson)\n    const circuitHashRef = getCircuitHash(circuitJsonRef.current)\n\n    if (circuitHash !== circuitHashRef) {\n      setInternalEditEvents([])\n      circuitJsonRef.current = circuitJson\n    }\n  }, [circuitJson])\n\n  const {\n    ref: containerRef,\n    cancelDrag,\n    transform: svgToScreenProjection,\n  } = useMouseMatrixTransform({\n    onSetTransform(transform) {\n      if (!svgDivRef.current) return\n      svgDivRef.current.style.transform = transformToString(transform)\n    },\n    // @ts-ignore disabled is a valid prop but not typed\n    enabled: isInteractionEnabled,\n  })\n\n  const { containerWidth, containerHeight } = useResizeHandling(containerRef)\n  const svgString = useMemo(() => {\n    if (!containerWidth || !containerHeight) return \"\"\n\n    return convertCircuitJsonToSchematicSvg(circuitJson as any, {\n      width: containerWidth,\n      height: containerHeight || 720,\n      grid: !debugGrid\n        ? undefined\n        : {\n            cellSize: 1,\n            labelCells: true,\n          },\n    })\n  }, [circuitJson, containerWidth, containerHeight])\n\n  const realToSvgProjection = useMemo(() => {\n    if (!svgString) return identity()\n    const transformString = svgString.match(\n      /data-real-to-screen-transform=\"([^\"]+)\"/,\n    )?.[1]!\n\n    try {\n      return fromString(transformString)\n    } catch (e) {\n      console.error(e)\n      return identity()\n    }\n  }, [svgString])\n\n  const handleEditEvent = (event: ManualEditEvent) => {\n    setInternalEditEvents((prev) => [...prev, event])\n    if (onEditEvent) {\n      onEditEvent(event)\n    }\n  }\n\n  const editEventsWithUnappliedEditEvents = useMemo(() => {\n    return [...unappliedEditEvents, ...internalEditEvents]\n  }, [unappliedEditEvents, internalEditEvents])\n\n  const { handleMouseDown, isDragging, activeEditEvent } = useComponentDragging(\n    {\n      onEditEvent: handleEditEvent,\n      cancelDrag,\n      realToSvgProjection,\n      svgToScreenProjection,\n      circuitJson,\n      editEvents: editEventsWithUnappliedEditEvents,\n      enabled: editModeEnabled && isInteractionEnabled,\n    },\n  )\n\n  useChangeSchematicComponentLocationsInSvg({\n    svgDivRef,\n    editEvents: editEventsWithUnappliedEditEvents,\n    realToSvgProjection,\n    svgToScreenProjection,\n    activeEditEvent,\n  })\n\n  useChangeSchematicTracesForMovedComponents({\n    svgDivRef,\n    circuitJson,\n    activeEditEvent,\n    editEvents: editEventsWithUnappliedEditEvents,\n  })\n\n  const svgDiv = useMemo(\n    () => (\n      <div\n        ref={svgDivRef}\n        style={{\n          pointerEvents: clickToInteractEnabled\n            ? isInteractionEnabled\n              ? \"auto\"\n              : \"none\"\n            : \"auto\",\n          transformOrigin: \"0 0\",\n        }}\n        // biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>\n        dangerouslySetInnerHTML={{ __html: svgString }}\n      />\n    ),\n    [svgString, isInteractionEnabled, clickToInteractEnabled],\n  )\n\n  return (\n    <div\n      ref={containerRef}\n      style={{\n        position: \"relative\",\n        backgroundColor: \"#F5F1ED\",\n        overflow: \"hidden\",\n        cursor: isDragging\n          ? \"grabbing\"\n          : clickToInteractEnabled && !isInteractionEnabled\n            ? \"pointer\"\n            : \"grab\",\n        minHeight: \"300px\",\n        ...containerStyle,\n      }}\n      onMouseDown={(e) => {\n        if (clickToInteractEnabled && !isInteractionEnabled) {\n          e.preventDefault()\n          e.stopPropagation()\n          return\n        }\n        handleMouseDown(e)\n      }}\n      onMouseDownCapture={(e) => {\n        if (clickToInteractEnabled && !isInteractionEnabled) {\n          e.preventDefault()\n          e.stopPropagation()\n          return\n        }\n      }}\n    >\n      {!isInteractionEnabled && clickToInteractEnabled && (\n        <div\n          onClick={(e) => {\n            e.preventDefault()\n            e.stopPropagation()\n            setIsInteractionEnabled(true)\n          }}\n          style={{\n            position: \"absolute\",\n            inset: 0,\n            cursor: \"pointer\",\n            zIndex: 10,\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            pointerEvents: \"all\",\n          }}\n        >\n          <div\n            style={{\n              backgroundColor: \"rgba(0, 0, 0, 0.8)\",\n              color: \"white\",\n              padding: \"12px 24px\",\n              borderRadius: \"8px\",\n              fontSize: \"16px\",\n              fontFamily: \"sans-serif\",\n              pointerEvents: \"none\",\n            }}\n          >\n            Click to Interact\n          </div>\n        </div>\n      )}\n      {editingEnabled && (\n        <EditIcon\n          active={editModeEnabled}\n          onClick={() => setEditModeEnabled(!editModeEnabled)}\n        />\n      )}\n      {svgDiv}\n    </div>\n  )\n}\n","import { su } from \"@tscircuit/soup-util\"\nimport type {\n  ManualEditEvent,\n  EditSchematicComponentLocationEventWithElement,\n} from \"lib/types/edit-events\"\nimport { type Matrix, compose, applyToPoint } from \"transformation-matrix\"\nimport { useEffect, useRef } from \"react\"\nimport { getComponentOffsetDueToEvents } from \"lib/utils/get-component-offset-due-to-events\"\nimport type { CircuitJson } from \"circuit-json\"\n\n/**\n * This hook automatically applies the edit events to the schematic components\n * inside the svg div.\n *\n * Schematic components are \"<g>\" elements with a \"data-circuit-json-type\"\n * attribute equal to \"schematic_component\", these elements also have a\n * data-schematic-component-id attribute equal to the schematic_component_id\n */\nexport const useChangeSchematicComponentLocationsInSvg = ({\n  svgDivRef,\n  realToSvgProjection,\n  svgToScreenProjection,\n  activeEditEvent,\n  editEvents,\n}: {\n  svgDivRef: React.RefObject<HTMLDivElement | null>\n  realToSvgProjection: Matrix\n  svgToScreenProjection: Matrix\n  activeEditEvent: EditSchematicComponentLocationEventWithElement | null\n  editEvents: ManualEditEvent[]\n}) => {\n  // Keep track of the last known SVG content\n  const lastSvgContentRef = useRef<string | null>(null)\n\n  useEffect(() => {\n    const svg = svgDivRef.current\n    if (!svg) return\n\n    // Create a MutationObserver to watch for changes in the div's content\n    const observer = new MutationObserver((mutations) => {\n      // Check if the SVG content has changed\n      const currentSvgContent = svg.innerHTML\n      if (currentSvgContent !== lastSvgContentRef.current) {\n        lastSvgContentRef.current = currentSvgContent\n\n        // Apply the transforms\n        applyTransforms()\n      }\n    })\n\n    // Function to apply transforms to components\n    const applyTransforms = () => {\n      const componentsThatHaveBeenMoved = new Set<string>()\n      for (const event of editEvents) {\n        if (\n          \"edit_event_type\" in event &&\n          event.edit_event_type === \"edit_schematic_component_location\"\n        ) {\n          componentsThatHaveBeenMoved.add(event.schematic_component_id)\n        }\n      }\n      if (activeEditEvent) {\n        componentsThatHaveBeenMoved.add(activeEditEvent.schematic_component_id)\n      }\n\n      // Reset all transforms\n      const allComponents = svg.querySelectorAll(\n        '[data-circuit-json-type=\"schematic_component\"]',\n      )\n\n      for (const component of Array.from(allComponents)) {\n        const schematic_component_id = component.getAttribute(\n          \"data-schematic-component-id\",\n        )!\n\n        const offsetMm = getComponentOffsetDueToEvents({\n          editEvents: [\n            ...editEvents,\n            ...(activeEditEvent ? [activeEditEvent] : []),\n          ],\n          schematic_component_id,\n        })\n\n        const offsetPx = {\n          x: offsetMm.x * realToSvgProjection.a,\n          y: offsetMm.y * realToSvgProjection.d,\n        }\n\n        const style: any = (component as any).style\n        style.transform = `translate(${offsetPx.x}px, ${offsetPx.y}px)`\n        if (\n          activeEditEvent?.schematic_component_id === schematic_component_id\n        ) {\n          style.outline = \"solid 2px rgba(255,0,0,0.5)\"\n          style.outlineOffset = \"5px\"\n        } else if (style.outline) {\n          style.outline = \"\"\n        }\n      }\n    }\n\n    // Start observing the div for changes\n    observer.observe(svg, {\n      childList: true, // Watch for changes to the child elements\n      subtree: false, // Watch for changes in the entire subtree\n      characterData: false, // Watch for changes to text content\n    })\n\n    // Apply transforms immediately on mount or when editEvents change\n    applyTransforms()\n\n    // Cleanup function\n    return () => {\n      observer.disconnect()\n    }\n  }, [svgDivRef, editEvents, activeEditEvent]) // Dependencies remain the same\n}\n","import type {\n  EditSchematicComponentLocationEvent,\n  EditSchematicComponentLocationEventWithElement,\n  ManualEditEvent,\n} from \"lib/types/edit-events\"\n\n/**\n * Returns the total offset of a component due to a set of edit events in\n * mm\n */\nexport const getComponentOffsetDueToEvents = ({\n  editEvents,\n  schematic_component_id,\n}: {\n  editEvents: ManualEditEvent[]\n  schematic_component_id: string\n}) => {\n  const editEventsForComponent: EditSchematicComponentLocationEvent[] =\n    editEvents\n      .filter(\n        (event) =>\n          \"schematic_component_id\" in event &&\n          event.schematic_component_id === schematic_component_id,\n      )\n      .filter(\n        (event) =>\n          \"edit_event_type\" in event &&\n          event.edit_event_type === \"edit_schematic_component_location\",\n      )\n\n  const totalOffsetX = editEventsForComponent.reduce((acc, event) => {\n    return acc + event.new_center.x - event.original_center.x\n  }, 0)\n\n  const totalOffsetY = editEventsForComponent.reduce((acc, event) => {\n    return acc + event.new_center.y - event.original_center.y\n  }, 0)\n\n  return {\n    x: totalOffsetX,\n    y: totalOffsetY,\n  }\n}\n","import { useEffect, useRef } from \"react\"\nimport { su } from \"@tscircuit/soup-util\"\nimport type { ManualEditEvent } from \"../types/edit-events\"\nimport type { CircuitJson } from \"circuit-json\"\n\n/**\n * This hook makes traces dashed when their connected components are being moved\n */\nexport const useChangeSchematicTracesForMovedComponents = ({\n  svgDivRef,\n  circuitJson,\n  activeEditEvent,\n  editEvents,\n}: {\n  svgDivRef: React.RefObject<HTMLDivElement | null>\n  circuitJson: CircuitJson\n  activeEditEvent: ManualEditEvent | null\n  editEvents: ManualEditEvent[]\n}) => {\n  // Keep track of the last known SVG content\n  const lastSvgContentRef = useRef<string | null>(null)\n\n  useEffect(() => {\n    const svg = svgDivRef.current\n    if (!svg) return\n\n    const updateTraceStyles = () => {\n      // Reset all traces to solid\n      const allTraces = svg.querySelectorAll(\n        '[data-circuit-json-type=\"schematic_trace\"] path',\n      )\n\n      // Reset all traces to solid\n      for (const trace of Array.from(allTraces)) {\n        trace.setAttribute(\"stroke-dasharray\", \"0\")\n        ;(trace as any).style.animation = \"\"\n      }\n\n      // If there's an active edit event, make connected traces dashed\n      for (const editEvent of [\n        ...editEvents,\n        ...(activeEditEvent ? [activeEditEvent] : []),\n      ]) {\n        if (\n          \"schematic_component_id\" in editEvent &&\n          editEvent.edit_event_type === \"edit_schematic_component_location\"\n        ) {\n          const sch_component = su(circuitJson).schematic_component.get(\n            editEvent.schematic_component_id,\n          )\n          if (!sch_component) return\n\n          const src_ports = su(circuitJson).source_port.list({\n            source_component_id: sch_component.source_component_id,\n          })\n          const src_port_ids = new Set(src_ports.map((sp) => sp.source_port_id))\n          const src_traces = su(circuitJson)\n            .source_trace.list()\n            .filter((st) =>\n              st.connected_source_port_ids?.some((spi) =>\n                src_port_ids.has(spi),\n              ),\n            )\n          const src_trace_ids = new Set(\n            src_traces.map((st) => st.source_trace_id),\n          )\n          const schematic_traces = su(circuitJson)\n            .schematic_trace.list()\n            .filter((st) => src_trace_ids.has(st.source_trace_id))\n\n          // Make the connected traces dashed\n          schematic_traces.forEach((trace) => {\n            const traceElements = svg.querySelectorAll(\n              `[data-schematic-trace-id=\"${trace.schematic_trace_id}\"] path`,\n            )\n            for (const traceElement of Array.from(traceElements)) {\n              if (traceElement.getAttribute(\"class\")?.includes(\"invisible\"))\n                continue\n              traceElement.setAttribute(\"stroke-dasharray\", \"20,20\")\n              ;(traceElement as any).style.animation =\n                \"dash-animation 350ms linear infinite, pulse-animation 900ms linear infinite\"\n\n              if (!svg.querySelector(\"style#dash-animation\")) {\n                const style = document.createElement(\"style\")\n                style.id = \"dash-animation\"\n                style.textContent = `\n                  @keyframes dash-animation {\n                    to {\n                      stroke-dashoffset: -40;\n                    }\n                  }\n                  @keyframes pulse-animation {\n                    0% { opacity: 0.6; }\n                    50% { opacity: 0.2; }\n                    100% { opacity: 0.6; }\n                  }\n                `\n                svg.appendChild(style)\n              }\n            }\n          })\n        }\n      }\n    }\n\n    // Apply styles immediately\n    updateTraceStyles()\n\n    // Cleanup function\n    const observer = new MutationObserver(updateTraceStyles)\n    observer.observe(svg, {\n      childList: true, // Watch for changes to the child elements\n      subtree: false, // Watch for changes in the entire subtree\n      characterData: false, // Watch for changes to text content\n    })\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [svgDivRef, activeEditEvent, circuitJson, editEvents])\n}\n","import Debug from \"debug\"\n\nexport const debug = Debug(\"schematic-viewer\")\n\nexport const enableDebug = () => {\n  Debug.enable(\"schematic-viewer*\")\n}\n\nexport default debug\n","import { useEffect, useState } from \"react\"\n\nexport const useResizeHandling = (\n  containerRef: React.RefObject<HTMLElement>,\n) => {\n  const [containerWidth, setContainerWidth] = useState(0)\n  const [containerHeight, setContainerHeight] = useState(0)\n\n  useEffect(() => {\n    if (!containerRef.current) return\n\n    const updateDimensions = () => {\n      const rect = containerRef.current?.getBoundingClientRect()\n      setContainerWidth(rect?.width || 0)\n      setContainerHeight(rect?.height || 0)\n    }\n\n    // Set initial dimensions\n    updateDimensions()\n\n    // Add resize listener\n    const resizeObserver = new ResizeObserver(updateDimensions)\n    resizeObserver.observe(containerRef.current)\n\n    // Fallback to window resize\n    window.addEventListener(\"resize\", updateDimensions)\n\n    return () => {\n      resizeObserver.disconnect()\n      window.removeEventListener(\"resize\", updateDimensions)\n    }\n  }, [])\n\n  return { containerWidth, containerHeight }\n}\n","import { su } from \"@tscircuit/soup-util\"\nimport Debug from \"lib/utils/debug\"\nimport { getComponentOffsetDueToEvents } from \"lib/utils/get-component-offset-due-to-events\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport {\n  type Matrix,\n  compose\n} from \"transformation-matrix\"\nimport type {\n  EditSchematicComponentLocationEventWithElement,\n  ManualEditEvent,\n} from \"../types/edit-events\"\n\nconst debug = Debug.extend(\"useComponentDragging\")\n\nexport const useComponentDragging = ({\n  onEditEvent,\n  editEvents = [],\n  circuitJson,\n  cancelDrag,\n  svgToScreenProjection,\n  realToSvgProjection,\n  enabled = false,\n}: {\n  circuitJson: any[]\n  editEvents: ManualEditEvent[]\n  /** The projection returned from use-mouse-matrix-transform, indicating zoom on svg */\n  svgToScreenProjection: Matrix\n  /** The projection returned from circuit-to-svg, mm to svg */\n  realToSvgProjection: Matrix\n  onEditEvent?: (event: ManualEditEvent) => void\n  cancelDrag?: () => void\n  enabled?: boolean\n}): {\n  handleMouseDown: (e: React.MouseEvent) => void\n  isDragging: boolean\n  activeEditEvent: EditSchematicComponentLocationEventWithElement | null\n} => {\n  const [activeEditEvent, setActiveEditEvent] =\n    useState<EditSchematicComponentLocationEventWithElement | null>(null)\n  const realToScreenProjection = compose(\n    realToSvgProjection,\n    svgToScreenProjection,\n  )\n\n  /**\n   * Drag start position in screen space\n   */\n  const dragStartPosRef = useRef<{\n    x: number\n    y: number\n  } | null>(null)\n\n  const activeEditEventRef =\n    useRef<EditSchematicComponentLocationEventWithElement | null>(null)\n\n  // Store the latest positions of components being tracked\n  const componentPositionsRef = useRef<Map<string, {x: number, y: number}>>(new Map())\n  \n  // Update position map with the latest positions from edit events\n  useEffect(() => {\n    // Process completed edit events to track latest positions\n    editEvents.forEach(event => {\n      if (\n        \"edit_event_type\" in event && \n        event.edit_event_type === \"edit_schematic_component_location\" && \n        !event.in_progress\n      ) {\n        componentPositionsRef.current.set(\n          event.schematic_component_id, \n          {...event.new_center}\n        )\n      }\n    })\n  }, [editEvents])\n\n  const handleMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      if (!enabled) return\n\n      const target = e.target as SVGElement\n      const componentGroup = target.closest(\n        '[data-circuit-json-type=\"schematic_component\"]',\n      )\n      if (!componentGroup) return\n\n      const schematic_component_id = componentGroup.getAttribute(\n        \"data-schematic-component-id\",\n      )\n      if (!schematic_component_id) return\n\n      if (cancelDrag) cancelDrag()\n\n      const schematic_component = su(circuitJson).schematic_component.get(\n        schematic_component_id,\n      )\n      if (!schematic_component) return\n      \n      dragStartPosRef.current = {\n        x: e.clientX,\n        y: e.clientY,\n      }\n\n      // Get the current position of the component\n      // Check if we're already tracking this component\n      let current_position: {x: number, y: number}\n      const trackedPosition = componentPositionsRef.current.get(schematic_component_id)\n      \n      if (trackedPosition) {\n        // Use the tracked position from previous edits\n        current_position = {...trackedPosition}\n      } else {\n        // Calculate position based on component data and edit events\n        const editEventOffset = getComponentOffsetDueToEvents({\n          editEvents,\n          schematic_component_id: schematic_component_id,\n        })\n        \n        current_position = {\n          x: schematic_component.center.x + editEventOffset.x,\n          y: schematic_component.center.y + editEventOffset.y,\n        }\n        \n        // Store this initial position\n        componentPositionsRef.current.set(schematic_component_id, {...current_position})\n      }\n\n      const newEditEvent: EditSchematicComponentLocationEventWithElement = {\n        edit_event_id: Math.random().toString(36).substr(2, 9),\n        edit_event_type: \"edit_schematic_component_location\",\n        schematic_component_id: schematic_component_id,\n        original_center: current_position,\n        new_center: { ...current_position },\n        in_progress: true,\n        created_at: Date.now(),\n        _element: componentGroup as any,\n      }\n\n      activeEditEventRef.current = newEditEvent\n      setActiveEditEvent(newEditEvent)\n    },\n    [cancelDrag, enabled, circuitJson, editEvents],\n  )\n\n  const handleMouseMove = useCallback(\n    (e: MouseEvent) => {\n      if (!activeEditEventRef.current || !dragStartPosRef.current) return\n\n      const screenDelta = {\n        x: e.clientX - dragStartPosRef.current.x,\n        y: e.clientY - dragStartPosRef.current.y,\n      }\n\n      const mmDelta = {\n        x: screenDelta.x / realToScreenProjection.a,\n        y: screenDelta.y / realToScreenProjection.d,\n      }\n\n      const newEditEvent = {\n        ...activeEditEventRef.current,\n        new_center: {\n          x: activeEditEventRef.current.original_center.x + mmDelta.x,\n          y: activeEditEventRef.current.original_center.y + mmDelta.y,\n        },\n      }\n\n      activeEditEventRef.current = newEditEvent\n      setActiveEditEvent(newEditEvent)\n    },\n    [realToScreenProjection],\n  )\n\n  const handleMouseUp = useCallback(() => {\n    if (!activeEditEventRef.current) return\n    const finalEvent = {\n      ...activeEditEventRef.current,\n      in_progress: false,\n    }\n    \n    // Update our stored position for this component\n    componentPositionsRef.current.set(\n      finalEvent.schematic_component_id, \n      {...finalEvent.new_center}\n    )\n    \n    debug(\"handleMouseUp calling onEditEvent with new edit event\", {\n      newEditEvent: finalEvent,\n    })\n    if (onEditEvent) onEditEvent(finalEvent)\n    activeEditEventRef.current = null\n    dragStartPosRef.current = null\n    setActiveEditEvent(null)\n  }, [onEditEvent])\n\n  useEffect(() => {\n    window.addEventListener(\"mousemove\", handleMouseMove)\n    window.addEventListener(\"mouseup\", handleMouseUp)\n    return () => {\n      window.removeEventListener(\"mousemove\", handleMouseMove)\n      window.removeEventListener(\"mouseup\", handleMouseUp)\n    }\n  }, [handleMouseMove, handleMouseUp])\n\n  return {\n    handleMouseDown,\n    isDragging: !!activeEditEventRef.current,\n    activeEditEvent: activeEditEvent,\n  }\n}\n","export const EditIcon = ({\n  onClick,\n  active,\n}: { onClick: () => void; active: boolean }) => {\n  return (\n    <div\n      onClick={onClick}\n      style={{\n        position: \"absolute\",\n        top: \"16px\",\n        right: \"16px\",\n        backgroundColor: active ? \"#4CAF50\" : \"#fff\",\n        color: active ? \"#fff\" : \"#000\",\n        padding: \"8px\",\n        borderRadius: \"4px\",\n        cursor: \"pointer\",\n        boxShadow: \"0 2px 4px rgba(0,0,0,0.1)\",\n        display: \"flex\",\n        alignItems: \"center\",\n        gap: \"4px\",\n        zIndex: 1000,\n      }}\n    >\n      <svg\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n      >\n        <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\" />\n        <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" />\n      </svg>\n    </div>\n  )\n}\n"],"mappings":"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","names":["useEffect","useRef","su","useEffect","useRef","useState","useEffect","su","useEffect","useRef","useState","compose","debug","su","jsx","jsxs","debug","useState","useRef","circuitJson","useEffect"]}

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

@@ -1,29 +1,50 @@
-import { useCallback, useEffect, useState } from "react"
+import { applyEditEventsToManualEditsFile } from "@tscircuit/core"
+import type { CircuitJson } from "circuit-json"
 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"
+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 = useCallback(() => {
+  const rerenderCircuitJson = () => {
     setCircuitJson(
       renderToCircuitJson(
-        <board width="10mm" height="10mm">
-          <resistor name="R1" resistance={1000} schX={4} />
-          <capacitor name="C1" capacitance="1uF" schX={-4} />
+        <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%" }}>
@@ -48,7 +69,9 @@ export default () => {
       </button>
       <button
         type="button"
-        onClick={() => setEditEvents([])}
+        onClick={() => {
+          setEditEvents([])
+        }}
         style={{
           position: "absolute",
           top: "16px",
@@ -85,8 +108,9 @@ export default () => {
         {JSON.stringify(editEvents, null, 2)}
       </pre>
       <SchematicViewer
-        editEvents={editEvents}
-        onEditEvent={(event) => setEditEvents([...editEvents, event])}
+        onEditEvent={(event) => {
+          setEditEvents((prev) => [...prev, event])
+        }}
         circuitJson={circuitJson ?? []}
         containerStyle={{ height: "100%" }}
         debugGrid

package/lib/components/SchematicViewer.tsx

@@ -1,22 +1,22 @@
-import { useMouseMatrixTransform } from "use-mouse-matrix-transform"
 import { convertCircuitJsonToSchematicSvg } from "circuit-to-svg"
-import { useMemo, useRef, useState } from "react"
-import { EditIcon } from "./EditIcon"
-import { useResizeHandling } from "../hooks/use-resize-handling"
-import { useComponentDragging } from "../hooks/useComponentDragging"
-import type { ManualEditEvent } from "../types/edit-events"
+import { useChangeSchematicComponentLocationsInSvg } from "lib/hooks/useChangeSchematicComponentLocationsInSvg"
+import { useChangeSchematicTracesForMovedComponents } from "lib/hooks/useChangeSchematicTracesForMovedComponents"
+import { enableDebug } from "lib/utils/debug"
+import { useEffect, useMemo, useRef, useState } from "react"
 import {
-  identity,
   fromString,
+  identity,
   toString as transformToString,
 } from "transformation-matrix"
-import { useChangeSchematicComponentLocationsInSvg } from "lib/hooks/useChangeSchematicComponentLocationsInSvg"
-import { useChangeSchematicTracesForMovedComponents } from "lib/hooks/useChangeSchematicTracesForMovedComponents"
+import { useMouseMatrixTransform } from "use-mouse-matrix-transform"
+import { useResizeHandling } from "../hooks/use-resize-handling"
+import { useComponentDragging } from "../hooks/useComponentDragging"
+import type { ManualEditEvent } from "../types/edit-events"
+import { EditIcon } from "./EditIcon"
 import type { CircuitJson } from "circuit-json"
-import { enableDebug } from "lib/utils/debug"
 
 interface Props {
-  circuitJson: any[]
+  circuitJson: CircuitJson
   containerStyle?: React.CSSProperties
   editEvents?: ManualEditEvent[]
   onEditEvent?: (event: ManualEditEvent) => void
@@ -30,7 +30,7 @@ interface Props {
 export const SchematicViewer = ({
   circuitJson,
   containerStyle,
-  editEvents = [],
+  editEvents: unappliedEditEvents = [],
   onEditEvent,
   defaultEditMode = false,
   debugGrid = false,
@@ -47,6 +47,23 @@ export const SchematicViewer = ({
   )
   const svgDivRef = useRef<HTMLDivElement>(null)
 
+  const [internalEditEvents, setInternalEditEvents] = useState<ManualEditEvent[]>([])
+  const circuitJsonRef = useRef<CircuitJson>(circuitJson)
+
+  const getCircuitHash = (circuitJson: CircuitJson) => {
+    return `${circuitJson?.length || 0}_${(circuitJson as any)?.editCount || 0}`
+  }
+
+  useEffect(() => {
+    const circuitHash = getCircuitHash(circuitJson)
+    const circuitHashRef = getCircuitHash(circuitJsonRef.current)
+
+    if (circuitHash !== circuitHashRef) {
+      setInternalEditEvents([])
+      circuitJsonRef.current = circuitJson
+    }
+  }, [circuitJson])
+
   const {
     ref: containerRef,
     cancelDrag,
@@ -90,21 +107,32 @@ export const SchematicViewer = ({
     }
   }, [svgString])
 
+  const handleEditEvent = (event: ManualEditEvent) => {
+    setInternalEditEvents((prev) => [...prev, event])
+    if (onEditEvent) {
+      onEditEvent(event)
+    }
+  }
+
+  const editEventsWithUnappliedEditEvents = useMemo(() => {
+    return [...unappliedEditEvents, ...internalEditEvents]
+  }, [unappliedEditEvents, internalEditEvents])
+
   const { handleMouseDown, isDragging, activeEditEvent } = useComponentDragging(
     {
-      onEditEvent,
+      onEditEvent: handleEditEvent,
       cancelDrag,
       realToSvgProjection,
       svgToScreenProjection,
       circuitJson,
-      editEvents,
+      editEvents: editEventsWithUnappliedEditEvents,
       enabled: editModeEnabled && isInteractionEnabled,
     },
   )
 
   useChangeSchematicComponentLocationsInSvg({
     svgDivRef,
-    editEvents,
+    editEvents: editEventsWithUnappliedEditEvents,
     realToSvgProjection,
     svgToScreenProjection,
     activeEditEvent,
@@ -114,7 +142,7 @@ export const SchematicViewer = ({
     svgDivRef,
     circuitJson,
     activeEditEvent,
-    editEvents,
+    editEvents: editEventsWithUnappliedEditEvents,
   })
 
   const svgDiv = useMemo(

package/lib/dev/render-to-circuit-json.ts

@@ -1,7 +1,8 @@
 import * as Core from "@tscircuit/core"
+import type { CircuitJson } from "circuit-json"
 
 export const renderToCircuitJson = (board: React.ReactElement) => {
   const circuit = new Core.Circuit()
   circuit.add(board)
-  return circuit.getCircuitJson()
+  return circuit.getCircuitJson() as CircuitJson
 }

package/lib/hooks/useComponentDragging.ts

@@ -54,6 +54,26 @@ export const useComponentDragging = ({
   const activeEditEventRef =
     useRef<EditSchematicComponentLocationEventWithElement | null>(null)
 
+  // Store the latest positions of components being tracked
+  const componentPositionsRef = useRef<Map<string, {x: number, y: number}>>(new Map())
+  
+  // Update position map with the latest positions from edit events
+  useEffect(() => {
+    // Process completed edit events to track latest positions
+    editEvents.forEach(event => {
+      if (
+        "edit_event_type" in event && 
+        event.edit_event_type === "edit_schematic_component_location" && 
+        !event.in_progress
+      ) {
+        componentPositionsRef.current.set(
+          event.schematic_component_id, 
+          {...event.new_center}
+        )
+      }
+    })
+  }, [editEvents])
+
   const handleMouseDown = useCallback(
     (e: React.MouseEvent) => {
       if (!enabled) return
@@ -75,19 +95,34 @@ export const useComponentDragging = ({
         schematic_component_id,
       )
       if (!schematic_component) return
-      const editEventOffset = getComponentOffsetDueToEvents({
-        editEvents,
-        schematic_component_id: schematic_component_id,
-      })
-
+      
       dragStartPosRef.current = {
         x: e.clientX,
         y: e.clientY,
       }
 
-      const current_position = {
-        x: schematic_component.center.x + editEventOffset.x,
-        y: schematic_component.center.y + editEventOffset.y,
+      // Get the current position of the component
+      // Check if we're already tracking this component
+      let current_position: {x: number, y: number}
+      const trackedPosition = componentPositionsRef.current.get(schematic_component_id)
+      
+      if (trackedPosition) {
+        // Use the tracked position from previous edits
+        current_position = {...trackedPosition}
+      } else {
+        // Calculate position based on component data and edit events
+        const editEventOffset = getComponentOffsetDueToEvents({
+          editEvents,
+          schematic_component_id: schematic_component_id,
+        })
+        
+        current_position = {
+          x: schematic_component.center.x + editEventOffset.x,
+          y: schematic_component.center.y + editEventOffset.y,
+        }
+        
+        // Store this initial position
+        componentPositionsRef.current.set(schematic_component_id, {...current_position})
       }
 
       const newEditEvent: EditSchematicComponentLocationEventWithElement = {
@@ -102,6 +137,7 @@ export const useComponentDragging = ({
       }
 
       activeEditEventRef.current = newEditEvent
+      setActiveEditEvent(newEditEvent)
     },
     [cancelDrag, enabled, circuitJson, editEvents],
   )
@@ -140,6 +176,13 @@ export const useComponentDragging = ({
       ...activeEditEventRef.current,
       in_progress: false,
     }
+    
+    // Update our stored position for this component
+    componentPositionsRef.current.set(
+      finalEvent.schematic_component_id, 
+      {...finalEvent.new_center}
+    )
+    
     debug("handleMouseUp calling onEditEvent with new edit event", {
       newEditEvent: finalEvent,
     })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/schematic-viewer",
-  "version": "2.0.14",
+  "version": "2.0.15",
   "main": "dist/index.js",
   "type": "module",
   "scripts": {
@@ -14,13 +14,13 @@
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
     "@tscircuit/core": "^0.0.362",
-    "@tscircuit/props": "^0.0.113",
+    "@tscircuit/props": "^0.0.172",
     "@types/bun": "latest",
     "@types/debug": "^4.1.12",
     "@types/react": "^19.0.1",
     "@types/react-dom": "^19.0.2",
     "@vitejs/plugin-react": "^4.3.4",
-    "circuit-json": "^0.0.117",
+    "circuit-json": "^0.0.154",
     "circuit-to-svg": "^0.0.96",
     "react": "18",
     "react-cosmos": "^6.2.1",