@tscircuit/schematic-viewer 2.0.55 → 2.0.57

package/lib/components/MouseTracker.tsx

@@ -1,257 +0,0 @@
-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 DRAG_THRESHOLD_PX = 5
-
-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>(),
-    mouseDownPosition: null as { x: number; y: number } | null,
-  })
-
-  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
-      storeRef.current.mouseDownPosition = null
-      updateHovering()
-    }
-
-    const handleMouseDown = (event: MouseEvent) => {
-      storeRef.current.mouseDownPosition = {
-        x: event.clientX,
-        y: event.clientY,
-      }
-    }
-
-    const handleClick = (event: MouseEvent) => {
-      const { clientX, clientY } = event
-      const mouseDownPos = storeRef.current.mouseDownPosition
-
-      // Check if this was a drag (movement > threshold)
-      if (mouseDownPos) {
-        const distance = Math.sqrt(
-          Math.pow(clientX - mouseDownPos.x, 2) +
-            Math.pow(clientY - mouseDownPos.y, 2),
-        )
-        if (distance > DRAG_THRESHOLD_PX) {
-          // This was a drag, not a click - don't trigger onClick
-          storeRef.current.mouseDownPosition = null
-          return
-        }
-      }
-
-      storeRef.current.mouseDownPosition = null
-
-      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("mousedown", handleMouseDown, { passive: true })
-    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("mousedown", handleMouseDown)
-      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

@@ -1,189 +0,0 @@
-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
-  onHoverChange?: (componentId: string, isHovering: boolean) => void
-  showOutline: boolean
-  circuitJsonKey: string
-}
-
-export const SchematicComponentMouseTarget = ({
-  componentId,
-  svgDivRef,
-  containerRef,
-  onComponentClick,
-  onHoverChange,
-  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,
-  })
-
-  // Notify parent of hover state changes
-  useEffect(() => {
-    if (onHoverChange) {
-      onHoverChange(componentId, hovering)
-    }
-  }, [hovering, componentId, onHoverChange])
-
-  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)",
-        pointerEvents: "none",
-        zIndex: zIndexMap.schematicComponentHoverOutline,
-      }}
-    />
-  )
-}

package/lib/components/SchematicPortMouseTarget.tsx

@@ -1,224 +0,0 @@
-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 {
-  portId: string
-  portLabel?: string
-  svgDivRef: React.RefObject<HTMLDivElement | null>
-  containerRef: React.RefObject<HTMLDivElement | null>
-  onPortClick?: (portId: string, event: MouseEvent) => void
-  onHoverChange?: (portId: string, isHovering: boolean) => void
-  showOutline: boolean
-  circuitJsonKey: string
-}
-
-export const SchematicPortMouseTarget = ({
-  portId,
-  portLabel,
-  svgDivRef,
-  containerRef,
-  onPortClick,
-  onHoverChange,
-  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-port-id="${portId}"]`,
-    )
-    if (!element) {
-      setMeasurement((prev) => (prev ? null : prev))
-      return
-    }
-
-    const elementRect = element.getBoundingClientRect()
-    const containerRect = container.getBoundingClientRect()
-
-    // Add some padding around the port for easier interaction
-    const padding = 4
-
-    const nextMeasurement: Measurement = {
-      bounds: {
-        minX: elementRect.left - padding,
-        maxX: elementRect.right + padding,
-        minY: elementRect.top - padding,
-        maxY: elementRect.bottom + padding,
-      },
-      rect: {
-        left: elementRect.left - containerRect.left - padding,
-        top: elementRect.top - containerRect.top - padding,
-        width: elementRect.width + padding * 2,
-        height: elementRect.height + padding * 2,
-      },
-    }
-
-    setMeasurement((prev) =>
-      areMeasurementsEqual(prev, nextMeasurement) ? prev : nextMeasurement,
-    )
-  }, [portId, 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 (onPortClick) {
-        onPortClick(portId, event)
-      }
-    },
-    [portId, onPortClick],
-  )
-
-  const bounds = measurement?.bounds ?? null
-
-  const { hovering } = useMouseEventsOverBoundingBox({
-    bounds,
-    onClick: onPortClick ? handleClick : undefined,
-  })
-
-  // Notify parent of hover state changes
-  useEffect(() => {
-    if (onHoverChange) {
-      onHoverChange(portId, hovering)
-    }
-  }, [hovering, portId, onHoverChange])
-
-  if (!measurement || !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: hovering
-            ? "1.5px solid rgba(255, 153, 51, 0.9)"
-            : "1.5px solid rgba(255, 153, 51, 0.3)",
-          backgroundColor: hovering
-            ? "rgba(255, 153, 51, 0.15)"
-            : "rgba(255, 153, 51, 0.05)",
-          borderRadius: "50%",
-          pointerEvents: "none",
-          zIndex: zIndexMap.schematicPortHoverOutline,
-          transition: "border-color 0.15s, background-color 0.15s",
-        }}
-      />
-      {hovering && portLabel && (
-        <div
-          style={{
-            position: "absolute",
-            left: rect.left + rect.width / 2,
-            top: rect.top - 24,
-            transform: "translateX(-50%)",
-            backgroundColor: "rgba(0, 0, 0, 0.85)",
-            color: "white",
-            padding: "4px 8px",
-            borderRadius: "4px",
-            fontSize: "12px",
-            fontFamily: "monospace",
-            whiteSpace: "nowrap",
-            pointerEvents: "none",
-            zIndex: zIndexMap.schematicPortHoverOutline + 1,
-          }}
-        >
-          {portLabel}
-        </div>
-      )}
-    </>
-  )
-}