@tscircuit/pcb-viewer 1.11.296 → 1.11.298

package/dist/index.js

@@ -6019,6 +6019,15 @@ var getBoundsOfPcbElements = (elements) => {
   let maxY = Number.NEGATIVE_INFINITY;
   for (const elm of elements) {
     if (!elm.type.startsWith("pcb_")) continue;
+    if (elm.type === "pcb_smtpad" && elm.shape === "polygon" && Array.isArray(elm.points)) {
+      for (const point of elm.points) {
+        minX = Math.min(minX, point.x);
+        minY = Math.min(minY, point.y);
+        maxX = Math.max(maxX, point.x);
+        maxY = Math.max(maxY, point.y);
+      }
+      continue;
+    }
     let centerX;
     let centerY;
     let width;
@@ -7575,344 +7584,6 @@ var convertElementToPrimitives = (element, allElements) => {
       }
       return [];
     }
-    case "pcb_plated_hole": {
-      if (element.shape === "circle") {
-        const { x, y, hole_diameter, outer_diameter } = element;
-        return [
-          {
-            _pcb_drawing_object_id: `circle_${globalPcbDrawingObjectCount++}`,
-            pcb_drawing_type: "circle",
-            x,
-            y,
-            r: outer_diameter / 2,
-            // TODO support layer on pcb_plated_hole
-            layer: "top",
-            _element: element,
-            _parent_pcb_component,
-            _parent_source_component,
-            _source_port
-          },
-          {
-            _pcb_drawing_object_id: `circle_${globalPcbDrawingObjectCount++}`,
-            pcb_drawing_type: "circle",
-            x,
-            y,
-            r: hole_diameter / 2,
-            // TODO support layer on pcb_plated_hole
-            layer: "drill",
-            _element: element
-            // double highlights are annoying
-            // _element: element,
-          }
-        ];
-      } else if (element.shape === "oval") {
-        const { x, y, outer_height, outer_width, hole_height, hole_width } = element;
-        return [
-          {
-            _pcb_drawing_object_id: `oval_${globalPcbDrawingObjectCount++}`,
-            pcb_drawing_type: "oval",
-            x,
-            y,
-            rX: outer_width / 2,
-            rY: outer_height / 2,
-            layer: "top",
-            // TODO: Confirm layer handling for oval plated holes
-            _element: element,
-            _parent_pcb_component,
-            _parent_source_component,
-            _source_port
-          },
-          {
-            _pcb_drawing_object_id: `oval_${globalPcbDrawingObjectCount++}`,
-            _element: element,
-            pcb_drawing_type: "oval",
-            x,
-            y,
-            rX: hole_width / 2,
-            rY: hole_height / 2,
-            layer: "drill"
-          }
-        ];
-      } else if (element.shape === "pill") {
-        const { x, y, outer_height, outer_width, hole_height, hole_width } = element;
-        return [
-          {
-            _pcb_drawing_object_id: `pill_${globalPcbDrawingObjectCount++}`,
-            pcb_drawing_type: "pill",
-            x,
-            y,
-            w: outer_width,
-            h: outer_height,
-            layer: "top",
-            // TODO: Confirm layer handling for oval plated holes
-            _element: element,
-            _parent_pcb_component,
-            _parent_source_component,
-            _source_port,
-            ccw_rotation: element.ccw_rotation
-          },
-          {
-            _pcb_drawing_object_id: `pill_${globalPcbDrawingObjectCount++}`,
-            _element: element,
-            pcb_drawing_type: "pill",
-            x,
-            y,
-            w: hole_width,
-            h: hole_height,
-            layer: "drill",
-            ccw_rotation: element.ccw_rotation
-          }
-        ];
-      } else if (element.shape === "circular_hole_with_rect_pad") {
-        const {
-          x,
-          y,
-          hole_diameter,
-          rect_pad_width,
-          rect_pad_height,
-          rect_border_radius
-        } = element;
-        const hole_offset_x = element.hole_offset_x ?? 0;
-        const hole_offset_y = element.hole_offset_y ?? 0;
-        return [
-          {
-            _pcb_drawing_object_id: `rect_${globalPcbDrawingObjectCount++}`,
-            pcb_drawing_type: "rect",
-            x,
-            y,
-            w: rect_pad_width,
-            h: rect_pad_height,
-            layer: "top",
-            // Rectangular pad on top layer
-            _element: element,
-            _parent_pcb_component,
-            _parent_source_component,
-            _source_port,
-            roundness: rect_border_radius
-          },
-          {
-            _pcb_drawing_object_id: `rect_${globalPcbDrawingObjectCount++}`,
-            pcb_drawing_type: "rect",
-            x,
-            y,
-            w: rect_pad_width,
-            h: rect_pad_height,
-            layer: "bottom",
-            // Rectangular pad on bottom layer
-            _element: element,
-            _parent_pcb_component,
-            _parent_source_component,
-            _source_port,
-            roundness: rect_border_radius
-          },
-          {
-            _pcb_drawing_object_id: `circle_${globalPcbDrawingObjectCount++}`,
-            _element: element,
-            pcb_drawing_type: "circle",
-            x: x + hole_offset_x,
-            y: y + hole_offset_y,
-            r: hole_diameter / 2,
-            layer: "drill"
-            // Circular hole in drill layer
-          }
-        ];
-      } else if (element.shape === "pill_hole_with_rect_pad") {
-        const {
-          x,
-          y,
-          hole_width,
-          hole_height,
-          rect_pad_width,
-          rect_pad_height,
-          rect_border_radius
-        } = element;
-        return [
-          {
-            _pcb_drawing_object_id: `rect_${globalPcbDrawingObjectCount++}`,
-            pcb_drawing_type: "rect",
-            x,
-            y,
-            w: rect_pad_width,
-            h: rect_pad_height,
-            layer: "top",
-            // Rectangular pad on top layer
-            _element: element,
-            _parent_pcb_component,
-            _parent_source_component,
-            _source_port,
-            roundness: rect_border_radius
-          },
-          {
-            _pcb_drawing_object_id: `rect_${globalPcbDrawingObjectCount++}`,
-            pcb_drawing_type: "rect",
-            x,
-            y,
-            w: rect_pad_width,
-            h: rect_pad_height,
-            layer: "bottom",
-            // Rectangular pad on bottom layer
-            _element: element,
-            _parent_pcb_component,
-            _parent_source_component,
-            _source_port,
-            roundness: rect_border_radius
-          },
-          {
-            _pcb_drawing_object_id: `pill_${globalPcbDrawingObjectCount++}`,
-            _element: element,
-            pcb_drawing_type: "pill",
-            x,
-            y,
-            w: hole_width,
-            h: hole_height,
-            layer: "drill"
-            // Pill-shaped hole in drill layer
-          }
-        ];
-      } else if (element.shape === "rotated_pill_hole_with_rect_pad") {
-        const {
-          x,
-          y,
-          hole_width,
-          hole_height,
-          hole_ccw_rotation,
-          rect_pad_width,
-          rect_pad_height,
-          rect_ccw_rotation,
-          rect_border_radius
-        } = element;
-        return [
-          {
-            _pcb_drawing_object_id: `rect_${globalPcbDrawingObjectCount++}`,
-            pcb_drawing_type: "rect",
-            x,
-            y,
-            w: rect_pad_width,
-            h: rect_pad_height,
-            layer: "top",
-            // Rectangular pad on top layer
-            _element: element,
-            _parent_pcb_component,
-            _parent_source_component,
-            _source_port,
-            ccw_rotation: rect_ccw_rotation,
-            roundness: rect_border_radius
-          },
-          {
-            _pcb_drawing_object_id: `rect_${globalPcbDrawingObjectCount++}`,
-            pcb_drawing_type: "rect",
-            x,
-            y,
-            w: rect_pad_width,
-            h: rect_pad_height,
-            layer: "bottom",
-            // Rectangular pad on bottom layer
-            _element: element,
-            _parent_pcb_component,
-            _parent_source_component,
-            _source_port,
-            ccw_rotation: rect_ccw_rotation,
-            roundness: rect_border_radius
-          },
-          {
-            _pcb_drawing_object_id: `pill_${globalPcbDrawingObjectCount++}`,
-            _element: element,
-            pcb_drawing_type: "pill",
-            x,
-            y,
-            w: hole_width,
-            h: hole_height,
-            layer: "drill",
-            // Pill-shaped hole in drill layer
-            ccw_rotation: hole_ccw_rotation
-          }
-        ];
-      } else if (element.shape === "hole_with_polygon_pad") {
-        const {
-          x,
-          y,
-          pad_outline,
-          hole_shape,
-          hole_diameter,
-          hole_width,
-          hole_height,
-          layers
-        } = element;
-        const hole_offset_x = distance2.parse(
-          element.hole_offset_x ?? 0
-        );
-        const hole_offset_y = distance2.parse(
-          element.hole_offset_y ?? 0
-        );
-        const pcb_outline = pad_outline;
-        const padPrimitives = [];
-        if (pcb_outline && Array.isArray(pcb_outline)) {
-          const translatedPoints = normalizePolygonPoints(pcb_outline).map(
-            (p) => ({ x: p.x + x, y: p.y + y })
-          );
-          for (const layer of layers || ["top", "bottom"]) {
-            padPrimitives.push({
-              _pcb_drawing_object_id: `polygon_${globalPcbDrawingObjectCount++}`,
-              pcb_drawing_type: "polygon",
-              points: translatedPoints,
-              layer,
-              _element: element,
-              _parent_pcb_component,
-              _parent_source_component,
-              _source_port
-            });
-          }
-        }
-        const holeCenter = {
-          x: x + hole_offset_x,
-          y: y + hole_offset_y
-        };
-        const holePrimitives = [];
-        if (hole_shape === "circle") {
-          holePrimitives.push({
-            _pcb_drawing_object_id: `circle_${globalPcbDrawingObjectCount++}`,
-            pcb_drawing_type: "circle",
-            x: holeCenter.x,
-            y: holeCenter.y,
-            r: (hole_diameter ?? 0) / 2,
-            layer: "drill",
-            _element: element,
-            _parent_pcb_component,
-            _parent_source_component
-          });
-        } else if (hole_shape === "oval") {
-          holePrimitives.push({
-            _pcb_drawing_object_id: `oval_${globalPcbDrawingObjectCount++}`,
-            pcb_drawing_type: "oval",
-            x: holeCenter.x,
-            y: holeCenter.y,
-            rX: (hole_width ?? 0) / 2,
-            rY: (hole_height ?? 0) / 2,
-            layer: "drill",
-            _element: element,
-            _parent_pcb_component,
-            _parent_source_component
-          });
-        } else if (hole_shape === "pill" || hole_shape === "rotated_pill") {
-          holePrimitives.push({
-            _pcb_drawing_object_id: `pill_${globalPcbDrawingObjectCount++}`,
-            pcb_drawing_type: "pill",
-            x: holeCenter.x,
-            y: holeCenter.y,
-            w: hole_width ?? 0,
-            h: hole_height ?? 0,
-            layer: "drill",
-            _element: element,
-            _parent_pcb_component,
-            _parent_source_component,
-            ccw_rotation: element.ccw_rotation
-          });
-        }
-        return [...padPrimitives, ...holePrimitives];
-      } else {
-        return [];
-      }
-    }
     case "pcb_keepout": {
       if (element.shape === "circle") {
         const { center, radius } = element;
@@ -8047,87 +7718,6 @@ var convertElementToPrimitives = (element, allElements) => {
       });
       return primitives;
     }
-    case "pcb_silkscreen_rect": {
-      return [
-        {
-          _pcb_drawing_object_id: `rect_${globalPcbDrawingObjectCount++}`,
-          pcb_drawing_type: "rect",
-          x: element.center.x,
-          y: element.center.y,
-          w: element.width,
-          h: element.height,
-          layer: element.layer === "bottom" ? "bottom_silkscreen" : "top_silkscreen",
-          stroke_width: element.stroke_width,
-          is_filled: element.is_filled,
-          has_stroke: element.has_stroke,
-          is_stroke_dashed: element.is_stroke_dashed,
-          roundness: element.corner_radius,
-          _element: element
-        }
-      ];
-    }
-    case "pcb_silkscreen_circle": {
-      return [
-        {
-          _pcb_drawing_object_id: `circle_${globalPcbDrawingObjectCount++}`,
-          pcb_drawing_type: "circle",
-          x: element.center.x,
-          y: element.center.y,
-          r: element.radius,
-          layer: element.layer === "bottom" ? "bottom_silkscreen" : "top_silkscreen"
-        }
-      ];
-    }
-    case "pcb_silkscreen_oval": {
-      return [
-        {
-          _pcb_drawing_object_id: `oval_${globalPcbDrawingObjectCount++}`,
-          pcb_drawing_type: "oval",
-          x: element.center.x,
-          y: element.center.y,
-          rX: element.radius_x / 2,
-          rY: element.radius_y / 2,
-          layer: element.layer === "bottom" ? "bottom_silkscreen" : "top_silkscreen"
-        }
-      ];
-    }
-    // @ts-ignore
-    case "pcb_silkscreen_pill": {
-      return [
-        {
-          _pcb_drawing_object_id: `pill_${globalPcbDrawingObjectCount++}`,
-          pcb_drawing_type: "pill",
-          // @ts-ignore
-          x: element.center.x,
-          // @ts-ignore
-          y: element.center.y,
-          // @ts-ignore
-          w: element.width,
-          // @ts-ignore
-          h: element.height,
-          layer: (
-            // @ts-ignore
-            element.layer === "bottom" ? "bottom_silkscreen" : "top_silkscreen"
-          )
-        }
-      ];
-    }
-    case "pcb_silkscreen_line": {
-      return [
-        {
-          _pcb_drawing_object_id: `line_${globalPcbDrawingObjectCount++}`,
-          pcb_drawing_type: "line",
-          x1: element.x1,
-          y1: element.y1,
-          x2: element.x2,
-          y2: element.y2,
-          width: 0.1,
-          // TODO add strokewidth
-          squareCap: false,
-          layer: element.layer === "bottom" ? "bottom_silkscreen" : "top_silkscreen"
-        }
-      ];
-    }
     case "pcb_fabrication_note_rect": {
       const rectElement = element;
       const layer = rectElement.layer === "bottom" ? "bottom_fabrication" : "top_fabrication";
@@ -8156,73 +7746,28 @@ var convertElementToPrimitives = (element, allElements) => {
         }
       ];
     }
