@tscircuit/pcb-viewer 1.11.268 → 1.11.269

package/dist/index.d.ts

@@ -20,6 +20,7 @@ interface State {
     is_showing_copper_pours: boolean;
     is_showing_pcb_groups: boolean;
     is_showing_group_anchor_offsets: boolean;
+    is_showing_solder_mask: boolean;
     pcb_group_view_mode: "all" | "named_only";
     hovered_error_id: string | null;
     selectLayer: (layer: LayerRef) => void;
@@ -34,6 +35,7 @@ interface State {
     setIsShowingCopperPours: (is_showing: boolean) => void;
     setIsShowingPcbGroups: (is_showing: boolean) => void;
     setIsShowingGroupAnchorOffsets: (is_showing: boolean) => void;
+    setIsShowingSolderMask: (is_showing: boolean) => void;
     setPcbGroupViewMode: (mode: "all" | "named_only") => void;
     setHoveredErrorId: (errorId: string | null) => void;
 }

package/dist/index.js

@@ -6278,7 +6278,8 @@ var STORAGE_KEYS = {
   IS_SHOWING_PCB_GROUPS: "pcb_viewer_is_showing_pcb_groups",
   PCB_GROUP_VIEW_MODE: "pcb_viewer_group_view_mode",
   IS_SHOWING_COPPER_POURS: "pcb_viewer_is_showing_copper_pours",
-  IS_SHOWING_GROUP_ANCHOR_OFFSETS: "pcb_viewer_is_showing_group_anchor_offsets"
+  IS_SHOWING_GROUP_ANCHOR_OFFSETS: "pcb_viewer_is_showing_group_anchor_offsets",
+  IS_SHOWING_SOLDER_MASK: "pcb_viewer_is_showing_solder_mask"
 };
 var getStoredBoolean = (key, defaultValue) => {
   if (typeof window === "undefined") return defaultValue;
@@ -6338,6 +6339,10 @@ var createStore = (initialState = {}, disablePcbGroups = false) => createZustand
       STORAGE_KEYS.IS_SHOWING_GROUP_ANCHOR_OFFSETS,
       true
     ),
+    is_showing_solder_mask: getStoredBoolean(
+      STORAGE_KEYS.IS_SHOWING_SOLDER_MASK,
+      false
+    ),
     pcb_group_view_mode: disablePcbGroups ? "all" : getStoredString(
       STORAGE_KEYS.PCB_GROUP_VIEW_MODE,
       DEFAULT_PCB_GROUP_VIEW_MODE
@@ -6375,6 +6380,10 @@ var createStore = (initialState = {}, disablePcbGroups = false) => createZustand
       );
       set({ is_showing_group_anchor_offsets: is_showing });
     },
