@tscircuit/schematic-viewer 2.0.33 → 2.0.35

package/lib/components/EditIcon.tsx

@@ -4,9 +4,15 @@ export const EditIcon = ({
   onClick,
   active,
 }: { onClick: () => void; active: boolean }) => {
+  const handleInteraction = (e: React.MouseEvent | React.TouchEvent) => {
+    e.preventDefault()
+    onClick()
+  }
+
   return (
     <div
-      onClick={onClick}
+      onClick={handleInteraction}
+      onTouchEnd={handleInteraction}
       style={{
         position: "absolute",
         top: "16px",

package/lib/components/GridIcon.tsx

@@ -4,9 +4,15 @@ export const GridIcon = ({
   onClick,
   active,
 }: { onClick: () => void; active: boolean }) => {
+  const handleInteraction = (e: React.MouseEvent | React.TouchEvent) => {
+    e.preventDefault()
+    onClick()
+  }
+
   return (
     <div
-      onClick={onClick}
+      onClick={handleInteraction}
+      onTouchEnd={handleInteraction}
       style={{
         position: "absolute",
         top: "56px",

package/lib/components/SchematicViewer.tsx

@@ -26,6 +26,7 @@ import { SpiceSimulationOverlay } from "./SpiceSimulationOverlay"
 import { zIndexMap } from "../utils/z-index-map"
 import { useSpiceSimulation } from "../hooks/useSpiceSimulation"
 import { getSpiceFromCircuitJson } from "../utils/spice-utils"
+import { getStoredBoolean, setStoredBoolean } from "lib/hooks/useLocalStorage"
 
 interface Props {
   circuitJson: CircuitJson
@@ -39,6 +40,7 @@ interface Props {
   clickToInteractEnabled?: boolean
   colorOverrides?: ColorOverrides
   spiceSimulationEnabled?: boolean
+  disableGroups?: boolean
 }
 
 export const SchematicViewer = ({
@@ -53,6 +55,7 @@ export const SchematicViewer = ({
   clickToInteractEnabled = false,
   colorOverrides,
   spiceSimulationEnabled = false,
+  disableGroups = false,
 }: Props) => {
   if (debug) {
     enableDebug()
@@ -102,7 +105,10 @@ export const SchematicViewer = ({
     !clickToInteractEnabled,
   )
   const [showViewMenu, setShowViewMenu] = useState(false)
-  const [showSchematicGroups, setShowSchematicGroups] = useState(false)
+  const [showSchematicGroups, setShowSchematicGroups] = useState(() => {
+    if (disableGroups) return false
+    return getStoredBoolean("schematic_viewer_show_groups", false)
+  })
   const svgDivRef = useRef<HTMLDivElement>(null)
   const touchStartRef = useRef<{ x: number; y: number } | null>(null)
 
@@ -207,18 +213,21 @@ export const SchematicViewer = ({
     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,
@@ -240,7 +249,7 @@ export const SchematicViewer = ({
     svgDivRef,
     circuitJson,
     circuitJsonKey,
-    showGroups: showSchematicGroups,
+    showGroups: showSchematicGroups && !disableGroups,
   })
 
   const svgDiv = useMemo(
@@ -255,11 +264,23 @@ export const SchematicViewer = ({
             : "auto",
           transformOrigin: "0 0",
         }}
+        onTouchStart={(e) => {
+          if (editModeEnabled && isInteractionEnabled && !showSpiceOverlay) {
+            handleComponentTouchStart(e)
+          }
+        }}
         // biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>
         dangerouslySetInnerHTML={{ __html: svgString }}
       />
     ),
-    [svgString, isInteractionEnabled, clickToInteractEnabled],
+    [
+      svgString,
+      isInteractionEnabled,
+      clickToInteractEnabled,
+      editModeEnabled,
+      showSpiceOverlay,
+      handleComponentTouchStart,
+    ],
   )
 
   return (
@@ -367,7 +388,12 @@ export const SchematicViewer = ({
         isVisible={showViewMenu}
         onClose={() => setShowViewMenu(false)}
         showGroups={showSchematicGroups}
-        onToggleGroups={setShowSchematicGroups}
+        onToggleGroups={(value) => {
+          if (!disableGroups) {
+            setShowSchematicGroups(value)
+            setStoredBoolean("schematic_viewer_show_groups", value)
+          }
+        }}
       />
       {spiceSimulationEnabled && (
         <SpiceSimulationIcon onClick={() => setShowSpiceOverlay(true)} />

package/lib/hooks/useComponentDragging.ts

@@ -32,6 +32,7 @@ export const useComponentDragging = ({
   snapToGrid?: boolean
 }): {
   handleMouseDown: (e: React.MouseEvent) => void
+  handleTouchStart: (e: React.TouchEvent) => void
   isDragging: boolean
   activeEditEvent: EditSchematicComponentLocationEventWithElement | null
 } => {
@@ -74,45 +75,37 @@ export const useComponentDragging = ({
     })
   }, [editEvents])
 
-  const handleMouseDown = useCallback(
-    (e: React.MouseEvent) => {
-      if (!enabled) return
+  const startDrag = useCallback(
+    (clientX: number, clientY: number, target: Element) => {
+      if (!enabled) return false
 
-      const target = e.target as SVGElement
       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 = su(circuitJson).schematic_component.get(
         schematic_component_id,
       )
-      if (!schematic_component) return
+      if (!schematic_component) return false
 
-      dragStartPosRef.current = {
-        x: e.clientX,
-        y: e.clientY,
-      }
+      dragStartPosRef.current = { x: clientX, y: clientY }
 
-      // 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,
@@ -123,7 +116,6 @@ export const useComponentDragging = ({
           y: schematic_component.center.y + editEventOffset.y,
         }
 
-        // Store this initial position
         componentPositionsRef.current.set(schematic_component_id, {
           ...current_position,
         })
@@ -142,17 +134,36 @@ export const useComponentDragging = ({
 
       activeEditEventRef.current = newEditEvent
       setActiveEditEvent(newEditEvent)
+      return true
     },
     [cancelDrag, enabled, circuitJson, editEvents],
   )
 
-  const handleMouseMove = useCallback(
-    (e: MouseEvent) => {
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      startDrag(e.clientX, e.clientY, e.target as Element)
+    },
+    [startDrag],
+  )
+
+  const handleTouchStart = useCallback(
+    (e: React.TouchEvent) => {
+      if (e.touches.length !== 1) return
+      const touch = e.touches[0]
+      if (startDrag(touch.clientX, touch.clientY, e.target as Element)) {
+        e.preventDefault()
+      }
+    },
+    [startDrag],
+  )
+
+  const updateDragPosition = useCallback(
+    (clientX: number, clientY: number) => {
       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 = {
@@ -180,19 +191,33 @@ export const useComponentDragging = ({
     [realToScreenProjection, snapToGrid],
   )
 
-  const handleMouseUp = useCallback(() => {
+  const handleMouseMove = useCallback(
+    (e: MouseEvent) => updateDragPosition(e.clientX, e.clientY),
+    [updateDragPosition],
+  )
+
+  const handleTouchMove = useCallback(
+    (e: TouchEvent) => {
+      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,
       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", {
+    debug("endDrag calling onEditEvent with new edit event", {
       newEditEvent: finalEvent,
     })
     if (onEditEvent) onEditEvent(finalEvent)
@@ -201,17 +226,25 @@ export const useComponentDragging = ({
     setActiveEditEvent(null)
   }, [onEditEvent])
 
+  const handleMouseUp = useCallback(() => endDrag(), [endDrag])
+  const handleTouchEnd = useCallback(() => endDrag(), [endDrag])
+
   useEffect(() => {
     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: activeEditEvent,
   }

package/lib/hooks/useLocalStorage.ts

@@ -0,0 +1,63 @@
+import { useCallback } from "react"
+
+export const STORAGE_KEYS = {
+  IS_SHOWING_SCHEMATIC_GROUPS: "schematic_viewer_show_groups",
+} as const
+
+export const getStoredBoolean = (
+  key: string,
+  defaultValue: boolean,
+): boolean => {
+  if (typeof window === "undefined") return defaultValue
+  try {
+    const stored = localStorage.getItem(key)
+    return stored !== null ? JSON.parse(stored) : defaultValue
+  } catch {
+    return defaultValue
+  }
+}
+
+export const setStoredBoolean = (key: string, value: boolean): void => {
+  if (typeof window === "undefined") return
+  try {
+    localStorage.setItem(key, JSON.stringify(value))
+  } catch {}
+}
+
+export const useLocalStorage = () => {
+  const getBoolean = useCallback(
+    (key: string, defaultValue: boolean): boolean => {
+      return getStoredBoolean(key, defaultValue)
+    },
+    [],
+  )
+
+  const setBoolean = useCallback((key: string, value: boolean): void => {
+    setStoredBoolean(key, value)
+  }, [])
+
+  return {
+    getBoolean,
+    setBoolean,
+  }
+}
+
+export const useLocalStorageValue = (key: string, defaultValue: boolean) => {
+  const { getBoolean, setBoolean } = useLocalStorage()
+
+  const getValue = useCallback(() => {
+    return getBoolean(key, defaultValue)
+  }, [getBoolean, key, defaultValue])
+
+  const setValue = useCallback(
+    (value: boolean) => {
+      setBoolean(key, value)
+    },
+    [setBoolean, key],
+  )
+
+  return {
+    getValue,
+    setValue,
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/schematic-viewer",
-  "version": "2.0.33",
+  "version": "2.0.35",
   "main": "dist/index.js",
   "type": "module",
   "scripts": {