@tscircuit/3d-viewer 0.0.185 → 0.0.186

package/dist/index.d.ts

@@ -11,6 +11,7 @@ interface Props {
     soup?: AnyCircuitElement[];
     circuitJson?: AnyCircuitElement[];
     autoRotateDisabled?: boolean;
+    clickToInteractEnabled?: boolean;
 }
 declare const CadViewer: React.ForwardRefExoticComponent<Props & {
     children?: React.ReactNode | undefined;

package/dist/index.js

@@ -13994,7 +13994,7 @@ var useConvertChildrenToSoup = (children, defaultSoup) => {
 
 // src/CadViewer.tsx
 import { su as su2 } from "@tscircuit/soup-util";
-import { useMemo as useMemo4, useState as useState3, forwardRef as forwardRef2 } from "react";
+import { useMemo as useMemo4, useState as useState4, forwardRef as forwardRef2 } from "react";
 
 // src/soup-to-3d/index.ts
 var import_transforms2 = __toESM(require_transforms(), 1);
@@ -17411,7 +17411,7 @@ import { Canvas, useFrame as useFrame2 } from "@react-three/fiber";
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.184",
+  version: "0.0.185",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -17585,7 +17585,7 @@ var CubeWithLabeledSides = ({}) => {
 };
 
 // src/CadViewerContainer.tsx
-import { forwardRef } from "react";
+import { forwardRef, useState as useState2 } from "react";
 import { Html } from "@react-three/drei";
 import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var RotationTracker = () => {
@@ -17599,8 +17599,12 @@ var CadViewerContainer = forwardRef(
     children,
     hoveredComponent,
     initialCameraPosition = [5, 5, 5],
-    autoRotateDisabled
+    autoRotateDisabled,
+    clickToInteractEnabled = false
   }, ref) => {
+    const [isInteractionEnabled, setIsInteractionEnabled] = useState2(
+      !clickToInteractEnabled
+    );
     return /* @__PURE__ */ jsxs3("div", { style: { position: "relative", width: "100%", height: "100%" }, children: [
       /* @__PURE__ */ jsx3(
         "div",
@@ -17635,7 +17639,13 @@ var CadViewerContainer = forwardRef(
           camera: { up: [0, 0, 1], position: initialCameraPosition },
           children: [
             /* @__PURE__ */ jsx3(RotationTracker, {}),
-            /* @__PURE__ */ jsx3(OrbitControls, { autoRotate: !autoRotateDisabled, autoRotateSpeed: 1 }),
+            isInteractionEnabled && /* @__PURE__ */ jsx3(
+              OrbitControls,
+              {
+                autoRotate: !autoRotateDisabled,
+                autoRotateSpeed: 1
+              }
+            ),
             /* @__PURE__ */ jsx3("ambientLight", { intensity: Math.PI / 2 }),
             /* @__PURE__ */ jsx3(
               "pointLight",
@@ -17694,6 +17704,36 @@ var CadViewerContainer = forwardRef(
             package_default.version
           ]
         }
+      ),
+      clickToInteractEnabled && !isInteractionEnabled && /* @__PURE__ */ jsx3(
+        "div",
+        {
+          onClick: () => setIsInteractionEnabled(true),
+          style: {
+            position: "absolute",
+            inset: 0,
+            cursor: "pointer",
+            zIndex: 10,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          children: /* @__PURE__ */ jsx3(
+            "div",
+            {
+              style: {
+                backgroundColor: "rgba(0, 0, 0, 0.8)",
+                color: "white",
+                padding: "12px 24px",
+                borderRadius: "8px",
+                fontSize: "16px",
+                fontFamily: "sans-serif",
+                pointerEvents: "none"
+              },
+              children: "Click to Interact"
+            }
+          )
+        }
       )
     ] });
   }
@@ -17750,12 +17790,12 @@ var ContainerWithTooltip = ({
 var ContainerWithTooltip_default = ContainerWithTooltip;
 
 // src/hooks/use-global-obj-loader.ts
-import { useState as useState2, useEffect as useEffect3 } from "react";
+import { useState as useState3, useEffect as useEffect3 } from "react";
 if (typeof window !== "undefined" && !window.TSCIRCUIT_OBJ_LOADER_CACHE) {
   window.TSCIRCUIT_OBJ_LOADER_CACHE = /* @__PURE__ */ new Map();
 }
 function useGlobalObjLoader(url) {
-  const [obj, setObj] = useState2(null);
+  const [obj, setObj] = useState3(null);
   useEffect3(() => {
     if (!url) return;
     const cache = window.TSCIRCUIT_OBJ_LOADER_CACHE;
@@ -18078,89 +18118,92 @@ var Error3d = ({
 
 // src/CadViewer.tsx
 import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
-var CadViewer = forwardRef2(({ soup, circuitJson, children, autoRotateDisabled }, ref) => {
-  circuitJson ??= soup;
-  const [hoveredComponent, setHoveredComponent] = useState3(null);
-  circuitJson ??= useConvertChildrenToSoup(children, circuitJson);
-  const initialCameraPosition = useMemo4(() => {
-    if (!circuitJson) return [5, 5, 5];
-    try {
-      const board = su2(circuitJson).pcb_board.list()[0];
-      if (!board) return [5, 5, 5];
-      const { width, height } = board;
-      if (!width && !height) {
+var CadViewer = forwardRef2(
+  ({ soup, circuitJson, children, autoRotateDisabled, clickToInteractEnabled }, ref) => {
+    circuitJson ??= soup;
+    const [hoveredComponent, setHoveredComponent] = useState4(null);
+    circuitJson ??= useConvertChildrenToSoup(children, circuitJson);
+    const initialCameraPosition = useMemo4(() => {
+      if (!circuitJson) return [5, 5, 5];
+      try {
+        const board = su2(circuitJson).pcb_board.list()[0];
+        if (!board) return [5, 5, 5];
+        const { width, height } = board;
+        if (!width && !height) {
+          return [5, 5, 5];
+        }
+        const minCameraDistance = 5;
+        const adjustedBoardWidth = Math.max(width, minCameraDistance);
+        const adjustedBoardHeight = Math.max(height, minCameraDistance);
+        const largestDim = Math.max(adjustedBoardWidth, adjustedBoardHeight);
+        return [largestDim / 2, largestDim / 2, largestDim];
+      } catch (e) {
+        console.error(e);
         return [5, 5, 5];
       }
-      const minCameraDistance = 5;
-      const adjustedBoardWidth = Math.max(width, minCameraDistance);
-      const adjustedBoardHeight = Math.max(height, minCameraDistance);
-      const largestDim = Math.max(adjustedBoardWidth, adjustedBoardHeight);
-      return [largestDim / 2, largestDim / 2, largestDim];
-    } catch (e) {
-      console.error(e);
-      return [5, 5, 5];
-    }
-  }, [circuitJson]);
-  const boardGeom = useMemo4(() => {
+    }, [circuitJson]);
+    const boardGeom = useMemo4(() => {
+      if (!circuitJson) return null;
+      if (!circuitJson.some((e) => e.type === "pcb_board")) return null;
+      return createBoardGeomFromSoup(circuitJson);
+    }, [circuitJson]);
+    const { stls: boardStls, loading } = useStlsFromGeom(boardGeom);
     if (!circuitJson) return null;
-    if (!circuitJson.some((e) => e.type === "pcb_board")) return null;
-    return createBoardGeomFromSoup(circuitJson);
-  }, [circuitJson]);
-  const { stls: boardStls, loading } = useStlsFromGeom(boardGeom);
-  if (!circuitJson) return null;
-  const cad_components = su2(circuitJson).cad_component.list();
-  return /* @__PURE__ */ jsxs6(
-    CadViewerContainer,
-    {
-      ref,
-      hoveredComponent,
-      autoRotateDisabled,
-      initialCameraPosition,
-      children: [
-        boardStls.map(({ stlUrl, color }, index) => /* @__PURE__ */ jsx10(
-          STLModel,
-          {
-            stlUrl,
-            color,
-            opacity: index === 0 ? 0.95 : 1
-          },
-          stlUrl
-        )),
-        cad_components.map((cad_component) => /* @__PURE__ */ jsx10(
-          ThreeErrorBoundary,
-          {
-            fallback: ({ error }) => /* @__PURE__ */ jsx10(Error3d, { cad_component, error }),
-            children: /* @__PURE__ */ jsx10(
-              AnyCadComponent,
-              {
-                onHover: (e) => {
-                  if (!e) {
-                    setHoveredComponent(null);
-                  }
-                  if (!e.mousePosition) return;
-                  const componentName = su2(
-                    circuitJson
-                  ).source_component.getUsing({
-                    source_component_id: cad_component.source_component_id
-                  })?.name;
-                  setHoveredComponent({
-                    cad_component_id: cad_component.cad_component_id,
-                    name: componentName ?? "<unknown>",
-                    mousePosition: e.mousePosition
-                  });
+    const cad_components = su2(circuitJson).cad_component.list();
+    return /* @__PURE__ */ jsxs6(
+      CadViewerContainer,
+      {
+        ref,
+        hoveredComponent,
+        autoRotateDisabled,
+        initialCameraPosition,
+        clickToInteractEnabled,
+        children: [
+          boardStls.map(({ stlUrl, color }, index) => /* @__PURE__ */ jsx10(
+            STLModel,
+            {
+              stlUrl,
+              color,
+              opacity: index === 0 ? 0.95 : 1
+            },
+            stlUrl
+          )),
+          cad_components.map((cad_component) => /* @__PURE__ */ jsx10(
+            ThreeErrorBoundary,
+            {
+              fallback: ({ error }) => /* @__PURE__ */ jsx10(Error3d, { cad_component, error }),
+              children: /* @__PURE__ */ jsx10(
+                AnyCadComponent,
+                {
+                  onHover: (e) => {
+                    if (!e) {
+                      setHoveredComponent(null);
+                    }
+                    if (!e.mousePosition) return;
+                    const componentName = su2(
+                      circuitJson
+                    ).source_component.getUsing({
+                      source_component_id: cad_component.source_component_id
+                    })?.name;
+                    setHoveredComponent({
+                      cad_component_id: cad_component.cad_component_id,
+                      name: componentName ?? "<unknown>",
+                      mousePosition: e.mousePosition
+                    });
+                  },
+                  cad_component,
+                  isHovered: hoveredComponent?.cad_component_id === cad_component.cad_component_id
                 },
-                cad_component,
-                isHovered: hoveredComponent?.cad_component_id === cad_component.cad_component_id
-              },
-              cad_component.cad_component_id
-            )
-          },
-          cad_component.cad_component_id
-        ))
-      ]
-    }
-  );
-});
+                cad_component.cad_component_id
+              )
+            },
+            cad_component.cad_component_id
+          ))
+        ]
+      }
+    );
+  }
+);
 
 // src/convert-circuit-json-to-3d-svg.ts
 var import_debug = __toESM(require_browser(), 1);
@@ -18425,7 +18468,7 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
 }
 
 // src/hooks/exporter/gltf.ts
-import { useEffect as useEffect5, useState as useState4, useMemo as useMemo5, useCallback as useCallback2 } from "react";
+import { useEffect as useEffect5, useState as useState5, useMemo as useMemo5, useCallback as useCallback2 } from "react";
 function useSaveGltfAs(options = {}) {
   const parse = useParser(options);
   const link = useMemo5(() => document.createElement("a"), []);
@@ -18453,8 +18496,8 @@ function useSaveGltfAs(options = {}) {
 }
 function useExportGltfUrl(options = {}) {
   const parse = useParser(options);
-  const [url, setUrl] = useState4();
-  const [error, setError] = useState4();
+  const [url, setUrl] = useState5();
+  const [error, setError] = useState5();
   const ref = useCallback2(
     (instance) => parse(instance).then(setUrl).catch(setError),
     []

package/package.json

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