+    setIsShowingSolderMask: (is_showing) => {
+      setStoredBoolean(STORAGE_KEYS.IS_SHOWING_SOLDER_MASK, is_showing);
+      set({ is_showing_solder_mask: is_showing });
+    },
     setPcbGroupViewMode: (mode) => {
       if (disablePcbGroups) return;
       setStoredString(STORAGE_KEYS.PCB_GROUP_VIEW_MODE, mode);
@@ -7139,76 +7148,123 @@ var convertElementToPrimitives = (element, allElements) => {
     }
     case "pcb_board": {
       const { width, height, center, outline } = element;
+      const primitives = [];
+      const hasSolderMask = allElements.some(
+        (elm) => elm.type === "pcb_smtpad" && elm.is_covered_with_solder_mask === true
+      );
+      if (hasSolderMask) {
+        if (outline && outline.length > 2) {
+          primitives.push({
+            _pcb_drawing_object_id: `polygon_${globalPcbDrawingObjectCount++}`,
+            pcb_drawing_type: "polygon",
+            points: normalizePolygonPoints(outline),
+            layer: "soldermask_top",
+            _element: element
+          });
+          primitives.push({
+            _pcb_drawing_object_id: `polygon_${globalPcbDrawingObjectCount++}`,
+            pcb_drawing_type: "polygon",
+            points: normalizePolygonPoints(outline),
+            layer: "soldermask_bottom",
+            _element: element
+          });
+        } else if (width && height) {
+          primitives.push({
+            _pcb_drawing_object_id: `rect_${globalPcbDrawingObjectCount++}`,
+            pcb_drawing_type: "rect",
+            x: center.x,
+            y: center.y,
+            w: width,
+            h: height,
+            layer: "soldermask_top",
+            _element: element
+          });
+          primitives.push({
+            _pcb_drawing_object_id: `rect_${globalPcbDrawingObjectCount++}`,
+            pcb_drawing_type: "rect",
+            x: center.x,
+            y: center.y,
+            w: width,
+            h: height,
+            layer: "soldermask_bottom",
+            _element: element
+          });
+        }
+      }
       if (outline && outline.length > 2) {
-        return outline.map((point, index, array) => ({
-          _pcb_drawing_object_id: `line_${globalPcbDrawingObjectCount++}`,
-          pcb_drawing_type: "line",
-          x1: point.x,
-          y1: point.y,
-          x2: index === array.length - 1 ? array[0].x : array[index + 1].x,
-          y2: index === array.length - 1 ? array[0].y : array[index + 1].y,
-          width: 1,
-          zoomIndependent: true,
-          layer: "board",
-          _element: element
-        }));
+        primitives.push(
+          ...outline.map((point, index, array) => ({
+            _pcb_drawing_object_id: `line_${globalPcbDrawingObjectCount++}`,
+            pcb_drawing_type: "line",
+            x1: point.x,
+            y1: point.y,
+            x2: index === array.length - 1 ? array[0].x : array[index + 1].x,
+            y2: index === array.length - 1 ? array[0].y : array[index + 1].y,
+            width: 1,
+            zoomIndependent: true,
+            layer: "board",
+            _element: element
+          }))
+        );
+      } else {
+        primitives.push(
+          {
+            _pcb_drawing_object_id: `line_${globalPcbDrawingObjectCount++}`,
+            pcb_drawing_type: "line",
+            x1: center.x - width / 2,
+            y1: center.y - height / 2,
+            x2: center.x + width / 2,
+            y2: center.y - height / 2,
+            width: 1,
+            zoomIndependent: true,
+            layer: "board",
+            _element: element
+          },
+          {
+            _pcb_drawing_object_id: `line_${globalPcbDrawingObjectCount++}`,
+            pcb_drawing_type: "line",
+            x1: center.x - width / 2,
+            y1: center.y + height / 2,
+            x2: center.x + width / 2,
+            y2: center.y + height / 2,
+            width: 1,
+            zoomIndependent: true,
+            layer: "board",
+            _element: element
+          },
+          {
+            _pcb_drawing_object_id: `line_${globalPcbDrawingObjectCount++}`,
+            pcb_drawing_type: "line",
+            x1: center.x - width / 2,
+            y1: center.y - height / 2,
+            x2: center.x - width / 2,
+            y2: center.y + height / 2,
+            width: 1,
+            zoomIndependent: true,
+            layer: "board",
+            _element: element
+          },
+          {
+            _pcb_drawing_object_id: `line_${globalPcbDrawingObjectCount++}`,
+            pcb_drawing_type: "line",
+            x1: center.x + width / 2,
+            y1: center.y - height / 2,
+            x2: center.x + width / 2,
+            y2: center.y + height / 2,
+            width: 1,
+            zoomIndependent: true,
+            layer: "board",
+            _element: element
+          }
+        );
       }
-      return [
-        {
-          _pcb_drawing_object_id: `line_${globalPcbDrawingObjectCount++}`,
-          pcb_drawing_type: "line",
-          x1: center.x - width / 2,
-          y1: center.y - height / 2,
-          x2: center.x + width / 2,
-          y2: center.y - height / 2,
-          width: 1,
-          zoomIndependent: true,
-          layer: "board",
-          _element: element
-        },
-        {
-          _pcb_drawing_object_id: `line_${globalPcbDrawingObjectCount++}`,
-          pcb_drawing_type: "line",
-          x1: center.x - width / 2,
-          y1: center.y + height / 2,
-          x2: center.x + width / 2,
-          y2: center.y + height / 2,
-          width: 1,
-          zoomIndependent: true,
-          layer: "board",
-          _element: element
-        },
-        {
-          _pcb_drawing_object_id: `line_${globalPcbDrawingObjectCount++}`,
-          pcb_drawing_type: "line",
-          x1: center.x - width / 2,
-          y1: center.y - height / 2,
-          x2: center.x - width / 2,
-          y2: center.y + height / 2,
-          width: 1,
-          zoomIndependent: true,
-          layer: "board",
-          _element: element
-        },
-        {
-          _pcb_drawing_object_id: `line_${globalPcbDrawingObjectCount++}`,
-          pcb_drawing_type: "line",
-          x1: center.x + width / 2,
-          y1: center.y - height / 2,
-          x2: center.x + width / 2,
-          y2: center.y + height / 2,
-          width: 1,
-          zoomIndependent: true,
-          layer: "board",
-          _element: element
-        }
-      ];
+      return primitives;
     }
     case "pcb_smtpad": {
       if (element.shape === "rect" || element.shape === "rotated_rect") {
         const { shape, x, y, width, height, layer, rect_border_radius } = element;
         const corner_radius = element.corner_radius ?? rect_border_radius ?? 0;
-        return [
+        const primitives = [
           {
             _pcb_drawing_object_id: `rect_${globalPcbDrawingObjectCount++}`,
             pcb_drawing_type: "rect",
@@ -7225,9 +7281,32 @@ var convertElementToPrimitives = (element, allElements) => {
             roundness: corner_radius
           }
         ];
+        if (element.is_covered_with_solder_mask) {
+          const maskLayer = layer === "bottom" ? "soldermask_with_copper_bottom" : "soldermask_with_copper_top";
+          const maskPrimitive = {
+            _pcb_drawing_object_id: `rect_${globalPcbDrawingObjectCount++}`,
+            pcb_drawing_type: "rect",
+            x,
+            y,
+            w: width,
+            h: height,
+            layer: maskLayer,
+            _element: element,
+            _parent_pcb_component,
+            _parent_source_component,
+            _source_port,
+            ccw_rotation: element.ccw_rotation,
+            roundness: corner_radius
+          };
+          if (element.solder_mask_color) {
+            maskPrimitive.color = element.solder_mask_color;
+          }
+          primitives.push(maskPrimitive);
+        }
+        return primitives;
       } else if (element.shape === "circle") {
         const { x, y, radius, layer } = element;
-        return [
+        const primitives = [
           {
             _pcb_drawing_object_id: `circle_${globalPcbDrawingObjectCount++}`,
             pcb_drawing_type: "circle",
@@ -7241,9 +7320,29 @@ var convertElementToPrimitives = (element, allElements) => {
             _source_port
           }
         ];
+        if (element.is_covered_with_solder_mask) {
+          const maskLayer = layer === "bottom" ? "soldermask_with_copper_bottom" : "soldermask_with_copper_top";
+          const maskPrimitive = {
+            _pcb_drawing_object_id: `circle_${globalPcbDrawingObjectCount++}`,
+            pcb_drawing_type: "circle",
+            x,
+            y,
+            r: radius,
+            layer: maskLayer,
+            _element: element,
+            _parent_pcb_component,
+            _parent_source_component,
+            _source_port
+          };
+          if (element.solder_mask_color) {
+            maskPrimitive.color = element.solder_mask_color;
+          }
+          primitives.push(maskPrimitive);
+        }
+        return primitives;
       } else if (element.shape === "polygon") {
         const { layer, points } = element;
-        return [
+        const primitives = [
           {
             _pcb_drawing_object_id: `polygon_${globalPcbDrawingObjectCount++}`,
             pcb_drawing_type: "polygon",
@@ -7255,9 +7354,27 @@ var convertElementToPrimitives = (element, allElements) => {
             _source_port
           }
         ];
+        if (element.is_covered_with_solder_mask) {
+          const maskLayer = layer === "bottom" ? "soldermask_with_copper_bottom" : "soldermask_with_copper_top";
+          const maskPrimitive = {
+            _pcb_drawing_object_id: `polygon_${globalPcbDrawingObjectCount++}`,
+            pcb_drawing_type: "polygon",
+            points: normalizePolygonPoints(points),
+            layer: maskLayer,
+            _element: element,
+            _parent_pcb_component,
+            _parent_source_component,
+            _source_port
+          };
+          if (element.solder_mask_color) {
+            maskPrimitive.color = element.solder_mask_color;
+          }
+          primitives.push(maskPrimitive);
+        }
+        return primitives;
       } else if (element.shape === "pill" || element.shape === "rotated_pill") {
         const { x, y, width, height, layer } = element;
-        return [
+        const primitives = [
           {
             _pcb_drawing_object_id: `pill_${globalPcbDrawingObjectCount++}`,
             pcb_drawing_type: "pill",
@@ -7273,6 +7390,28 @@ var convertElementToPrimitives = (element, allElements) => {
             ccw_rotation: element.ccw_rotation
           }
         ];
+        if (element.is_covered_with_solder_mask) {
+          const maskLayer = layer === "bottom" ? "soldermask_with_copper_bottom" : "soldermask_with_copper_top";
+          const maskPrimitive = {
+            _pcb_drawing_object_id: `pill_${globalPcbDrawingObjectCount++}`,
+            pcb_drawing_type: "pill",
+            x,
+            y,
+            w: width,
+            h: height,
+            layer: maskLayer,
+            _element: element,
+            _parent_pcb_component,
+            _parent_source_component,
+            _source_port,
+            ccw_rotation: element.ccw_rotation
+          };
+          if (element.solder_mask_color) {
+            maskPrimitive.color = element.solder_mask_color;
+          }
+          primitives.push(maskPrimitive);
+        }
+        return primitives;
       }
       return [];
     }
@@ -8543,6 +8682,14 @@ var colors_default = {
     plated_hole: "rgb(26, 196, 210)",
     ratsnest: "rgba(245, 255, 213, 0.702)",
     select_overlay: "rgb(4, 255, 67)",
+    soldermaskWithCopper: {
+      top: "rgb(18, 82, 50)",
+      bottom: "rgb(77, 127, 196)"
+    },
+    soldermask: {
+      top: "rgb(12, 55, 33)",
+      bottom: "rgb(12, 55, 33)"
+    },
     through_via: "rgb(236, 236, 236)",
     user_1: "rgb(194, 194, 194)",
     user_2: "rgb(89, 148, 220)",
@@ -8739,6 +8886,10 @@ var LAYER_NAME_TO_COLOR = {
   bottom_silkscreen: colors_default.board.b_silks,
   top_fabrication: colors_default.board.f_fab,
   bottom_fabrication: colors_default.board.b_fab,
+  soldermask_top: colors_default.board.soldermask.top,
+  soldermask_bottom: colors_default.board.soldermask.bottom,
+  soldermask_with_copper_top: colors_default.board.soldermaskWithCopper.top,
+  soldermask_with_copper_bottom: colors_default.board.soldermaskWithCopper.bottom,
   notes: colors_default.board.user_2,
   ...colors_default.board
 };
@@ -8750,9 +8901,13 @@ var DEFAULT_DRAW_ORDER = [
   "inner2",
   "inner1",
   "bottom",
+  "soldermask_bottom",
   "bottom_silkscreen",
   "top",
+  "soldermask_top",
   "top_silkscreen",
+  "soldermask_with_copper_bottom",
+  "soldermask_with_copper_top",
   "board"
 ];
 var Drawer = class {
@@ -9044,23 +9199,27 @@ var Drawer = class {
    */
   orderAndFadeLayers() {
     const { canvasLayerMap, foregroundLayer } = this;
+    const associatedSilkscreen = foregroundLayer === "top" ? "top_silkscreen" : foregroundLayer === "bottom" ? "bottom_silkscreen" : void 0;
+    const maskWithCopperLayerForForeground = foregroundLayer === "top" ? "soldermask_with_copper_top" : foregroundLayer === "bottom" ? "soldermask_with_copper_bottom" : void 0;
     const opaqueLayers = /* @__PURE__ */ new Set([
       foregroundLayer,
       "drill",
       "other",
       "board",
-      foregroundLayer === "top" ? "top_silkscreen" : foregroundLayer === "bottom" ? "bottom_silkscreen" : ""
+      ...associatedSilkscreen ? [associatedSilkscreen] : [],
+      ...maskWithCopperLayerForForeground ? [maskWithCopperLayerForForeground] : []
     ]);
-    const associatedSilkscreen = foregroundLayer === "top" ? "top_silkscreen" : foregroundLayer === "bottom" ? "bottom_silkscreen" : void 0;
     const layersToShiftToTop = [
       foregroundLayer,
-      ...associatedSilkscreen ? [associatedSilkscreen] : []
+      ...associatedSilkscreen ? [associatedSilkscreen] : [],
+      ...maskWithCopperLayerForForeground ? [maskWithCopperLayerForForeground] : []
     ];
     const order = [
       ...DEFAULT_DRAW_ORDER.filter(
         (l) => !layersToShiftToTop.includes(l)
       ),
       foregroundLayer,
+      ...maskWithCopperLayerForForeground ? [maskWithCopperLayerForForeground] : [],
       "drill",
       ...associatedSilkscreen ? [associatedSilkscreen] : []
     ];
@@ -9497,7 +9656,11 @@ var orderedLayers = [
   "board",
   "bottom_silkscreen",
   "bottom",
+  "soldermask_bottom",
   "top",
+  "soldermask_top",
+  "soldermask_with_copper_bottom",
+  "soldermask_with_copper_top",
   "top_silkscreen",
   "inner1",
   "inner2",
@@ -9518,16 +9681,28 @@ var CanvasPrimitiveRenderer = ({
 }) => {
   const canvasRefs = useRef2({});
   const selectedLayer = useGlobalStore((s) => s.selected_layer);
+  const isShowingSolderMask = useGlobalStore((s) => s.is_showing_solder_mask);
   useEffect4(() => {
     if (!canvasRefs.current) return;
     if (Object.keys(canvasRefs.current).length === 0) return;
-    const drawer = new Drawer(canvasRefs.current);
+    const filteredCanvasRefs = Object.fromEntries(
+      Object.entries(canvasRefs.current).filter(([layer, canvas]) => {
+        if (!canvas) return false;
+        if (!isShowingSolderMask && layer.includes("soldermask")) {
+          return false;
+        }
+        return true;
+      })
+    );
+    if (Object.keys(filteredCanvasRefs).length === 0) return;
+    const drawer = new Drawer(filteredCanvasRefs);
     if (transform) drawer.transform = transform;
     drawer.clear();
     drawer.foregroundLayer = selectedLayer;
-    drawPrimitives(drawer, primitives);
+    const filteredPrimitives = isShowingSolderMask ? primitives : primitives.filter((p) => !p.layer?.includes("soldermask"));
+    drawPrimitives(drawer, filteredPrimitives);
     drawer.orderAndFadeLayers();
-  }, [primitives, transform, selectedLayer]);
+  }, [primitives, transform, selectedLayer, isShowingSolderMask]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -9551,13 +9726,22 @@ var CanvasPrimitiveRenderer = ({
             stringifyCoord: (x, y, z) => `${toMMSI(x, z)}, ${toMMSI(y, z)}`
           }
         ),
-        orderedLayers.map((l) => l.replace(/-/g, "")).map((layer, i) => /* @__PURE__ */ jsx3(
+        orderedLayers.filter((layer) => {
+          if (!isShowingSolderMask) {
+            return !layer.includes("soldermask");
+          }
+          return true;
+        }).map((l) => l.replace(/-/g, "")).map((layer, i) => /* @__PURE__ */ jsx3(
           "canvas",
           {
             className: `pcb-layer-${layer}`,
             ref: (el) => {
               canvasRefs.current ??= {};
-              canvasRefs.current[layer] = el;
+              if (el) {
+                canvasRefs.current[layer] = el;
+              } else {
+                delete canvasRefs.current[layer];
+              }
             },
             style: {
               position: "absolute",
@@ -13077,7 +13261,7 @@ import { css as css3 } from "@emotion/css";
 // package.json
 var package_default = {
   name: "@tscircuit/pcb-viewer",
-  version: "1.11.266",
+  version: "1.11.268",
   main: "dist/index.js",
   type: "module",
   repository: "tscircuit/pcb-viewer",
@@ -13345,6 +13529,7 @@ var ToolbarOverlay = ({ children, elements }) => {
     setIsShowingCopperPours,
     setIsShowingPcbGroups,
     setIsShowingGroupAnchorOffsets,
+    setIsShowingSolderMask,
     setPcbGroupViewMode,
     setHoveredErrorId
   } = useGlobalStore((s) => ({
@@ -13364,6 +13549,7 @@ var ToolbarOverlay = ({ children, elements }) => {
       is_showing_copper_pours: s.is_showing_copper_pours,
       is_showing_pcb_groups: s.is_showing_pcb_groups,
       is_showing_group_anchor_offsets: s.is_showing_group_anchor_offsets,
+      is_showing_solder_mask: s.is_showing_solder_mask,
       pcb_group_view_mode: s.pcb_group_view_mode
     },
     setEditMode: s.setEditMode,
@@ -13374,6 +13560,7 @@ var ToolbarOverlay = ({ children, elements }) => {
     setIsShowingCopperPours: s.setIsShowingCopperPours,
     setIsShowingPcbGroups: s.setIsShowingPcbGroups,
     setIsShowingGroupAnchorOffsets: s.setIsShowingGroupAnchorOffsets,
+    setIsShowingSolderMask: s.setIsShowingSolderMask,
     setPcbGroupViewMode: s.setPcbGroupViewMode,
     setHoveredErrorId: s.setHoveredErrorId
   }));
@@ -13863,6 +14050,16 @@ var ToolbarOverlay = ({ children, elements }) => {
                           }
                         }
                       ),
+                      /* @__PURE__ */ jsx16(
+                        CheckboxMenuItem,
+                        {
+                          label: "Show Solder Mask",
+                          checked: viewSettings.is_showing_solder_mask,
+                          onClick: () => {
+                            setIsShowingSolderMask(!viewSettings.is_showing_solder_mask);
+                          }
+                        }
+                      ),
                       /* @__PURE__ */ jsx16(
                         CheckboxMenuItem,
                         {