@tscircuit/pcb-viewer 1.11.420 → 1.11.421

package/dist/index.d.ts

@@ -80,6 +80,27 @@ interface BoundsSelection {
     maxY: number;
 }
 
+interface PcbViewerController {
+    /** @internal Pending command, consumed after the viewer focuses the component. */
+    focusRequest: {
+        pcbComponentId: string;
+    } | null;
+    /** @internal Acknowledge only this request, preserving newer commands. */
+    onFocusRequestHandled: (request: {
+        pcbComponentId: string;
+    }) => void;
+}
+/** Focus commands may be issued before the PCB viewer mounts, such as when switching tabs. */
+declare const usePcbViewerController: () => {
+    controller: {
+        focusRequest: {
+            pcbComponentId: string;
+        };
+        onFocusRequestHandled: (request: NonNullable<PcbViewerController["focusRequest"]>) => void;
+    };
+    focusPcbComponent: (pcbComponentId: string) => void;
+};
+
 type Props = {
     circuitJson?: AnyCircuitElement[];
     height?: number;
@@ -99,8 +120,10 @@ type Props = {
     clickToInteractEnabled?: boolean;
     debugGraphics?: GraphicsObject | null;
     disablePcbGroups?: boolean;
+    /** Connect the controller returned by usePcbViewerController. */
+    controller?: PcbViewerController;
 };
-declare const PCBViewer: ({ circuitJson, debugGraphics, height, renderer, initialState, allowEditing, editEvents: editEventsProp, onEditEventsChanged, onRenderComplete, onBoundsSelected, onViewSchematicComponent, focusOnHover, clickToInteractEnabled, disablePcbGroups, }: Props) => react_jsx_runtime.JSX.Element;
+declare const PCBViewer: ({ circuitJson, debugGraphics, height, renderer, initialState, allowEditing, editEvents: editEventsProp, onEditEventsChanged, onRenderComplete, onBoundsSelected, onViewSchematicComponent, focusOnHover, clickToInteractEnabled, disablePcbGroups, controller, }: Props) => react_jsx_runtime.JSX.Element;
 
 interface CanvasElementsRendererProps {
     elements: AnyCircuitElement[];
@@ -113,6 +136,9 @@ interface CanvasElementsRendererProps {
     grid?: GridConfig;
     allowEditing: boolean;
     focusOnHover?: boolean;
+    focusedPcbComponent?: {
+        pcbComponentId: string;
+    } | null;
     onViewSchematicComponent?: (event: ViewSchematicComponentEvent) => void;
     onBoundsSelected?: (bounds: BoundsSelection) => void;
     onContextMenuOpenChange?: (open: boolean) => void;
@@ -123,4 +149,4 @@ interface CanvasElementsRendererProps {
 }
 declare const CanvasElementsRenderer: (props: CanvasElementsRendererProps) => react_jsx_runtime.JSX.Element;
 
-export { CanvasElementsRenderer, PCBViewer, type ViewSchematicComponentEvent };
+export { CanvasElementsRenderer, PCBViewer, type PcbViewerController, type ViewSchematicComponentEvent, usePcbViewerController };

package/dist/index.js

@@ -9827,7 +9827,7 @@ var ToastContainer = () => {
 };
 
 // src/PCBViewer.tsx
-import { useCallback as useCallback12, useEffect as useEffect20, useMemo as useMemo11, useRef as useRef17, useState as useState14 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect21, useMemo as useMemo11, useRef as useRef17, useState as useState14 } from "react";
 
 // node_modules/react-use/esm/useMountedState.js
 import { useCallback as useCallback2, useEffect as useEffect2, useRef } from "react";
@@ -11665,8 +11665,8 @@ var animateTransform = ({
 };
 
 // src/components/CanvasElementsRenderer.tsx
-import { useCallback as useCallback11, useEffect as useEffect19, useMemo as useMemo10, useRef as useRef16, useState as useState13 } from "react";
-import { applyToPoint as applyToPoint19, inverse as inverse6 } from "transformation-matrix";
+import { useCallback as useCallback11, useEffect as useEffect20, useMemo as useMemo10, useRef as useRef16, useState as useState13 } from "react";
+import { applyToPoint as applyToPoint20, inverse as inverse6 } from "transformation-matrix";
 
 // src/lib/get-trace-overlay-text.ts
 var getNonEmptyName = (name) => name?.trim() || null;
@@ -18585,7 +18585,7 @@ import { css as css3 } from "@emotion/css";
 // package.json
 var package_default = {
   name: "@tscircuit/pcb-viewer",
-  version: "1.11.419",
+  version: "1.11.420",
   main: "dist/index.js",
   type: "module",
   repository: {
@@ -18602,6 +18602,7 @@ var package_default = {
     cosmos: "cosmos",
     "cosmos-export": "cosmos-export",
     "test:x-ray-net": "bun run build && bun tests/x-ray-net/run.ts",
+    "test:component-focus": "bun run build && bun tests/component-focus/run.ts",
     "test:measurement-context-menu": "bun run build && bun tests/measurement-context-menu/run.ts",
     "test:copper-pour-opacity": "bun run build && bun tests/copper-pour-opacity/run.ts",
     "test:webgpu": "bun run build && bun tests/webgpu/run.ts"
@@ -20574,8 +20575,66 @@ var WarningGraphicsOverlay = ({
   );
 };
 
-// src/components/CanvasElementsRenderer.tsx
+// src/components/FocusedPcbComponentOverlay.tsx
+import { useEffect as useEffect19 } from "react";
+import { applyToPoint as applyToPoint19 } from "transformation-matrix";
+
+// src/lib/get-pcb-component-focus.ts
+var getPcbComponentFocus = (elements, pcbComponentId, width, height) => {
+  if (width <= 0 || height <= 0) return;
+  const component = elements.find(
+    (element) => element.type === "pcb_component" && element.pcb_component_id === pcbComponentId
+  );
+  if (component?.type !== "pcb_component") return;
+  const bounds = getPcbElementBounds(component);
+  if (!bounds) return;
+  return {
+    component,
+    bounds,
+    transform: createTransformForBounds({ bounds, width, height })
+  };
+};
+
+// src/components/FocusedPcbComponentOverlay.tsx
 import { jsx as jsx25 } from "react/jsx-runtime";
+var FocusedPcbComponentOverlay = ({
+  focusRequest,
+  elements,
+  transform
+}) => {
+  const componentId = focusRequest?.pcbComponentId;
+  const selectLayer = useGlobalStore((state) => state.selectLayer);
+  const focus = componentId ? getPcbComponentFocus(elements, componentId, 1, 1) : void 0;
+  const layer = focus?.component.layer;
+  useEffect19(() => {
+    if (layer) selectLayer(layer);
+  }, [focusRequest, layer, selectLayer]);
+  if (!focus || !transform) return null;
+  const { bounds } = focus;
+  const a = applyToPoint19(transform, { x: bounds.minX, y: bounds.minY });
+  const b = applyToPoint19(transform, { x: bounds.maxX, y: bounds.maxY });
+  return /* @__PURE__ */ jsx25(
+    "div",
+    {
+      "data-focused-pcb-component-id": componentId,
+      style: {
+        position: "absolute",
+        left: Math.min(a.x, b.x) - 4,
+        top: Math.min(a.y, b.y) - 4,
+        width: Math.abs(b.x - a.x) + 8,
+        height: Math.abs(b.y - a.y) + 8,
+        border: "2px solid #3399ff",
+        borderRadius: 4,
+        boxSizing: "border-box",
+        pointerEvents: "none",
+        zIndex: zIndexMap.elementOverlay
+      }
+    }
+  );
+};
+
+// src/components/CanvasElementsRenderer.tsx
+import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
 var CanvasElementsRenderer = (props) => {
   const { transform, elements } = props;
   const {
@@ -20605,8 +20664,8 @@ var CanvasElementsRenderer = (props) => {
     [elements]
   );
   const [xRayNetIds, setXRayNetIds] = useState13([]);
-  useEffect19(() => setXRayNetIds([]), [connectivityMap]);
-  useEffect19(() => {
+  useEffect20(() => setXRayNetIds([]), [connectivityMap]);
+  useEffect20(() => {
     if (xRayNetIds.length === 0) return;
     const onKeyDown = (event) => {
       if (event.key === "Escape") setXRayNetIds([]);
@@ -20633,7 +20692,7 @@ var CanvasElementsRenderer = (props) => {
     if (!transform) return;
     const hits = getPrimitivesUnderPoint(
       primitivesWithoutInteractionMetadata,
-      applyToPoint19(inverse6(transform), point2),
+      applyToPoint20(inverse6(transform), point2),
       transform,
       selectedLayer
     ).filter(
@@ -20653,7 +20712,7 @@ var CanvasElementsRenderer = (props) => {
     });
     const hits = getPrimitivesUnderPoint(
       primitivesWithoutInteractionMetadata,
-      applyToPoint19(inverse6(transform), point2),
+      applyToPoint20(inverse6(transform), point2),
       transform,
       selectedLayer,
       xRayNetIds.length > 0
@@ -20696,17 +20755,17 @@ var CanvasElementsRenderer = (props) => {
     if (!activeError) return [];
     return getRelatedIdsForError(activeError);
   }, [activeErrorId, elements]);
-  useEffect19(() => {
+  useEffect20(() => {
     if (transform) {
       currentTransformRef.current = transform;
     }
   }, [transform]);
-  useEffect19(() => {
+  useEffect20(() => {
     return () => {
       cancelTransformAnimation(zoomAnimationFrameRef.current);
     };
   }, []);
-  useEffect19(() => {
+  useEffect20(() => {
     if (!props.width || !props.height || !props.setTransform || !focusedErrorId)
       return;
     const focusedError = findErrorElementById(elements, focusedErrorId);
@@ -20794,7 +20853,7 @@ var CanvasElementsRenderer = (props) => {
     },
     [connectivityMap]
   );
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsxs19(
     MouseElementTracker,
     {
       elements: elementsToRender,
@@ -20802,87 +20861,97 @@ var CanvasElementsRenderer = (props) => {
       primitives: hoverPrimitives,
       selectedLayer,
       onMouseHoverOverPrimitives: onMouseOverPrimitives,
-      children: /* @__PURE__ */ jsx25(
-        EditPlacementOverlay,
-        {
-          disabled: !props.allowEditing,
-          transform,
-          soup: elements,
-          cancelPanDrag: props.cancelPanDrag,
-          onCreateEditEvent: props.onCreateEditEvent,
-          onModifyEditEvent: props.onModifyEditEvent,
-          children: /* @__PURE__ */ jsx25(
-            DimensionOverlay,
-            {
-              transform,
-              focusOnHover: props.focusOnHover,
-              primitives: primitivesWithoutInteractionMetadata,
-              onBoundsSelected: props.onBoundsSelected,
-              cancelPanDrag: props.cancelPanDrag,
-              children: /* @__PURE__ */ jsx25(
-                ToolbarOverlay,
-                {
-                  elements,
-                  getNetAtPoint,
-                  xRayNetIds,
-                  onXRayNetsChange: setXRayNetIds,
-                  onContextMenuOpenChange: props.onContextMenuOpenChange,
-                  getComponentAtPoint,
-                  onViewSchematicComponent: props.onViewSchematicComponent,
-                  children: /* @__PURE__ */ jsx25(ErrorOverlay, { transform, elements, children: /* @__PURE__ */ jsx25(RatsNestOverlay, { transform, soup: elements, children: /* @__PURE__ */ jsx25(
-                    PcbGroupOverlay,
-                    {
-                      transform,
-                      elements,
-                      hoveredComponentIds,
-                      children: /* @__PURE__ */ jsx25(
-                        DebugGraphicsOverlay,
-                        {
-                          transform,
-                          debugGraphics: props.debugGraphics,
-                          children: /* @__PURE__ */ jsx25(
-                            WarningGraphicsOverlay,
-                            {
-                              transform,
-                              elements,
-                              children: props.renderer === "canvas" ? /* @__PURE__ */ jsx25(
-                                CanvasPrimitiveRenderer,
-                                {
-                                  transform,
-                                  primitives,
-                                  elements: elementsToRender,
-                                  circuitJson: elements,
-                                  xRayElements,
-                                  width: props.width,
-                                  height: props.height,
-                                  grid: props.grid,
-                                  onRenderComplete: props.onRenderComplete
-                                }
-                              ) : /* @__PURE__ */ jsx25(
-                                WebGpuElementsRenderer,
-                                {
-                                  transform,
-                                  primitives,
-                                  elements,
-                                  xRayElements,
-                                  width: props.width,
-                                  height: props.height,
-                                  grid: props.grid,
-                                  onRenderComplete: props.onRenderComplete
-                                }
-                              )
-                            }
-                          )
-                        }
-                      )
-                    }
-                  ) }) })
-                }
-              )
-            }
-          )
-        }
-      )
+      children: [
+        /* @__PURE__ */ jsx26(
+          FocusedPcbComponentOverlay,
+          {
+            focusRequest: props.focusedPcbComponent,
+            elements,
+            transform
+          }
+        ),
+        /* @__PURE__ */ jsx26(
+          EditPlacementOverlay,
+          {
+            disabled: !props.allowEditing,
+            transform,
+            soup: elements,
+            cancelPanDrag: props.cancelPanDrag,
+            onCreateEditEvent: props.onCreateEditEvent,
+            onModifyEditEvent: props.onModifyEditEvent,
+            children: /* @__PURE__ */ jsx26(
+              DimensionOverlay,
+              {
+                transform,
+                focusOnHover: props.focusOnHover,
+                primitives: primitivesWithoutInteractionMetadata,
+                onBoundsSelected: props.onBoundsSelected,
+                cancelPanDrag: props.cancelPanDrag,
+                children: /* @__PURE__ */ jsx26(
+                  ToolbarOverlay,
+                  {
+                    elements,
+                    getNetAtPoint,
+                    xRayNetIds,
+                    onXRayNetsChange: setXRayNetIds,
+                    onContextMenuOpenChange: props.onContextMenuOpenChange,
+                    getComponentAtPoint,
+                    onViewSchematicComponent: props.onViewSchematicComponent,
+                    children: /* @__PURE__ */ jsx26(ErrorOverlay, { transform, elements, children: /* @__PURE__ */ jsx26(RatsNestOverlay, { transform, soup: elements, children: /* @__PURE__ */ jsx26(
+                      PcbGroupOverlay,
+                      {
+                        transform,
+                        elements,
+                        hoveredComponentIds,
+                        children: /* @__PURE__ */ jsx26(
+                          DebugGraphicsOverlay,
+                          {
+                            transform,
+                            debugGraphics: props.debugGraphics,
+                            children: /* @__PURE__ */ jsx26(
+                              WarningGraphicsOverlay,
+                              {
+                                transform,
+                                elements,
+                                children: props.renderer === "canvas" ? /* @__PURE__ */ jsx26(
+                                  CanvasPrimitiveRenderer,
+                                  {
+                                    transform,
+                                    primitives,
+                                    elements: elementsToRender,
+                                    circuitJson: elements,
+                                    xRayElements,
+                                    width: props.width,
+                                    height: props.height,
+                                    grid: props.grid,
+                                    onRenderComplete: props.onRenderComplete
+                                  }
+                                ) : /* @__PURE__ */ jsx26(
+                                  WebGpuElementsRenderer,
+                                  {
+                                    transform,
+                                    primitives,
+                                    elements,
+                                    xRayElements,
+                                    width: props.width,
+                                    height: props.height,
+                                    grid: props.grid,
+                                    onRenderComplete: props.onRenderComplete
+                                  }
+                                )
+                              }
+                            )
+                          }
+                        )
+                      }
+                    ) }) })
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
     }
   );
 };
@@ -21008,7 +21077,7 @@ function applyEditEvents({
 }
 
 // src/PCBViewer.tsx
-import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
 var defaultTransform = compose9(translate14(400, 300), scale6(40, -40));
 var PCBViewer = ({
   circuitJson,
@@ -21024,10 +21093,12 @@ var PCBViewer = ({
   onViewSchematicComponent,
   focusOnHover = false,
   clickToInteractEnabled = false,
-  disablePcbGroups = false
+  disablePcbGroups = false,
+  controller
 }) => {
   const [activeRenderer, setActiveRenderer] = useState14(renderer);
-  useEffect20(() => setActiveRenderer(renderer), [renderer]);
+  const [focusedPcbComponent, setFocusedPcbComponent] = useState14(null);
+  useEffect21(() => setActiveRenderer(renderer), [renderer]);
   const renderingEngine = useMemo11(
     () => ({ renderer: activeRenderer, setRenderer: setActiveRenderer }),
     [activeRenderer]
@@ -21097,7 +21168,7 @@ var PCBViewer = ({
     setTransform(targetTransform);
     return;
   };
-  useEffect20(() => {
+  useEffect21(() => {
     if (!refDimensions?.width) return;
     if (!circuitJson) return;
     if (circuitJson.length === 0) return;
@@ -21106,7 +21177,7 @@ var PCBViewer = ({
       initialRenderCompleted.current = true;
     }
   }, [circuitJson, refDimensions]);
-  useEffect20(() => {
+  useEffect21(() => {
     if (initialRenderCompleted.current === true) {
       resetTransform();
     }
@@ -21122,6 +21193,29 @@ var PCBViewer = ({
       editEvents
     });
   }, [pcbElmsPreEdit, editEvents]);
+  useEffect21(() => {
+    const request = controller?.focusRequest;
+    if (!request || !refDimensions.width || !height || !elements.length) return;
+    const focus = getPcbComponentFocus(
+      elements,
+      request.pcbComponentId,
+      refDimensions.width,
+      height
+    );
+    if (focus) {
+      cancelPanDrag();
+      setTransform(focus.transform);
+      setFocusedPcbComponent(request);
+    }
+    controller.onFocusRequestHandled(request);
+  }, [
+    controller,
+    elements,
+    refDimensions.width,
+    height,
+    cancelPanDrag,
+    setTransform
+  ]);
   const onCreateEditEvent = (event) => {
     setEditEvents([...editEvents, event]);
     onEditEventsChanged?.([...editEvents, event]);
@@ -21140,20 +21234,20 @@ var PCBViewer = ({
     }),
     [initialState, disablePcbGroups]
   );
-  return /* @__PURE__ */ jsx26(RenderingEngineContext.Provider, { value: renderingEngine, children: /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsx27(RenderingEngineContext.Provider, { value: renderingEngine, children: /* @__PURE__ */ jsxs20(
     "div",
     {
       ref: transformRef,
       style: { position: "relative" },
       onContextMenu: (event) => event.preventDefault(),
       children: [
-        /* @__PURE__ */ jsx26("div", { ref, children: /* @__PURE__ */ jsxs19(
+        /* @__PURE__ */ jsx27("div", { ref, children: /* @__PURE__ */ jsxs20(
           ContextProviders,
           {
             initialState: mergedInitialState,
             disablePcbGroups,
             children: [
-              /* @__PURE__ */ jsx26(
+              /* @__PURE__ */ jsx27(
                 CanvasElementsRenderer,
                 {
                   renderer: activeRenderer,
@@ -21165,6 +21259,7 @@ var PCBViewer = ({
                   focusOnHover,
                   onBoundsSelected,
                   onViewSchematicComponent,
+                  focusedPcbComponent,
                   cancelPanDrag,
                   onContextMenuOpenChange,
                   onCreateEditEvent,
@@ -21183,11 +21278,11 @@ var PCBViewer = ({
                   debugGraphics
                 }
               ),
-              /* @__PURE__ */ jsx26(ToastContainer, {})
+              /* @__PURE__ */ jsx27(ToastContainer, {})
             ]
           }
         ) }),
-        clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx26(
+        clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx27(
           "div",
           {
             onClick: () => {
@@ -21224,7 +21319,7 @@ var PCBViewer = ({
               justifyContent: "center",
               touchAction: "pan-x pan-y pinch-zoom"
             },
-            children: /* @__PURE__ */ jsx26(
+            children: /* @__PURE__ */ jsx27(
               "div",
               {
                 style: {
@@ -21244,9 +21339,30 @@ var PCBViewer = ({
     }
   ) });
 };
+
+// src/hooks/usePcbViewerController.ts
+import { useCallback as useCallback13, useMemo as useMemo12, useState as useState15 } from "react";
+var usePcbViewerController = () => {
+  const [focusRequest, setFocusRequest] = useState15(null);
+  const focusPcbComponent = useCallback13((pcbComponentId) => {
+    setFocusRequest({ pcbComponentId });
+  }, []);
+  const onFocusRequestHandled = useCallback13(
+    (request) => {
+      setFocusRequest((current) => current === request ? null : current);
+    },
+    []
+  );
+  const controller = useMemo12(
+    () => ({ focusRequest, onFocusRequestHandled }),
+    [focusRequest, onFocusRequestHandled]
+  );
+  return { controller, focusPcbComponent };
+};
 export {
   CanvasElementsRenderer,
-  PCBViewer
+  PCBViewer,
+  usePcbViewerController
 };
 /*! Bundled license information: