@tscircuit/schematic-viewer 2.0.43 → 2.0.45

package/lib/components/SchematicComponentMouseTarget.tsx

@@ -35,6 +35,7 @@ interface Props {
   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
 }
@@ -44,6 +45,7 @@ export const SchematicComponentMouseTarget = ({
   svgDivRef,
   containerRef,
   onComponentClick,
+  onHoverChange,
   showOutline,
   circuitJsonKey,
 }: Props) => {
@@ -157,6 +159,13 @@ export const SchematicComponentMouseTarget = ({
     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
   }
@@ -172,10 +181,8 @@ export const SchematicComponentMouseTarget = ({
         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)",
       }}
     />
   )

package/lib/components/SchematicViewer.tsx

@@ -7,7 +7,7 @@ import { useChangeSchematicComponentLocationsInSvg } from "lib/hooks/useChangeSc
 import { useChangeSchematicTracesForMovedComponents } from "lib/hooks/useChangeSchematicTracesForMovedComponents"
 import { useSchematicGroupsOverlay } from "lib/hooks/useSchematicGroupsOverlay"
 import { enableDebug } from "lib/utils/debug"
-import { useEffect, useMemo, useRef, useState } from "react"
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import {
   fromString,
   identity,
@@ -123,6 +123,21 @@ export const SchematicViewer = ({
     if (disableGroups) return false
     return getStoredBoolean("schematic_viewer_show_groups", false)
   })
+  const [isHoveringClickableComponent, setIsHoveringClickableComponent] =
+    useState(false)
+  const hoveringComponentsRef = useRef<Set<string>>(new Set())
+
+  const handleComponentHoverChange = useCallback(
+    (componentId: string, isHovering: boolean) => {
+      if (isHovering) {
+        hoveringComponentsRef.current.add(componentId)
+      } else {
+        hoveringComponentsRef.current.delete(componentId)
+      }
+      setIsHoveringClickableComponent(hoveringComponentsRef.current.size > 0)
+    },
+    [],
+  )
   const svgDivRef = useRef<HTMLDivElement>(null)
   const touchStartRef = useRef<{ x: number; y: number } | null>(null)
 
@@ -297,6 +312,11 @@ export const SchematicViewer = ({
             : "auto",
           transformOrigin: "0 0",
         }}
+        className={
+          onSchematicComponentClicked
+            ? "schematic-component-clickable"
+            : undefined
+        }
         onTouchStart={(e) => {
           if (editModeEnabled && isInteractionEnabled && !showSpiceOverlay) {
             handleComponentTouchStartRef.current(e)
@@ -317,6 +337,11 @@ export const SchematicViewer = ({
 
   return (
     <MouseTracker>
+      {onSchematicComponentClicked && (
+        <style>
+          {`.schematic-component-clickable [data-schematic-component-id]:hover { cursor: pointer !important; }`}
+        </style>
+      )}
       <div
         ref={containerRef}
         style={{
@@ -329,7 +354,9 @@ export const SchematicViewer = ({
               ? "grabbing"
               : clickToInteractEnabled && !isInteractionEnabled
                 ? "pointer"
-                : "grab",
+                : isHoveringClickableComponent && onSchematicComponentClicked
+                  ? "pointer"
+                  : "grab",
           minHeight: "300px",
           ...containerStyle,
         }}
@@ -456,6 +483,7 @@ export const SchematicViewer = ({
               containerRef={containerRef}
               showOutline={true}
               circuitJsonKey={circuitJsonKey}
+              onHoverChange={handleComponentHoverChange}
               onComponentClick={(id, event) => {
                 onSchematicComponentClicked?.({
                   schematicComponentId: id,

package/package.json

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