@tscircuit/3d-viewer 0.0.633 → 0.0.635

package/dist/index.js

@@ -20161,7 +20161,7 @@ var JscadModel = ({
   );
 };
 
-// src/hooks/use-global-obj-loader.ts
+// src/hooks/use-global-model-loader.ts
 import { useEffect as useEffect10, useState as useState8 } from "react";
 
 // src/utils/vrml.ts
@@ -20183,21 +20183,24 @@ async function loadVrml(url) {
   return loader.parse(sanitizeVrmlIdentifiers(text), url);
 }
 
-// src/hooks/use-global-obj-loader.ts
-import { MTLLoader, OBJLoader } from "three-stdlib";
-if (typeof window !== "undefined" && !window.TSCIRCUIT_OBJ_LOADER_CACHE) {
-  window.TSCIRCUIT_OBJ_LOADER_CACHE = /* @__PURE__ */ new Map();
+// src/hooks/use-global-model-loader.ts
+import { Mesh as Mesh8, MeshStandardMaterial as MeshStandardMaterial4 } from "three";
+import { MTLLoader, OBJLoader, STLLoader } from "three-stdlib";
+if (typeof window !== "undefined" && !window.TSCIRCUIT_MODEL_LOADER_CACHE) {
+  window.TSCIRCUIT_MODEL_LOADER_CACHE = /* @__PURE__ */ new Map();
 }
-function useGlobalObjLoader(url) {
+function useGlobalModelLoader(url, modelType) {
   const [obj, setObj] = useState8(null);
   useEffect10(() => {
     if (!url) return;
     const cleanUrl = url.replace(/&cachebust_origin=$/, "");
-    const cache = window.TSCIRCUIT_OBJ_LOADER_CACHE;
+    const cachesByModelType = window.TSCIRCUIT_MODEL_LOADER_CACHE;
+    const cache = cachesByModelType.get(modelType) ?? /* @__PURE__ */ new Map();
+    cachesByModelType.set(modelType, cache);
     let hasUrlChanged = false;
-    async function loadAndParseObj() {
+    async function loadAndParseModel() {
       try {
-        if (cleanUrl.endsWith(".wrl")) {
+        if (modelType === "wrl") {
           return await loadVrml(cleanUrl);
         }
         const response = await fetch(cleanUrl);
@@ -20206,6 +20209,11 @@ function useGlobalObjLoader(url) {
             `Failed to fetch "${cleanUrl}": ${response.status} ${response.statusText}`
           );
         }
+        if (modelType === "stl") {
+          const geometry = new STLLoader().parse(await response.arrayBuffer());
+          const material = new MeshStandardMaterial4({ color: 8947848 });
+          return new Mesh8(geometry, material);
+        }
         const text = await response.text();
         const mtlContentArr = text.match(/newmtl[\s\S]*?endmtl/g);
         const objLoader = new OBJLoader();
@@ -20236,7 +20244,7 @@ function useGlobalObjLoader(url) {
           return result.clone();
         });
       }
-      const promise = loadAndParseObj().then((result) => {
+      const promise = loadAndParseModel().then((result) => {
         if (result instanceof Error) {
           return result;
         }
@@ -20255,7 +20263,7 @@ function useGlobalObjLoader(url) {
     return () => {
       hasUrlChanged = true;
     };
-  }, [url]);
+  }, [url, modelType]);
   return obj;
 }
 
@@ -20265,6 +20273,7 @@ import * as THREE13 from "three";
 import { jsx as jsx10 } from "react/jsx-runtime";
 function MixedStlModel({
   url,
+  modelType,
   position,
   rotation,
   modelOffset = [0, 0, 0],
@@ -20278,7 +20287,7 @@ function MixedStlModel({
   scale: scale11,
   isTranslucent = false
 }) {
-  const obj = useGlobalObjLoader(url);
+  const obj = useGlobalModelLoader(url, modelType);
   const model = useMemo8(() => {
     if (obj && !(obj instanceof Error)) {
       obj.traverse((child) => {
@@ -20352,11 +20361,11 @@ import {
   Color as Color3,
   Float32BufferAttribute,
   Group as Group5,
-  Mesh as Mesh9,
-  MeshStandardMaterial as MeshStandardMaterial5
+  Mesh as Mesh10,
+  MeshStandardMaterial as MeshStandardMaterial6
 } from "three";
 var DEFAULT_COLOR = new Color3(0.82, 0.82, 0.82);
-var createMaterial = (color) => new MeshStandardMaterial5({
+var createMaterial = (color) => new MeshStandardMaterial6({
   color: color ? new Color3(color[0], color[1], color[2]) : DEFAULT_COLOR
 });
 function applyFaceColorGroups(geometry, mesh) {
@@ -20426,7 +20435,7 @@ function occtMeshesToGroup(meshes) {
     geometry.setIndex(indices);
     geometry.clearGroups();
     const materials2 = applyFaceColorGroups(geometry, mesh);
-    const threeMesh = new Mesh9(
+    const threeMesh = new Mesh10(
       geometry,
       materials2.length > 1 ? materials2 : materials2[0]
     );
@@ -21096,6 +21105,7 @@ var AnyCadComponent = ({
           MixedStlModel,
           {
             url,
+            modelType: meshModelType,
             position: adjustedPosition,
             rotation: rotationOffset,
             modelOffset: modelTransform.modelPosition,
@@ -21111,7 +21121,7 @@ var AnyCadComponent = ({
             isHovered,
             isTranslucent
           },
-          `${cad_component.cad_component_id}-mixed-${url}`
+          `${cad_component.cad_component_id}-mixed-${meshModelType}-${url}`
         )
       );
     }
@@ -22051,7 +22061,7 @@ import * as THREE30 from "three";
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.632",
+  version: "0.0.634",
   repository: {
     type: "git",
     url: "https://github.com/tscircuit/3d-viewer"
@@ -22119,8 +22129,8 @@ var package_default = {
     "@tscircuit/alphabet": "^0.0.25",
     "@tscircuit/circuit-json-util": "^0.0.119",
     "@tscircuit/copper-pour-solver": "^0.0.29",
-    "@tscircuit/core": "^0.0.2188",
-    "@tscircuit/props": "^0.0.705",
+    "@tscircuit/core": "^0.0.2195",
+    "@tscircuit/props": "^0.0.707",
     "@tscircuit/solver-utils": "^0.0.4",
     "@types/debug": "^4.1.13",
     "@types/jsdom": "^21.1.7",
@@ -24039,46 +24049,45 @@ var createPillPrism = (width, height, depth) => {
   });
   return (0, import_booleans.union)(rect, firstCap, secondCap);
 };
-var createHoleWithPolygonPadHoleGeom = (hole, height, options = {}) => {
+var createHoleWithPolygonPadHoleGeom = (hole, depth, options = {}) => {
   const holeShape = hole.hole_shape || "circle";
   const sizeDelta = options.sizeDelta ?? 0;
   const offsetX = hole.hole_offset_x || 0;
   const offsetY = hole.hole_offset_y || 0;
-  const center = [
-    hole.x + offsetX,
-    hole.y + offsetY,
-    0
-  ];
+  let drill;
   if (holeShape === "circle") {
     const diameter = Math.max((hole.hole_diameter ?? 0) + sizeDelta, M);
-    const radius = Math.max(diameter / 2, M / 2);
-    return (0, import_primitives3.cylinder)({ center, radius, height });
-  }
-  const baseWidth = hole.hole_width ?? hole.hole_diameter;
-  const baseHeight = hole.hole_height ?? hole.hole_diameter;
-  if (!baseWidth || !baseHeight) {
-    return null;
-  }
-  const width = Math.max(baseWidth + sizeDelta, M);
-  const heightVal = Math.max(baseHeight + sizeDelta, M);
-  if (holeShape === "oval") {
-    const ellipsePrism = createEllipsePrism(width, heightVal, height);
-    return (0, import_transforms2.translate)([center[0], center[1], 0], ellipsePrism);
-  }
-  if (holeShape === "pill" || holeShape === "rotated_pill") {
-    let pill = createPillPrism(width, heightVal, height);
-    if (!pill) return null;
-    const rotation = hole.ccw_rotation || 0;
-    if (rotation) {
-      pill = (0, import_transforms2.rotateZ)(rotation * Math.PI / 180, pill);
+    const radius = diameter / 2;
+    drill = (0, import_primitives3.cylinder)({ center: [0, 0, 0], radius, height: depth });
+  } else {
+    const baseWidth = hole.hole_width ?? hole.hole_diameter;
+    const baseHeight = hole.hole_height ?? hole.hole_diameter;
+    if (!baseWidth || !baseHeight) {
+      return null;
+    }
+    const shapeWidth = Math.max(baseWidth + sizeDelta, M);
+    const shapeHeight = Math.max(baseHeight + sizeDelta, M);
+    if (holeShape === "oval") {
+      drill = createEllipsePrism(shapeWidth, shapeHeight, depth);
+    } else if (holeShape === "pill" || holeShape === "rotated_pill") {
+      drill = createPillPrism(shapeWidth, shapeHeight, depth);
+    } else {
+      const fallbackDiameter = Math.max(
+        (hole.hole_diameter ?? baseWidth) + sizeDelta,
+        M
+      );
+      drill = (0, import_primitives3.cylinder)({
+        center: [0, 0, 0],
+        radius: fallbackDiameter / 2,
+        height: depth
+      });
     }
-    return (0, import_transforms2.translate)(center, pill);
   }
-  const fallbackDiameter = Math.max(
-    (hole.hole_diameter ?? baseWidth ?? baseHeight ?? M) + sizeDelta,
-    M
-  );
-  return (0, import_primitives3.cylinder)({ center, radius: fallbackDiameter / 2, height });
+  drill = (0, import_transforms2.translate)([offsetX, offsetY, 0], drill);
+  if (hole.ccw_rotation) {
+    drill = (0, import_transforms2.rotateZ)(hole.ccw_rotation * Math.PI / 180, drill);
+  }
+  return (0, import_transforms2.translate)([hole.x, hole.y, 0], drill);
 };
 
 // src/geoms/plated-hole.ts
@@ -24567,7 +24576,13 @@ var platedHole = (plated_hole, ctx, options = {}) => {
     const centerZ = 0;
     const createPolygonPad = (thickness, zCenter) => {
       const safeThickness = Math.max(thickness, M);
-      const extruded = (0, import_extrusions3.extrudeLinear)({ height: safeThickness }, polygon2d);
+      let extruded = (0, import_extrusions3.extrudeLinear)({ height: safeThickness }, polygon2d);
+      if (plated_hole.ccw_rotation) {
+        extruded = (0, import_transforms4.rotate)(
+          [0, 0, plated_hole.ccw_rotation * Math.PI / 180],
+          extruded
+        );
+      }
       return (0, import_transforms4.translate)(
         [plated_hole.x, plated_hole.y, zCenter - safeThickness / 2],
         extruded
@@ -25655,6 +25670,7 @@ function clearViaHolesFromSurface({
 }
 
 // src/textures/create-combined-board-textures.ts
+import { CircuitToCanvasDrawer as CircuitToCanvasDrawer12 } from "circuit-to-canvas";
 import * as THREE46 from "three";
 
 // src/utils/pad-texture.ts
@@ -27163,7 +27179,8 @@ var createCombinedTexture = ({
   boardData,
   traceTextureResolution,
   layer,
-  openViaHoles
+  openViaHoles,
+  drillElements
 }) => {
   const hasImage = textures.some((texture) => texture?.image);
   if (!hasImage) return null;
@@ -27185,6 +27202,30 @@ var createCombinedTexture = ({
     const image = texture.image;
     ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight);
   }
+  if (drillElements.length > 0) {
+    const apertureMask = document.createElement("canvas");
+    apertureMask.width = canvasWidth;
+    apertureMask.height = canvasHeight;
+    const maskCtx = apertureMask.getContext("2d");
+    if (maskCtx) {
+      maskCtx.fillStyle = "black";
+      maskCtx.fillRect(0, 0, canvasWidth, canvasHeight);
+      if (layer === "bottom") {
+        maskCtx.translate(0, canvasHeight);
+        maskCtx.scale(1, -1);
+      }
+      const drawer = new CircuitToCanvasDrawer12(maskCtx);
+      drawer.setCameraBounds(boardOutlineBounds);
+      drawer.drawElements(drillElements, {
+        layers: [layer === "top" ? "top_copper" : "bottom_copper"],
+        clearDrillHoles: true
+      });
+      ctx.save();
+      ctx.globalCompositeOperation = "destination-in";
+      ctx.drawImage(apertureMask, 0, 0, canvasWidth, canvasHeight);
+      ctx.restore();
+    }
+  }
   clearViaHolesFromSurface({
     ctx,
     vias: openViaHoles,
@@ -27254,6 +27295,9 @@ function createCombinedBoardTextures({
   const silkscreenColor = "rgb(255,255,255)";
   const copperColor = toRgb3(colors.copper);
   const showBoardBody = visibility?.boardBody ?? true;
+  const drillElements = circuitJson.filter(
+    (element) => element.type === "pcb_hole" || element.type === "pcb_plated_hole" || element.type === "pcb_cutout"
+  );
   const openViaHoles = getViaHolesAtExposedPads(
     circuitJson,
     boardData,
@@ -27348,6 +27392,7 @@ function createCombinedBoardTextures({
     }) : null;
     const boardTexture = createCombinedTexture({
       openViaHoles,
+      drillElements,
       textures: [
         copperPourTexture,
         traceTexture,
@@ -27976,7 +28021,7 @@ function JscadBoardTextures({
 // src/three-components/STLModel.tsx
 import { useState as useState18, useEffect as useEffect29, useMemo as useMemo22 } from "react";
 import * as THREE50 from "three";
-import { STLLoader } from "three-stdlib";
+import { STLLoader as STLLoader2 } from "three-stdlib";
 function STLModel({
   stlUrl,
   stlData,
@@ -27988,7 +28033,7 @@ function STLModel({
   const { rootObject } = useThree();
   const [geom, setGeom] = useState18(null);
   useEffect29(() => {
-    const loader = new STLLoader();
+    const loader = new STLLoader2();
     if (stlData) {
       try {
         const geometry = loader.parse(stlData);
@@ -30463,12 +30508,17 @@ function processPlatedHolesForManifold(Manifold, CrossSection, circuitJson, pcbT
       if (!Array.isArray(padOutline) || padOutline.length < 3) {
         return;
       }
-      const boardHoleOp = createHoleOpForPolygonPad({
+      let boardHoleOp = createHoleOpForPolygonPad({
         ph,
         depth: pcbThickness * 1.2,
         sizeDelta: 2 * M
       });
       if (!boardHoleOp) return;
+      if (ph.ccw_rotation) {
+        const rotatedOp = boardHoleOp.rotate([0, 0, ph.ccw_rotation]);
+        manifoldInstancesForCleanup.push(rotatedOp);
+        boardHoleOp = rotatedOp;
+      }
       const translatedBoardHole = boardHoleOp.translate([ph.x, ph.y, 0]);
       manifoldInstancesForCleanup.push(translatedBoardHole);
       platedHoleBoardDrills.push(translatedBoardHole);
@@ -30494,8 +30544,13 @@ function processPlatedHolesForManifold(Manifold, CrossSection, circuitJson, pcbT
       }) || barrelOp;
       const copperUnion = Manifold.union([mainFill, barrelOp]);
       manifoldInstancesForCleanup.push(copperUnion);
-      const finalCopper = copperUnion.subtract(holeCutOp);
+      let finalCopper = copperUnion.subtract(holeCutOp);
       manifoldInstancesForCleanup.push(finalCopper);
+      if (ph.ccw_rotation) {
+        const rotatedOp = finalCopper.rotate([0, 0, ph.ccw_rotation]);
+        manifoldInstancesForCleanup.push(rotatedOp);
+        finalCopper = rotatedOp;
+      }
       const translatedCopper = finalCopper.translate([ph.x, ph.y, 0]);
       manifoldInstancesForCleanup.push(translatedCopper);
       let finalCopperOp = translatedCopper;
@@ -40411,10 +40466,10 @@ import * as THREE65 from "three";
 import * as THREE64 from "three";
 import { GLTFLoader as GLTFLoader3 } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { OBJLoader as OBJLoader2 } from "three/examples/jsm/loaders/OBJLoader.js";
-import { STLLoader as STLLoader2 } from "three/examples/jsm/loaders/STLLoader.js";
+import { STLLoader as STLLoader3 } from "three/examples/jsm/loaders/STLLoader.js";
 async function load3DModel(url) {
   if (url.endsWith(".stl")) {
-    const loader = new STLLoader2();
+    const loader = new STLLoader3();
     const geometry = await loader.loadAsync(url);
     const material = new THREE64.MeshStandardMaterial({
       color: 8947848,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/3d-viewer",
-  "version": "0.0.633",
+  "version": "0.0.635",
   "repository": {
     "type": "git",
     "url": "https://github.com/tscircuit/3d-viewer"
@@ -68,8 +68,8 @@
     "@tscircuit/alphabet": "^0.0.25",
     "@tscircuit/circuit-json-util": "^0.0.119",
     "@tscircuit/copper-pour-solver": "^0.0.29",
-    "@tscircuit/core": "^0.0.2188",
-    "@tscircuit/props": "^0.0.705",
+    "@tscircuit/core": "^0.0.2195",
+    "@tscircuit/props": "^0.0.707",
     "@tscircuit/solver-utils": "^0.0.4",
     "@types/debug": "^4.1.13",
     "@types/jsdom": "^21.1.7",