@tscircuit/schematic-viewer 2.0.4 → 2.0.6

package/lib/hooks/useChangeSchematicComponentLocationsInSvg.ts

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

@@ -0,0 +1,121 @@
+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) =>
+                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

@@ -0,0 +1,163 @@
+import { useCallback, useEffect, useRef, useState } from "react"
+import type {
+  EditSchematicComponentLocationEventWithElement,
+  ManualEditEvent,
+} from "../types/edit-events"
+import {
+  type Matrix,
+  applyToPoint,
+  inverse,
+  compose,
+} from "transformation-matrix"
+import { getComponentOffsetDueToEvents } from "lib/utils/get-component-offset-due-to-events"
+import type { CircuitJson } from "circuit-json"
+import { su } from "@tscircuit/soup-util"
+
+export const useComponentDragging = ({
+  onEditEvent,
+  editEvents = [],
+  circuitJson,
+  cancelDrag,
+  svgToScreenProjection,
+  realToSvgProjection,
+  enabled = 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
+}): {
+  handleMouseDown: (e: React.MouseEvent) => 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)
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      if (!enabled) return
+
+      const target = e.target as SVGElement
+      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: schematic_component_id,
+      })
+
+      dragStartPosRef.current = {
+        x: e.clientX,
+        y: e.clientY,
+      }
+
+      const original_center = {
+        x: schematic_component.center.x + editEventOffset.x,
+        y: schematic_component.center.y + editEventOffset.y,
+      }
+
+      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,
+        new_center: { ...original_center },
+        in_progress: true,
+        created_at: Date.now(),
+        _element: componentGroup as any,
+      }
+
+      activeEditEventRef.current = newEditEvent
+    },
+    [cancelDrag, enabled],
+  )
+
+  const handleMouseMove = useCallback(
+    (e: MouseEvent) => {
+      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,
+    }
+    if (onEditEvent) onEditEvent(finalEvent)
+    activeEditEventRef.current = null
+    dragStartPosRef.current = null
+    setActiveEditEvent(null)
+  }, [onEditEvent])
+
+  useEffect(() => {
+    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: activeEditEvent,
+  }
+}

package/lib/types/edit-events.ts

@@ -0,0 +1,16 @@
+import type {
+  BaseManualEditEvent,
+  EditSchematicComponentLocationEvent,
+  ManualEditEvent,
+} from "@tscircuit/props"
+
+export type EditSchematicComponentLocationEventWithElement =
+  EditSchematicComponentLocationEvent & {
+    _element: SVGElement
+  }
+
+export type {
+  BaseManualEditEvent,
+  EditSchematicComponentLocationEvent,
+  ManualEditEvent,
+}

package/lib/utils/get-component-offset-due-to-events.ts

@@ -0,0 +1,43 @@
+import type {
+  EditSchematicComponentLocationEvent,
+  EditSchematicComponentLocationEventWithElement,
+  ManualEditEvent,
+} from "lib/types/edit-events"
+
+/**
+ * Returns the total offset of a component due to a set of edit events in
+ * mm
+ */
+export const getComponentOffsetDueToEvents = ({
+  editEvents,
+  schematic_component_id,
+}: {
+  editEvents: ManualEditEvent[]
+  schematic_component_id: string
+}) => {
+  const editEventsForComponent: EditSchematicComponentLocationEvent[] =
+    editEvents
+      .filter(
+        (event) =>
+          "schematic_component_id" in event &&
+          event.schematic_component_id === schematic_component_id,
+      )
+      .filter(
+        (event) =>
+          "edit_event_type" in event &&
+          event.edit_event_type === "edit_schematic_component_location",
+      )
+
+  const totalOffsetX = editEventsForComponent.reduce((acc, event) => {
+    return acc + event.new_center.x - event.original_center.x
+  }, 0)
+
+  const totalOffsetY = editEventsForComponent.reduce((acc, event) => {
+    return acc + event.new_center.y - event.original_center.y
+  }, 0)
+
+  return {
+    x: totalOffsetX,
+    y: totalOffsetY,
+  }
+}

package/package.json

@@ -1,22 +1,24 @@
 {
   "name": "@tscircuit/schematic-viewer",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "main": "dist/index.js",
   "type": "module",
   "scripts": {
     "start": "cosmos",
     "build": "tsup-node ./lib/index.ts --dts --format esm --sourcemap",
     "build:site": "cosmos-export",
-    "vercel-build": "bun run build:site"
+    "vercel-build": "bun run build:site",
+    "format": "biome format --write .",
+    "format:check": "biome format ."
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
-    "@tscircuit/core": "^0.0.222",
+    "@tscircuit/core": "^0.0.236",
     "@types/bun": "latest",
     "@types/react": "^19.0.1",
     "@types/react-dom": "^19.0.2",
     "@vitejs/plugin-react": "^4.3.4",
-    "circuit-json": "^0.0.111",
+    "circuit-json": "^0.0.117",
     "react": "18",
     "react-cosmos": "^6.2.1",
     "react-cosmos-plugin-vite": "^6.2.0",
@@ -29,9 +31,10 @@
     "typescript": "^5.0.0"
   },
   "dependencies": {
-    "circuit-to-svg": "^0.0.90",
+    "@tscircuit/props": "^0.0.113",
+    "circuit-to-svg": "^0.0.96",
     "debug": "^4.4.0",
     "performance-now": "^2.1.0",
-    "use-mouse-matrix-transform": "^1.1.13"
+    "use-mouse-matrix-transform": "^1.2.2"
   }
 }