@tscircuit/schematic-viewer 2.0.42 → 2.0.43

package/examples/example14-schematic-component-click.fixture.tsx

@@ -0,0 +1,46 @@
+import { useState } from "react"
+import { ControlledSchematicViewer } from "lib/components/ControlledSchematicViewer"
+import { renderToCircuitJson } from "lib/dev/render-to-circuit-json"
+
+const circuitJson = renderToCircuitJson(
+  <board width="12mm" height="12mm">
+    <resistor name="R1" resistance={1000} schX={-2} schY={0} />
+    <capacitor name="C1" capacitance="1uF" schX={2} schY={0} />
+    <trace from=".R1 .pin2" to=".C1 .pin1" />
+    <trace from=".R1 .pin1" to=".C1 .pin2" />
+  </board>,
+)
+
+export default function Example() {
+  const [clickedComponentId, setClickedComponentId] = useState<string | null>(
+    null,
+  )
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "12px",
+        padding: "16px",
+        height: "100%",
+        boxSizing: "border-box",
+      }}
+    >
+      <div style={{ fontFamily: "sans-serif" }}>
+        {clickedComponentId
+          ? `Last clicked component: ${clickedComponentId}`
+          : "Click a component to highlight it"}
+      </div>
+      <div style={{ flex: 1, minHeight: 320 }}>
+        <ControlledSchematicViewer
+          circuitJson={circuitJson}
+          containerStyle={{ height: "100%" }}
+          onSchematicComponentClicked={({ schematicComponentId }) => {
+            setClickedComponentId(schematicComponentId)
+          }}
+        />
+      </div>
+    </div>
+  )
+}

package/lib/components/ControlledSchematicViewer.tsx

