@tscircuit/pcb-viewer 1.11.313 → 1.11.315

package/dist/index.js

@@ -6451,7 +6451,7 @@ var ToastContainer = () => {
 };
 
 // src/PCBViewer.tsx
-import { useEffect as useEffect16, useMemo as useMemo8, useRef as useRef11, useState as useState11 } from "react";
+import { useEffect as useEffect16, useMemo as useMemo8, useRef as useRef12, useState as useState11 } from "react";
 
 // node_modules/react-use/esm/misc/util.js
 var noop = function() {
@@ -10455,6 +10455,7 @@ var DimensionOverlay = ({
     start: null,
     end: null
   });
+  const isMouseOverContainer = useGlobalStore((s) => s.is_mouse_over_container);
   const disarmMeasure = useCallback3(() => {
     if (measureToolArmed) {
       setMeasureToolArmed(false);
@@ -10572,8 +10573,9 @@ var DimensionOverlay = ({
     [snappingPointsWithScreen, transform]
   );
   useEffect7(() => {
-    const container2 = containerRef.current;
     const down = (e) => {
+      const containerHasFocus = containerRef.current?.contains(document.activeElement) || document.activeElement === containerRef.current;
+      if (!isMouseOverContainer && !containerHasFocus) return;
       if (e.key === "d") {
         const snap = findSnap({
           x: mousePosRef.current.x,
@@ -10602,34 +10604,14 @@ var DimensionOverlay = ({
     const armMeasure = () => {
       setMeasureToolArmed(true);
     };
-    const addKeyListener = () => {
-      if (container2) {
-        window.addEventListener("keydown", down);
-      }
-    };
-    const removeKeyListener = () => {
-      if (container2) {
-        window.removeEventListener("keydown", down);
-      }
-    };
+    window.addEventListener("keydown", down);
     window.addEventListener("arm-dimension-tool", armMeasure);
-    if (container2) {
-      container2.addEventListener("focus", addKeyListener);
-      container2.addEventListener("blur", removeKeyListener);
-      container2.addEventListener("mouseenter", addKeyListener);
-      container2.addEventListener("mouseleave", removeKeyListener);
-    }
     return () => {
+      window.removeEventListener("keydown", down);
       window.removeEventListener("arm-dimension-tool", armMeasure);
       disarmMeasure();
-      if (container2) {
-        container2.removeEventListener("focus", addKeyListener);
-        container2.removeEventListener("blur", removeKeyListener);
-        container2.removeEventListener("mouseenter", addKeyListener);
-        container2.removeEventListener("mouseleave", removeKeyListener);
-      }
     };
-  }, [containerRef, dimensionToolVisible, disarmMeasure, findSnap]);
+  }, [isMouseOverContainer, dimensionToolVisible, disarmMeasure, findSnap]);
   const screenDStart = applyToPoint8(transform, dStart);
   const screenDEnd = applyToPoint8(transform, dEnd);
   const arrowScreenBounds = {
@@ -10656,8 +10638,9 @@ var DimensionOverlay = ({
     "div",
     {
       ref: containerRef,
+      "data-pcb-viewer": true,
       tabIndex: 0,
-      style: { position: "relative" },
+      style: { position: "relative", outline: "none" },
       onMouseEnter: () => {
         if (focusOnHover && containerRef.current) {
           containerRef.current.focus();
@@ -10668,6 +10651,11 @@ var DimensionOverlay = ({
           containerRef.current.blur();
         }
       },
+      onClick: () => {
+        if (containerRef.current) {
+          containerRef.current.focus();
+        }
+      },
       onMouseMove: (e) => {
         const rect = e.currentTarget.getBoundingClientRect();
         const x = e.clientX - rect.left;
@@ -13565,13 +13553,19 @@ var RatsNestOverlay = ({ transform, soup, children }) => {
 };
 
 // src/components/ToolbarOverlay.tsx
-import { useEffect as useEffect15, useState as useState9, useCallback as useCallback4, useRef as useRef10 } from "react";
+import {
+  useEffect as useEffect15,
+  useState as useState9,
+  useCallback as useCallback4,
+  useRef as useRef11,
+  useLayoutEffect as useLayoutEffect2
+} from "react";
 import { css as css3 } from "@emotion/css";
 
 // package.json
 var package_default = {
   name: "@tscircuit/pcb-viewer",
-  version: "1.11.312",
+  version: "1.11.314",
   main: "dist/index.js",
   type: "module",
   repository: "tscircuit/pcb-viewer",
@@ -13624,8 +13618,8 @@ var package_default = {
     "@tscircuit/alphabet": "^0.0.9",
     "@tscircuit/math-utils": "^0.0.29",
     "@vitejs/plugin-react": "^5.0.2",
-    "circuit-json": "^0.0.354",
-    "circuit-to-canvas": "^0.0.48",
+    "circuit-json": "^0.0.356",
+    "circuit-to-canvas": "^0.0.50",
     "circuit-to-svg": "^0.0.271",
     color: "^4.2.3",
     "react-supergrid": "^1.0.10",
@@ -13636,13 +13630,21 @@ var package_default = {
 };
 
 // src/hooks/useHotKey.ts
-import { useEffect as useEffect13 } from "react";
-var useHotKey = (key, onUse) => {
+import { useEffect as useEffect13, useRef as useRef10 } from "react";
+var useHotKey = (key, onUse, containerRef) => {
   const isMouseOverContainer = useGlobalStore(
     (s) => s.is_mouse_over_container
   );
+  const isMouseOverContainerRef = useRef10(isMouseOverContainer);
+  const onUseRef = useRef10(onUse);
+  useEffect13(() => {
+    isMouseOverContainerRef.current = isMouseOverContainer;
+  }, [isMouseOverContainer]);
+  useEffect13(() => {
+    onUseRef.current = onUse;
+  }, [onUse]);
   useEffect13(() => {
-    if (!key || typeof onUse !== "function") return;
+    if (!key) return;
     const handleKeyDown = (event) => {
       const keyParts = key.split("+");
       const ctrlRequired = keyParts.includes("ctrl");
@@ -13650,16 +13652,18 @@ var useHotKey = (key, onUse) => {
       const altRequired = keyParts.includes("alt");
       const metaRequired = keyParts.includes("meta");
       const mainKey = keyParts[keyParts.length - 1];
-      if (isMouseOverContainer && (!ctrlRequired || event.ctrlKey) && (!shiftRequired || event.shiftKey) && (!altRequired || event.altKey) && (!metaRequired || event.metaKey) && event.key.toLowerCase() === mainKey.toLowerCase()) {
+      const containerHasFocus = containerRef?.current ? containerRef.current.contains(document.activeElement) || document.activeElement === containerRef.current : false;
+      const shouldTrigger = isMouseOverContainerRef.current || containerHasFocus;
+      if (shouldTrigger && (!ctrlRequired || event.ctrlKey) && (!shiftRequired || event.shiftKey) && (!altRequired || event.altKey) && (!metaRequired || event.metaKey) && event.key.toLowerCase() === mainKey.toLowerCase()) {
         event.preventDefault();
-        onUse();
+        onUseRef.current();
       }
     };
     window.addEventListener("keydown", handleKeyDown);
     return () => {
       window.removeEventListener("keydown", handleKeyDown);
     };
-  }, [key, onUse]);
+  }, [key]);
 };
 
 // src/hooks/useIsSmallScreen.ts
@@ -13879,8 +13883,8 @@ var ToolbarOverlay = ({ children, elements }) => {
   const [isLayerMenuOpen, setLayerMenuOpen] = useState9(false);
   const [isErrorsOpen, setErrorsOpen] = useState9(false);
   const [measureToolArmed, setMeasureToolArmed] = useState9(false);
-  const errorElementsRef = useRef10(/* @__PURE__ */ new Map());
-  const arrowElementsRef = useRef10(/* @__PURE__ */ new Map());
+  const errorElementsRef = useRef11(/* @__PURE__ */ new Map());
+  const arrowElementsRef = useRef11(/* @__PURE__ */ new Map());
   useEffect15(() => {
     const arm = () => setMeasureToolArmed(true);
     const disarm = () => setMeasureToolArmed(false);
@@ -13901,6 +13905,8 @@ var ToolbarOverlay = ({ children, elements }) => {
     "bottom"
   ];
   const processedLayers = availableLayers;
+  const hasRunInitialMouseCheck = useRef11(false);
+  const hotkeyBoundaryRef = useRef11(null);
   const hotKeyCallbacks = {
     "1": availableLayers[0] ? () => selectLayer(availableLayers[0]) : () => {
     },
@@ -13919,17 +13925,40 @@ var ToolbarOverlay = ({ children, elements }) => {
     "8": availableLayers[7] ? () => selectLayer(availableLayers[7]) : () => {
     }
   };
-  useHotKey("1", hotKeyCallbacks["1"]);
-  useHotKey("2", hotKeyCallbacks["2"]);
-  useHotKey("3", hotKeyCallbacks["3"]);
-  useHotKey("4", hotKeyCallbacks["4"]);
-  useHotKey("5", hotKeyCallbacks["5"]);
-  useHotKey("6", hotKeyCallbacks["6"]);
-  useHotKey("7", hotKeyCallbacks["7"]);
-  useHotKey("8", hotKeyCallbacks["8"]);
+  useHotKey("1", hotKeyCallbacks["1"], hotkeyBoundaryRef);
+  useHotKey("2", hotKeyCallbacks["2"], hotkeyBoundaryRef);
+  useHotKey("3", hotKeyCallbacks["3"], hotkeyBoundaryRef);
+  useHotKey("4", hotKeyCallbacks["4"], hotkeyBoundaryRef);
+  useHotKey("5", hotKeyCallbacks["5"], hotkeyBoundaryRef);
+  useHotKey("6", hotKeyCallbacks["6"], hotkeyBoundaryRef);
+  useHotKey("7", hotKeyCallbacks["7"], hotkeyBoundaryRef);
+  useHotKey("8", hotKeyCallbacks["8"], hotkeyBoundaryRef);
+  useLayoutEffect2(() => {
+    if (hasRunInitialMouseCheck.current) return;
+    hasRunInitialMouseCheck.current = true;
+    const checkMousePosition = (e) => {
+      if (hotkeyBoundaryRef.current) {
+        const rect = hotkeyBoundaryRef.current.getBoundingClientRect();
+        const isInside = e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top && e.clientY <= rect.bottom;
+        if (isInside) {
+          setIsMouseOverContainer(true);
+        }
+      }
+      document.removeEventListener("mousemove", checkMousePosition);
+    };
+    document.addEventListener("mousemove", checkMousePosition);
+    return () => {
+      document.removeEventListener("mousemove", checkMousePosition);
+    };
+  }, [setIsMouseOverContainer]);
   const handleMouseEnter = useCallback4(() => {
     setIsMouseOverContainer(true);
   }, [setIsMouseOverContainer]);
+  const handleMouseMove = useCallback4(() => {
+    if (!isMouseOverContainer) {
+      setIsMouseOverContainer(true);
+    }
+  }, [isMouseOverContainer, setIsMouseOverContainer]);
   const handleMouseLeave = useCallback4(() => {
     setIsMouseOverContainer(false);
     setLayerMenuOpen(false);
@@ -13973,9 +14002,11 @@ var ToolbarOverlay = ({ children, elements }) => {
   return /* @__PURE__ */ jsxs14(
     "div",
     {
+      ref: hotkeyBoundaryRef,
       style: { position: "relative", zIndex: "999 !important" },
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
+      onMouseMove: handleMouseMove,
       children: [
         children,
         /* @__PURE__ */ jsxs14(
@@ -14682,8 +14713,8 @@ var PCBViewer = ({
   });
   let [editEvents, setEditEvents] = useState11([]);
   editEvents = editEventsProp ?? editEvents;
-  const initialRenderCompleted = useRef11(false);
-  const touchStartRef = useRef11(null);
+  const initialRenderCompleted = useRef12(false);
+  const touchStartRef = useRef12(null);
   const circuitJsonKey = useMemo8(
     () => calculateCircuitJsonKey(circuitJson),
     [circuitJson]