@tscircuit/3d-viewer 0.0.128 → 0.0.130

package/dist/index.js

@@ -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.127",
+  version: "0.0.129",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -17443,7 +17443,7 @@ var package_default = {
     "@react-three/drei": "^9.121.4",
     "@react-three/fiber": "^8.17.14",
     "@tscircuit/core": "^0.0.302",
-    "@tscircuit/props": "^0.0.142",
+    "@tscircuit/props": "^0.0.143",
     "@tscircuit/react-fiber": "^1.2.0",
     "@tscircuit/soup-util": "^0.0.41",
     "jscad-electronics": "^0.0.23",
@@ -17595,103 +17595,110 @@ var RotationTracker = () => {
   });
   return /* @__PURE__ */ jsx3(Fragment, {});
 };
-var CadViewerContainer = forwardRef(({ children, hoveredComponent, autoRotateDisabled }, ref) => {
-  return /* @__PURE__ */ jsxs3("div", { style: { position: "relative", width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ jsx3(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          top: 0,
-          left: 0,
-          width: 120,
-          height: 120
-        },
-        children: /* @__PURE__ */ jsxs3(
-          Canvas,
-          {
-            camera: {
-              up: [0, 0, 1],
-              position: [1, 1, 1]
-            },
-            style: { zIndex: 10 },
-            children: [
-              /* @__PURE__ */ jsx3("ambientLight", { intensity: Math.PI / 2 }),
-              /* @__PURE__ */ jsx3(CubeWithLabeledSides, {})
-            ]
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxs3(
-      Canvas,
-      {
-        scene: { up: [0, 0, 1] },
-        camera: { up: [0, 0, 1], position: [5, 5, 5] },
-        children: [
-          /* @__PURE__ */ jsx3(RotationTracker, {}),
-          /* @__PURE__ */ jsx3(OrbitControls, { autoRotate: !autoRotateDisabled, autoRotateSpeed: 1 }),
-          /* @__PURE__ */ jsx3("ambientLight", { intensity: Math.PI / 2 }),
-          /* @__PURE__ */ jsx3(
-            "pointLight",
-            {
-              position: [-10, -10, 10],
-              decay: 0,
-              intensity: Math.PI / 4
-            }
-          ),
-          /* @__PURE__ */ jsx3(
-            Grid,
-            {
-              rotation: [Math.PI / 2, 0, 0],
-              infiniteGrid: true,
-              cellSize: 1,
-              sectionSize: 10
-            }
-          ),
-          /* @__PURE__ */ jsx3("object3D", { ref, children }),
-          hoveredComponent && /* @__PURE__ */ jsx3(
-            Html,
+var CadViewerContainer = forwardRef(
+  ({
+    children,
+    hoveredComponent,
+    initialCameraPosition = [5, 5, 5],
+    autoRotateDisabled
+  }, ref) => {
+    return /* @__PURE__ */ jsxs3("div", { style: { position: "relative", width: "100%", height: "100%" }, children: [
+      /* @__PURE__ */ jsx3(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: 120,
+            height: 120
+          },
+          children: /* @__PURE__ */ jsxs3(
+            Canvas,
             {
-              position: hoveredComponent.mousePosition,
-              style: {
-                fontFamily: "sans-serif",
-                transform: "translate3d(50%, 50%, 0)",
-                backgroundColor: "white",
-                padding: "5px",
-                borderRadius: "3px",
-                pointerEvents: "none",
-                userSelect: "none",
-                WebkitUserSelect: "none",
-                MozUserSelect: "none",
-                msUserSelect: "none"
+              camera: {
+                up: [0, 0, 1],
+                position: [1, 1, 1]
               },
-              children: hoveredComponent.name
+              style: { zIndex: 10 },
+              children: [
+                /* @__PURE__ */ jsx3("ambientLight", { intensity: Math.PI / 2 }),
+                /* @__PURE__ */ jsx3(CubeWithLabeledSides, {})
+              ]
             }
           )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs3(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          right: 24,
-          bottom: 24,
-          fontFamily: "sans-serif",
-          color: "white",
-          WebkitTextStroke: "0.5px rgba(0, 0, 0, 0.5)",
-          fontSize: 11
-        },
-        children: [
-          "@",
-          package_default.version
-        ]
-      }
-    )
-  ] });
-});
+        }
+      ),
+      /* @__PURE__ */ jsxs3(
+        Canvas,
+        {
+          scene: { up: [0, 0, 1] },
+          camera: { up: [0, 0, 1], position: initialCameraPosition },
+          children: [
+            /* @__PURE__ */ jsx3(RotationTracker, {}),
+            /* @__PURE__ */ jsx3(OrbitControls, { autoRotate: !autoRotateDisabled, autoRotateSpeed: 1 }),
+            /* @__PURE__ */ jsx3("ambientLight", { intensity: Math.PI / 2 }),
+            /* @__PURE__ */ jsx3(
+              "pointLight",
+              {
+                position: [-10, -10, 10],
+                decay: 0,
+                intensity: Math.PI / 4
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              Grid,
+              {
+                rotation: [Math.PI / 2, 0, 0],
+                infiniteGrid: true,
+                cellSize: 1,
+                sectionSize: 10
+              }
+            ),
+            /* @__PURE__ */ jsx3("object3D", { ref, children }),
+            hoveredComponent && /* @__PURE__ */ jsx3(
+              Html,
+              {
+                position: hoveredComponent.mousePosition,
+                style: {
+                  fontFamily: "sans-serif",
+                  transform: "translate3d(50%, 50%, 0)",
+                  backgroundColor: "white",
+                  padding: "5px",
+                  borderRadius: "3px",
+                  pointerEvents: "none",
+                  userSelect: "none",
+                  WebkitUserSelect: "none",
+                  MozUserSelect: "none",
+                  msUserSelect: "none"
+                },
+                children: hoveredComponent.name
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs3(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            right: 24,
+            bottom: 24,
+            fontFamily: "sans-serif",
+            color: "white",
+            WebkitTextStroke: "0.5px rgba(0, 0, 0, 0.5)",
+            fontSize: 11
+          },
+          children: [
+            "@",
+            package_default.version
+          ]
+        }
+      )
+    ] });
+  }
+);
 
 // src/ContainerWithTooltip.tsx
 import { useRef as useRef4, useCallback } from "react";
@@ -18076,12 +18083,26 @@ var CadViewer = forwardRef2(({ soup, circuitJson, children, autoRotateDisabled }
   circuitJson ??= soup;
   const [hoveredComponent, setHoveredComponent] = useState3(null);
   circuitJson ??= useConvertChildrenToSoup(children, circuitJson);
-  if (!circuitJson) return null;
+  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;
+      const largestDim = Math.max(width, height);
+      return [largestDim / 2, largestDim / 2, largestDim];
+    } catch (e) {
+      console.error(e);
+      return [5, 5, 5];
+    }
+  }, [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;
   const cad_components = su2(circuitJson).cad_component.list();
   return /* @__PURE__ */ jsxs6(
     CadViewerContainer,
@@ -18089,6 +18110,7 @@ var CadViewer = forwardRef2(({ soup, circuitJson, children, autoRotateDisabled }
       ref,
       hoveredComponent,
       autoRotateDisabled,
+      initialCameraPosition,
       children: [
         boardStls.map(({ stlUrl, color }, index) => /* @__PURE__ */ jsx10(
           STLModel,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/3d-viewer",
-  "version": "0.0.128",
+  "version": "0.0.130",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "type": "module",
@@ -32,7 +32,7 @@
     "@react-three/drei": "^9.121.4",
     "@react-three/fiber": "^8.17.14",
     "@tscircuit/core": "^0.0.302",
-    "@tscircuit/props": "^0.0.142",
+    "@tscircuit/props": "^0.0.143",
     "@tscircuit/react-fiber": "^1.2.0",
     "@tscircuit/soup-util": "^0.0.41",
     "jscad-electronics": "^0.0.23",