@tscircuit/schematic-viewer 2.0.44 → 2.0.46

package/dist/index.js

@@ -470,7 +470,7 @@ var enableDebug = () => {
 var debug_default = debug;
 
 // lib/components/SchematicViewer.tsx
-import { useEffect as useEffect11, useMemo as useMemo5, useRef as useRef7, useState as useState6 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect11, useMemo as useMemo5, useRef as useRef7, useState as useState6 } from "react";
 import {
   fromString,
   identity,
@@ -848,7 +848,7 @@ import { su as su5 } from "@tscircuit/soup-util";
 // package.json
 var package_default = {
   name: "@tscircuit/schematic-viewer",
-  version: "2.0.43",
+  version: "2.0.45",
   main: "dist/index.js",
   type: "module",
   scripts: {
@@ -1789,6 +1789,7 @@ import {
 } from "react";
 import { Fragment as Fragment2, jsx as jsx9 } from "react/jsx-runtime";
 var MouseTrackerContext = createContext(null);
+var DRAG_THRESHOLD_PX = 5;
 var boundsAreEqual = (a, b) => {
   if (!a && !b) return true;
   if (!a || !b) return false;
@@ -1803,7 +1804,8 @@ var MouseTracker = ({ children }) => {
     pointer: null,
     boundingBoxes: /* @__PURE__ */ new Map(),
     hoveringIds: /* @__PURE__ */ new Set(),
-    subscribers: /* @__PURE__ */ new Set()
+    subscribers: /* @__PURE__ */ new Set(),
+    mouseDownPosition: null
   });
   const notifySubscribers = useCallback3(() => {
     for (const callback of storeRef.current.subscribers) {
@@ -1878,10 +1880,28 @@ var MouseTracker = ({ children }) => {
     const handlePointerLeave = () => {
       if (storeRef.current.pointer === null) return;
       storeRef.current.pointer = null;
+      storeRef.current.mouseDownPosition = null;
       updateHovering();
     };
+    const handleMouseDown = (event) => {
+      storeRef.current.mouseDownPosition = {
+        x: event.clientX,
+        y: event.clientY
+      };
+    };
     const handleClick = (event) => {
       const { clientX, clientY } = event;
+      const mouseDownPos = storeRef.current.mouseDownPosition;
+      if (mouseDownPos) {
+        const distance = Math.sqrt(
+          Math.pow(clientX - mouseDownPos.x, 2) + Math.pow(clientY - mouseDownPos.y, 2)
+        );
+        if (distance > DRAG_THRESHOLD_PX) {
+          storeRef.current.mouseDownPosition = null;
+          return;
+        }
+      }
+      storeRef.current.mouseDownPosition = null;
       for (const registration of storeRef.current.boundingBoxes.values()) {
         const bounds = registration.bounds;
         if (!bounds) continue;
@@ -1902,6 +1922,7 @@ var MouseTracker = ({ children }) => {
     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);
@@ -1910,6 +1931,7 @@ var MouseTracker = ({ children }) => {
       window.removeEventListener("pointerleave", handlePointerLeave);
       window.removeEventListener("pointercancel", handlePointerLeave);
       window.removeEventListener("blur", handlePointerLeave);
+      window.removeEventListener("mousedown", handleMouseDown);
       window.removeEventListener("click", handleClick);
     };
   }, [updateHovering]);
@@ -2004,6 +2026,7 @@ var SchematicComponentMouseTarget = ({
   svgDivRef,
   containerRef,
   onComponentClick,
+  onHoverChange,
   showOutline,
   circuitJsonKey
 }) => {
@@ -2096,6 +2119,11 @@ var SchematicComponentMouseTarget = ({
     bounds,
     onClick: onComponentClick ? handleClick : void 0
   });
+  useEffect10(() => {
+    if (onHoverChange) {
+      onHoverChange(componentId, hovering);
+    }
+  }, [hovering, componentId, onHoverChange]);
   if (!measurement || !hovering || !showOutline) {
     return null;
   }
@@ -2110,10 +2138,8 @@ var 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)"
+        zIndex: zIndexMap.schematicComponentHoverOutline
       }
     }
   );
@@ -2189,6 +2215,19 @@ var SchematicViewer = ({
     if (disableGroups) return false;
     return getStoredBoolean("schematic_viewer_show_groups", false);
   });
+  const [isHoveringClickableComponent, setIsHoveringClickableComponent] = useState6(false);
+  const hoveringComponentsRef = useRef7(/* @__PURE__ */ new Set());
+  const handleComponentHoverChange = useCallback5(
+    (componentId, isHovering) => {
+      if (isHovering) {
+        hoveringComponentsRef.current.add(componentId);
+      } else {
+        hoveringComponentsRef.current.delete(componentId);
+      }
+      setIsHoveringClickableComponent(hoveringComponentsRef.current.size > 0);
+    },
+    []
+  );
   const svgDivRef = useRef7(null);
   const touchStartRef = useRef7(null);
   const schematicComponentIds = useMemo5(() => {
@@ -2327,6 +2366,7 @@ var SchematicViewer = ({
           pointerEvents: clickToInteractEnabled ? isInteractionEnabled ? "auto" : "none" : "auto",
           transformOrigin: "0 0"
         },
+        className: onSchematicComponentClicked ? "schematic-component-clickable" : void 0,
         onTouchStart: (e) => {
           if (editModeEnabled && isInteractionEnabled && !showSpiceOverlay) {
             handleComponentTouchStartRef.current(e);
@@ -2343,159 +2383,163 @@ var SchematicViewer = ({
       showSpiceOverlay
     ]
   );
-  return /* @__PURE__ */ jsx11(MouseTracker, { children: /* @__PURE__ */ jsxs6(
-    "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);
-      },
-      children: [
-        !isInteractionEnabled && clickToInteractEnabled && /* @__PURE__ */ jsx11(
-          "div",
-          {
-            onClick: (e) => {
-              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"
-            },
-            children: /* @__PURE__ */ jsx11(
-              "div",
-              {
-                style: {
-                  backgroundColor: "rgba(0, 0, 0, 0.8)",
-                  color: "white",
-                  padding: "12px 24px",
-                  borderRadius: "8px",
-                  fontSize: "16px",
-                  fontFamily: "sans-serif",
-                  pointerEvents: "none"
-                },
-                children: typeof window !== "undefined" && ("ontouchstart" in window || navigator.maxTouchPoints > 0) ? "Touch to Interact" : "Click to Interact"
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx11(
-          ViewMenuIcon,
-          {
-            active: showViewMenu,
-            onClick: () => setShowViewMenu(!showViewMenu)
+  return /* @__PURE__ */ jsxs6(MouseTracker, { children: [
+    onSchematicComponentClicked && /* @__PURE__ */ jsx11("style", { children: `.schematic-component-clickable [data-schematic-component-id]:hover { cursor: pointer !important; }` }),
+    /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        ref: containerRef,
+        style: {
+          position: "relative",
+          backgroundColor: containerBackgroundColor,
+          overflow: "hidden",
+          cursor: showSpiceOverlay ? "auto" : isDragging ? "grabbing" : clickToInteractEnabled && !isInteractionEnabled ? "pointer" : isHoveringClickableComponent && onSchematicComponentClicked ? "pointer" : "grab",
+          minHeight: "300px",
+          ...containerStyle
+        },
+        onWheelCapture: (e) => {
+          if (showSpiceOverlay) {
+            e.stopPropagation();
           }
-        ),
-        editingEnabled && /* @__PURE__ */ jsx11(
-          EditIcon,
-          {
-            active: editModeEnabled,
-            onClick: () => setEditModeEnabled(!editModeEnabled)
+        },
+        onMouseDown: (e) => {
+          if (clickToInteractEnabled && !isInteractionEnabled) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
           }
-        ),
-        editingEnabled && editModeEnabled && /* @__PURE__ */ jsx11(
-          GridIcon,
-          {
-            active: snapToGrid,
-            onClick: () => setSnapToGrid(!snapToGrid)
+          handleMouseDown(e);
+        },
+        onMouseDownCapture: (e) => {
+          if (clickToInteractEnabled && !isInteractionEnabled) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
           }
-        ),
-        /* @__PURE__ */ jsx11(
-          ViewMenu,
-          {
-            circuitJson,
-            circuitJsonKey,
-            isVisible: showViewMenu,
-            onClose: () => setShowViewMenu(false),
-            showGroups: showSchematicGroups,
-            onToggleGroups: (value) => {
-              if (!disableGroups) {
-                setShowSchematicGroups(value);
-                setStoredBoolean("schematic_viewer_show_groups", value);
+        },
+        onTouchStart: (e) => {
+          if (showSpiceOverlay) return;
+          handleTouchStart(e);
+        },
+        onTouchEnd: (e) => {
+          if (showSpiceOverlay) return;
+          handleTouchEnd(e);
+        },
+        children: [
+          !isInteractionEnabled && clickToInteractEnabled && /* @__PURE__ */ jsx11(
+            "div",
+            {
+              onClick: (e) => {
+                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"
+              },
+              children: /* @__PURE__ */ jsx11(
+                "div",
+                {
+                  style: {
+                    backgroundColor: "rgba(0, 0, 0, 0.8)",
+                    color: "white",
+                    padding: "12px 24px",
+                    borderRadius: "8px",
+                    fontSize: "16px",
+                    fontFamily: "sans-serif",
+                    pointerEvents: "none"
+                  },
+                  children: typeof window !== "undefined" && ("ontouchstart" in window || navigator.maxTouchPoints > 0) ? "Touch to Interact" : "Click to Interact"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx11(
+            ViewMenuIcon,
+            {
+              active: showViewMenu,
+              onClick: () => setShowViewMenu(!showViewMenu)
+            }
+          ),
+          editingEnabled && /* @__PURE__ */ jsx11(
+            EditIcon,
+            {
+              active: editModeEnabled,
+              onClick: () => setEditModeEnabled(!editModeEnabled)
+            }
+          ),
+          editingEnabled && editModeEnabled && /* @__PURE__ */ jsx11(
+            GridIcon,
+            {
+              active: snapToGrid,
+              onClick: () => setSnapToGrid(!snapToGrid)
+            }
+          ),
+          /* @__PURE__ */ jsx11(
+            ViewMenu,
+            {
+              circuitJson,
+              circuitJsonKey,
+              isVisible: showViewMenu,
+              onClose: () => setShowViewMenu(false),
+              showGroups: showSchematicGroups,
+              onToggleGroups: (value) => {
+                if (!disableGroups) {
+                  setShowSchematicGroups(value);
+                  setStoredBoolean("schematic_viewer_show_groups", value);
+                }
               }
             }
-          }
-        ),
-        spiceSimulationEnabled && /* @__PURE__ */ jsx11(SpiceSimulationIcon, { onClick: () => setShowSpiceOverlay(true) }),
-        showSpiceOverlay && /* @__PURE__ */ jsx11(
-          SpiceSimulationOverlay,
-          {
-            spiceString,
-            onClose: () => setShowSpiceOverlay(false),
-            plotData,
-            nodes,
-            isLoading: isSpiceSimLoading,
-            error: spiceSimError,
-            simOptions: spiceSimOptions,
-            onSimOptionsChange: (options) => {
-              setHasSpiceSimRun(true);
-              setSpiceSimOptions(options);
-            },
-            hasRun: hasSpiceSimRun
-          }
-        ),
-        onSchematicComponentClicked && schematicComponentIds.map((componentId) => /* @__PURE__ */ jsx11(
-          SchematicComponentMouseTarget,
-          {
-            componentId,
-            svgDivRef,
-            containerRef,
-            showOutline: true,
-            circuitJsonKey,
-            onComponentClick: (id, event) => {
-              onSchematicComponentClicked?.({
-                schematicComponentId: id,
-                event
-              });
+          ),
+          spiceSimulationEnabled && /* @__PURE__ */ jsx11(SpiceSimulationIcon, { onClick: () => setShowSpiceOverlay(true) }),
+          showSpiceOverlay && /* @__PURE__ */ jsx11(
+            SpiceSimulationOverlay,
+            {
+              spiceString,
+              onClose: () => setShowSpiceOverlay(false),
+              plotData,
+              nodes,
+              isLoading: isSpiceSimLoading,
+              error: spiceSimError,
+              simOptions: spiceSimOptions,
+              onSimOptionsChange: (options) => {
+                setHasSpiceSimRun(true);
+                setSpiceSimOptions(options);
+              },
+              hasRun: hasSpiceSimRun
             }
-          },
-          componentId
-        )),
-        svgDiv
-      ]
-    }
-  ) });
+          ),
+          onSchematicComponentClicked && schematicComponentIds.map((componentId) => /* @__PURE__ */ jsx11(
+            SchematicComponentMouseTarget,
+            {
+              componentId,
+              svgDivRef,
+              containerRef,
+              showOutline: true,
+              circuitJsonKey,
+              onHoverChange: handleComponentHoverChange,
+              onComponentClick: (id, event) => {
+                onSchematicComponentClicked?.({
+                  schematicComponentId: id,
+                  event
+                });
+              }
+            },
+            componentId
+          )),
+          svgDiv
+        ]
+      }
+    )
+  ] });
 };
 export {
   MouseTracker,