@tscircuit/3d-viewer 0.0.529 → 0.0.531

package/dist/index.js

@@ -28769,7 +28769,7 @@ import * as THREE16 from "three";
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.528",
+  version: "0.0.530",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -28799,7 +28799,7 @@ var package_default = {
     "@jscad/regl-renderer": "^2.6.12",
     "@jscad/stl-serializer": "^2.1.20",
     "circuit-json": "^0.0.391",
-    "circuit-to-canvas": "^0.0.89",
+    "circuit-to-canvas": "^0.0.90",
     "react-hot-toast": "^2.6.0",
     three: "^0.165.0",
     "three-stdlib": "^2.36.0",
@@ -31915,10 +31915,44 @@ function createPanelOutlineTextureForLayer({
 
 // src/utils/trace-texture.ts
 import * as THREE21 from "three";
-import { su as su7 } from "@tscircuit/circuit-json-util";
+import { CircuitToCanvasDrawer } from "circuit-to-canvas";
+import { getElementRenderLayers, su as su7 } from "@tscircuit/circuit-json-util";
+
+// src/utils/trace-layer-segments.ts
 function isWireRoutePoint(point) {
   return point && point.route_type === "wire" && typeof point.layer === "string" && typeof point.width === "number";
 }
+function splitTraceIntoLayerSegments(trace, layer) {
+  const segments = [];
+  let currentRoute = [];
+  const pushCurrentSegment = () => {
+    if (currentRoute.length < 2) {
+      currentRoute = [];
+      return;
+    }
+    segments.push({
+      ...trace,
+      pcb_trace_id: `${trace.pcb_trace_id}_${layer}_${segments.length}`,
+      route: currentRoute
+    });
+    currentRoute = [];
+  };
+  for (const point of trace.route) {
+    if (!isWireRoutePoint(point)) {
+      pushCurrentSegment();
+      continue;
+    }
+    if (point.layer !== layer) {
+      pushCurrentSegment();
+      continue;
+    }
+    currentRoute.push(point);
+  }
+  pushCurrentSegment();
+  return segments;
+}
+
+// src/utils/trace-texture.ts
 function createTraceTextureForLayer({
   layer,
   circuitJson,
@@ -31927,14 +31961,15 @@ function createTraceTextureForLayer({
   traceTextureResolution
 }) {
   const pcbTraces = su7(circuitJson).pcb_trace.list();
-  const allPcbVias = su7(circuitJson).pcb_via.list();
-  const allPcbPlatedHoles = su7(
-    circuitJson
-  ).pcb_plated_hole.list();
-  const tracesOnLayer = pcbTraces.filter(
-    (t) => t.route.some((p) => isWireRoutePoint(p) && p.layer === layer)
-  );
+  const pcbVias = su7(circuitJson).pcb_via.list();
+  const pcbPlatedHoles = su7(circuitJson).pcb_plated_hole.list();
+  const pcbRenderLayer = layer === "top" ? "top_copper" : "bottom_copper";
+  const tracesOnLayer = pcbTraces.filter((trace) => getElementRenderLayers(trace).includes(pcbRenderLayer)).flatMap((trace) => splitTraceIntoLayerSegments(trace, layer));
   if (tracesOnLayer.length === 0) return null;
+  const platedHolesOnLayer = pcbPlatedHoles.filter(
+    (hole) => hole.layers.includes(layer)
+  );
+  const elementsToDraw = [...tracesOnLayer, ...pcbVias, ...platedHolesOnLayer];
   const boardOutlineBounds = calculateOutlineBounds(boardData);
   const canvas = document.createElement("canvas");
   const canvasWidth = Math.floor(
@@ -31951,82 +31986,51 @@ function createTraceTextureForLayer({
     ctx.translate(0, canvasHeight);
     ctx.scale(1, -1);
   }
-  tracesOnLayer.forEach((trace) => {
-    let firstPoint = true;
-    ctx.beginPath();
-    ctx.strokeStyle = traceColor;
-    ctx.lineCap = "round";
-    ctx.lineJoin = "round";
-    let currentLineWidth = 0;
-    for (const point of trace.route) {
-      if (!isWireRoutePoint(point) || point.layer !== layer) {
-        if (!firstPoint) ctx.stroke();
-        firstPoint = true;
-        continue;
-      }
-      const pcbX = point.x;
-      const pcbY = point.y;
-      currentLineWidth = point.width * traceTextureResolution;
-      ctx.lineWidth = currentLineWidth;
-      const canvasX = (pcbX - boardOutlineBounds.minX) * traceTextureResolution;
-      const canvasY = (boardOutlineBounds.maxY - pcbY) * traceTextureResolution;
-      if (firstPoint) {
-        ctx.moveTo(canvasX, canvasY);
-        firstPoint = false;
-      } else {
-        ctx.lineTo(canvasX, canvasY);
+  const transparent = "rgba(0,0,0,0)";
+  const drawer = new CircuitToCanvasDrawer(ctx);
+  drawer.configure({
+    colorOverrides: {
+      copper: {
+        top: traceColor,
+        bottom: traceColor,
+        inner1: traceColor,
+        inner2: traceColor,
+        inner3: traceColor,
+        inner4: traceColor,
+        inner5: traceColor,
+        inner6: traceColor
+      },
+      copperPour: { top: transparent, bottom: transparent },
+      drill: transparent,
+      boardOutline: transparent,
+      substrate: transparent,
+      keepout: transparent,
+      fabricationNote: transparent,
+      courtyard: { top: transparent, bottom: transparent },
+      silkscreen: { top: transparent, bottom: transparent },
+      soldermask: { top: transparent, bottom: transparent },
+      soldermaskWithCopperUnderneath: {
+        top: transparent,
+        bottom: transparent
+      },
+      soldermaskOverCopper: {
+        top: transparent,
+        bottom: transparent
       }
     }
-    if (!firstPoint) {
-      ctx.stroke();
-    }
   });
-  ctx.globalCompositeOperation = "destination-out";
-  ctx.fillStyle = "black";
-  allPcbVias.forEach((via) => {
-    const canvasX = (via.x - boardOutlineBounds.minX) * traceTextureResolution;
-    const canvasY = (boardOutlineBounds.maxY - via.y) * traceTextureResolution;
-    const canvasRadius = via.outer_diameter / 2 * traceTextureResolution;
-    ctx.beginPath();
-    ctx.arc(canvasX, canvasY, canvasRadius, 0, 2 * Math.PI, false);
-    ctx.fill();
+  drawer.setCameraBounds({
+    minX: boardOutlineBounds.minX,
+    maxX: boardOutlineBounds.maxX,
+    minY: boardOutlineBounds.minY,
+    maxY: boardOutlineBounds.maxY
   });
-  allPcbPlatedHoles.forEach((ph) => {
-    if (ph.layers.includes(layer) && ph.shape === "circle") {
-      const canvasX = (ph.x - boardOutlineBounds.minX) * traceTextureResolution;
-      const canvasY = (boardOutlineBounds.maxY - ph.y) * traceTextureResolution;
-      const canvasRadius = ph.outer_diameter / 2 * traceTextureResolution;
-      ctx.beginPath();
-      ctx.arc(canvasX, canvasY, canvasRadius, 0, 2 * Math.PI, false);
-      ctx.fill();
-    } else if (ph.layers.includes(layer) && ph.shape === "rotated_pill_hole_with_rect_pad") {
-      const canvasX = (ph.x - boardOutlineBounds.minX) * traceTextureResolution;
-      const canvasY = (boardOutlineBounds.maxY - ph.y) * traceTextureResolution;
-      const padWidth = (ph.rect_pad_width ?? ph.hole_width ?? 0) * traceTextureResolution;
-      const padHeight = (ph.rect_pad_height ?? ph.hole_height ?? 0) * traceTextureResolution;
-      const rectCcwRotationDeg = ph.rect_ccw_rotation || 0;
-      const rectRotation = -rectCcwRotationDeg;
-      if (rectRotation) {
-        ctx.save();
-        ctx.translate(canvasX, canvasY);
-        ctx.rotate(rectRotation * Math.PI / 180);
-        ctx.beginPath();
-        ctx.rect(-padWidth / 2, -padHeight / 2, padWidth, padHeight);
-        ctx.fill();
-        ctx.restore();
-      } else {
-        ctx.beginPath();
-        ctx.rect(
-          canvasX - padWidth / 2,
-          canvasY - padHeight / 2,
-          padWidth,
-          padHeight
-        );
-        ctx.fill();
-      }
-    }
+  drawer.drawElements(elementsToDraw, {
+    layers: [pcbRenderLayer],
+    drawSoldermask: false,
+    drawSoldermaskTop: false,
+    drawSoldermaskBottom: false
   });
-  ctx.globalCompositeOperation = "source-over";
   const texture = new THREE21.CanvasTexture(canvas);
   texture.generateMipmaps = true;
   texture.minFilter = THREE21.LinearMipmapLinearFilter;
@@ -32040,7 +32044,7 @@ function createTraceTextureForLayer({
 import * as THREE22 from "three";
 
 // src/textures/copper-text/copper-text-drawing.ts
-import { CircuitToCanvasDrawer } from "circuit-to-canvas";
+import { CircuitToCanvasDrawer as CircuitToCanvasDrawer2 } from "circuit-to-canvas";
 var setDrawerBounds = (drawer, bounds) => {
   drawer.setCameraBounds({
     minX: bounds.minX,
@@ -32057,7 +32061,7 @@ var drawCopperTextLayer = ({
   copperColor
 }) => {
   const renderLayer = layer === "top" ? "top_copper" : "bottom_copper";
-  const drawer = new CircuitToCanvasDrawer(ctx);
+  const drawer = new CircuitToCanvasDrawer2(ctx);
   drawer.configure({
     colorOverrides: {
       copper: {
@@ -32085,7 +32089,7 @@ var drawCopperTextLayer = ({
   maskCanvas.height = ctx.canvas.height;
   const maskCtx = maskCanvas.getContext("2d");
   if (!maskCtx) return;
-  const knockoutCutoutDrawer = new CircuitToCanvasDrawer(maskCtx);
+  const knockoutCutoutDrawer = new CircuitToCanvasDrawer2(maskCtx);
   knockoutCutoutDrawer.configure({
     colorOverrides: {
       copper: {
@@ -32161,7 +32165,7 @@ function createCopperTextTextureForLayer({
 import * as THREE23 from "three";
 
 // src/textures/fabrication-note/fabrication-note-drawing.ts
-import { CircuitToCanvasDrawer as CircuitToCanvasDrawer2 } from "circuit-to-canvas";
+import { CircuitToCanvasDrawer as CircuitToCanvasDrawer3 } from "circuit-to-canvas";
 
 // src/utils/units.ts
 var MM_PER_INCH = 25.4;
@@ -32259,7 +32263,7 @@ var drawFabricationNoteLayer = ({
 }) => {
   const renderLayer = `${layer}_fabrication_note`;
   const normalizedElements = elements.map(normalizeFabricationElement);
-  const drawer = new CircuitToCanvasDrawer2(ctx);
+  const drawer = new CircuitToCanvasDrawer3(ctx);
   drawer.configure({
     colorOverrides: {
       copper: {
@@ -32398,7 +32402,7 @@ function createFabricationNoteTextureForLayer({
 import * as THREE24 from "three";
 
 // src/textures/pcb-note/pcb-note-drawing.ts
-import { CircuitToCanvasDrawer as CircuitToCanvasDrawer3 } from "circuit-to-canvas";
+import { CircuitToCanvasDrawer as CircuitToCanvasDrawer4 } from "circuit-to-canvas";
 var TRANSPARENT2 = "rgba(0,0,0,0)";
 var setDrawerBounds3 = (drawer, bounds) => {
   drawer.setCameraBounds({
@@ -32477,7 +32481,7 @@ var drawPcbNoteLayer = ({
   elements
 }) => {
   const normalizedElements = elements.map(normalizePcbNoteElement);
-  const drawer = new CircuitToCanvasDrawer3(ctx);
+  const drawer = new CircuitToCanvasDrawer4(ctx);
   drawer.configure({
     colorOverrides: {
       copper: {
@@ -32559,7 +32563,7 @@ function createPcbNoteTextureForLayer({
 import * as THREE25 from "three";
 
 // src/textures/silkscreen/silkscreen-drawing.ts
-import { CircuitToCanvasDrawer as CircuitToCanvasDrawer4 } from "circuit-to-canvas";
+import { CircuitToCanvasDrawer as CircuitToCanvasDrawer5 } from "circuit-to-canvas";
 var FABRICATION_NOTE_COLOR2 = "rgb(255,243,204)";
 var TRANSPARENT3 = "rgba(0,0,0,0)";
 var setDrawerBounds4 = (drawer, bounds) => {
@@ -32578,7 +32582,7 @@ var drawSilkscreenLayer = ({
   silkscreenColor
 }) => {
   const renderLayer = layer === "top" ? "top_silkscreen" : "bottom_silkscreen";
-  const drawer = new CircuitToCanvasDrawer4(ctx);
+  const drawer = new CircuitToCanvasDrawer5(ctx);
   drawer.configure({
     colorOverrides: {
       copper: {
@@ -32678,7 +32682,7 @@ function createSilkscreenTextureForLayer({
 import * as THREE26 from "three";
 
 // src/textures/soldermask/soldermask-drawing.ts
-import { CircuitToCanvasDrawer as CircuitToCanvasDrawer5 } from "circuit-to-canvas";
+import { CircuitToCanvasDrawer as CircuitToCanvasDrawer6 } from "circuit-to-canvas";
 var toRgb = (colorArr) => {
   const [r = 0, g = 0, b = 0] = colorArr;
   return `rgb(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(
@@ -32714,7 +32718,7 @@ var drawSoldermaskLayer = ({
 }) => {
   const palette = getSoldermaskPalette(boardMaterial);
   const copperRenderLayer = layer === "top" ? "top_copper" : "bottom_copper";
-  const drawer = new CircuitToCanvasDrawer5(ctx);
+  const drawer = new CircuitToCanvasDrawer6(ctx);
   drawer.configure({
     colorOverrides: {
       copper: {
@@ -32758,7 +32762,7 @@ var drawSoldermaskLayer = ({
   if (uncoveredPours.length > 0) {
     ctx.save();
     ctx.globalCompositeOperation = "destination-out";
-    const cutoutDrawer = new CircuitToCanvasDrawer5(ctx);
+    const cutoutDrawer = new CircuitToCanvasDrawer6(ctx);
     cutoutDrawer.configure({
       colorOverrides: {
         copper: {
@@ -32820,7 +32824,7 @@ function createSoldermaskTextureForLayer({
 import * as THREE27 from "three";
 
 // src/textures/through-hole/through-hole-drawing.ts
-import { CircuitToCanvasDrawer as CircuitToCanvasDrawer6 } from "circuit-to-canvas";
+import { CircuitToCanvasDrawer as CircuitToCanvasDrawer7 } from "circuit-to-canvas";
 var setDrawerBounds6 = (drawer, bounds) => {
   drawer.setCameraBounds({
     minX: bounds.minX,
@@ -32838,7 +32842,7 @@ var drawThroughHoleLayer = ({
 }) => {
   const renderLayer = layer === "top" ? "top_copper" : "bottom_copper";
   const transparent = "rgba(0,0,0,0)";
-  const drawer = new CircuitToCanvasDrawer6(ctx);
+  const drawer = new CircuitToCanvasDrawer7(ctx);
   drawer.configure({
     colorOverrides: {
       copper: {
@@ -32966,8 +32970,7 @@ function createCombinedBoardTextures({
   traceTextureResolution,
   visibility
 }) {
-  const traceColorWithMask = toRgb2(colors.fr4TracesWithMaskGreen);
-  const traceColorWithoutMask = toRgb2(colors.fr4TracesWithoutMaskTan);
+  const traceColor = toRgb2(colors.copper);
   const silkscreenColor = "rgb(255,255,255)";
   const copperColor = toRgb2(colors.copper);
   const showBoardBody = visibility?.boardBody ?? true;
@@ -32985,7 +32988,7 @@ function createCombinedBoardTextures({
       layer,
       circuitJson,
       boardData,
-      traceColor: showMask ? traceColorWithMask : traceColorWithoutMask,
+      traceColor,
       traceTextureResolution
     }) : null;
     const copperTextTexture = showCopper ? createCopperTextTextureForLayer({
@@ -33060,7 +33063,7 @@ function createCombinedBoardTextures({
 
 // src/textures/create-copper-pour-texture-for-layer.ts
 import * as THREE29 from "three";
-import { CircuitToCanvasDrawer as CircuitToCanvasDrawer7 } from "circuit-to-canvas";
+import { CircuitToCanvasDrawer as CircuitToCanvasDrawer8 } from "circuit-to-canvas";
 
 // src/geoms/brep-converter.ts
 var import_primitives7 = __toESM(require_primitives(), 1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/3d-viewer",
-  "version": "0.0.529",
+  "version": "0.0.531",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "type": "module",
@@ -30,7 +30,7 @@
     "@jscad/regl-renderer": "^2.6.12",
     "@jscad/stl-serializer": "^2.1.20",
     "circuit-json": "^0.0.391",
-    "circuit-to-canvas": "^0.0.89",
+    "circuit-to-canvas": "^0.0.90",
     "react-hot-toast": "^2.6.0",
     "three": "^0.165.0",
     "three-stdlib": "^2.36.0",