@tscircuit/pcb-viewer 1.11.296 → 1.11.297

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;
@@ -8047,87 +8056,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 +8084,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, {
@@ -9859,6 +9742,27 @@ 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 drawSilkscreenElementsForLayer(canvas, elements, layer, realToCanvasMat) {
+  const drawer = new CircuitToCanvasDrawer(canvas);
+  drawer.configure({
+    colorOverrides: PCB_VIEWER_COLOR_MAP
+  });
+  drawer.realToCanvasMat = realToCanvasMat;
+  drawer.drawElements(elements, { layers: [layer] });
+}
+
 // src/components/CanvasPrimitiveRenderer.tsx
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var orderedLayers = [
@@ -9883,6 +9787,7 @@ var orderedLayers = [
 ];
 var CanvasPrimitiveRenderer = ({
   primitives,
+  elements,
   transform,
   grid,
   width = 500,
@@ -9910,8 +9815,28 @@ var CanvasPrimitiveRenderer = ({
     drawer.foregroundLayer = selectedLayer;
     const filteredPrimitives = isShowingSolderMask ? primitives : primitives.filter((p) => !p.layer?.includes("soldermask"));
     drawPrimitives(drawer, filteredPrimitives);
+    if (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 +13871,7 @@ import { css as css3 } from "@emotion/css";
 // package.json
 var package_default = {
   name: "@tscircuit/pcb-viewer",
-  version: "1.11.295",
+  version: "1.11.296",
   main: "dist/index.js",
   type: "module",
   repository: "tscircuit/pcb-viewer",
@@ -13970,7 +13895,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 +13924,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 +14870,7 @@ var CanvasElementsRenderer = (props) => {
                                 {
                                   transform,
                                   primitives,
+                                  elements: elementsToRender,
                                   width: props.width,
                                   height: props.height,
                                   grid: props.grid