@tscircuit/schematic-viewer 2.0.33 → 2.0.35

package/dist/index.d.ts

@@ -15,7 +15,8 @@ interface Props {
     clickToInteractEnabled?: boolean;
     colorOverrides?: ColorOverrides;
     spiceSimulationEnabled?: boolean;
+    disableGroups?: boolean;
 }
-declare const SchematicViewer: ({ circuitJson, containerStyle, editEvents: unappliedEditEvents, onEditEvent, defaultEditMode, debugGrid, editingEnabled, debug, clickToInteractEnabled, colorOverrides, spiceSimulationEnabled, }: Props) => react_jsx_runtime.JSX.Element;
+declare const SchematicViewer: ({ circuitJson, containerStyle, editEvents: unappliedEditEvents, onEditEvent, defaultEditMode, debugGrid, editingEnabled, debug, clickToInteractEnabled, colorOverrides, spiceSimulationEnabled, disableGroups, }: Props) => react_jsx_runtime.JSX.Element;
 
 export { SchematicViewer };

package/dist/index.js

@@ -523,27 +523,23 @@ var useComponentDragging = ({
       }
     });
   }, [editEvents]);
-  const handleMouseDown = useCallback(
-    (e) => {
-      if (!enabled) return;
-      const target = e.target;
+  const startDrag = useCallback(
+    (clientX, clientY, target) => {
+      if (!enabled) return false;
       const componentGroup = target.closest(
         '[data-circuit-json-type="schematic_component"]'
       );
-      if (!componentGroup) return;
+      if (!componentGroup) return false;
       const schematic_component_id = componentGroup.getAttribute(
         "data-schematic-component-id"
       );
-      if (!schematic_component_id) return;
+      if (!schematic_component_id) return false;
       if (cancelDrag) cancelDrag();
       const schematic_component = su4(circuitJson).schematic_component.get(
         schematic_component_id
       );
-      if (!schematic_component) return;
-      dragStartPosRef.current = {
-        x: e.clientX,
-        y: e.clientY
-      };
+      if (!schematic_component) return false;
+      dragStartPosRef.current = { x: clientX, y: clientY };
       let current_position;
       const trackedPosition = componentPositionsRef.current.get(
         schematic_component_id
@@ -575,15 +571,32 @@ var useComponentDragging = ({
       };
       activeEditEventRef.current = newEditEvent;
       setActiveEditEvent(newEditEvent);
+      return true;
     },
     [cancelDrag, enabled, circuitJson, editEvents]
   );
-  const handleMouseMove = useCallback(
+  const handleMouseDown = useCallback(
+    (e) => {
+      startDrag(e.clientX, e.clientY, e.target);
+    },
+    [startDrag]
+  );
+  const handleTouchStart = useCallback(
     (e) => {
+      if (e.touches.length !== 1) return;
+      const touch = e.touches[0];
+      if (startDrag(touch.clientX, touch.clientY, e.target)) {
+        e.preventDefault();
+      }
+    },
+    [startDrag]
+  );
+  const updateDragPosition = useCallback(
+    (clientX, clientY) => {
       if (!activeEditEventRef.current || !dragStartPosRef.current) return;
       const screenDelta = {
-        x: e.clientX - dragStartPosRef.current.x,
-        y: e.clientY - dragStartPosRef.current.y
+        x: clientX - dragStartPosRef.current.x,
+        y: clientY - dragStartPosRef.current.y
       };
       const mmDelta = {
         x: screenDelta.x / realToScreenProjection.a,
@@ -606,7 +619,20 @@ var useComponentDragging = ({
     },
     [realToScreenProjection, snapToGrid]
   );
-  const handleMouseUp = useCallback(() => {
+  const handleMouseMove = useCallback(
+    (e) => updateDragPosition(e.clientX, e.clientY),
+    [updateDragPosition]
+  );
+  const handleTouchMove = useCallback(
+    (e) => {
+      if (e.touches.length !== 1 || !activeEditEventRef.current) return;
+      e.preventDefault();
+      const touch = e.touches[0];
+      updateDragPosition(touch.clientX, touch.clientY);
+    },
+    [updateDragPosition]
+  );
+  const endDrag = useCallback(() => {
     if (!activeEditEventRef.current) return;
     const finalEvent = {
       ...activeEditEventRef.current,
@@ -615,7 +641,7 @@ var useComponentDragging = ({
     componentPositionsRef.current.set(finalEvent.schematic_component_id, {
       ...finalEvent.new_center
     });
-    debug2("handleMouseUp calling onEditEvent with new edit event", {
+    debug2("endDrag calling onEditEvent with new edit event", {
       newEditEvent: finalEvent
     });
     if (onEditEvent) onEditEvent(finalEvent);
@@ -623,16 +649,23 @@ var useComponentDragging = ({
     dragStartPosRef.current = null;
     setActiveEditEvent(null);
   }, [onEditEvent]);
+  const handleMouseUp = useCallback(() => endDrag(), [endDrag]);
+  const handleTouchEnd = useCallback(() => endDrag(), [endDrag]);
   useEffect5(() => {
     window.addEventListener("mousemove", handleMouseMove);
     window.addEventListener("mouseup", handleMouseUp);
+    window.addEventListener("touchmove", handleTouchMove, { passive: false });
+    window.addEventListener("touchend", handleTouchEnd);
     return () => {
       window.removeEventListener("mousemove", handleMouseMove);
       window.removeEventListener("mouseup", handleMouseUp);
+      window.removeEventListener("touchmove", handleTouchMove);
+      window.removeEventListener("touchend", handleTouchEnd);
     };
-  }, [handleMouseMove, handleMouseUp]);
+  }, [handleMouseMove, handleMouseUp, handleTouchMove, handleTouchEnd]);
   return {
     handleMouseDown,
+    handleTouchStart,
     isDragging: !!activeEditEventRef.current,
     activeEditEvent
   };
@@ -655,10 +688,15 @@ var EditIcon = ({
   onClick,
   active
 }) => {
+  const handleInteraction = (e) => {
+    e.preventDefault();
+    onClick();
+  };
   return /* @__PURE__ */ jsx(
     "div",
     {
-      onClick,
+      onClick: handleInteraction,
+      onTouchEnd: handleInteraction,
       style: {
         position: "absolute",
         top: "16px",
@@ -699,10 +737,15 @@ var GridIcon = ({
   onClick,
   active
 }) => {
+  const handleInteraction = (e) => {
+    e.preventDefault();
+    onClick();
+  };
   return /* @__PURE__ */ jsx2(
     "div",
     {
-      onClick,
+      onClick: handleInteraction,
+      onTouchEnd: handleInteraction,
       style: {
         position: "absolute",
         top: "56px",
@@ -1618,6 +1661,25 @@ var getSpiceFromCircuitJson = (circuitJson, options) => {
   return finalLines.join("\n");
 };
 
+// lib/hooks/useLocalStorage.ts
+import { useCallback as useCallback2 } from "react";
+var getStoredBoolean = (key, defaultValue) => {
+  if (typeof window === "undefined") return defaultValue;
+  try {
+    const stored = localStorage.getItem(key);
+    return stored !== null ? JSON.parse(stored) : defaultValue;
+  } catch {
+    return defaultValue;
+  }
+};
+var setStoredBoolean = (key, value) => {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.setItem(key, JSON.stringify(value));
+  } catch {
+  }
+};
+
 // lib/components/SchematicViewer.tsx
 import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var SchematicViewer = ({
@@ -1631,7 +1693,8 @@ var SchematicViewer = ({
   debug: debug3 = false,
   clickToInteractEnabled = false,
   colorOverrides,
-  spiceSimulationEnabled = false
+  spiceSimulationEnabled = false,
+  disableGroups = false
 }) => {
   if (debug3) {
     enableDebug();
@@ -1678,7 +1741,10 @@ var SchematicViewer = ({
     !clickToInteractEnabled
   );
   const [showViewMenu, setShowViewMenu] = useState5(false);
-  const [showSchematicGroups, setShowSchematicGroups] = useState5(false);
+  const [showSchematicGroups, setShowSchematicGroups] = useState5(() => {
+    if (disableGroups) return false;
+    return getStoredBoolean("schematic_viewer_show_groups", false);
+  });
   const svgDivRef = useRef4(null);
   const touchStartRef = useRef4(null);
   const handleTouchStart = (e) => {
@@ -1762,18 +1828,21 @@ var SchematicViewer = ({
   const editEventsWithUnappliedEditEvents = useMemo3(() => {
     return [...unappliedEditEvents, ...internalEditEvents];
   }, [unappliedEditEvents, internalEditEvents]);
-  const { handleMouseDown, isDragging, activeEditEvent } = useComponentDragging(
-    {
-      onEditEvent: handleEditEvent,
-      cancelDrag,
-      realToSvgProjection,
-      svgToScreenProjection,
-      circuitJson,
-      editEvents: editEventsWithUnappliedEditEvents,
-      enabled: editModeEnabled && isInteractionEnabled && !showSpiceOverlay,
-      snapToGrid
-    }
-  );
+  const {
+    handleMouseDown,
+    handleTouchStart: handleComponentTouchStart,
+    isDragging,
+    activeEditEvent
+  } = useComponentDragging({
+    onEditEvent: handleEditEvent,
+    cancelDrag,
+    realToSvgProjection,
+    svgToScreenProjection,
+    circuitJson,
+    editEvents: editEventsWithUnappliedEditEvents,
+    enabled: editModeEnabled && isInteractionEnabled && !showSpiceOverlay,
+    snapToGrid
+  });
   useChangeSchematicComponentLocationsInSvg({
     svgDivRef,
     editEvents: editEventsWithUnappliedEditEvents,
@@ -1791,7 +1860,7 @@ var SchematicViewer = ({
     svgDivRef,
     circuitJson,
     circuitJsonKey,
-    showGroups: showSchematicGroups
+    showGroups: showSchematicGroups && !disableGroups
   });
   const svgDiv = useMemo3(
     () => /* @__PURE__ */ jsx9(
@@ -1802,10 +1871,22 @@ var SchematicViewer = ({
           pointerEvents: clickToInteractEnabled ? isInteractionEnabled ? "auto" : "none" : "auto",
           transformOrigin: "0 0"
         },
+        onTouchStart: (e) => {
+          if (editModeEnabled && isInteractionEnabled && !showSpiceOverlay) {
+            handleComponentTouchStart(e);
+          }
+        },
         dangerouslySetInnerHTML: { __html: svgString }
       }
     ),
-    [svgString, isInteractionEnabled, clickToInteractEnabled]
+    [
+      svgString,
+      isInteractionEnabled,
+      clickToInteractEnabled,
+      editModeEnabled,
+      showSpiceOverlay,
+      handleComponentTouchStart
+    ]
   );
   return /* @__PURE__ */ jsxs6(
     "div",
@@ -1913,7 +1994,12 @@ var SchematicViewer = ({
             isVisible: showViewMenu,
             onClose: () => setShowViewMenu(false),
             showGroups: showSchematicGroups,
-            onToggleGroups: setShowSchematicGroups
+            onToggleGroups: (value) => {
+              if (!disableGroups) {
+                setShowSchematicGroups(value);
+                setStoredBoolean("schematic_viewer_show_groups", value);
+              }
+            }
           }
         ),
         spiceSimulationEnabled && /* @__PURE__ */ jsx9(SpiceSimulationIcon, { onClick: () => setShowSpiceOverlay(true) }),