@tscircuit/schematic-viewer 2.0.56 → 2.0.57

package/lib/components/ViewMenuIcon.tsx

@@ -1,47 +0,0 @@
-import { zIndexMap } from "../utils/z-index-map"
-
-export const ViewMenuIcon = ({
-  onClick,
-  active,
-}: { onClick: () => void; active: boolean }) => {
-  const handleInteraction = (e: React.MouseEvent | React.TouchEvent) => {
-    e.preventDefault()
-    onClick()
-  }
-
-  return (
-    <div
-      onClick={handleInteraction}
-      onTouchEnd={handleInteraction}
-      title={active ? "Hide view menu" : "Show view menu"}
-      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: zIndexMap.viewMenuIcon,
-      }}
-    >
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-      >
-        <circle cx="12" cy="12" r="1" />
-        <circle cx="12" cy="5" r="1" />
-        <circle cx="12" cy="19" r="1" />
-      </svg>
-    </div>
-  )
-}

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

@@ -1,8 +0,0 @@
-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() as CircuitJson
-}

package/lib/hooks/use-resize-handling.ts

@@ -1,35 +0,0 @@
-import { useEffect, useState } from "react"
-
-export const useResizeHandling = (
-  containerRef: React.RefObject<HTMLElement>,
-) => {
-  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)
-    }
-
-    // Set initial dimensions
-    updateDimensions()
-
-    // Add resize listener
-    const resizeObserver = new ResizeObserver(updateDimensions)
-    resizeObserver.observe(containerRef.current)
-
-    // Fallback to window resize
-    window.addEventListener("resize", updateDimensions)
-
-    return () => {
-      resizeObserver.disconnect()
-      window.removeEventListener("resize", updateDimensions)
-    }
-  }, [])
-
-  return { containerWidth, containerHeight }
-}

package/lib/hooks/useChangeSchematicComponentLocationsInSvg.ts

@@ -1,117 +0,0 @@
-import { su } from "@tscircuit/soup-util"
-import type {
-  ManualEditEvent,
-  EditSchematicComponentLocationEventWithElement,
-} from "lib/types/edit-events"
-import { type Matrix, compose, applyToPoint } from "transformation-matrix"
-import { useEffect, useRef } from "react"
-import { getComponentOffsetDueToEvents } from "lib/utils/get-component-offset-due-to-events"
-import type { CircuitJson } from "circuit-json"
-
-/**
- * This hook automatically applies the edit events to the schematic components
- * inside the svg div.
- *
- * Schematic components are "<g>" elements with a "data-circuit-json-type"
- * attribute equal to "schematic_component", these elements also have a
- * data-schematic-component-id attribute equal to the schematic_component_id
- */
-export const useChangeSchematicComponentLocationsInSvg = ({
-  svgDivRef,
-  realToSvgProjection,
-  svgToScreenProjection,
-  activeEditEvent,
-  editEvents,
-}: {
-  svgDivRef: React.RefObject<HTMLDivElement | null>
-  realToSvgProjection: Matrix
-  svgToScreenProjection: Matrix
-  activeEditEvent: EditSchematicComponentLocationEventWithElement | null
-  editEvents: ManualEditEvent[]
-}) => {
-  // Keep track of the last known SVG content
-  const lastSvgContentRef = useRef<string | null>(null)
-
-  useEffect(() => {
-    const svg = svgDivRef.current
-    if (!svg) return
-
-    // Create a MutationObserver to watch for changes in the div's content
-    const observer = new MutationObserver((mutations) => {
-      // Check if the SVG content has changed
-      const currentSvgContent = svg.innerHTML
-      if (currentSvgContent !== lastSvgContentRef.current) {
-        lastSvgContentRef.current = currentSvgContent
-
-        // Apply the transforms
-        applyTransforms()
-      }
-    })
-
-    // Function to apply transforms to components
-    const applyTransforms = () => {
-      const componentsThatHaveBeenMoved = new Set<string>()
-      for (const event of editEvents) {
-        if (
-          "edit_event_type" in event &&
-          event.edit_event_type === "edit_schematic_component_location"
-        ) {
-          componentsThatHaveBeenMoved.add(event.schematic_component_id)
-        }
-      }
-      if (activeEditEvent) {
-        componentsThatHaveBeenMoved.add(activeEditEvent.schematic_component_id)
-      }
-
-      // Reset all transforms
-      const allComponents = svg.querySelectorAll(
-        '[data-circuit-json-type="schematic_component"]',
-      )
-
-      for (const component of Array.from(allComponents)) {
-        const schematic_component_id = component.getAttribute(
-          "data-schematic-component-id",
-        )!
-
-        const offsetMm = getComponentOffsetDueToEvents({
-          editEvents: [
-            ...editEvents,
-            ...(activeEditEvent ? [activeEditEvent] : []),
-          ],
-          schematic_component_id,
-        })
-
-        const offsetPx = {
-          x: offsetMm.x * realToSvgProjection.a,
-          y: offsetMm.y * realToSvgProjection.d,
-        }
-
-        const style: any = (component as any).style
-        style.transform = `translate(${offsetPx.x}px, ${offsetPx.y}px)`
-        if (
-          activeEditEvent?.schematic_component_id === schematic_component_id
-        ) {
-          style.outline = "solid 2px rgba(255,0,0,0.5)"
-          style.outlineOffset = "5px"
-        } else if (style.outline) {
-          style.outline = ""
-        }
-      }
-    }
-
-    // Start observing the div for changes
-    observer.observe(svg, {
-      childList: true, // Watch for changes to the child elements
-      subtree: false, // Watch for changes in the entire subtree
-      characterData: false, // Watch for changes to text content
-    })
-
-    // Apply transforms immediately on mount or when editEvents change
-    applyTransforms()
-
-    // Cleanup function
-    return () => {
-      observer.disconnect()
-    }
-  }, [svgDivRef, editEvents, activeEditEvent]) // Dependencies remain the same
-}

