@tscircuit/schematic-viewer 2.0.42 → 2.0.44

package/dist/index.js

@@ -2,6 +2,7 @@
 import {
   convertCircuitJsonToSchematicSvg
 } from "circuit-to-svg";
+import { su as su6 } from "@tscircuit/soup-util";
 
 // lib/hooks/useChangeSchematicComponentLocationsInSvg.ts
 import "@tscircuit/soup-util";
@@ -469,7 +470,7 @@ var enableDebug = () => {
 var debug_default = debug;
 
 // lib/components/SchematicViewer.tsx
-import { useEffect as useEffect8, useMemo as useMemo3, useRef as useRef4, useState as useState5 } from "react";
+import { useEffect as useEffect11, useMemo as useMemo5, useRef as useRef7, useState as useState6 } from "react";
 import {
   fromString,
   identity,
@@ -691,7 +692,8 @@ var zIndexMap = {
   viewMenuIcon: 48,
   viewMenu: 55,
   viewMenuBackdrop: 54,
-  clickToInteractOverlay: 100
+  clickToInteractOverlay: 100,
+  schematicComponentHoverOutline: 47
 };
 
 // lib/components/EditIcon.tsx
@@ -846,7 +848,7 @@ import { su as su5 } from "@tscircuit/soup-util";
 // package.json
 var package_default = {
   name: "@tscircuit/schematic-viewer",
-  version: "2.0.41",
+  version: "2.0.43",
   main: "dist/index.js",
   type: "module",
   scripts: {
@@ -1776,8 +1778,349 @@ var setStoredBoolean = (key, value) => {
   }
 };
 
+// lib/components/MouseTracker.tsx
+import {
+  createContext,
+  useCallback as useCallback3,
+  useContext,
+  useEffect as useEffect8,
+  useMemo as useMemo3,
+  useRef as useRef4
+} from "react";
+import { Fragment as Fragment2, jsx as jsx9 } from "react/jsx-runtime";
+var MouseTrackerContext = createContext(null);
+var boundsAreEqual = (a, b) => {
+  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;
+};
+var MouseTracker = ({ children }) => {
+  const existingContext = useContext(MouseTrackerContext);
+  if (existingContext) {
+    return /* @__PURE__ */ jsx9(Fragment2, { children });
+  }
+  const storeRef = useRef4({
+    pointer: null,
+    boundingBoxes: /* @__PURE__ */ new Map(),
+    hoveringIds: /* @__PURE__ */ new Set(),
+    subscribers: /* @__PURE__ */ new Set()
+  });
+  const notifySubscribers = useCallback3(() => {
+    for (const callback of storeRef.current.subscribers) {
+      callback();
+    }
+  }, []);
+  const updateHovering = useCallback3(() => {
+    const pointer = storeRef.current.pointer;
+    const newHovering = /* @__PURE__ */ new Set();
+    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 = useCallback3(
+    (id, registration) => {
+      storeRef.current.boundingBoxes.set(id, registration);
+      updateHovering();
+    },
+    [updateHovering]
+  );
+  const updateBoundingBox = useCallback3(
+    (id, registration) => {
+      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 = useCallback3(
+    (id) => {
+      const removed = storeRef.current.boundingBoxes.delete(id);
+      if (removed) {
+        updateHovering();
+      }
+    },
+    [updateHovering]
+  );
+  const subscribe = useCallback3((listener) => {
+    storeRef.current.subscribers.add(listener);
+    return () => {
+      storeRef.current.subscribers.delete(listener);
+    };
+  }, []);
+  const isHovering = useCallback3((id) => {
+    return storeRef.current.hoveringIds.has(id);
+  }, []);
+  useEffect8(() => {
+    const handlePointerPosition = (event) => {
+      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;
+      updateHovering();
+    };
+    const handleClick = (event) => {
+      const { clientX, clientY } = event;
+      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("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("click", handleClick);
+    };
+  }, [updateHovering]);
+  const value = useMemo3(
+    () => ({
+      registerBoundingBox,
+      updateBoundingBox,
+      unregisterBoundingBox,
+      subscribe,
+      isHovering
+    }),
+    [
+      registerBoundingBox,
+      updateBoundingBox,
+      unregisterBoundingBox,
+      subscribe,
+      isHovering
+    ]
+  );
+  return /* @__PURE__ */ jsx9(MouseTrackerContext.Provider, { value, children });
+};
+
+// lib/components/SchematicComponentMouseTarget.tsx
+import { useCallback as useCallback4, useEffect as useEffect10, useRef as useRef6, useState as useState5 } from "react";
+
+// lib/hooks/useMouseEventsOverBoundingBox.ts
+import {
+  useContext as useContext2,
+  useEffect as useEffect9,
+  useId,
+  useMemo as useMemo4,
+  useRef as useRef5,
+  useSyncExternalStore
+} from "react";
+var useMouseEventsOverBoundingBox = (options) => {
+  const context = useContext2(MouseTrackerContext);
+  if (!context) {
+    throw new Error(
+      "useMouseEventsOverBoundingBox must be used within a MouseTracker"
+    );
+  }
+  const id = useId();
+  const latestOptionsRef = useRef5(options);
+  latestOptionsRef.current = options;
+  const handleClick = useMemo4(
+    () => (event) => {
+      latestOptionsRef.current.onClick?.(event);
+    },
+    []
+  );
+  useEffect9(() => {
+    context.registerBoundingBox(id, {
+      bounds: latestOptionsRef.current.bounds,
+      onClick: latestOptionsRef.current.onClick ? handleClick : void 0
+    });
+    return () => {
+      context.unregisterBoundingBox(id);
+    };
+  }, [context, handleClick, id]);
+  useEffect9(() => {
+    context.updateBoundingBox(id, {
+      bounds: latestOptionsRef.current.bounds,
+      onClick: latestOptionsRef.current.onClick ? handleClick : void 0
+    });
+  }, [
+    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 };
+};
+
+// lib/components/SchematicComponentMouseTarget.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var areMeasurementsEqual = (a, b) => {
+  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;
+};
+var SchematicComponentMouseTarget = ({
+  componentId,
+  svgDivRef,
+  containerRef,
+  onComponentClick,
+  showOutline,
+  circuitJsonKey
+}) => {
+  const [measurement, setMeasurement] = useState5(null);
+  const frameRef = useRef6(null);
+  const measure = useCallback4(() => {
+    frameRef.current = null;
+    const svgDiv = svgDivRef.current;
+    const container = containerRef.current;
+    if (!svgDiv || !container) {
+      setMeasurement((prev) => prev ? null : prev);
+      return;
+    }
+    const element = svgDiv.querySelector(
+      `[data-schematic-component-id="${componentId}"]`
+    );
+    if (!element) {
+      setMeasurement((prev) => prev ? null : prev);
+      return;
+    }
+    const elementRect = element.getBoundingClientRect();
+    const containerRect = container.getBoundingClientRect();
+    const nextMeasurement = {
+      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 = useCallback4(() => {
+    if (frameRef.current !== null) return;
+    frameRef.current = window.requestAnimationFrame(measure);
+  }, [measure]);
+  useEffect10(() => {
+    scheduleMeasure();
+  }, [scheduleMeasure, circuitJsonKey]);
+  useEffect10(() => {
+    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 = useCallback4(
+    (event) => {
+      if (onComponentClick) {
+        onComponentClick(componentId, event);
+      }
+    },
+    [componentId, onComponentClick]
+  );
+  const bounds = measurement?.bounds ?? null;
+  const { hovering } = useMouseEventsOverBoundingBox({
+    bounds,
+    onClick: onComponentClick ? handleClick : void 0
+  });
+  if (!measurement || !hovering || !showOutline) {
+    return null;
+  }
+  const rect = measurement.rect;
+  return /* @__PURE__ */ jsx10(
+    "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)",
+        borderRadius: "6px",
+        pointerEvents: "none",
+        zIndex: zIndexMap.schematicComponentHoverOutline,
+        boxShadow: "0 0 6px rgba(51, 153, 255, 0.35)"
+      }
+    }
+  );
+};
+
 // lib/components/SchematicViewer.tsx
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 var SchematicViewer = ({
   circuitJson,
   containerStyle,
@@ -1790,13 +2133,14 @@ var SchematicViewer = ({
   clickToInteractEnabled = false,
   colorOverrides,
   spiceSimulationEnabled = false,
-  disableGroups = false
+  disableGroups = false,
+  onSchematicComponentClicked
 }) => {
   if (debug3) {
     enableDebug();
   }
-  const [showSpiceOverlay, setShowSpiceOverlay] = useState5(false);
-  const [spiceSimOptions, setSpiceSimOptions] = useState5({
+  const [showSpiceOverlay, setShowSpiceOverlay] = useState6(false);
+  const [spiceSimOptions, setSpiceSimOptions] = useState6({
     showVoltage: true,
     showCurrent: false,
     startTime: 0,
@@ -1807,11 +2151,11 @@ var SchematicViewer = ({
   const getCircuitHash = (circuitJson2) => {
     return `${circuitJson2?.length || 0}_${circuitJson2?.editCount || 0}`;
   };
-  const circuitJsonKey = useMemo3(
+  const circuitJsonKey = useMemo5(
     () => getCircuitHash(circuitJson),
     [circuitJson]
   );
-  const spiceString = useMemo3(() => {
+  const spiceString = useMemo5(() => {
     if (!spiceSimulationEnabled) return null;
     try {
       return getSpiceFromCircuitJson(circuitJson, spiceSimOptions);
@@ -1825,8 +2169,8 @@ var SchematicViewer = ({
     spiceSimOptions.startTime,
     spiceSimOptions.duration
   ]);
-  const [hasSpiceSimRun, setHasSpiceSimRun] = useState5(false);
-  useEffect8(() => {
+  const [hasSpiceSimRun, setHasSpiceSimRun] = useState6(false);
+  useEffect11(() => {
     setHasSpiceSimRun(false);
   }, [circuitJsonKey]);
   const {
@@ -1835,18 +2179,26 @@ var SchematicViewer = ({
     isLoading: isSpiceSimLoading,
     error: spiceSimError
   } = useSpiceSimulation(hasSpiceSimRun ? spiceString : null);
-  const [editModeEnabled, setEditModeEnabled] = useState5(defaultEditMode);
-  const [snapToGrid, setSnapToGrid] = useState5(true);
-  const [isInteractionEnabled, setIsInteractionEnabled] = useState5(
+  const [editModeEnabled, setEditModeEnabled] = useState6(defaultEditMode);
+  const [snapToGrid, setSnapToGrid] = useState6(true);
+  const [isInteractionEnabled, setIsInteractionEnabled] = useState6(
     !clickToInteractEnabled
   );
-  const [showViewMenu, setShowViewMenu] = useState5(false);
-  const [showSchematicGroups, setShowSchematicGroups] = useState5(() => {
+  const [showViewMenu, setShowViewMenu] = useState6(false);
+  const [showSchematicGroups, setShowSchematicGroups] = useState6(() => {
     if (disableGroups) return false;
     return getStoredBoolean("schematic_viewer_show_groups", false);
   });
-  const svgDivRef = useRef4(null);
-  const touchStartRef = useRef4(null);
+  const svgDivRef = useRef7(null);
+  const touchStartRef = useRef7(null);
+  const schematicComponentIds = useMemo5(() => {
+    try {
+      return su6(circuitJson).schematic_component?.list()?.map((component) => component.schematic_component_id) ?? [];
+    } catch (err) {
+      console.error("Failed to derive schematic component ids", err);
+      return [];
+    }
+  }, [circuitJsonKey, circuitJson]);
   const handleTouchStart = (e) => {
     const touch = e.touches[0];
     touchStartRef.current = {
@@ -1866,9 +2218,9 @@ var SchematicViewer = ({
     }
     touchStartRef.current = null;
   };
-  const [internalEditEvents, setInternalEditEvents] = useState5([]);
-  const circuitJsonRef = useRef4(circuitJson);
-  useEffect8(() => {
+  const [internalEditEvents, setInternalEditEvents] = useState6([]);
+  const circuitJsonRef = useRef7(circuitJson);
+  useEffect11(() => {
     const circuitHash = getCircuitHash(circuitJson);
     const circuitHashRef = getCircuitHash(circuitJsonRef.current);
     if (circuitHash !== circuitHashRef) {
@@ -1889,7 +2241,7 @@ var SchematicViewer = ({
     enabled: isInteractionEnabled && !showSpiceOverlay
   });
   const { containerWidth, containerHeight } = useResizeHandling(containerRef);
-  const svgString = useMemo3(() => {
+  const svgString = useMemo5(() => {
     if (!containerWidth || !containerHeight) return "";
     return convertCircuitJsonToSchematicSvg(circuitJson, {
       width: containerWidth,
@@ -1901,13 +2253,13 @@ var SchematicViewer = ({
       colorOverrides
     });
   }, [circuitJsonKey, containerWidth, containerHeight]);
-  const containerBackgroundColor = useMemo3(() => {
+  const containerBackgroundColor = useMemo5(() => {
     const match = svgString.match(
       /<svg[^>]*style="[^"]*background-color:\s*([^;\"]+)/i
     );
     return match?.[1] ?? "transparent";
   }, [svgString]);
-  const realToSvgProjection = useMemo3(() => {
+  const realToSvgProjection = useMemo5(() => {
     if (!svgString) return identity();
     const transformString = svgString.match(
       /data-real-to-screen-transform="([^"]+)"/
@@ -1925,7 +2277,7 @@ var SchematicViewer = ({
       onEditEvent(event);
     }
   };
-  const editEventsWithUnappliedEditEvents = useMemo3(() => {
+  const editEventsWithUnappliedEditEvents = useMemo5(() => {
     return [...unappliedEditEvents, ...internalEditEvents];
   }, [unappliedEditEvents, internalEditEvents]);
   const {
@@ -1962,12 +2314,12 @@ var SchematicViewer = ({
     circuitJsonKey,
     showGroups: showSchematicGroups && !disableGroups
   });
-  const handleComponentTouchStartRef = useRef4(handleComponentTouchStart);
-  useEffect8(() => {
+  const handleComponentTouchStartRef = useRef7(handleComponentTouchStart);
+  useEffect11(() => {
     handleComponentTouchStartRef.current = handleComponentTouchStart;
   }, [handleComponentTouchStart]);
-  const svgDiv = useMemo3(
-    () => /* @__PURE__ */ jsx9(
+  const svgDiv = useMemo5(
+    () => /* @__PURE__ */ jsx11(
       "div",
       {
         ref: svgDivRef,
@@ -1991,7 +2343,7 @@ var SchematicViewer = ({
       showSpiceOverlay
     ]
   );
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsx11(MouseTracker, { children: /* @__PURE__ */ jsxs6(
     "div",
     {
       ref: containerRef,
@@ -2032,7 +2384,7 @@ var SchematicViewer = ({
         handleTouchEnd(e);
       },
       children: [
-        !isInteractionEnabled && clickToInteractEnabled && /* @__PURE__ */ jsx9(
+        !isInteractionEnabled && clickToInteractEnabled && /* @__PURE__ */ jsx11(
           "div",
           {
             onClick: (e) => {
@@ -2051,7 +2403,7 @@ var SchematicViewer = ({
               pointerEvents: "all",
               touchAction: "pan-x pan-y pinch-zoom"
             },
-            children: /* @__PURE__ */ jsx9(
+            children: /* @__PURE__ */ jsx11(
               "div",
               {
                 style: {
@@ -2068,28 +2420,28 @@ var SchematicViewer = ({
             )
           }
         ),
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx11(
           ViewMenuIcon,
           {
             active: showViewMenu,
             onClick: () => setShowViewMenu(!showViewMenu)
           }
         ),
-        editingEnabled && /* @__PURE__ */ jsx9(
+        editingEnabled && /* @__PURE__ */ jsx11(
           EditIcon,
           {
             active: editModeEnabled,
             onClick: () => setEditModeEnabled(!editModeEnabled)
           }
         ),
-        editingEnabled && editModeEnabled && /* @__PURE__ */ jsx9(
+        editingEnabled && editModeEnabled && /* @__PURE__ */ jsx11(
           GridIcon,
           {
             active: snapToGrid,
             onClick: () => setSnapToGrid(!snapToGrid)
           }
         ),
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx11(
           ViewMenu,
           {
             circuitJson,
@@ -2105,8 +2457,8 @@ var SchematicViewer = ({
             }
           }
         ),
-        spiceSimulationEnabled && /* @__PURE__ */ jsx9(SpiceSimulationIcon, { onClick: () => setShowSpiceOverlay(true) }),
-        showSpiceOverlay && /* @__PURE__ */ jsx9(
+        spiceSimulationEnabled && /* @__PURE__ */ jsx11(SpiceSimulationIcon, { onClick: () => setShowSpiceOverlay(true) }),
+        showSpiceOverlay && /* @__PURE__ */ jsx11(
           SpiceSimulationOverlay,
           {
             spiceString,
@@ -2123,12 +2475,31 @@ var SchematicViewer = ({
             hasRun: hasSpiceSimRun
           }
         ),
+        onSchematicComponentClicked && schematicComponentIds.map((componentId) => /* @__PURE__ */ jsx11(
+          SchematicComponentMouseTarget,
+          {
+            componentId,
+            svgDivRef,
+            containerRef,
+            showOutline: true,
+            circuitJsonKey,
+            onComponentClick: (id, event) => {
+              onSchematicComponentClicked?.({
+                schematicComponentId: id,
+                event
+              });
+            }
+          },
+          componentId
+        )),
         svgDiv
       ]
     }
-  );
+  ) });
 };
 export {
-  SchematicViewer
+  MouseTracker,
+  SchematicViewer,
+  useMouseEventsOverBoundingBox
 };
 //# sourceMappingURL=index.js.map