@tscircuit/pcb-viewer 1.11.374 → 1.11.375

package/dist/index.js

@@ -6343,16 +6343,31 @@ var getBoundsOfPcbElements = (elements) => {
       centerX = elm.center.x;
       centerY = elm.center.y;
     }
+    const rotation = typeof elm.rotation === "number" ? elm.rotation : 0;
     if (centerX !== void 0 && centerY !== void 0) {
       minX = Math.min(minX, centerX);
       minY = Math.min(minY, centerY);
       maxX = Math.max(maxX, centerX);
       maxY = Math.max(maxY, centerY);
       if (width !== void 0 && height !== void 0) {
-        minX = Math.min(minX, centerX - width / 2);
-        minY = Math.min(minY, centerY - height / 2);
-        maxX = Math.max(maxX, centerX + width / 2);
-        maxY = Math.max(maxY, centerY + height / 2);
+        if (rotation) {
+          const rotatedBounds = getRotatedRectBounds(
+            centerX,
+            centerY,
+            width,
+            height,
+            rotation
+          );
+          minX = Math.min(minX, rotatedBounds.minX);
+          minY = Math.min(minY, rotatedBounds.minY);
+          maxX = Math.max(maxX, rotatedBounds.maxX);
+          maxY = Math.max(maxY, rotatedBounds.maxY);
+        } else {
+          minX = Math.min(minX, centerX - width / 2);
+          minY = Math.min(minY, centerY - height / 2);
+          maxX = Math.max(maxX, centerX + width / 2);
+          maxY = Math.max(maxY, centerY + height / 2);
+        }
       }
       if ("radius" in elm) {
         minX = Math.min(minX, centerX - elm.radius);
@@ -6534,6 +6549,16 @@ var getDebugLayoutObject = (lo) => {
     if ("outer_diameter" in lo) {
       width = lo.outer_diameter;
       height = lo.outer_diameter;
+    } else if ("rect_pad_width" in lo && "rect_pad_height" in lo) {
+      width = lo.rect_pad_width;
+      height = lo.rect_pad_height;
+      if ("hole_diameter" in lo) {
+        width = Math.max(width, lo.hole_diameter);
+        height = Math.max(height, lo.hole_diameter);
+      }
+    } else if ("hole_diameter" in lo) {
+      width = lo.hole_diameter;
+      height = lo.hole_diameter;
     }
   }
   if (width === void 0 || height === void 0) {
@@ -8142,11 +8167,27 @@ var convertElementToPrimitives = (element, allElements) => {
     case "pcb_trace": {
       const primitives = [];
       if (element.route_thickness_mode === "interpolated") {
-        const strokeInput = element.route.map((r) => ({
-          x: r.x,
-          y: r.y,
-          trace_width: r.route_type === "wire" ? r.width : 0.5
-        }));
+        const strokeInput = element.route.flatMap((routePoint) => {
+          if (routePoint.route_type === "through_pad") {
+            return [
+              {
+                ...routePoint.start,
+                trace_width: routePoint.width
+              },
+              {
+                ...routePoint.end,
+                trace_width: routePoint.width
+              }
+            ];
+          }
+          return [
+            {
+              x: routePoint.x,
+              y: routePoint.y,
+              trace_width: routePoint.route_type === "wire" ? routePoint.width : 0.5
+            }
+          ];
+        });
         const expandedStroke = getExpandedStroke(strokeInput, 0.5);
         const layer = element.route[0].layer;
         primitives.push({
@@ -8840,8 +8881,10 @@ var zIndexMap = {
   ratsNestOverlay: 30,
   toolbarOverlay: 70,
   warnings: 30,
-  topLayer: 20,
-  // each layer after this is 1 less than the previous (supports up to 20 layers)
+  // Canvas layers are assigned z-indexes below this value. A 10-layer board
+  // needs 26 canvas planes once masks, silkscreen, notes, and other overlays
+  // are included, so keep enough room for the complete stack.
+  topLayer: 30,
   clickToInteractOverlay: 100
 };
 
@@ -8885,12 +8928,6 @@ var LAYER_NAME_TO_COLOR = {
 };
 var DEFAULT_DRAW_ORDER = [
   "board",
-  "inner6",
-  "inner5",
-  "inner4",
-  "inner3",
-  "inner2",
-  "inner1",
   "bottom",
   "soldermask_bottom",
   "bottom_silkscreen",
@@ -9192,6 +9229,14 @@ var Drawer = class {
    */
   orderAndFadeLayers() {
     const { canvasLayerMap, foregroundLayer } = this;
+    const innerLayers = Object.keys(canvasLayerMap).filter((layer) => /^inner\d+$/.test(layer)).sort(
+      (a, b) => Number(b.slice("inner".length)) - Number(a.slice("inner".length))
+    );
+    const defaultDrawOrder = [
+      "board",
+      ...innerLayers,
+      ...DEFAULT_DRAW_ORDER.filter((layer) => layer !== "board")
+    ];
     const associatedSoldermask = foregroundLayer === "top" ? "soldermask_top" : foregroundLayer === "bottom" ? "soldermask_bottom" : void 0;
     const associatedSilkscreen = foregroundLayer === "top" ? "top_silkscreen" : foregroundLayer === "bottom" ? "bottom_silkscreen" : void 0;
     const associatedNotes = foregroundLayer === "top" ? "top_notes" : foregroundLayer === "bottom" ? "bottom_notes" : void 0;
@@ -9219,7 +9264,7 @@ var Drawer = class {
       ...associatedCourtyard ? [associatedCourtyard] : []
     ];
     const order = [
-      ...DEFAULT_DRAW_ORDER.filter((l) => !layersToShiftToTop.includes(l)),
+      ...defaultDrawOrder.filter((l) => !layersToShiftToTop.includes(l)),
       ...foregroundLayer === "drill" ? [] : [foregroundLayer],
       ...associatedSoldermask ? [associatedSoldermask] : [],
       "edge_cuts",
@@ -9553,6 +9598,55 @@ import {
   DEFAULT_PCB_COLOR_MAP as DEFAULT_PCB_COLOR_MAP3
 } from "circuit-to-canvas";
 import color from "color";
+
+// src/lib/copper-layers.ts
+var getCopperLayerRefs = (numLayers = 2) => {
+  const layerCount = Math.max(2, Math.min(10, Math.floor(numLayers)));
+  return [
+    "top",
+    ...Array.from(
+      { length: layerCount - 2 },
+      (_, index) => `inner${index + 1}`
+    ),
+    "bottom"
+  ];
+};
+var getCopperLayerRefsFromElements = (elements) => {
+  const board = elements.find((element) => element.type === "pcb_board");
+  return getCopperLayerRefs(board?.num_layers ?? 2);
+};
+var getCopperRenderLayer = (layer) => `${layer}_copper`;
+var normalizeCopperRenderLayers = (layers) => layers.map(
+  (layer) => layer.endsWith("_copper") ? layer.slice(0, -"_copper".length) : layer
+);
+var getOrderedCanvasLayers = (elements) => {
+  const innerLayers = getCopperLayerRefsFromElements(elements).filter(
+    (layer) => layer.startsWith("inner")
+  );
+  return [
+    "board",
+    "bottom",
+    "soldermask_bottom",
+    "bottom_silkscreen",
+    "top",
+    "soldermask_top",
+    "soldermask_with_copper_bottom",
+    "soldermask_with_copper_top",
+    "top_fabrication",
+    "bottom_fabrication",
+    ...innerLayers,
+    "drill",
+    "edge_cuts",
+    "bottom_notes",
+    "top_notes",
+    "top_silkscreen",
+    "top_courtyard",
+    "bottom_courtyard",
+    "other"
+  ];
+};
+
+// src/lib/draw-pcb-smtpad.ts
 var HOVER_COLOR_MAP = {
   ...DEFAULT_PCB_COLOR_MAP3,
   copper: {
@@ -9564,7 +9658,9 @@ var HOVER_COLOR_MAP = {
     inner3: color(colors_default.board.copper.in3).lighten(0.5).toString(),
     inner4: color(colors_default.board.copper.in4).lighten(0.5).toString(),
     inner5: color(colors_default.board.copper.in5).lighten(0.5).toString(),
-    inner6: color(colors_default.board.copper.in6).lighten(0.5).toString()
+    inner6: color(colors_default.board.copper.in6).lighten(0.5).toString(),
+    inner7: color(colors_default.board.copper.in7).lighten(0.5).toString(),
+    inner8: color(colors_default.board.copper.in8).lighten(0.5).toString()
   }
 };
 function isPcbSmtPad(element) {
@@ -9578,20 +9674,8 @@ function drawPcbSmtPadElementsForLayer({
   primitives,
   drawSoldermask
 }) {
-  const smtPadElements = elements.filter(isPcbSmtPad).filter((element) => {
-    const elementLayer = element.layer;
-    return layers.some((layer) => {
-      if (layer === "top_copper" && elementLayer === "top") return true;
-      if (layer === "bottom_copper" && elementLayer === "bottom") return true;
-      if (layer === "inner1_copper" && elementLayer === "inner1") return true;
-      if (layer === "inner2_copper" && elementLayer === "inner2") return true;
-      if (layer === "inner3_copper" && elementLayer === "inner3") return true;
-      if (layer === "inner4_copper" && elementLayer === "inner4") return true;
-      if (layer === "inner5_copper" && elementLayer === "inner5") return true;
-      if (layer === "inner6_copper" && elementLayer === "inner6") return true;
-      return false;
-    });
-  });
+  const targetLayers = new Set(normalizeCopperRenderLayers(layers));
+  const smtPadElements = elements.filter(isPcbSmtPad).filter((element) => targetLayers.has(element.layer));
   if (smtPadElements.length === 0) return;
   const highlightedElementIds = /* @__PURE__ */ new Set();
   if (primitives) {
@@ -9640,15 +9724,14 @@ var HOVER_COLOR_MAP2 = {
     inner3: color2(colors_default.board.copper.in3).lighten(0.5).toString(),
     inner4: color2(colors_default.board.copper.in4).lighten(0.5).toString(),
     inner5: color2(colors_default.board.copper.in5).lighten(0.5).toString(),
-    inner6: color2(colors_default.board.copper.in6).lighten(0.5).toString()
+    inner6: color2(colors_default.board.copper.in6).lighten(0.5).toString(),
+    inner7: color2(colors_default.board.copper.in7).lighten(0.5).toString(),
+    inner8: color2(colors_default.board.copper.in8).lighten(0.5).toString()
   }
 };
 function isPcbTrace(element) {
   return element.type === "pcb_trace";
 }
-var normalizeCopperLayers = (layers) => layers.map(
-  (layer) => layer.endsWith("_copper") ? layer.replace("_copper", "") : layer
-);
 var filterTraceByLayers = (trace, targetLayers) => {
   const filteredRoute = trace.route.filter((segment) => {
     if (segment.route_type === "wire" && "layer" in segment && targetLayers.has(segment.layer)) {
@@ -9675,7 +9758,7 @@ function drawPcbTraceElementsForLayer({
   realToCanvasMat,
   primitives
 }) {
-  const targetLayers = new Set(normalizeCopperLayers(layers));
+  const targetLayers = new Set(normalizeCopperRenderLayers(layers));
   const traceElements = elements.filter(isPcbTrace).map((trace) => filterTraceByLayers(trace, targetLayers)).filter((trace) => trace !== null);
   if (traceElements.length === 0) return;
   const highlightedElementIds = /* @__PURE__ */ new Set();
@@ -9719,7 +9802,15 @@ var HOVER_COLOR_MAP3 = {
   copper: {
     ...DEFAULT_PCB_COLOR_MAP5.copper,
     top: color3(colors_default.board.pad_front).lighten(0.5).toString(),
-    bottom: color3(colors_default.board.pad_back).lighten(0.5).toString()
+    bottom: color3(colors_default.board.pad_back).lighten(0.5).toString(),
+    inner1: color3(colors_default.board.copper.in1).lighten(0.5).toString(),
+    inner2: color3(colors_default.board.copper.in2).lighten(0.5).toString(),
+    inner3: color3(colors_default.board.copper.in3).lighten(0.5).toString(),
+    inner4: color3(colors_default.board.copper.in4).lighten(0.5).toString(),
+    inner5: color3(colors_default.board.copper.in5).lighten(0.5).toString(),
+    inner6: color3(colors_default.board.copper.in6).lighten(0.5).toString(),
+    inner7: color3(colors_default.board.copper.in7).lighten(0.5).toString(),
+    inner8: color3(colors_default.board.copper.in8).lighten(0.5).toString()
   }
 };
 function isPlatedHole(element) {
@@ -10175,7 +10266,9 @@ var HOVER_SOLDERMASK_COLOR_MAP = {
     inner3: color5(colors_default.board.copper.in3).lighten(0.5).toString(),
     inner4: color5(colors_default.board.copper.in4).lighten(0.5).toString(),
     inner5: color5(colors_default.board.copper.in5).lighten(0.5).toString(),
-    inner6: color5(colors_default.board.copper.in6).lighten(0.5).toString()
+    inner6: color5(colors_default.board.copper.in6).lighten(0.5).toString(),
+    inner7: color5(colors_default.board.copper.in7).lighten(0.5).toString(),
+    inner8: color5(colors_default.board.copper.in8).lighten(0.5).toString()
   },
   soldermask: {
     ...DEFAULT_PCB_COLOR_MAP6.soldermask,
@@ -10297,7 +10390,15 @@ var HOVER_COLOR_MAP4 = {
   copper: {
     ...DEFAULT_PCB_COLOR_MAP8.copper,
     top: color6(colors_default.board.pad_front).lighten(0.5).toString(),
-    bottom: color6(colors_default.board.pad_back).lighten(0.5).toString()
+    bottom: color6(colors_default.board.pad_back).lighten(0.5).toString(),
+    inner1: color6(colors_default.board.copper.in1).lighten(0.5).toString(),
+    inner2: color6(colors_default.board.copper.in2).lighten(0.5).toString(),
+    inner3: color6(colors_default.board.copper.in3).lighten(0.5).toString(),
+    inner4: color6(colors_default.board.copper.in4).lighten(0.5).toString(),
+    inner5: color6(colors_default.board.copper.in5).lighten(0.5).toString(),
+    inner6: color6(colors_default.board.copper.in6).lighten(0.5).toString(),
+    inner7: color6(colors_default.board.copper.in7).lighten(0.5).toString(),
+    inner8: color6(colors_default.board.copper.in8).lighten(0.5).toString()
   }
 };
 function isPcbVia(element) {
@@ -10379,32 +10480,6 @@ function drawCourtyardElementsForLayer({
 import { useEffect as useEffect5, useRef as useRef3 } from "react";
 import { SuperGrid, toMMSI } from "react-supergrid";
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-var orderedLayers = [
-  "board",
-  "bottom",
-  "soldermask_bottom",
-  "bottom_silkscreen",
-  "top",
-  "soldermask_top",
-  "soldermask_with_copper_bottom",
-  "soldermask_with_copper_top",
-  "top_fabrication",
-  "bottom_fabrication",
-  "inner1",
-  "inner2",
-  "inner3",
-  "inner4",
-  "inner5",
-  "inner6",
-  "drill",
-  "edge_cuts",
-  "bottom_notes",
-  "top_notes",
-  "top_silkscreen",
-  "top_courtyard",
-  "bottom_courtyard",
-  "other"
-];
 var CanvasPrimitiveRenderer = ({
   primitives,
   elements,
@@ -10442,22 +10517,11 @@ var CanvasPrimitiveRenderer = ({
     if (transform) {
       const topCanvas = canvasRefs.current.top;
       const bottomCanvas = canvasRefs.current.bottom;
-      const inner1Canvas = canvasRefs.current.inner1;
-      const inner2Canvas = canvasRefs.current.inner2;
-      const inner3Canvas = canvasRefs.current.inner3;
-      const inner4Canvas = canvasRefs.current.inner4;
-      const inner5Canvas = canvasRefs.current.inner5;
-      const inner6Canvas = canvasRefs.current.inner6;
-      const copperLayers = [
-        { canvas: topCanvas, copperLayer: "top_copper" },
-        { canvas: bottomCanvas, copperLayer: "bottom_copper" },
-        { canvas: inner1Canvas, copperLayer: "inner1_copper" },
-        { canvas: inner2Canvas, copperLayer: "inner2_copper" },
-        { canvas: inner3Canvas, copperLayer: "inner3_copper" },
-        { canvas: inner4Canvas, copperLayer: "inner4_copper" },
-        { canvas: inner5Canvas, copperLayer: "inner5_copper" },
-        { canvas: inner6Canvas, copperLayer: "inner6_copper" }
-      ];
+      const copperLayers = getCopperLayerRefsFromElements(elements).map((layer) => ({
+        canvas: canvasRefs.current[layer],
+        layer,
+        copperLayer: getCopperRenderLayer(layer)
+      }));
       for (const { canvas, copperLayer } of copperLayers) {
         if (!canvas) continue;
         drawPcbTraceElementsForLayer({
@@ -10477,24 +10541,15 @@ var CanvasPrimitiveRenderer = ({
           realToCanvasMat: transform
         });
       }
-      if (topCanvas) {
-        drawPlatedHolePads({
-          canvas: topCanvas,
-          elements,
-          layers: ["top_copper"],
-          realToCanvasMat: transform,
-          primitives,
-          drawSoldermask: isShowingSolderMask
-        });
-      }
-      if (bottomCanvas) {
+      for (const { canvas, copperLayer, layer } of copperLayers) {
+        if (!canvas) continue;
         drawPlatedHolePads({
-          canvas: bottomCanvas,
+          canvas,
           elements,
-          layers: ["bottom_copper"],
+          layers: [copperLayer],
           realToCanvasMat: transform,
           primitives,
-          drawSoldermask: isShowingSolderMask
+          drawSoldermask: isShowingSolderMask && (layer === "top" || layer === "bottom")
         });
       }
       for (const { canvas, copperLayer } of copperLayers) {
@@ -10517,24 +10572,15 @@ var CanvasPrimitiveRenderer = ({
           drawSoldermask: isShowingSolderMask
         });
       }
-      if (topCanvas) {
-        drawPcbViaElementsForLayer({
-          canvas: topCanvas,
-          elements,
-          layers: ["top_copper"],
-          realToCanvasMat: transform,
-          primitives,
-          drawSoldermask: isShowingSolderMask
-        });
-      }
-      if (bottomCanvas) {
+      for (const { canvas, copperLayer, layer } of copperLayers) {
+        if (!canvas) continue;
         drawPcbViaElementsForLayer({
-          canvas: bottomCanvas,
+          canvas,
           elements,
-          layers: ["bottom_copper"],
+          layers: [copperLayer],
           realToCanvasMat: transform,
           primitives,
-          drawSoldermask: isShowingSolderMask
+          drawSoldermask: isShowingSolderMask && (layer === "top" || layer === "bottom")
         });
       }
       if (isShowingSolderMask) {
@@ -10727,7 +10773,7 @@ var CanvasPrimitiveRenderer = ({
             stringifyCoord: (x, y, z) => `${toMMSI(x, z)}, ${toMMSI(y, z)}`
           }
         ),
-        orderedLayers.filter((layer) => {
+        getOrderedCanvasLayers(elements).filter((layer) => {
           if (!isShowingSolderMask && layer.includes("soldermask")) return false;
           if (!isShowingSilkscreen && layer.includes("silkscreen")) return false;
           return true;
@@ -14904,7 +14950,7 @@ import { css as css3 } from "@emotion/css";
 // package.json
 var package_default = {
   name: "@tscircuit/pcb-viewer",
-  version: "1.11.373",
+  version: "1.11.374",
   main: "dist/index.js",
   type: "module",
   repository: "tscircuit/pcb-viewer",
@@ -14928,12 +14974,13 @@ var package_default = {
     "@semantic-release/npm": "^9.0.1",
     "@semantic-release/release-notes-generator": "^10.0.3",
     "@swc/core": "^1.4.12",
-    "@tscircuit/circuit-json-util": "^0.0.90",
+    "@tscircuit/circuit-json-util": "^0.0.99",
     "@tscircuit/eagle-xml-converter": "^1.0.0",
     "@types/bun": "latest",
     "@types/color": "^3.0.6",
     "@types/node": "18.7.23",
     "@types/react": "19",
+    "format-si-unit": "^0.0.7",
     next: "^14.1.4",
     "pixi.js": "^8.6.6",
     react: "19.1.0",
@@ -14957,8 +15004,8 @@ var package_default = {
     "@tscircuit/alphabet": "^0.0.23",
     "@tscircuit/math-utils": "^0.0.36",
     "@vitejs/plugin-react": "^5.0.2",
-    "circuit-json": "^0.0.421",
-    "circuit-to-canvas": "^0.0.110",
+    "circuit-json": "^0.0.450",
+    "circuit-to-canvas": "^0.0.112",
     color: "^4.2.3",
     "react-supergrid": "^1.0.10",
     "react-toastify": "^10.0.5",
@@ -15732,13 +15779,7 @@ var ToolbarOverlay = ({ children, elements }) => {
       window.removeEventListener("disarm-bounds-tool", disarmBounds);
     };
   }, []);
-  const pcbBoard = elements?.find((el) => el.type === "pcb_board");
-  const numLayers = pcbBoard?.num_layers || 2;
-  const availableLayers = numLayers <= 2 ? ["top", "bottom"] : [
-    "top",
-    ...Array.from({ length: numLayers - 2 }, (_, i) => `inner${i + 1}`),
-    "bottom"
-  ];
+  const availableLayers = getCopperLayerRefsFromElements(elements ?? []);
   const processedLayers = availableLayers;
   const hasRunInitialMouseCheck = useRef14(false);
   const hotkeyBoundaryRef = useRef14(null);
@@ -15758,6 +15799,10 @@ var ToolbarOverlay = ({ children, elements }) => {
     "7": availableLayers[6] ? () => selectLayer(availableLayers[6]) : () => {
     },
     "8": availableLayers[7] ? () => selectLayer(availableLayers[7]) : () => {
+    },
+    "9": availableLayers[8] ? () => selectLayer(availableLayers[8]) : () => {
+    },
+    "0": availableLayers[9] ? () => selectLayer(availableLayers[9]) : () => {
     }
   };
   useHotKey("1", hotKeyCallbacks["1"], hotkeyBoundaryRef);
@@ -15768,6 +15813,8 @@ var ToolbarOverlay = ({ children, elements }) => {
   useHotKey("6", hotKeyCallbacks["6"], hotkeyBoundaryRef);
   useHotKey("7", hotKeyCallbacks["7"], hotkeyBoundaryRef);
   useHotKey("8", hotKeyCallbacks["8"], hotkeyBoundaryRef);
+  useHotKey("9", hotKeyCallbacks["9"], hotkeyBoundaryRef);
+  useHotKey("0", hotKeyCallbacks["0"], hotkeyBoundaryRef);
   useLayoutEffect2(() => {
     if (hasRunInitialMouseCheck.current) return;
     hasRunInitialMouseCheck.current = true;