@tscircuit/schematic-viewer 2.0.42 → 2.0.43

package/lib/components/SchematicViewer.tsx

@@ -2,6 +2,7 @@ import {
   convertCircuitJsonToSchematicSvg,
   type ColorOverrides,
 } from "circuit-to-svg"
+import { su } from "@tscircuit/soup-util"
 import { useChangeSchematicComponentLocationsInSvg } from "lib/hooks/useChangeSchematicComponentLocationsInSvg"
 import { useChangeSchematicTracesForMovedComponents } from "lib/hooks/useChangeSchematicTracesForMovedComponents"
 import { useSchematicGroupsOverlay } from "lib/hooks/useSchematicGroupsOverlay"
@@ -27,6 +28,8 @@ 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"
+import { MouseTracker } from "./MouseTracker"
+import { SchematicComponentMouseTarget } from "./SchematicComponentMouseTarget"
 
 interface Props {
   circuitJson: CircuitJson
@@ -41,6 +44,10 @@ interface Props {
   colorOverrides?: ColorOverrides
   spiceSimulationEnabled?: boolean
   disableGroups?: boolean
+  onSchematicComponentClicked?: (options: {
+    schematicComponentId: string
+    event: MouseEvent
+  }) => void
 }
 
 export const SchematicViewer = ({
@@ -56,6 +63,7 @@ export const SchematicViewer = ({
   colorOverrides,
   spiceSimulationEnabled = false,
   disableGroups = false,
+  onSchematicComponentClicked,
 }: Props) => {
   if (debug) {
     enableDebug()
@@ -118,6 +126,19 @@ export const SchematicViewer = ({
   const svgDivRef = useRef<HTMLDivElement>(null)
   const touchStartRef = useRef<{ x: number; y: number } | null>(null)
 
+  const schematicComponentIds = useMemo(() => {
+    try {
+      return (
+        su(circuitJson)
+          .schematic_component?.list()
+          ?.map((component) => component.schematic_component_id as string) ?? []
+      )
+    } catch (err) {
+      console.error("Failed to derive schematic component ids", err)
+      return []
+    }
+  }, [circuitJsonKey, circuitJson])
+
   const handleTouchStart = (e: React.TouchEvent) => {
     const touch = e.touches[0]
     touchStartRef.current = {
@@ -295,137 +316,156 @@ export const SchematicViewer = ({
   )
 
   return (
-    <div
-      ref={containerRef}
-      style={{
-        position: "relative",
-        backgroundColor: containerBackgroundColor,
-        overflow: "hidden",
-        cursor: showSpiceOverlay
-          ? "auto"
-          : isDragging
-            ? "grabbing"
-            : clickToInteractEnabled && !isInteractionEnabled
-              ? "pointer"
-              : "grab",
-        minHeight: "300px",
-        ...containerStyle,
-      }}
-      onWheelCapture={(e) => {
-        if (showSpiceOverlay) {
-          e.stopPropagation()
-        }
-      }}
-      onMouseDown={(e) => {
-        if (clickToInteractEnabled && !isInteractionEnabled) {
-          e.preventDefault()
-          e.stopPropagation()
-          return
-        }
-        handleMouseDown(e)
-      }}
-      onMouseDownCapture={(e) => {
-        if (clickToInteractEnabled && !isInteractionEnabled) {
-          e.preventDefault()
-          e.stopPropagation()
-          return
-        }
-      }}
-      onTouchStart={(e) => {
-        if (showSpiceOverlay) return
-        handleTouchStart(e)
-      }}
-      onTouchEnd={(e) => {
-        if (showSpiceOverlay) return
-        handleTouchEnd(e)
-      }}
-    >
-      {!isInteractionEnabled && clickToInteractEnabled && (
-        <div
-          onClick={(e) => {
+    <MouseTracker>
+      <div
+        ref={containerRef}
+        style={{
+          position: "relative",
+          backgroundColor: containerBackgroundColor,
+          overflow: "hidden",
+          cursor: showSpiceOverlay
+            ? "auto"
+            : isDragging
+              ? "grabbing"
+              : clickToInteractEnabled && !isInteractionEnabled
+                ? "pointer"
+                : "grab",
+          minHeight: "300px",
+          ...containerStyle,
+        }}
+        onWheelCapture={(e) => {
+          if (showSpiceOverlay) {
+            e.stopPropagation()
+          }
+        }}
+        onMouseDown={(e) => {
+          if (clickToInteractEnabled && !isInteractionEnabled) {
             e.preventDefault()
             e.stopPropagation()
-            setIsInteractionEnabled(true)
-          }}
-          style={{
-            position: "absolute",
-            inset: 0,
-            cursor: "pointer",
-            zIndex: zIndexMap.clickToInteractOverlay,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            pointerEvents: "all",
-            touchAction: "pan-x pan-y pinch-zoom",
-          }}
-        >
+            return
+          }
+          handleMouseDown(e)
+        }}
+        onMouseDownCapture={(e) => {
+          if (clickToInteractEnabled && !isInteractionEnabled) {
+            e.preventDefault()
+            e.stopPropagation()
+            return
+          }
+        }}
+        onTouchStart={(e) => {
+          if (showSpiceOverlay) return
+          handleTouchStart(e)
+        }}
+        onTouchEnd={(e) => {
+          if (showSpiceOverlay) return
+          handleTouchEnd(e)
+        }}
+      >
+        {!isInteractionEnabled && clickToInteractEnabled && (
           <div
+            onClick={(e) => {
+              e.preventDefault()
+              e.stopPropagation()
+              setIsInteractionEnabled(true)
+            }}
             style={{
-              backgroundColor: "rgba(0, 0, 0, 0.8)",
-              color: "white",
-              padding: "12px 24px",
-              borderRadius: "8px",
-              fontSize: "16px",
-              fontFamily: "sans-serif",
-              pointerEvents: "none",
+              position: "absolute",
+              inset: 0,
+              cursor: "pointer",
+              zIndex: zIndexMap.clickToInteractOverlay,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              pointerEvents: "all",
+              touchAction: "pan-x pan-y pinch-zoom",
             }}
           >
-            {typeof window !== "undefined" &&
-            ("ontouchstart" in window || navigator.maxTouchPoints > 0)
-              ? "Touch to Interact"
-              : "Click to Interact"}
+            <div
+              style={{
+                backgroundColor: "rgba(0, 0, 0, 0.8)",
+                color: "white",
+                padding: "12px 24px",
+                borderRadius: "8px",
+                fontSize: "16px",
+                fontFamily: "sans-serif",
+                pointerEvents: "none",
+              }}
+            >
+              {typeof window !== "undefined" &&
+              ("ontouchstart" in window || navigator.maxTouchPoints > 0)
+                ? "Touch to Interact"
+                : "Click to Interact"}
+            </div>
           </div>
-        </div>
-      )}
-      <ViewMenuIcon
-        active={showViewMenu}
-        onClick={() => setShowViewMenu(!showViewMenu)}
-      />
-      {editingEnabled && (
-        <EditIcon
-          active={editModeEnabled}
-          onClick={() => setEditModeEnabled(!editModeEnabled)}
-        />
-      )}
-      {editingEnabled && editModeEnabled && (
-        <GridIcon
-          active={snapToGrid}
-          onClick={() => setSnapToGrid(!snapToGrid)}
+        )}
+        <ViewMenuIcon
+          active={showViewMenu}
+          onClick={() => setShowViewMenu(!showViewMenu)}
         />
-      )}
-      <ViewMenu
-        circuitJson={circuitJson}
-        circuitJsonKey={circuitJsonKey}
-        isVisible={showViewMenu}
-        onClose={() => setShowViewMenu(false)}
-        showGroups={showSchematicGroups}
-        onToggleGroups={(value) => {
-          if (!disableGroups) {
-            setShowSchematicGroups(value)
-            setStoredBoolean("schematic_viewer_show_groups", value)
-          }
-        }}
-      />
-      {spiceSimulationEnabled && (
-        <SpiceSimulationIcon onClick={() => setShowSpiceOverlay(true)} />
-      )}
-      {showSpiceOverlay && (
-        <SpiceSimulationOverlay
-          spiceString={spiceString}
-          onClose={() => setShowSpiceOverlay(false)}
-          plotData={plotData}
-          nodes={nodes}
-          isLoading={isSpiceSimLoading}
-          error={spiceSimError}
-          simOptions={spiceSimOptions}
-          onSimOptionsChange={(options) => {
-            setHasSpiceSimRun(true)
-            setSpiceSimOptions(options)
+        {editingEnabled && (
+          <EditIcon
+            active={editModeEnabled}
+            onClick={() => setEditModeEnabled(!editModeEnabled)}
+          />
+        )}
+        {editingEnabled && editModeEnabled && (
+          <GridIcon
+            active={snapToGrid}
+            onClick={() => setSnapToGrid(!snapToGrid)}
+          />
+        )}
+        <ViewMenu
+          circuitJson={circuitJson}
+          circuitJsonKey={circuitJsonKey}
+          isVisible={showViewMenu}
+          onClose={() => setShowViewMenu(false)}
+          showGroups={showSchematicGroups}
+          onToggleGroups={(value) => {
+            if (!disableGroups) {
+              setShowSchematicGroups(value)
+              setStoredBoolean("schematic_viewer_show_groups", value)
+            }
           }}
-          hasRun={hasSpiceSimRun}
         />
-      )}
-      {svgDiv}
-    </div>
+        {spiceSimulationEnabled && (
+          <SpiceSimulationIcon onClick={() => setShowSpiceOverlay(true)} />
+        )}
+        {showSpiceOverlay && (
+          <SpiceSimulationOverlay
+            spiceString={spiceString}
+            onClose={() => setShowSpiceOverlay(false)}
+            plotData={plotData}
+            nodes={nodes}
+            isLoading={isSpiceSimLoading}
+            error={spiceSimError}
+            simOptions={spiceSimOptions}
+            onSimOptionsChange={(options) => {
+              setHasSpiceSimRun(true)
+              setSpiceSimOptions(options)
+            }}
+            hasRun={hasSpiceSimRun}
+          />
+        )}
+        {onSchematicComponentClicked &&
+          schematicComponentIds.map((componentId) => (
+            <SchematicComponentMouseTarget
+              key={componentId}
+              componentId={componentId}
+              svgDivRef={svgDivRef}
+              containerRef={containerRef}
+              showOutline={true}
+              circuitJsonKey={circuitJsonKey}
+              onComponentClick={(id, event) => {
+                onSchematicComponentClicked?.({
+                  schematicComponentId: id,
+                  event,
+                })
+              }}
+            />
+          ))}
+        {svgDiv}
+      </div>
+    </MouseTracker>
   )
 }

package/lib/hooks/useMouseEventsOverBoundingBox.ts

@@ -0,0 +1,74 @@
+import {
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useSyncExternalStore,
+} from "react"
+import {
+  MouseTrackerContext,
+  type BoundingBoxBounds,
+} from "../components/MouseTracker"
+
+interface UseMouseEventsOverBoundingBoxOptions {
+  bounds: BoundingBoxBounds | null
+  onClick?: (event: MouseEvent) => void
+}
+
+export const useMouseEventsOverBoundingBox = (
+  options: UseMouseEventsOverBoundingBoxOptions,
+) => {
+  const context = useContext(MouseTrackerContext)
+
+  if (!context) {
+    throw new Error(
+      "useMouseEventsOverBoundingBox must be used within a MouseTracker",
+    )
+  }
+
+  const id = useId()
+  const latestOptionsRef = useRef(options)
+  latestOptionsRef.current = options
+
+  const handleClick = useMemo(
+    () => (event: MouseEvent) => {
+      latestOptionsRef.current.onClick?.(event)
+    },
+    [],
+  )
+
+  useEffect(() => {
+    context.registerBoundingBox(id, {
+      bounds: latestOptionsRef.current.bounds,
+      onClick: latestOptionsRef.current.onClick ? handleClick : undefined,
+    })
+    return () => {
+      context.unregisterBoundingBox(id)
+    }
+  }, [context, handleClick, id])
+
+  useEffect(() => {
+    context.updateBoundingBox(id, {
+      bounds: latestOptionsRef.current.bounds,
+      onClick: latestOptionsRef.current.onClick ? handleClick : undefined,
+    })
+  }, [
+    context,
+    handleClick,
+    id,
+    options.bounds?.minX,
+    options.bounds?.maxX,
+    options.bounds?.minY,
+    options.bounds?.maxY,
+    options.onClick,
+  ])
+
+  const hovering = useSyncExternalStore(
+    context.subscribe,
+    () => context.isHovering(id),
+    () => false,
+  )
+
+  return { hovering }
+}

package/lib/index.ts

@@ -1 +1,3 @@
 export { SchematicViewer } from "./components/SchematicViewer"
+export { MouseTracker } from "./components/MouseTracker"
+export { useMouseEventsOverBoundingBox } from "./hooks/useMouseEventsOverBoundingBox"

package/lib/utils/z-index-map.ts

@@ -6,4 +6,5 @@ export const zIndexMap = {
   viewMenu: 55,
   viewMenuBackdrop: 54,
   clickToInteractOverlay: 100,
+  schematicComponentHoverOutline: 47,
 }

package/package.json

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