@tscircuit/pcb-viewer 1.11.306 → 1.11.308

package/dist/index.js

@@ -7546,6 +7546,333 @@ var convertElementToPrimitives = (element, allElements) => {
       });
       return primitives;
     }
+    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",
+            _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",
+            _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,
+          hole_offset_x,
+          hole_offset_y
+        } = element;
+        const parsed_hole_offset_x = distance2.parse(hole_offset_x ?? 0);
+        const parsed_hole_offset_y = distance2.parse(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",
+            _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",
+            _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 + parsed_hole_offset_x,
+            y: y + parsed_hole_offset_y,
+            r: hole_diameter / 2,
+            layer: "drill"
+          }
+        ];
+      } 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",
+            _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",
+            _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"
+          }
+        ];
+      } 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",
+            _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",
+            _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",
+            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,
+          hole_offset_x,
+          hole_offset_y
+        } = element;
+        const parsed_hole_offset_x = distance2.parse(hole_offset_x ?? 0);
+        const parsed_hole_offset_y = distance2.parse(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 + parsed_hole_offset_x,
+          y: y + parsed_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_copper_text": {
       return convertPcbCopperTextToPrimitive(element, {
         _parent_pcb_component,
@@ -8259,23 +8586,23 @@ var Drawer = class {
   }
   applyAperture() {
     const { transform, aperture } = this;
-    let { size, mode, color: color3, fontSize, layer } = aperture;
+    let { size, mode, color: color5, fontSize, layer } = aperture;
     if (!(layer in this.ctxLayerMap)) this.aperture.layer = "other";
     const ctx = this.getLayerCtx();
     if (!ctx) {
       throw new Error(`No context for layer "${this.foregroundLayer}"`);
     }
-    if (!color3) color3 = "undefined";
+    if (!color5) color5 = "undefined";
     ctx.lineWidth = scaleOnly(transform, size);
     ctx.lineCap = "round";
     if (mode === "add") {
       ctx.globalCompositeOperation = "source-over";
-      let colorString = LAYER_NAME_TO_COLOR[color3.toLowerCase()];
+      let colorString = LAYER_NAME_TO_COLOR[color5.toLowerCase()];
       if (!colorString)
         try {
-          colorString = colorParser(color3).rgb().toString();
+          colorString = colorParser(color5).rgb().toString();
         } catch (error) {
-          console.warn(`Invalid color format: '${color3}'`);
+          console.warn(`Invalid color format: '${color5}'`);
           colorString = "white";
         }
       ctx.fillStyle = colorString;
@@ -8804,24 +9131,65 @@ function drawSilkscreenElementsForLayer(canvas, elements, layers, realToCanvasMa
 }
 
 // src/lib/draw-plated-hole.ts
-import { CircuitToCanvasDrawer as CircuitToCanvasDrawer2 } from "circuit-to-canvas";
+import {
+  DEFAULT_PCB_COLOR_MAP as DEFAULT_PCB_COLOR_MAP2,
+  CircuitToCanvasDrawer as CircuitToCanvasDrawer2
+} from "circuit-to-canvas";
+import color2 from "color";
+var HOVER_COLOR_MAP = {
+  ...DEFAULT_PCB_COLOR_MAP2,
+  copper: {
+    ...DEFAULT_PCB_COLOR_MAP2.copper,
+    top: color2(colors_default.board.pad_front).lighten(0.5).toString(),
+    bottom: color2(colors_default.board.pad_back).lighten(0.5).toString()
+  }
+};
 function isPlatedHole(element) {
   return element.type === "pcb_plated_hole";
 }
-function drawPlatedHolePads(canvas, elements, layers, realToCanvasMat) {
-  const drawer = new CircuitToCanvasDrawer2(canvas);
-  drawer.realToCanvasMat = realToCanvasMat;
+function drawPlatedHolePads({
+  canvas,
+  elements,
+  layers,
+  realToCanvasMat,
+  primitives
+}) {
   const platedHoleElements = elements.filter(isPlatedHole);
-  drawer.drawElements(platedHoleElements, { layers });
+  if (platedHoleElements.length === 0) return;
+  const highlightedElementIds = /* @__PURE__ */ new Set();
+  if (primitives) {
+    for (const primitive of primitives) {
+      if ((primitive.is_mouse_over || primitive.is_in_highlighted_net) && primitive._element?.type === "pcb_plated_hole") {
+        highlightedElementIds.add(primitive._element.pcb_plated_hole_id);
+      }
+    }
+  }
+  const highlightedElements = platedHoleElements.filter(
+    (element) => highlightedElementIds.has(element.pcb_plated_hole_id)
+  );
+  const nonHighlightedElements = platedHoleElements.filter(
+    (element) => !highlightedElementIds.has(element.pcb_plated_hole_id)
+  );
+  if (nonHighlightedElements.length > 0) {
+    const drawer = new CircuitToCanvasDrawer2(canvas);
+    drawer.realToCanvasMat = realToCanvasMat;
+    drawer.drawElements(nonHighlightedElements, { layers });
+  }
+  if (highlightedElements.length > 0) {
+    const highlightDrawer = new CircuitToCanvasDrawer2(canvas);
+    highlightDrawer.configure({ colorOverrides: HOVER_COLOR_MAP });
+    highlightDrawer.realToCanvasMat = realToCanvasMat;
+    highlightDrawer.drawElements(highlightedElements, { layers });
+  }
 }
 
 // src/lib/draw-fabrication-note.ts
 import {
-  DEFAULT_PCB_COLOR_MAP as DEFAULT_PCB_COLOR_MAP2,
+  DEFAULT_PCB_COLOR_MAP as DEFAULT_PCB_COLOR_MAP3,
   CircuitToCanvasDrawer as CircuitToCanvasDrawer3
 } from "circuit-to-canvas";
 var PCB_VIEWER_COLOR_MAP2 = {
-  ...DEFAULT_PCB_COLOR_MAP2,
+  ...DEFAULT_PCB_COLOR_MAP3,
   silkscreen: {
     top: colors_default.board.f_fab,
     bottom: colors_default.board.b_fab
@@ -8892,16 +9260,16 @@ function drawPcbCutoutElementsForLayer(canvas, elements, layers, realToCanvasMat
 
 // src/lib/draw-pcb-smtpad.ts
 import {
-  DEFAULT_PCB_COLOR_MAP as DEFAULT_PCB_COLOR_MAP4,
+  DEFAULT_PCB_COLOR_MAP as DEFAULT_PCB_COLOR_MAP5,
   CircuitToCanvasDrawer as CircuitToCanvasDrawer8
 } from "circuit-to-canvas";
-import color2 from "color";
-var HOVER_COLOR_MAP = {
-  ...DEFAULT_PCB_COLOR_MAP4,
+import color3 from "color";
+var HOVER_COLOR_MAP2 = {
+  ...DEFAULT_PCB_COLOR_MAP5,
   copper: {
-    ...DEFAULT_PCB_COLOR_MAP4.copper,
-    top: color2(colors_default.board.pad_front).lighten(0.5).toString(),
-    bottom: color2(colors_default.board.pad_back).lighten(0.5).toString()
+    ...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()
   }
 };
 function isPcbSmtPad(element) {
@@ -8944,12 +9312,67 @@ function drawPcbSmtPadElementsForLayer({
   }
   if (highlightedElements.length > 0) {
     const highlightDrawer = new CircuitToCanvasDrawer8(canvas);
-    highlightDrawer.configure({ colorOverrides: HOVER_COLOR_MAP });
+    highlightDrawer.configure({ colorOverrides: HOVER_COLOR_MAP2 });
     highlightDrawer.realToCanvasMat = realToCanvasMat;
     highlightDrawer.drawElements(highlightedElements, { layers: [] });
   }
 }
 
+// src/lib/draw-via.ts
+import {
+  DEFAULT_PCB_COLOR_MAP as DEFAULT_PCB_COLOR_MAP6,
+  CircuitToCanvasDrawer as CircuitToCanvasDrawer9
+} from "circuit-to-canvas";
+import color4 from "color";
+var HOVER_COLOR_MAP3 = {
+  ...DEFAULT_PCB_COLOR_MAP6,
+  copper: {
+    ...DEFAULT_PCB_COLOR_MAP6.copper,
+    top: color4(colors_default.board.pad_front).lighten(0.5).toString(),
+    bottom: color4(colors_default.board.pad_back).lighten(0.5).toString()
+  }
+};
+function isPcbVia(element) {
+  return element.type === "pcb_via";
+}
+function drawPcbViaElementsForLayer({
+  canvas,
+  elements,
+  layers,
+  realToCanvasMat,
+  primitives
+}) {
+  const viaElements = elements.filter(isPcbVia).filter((element) => {
+    return layers.some((layer) => layer.includes("copper"));
+  });
+  if (viaElements.length === 0) return;
+  const highlightedElementIds = /* @__PURE__ */ new Set();
+  if (primitives) {
+    for (const primitive of primitives) {
+      if ((primitive.is_mouse_over || primitive.is_in_highlighted_net) && primitive._element?.type === "pcb_via") {
+        highlightedElementIds.add(primitive._element.pcb_via_id);
+      }
+    }
+  }
+  const highlightedElements = viaElements.filter(
+    (element) => highlightedElementIds.has(element.pcb_via_id)
+  );
+  const nonHighlightedElements = viaElements.filter(
+    (element) => !highlightedElementIds.has(element.pcb_via_id)
+  );
+  if (nonHighlightedElements.length > 0) {
+    const drawer = new CircuitToCanvasDrawer9(canvas);
+    drawer.realToCanvasMat = realToCanvasMat;
+    drawer.drawElements(nonHighlightedElements, { layers });
+  }
+  if (highlightedElements.length > 0) {
+    const highlightDrawer = new CircuitToCanvasDrawer9(canvas);
+    highlightDrawer.configure({ colorOverrides: HOVER_COLOR_MAP3 });
+    highlightDrawer.realToCanvasMat = realToCanvasMat;
+    highlightDrawer.drawElements(highlightedElements, { layers });
+  }
+}
+
 // src/components/CanvasPrimitiveRenderer.tsx
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var orderedLayers = [
@@ -9004,16 +9427,28 @@ var CanvasPrimitiveRenderer = ({
     if (transform) drawer.transform = transform;
     drawer.clear();
     drawer.foregroundLayer = selectedLayer;
-    const filteredPrimitives = primitives.filter((p) => isShowingSolderMask || !p.layer?.includes("soldermask")).filter((p) => p.layer !== "board").filter((p) => p._element?.type !== "pcb_smtpad");
+    const filteredPrimitives = primitives.filter((p) => isShowingSolderMask || !p.layer?.includes("soldermask")).filter((p) => p.layer !== "board").filter((p) => p._element?.type !== "pcb_smtpad").filter((p) => p._element?.type !== "pcb_plated_hole").filter((p) => p._element?.type !== "pcb_via");
     drawPrimitives(drawer, filteredPrimitives);
     if (transform) {
       const topCanvas = canvasRefs.current.top;
       if (topCanvas) {
-        drawPlatedHolePads(topCanvas, elements, ["top_copper"], transform);
+        drawPlatedHolePads({
+          canvas: topCanvas,
+          elements,
+          layers: ["top_copper"],
+          realToCanvasMat: transform,
+          primitives
+        });
       }
       const bottomCanvas = canvasRefs.current.bottom;
       if (bottomCanvas) {
-        drawPlatedHolePads(bottomCanvas, elements, ["bottom_copper"], transform);
+        drawPlatedHolePads({
+          canvas: bottomCanvas,
+          elements,
+          layers: ["bottom_copper"],
+          realToCanvasMat: transform,
+          primitives
+        });
       }
       if (topCanvas) {
         drawPcbSmtPadElementsForLayer({
@@ -9033,6 +9468,24 @@ var CanvasPrimitiveRenderer = ({
           primitives
         });
       }
+      if (topCanvas) {
+        drawPcbViaElementsForLayer({
+          canvas: topCanvas,
+          elements,
+          layers: ["top_copper"],
+          realToCanvasMat: transform,
+          primitives
+        });
+      }
+      if (bottomCanvas) {
+        drawPcbViaElementsForLayer({
+          canvas: bottomCanvas,
+          elements,
+          layers: ["bottom_copper"],
+          realToCanvasMat: transform,
+          primitives
+        });
+      }
       const topSilkscreenCanvas = canvasRefs.current.top_silkscreen;
       if (topSilkscreenCanvas) {
         drawSilkscreenElementsForLayer(
@@ -11704,7 +12157,7 @@ var HighlightedPrimitiveBoxWithText = ({
   ];
   const si = primitive.same_space_index ?? 0;
   const sip = 26;
-  const color3 = layerColorHightlightMap[primitive?._element?.layer] ?? "red";
+  const color5 = layerColorHightlightMap[primitive?._element?.layer] ?? "red";
   let rotation = 0;
   if (primitiveElement.type === "pcb_smtpad" && primitiveElement?.shape === "rotated_rect") {
     rotation = primitiveElement?.ccw_rotation ?? 0;
@@ -11726,7 +12179,7 @@ var HighlightedPrimitiveBoxWithText = ({
           position: "absolute",
           left: mousePos.x,
           top: yOffset,
-          color: color3,
+          color: color5,
           pointerEvents: "none",
           transform: "translateX(-50%)"
         },
@@ -11766,7 +12219,7 @@ var HighlightedPrimitiveBoxWithText = ({
         top: y - h / 2 - 8,
         width: w + 16,
         height: h + 16,
-        color: color3,
+        color: color5,
         transform: `rotate(${-rotation}deg)`,
         transformOrigin: "center center"
       },
@@ -11782,7 +12235,7 @@ var HighlightedPrimitiveBoxWithText = ({
             height: finalState ? `calc(100% + ${sip * 2 * si}px)` : "100%",
             marginLeft: finalState ? `${-sip * si}px` : 0,
             marginTop: finalState ? `${-sip * si}px` : 0,
-            border: `1px solid ${color3}`,
+            border: `1px solid ${color5}`,
             opacity: finalState ? 1 : si === 0 ? 1 : 0,
             transition: "width 0.2s, height 0.2s, margin-left 0.2s, margin-top 0.2s, opacity 0.2s"
           },
@@ -13141,7 +13594,7 @@ import { css as css3 } from "@emotion/css";
 // package.json
 var package_default = {
   name: "@tscircuit/pcb-viewer",
-  version: "1.11.305",
+  version: "1.11.307",
   main: "dist/index.js",
   type: "module",
   repository: "tscircuit/pcb-viewer",