@tscircuit/pcb-viewer 1.11.369 → 1.11.370

package/README.md

@@ -75,6 +75,7 @@ The PCBViewer component accepts these props:
 - `allowEditing`: Enable/disable editing capabilities (default: true)
 - `editEvents`: Array of edit events to apply
 - `onEditEventsChanged`: Callback when edit events change
+- `onBoundsSelected`: Callback when the Bounds tool completes a rectangle selection. Receives `{ minX, minY, maxX, maxY }`.
 - `initialState`: Initial state for the viewer
 
 ### Features

package/dist/index.d.ts

@@ -51,6 +51,23 @@ type StateProps = {
     [key in keyof State]: State[key] extends boolean ? boolean : never;
 };
 
+type GridConfig = {
+    spacing: number;
+    view_window: {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+    };
+};
+
+interface BoundsSelection {
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+}
+
 type Props = {
     circuitJson?: AnyCircuitElement[];
     height?: number;
@@ -58,22 +75,13 @@ type Props = {
     editEvents?: ManualEditEvent[];
     initialState?: Partial<StateProps>;
     onEditEventsChanged?: (editEvents: ManualEditEvent[]) => void;
+    onBoundsSelected?: (bounds: BoundsSelection) => void;
     focusOnHover?: boolean;
     clickToInteractEnabled?: boolean;
     debugGraphics?: GraphicsObject | null;
     disablePcbGroups?: boolean;
 };
-declare const PCBViewer: ({ circuitJson, debugGraphics, height, initialState, allowEditing, editEvents: editEventsProp, onEditEventsChanged, focusOnHover, clickToInteractEnabled, disablePcbGroups, }: Props) => react_jsx_runtime.JSX.Element;
-
-type GridConfig = {
-    spacing: number;
-    view_window: {
-        left: number;
-        right: number;
-        top: number;
-        bottom: number;
-    };
-};
+declare const PCBViewer: ({ circuitJson, debugGraphics, height, initialState, allowEditing, editEvents: editEventsProp, onEditEventsChanged, onBoundsSelected, focusOnHover, clickToInteractEnabled, disablePcbGroups, }: Props) => react_jsx_runtime.JSX.Element;
 
 interface CanvasElementsRendererProps {
     elements: AnyCircuitElement[];
@@ -85,6 +93,7 @@ interface CanvasElementsRendererProps {
     grid?: GridConfig;
     allowEditing: boolean;
     focusOnHover?: boolean;
+    onBoundsSelected?: (bounds: BoundsSelection) => void;
     cancelPanDrag: () => void;
     onCreateEditEvent: (event: ManualEditEvent) => void;
     onModifyEditEvent: (event: Partial<ManualEditEvent>) => void;

package/dist/index.js

@@ -11611,12 +11611,17 @@ var DimensionOverlay = ({
   children,
   transform,
   focusOnHover = false,
-  primitives = []
+  primitives = [],
+  onBoundsSelected,
+  cancelPanDrag
 }) => {
   if (!transform) transform = identity4();
   const [dimensionToolVisible, setDimensionToolVisible] = useState4(false);
   const [dimensionToolStretching, setDimensionToolStretching] = useState4(false);
   const [measureToolArmed, setMeasureToolArmed] = useState4(false);
+  const [boundsToolArmed, setBoundsToolArmed] = useState4(false);
+  const [boundsToolVisible, setBoundsToolVisible] = useState4(false);
+  const [boundsToolDragging, setBoundsToolDragging] = useState4(false);
   const [activeSnapIds, setActiveSnapIds] = useState4({
     start: null,
     end: null
@@ -11628,8 +11633,16 @@ var DimensionOverlay = ({
       window.dispatchEvent(new Event("disarm-dimension-tool"));
     }
   }, [measureToolArmed]);
+  const disarmBounds = useCallback6(() => {
+    if (boundsToolArmed) {
+      setBoundsToolArmed(false);
+      window.dispatchEvent(new Event("disarm-bounds-tool"));
+    }
+  }, [boundsToolArmed]);
   const [dStart, setDStart] = useState4({ x: 0, y: 0 });
   const [dEnd, setDEnd] = useState4({ x: 0, y: 0 });
+  const [boundsStart, setBoundsStart] = useState4({ x: 0, y: 0 });
+  const [boundsEnd, setBoundsEnd] = useState4({ x: 0, y: 0 });
   const mousePosRef = useRef6({ x: 0, y: 0 });
   const containerRef = useRef6(null);
   const container = containerRef.current;
@@ -11768,22 +11781,74 @@ var DimensionOverlay = ({
         setDimensionToolVisible(false);
         setDimensionToolStretching(false);
         setActiveSnapIds({ start: null, end: null });
+        setBoundsToolVisible(false);
+        setBoundsToolDragging(false);
         disarmMeasure();
+        disarmBounds();
       }
     };
     const armMeasure = () => {
       setMeasureToolArmed(true);
+      setBoundsToolArmed(false);
+      window.dispatchEvent(new Event("disarm-bounds-tool"));
+    };
+    const armBounds = () => {
+      setBoundsToolArmed(true);
+      setMeasureToolArmed(false);
+      setDimensionToolVisible(false);
+      setDimensionToolStretching(false);
+      window.dispatchEvent(new Event("disarm-dimension-tool"));
     };
     window.addEventListener("keydown", down);
     window.addEventListener("arm-dimension-tool", armMeasure);
+    window.addEventListener("arm-bounds-tool", armBounds);
     return () => {
       window.removeEventListener("keydown", down);
       window.removeEventListener("arm-dimension-tool", armMeasure);
+      window.removeEventListener("arm-bounds-tool", armBounds);
       disarmMeasure();
+      disarmBounds();
     };
-  }, [isMouseOverContainer, dimensionToolVisible, disarmMeasure, findSnap]);
+  }, [
+    isMouseOverContainer,
+    dimensionToolVisible,
+    disarmMeasure,
+    disarmBounds,
+    findSnap
+  ]);
   const screenDStart = applyToPoint8(transform, dStart);
   const screenDEnd = applyToPoint8(transform, dEnd);
+  const screenBoundsStart = applyToPoint8(transform, boundsStart);
+  const screenBoundsEnd = applyToPoint8(transform, boundsEnd);
+  const selectedBounds = {
+    minX: Math.min(boundsStart.x, boundsEnd.x),
+    minY: Math.min(boundsStart.y, boundsEnd.y),
+    maxX: Math.max(boundsStart.x, boundsEnd.x),
+    maxY: Math.max(boundsStart.y, boundsEnd.y)
+  };
+  const boundsScreenRect = {
+    left: Math.min(screenBoundsStart.x, screenBoundsEnd.x),
+    top: Math.min(screenBoundsStart.y, screenBoundsEnd.y),
+    width: Math.abs(screenBoundsStart.x - screenBoundsEnd.x),
+    height: Math.abs(screenBoundsStart.y - screenBoundsEnd.y)
+  };
+  const emitBounds = useCallback6(
+    (start, end) => {
+      const bounds = {
+        minX: Math.min(start.x, end.x),
+        minY: Math.min(start.y, end.y),
+        maxX: Math.max(start.x, end.x),
+        maxY: Math.max(start.y, end.y)
+      };
+      onBoundsSelected?.(bounds);
+      window.dispatchEvent(
+        new CustomEvent("pcb-viewer:bounds-selected", {
+          detail: bounds
+        })
+      );
+    },
+    [onBoundsSelected]
+  );
   const arrowScreenBounds = {
     left: Math.min(screenDStart.x, screenDEnd.x),
     right: Math.max(screenDStart.x, screenDEnd.x),
@@ -11838,13 +11903,26 @@ var DimensionOverlay = ({
           setDEnd({ x: snap.point.x, y: snap.point.y });
           setActiveSnapIds((prev) => ({ ...prev, end: snap.id }));
         }
+        if (boundsToolDragging) {
+          cancelPanDrag?.();
+          setBoundsEnd({ x: rwPoint.x, y: rwPoint.y });
+        }
       },
       onMouseDown: (e) => {
         const rect = e.currentTarget.getBoundingClientRect();
         const x = e.clientX - rect.left;
         const y = e.clientY - rect.top;
         const rwPoint = applyToPoint8(inverse2(transform), { x, y });
-        if (measureToolArmed && !dimensionToolVisible) {
+        if (boundsToolArmed) {
+          e.preventDefault();
+          e.stopPropagation();
+          cancelPanDrag?.();
+          setBoundsStart({ x: rwPoint.x, y: rwPoint.y });
+          setBoundsEnd({ x: rwPoint.x, y: rwPoint.y });
+          setBoundsToolVisible(true);
+          setBoundsToolDragging(true);
+          disarmBounds();
+        } else if (measureToolArmed && !dimensionToolVisible) {
           const snap = findSnap(rwPoint);
           setDStart({ x: snap.point.x, y: snap.point.y });
           setDEnd({ x: snap.point.x, y: snap.point.y });
@@ -11860,8 +11938,82 @@ var DimensionOverlay = ({
           setActiveSnapIds({ start: null, end: null });
         }
       },
+      onMouseUp: (e) => {
+        if (!boundsToolDragging) return;
+        const rect = e.currentTarget.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        const rwPoint = applyToPoint8(inverse2(transform), { x, y });
+        const end = { x: rwPoint.x, y: rwPoint.y };
+        e.preventDefault();
+        e.stopPropagation();
+        cancelPanDrag?.();
+        setBoundsEnd(end);
+        setBoundsToolDragging(false);
+        emitBounds(boundsStart, end);
+      },
       children: [
         children,
+        boundsToolVisible && /* @__PURE__ */ jsxs4(Fragment, { children: [
+          /* @__PURE__ */ jsx6(
+            "svg",
+            {
+              style: {
+                position: "absolute",
+                left: 0,
+                top: 0,
+                pointerEvents: "none",
+                mixBlendMode: "difference",
+                zIndex: zIndexMap.dimensionOverlay
+              },
+              width: containerBounds.width,
+              height: containerBounds.height,
+              children: /* @__PURE__ */ jsx6(
+                "rect",
+                {
+                  x: boundsScreenRect.left,
+                  y: boundsScreenRect.top,
+                  width: boundsScreenRect.width,
+                  height: boundsScreenRect.height,
+                  stroke: "red",
+                  strokeWidth: 1.5,
+                  strokeDasharray: "4,3",
+                  fill: "rgba(255, 0, 0, 0.12)"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs4(
+            "div",
+            {
+              style: {
+                left: 0,
+                bottom: dimensionToolVisible ? 58 : 0,
+                position: "absolute",
+                color: "red",
+                fontFamily: "sans-serif",
+                fontSize: 12,
+                margin: 4,
+                pointerEvents: "none",
+                mixBlendMode: "difference",
+                zIndex: zIndexMap.dimensionOverlay
+              },
+              children: [
+                "minX: ",
+                selectedBounds.minX.toFixed(2),
+                ", minY:",
+                " ",
+                selectedBounds.minY.toFixed(2),
+                /* @__PURE__ */ jsx6("br", {}),
+                "maxX: ",
+                selectedBounds.maxX.toFixed(2),
+                ", maxY:",
+                " ",
+                selectedBounds.maxY.toFixed(2)
+              ]
+            }
+          )
+        ] }),
         dimensionToolVisible && /* @__PURE__ */ jsxs4(Fragment, { children: [
           diagonalLabel.show && /* @__PURE__ */ jsx6(
             "div",
@@ -14752,7 +14904,7 @@ import { css as css3 } from "@emotion/css";
 // package.json
 var package_default = {
   name: "@tscircuit/pcb-viewer",
-  version: "1.11.368",
+  version: "1.11.369",
   main: "dist/index.js",
   type: "module",
   repository: "tscircuit/pcb-viewer",
@@ -15564,14 +15716,21 @@ var ToolbarOverlay = ({ children, elements }) => {
   const [isLayerMenuOpen, setLayerMenuOpen] = useState11(false);
   const [isErrorsOpen, setErrorsOpen] = useState11(false);
   const [measureToolArmed, setMeasureToolArmed] = useState11(false);
+  const [boundsToolArmed, setBoundsToolArmed] = useState11(false);
   useEffect17(() => {
     const arm = () => setMeasureToolArmed(true);
     const disarm = () => setMeasureToolArmed(false);
+    const armBounds = () => setBoundsToolArmed(true);
+    const disarmBounds = () => setBoundsToolArmed(false);
     window.addEventListener("arm-dimension-tool", arm);
     window.addEventListener("disarm-dimension-tool", disarm);
+    window.addEventListener("arm-bounds-tool", armBounds);
+    window.addEventListener("disarm-bounds-tool", disarmBounds);
     return () => {
       window.removeEventListener("arm-dimension-tool", arm);
       window.removeEventListener("disarm-dimension-tool", disarm);
+      window.removeEventListener("arm-bounds-tool", armBounds);
+      window.removeEventListener("disarm-bounds-tool", disarmBounds);
     };
   }, []);
   const pcbBoard = elements?.find((el) => el.type === "pcb_board");
@@ -15669,8 +15828,14 @@ var ToolbarOverlay = ({ children, elements }) => {
   }, [viewSettings.is_showing_rats_nest, setIsShowingRatsNest]);
   const handleMeasureToolClick = useCallback10(() => {
     setMeasureToolArmed(true);
+    setBoundsToolArmed(false);
     window.dispatchEvent(new Event("arm-dimension-tool"));
   }, []);
+  const handleBoundsToolClick = useCallback10(() => {
+    setBoundsToolArmed(true);
+    setMeasureToolArmed(false);
+    window.dispatchEvent(new Event("arm-bounds-tool"));
+  }, []);
   const handleViewMenuToggle = useCallback10(() => {
     const newViewMenuOpen = !isViewMenuOpen;
     setViewMenuOpen(newViewMenuOpen);
@@ -15842,6 +16007,15 @@ var ToolbarOverlay = ({ children, elements }) => {
                   children: /* @__PURE__ */ jsx23("div", { children: "\u{1F4CF}" })
                 }
               ),
+              /* @__PURE__ */ jsx23(
+                ToolbarButton,
+                {
+                  isSmallScreen,
+                  style: boundsToolArmed ? { backgroundColor: "#444" } : {},
+                  onClick: handleBoundsToolClick,
+                  children: /* @__PURE__ */ jsx23("div", { children: "Bounds" })
+                }
+              ),
               /* @__PURE__ */ jsx23(
                 ToolbarButton,
                 {
@@ -16186,6 +16360,8 @@ var CanvasElementsRenderer = (props) => {
                   transform,
                   focusOnHover: props.focusOnHover,
                   primitives: primitivesWithoutInteractionMetadata,
+                  onBoundsSelected: props.onBoundsSelected,
+                  cancelPanDrag: props.cancelPanDrag,
                   children: /* @__PURE__ */ jsx24(ToolbarOverlay, { elements, children: /* @__PURE__ */ jsx24(ErrorOverlay, { transform, elements, children: /* @__PURE__ */ jsx24(RatsNestOverlay, { transform, soup: elements, children: /* @__PURE__ */ jsx24(
                     PcbGroupOverlay,
                     {
@@ -16294,6 +16470,7 @@ var PCBViewer = ({
   allowEditing = true,
   editEvents: editEventsProp,
   onEditEventsChanged,
+  onBoundsSelected,
   focusOnHover = false,
   clickToInteractEnabled = false,
   disablePcbGroups = false
@@ -16415,6 +16592,7 @@ var PCBViewer = ({
                   width: refDimensions.width,
                   allowEditing,
                   focusOnHover,
+                  onBoundsSelected,
                   cancelPanDrag,
                   onCreateEditEvent,
                   onModifyEditEvent,