@tscircuit/pcb-viewer 1.11.52 → 1.11.53

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { LayerRef, AnyCircuitElement } from 'circuit-json';
+import { GraphicsObject } from 'graphics-debug';
 import { Matrix } from 'transformation-matrix';
 
 interface State {
@@ -68,8 +69,9 @@ type Props = {
     focusOnHover?: boolean;
     clickToInteractEnabled?: boolean;
     disableAutoFocus?: boolean;
+    debugGraphics?: GraphicsObject;
 };
-declare const PCBViewer: ({ children, soup, circuitJson, height, initialState, allowEditing, editEvents: editEventsProp, onEditEventsChanged, focusOnHover, clickToInteractEnabled, disableAutoFocus, }: Props) => react_jsx_runtime.JSX.Element;
+declare const PCBViewer: ({ children, soup, circuitJson, debugGraphics, height, initialState, allowEditing, editEvents: editEventsProp, onEditEventsChanged, focusOnHover, clickToInteractEnabled, disableAutoFocus, }: Props) => react_jsx_runtime.JSX.Element;
 
 declare const applyEditEvents: (soup: AnyCircuitElement[], edit_events: EditEvent[]) => AnyCircuitElement[];
 
@@ -85,6 +87,7 @@ type GridConfig = {
 
 interface CanvasElementsRendererProps {
     elements: AnyCircuitElement[];
+    debugGraphics?: GraphicsObject;
     transform?: Matrix;
     width?: number;
     height?: number;

package/dist/index.js

@@ -5824,7 +5824,7 @@ var ToastContainer = () => {
 };
 
 // src/PCBViewer.tsx
-import { useEffect as useEffect12, useMemo as useMemo6, useState as useState10 } from "react";
+import { useEffect as useEffect13, useMemo as useMemo6, useState as useState10 } from "react";
 
 // node_modules/react-use/esm/misc/util.js
 var noop = function() {
@@ -7921,12 +7921,12 @@ var DimensionOverlay = ({
     };
     const addKeyListener = () => {
       if (container2) {
-        container2.addEventListener("keydown", down);
+        window.addEventListener("keydown", down);
       }
     };
     const removeKeyListener = () => {
       if (container2) {
-        container2.removeEventListener("keydown", down);
+        window.removeEventListener("keydown", down);
       }
     };
     if (container2) {
@@ -8159,7 +8159,7 @@ import { css } from "@emotion/css";
 // package.json
 var package_default = {
   name: "@tscircuit/pcb-viewer",
-  version: "1.11.51",
+  version: "1.11.52",
   main: "dist/index.js",
   type: "module",
   repository: "tscircuit/pcb-viewer",
@@ -8211,10 +8211,11 @@ var package_default = {
   },
   dependencies: {
     "@emotion/css": "^11.11.2",
-    "circuit-json-to-connectivity-map": "^0.0.19",
     "@tscircuit/math-utils": "^0.0.10",
+    "circuit-json-to-connectivity-map": "^0.0.19",
     "circuit-to-svg": "^0.0.36",
     color: "^4.2.3",
+    "graphics-debug": "^0.0.23",
     "react-supergrid": "^1.0.10",
     "react-toastify": "^10.0.5",
     "transformation-matrix": "^2.13.0",
@@ -9414,8 +9415,54 @@ function addInteractionMetadataToPrimitives({
   return newPrimitives;
 }
 
+// src/components/DebugGraphicsOverlay.tsx
+import { drawGraphicsToCanvas } from "graphics-debug";
+import { useEffect as useEffect12, useRef as useRef7 } from "react";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+var DebugGraphicsOverlay = ({
+  children,
+  transform,
+  debugGraphics
+}) => {
+  const canvasRef = useRef7(null);
+  const [containerRef, { width, height }] = useMeasure_default();
+  useEffect12(() => {
+    if (canvasRef.current && debugGraphics && width && height) {
+      canvasRef.current.width = width;
+      canvasRef.current.height = height;
+      drawGraphicsToCanvas(debugGraphics, canvasRef.current, {
+        transform
+      });
+    }
+  }, [debugGraphics, transform, width, height]);
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      ref: containerRef,
+      style: { position: "relative", width: "100%", height: "100%" },
+      children: [
+        children,
+        /* @__PURE__ */ jsx13(
+          "canvas",
+          {
+            ref: canvasRef,
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: "100%",
+              pointerEvents: "none"
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+
 // src/components/CanvasElementsRenderer.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var CanvasElementsRenderer = (props) => {
   const { transform, elements } = props;
   const [primitivesWithoutInteractionMetadata, connectivityMap] = useMemo5(() => {
@@ -9430,7 +9477,7 @@ var CanvasElementsRenderer = (props) => {
   const [primitives, setPrimitives] = useState9(
     primitivesWithoutInteractionMetadata
   );
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     MouseElementTracker,
     {
       elements,
@@ -9458,7 +9505,7 @@ var CanvasElementsRenderer = (props) => {
         });
         setPrimitives(newPrimitives);
       },
-      children: /* @__PURE__ */ jsx13(
+      children: /* @__PURE__ */ jsx14(
         EditPlacementOverlay,
         {
           disabled: !props.allowEditing,
@@ -9467,7 +9514,7 @@ var CanvasElementsRenderer = (props) => {
           cancelPanDrag: props.cancelPanDrag,
           onCreateEditEvent: props.onCreateEditEvent,
           onModifyEditEvent: props.onModifyEditEvent,
-          children: /* @__PURE__ */ jsx13(
+          children: /* @__PURE__ */ jsx14(
             EditTraceHintOverlay,
             {
               disabled: !props.allowEditing,
@@ -9476,19 +9523,26 @@ var CanvasElementsRenderer = (props) => {
               cancelPanDrag: props.cancelPanDrag,
               onCreateEditEvent: props.onCreateEditEvent,
               onModifyEditEvent: props.onModifyEditEvent,
-              children: /* @__PURE__ */ jsx13(
+              children: /* @__PURE__ */ jsx14(
                 DimensionOverlay,
                 {
                   transform,
                   focusOnHover: props.focusOnHover,
-                  children: /* @__PURE__ */ jsx13(ToolbarOverlay, { elements, children: /* @__PURE__ */ jsx13(ErrorOverlay, { transform, elements, children: /* @__PURE__ */ jsx13(RatsNestOverlay, { transform, soup: elements, children: /* @__PURE__ */ jsx13(
-                    CanvasPrimitiveRenderer,
+                  children: /* @__PURE__ */ jsx14(ToolbarOverlay, { elements, children: /* @__PURE__ */ jsx14(ErrorOverlay, { transform, elements, children: /* @__PURE__ */ jsx14(RatsNestOverlay, { transform, soup: elements, children: /* @__PURE__ */ jsx14(
+                    DebugGraphicsOverlay,
                     {
                       transform,
-                      primitives,
-                      width: props.width,
-                      height: props.height,
-                      grid: props.grid
+                      debugGraphics: props.debugGraphics,
+                      children: /* @__PURE__ */ jsx14(
+                        CanvasPrimitiveRenderer,
+                        {
+                          transform,
+                          primitives,
+                          width: props.width,
+                          height: props.height,
+                          grid: props.grid
+                        }
+                      )
                     }
                   ) }) }) })
                 }
@@ -9502,12 +9556,13 @@ var CanvasElementsRenderer = (props) => {
 };
 
 // src/PCBViewer.tsx
-import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 var defaultTransform = compose4(translate5(400, 300), scale2(40, -40));
 var PCBViewer = ({
   children,
   soup,
   circuitJson,
+  debugGraphics,
   height = 600,
   initialState,
   allowEditing = true,
@@ -9524,7 +9579,9 @@ var PCBViewer = ({
     isLoading
   } = useRenderedCircuit(children);
   circuitJson ??= circuitJsonFromChildren ?? [];
-  const [isInteractionEnabled, setIsInteractionEnabled] = useState10(!clickToInteractEnabled);
+  const [isInteractionEnabled, setIsInteractionEnabled] = useState10(
+    !clickToInteractEnabled
+  );
   const [ref, refDimensions] = useMeasure_default();
   const [transform, setTransformInternal] = useState10(defaultTransform);
   const {
@@ -9581,11 +9638,17 @@ var PCBViewer = ({
     };
     requestAnimationFrame(animateTransform);
   };
-  useEffect12(() => {
+  useEffect13(() => {
     if (!disableAutoFocus && refDimensions && refDimensions.width !== 0 && (children || soup) && (!clickToInteractEnabled || isInteractionEnabled)) {
       resetTransform(false);
     }
-  }, [children, refDimensions, clickToInteractEnabled, isInteractionEnabled, disableAutoFocus]);
+  }, [
+    children,
+    refDimensions,
+    clickToInteractEnabled,
+    isInteractionEnabled,
+    disableAutoFocus
+  ]);
   const pcbElmsPreEdit = useMemo6(
     () => circuitJson.filter(
       (e) => e.type.startsWith("pcb_") || e.type.startsWith("source_")
@@ -9606,9 +9669,9 @@ var PCBViewer = ({
     setEditEvents(newEditEvents);
     onEditEventsChanged?.(newEditEvents);
   };
-  return /* @__PURE__ */ jsxs10("div", { ref: transformRef, style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsx14("div", { ref, children: /* @__PURE__ */ jsxs10(ContextProviders, { initialState, children: [
-      /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs11("div", { ref: transformRef, style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx15("div", { ref, children: /* @__PURE__ */ jsxs11(ContextProviders, { initialState, children: [
+      /* @__PURE__ */ jsx15(
         CanvasElementsRenderer,
         {
           transform,
@@ -9628,13 +9691,14 @@ var PCBViewer = ({
               bottom: 0
             }
           },
-          elements
+          elements,
+          debugGraphics
         },
         refDimensions.width
       ),
-      /* @__PURE__ */ jsx14(ToastContainer, {})
+      /* @__PURE__ */ jsx15(ToastContainer, {})
     ] }) }),
-    clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx14(
+    clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx15(
       "div",
       {
         onClick: () => {
@@ -9650,7 +9714,7 @@ var PCBViewer = ({
           alignItems: "center",
           justifyContent: "center"
         },
-        children: /* @__PURE__ */ jsx14(
+        children: /* @__PURE__ */ jsx15(
           "div",
           {
             style: {