package/lib/hooks/useChangeSchematicTracesForMovedComponents.ts

@@ -1,121 +0,0 @@
-import { useEffect, useRef } from "react"
-import { su } from "@tscircuit/soup-util"
-import type { ManualEditEvent } from "../types/edit-events"
-import type { CircuitJson } from "circuit-json"
-
-/**
- * This hook makes traces dashed when their connected components are being moved
- */
-export const useChangeSchematicTracesForMovedComponents = ({
-  svgDivRef,
-  circuitJson,
-  activeEditEvent,
-  editEvents,
-}: {
-  svgDivRef: React.RefObject<HTMLDivElement | null>
-  circuitJson: CircuitJson
-  activeEditEvent: ManualEditEvent | null
-  editEvents: ManualEditEvent[]
-}) => {
-  // Keep track of the last known SVG content
-  const lastSvgContentRef = useRef<string | null>(null)
-
-  useEffect(() => {
-    const svg = svgDivRef.current
-    if (!svg) return
-
-    const updateTraceStyles = () => {
-      // Reset all traces to solid
-      const allTraces = svg.querySelectorAll(
-        '[data-circuit-json-type="schematic_trace"] path',
-      )
-
-      // Reset all traces to solid
-      for (const trace of Array.from(allTraces)) {
-        trace.setAttribute("stroke-dasharray", "0")
-        ;(trace as any).style.animation = ""
-      }
-
-      // If there's an active edit event, make connected traces dashed
-      for (const editEvent of [
-        ...editEvents,
-        ...(activeEditEvent ? [activeEditEvent] : []),
-      ]) {
-        if (
-          "schematic_component_id" in editEvent &&
-          editEvent.edit_event_type === "edit_schematic_component_location"
-        ) {
-          const sch_component = su(circuitJson).schematic_component.get(
-            editEvent.schematic_component_id,
-          )
-          if (!sch_component) return
-
-          const src_ports = su(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 = su(circuitJson)
-            .source_trace.list()
-            .filter((st) =>
-              st.connected_source_port_ids?.some((spi: string) =>
-                src_port_ids.has(spi),
-              ),
-            )
-          const src_trace_ids = new Set(
-            src_traces.map((st) => st.source_trace_id),
-          )
-          const schematic_traces = su(circuitJson)
-            .schematic_trace.list()
-            .filter((st) => src_trace_ids.has(st.source_trace_id!))
-
-          // Make the connected traces dashed
-          schematic_traces.forEach((trace) => {
-            const traceElements = svg.querySelectorAll(
-              `[data-schematic-trace-id="${trace.schematic_trace_id}"] path`,
-            )
-            for (const traceElement of Array.from(traceElements)) {
-              if (traceElement.getAttribute("class")?.includes("invisible"))
-                continue
-              traceElement.setAttribute("stroke-dasharray", "20,20")
-              ;(traceElement as any).style.animation =
-                "dash-animation 350ms linear infinite, pulse-animation 900ms linear infinite"
-
-              if (!svg.querySelector("style#dash-animation")) {
-                const style = document.createElement("style")
-                style.id = "dash-animation"
-                style.textContent = `
-                  @keyframes dash-animation {
-                    to {
-                      stroke-dashoffset: -40;
-                    }
-                  }
-                  @keyframes pulse-animation {
-                    0% { opacity: 0.6; }
-                    50% { opacity: 0.2; }
-                    100% { opacity: 0.6; }
-                  }
-                `
-                svg.appendChild(style)
-              }
-            }
-          })
-        }
-      }
-    }
-
-    // Apply styles immediately
-    updateTraceStyles()
-
-    // Cleanup function
-    const observer = new MutationObserver(updateTraceStyles)
-    observer.observe(svg, {
-      childList: true, // Watch for changes to the child elements
-      subtree: false, // Watch for changes in the entire subtree
-      characterData: false, // Watch for changes to text content
-    })
-
-    return () => {
-      observer.disconnect()
-    }
-  }, [svgDivRef, activeEditEvent, circuitJson, editEvents])
-}

package/lib/hooks/useComponentDragging.ts

@@ -1,251 +0,0 @@
-import { su } from "@tscircuit/soup-util"
-import Debug from "lib/utils/debug"
-import { getComponentOffsetDueToEvents } from "lib/utils/get-component-offset-due-to-events"
-import { useCallback, useEffect, useRef, useState } from "react"
-import { type Matrix, compose } from "transformation-matrix"
-import type {
-  EditSchematicComponentLocationEventWithElement,
-  ManualEditEvent,
-} from "../types/edit-events"
-
-const debug = Debug.extend("useComponentDragging")
-
-export const useComponentDragging = ({
-  onEditEvent,
-  editEvents = [],
-  circuitJson,
-  cancelDrag,
-  svgToScreenProjection,
-  realToSvgProjection,
-  enabled = false,
-  snapToGrid = false,
-}: {
-  circuitJson: any[]
-  editEvents: ManualEditEvent[]
-  /** The projection returned from use-mouse-matrix-transform, indicating zoom on svg */
-  svgToScreenProjection: Matrix
-  /** The projection returned from circuit-to-svg, mm to svg */
-  realToSvgProjection: Matrix
-  onEditEvent?: (event: ManualEditEvent) => void
-  cancelDrag?: () => void
-  enabled?: boolean
-  snapToGrid?: boolean
-}): {
-  handleMouseDown: (e: React.MouseEvent) => void
-  handleTouchStart: (e: React.TouchEvent) => void
-  isDragging: boolean
-  activeEditEvent: EditSchematicComponentLocationEventWithElement | null
-} => {
-  const [activeEditEvent, setActiveEditEvent] =
-    useState<EditSchematicComponentLocationEventWithElement | null>(null)
-  const realToScreenProjection = compose(
-    realToSvgProjection,
-    svgToScreenProjection,
-  )
-
-  /**
-   * Drag start position in screen space
-   */
-  const dragStartPosRef = useRef<{
-    x: number
-    y: number
-  } | null>(null)
-
-  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 startDrag = useCallback(
-    (clientX: number, clientY: number, target: Element) => {
-      if (!enabled) return false
-
-      const componentGroup = target.closest(
-        '[data-circuit-json-type="schematic_component"]',
-      )
-      if (!componentGroup) return false
-
-      const schematic_component_id = componentGroup.getAttribute(
-        "data-schematic-component-id",
-      )
-      if (!schematic_component_id) return false
-
-      if (cancelDrag) cancelDrag()
-
-      const schematic_component = su(circuitJson).schematic_component.get(
-        schematic_component_id,
-      )
-      if (!schematic_component) return false
-
-      dragStartPosRef.current = { x: clientX, y: clientY }
-
-      let current_position: { x: number; y: number }
-      const trackedPosition = componentPositionsRef.current.get(
-        schematic_component_id,
-      )
-
-      if (trackedPosition) {
-        current_position = { ...trackedPosition }
-      } else {
-        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,
-        }
-
-        componentPositionsRef.current.set(schematic_component_id, {
-          ...current_position,
-        })
-      }
-
-      const newEditEvent: EditSchematicComponentLocationEventWithElement = {
-        edit_event_id: Math.random().toString(36).substr(2, 9),
-        edit_event_type: "edit_schematic_component_location",
-        schematic_component_id: schematic_component_id,
-        original_center: current_position,
-        new_center: { ...current_position },
-        in_progress: true,
-        created_at: Date.now(),
-        _element: componentGroup as any,
-      }
-
-      activeEditEventRef.current = newEditEvent
-      setActiveEditEvent(newEditEvent)
-      return true
-    },
-    [cancelDrag, enabled, circuitJson, editEvents],
-  )
-
-  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: clientX - dragStartPosRef.current.x,
-        y: clientY - dragStartPosRef.current.y,
-      }
-
-      const mmDelta = {
-        x: screenDelta.x / realToScreenProjection.a,
-        y: screenDelta.y / realToScreenProjection.d,
-      }
-
-      let newCenter = {
-        x: activeEditEventRef.current.original_center.x + mmDelta.x,
-        y: activeEditEventRef.current.original_center.y + mmDelta.y,
-      }
-      if (snapToGrid) {
-        const snap = (v: number) => Math.round(v * 10) / 10
-        newCenter = { x: snap(newCenter.x), y: snap(newCenter.y) }
-      }
-
-      const newEditEvent = {
-        ...activeEditEventRef.current,
-        new_center: newCenter,
-      }
-
-      activeEditEventRef.current = newEditEvent
-      setActiveEditEvent(newEditEvent)
-    },
-    [realToScreenProjection, snapToGrid],
-  )
-
-  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,
-    }
-
-    componentPositionsRef.current.set(finalEvent.schematic_component_id, {
-      ...finalEvent.new_center,
-    })
-
-    debug("endDrag calling onEditEvent with new edit event", {
-      newEditEvent: finalEvent,
-    })
-    if (onEditEvent) onEditEvent(finalEvent)
-    activeEditEventRef.current = null
-    dragStartPosRef.current = null
-    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, handleTouchMove, handleTouchEnd])
-
-  return {
-    handleMouseDown,
-    handleTouchStart,
-    isDragging: !!activeEditEventRef.current,
-    activeEditEvent: activeEditEvent,
-  }
-}

package/lib/hooks/useLocalStorage.ts

@@ -1,63 +0,0 @@
-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,
-  }
-}