@tscircuit/3d-viewer 0.0.460 → 0.0.462

package/dist/index.d.ts

@@ -75,6 +75,8 @@ interface ManifoldGeoms {
 interface ManifoldTextures {
     topTrace?: THREE.CanvasTexture | null;
     bottomTrace?: THREE.CanvasTexture | null;
+    topTraceWithMask?: THREE.CanvasTexture | null;
+    bottomTraceWithMask?: THREE.CanvasTexture | null;
     topSilkscreen?: THREE.CanvasTexture | null;
     bottomSilkscreen?: THREE.CanvasTexture | null;
     topSoldermask?: THREE.CanvasTexture | null;

package/dist/index.js

@@ -28509,7 +28509,7 @@ import * as THREE15 from "three";
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.459",
+  version: "0.0.461",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -29716,22 +29716,29 @@ var BOARD_SURFACE_OFFSET = {
 };
 var colors = {
   copper: [0.9, 0.6, 0.2],
-  fr4Green: [0.04, 0.16, 0.08],
-  fr4GreenSolderWithMask: [0 / 255, 152 / 255, 19 / 255],
-  fr1Copper: [0.8, 0.4, 0.2],
-  fr1CopperSolderWithMask: [0.9, 0.6, 0.2]
+  fr4Tan: [0.6, 0.43, 0.28],
+  fr4SolderMaskGreen: [0.02, 0.1, 0.04],
+  fr4TracesWithMaskGreen: [0, 0.5, 0.25],
+  fr4TracesWithoutMaskTan: [0.6, 0.43, 0.28],
+  fr1Tan: [0.8, 0.4, 0.2],
+  fr1TracesWithMaskCopper: [0.9, 0.6, 0.2],
+  fr1SolderMaskGreen: [0.02, 0.1, 0.04]
 };
 var MANIFOLD_Z_OFFSET = 1e-3;
 var SMOOTH_CIRCLE_SEGMENTS = 32;
 var DEFAULT_SMT_PAD_THICKNESS = 0.035;
 var TRACE_TEXTURE_RESOLUTION = 50;
 var boardMaterialColors = {
-  fr1: colors.fr1Copper,
-  fr4: colors.fr4Green
+  fr1: colors.fr1Tan,
+  fr4: colors.fr4Tan
 };
 var tracesMaterialColors = {
-  fr1: colors.fr1CopperSolderWithMask,
-  fr4: colors.fr4GreenSolderWithMask
+  fr1: colors.fr1TracesWithMaskCopper,
+  fr4: colors.fr4TracesWithoutMaskTan
+};
+var soldermaskColors = {
+  fr1: colors.fr1SolderMaskGreen,
+  fr4: colors.fr4SolderMaskGreen
 };
 
 // src/geoms/create-board-with-outline.ts
@@ -29800,7 +29807,7 @@ var createSimplifiedBoardGeom = (circuitJson) => {
       center: [boardOrPanel.center.x, boardOrPanel.center.y, 0]
     });
   }
-  const material = boardMaterialColors["material" in boardOrPanel ? boardOrPanel.material ?? "fr4" : "fr4"] ?? colors.fr4Green;
+  const material = boardMaterialColors["material" in boardOrPanel ? boardOrPanel.material ?? "fr4" : "fr4"] ?? colors.fr4Tan;
   return [(0, import_colors.colorize)(material, boardGeom)];
 };
 var createBoardGeomFromCircuitJson = (circuitJson, opts = {}) => {
@@ -31357,7 +31364,7 @@ var BoardGeomBuilder = class {
         pourGeom = (0, import_booleans6.intersect)(this.boardClipGeom, pourGeom);
       }
       const covered = pour.covered_with_solder_mask !== false;
-      const pourMaterialColor = covered ? tracesMaterialColors[this.board.material] ?? colors.fr4GreenSolderWithMask : colors.copper;
+      const pourMaterialColor = covered ? tracesMaterialColors[this.board.material] ?? colors.fr4TracesWithoutMaskTan : colors.copper;
       const coloredPourGeom = (0, import_colors7.colorize)(pourMaterialColor, pourGeom);
       this.copperPourGeoms.push(coloredPourGeom);
     }
@@ -31675,7 +31682,7 @@ var BoardGeomBuilder = class {
           });
           traceGeom = (0, import_booleans6.subtract)(traceGeom, cuttingCylinder);
         }
