@tscircuit/3d-viewer 0.0.233 → 0.0.235

package/dist/index.js

@@ -13980,7 +13980,7 @@ var require_browser = __commonJS({
 });
 
 // src/CadViewer.tsx
-import { useState as useState9, useCallback as useCallback4, useRef as useRef7, useEffect as useEffect7 } from "react";
+import { useState as useState10, useRef as useRef8, useEffect as useEffect8 } from "react";
 
 // src/hooks/use-convert-children-to-soup.ts
 import { Circuit } from "@tscircuit/core";
@@ -16985,7 +16985,7 @@ import { Canvas, useFrame as useFrame2 } from "@react-three/fiber";
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.232",
+  version: "0.0.234",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -17313,7 +17313,7 @@ var colors = {
 var MANIFOLD_Z_OFFSET = 1e-3;
 var SMOOTH_CIRCLE_SEGMENTS = 32;
 var DEFAULT_SMT_PAD_THICKNESS = 0.035;
-var TRACE_TEXTURE_RESOLUTION = 200;
+var TRACE_TEXTURE_RESOLUTION = 50;
 var boardMaterialColors = {
   fr1: colors.fr1Copper,
   fr4: colors.fr4Green
@@ -18980,12 +18980,12 @@ var CadViewerJscad = forwardRef2(
 
 // src/CadViewerManifold.tsx
 import { useEffect as useEffect6, useState as useState8, useMemo as useMemo7 } from "react";
-import { su as su12 } from "@tscircuit/soup-util";
+import { su as su13 } from "@tscircuit/soup-util";
 import ManifoldModule from "manifold-3d";
 
 // src/hooks/useManifoldBoardBuilder.ts
 import { useState as useState7, useEffect as useEffect5, useMemo as useMemo6, useRef as useRef6 } from "react";
-import { su as su11 } from "@tscircuit/soup-util";
+import { su as su12 } from "@tscircuit/soup-util";
 import * as THREE10 from "three";
 
 // src/utils/manifold-mesh-to-three-geometry.ts
@@ -19537,6 +19537,105 @@ function createManifoldBoard(Manifold, CrossSection, boardData, pcbThickness, ma
   return boardOp;
 }
 
+// src/utils/manifold/process-cutouts.ts
+import { su as su11 } from "@tscircuit/soup-util";
+var arePointsClockwise3 = (points) => {
+  let area = 0;
+  for (let i = 0; i < points.length; i++) {
+    const j = (i + 1) % points.length;
+    if (points[i] && points[j]) {
+      area += points[i][0] * points[j][1];
+      area -= points[j][0] * points[i][1];
+    }
+  }
+  const signedArea = area / 2;
+  return signedArea <= 0;
+};
+function processCutoutsForManifold(Manifold, CrossSection, circuitJson, pcbThickness, manifoldInstancesForCleanup) {
+  const cutoutOps = [];
+  const pcbCutouts = su11(circuitJson).pcb_cutout.list();
+  for (const cutout of pcbCutouts) {
+    let cutoutOp;
+    const cutoutHeight = pcbThickness * 1.5;
+    switch (cutout.shape) {
+      case "rect":
+        cutoutOp = Manifold.cube(
+          [cutout.width, cutout.height, cutoutHeight],
+          true
+          // centered
+        );
+        manifoldInstancesForCleanup.push(cutoutOp);
+        if (cutout.rotation) {
+          const rotationRadians = cutout.rotation * Math.PI / 180;
+          const rotatedOp = cutoutOp.rotate([0, 0, cutout.rotation]);
+          manifoldInstancesForCleanup.push(rotatedOp);
+          cutoutOp = rotatedOp;
+        }
+        cutoutOp = cutoutOp.translate([
+          cutout.center.x,
+          cutout.center.y,
+          0
+          // Centered vertically by Manifold.cube, so Z is 0 for board plane
+        ]);
+        manifoldInstancesForCleanup.push(cutoutOp);
+        break;
+      case "circle":
+        cutoutOp = Manifold.cylinder(
+          cutoutHeight,
+          cutout.radius,
+          -1,
+          // default for radiusHigh
+          SMOOTH_CIRCLE_SEGMENTS,
+          true
+          // centered
+        );
+        manifoldInstancesForCleanup.push(cutoutOp);
+        cutoutOp = cutoutOp.translate([cutout.center.x, cutout.center.y, 0]);
+        manifoldInstancesForCleanup.push(cutoutOp);
+        break;
+      case "polygon":
+        if (cutout.points.length < 3) {
+          console.warn(
+            `PCB Cutout [${cutout.pcb_cutout_id}] polygon has fewer than 3 points, skipping.`
+          );
+          continue;
+        }
+        let pointsVec2 = cutout.points.map((p) => [
+          p.x,
+          p.y
+        ]);
+        if (arePointsClockwise3(pointsVec2)) {
+          pointsVec2 = pointsVec2.reverse();
+        }
+        const crossSection = CrossSection.ofPolygons([pointsVec2]);
+        manifoldInstancesForCleanup.push(crossSection);
+        cutoutOp = Manifold.extrude(
+          crossSection,
+          cutoutHeight,
+          0,
+          // nDivisions
+          0,
+          // twistDegrees
+          [1, 1],
+          // scaleTop
+          true
+          // center extrusion
+        );
+        manifoldInstancesForCleanup.push(cutoutOp);
+        break;
+      default:
+        console.warn(
+          `Unsupported cutout shape: ${cutout.shape} for cutout ${cutout.pcb_cutout_id}`
+        );
+        continue;
+    }
+    if (cutoutOp) {
+      cutoutOps.push(cutoutOp);
+    }
+  }
+  return { cutoutOps };
+}
+
 // src/hooks/useManifoldBoardBuilder.ts
 var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
   const [geoms, setGeoms] = useState7(null);
@@ -19547,7 +19646,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
   const manifoldInstancesForCleanup = useRef6([]);
   const boardData = useMemo6(() => {
     if (!circuitJson) return null;
-    const boards = su11(circuitJson).pcb_board.list();
+    const boards = su12(circuitJson).pcb_board.list();
     if (boards.length === 0) {
       return null;
     }
@@ -19558,7 +19657,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
       setGeoms(null);
       setTextures(null);
       setPcbThickness(null);
-      if (circuitJson && su11(circuitJson).pcb_board.list().length === 0) {
+      if (circuitJson && su12(circuitJson).pcb_board.list().length === 0) {
         setError("No pcb_board found in circuitJson.");
       }
       setIsLoading(false);
@@ -19610,9 +19709,23 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
       if (allBoardDrills.length > 0) {
         const unionedDrills = Manifold.union(allBoardDrills);
         manifoldInstancesForCleanup.current.push(unionedDrills);
-        const nextBoard = currentBoardOp.subtract(unionedDrills);
-        manifoldInstancesForCleanup.current.push(nextBoard);
-        currentBoardOp = nextBoard;
+        const nextBoardAfterDrills = currentBoardOp.subtract(unionedDrills);
+        manifoldInstancesForCleanup.current.push(nextBoardAfterDrills);
+        currentBoardOp = nextBoardAfterDrills;
+      }
+      const { cutoutOps } = processCutoutsForManifold(
+        Manifold,
+        CrossSection,
+        circuitJson,
+        currentPcbThickness,
+        manifoldInstancesForCleanup.current
+      );
+      if (cutoutOps.length > 0) {
+        const unionedCutouts = Manifold.union(cutoutOps);
+        manifoldInstancesForCleanup.current.push(unionedCutouts);
+        const nextBoardAfterCutouts = currentBoardOp.subtract(unionedCutouts);
+        manifoldInstancesForCleanup.current.push(nextBoardAfterCutouts);
+        currentBoardOp = nextBoardAfterCutouts;
       }
       boardManifold = currentBoardOp;
       if (boardManifold) {
@@ -19825,7 +19938,7 @@ var CadViewerManifold = ({
     [textures, boardData, pcbThickness]
   );
   const cadComponents = useMemo7(
-    () => circuitJson ? su12(circuitJson).cad_component.list() : [],
+    () => circuitJson ? su13(circuitJson).cad_component.list() : [],
     [circuitJson]
   );
   const initialCameraPosition = useMemo7(() => {
@@ -19905,29 +20018,76 @@ var CadViewerManifold = ({
 };
 var CadViewerManifold_default = CadViewerManifold;
 
-// src/CadViewer.tsx
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
-var CadViewer = (props) => {
-  const [engine, setEngine] = useState9("jscad");
+// src/hooks/useContextMenu.ts
+import { useState as useState9, useCallback as useCallback4, useRef as useRef7, useEffect as useEffect7 } from "react";
+var useContextMenu = ({ containerRef }) => {
   const [menuVisible, setMenuVisible] = useState9(false);
   const [menuPos, setMenuPos] = useState9({
     x: 0,
     y: 0
   });
-  const containerRef = useRef7(null);
   const menuRef = useRef7(null);
-  const handleContextMenu = useCallback4((e) => {
-    e.preventDefault();
-    setMenuPos({ x: e.clientX, y: e.clientY });
-    setMenuVisible(true);
+  const interactionOriginPosRef = useRef7(null);
+  const handleContextMenu = useCallback4(
+    (e) => {
+      e.preventDefault();
+      const eventX = typeof e.clientX === "number" ? e.clientX : 0;
+      const eventY = typeof e.clientY === "number" ? e.clientY : 0;
+      if (!interactionOriginPosRef.current) {
+        return;
+      }
+      const { x: originX, y: originY } = interactionOriginPosRef.current;
+      const dx = Math.abs(eventX - originX);
+      const dy = Math.abs(eventY - originY);
+      const swipeThreshold = 10;
+      if (dx > swipeThreshold || dy > swipeThreshold) {
+        interactionOriginPosRef.current = null;
+        return;
+      }
+      setMenuPos({ x: eventX, y: eventY });
+      setMenuVisible(true);
+      interactionOriginPosRef.current = null;
+    },
+    [setMenuPos, setMenuVisible]
+  );
+  const handleTouchStart = useCallback4((e) => {
+    if (e.touches.length === 1) {
+      const touch = e.touches[0];
+      if (touch) {
+        interactionOriginPosRef.current = { x: touch.clientX, y: touch.clientY };
+      } else {
+        interactionOriginPosRef.current = null;
+      }
+    } else {
+      interactionOriginPosRef.current = null;
+    }
+  }, []);
+  const handleTouchMove = useCallback4((e) => {
+    if (!interactionOriginPosRef.current || e.touches.length !== 1) {
+      return;
+    }
+    const touch = e.touches[0];
+    if (touch) {
+      const dx = Math.abs(touch.clientX - interactionOriginPosRef.current.x);
+      const dy = Math.abs(touch.clientY - interactionOriginPosRef.current.y);
+      const swipeThreshold = 10;
+      if (dx > swipeThreshold || dy > swipeThreshold) {
+        interactionOriginPosRef.current = null;
+      }
+    } else {
+      interactionOriginPosRef.current = null;
+    }
+  }, []);
+  const handleTouchEnd = useCallback4(() => {
+    setTimeout(() => {
+      if (interactionOriginPosRef.current) {
+        interactionOriginPosRef.current = null;
+      }
+    }, 0);
   }, []);
-  const handleMenuClick = (newEngine) => {
-    setEngine(newEngine);
-    setMenuVisible(false);
-  };
   const handleClickAway = useCallback4((e) => {
     const target = e.target;
-    if (!menuRef.current || !menuRef.current.contains(target)) {
+    if (menuRef.current && !menuRef.current.contains(target)) {
       setMenuVisible(false);
     }
   }, []);
@@ -19937,13 +20097,52 @@ var CadViewer = (props) => {
       return () => document.removeEventListener("mousedown", handleClickAway);
     }
   }, [menuVisible, handleClickAway]);
-  useEffect7(() => {
+  const contextMenuEventHandlers = {
+    onMouseDown: (e) => {
+      if (e.button === 2) {
+        interactionOriginPosRef.current = { x: e.clientX, y: e.clientY };
+      } else {
+        interactionOriginPosRef.current = null;
+      }
+    },
+    onContextMenu: handleContextMenu,
+    onTouchStart: handleTouchStart,
+    onTouchMove: handleTouchMove,
+    onTouchEnd: handleTouchEnd
+  };
+  return {
+    menuVisible,
+    menuPos,
+    menuRef,
+    contextMenuEventHandlers,
+    setMenuVisible
+    // Expose setMenuVisible for direct control if needed
+  };
+};
+
+// src/CadViewer.tsx
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+var CadViewer = (props) => {
+  const [engine, setEngine] = useState10("jscad");
+  const containerRef = useRef8(null);
+  const {
+    menuVisible,
+    menuPos,
+    menuRef,
+    contextMenuEventHandlers,
+    setMenuVisible
+  } = useContextMenu({ containerRef });
+  const handleMenuClick = (newEngine) => {
+    setEngine(newEngine);
+    setMenuVisible(false);
+  };
+  useEffect8(() => {
     const stored = window.localStorage.getItem("cadViewerEngine");
     if (stored === "jscad" || stored === "manifold") {
       setEngine(stored);
     }
   }, []);
-  useEffect7(() => {
+  useEffect8(() => {
     window.localStorage.setItem("cadViewerEngine", engine);
   }, [engine]);
   const viewerKey = props.circuitJson ? JSON.stringify(props.circuitJson) : void 0;
@@ -19952,7 +20151,7 @@ var CadViewer = (props) => {
     {
       ref: containerRef,
       style: { width: "100%", height: "100%", position: "relative" },
-      onContextMenu: handleContextMenu,
+      ...contextMenuEventHandlers,
       children: [
         engine === "jscad" ? /* @__PURE__ */ jsx12(CadViewerJscad, { ...props }) : /* @__PURE__ */ jsx12(CadViewerManifold_default, { ...props }),
         /* @__PURE__ */ jsxs9(
@@ -19970,11 +20169,6 @@ var CadViewer = (props) => {
               opacity: 0.7,
               userSelect: "none"
             },
-            onClick: () => {
-              if ("ontouchstart" in window) {
-                setEngine(engine === "jscad" ? "manifold" : "jscad");
-              }
-            },
             children: [
               "Engine: ",
               /* @__PURE__ */ jsx12("b", { children: engine === "jscad" ? "JSCAD" : "Manifold" })
@@ -20047,7 +20241,7 @@ var CadViewer = (props) => {
 
 // src/convert-circuit-json-to-3d-svg.ts
 var import_debug = __toESM(require_browser(), 1);
-import { su as su13 } from "@tscircuit/soup-util";
+import { su as su14 } from "@tscircuit/soup-util";
 import * as THREE16 from "three";
 import { SVGRenderer } from "three/examples/jsm/renderers/SVGRenderer.js";
 
@@ -20262,7 +20456,7 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
   const pointLight = new THREE16.PointLight(16777215, Math.PI / 4);
   pointLight.position.set(-10, -10, 10);
   scene.add(pointLight);
-  const components = su13(circuitJson).cad_component.list();
+  const components = su14(circuitJson).cad_component.list();
   for (const component of components) {
     await renderComponent(component, scene);
   }
@@ -20308,7 +20502,7 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
 }
 
 // src/hooks/exporter/gltf.ts
-import { useEffect as useEffect8, useState as useState10, useMemo as useMemo8, useCallback as useCallback5 } from "react";
+import { useEffect as useEffect9, useState as useState11, useMemo as useMemo8, useCallback as useCallback6 } from "react";
 function useSaveGltfAs(options = {}) {
   const parse = useParser(options);
   const link = useMemo8(() => document.createElement("a"), []);
@@ -20321,7 +20515,7 @@ function useSaveGltfAs(options = {}) {
     link.dispatchEvent(new MouseEvent("click"));
     URL.revokeObjectURL(url);
   };
-  useEffect8(
+  useEffect9(
     () => () => {
       link.remove();
       instance = null;
@@ -20329,20 +20523,20 @@ function useSaveGltfAs(options = {}) {
     []
   );
   let instance;
-  const ref = useCallback5((obj3D) => {
+  const ref = useCallback6((obj3D) => {
     instance = obj3D;
   }, []);
   return [ref, saveAs];
 }
 function useExportGltfUrl(options = {}) {
   const parse = useParser(options);
-  const [url, setUrl] = useState10();
-  const [error, setError] = useState10();
-  const ref = useCallback5(
+  const [url, setUrl] = useState11();
+  const [error, setError] = useState11();
+  const ref = useCallback6(
     (instance) => parse(instance).then(setUrl).catch(setError),
     []
   );
-  useEffect8(() => () => URL.revokeObjectURL(url), [url]);
+  useEffect9(() => () => URL.revokeObjectURL(url), [url]);
   return [ref, url, error];
 }
 function useParser(options = {}) {

package/package.json

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