@tscircuit/pcb-viewer 1.11.312 → 1.11.314

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() {
@@ -7842,58 +7842,6 @@ var convertElementToPrimitives = (element, allElements) => {
         _parent_source_component
       });
     }
-    case "pcb_copper_pour": {
-      const pour = element;
-      switch (pour.shape) {
-        case "rect": {
-          const { center, width, height, layer, rotation } = pour;
-          return [
-            {
-              _pcb_drawing_object_id: getNewPcbDrawingObjectId(
-                "pcb_copper_pour_rect"
-              ),
-              pcb_drawing_type: "rect",
-              x: center.x,
-              y: center.y,
-              w: width,
-              h: height,
-              layer,
-              _element: element,
-              ccw_rotation: rotation
-            }
-          ];
-        }
-        case "polygon": {
-          const { points, layer } = pour;
-          return [
-            {
-              _pcb_drawing_object_id: getNewPcbDrawingObjectId(
-                "pcb_copper_pour_polygon"
-              ),
-              pcb_drawing_type: "polygon",
-              points: normalizePolygonPoints(points),
-              layer,
-              _element: element
-            }
-          ];
-        }
-        case "brep": {
-          const { brep_shape, layer } = pour;
-          return [
-            {
-              _pcb_drawing_object_id: getNewPcbDrawingObjectId(
-                "pcb_copper_pour_brep"
-              ),
-              pcb_drawing_type: "polygon_with_arcs",
-              brep_shape,
-              layer,
-              _element: element
-            }
-          ];
-        }
-      }
-      return [];
-    }
   }
   return [];
 };
@@ -9352,6 +9300,24 @@ function drawPcbViaElementsForLayer({
   }
 }
 
+// src/lib/draw-copper-pour.ts
+import { CircuitToCanvasDrawer as CircuitToCanvasDrawer11 } from "circuit-to-canvas";
+function isCopperPourElement(element) {
+  return element.type === "pcb_copper_pour";
+}
+function drawCopperPourElementsForLayer({
+  canvas,
+  elements,
+  layers,
+  realToCanvasMat
+}) {
+  const copperPourElements = elements.filter(isCopperPourElement);
+  if (copperPourElements.length === 0) return;
+  const drawer = new CircuitToCanvasDrawer11(canvas);
+  drawer.realToCanvasMat = realToCanvasMat;
+  drawer.drawElements(copperPourElements, { layers });
+}
+
 // src/components/CanvasPrimitiveRenderer.tsx
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var orderedLayers = [
@@ -9465,6 +9431,22 @@ var CanvasPrimitiveRenderer = ({
           primitives
         });
       }
+      if (topCanvas) {
+        drawCopperPourElementsForLayer({
+          canvas: topCanvas,
+          elements,
+          layers: ["top_copper"],
+          realToCanvasMat: transform
+        });
+      }
+      if (bottomCanvas) {
+        drawCopperPourElementsForLayer({
+          canvas: bottomCanvas,
+          elements,
+          layers: ["bottom_copper"],
+          realToCanvasMat: transform
+        });
+      }
       const topSilkscreenCanvas = canvasRefs.current.top_silkscreen;
       if (topSilkscreenCanvas) {
         drawSilkscreenElementsForLayer(
@@ -10473,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);
@@ -10590,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,
@@ -10620,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 = {
@@ -10674,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();
@@ -10686,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;
@@ -13583,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.311",
+  version: "1.11.313",
   main: "dist/index.js",
   type: "module",
   repository: "tscircuit/pcb-viewer",
@@ -13643,7 +13619,7 @@ var package_default = {
     "@tscircuit/math-utils": "^0.0.29",
     "@vitejs/plugin-react": "^5.0.2",
     "circuit-json": "^0.0.354",
-    "circuit-to-canvas": "^0.0.47",
+    "circuit-to-canvas": "^0.0.48",
     "circuit-to-svg": "^0.0.271",
     color: "^4.2.3",
     "react-supergrid": "^1.0.10",
@@ -13654,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(() => {
-    if (!key || typeof onUse !== "function") return;
+    onUseRef.current = onUse;
+  }, [onUse]);
+  useEffect13(() => {
+    if (!key) return;
     const handleKeyDown = (event) => {
       const keyParts = key.split("+");
       const ctrlRequired = keyParts.includes("ctrl");
@@ -13668,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
@@ -13897,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);
@@ -13919,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]) : () => {
     },
@@ -13937,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);
@@ -13991,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(
@@ -14700,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]