-        const tracesMaterialColor = tracesMaterialColors[this.board.material] ?? colors.fr4GreenSolderWithMask;
+        const tracesMaterialColor = tracesMaterialColors[this.board.material] ?? colors.fr4TracesWithoutMaskTan;
         if (this.boardClipGeom) {
           traceGeom = (0, import_booleans6.intersect)(this.boardClipGeom, traceGeom);
         }
@@ -31800,7 +31807,7 @@ var BoardGeomBuilder = class {
   }
   finalize() {
     if (!this.boardGeom) return;
-    const boardMaterialColor = boardMaterialColors[this.board.material] ?? colors.fr4Green;
+    const boardMaterialColor = boardMaterialColors[this.board.material] ?? colors.fr4Tan;
     this.boardGeom = (0, import_colors7.colorize)(boardMaterialColor, this.boardGeom);
     this.finalGeoms = [
       this.boardGeom,
@@ -32605,7 +32612,7 @@ function processCopperPoursForManifold(Manifold, CrossSection, circuitJson, pcbT
         pourOp = clipped;
       }
       const covered = pour.covered_with_solder_mask !== false;
-      const pourColorArr = covered ? tracesMaterialColors[boardMaterial] ?? colors.fr4GreenSolderWithMask : colors.copper;
+      const pourColorArr = covered ? tracesMaterialColors[boardMaterial] ?? colors.fr4TracesWithoutMaskTan : colors.copper;
       const pourColor = new THREE19.Color(...pourColorArr);
       const threeGeom = manifoldMeshToThreeGeometry(pourOp.getMesh());
       copperPourGeoms.push({
@@ -34142,8 +34149,7 @@ function createSoldermaskTextureForLayer({
         rawRadius
       ) * traceTextureResolution;
       const ccwRotation = pad2.ccw_rotation || 0;
-      const rotationRadians = ccwRotation * (Math.PI / 180);
-      const rotation2 = layer === "bottom" ? -rotationRadians : rotationRadians;
+      const rotation2 = -ccwRotation * (Math.PI / 180);
       ctx.save();
       ctx.translate(canvasX, canvasY);
       ctx.rotate(rotation2);
@@ -34179,10 +34185,8 @@ function createSoldermaskTextureForLayer({
       const width10 = (hole.outer_width ?? hole.outer_diameter ?? hole.hole_width) * traceTextureResolution;
       const height10 = (hole.outer_height ?? hole.outer_diameter ?? hole.hole_height) * traceTextureResolution;
       const radius = Math.min(width10, height10) / 2;
-      let rotation2 = hole.ccw_rotation || 0;
-      if (layer === "bottom") {
-        rotation2 = -rotation2;
-      }
+      const ccwRotationDeg = hole.ccw_rotation || 0;
+      const rotation2 = -ccwRotationDeg;
       if (rotation2) {
         ctx.save();
         ctx.translate(canvasX, canvasY);
@@ -34207,10 +34211,8 @@ function createSoldermaskTextureForLayer({
       const height10 = (hole.outer_height ?? hole.outer_diameter ?? hole.hole_height) * traceTextureResolution;
       const radiusX = width10 / 2;
       const radiusY = height10 / 2;
-      let rotation2 = hole.ccw_rotation || 0;
-      if (layer === "bottom") {
-        rotation2 = -rotation2;
-      }
+      const ccwRotationDeg = hole.ccw_rotation || 0;
+      const rotation2 = -ccwRotationDeg;
       if (rotation2) {
         ctx.save();
         ctx.translate(canvasX, canvasY);
@@ -34234,10 +34236,8 @@ function createSoldermaskTextureForLayer({
         const width10 = (hole.outer_width ?? hole.outer_diameter ?? hole.hole_width) * traceTextureResolution;
         const height10 = (hole.outer_height ?? hole.outer_diameter ?? hole.hole_height) * traceTextureResolution;
         const radius = Math.min(width10, height10) / 2;
-        let rotation2 = hole.ccw_rotation || 0;
-        if (layer === "bottom") {
-          rotation2 = -rotation2;
-        }
+        const ccwRotationDeg = hole.ccw_rotation || 0;
+        const rotation2 = -ccwRotationDeg;
         if (rotation2) {
           ctx.save();
           ctx.translate(adjustedCanvasX, adjustedCanvasY);
@@ -34262,10 +34262,8 @@ function createSoldermaskTextureForLayer({
         const height10 = (hole.outer_height ?? hole.outer_diameter ?? hole.hole_height) * traceTextureResolution;
         const radiusX = width10 / 2;
         const radiusY = height10 / 2;
-        let rotation2 = hole.ccw_rotation || 0;
-        if (rotation2) {
-          rotation2 = -rotation2;
-        }
+        const ccwRotationDeg = hole.ccw_rotation || 0;
+        const rotation2 = -ccwRotationDeg;
         if (rotation2) {
           ctx.save();
           ctx.translate(adjustedCanvasX, adjustedCanvasY);
@@ -34330,10 +34328,8 @@ function createSoldermaskTextureForLayer({
         hole.rect_pad_height ?? hole.hole_height ?? 0,
         rawRadius
       ) * traceTextureResolution;
-      let rotation2 = hole.ccw_rotation || 0;
-      if (layer === "bottom") {
-        rotation2 = -rotation2;
-      }
+      const ccwRotationDeg = hole.ccw_rotation || 0;
+      const rotation2 = -ccwRotationDeg;
       if (rotation2) {
         ctx.save();
         ctx.translate(canvasX, canvasY);
@@ -34377,10 +34373,8 @@ function createSoldermaskTextureForLayer({
       const width10 = hole.hole_width * traceTextureResolution;
       const height10 = hole.hole_height * traceTextureResolution;
       const radius = Math.min(width10, height10) / 2;
-      let rotation2 = (hole.ccw_rotation || 0) * (Math.PI / 180);
-      if (layer === "bottom") {
-        rotation2 = -rotation2;
-      }
+      const ccwRotationDeg = hole.ccw_rotation || 0;
+      const rotation2 = -ccwRotationDeg * (Math.PI / 180);
       if (rotation2) {
         ctx.save();
         ctx.translate(canvasX, canvasY);
@@ -34444,7 +34438,7 @@ function createSoldermaskTextureForLayer({
         if (cutout.rotation) {
           ctx.save();
           ctx.translate(canvasX, canvasY);
-          const rotation2 = layer === "bottom" ? -cutout.rotation * (Math.PI / 180) : cutout.rotation * (Math.PI / 180);
+          const rotation2 = -cutout.rotation * (Math.PI / 180);
           ctx.rotate(rotation2);
           if (borderRadius > 0) {
             ctx.beginPath();
@@ -34816,7 +34810,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
       if (boardManifold) {
         const boardThreeMesh = boardManifold.getMesh();
         const finalBoardGeom = manifoldMeshToThreeGeometry(boardThreeMesh);
-        const matColorArray = boardMaterialColors[boardData.material] ?? colors.fr4Green;
+        const matColorArray = boardMaterialColors[boardData.material] ?? colors.fr4Tan;
         currentGeoms.board = {
           geometry: finalBoardGeom,
           color: new THREE26.Color(
@@ -34849,20 +34843,36 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
       );
       currentGeoms.copperPours = copperPourGeoms;
       setGeoms(currentGeoms);
-      const traceColorArr = tracesMaterialColors[boardData.material] ?? colors.fr4GreenSolderWithMask;
-      const traceColor = `rgb(${Math.round(traceColorArr[0] * 255)}, ${Math.round(traceColorArr[1] * 255)}, ${Math.round(traceColorArr[2] * 255)})`;
+      const traceColorWithoutMaskArr = colors.fr4TracesWithoutMaskTan;
+      const traceColorWithoutMask = `rgb(${Math.round(traceColorWithoutMaskArr[0] * 255)}, ${Math.round(traceColorWithoutMaskArr[1] * 255)}, ${Math.round(traceColorWithoutMaskArr[2] * 255)})`;
       currentTextures.topTrace = createTraceTextureForLayer({
         layer: "top",
         circuitJson,
         boardData,
-        traceColor,
+        traceColor: traceColorWithoutMask,
         traceTextureResolution: TRACE_TEXTURE_RESOLUTION
       });
       currentTextures.bottomTrace = createTraceTextureForLayer({
         layer: "bottom",
         circuitJson,
         boardData,
-        traceColor,
+        traceColor: traceColorWithoutMask,
+        traceTextureResolution: TRACE_TEXTURE_RESOLUTION
+      });
+      const traceColorWithMaskArr = colors.fr4TracesWithMaskGreen;
+      const traceColorWithMask = `rgb(${Math.round(traceColorWithMaskArr[0] * 255)}, ${Math.round(traceColorWithMaskArr[1] * 255)}, ${Math.round(traceColorWithMaskArr[2] * 255)})`;
+      currentTextures.topTraceWithMask = createTraceTextureForLayer({
+        layer: "top",
+        circuitJson,
+        boardData,
+        traceColor: traceColorWithMask,
+        traceTextureResolution: TRACE_TEXTURE_RESOLUTION
+      });
+      currentTextures.bottomTraceWithMask = createTraceTextureForLayer({
+        layer: "bottom",
+        circuitJson,
+        boardData,
+        traceColor: traceColorWithMask,
         traceTextureResolution: TRACE_TEXTURE_RESOLUTION
       });
       const silkscreenColor = "rgb(255,255,255)";
@@ -34880,7 +34890,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
         silkscreenColor,
         traceTextureResolution: TRACE_TEXTURE_RESOLUTION
       });
-      const soldermaskColorArr = tracesMaterialColors[boardData.material] ?? colors.fr4GreenSolderWithMask;
+      const soldermaskColorArr = soldermaskColors[boardData.material] ?? colors.fr4SolderMaskGreen;
       const soldermaskColor = `rgb(${Math.round(soldermaskColorArr[0] * 255)}, ${Math.round(soldermaskColorArr[1] * 255)}, ${Math.round(soldermaskColorArr[2] * 255)})`;
       currentTextures.topSoldermask = createSoldermaskTextureForLayer({
         layer: "top",
@@ -35039,6 +35049,13 @@ function createTextureMeshes(textures, boardData, pcbThickness) {
     "trace"
   );
   if (topTraceMesh) meshes.push(topTraceMesh);
+  const topTraceWithMaskMesh = createTexturePlane(
+    textures.topTraceWithMask,
+    pcbThickness / 2 + BOARD_SURFACE_OFFSET.traces,
+    false,
+    "trace-with-mask"
+  );
+  if (topTraceWithMaskMesh) meshes.push(topTraceWithMaskMesh);
   const topSilkscreenMesh = createTexturePlane(
     textures.topSilkscreen,
     pcbThickness / 2 + 0.017,
@@ -35055,6 +35072,13 @@ function createTextureMeshes(textures, boardData, pcbThickness) {
     "trace"
   );
   if (bottomTraceMesh) meshes.push(bottomTraceMesh);
+  const bottomTraceWithMaskMesh = createTexturePlane(
+    textures.bottomTraceWithMask,
+    -pcbThickness / 2 - BOARD_SURFACE_OFFSET.traces,
+    true,
+    "trace-with-mask"
+  );
+  if (bottomTraceWithMaskMesh) meshes.push(bottomTraceWithMaskMesh);
   const bottomSilkscreenMesh = createTexturePlane(
     textures.bottomSilkscreen,
     -pcbThickness / 2 - 0.017,
@@ -35118,10 +35142,14 @@ var BoardMeshes = ({
     });
     textureMeshes.forEach((mesh) => {
       let shouldShow = true;
-      if (mesh.name.includes("top-trace")) {
-        shouldShow = visibility.topCopper;
-      } else if (mesh.name.includes("bottom-trace")) {
-        shouldShow = visibility.bottomCopper;
+      if (mesh.name.includes("top-trace-texture-plane") && !mesh.name.includes("with-mask")) {
+        shouldShow = visibility.topCopper && !visibility.topMask;
+      } else if (mesh.name.includes("top-trace-with-mask")) {
+        shouldShow = visibility.topCopper && visibility.topMask;
+      } else if (mesh.name.includes("bottom-trace-texture-plane") && !mesh.name.includes("with-mask")) {
+        shouldShow = visibility.bottomCopper && !visibility.bottomMask;
+      } else if (mesh.name.includes("bottom-trace-with-mask")) {
+        shouldShow = visibility.bottomCopper && visibility.bottomMask;
       } else if (mesh.name.includes("top-silkscreen")) {
         shouldShow = visibility.topSilkscreen;
       } else if (mesh.name.includes("bottom-silkscreen")) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/3d-viewer",
-  "version": "0.0.460",
+  "version": "0.0.462",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "type": "module",