@@ -9,6 +9,7 @@ export const ControlledSchematicViewer = ({
   editingEnabled = false,
   debug = false,
   clickToInteractEnabled = false,
+  onSchematicComponentClicked,
 }: {
   circuitJson: any[]
   containerStyle?: React.CSSProperties
@@ -16,6 +17,10 @@ export const ControlledSchematicViewer = ({
   editingEnabled?: boolean
   debug?: boolean
   clickToInteractEnabled?: boolean
+  onSchematicComponentClicked?: (options: {
+    schematicComponentId: string
+    event: MouseEvent
+  }) => void
 }) => {
   const [editEvents, setEditEvents] = useState<ManualEditEvent[]>([])
 
@@ -29,6 +34,7 @@ export const ControlledSchematicViewer = ({
       editingEnabled={editingEnabled}
       debug={debug}
       clickToInteractEnabled={clickToInteractEnabled}
+      onSchematicComponentClicked={onSchematicComponentClicked}
     />
   )
 }

package/lib/components/MouseTracker.tsx

@@ -0,0 +1,227 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  type ReactNode,
+} from "react"
+
+export interface BoundingBoxBounds {
+  minX: number
+  maxX: number
+  minY: number
+  maxY: number
+}
+
+interface BoundingBoxRegistration {
+  bounds: BoundingBoxBounds | null
+  onClick?: ((event: MouseEvent) => void) | undefined
+}
+
+export interface MouseTrackerContextValue {
+  registerBoundingBox: (
+    id: string,
+    registration: BoundingBoxRegistration,
+  ) => void
+  updateBoundingBox: (id: string, registration: BoundingBoxRegistration) => void
+  unregisterBoundingBox: (id: string) => void
+  subscribe: (listener: () => void) => () => void
+  isHovering: (id: string) => boolean
+}
+
+export const MouseTrackerContext =
+  createContext<MouseTrackerContextValue | null>(null)
+
+const boundsAreEqual = (
+  a: BoundingBoxBounds | null | undefined,
+  b: BoundingBoxBounds | null | undefined,
+) => {
+  if (!a && !b) return true
+  if (!a || !b) return false
+  return (
+    a.minX === b.minX &&
+    a.maxX === b.maxX &&
+    a.minY === b.minY &&
+    a.maxY === b.maxY
+  )
+}
+
+export const MouseTracker = ({ children }: { children: ReactNode }) => {
+  const existingContext = useContext(MouseTrackerContext)
+
+  if (existingContext) {
+    return <>{children}</>
+  }
+
+  const storeRef = useRef({
+    pointer: null as { x: number; y: number } | null,
+    boundingBoxes: new Map<string, BoundingBoxRegistration>(),
+    hoveringIds: new Set<string>(),
+    subscribers: new Set<() => void>(),
+  })
+
+  const notifySubscribers = useCallback(() => {
+    for (const callback of storeRef.current.subscribers) {
+      callback()
+    }
+  }, [])
+
+  const updateHovering = useCallback(() => {
+    const pointer = storeRef.current.pointer
+    const newHovering = new Set<string>()
+
+    if (pointer) {
+      for (const [id, registration] of storeRef.current.boundingBoxes) {
+        const bounds = registration.bounds
+        if (!bounds) continue
+        if (
+          pointer.x >= bounds.minX &&
+          pointer.x <= bounds.maxX &&
+          pointer.y >= bounds.minY &&
+          pointer.y <= bounds.maxY
+        ) {
+          newHovering.add(id)
+        }
+      }
+    }
+
+    const prevHovering = storeRef.current.hoveringIds
+    if (
+      newHovering.size === prevHovering.size &&
+      [...newHovering].every((id) => prevHovering.has(id))
+    ) {
+      return
+    }
+
+    storeRef.current.hoveringIds = newHovering
+    notifySubscribers()
+  }, [notifySubscribers])
+
+  const registerBoundingBox = useCallback(
+    (id: string, registration: BoundingBoxRegistration) => {
+      storeRef.current.boundingBoxes.set(id, registration)
+      updateHovering()
+    },
+    [updateHovering],
+  )
+
+  const updateBoundingBox = useCallback(
+    (id: string, registration: BoundingBoxRegistration) => {
+      const existing = storeRef.current.boundingBoxes.get(id)
+      if (
+        existing &&
+        boundsAreEqual(existing.bounds, registration.bounds) &&
+        existing.onClick === registration.onClick
+      ) {
+        return
+      }
+      storeRef.current.boundingBoxes.set(id, registration)
+      updateHovering()
+    },
+    [updateHovering],
+  )
+
+  const unregisterBoundingBox = useCallback(
+    (id: string) => {
+      const removed = storeRef.current.boundingBoxes.delete(id)
+      if (removed) {
+        updateHovering()
+      }
+    },
+    [updateHovering],
+  )
+
+  const subscribe = useCallback((listener: () => void) => {
+    storeRef.current.subscribers.add(listener)
+    return () => {
+      storeRef.current.subscribers.delete(listener)
+    }
+  }, [])
+
+  const isHovering = useCallback((id: string) => {
+    return storeRef.current.hoveringIds.has(id)
+  }, [])
+
+  useEffect(() => {
+    const handlePointerPosition = (event: PointerEvent | MouseEvent) => {
+      const { clientX, clientY } = event
+      const pointer = storeRef.current.pointer
+      if (pointer && pointer.x === clientX && pointer.y === clientY) {
+        return
+      }
+      storeRef.current.pointer = { x: clientX, y: clientY }
+      updateHovering()
+    }
+
+    const handlePointerLeave = () => {
+      if (storeRef.current.pointer === null) return
+      storeRef.current.pointer = null
+      updateHovering()
+    }
+
+    const handleClick = (event: MouseEvent) => {
+      const { clientX, clientY } = event
+      for (const registration of storeRef.current.boundingBoxes.values()) {
+        const bounds = registration.bounds
+        if (!bounds) continue
+        if (
+          clientX >= bounds.minX &&
+          clientX <= bounds.maxX &&
+          clientY >= bounds.minY &&
+          clientY <= bounds.maxY
+        ) {
+          registration.onClick?.(event)
+        }
+      }
+    }
+
+    window.addEventListener("pointermove", handlePointerPosition, {
+      passive: true,
+    })
+    window.addEventListener("pointerdown", handlePointerPosition, {
+      passive: true,
+    })
+    window.addEventListener("pointerup", handlePointerPosition, {
+      passive: true,
+    })
+    window.addEventListener("pointerleave", handlePointerLeave)
+    window.addEventListener("pointercancel", handlePointerLeave)
+    window.addEventListener("blur", handlePointerLeave)
+    window.addEventListener("click", handleClick, { passive: true })
+
+    return () => {
+      window.removeEventListener("pointermove", handlePointerPosition)
+      window.removeEventListener("pointerdown", handlePointerPosition)
+      window.removeEventListener("pointerup", handlePointerPosition)
+      window.removeEventListener("pointerleave", handlePointerLeave)
+      window.removeEventListener("pointercancel", handlePointerLeave)
+      window.removeEventListener("blur", handlePointerLeave)
+      window.removeEventListener("click", handleClick)
+    }
+  }, [updateHovering])
+
+  const value = useMemo<MouseTrackerContextValue>(
+    () => ({
+      registerBoundingBox,
+      updateBoundingBox,
+      unregisterBoundingBox,
+      subscribe,
+      isHovering,
+    }),
+    [
+      registerBoundingBox,
+      updateBoundingBox,
+      unregisterBoundingBox,
+      subscribe,
+      isHovering,
+    ],
+  )
+
+  return (
+    <MouseTrackerContext.Provider value={value}>
+      {children}
+    </MouseTrackerContext.Provider>
+  )
+}

package/lib/components/SchematicComponentMouseTarget.tsx

@@ -0,0 +1,182 @@
+import { useCallback, useEffect, useRef, useState } from "react"
+import { useMouseEventsOverBoundingBox } from "../hooks/useMouseEventsOverBoundingBox"
+import type { BoundingBoxBounds } from "./MouseTracker"
+import { zIndexMap } from "../utils/z-index-map"
+
+interface RelativeRect {
+  left: number
+  top: number
+  width: number
+  height: number
+}
+
+interface Measurement {
+  bounds: BoundingBoxBounds
+  rect: RelativeRect
+}
+
+const areMeasurementsEqual = (a: Measurement | null, b: Measurement | null) => {
+  if (!a && !b) return true
+  if (!a || !b) return false
+  return (
+    Math.abs(a.bounds.minX - b.bounds.minX) < 0.5 &&
+    Math.abs(a.bounds.maxX - b.bounds.maxX) < 0.5 &&
+    Math.abs(a.bounds.minY - b.bounds.minY) < 0.5 &&
+    Math.abs(a.bounds.maxY - b.bounds.maxY) < 0.5 &&
+    Math.abs(a.rect.left - b.rect.left) < 0.5 &&
+    Math.abs(a.rect.top - b.rect.top) < 0.5 &&
+    Math.abs(a.rect.width - b.rect.width) < 0.5 &&
+    Math.abs(a.rect.height - b.rect.height) < 0.5
+  )
+}
+
+interface Props {
+  componentId: string
+  svgDivRef: React.RefObject<HTMLDivElement | null>
+  containerRef: React.RefObject<HTMLDivElement | null>
+  onComponentClick?: (componentId: string, event: MouseEvent) => void
+  showOutline: boolean
+  circuitJsonKey: string
+}
+
+export const SchematicComponentMouseTarget = ({
+  componentId,
+  svgDivRef,
+  containerRef,
+  onComponentClick,
+  showOutline,
+  circuitJsonKey,
+}: Props) => {
+  const [measurement, setMeasurement] = useState<Measurement | null>(null)
+  const frameRef = useRef<number | null>(null)
+
+  const measure = useCallback(() => {
+    frameRef.current = null
+    const svgDiv = svgDivRef.current
+    const container = containerRef.current
+    if (!svgDiv || !container) {
+      setMeasurement((prev) => (prev ? null : prev))
+      return
+    }
+    const element = svgDiv.querySelector<SVGGraphicsElement | HTMLElement>(
+      `[data-schematic-component-id="${componentId}"]`,
+    )
+    if (!element) {
+      setMeasurement((prev) => (prev ? null : prev))
+      return
+    }
+
+    const elementRect = element.getBoundingClientRect()
+    const containerRect = container.getBoundingClientRect()
+
+    const nextMeasurement: Measurement = {
+      bounds: {
+        minX: elementRect.left,
+        maxX: elementRect.right,
+        minY: elementRect.top,
+        maxY: elementRect.bottom,
+      },
+      rect: {
+        left: elementRect.left - containerRect.left,
+        top: elementRect.top - containerRect.top,
+        width: elementRect.width,
+        height: elementRect.height,
+      },
+    }
+
+    setMeasurement((prev) =>
+      areMeasurementsEqual(prev, nextMeasurement) ? prev : nextMeasurement,
+    )
+  }, [componentId, containerRef, svgDivRef])
+
+  const scheduleMeasure = useCallback(() => {
+    if (frameRef.current !== null) return
+    frameRef.current = window.requestAnimationFrame(measure)
+  }, [measure])
+
+  useEffect(() => {
+    scheduleMeasure()
+  }, [scheduleMeasure, circuitJsonKey])
+
+  useEffect(() => {
+    scheduleMeasure()
+    const svgDiv = svgDivRef.current
+    const container = containerRef.current
+    if (!svgDiv || !container) return
+
+    const resizeObserver =
+      typeof ResizeObserver !== "undefined"
+        ? new ResizeObserver(() => {
+            scheduleMeasure()
+          })
+        : null
+    resizeObserver?.observe(container)
+    resizeObserver?.observe(svgDiv)
+
+    const mutationObserver =
+      typeof MutationObserver !== "undefined"
+        ? new MutationObserver(() => {
+            scheduleMeasure()
+          })
+        : null
+    mutationObserver?.observe(svgDiv, {
+      attributes: true,
+      attributeFilter: ["style", "transform"],
+      subtree: true,
+      childList: true,
+    })
+
+    window.addEventListener("scroll", scheduleMeasure, true)
+    window.addEventListener("resize", scheduleMeasure)
+
+    return () => {
+      resizeObserver?.disconnect()
+      mutationObserver?.disconnect()
+      window.removeEventListener("scroll", scheduleMeasure, true)
+      window.removeEventListener("resize", scheduleMeasure)
+      if (frameRef.current !== null) {
+        cancelAnimationFrame(frameRef.current)
+        frameRef.current = null
+      }
+    }
+  }, [scheduleMeasure, svgDivRef, containerRef])
+
+  const handleClick = useCallback(
+    (event: MouseEvent) => {
+      if (onComponentClick) {
+        onComponentClick(componentId, event)
+      }
+    },
+    [componentId, onComponentClick],
+  )
+
+  const bounds = measurement?.bounds ?? null
+
+  const { hovering } = useMouseEventsOverBoundingBox({
+    bounds,
+    onClick: onComponentClick ? handleClick : undefined,
+  })
+
+  if (!measurement || !hovering || !showOutline) {
+    return null
+  }
+
+  const rect = measurement.rect
+
+  return (
+    <div
+      style={{
+        position: "absolute",
+        left: rect.left,
+        top: rect.top,
+        width: rect.width,
+        height: rect.height,
+        border: "1.5px solid rgba(51, 153, 255, 0.9)",
+        borderRadius: "6px",
+        pointerEvents: "none",
+        zIndex: zIndexMap.schematicComponentHoverOutline,
+        boxShadow: "0 0 6px rgba(51, 153, 255, 0.35)",
+      }}
+    />
+  )
+}