@tscircuit/schematic-viewer 2.0.44 → 2.0.46

package/lib/components/MouseTracker.tsx

@@ -34,6 +34,8 @@ export interface MouseTrackerContextValue {
 export const MouseTrackerContext =
   createContext<MouseTrackerContextValue | null>(null)
 
+const DRAG_THRESHOLD_PX = 5
+
 const boundsAreEqual = (
   a: BoundingBoxBounds | null | undefined,
   b: BoundingBoxBounds | null | undefined,
@@ -60,6 +62,7 @@ export const MouseTracker = ({ children }: { children: ReactNode }) => {
     boundingBoxes: new Map<string, BoundingBoxRegistration>(),
     hoveringIds: new Set<string>(),
     subscribers: new Set<() => void>(),
+    mouseDownPosition: null as { x: number; y: number } | null,
   })
 
   const notifySubscribers = useCallback(() => {
@@ -158,11 +161,36 @@ export const MouseTracker = ({ children }: { children: ReactNode }) => {
     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
@@ -189,6 +217,7 @@ export const MouseTracker = ({ children }: { children: ReactNode }) => {
     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 () => {
@@ -198,6 +227,7 @@ export const MouseTracker = ({ children }: { children: ReactNode }) => {
       window.removeEventListener("pointerleave", handlePointerLeave)
       window.removeEventListener("pointercancel", handlePointerLeave)
       window.removeEventListener("blur", handlePointerLeave)
+      window.removeEventListener("mousedown", handleMouseDown)
       window.removeEventListener("click", handleClick)
     }
   }, [updateHovering])

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.44",
+  "version": "2.0.46",
   "main": "dist/index.js",
   "type": "module",
   "scripts": {