-    case "pcb_fabrication_note_path":
-    case "pcb_silkscreen_path": {
-      const {
-        pcb_component_id,
-        route,
-        // Array<{ x: number, y: number }>
-        type
-      } = element;
-      let layer;
-      if (type === "pcb_silkscreen_path") {
-        layer = element.layer === "bottom" ? "bottom_silkscreen" : "top_silkscreen";
-        return route.slice(0, -1).map((point, index) => {
-          const nextPoint = route[index + 1];
-          return {
-            _pcb_drawing_object_id: `line_${globalPcbDrawingObjectCount++}`,
-            pcb_drawing_type: "line",
-            x1: point.x,
-            y1: point.y,
-            x2: nextPoint.x,
-            y2: nextPoint.y,
-            width: element.stroke_width ?? 0.1,
-            squareCap: false,
-            layer,
-            _element: element,
-            _parent_pcb_component,
-            _parent_source_component,
-            _source_port
-          };
-        }).filter(Boolean);
-      } else if (type === "pcb_fabrication_note_path") {
-        layer = "top_fabrication";
-        return route.slice(0, -1).map((point, index) => {
-          const nextPoint = route[index + 1];
-          return {
-            _pcb_drawing_object_id: `line_${globalPcbDrawingObjectCount++}`,
-            pcb_drawing_type: "line",
-            x1: point.x,
-            y1: point.y,
-            x2: nextPoint.x,
-            y2: nextPoint.y,
-            width: element.stroke_width ?? 0.1,
-            squareCap: false,
-            layer,
-            color: element.color,
-            _element: element,
-            _parent_pcb_component,
-            _parent_source_component,
-            _source_port
-          };
-        }).filter(Boolean);
-      }
-    }
-    case "pcb_silkscreen_text": {
-      return [
-        {
-          _pcb_drawing_object_id: `text_${globalPcbDrawingObjectCount++}`,
-          pcb_drawing_type: "text",
-          x: element.anchor_position.x,
-          y: element.anchor_position.y,
-          layer: element.layer === "bottom" ? "bottom_silkscreen" : "top_silkscreen",
-          align: element.anchor_alignment ?? "center",
-          text: element.text,
-          size: element.font_size,
-          // Add the required 'size' property
-          ccw_rotation: element.ccw_rotation
-        }
-      ];
+    case "pcb_fabrication_note_path": {
+      const { route } = element;
+      const layer = "top_fabrication";
+      return route.slice(0, -1).map((point, index) => {
+        const nextPoint = route[index + 1];
+        return {
+          _pcb_drawing_object_id: `line_${globalPcbDrawingObjectCount++}`,
+          pcb_drawing_type: "line",
+          x1: point.x,
+          y1: point.y,
+          x2: nextPoint.x,
+          y2: nextPoint.y,
+          width: element.stroke_width ?? 0.1,
+          squareCap: false,
+          layer,
+          color: element.color,
+          _element: element,
+          _parent_pcb_component,
+          _parent_source_component,
+          _source_port
+        };
+      }).filter(Boolean);
     }
     case "pcb_copper_text": {
       return convertPcbCopperTextToPrimitive(element, {
@@ -9326,10 +8871,10 @@ var Drawer = class {
       ...DEFAULT_DRAW_ORDER.filter(
         (l) => !layersToShiftToTop.includes(l)
       ),
+      ...associatedSilkscreen ? [associatedSilkscreen] : [],
       foregroundLayer,
       ...maskWithCopperLayerForForeground ? [maskWithCopperLayerForForeground] : [],
-      "drill",
-      ...associatedSilkscreen ? [associatedSilkscreen] : []
+      "drill"
     ];
     order.forEach((layer, i) => {
       const canvas = canvasLayerMap[layer];
@@ -9859,6 +9404,43 @@ var drawPrimitives = (drawer, primitives) => {
   }
 };
 
+// src/lib/draw-silkscreen.ts
+import {
+  DEFAULT_PCB_COLOR_MAP,
+  CircuitToCanvasDrawer
+} from "circuit-to-canvas";
+var PCB_VIEWER_COLOR_MAP = {
+  ...DEFAULT_PCB_COLOR_MAP,
+  silkscreen: {
+    top: colors_default.board.f_silks,
+    bottom: colors_default.board.b_silks
+  }
+};
+function isSilkscreenElement(element) {
+  return element.type.includes("pcb_silkscreen");
+}
+function drawSilkscreenElementsForLayer(canvas, elements, layers, realToCanvasMat) {
+  const drawer = new CircuitToCanvasDrawer(canvas);
+  drawer.configure({
+    colorOverrides: PCB_VIEWER_COLOR_MAP
+  });
+  drawer.realToCanvasMat = realToCanvasMat;
+  const silkscreenElements = elements.filter(isSilkscreenElement);
+  drawer.drawElements(silkscreenElements, { layers });
+}
+
+// src/lib/draw-plated-hole.ts
+import { CircuitToCanvasDrawer as CircuitToCanvasDrawer2 } from "circuit-to-canvas";
+function isPlatedHole(element) {
+  return element.type === "pcb_plated_hole";
+}
+function drawPlatedHolePads(canvas, elements, layers, realToCanvasMat) {
+  const drawer = new CircuitToCanvasDrawer2(canvas);
+  drawer.realToCanvasMat = realToCanvasMat;
+  const platedHoleElements = elements.filter(isPlatedHole);
+  drawer.drawElements(platedHoleElements, { layers });
+}
+
 // src/components/CanvasPrimitiveRenderer.tsx
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var orderedLayers = [
@@ -9883,6 +9465,7 @@ var orderedLayers = [
 ];
 var CanvasPrimitiveRenderer = ({
   primitives,
+  elements,
   transform,
   grid,
   width = 500,
@@ -9910,8 +9493,36 @@ var CanvasPrimitiveRenderer = ({
     drawer.foregroundLayer = selectedLayer;
     const filteredPrimitives = isShowingSolderMask ? primitives : primitives.filter((p) => !p.layer?.includes("soldermask"));
     drawPrimitives(drawer, filteredPrimitives);
+    if (transform) {
+      const topCanvas = canvasRefs.current.top;
+      if (topCanvas) {
+        drawPlatedHolePads(topCanvas, elements, ["top_copper"], transform);
+      }
+      const bottomCanvas = canvasRefs.current.bottom;
+      if (bottomCanvas) {
+        drawPlatedHolePads(bottomCanvas, elements, ["bottom_copper"], transform);
+      }
+      const topSilkscreenCanvas = canvasRefs.current.top_silkscreen;
+      if (topSilkscreenCanvas) {
+        drawSilkscreenElementsForLayer(
+          topSilkscreenCanvas,
+          elements,
+          ["top_silkscreen"],
+          transform
+        );
+      }
+      const bottomSilkscreenCanvas = canvasRefs.current.bottom_silkscreen;
+      if (bottomSilkscreenCanvas) {
+        drawSilkscreenElementsForLayer(
+          bottomSilkscreenCanvas,
+          elements,
+          ["bottom_silkscreen"],
+          transform
+        );
+      }
+    }
     drawer.orderAndFadeLayers();
-  }, [primitives, transform, selectedLayer, isShowingSolderMask]);
+  }, [primitives, elements, transform, selectedLayer, isShowingSolderMask]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -13946,7 +13557,7 @@ import { css as css3 } from "@emotion/css";
 // package.json
 var package_default = {
   name: "@tscircuit/pcb-viewer",
-  version: "1.11.295",
+  version: "1.11.297",
   main: "dist/index.js",
   type: "module",
   repository: "tscircuit/pcb-viewer",
@@ -13970,7 +13581,7 @@ 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.72",
+    "@tscircuit/circuit-json-util": "^0.0.75",
     "@tscircuit/eagle-xml-converter": "^1.0.0",
     "@types/bun": "latest",
     "@types/color": "^3.0.6",
@@ -13999,7 +13610,8 @@ var package_default = {
     "@tscircuit/alphabet": "^0.0.9",
     "@tscircuit/math-utils": "^0.0.29",
     "@vitejs/plugin-react": "^5.0.2",
-    "circuit-json": "^0.0.342",
+    "circuit-json": "^0.0.347",
+    "circuit-to-canvas": "^0.0.31",
     "circuit-to-svg": "^0.0.271",
     color: "^4.2.3",
     "react-supergrid": "^1.0.10",
@@ -14944,6 +14556,7 @@ var CanvasElementsRenderer = (props) => {
                                 {
                                   transform,
                                   primitives,
+                                  elements: elementsToRender,
                                   width: props.width,
                                   height: props.height,
                                   grid: props.grid