@tscircuit/3d-viewer 0.0.640 → 0.0.642

package/README.md

@@ -121,6 +121,7 @@ const svgString = await convert3dCircuitToSvg(circuitJson, options)
 ```
 
 The `convert3dCircuitToSvg` function accepts the following options:
+
 - `width`: Width of the output SVG (default: 800)
 - `height`: Height of the output SVG (default: 600)
 - `backgroundColor`: Background color in hex format (default: "#ffffff")
@@ -137,6 +138,7 @@ The `convert3dCircuitToSvg` function accepts the following options:
 Main component for rendering the 3D PCB viewer.
 
 Props:
+
 - `circuit-json`: (optional) An array of AnyCircuitElement objects representing the PCB layout.
 - `children`: (optional) React children elements describing the PCB layout (alternative to using `circuit-json`).
 - `resolveStaticAsset`: (optional) Function that receives each component model URL (`obj`, `wrl`, `stl`, `gltf`, `glb`, `step`) and returns the resolved URL to load.
@@ -146,12 +148,14 @@ Props:
 Defines the PCB board dimensions.
 
 Props:
+
 - `width`: Width of the board (e.g., "20mm").
 - `height`: Height of the board (e.g., "20mm").
 
 ### Component Elements
 
 Various component elements can be used as children of the `<board>` element:
+
 - `<resistor>`
 - `<capacitor>`
 - `<chip>`
@@ -306,7 +310,6 @@ We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) f
 
 This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
 
-
 ### Section views
 
 Right-click the viewer and choose **Advanced → Section View…**.

package/dist/index.d.ts

@@ -60,7 +60,10 @@ type CadViewerProps = Omit<React.ComponentProps<typeof CadViewerJscad>, "circuit
     circuitJson?: any[];
     /** Settled circuit retaining authored assembly.explosion stages. */
     circuit?: RootCircuit;
-    /** Pre-rendered circuit-json-to-gltf GLB URL. Bypasses geometry/model generation. */
+    /**
+     * Pre-rendered circuit-json-to-gltf GLB URL. Bypasses geometry/model generation.
+     * Changing the GLB preserves the camera. Change the viewer key to frame a different board.
+     */
     glbUrl?: string;
     /** In-memory alternative to glbUrl. Supply only one GLB source. */
     glbData?: ArrayBuffer;

package/dist/index.js

@@ -22344,7 +22344,7 @@ import * as THREE31 from "three";
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.639",
+  version: "0.0.641",
   repository: {
     type: "git",
     url: "https://github.com/tscircuit/3d-viewer"
@@ -22860,6 +22860,7 @@ var Canvas = forwardRef(
           mountRef.current.removeChild(renderer.domElement);
         }
         renderer.dispose();
+        renderer.forceContextLoss();
         scene.remove(rootObject.current);
         if (window.__TSCIRCUIT_THREE_OBJECT === rootObject.current) {
           window.__TSCIRCUIT_THREE_OBJECT = void 0;
@@ -32041,33 +32042,51 @@ var CadViewerManifold = ({
 var CadViewerManifold_default = CadViewerManifold;
 
 // src/CadViewerGlb.tsx
-import { useEffect as useEffect37, useMemo as useMemo31, useState as useState23 } from "react";
+import {
+  useEffect as useEffect37,
+  useLayoutEffect as useLayoutEffect2,
+  useState as useState23
+} from "react";
 
 // src/hooks/useGlbModel.ts
-import { useEffect as useEffect36, useMemo as useMemo30, useState as useState22 } from "react";
+import { useEffect as useEffect36, useLayoutEffect, useMemo as useMemo30, useState as useState22 } from "react";
 function useGlbModel(source) {
   const request = useMemo30(() => ({ source }), [source]);
   const [result, setResult] = useState22();
+  const displayedGlb = result?.loadedGlb;
   useEffect36(() => {
     const controller = new AbortController();
-    let model;
-    loadGlbScene(request.source, controller.signal).then((loaded) => {
-      model = loaded;
-      if (controller.signal.aborted) disposeGlbScene(loaded);
-      else setResult({ request, model: loaded });
+    let loadedGlb;
+    loadGlbScene(request.source, controller.signal).then((model) => {
+      if (controller.signal.aborted) {
+        disposeGlbScene(model);
+        return;
+      }
+      loadedGlb = { model, wasDisplayed: false };
+      setResult({ request, loadedGlb });
     }).catch((error) => {
-      if (!controller.signal.aborted)
-        setResult({
-          request,
-          error: error instanceof Error ? error.message : String(error)
-        });
+      if (controller.signal.aborted) return;
+      setResult((previous) => ({
+        request,
+        loadedGlb: previous?.loadedGlb,
+        error: error instanceof Error ? error.message : String(error)
+      }));
     });
     return () => {
       controller.abort();
-      if (model) disposeGlbScene(model);
+      if (loadedGlb && !loadedGlb.wasDisplayed) disposeGlbScene(loadedGlb.model);
     };
   }, [request]);
-  return result?.request === request ? result : void 0;
+  useLayoutEffect(() => {
+    if (!displayedGlb) return;
+    displayedGlb.wasDisplayed = true;
+    return () => disposeGlbScene(displayedGlb.model);
+  }, [displayedGlb]);
+  return {
+    model: displayedGlb?.model,
+    isLoading: result?.request !== request,
+    error: result?.request === request ? result.error : void 0
+  };
 }
 
 // src/CadViewerGlb.tsx
@@ -32080,19 +32099,7 @@ function GlbScene({
   const { rootObject } = useThree();
   const { addHoverable, removeHoverable } = useHover();
   const [hover, setHover] = useState23();
-  const bounds = useMemo31(() => {
-    const box = new THREE62.Box3().setFromObject(model);
-    if (box.isEmpty()) return;
-    return {
-      minX: box.min.x,
-      maxX: box.max.x,
-      minY: box.min.y,
-      maxY: box.max.y,
-      minZ: box.min.z,
-      maxZ: box.max.z
-    };
-  }, [model]);
-  useEffect37(() => {
+  useLayoutEffect2(() => {
     rootObject.add(model);
     return () => {
       rootObject.remove(model);
@@ -32143,54 +32150,88 @@ function GlbScene({
       for (const mesh of meshes) removeHoverable(mesh);
     };
   }, [model, objectVisibility, addHoverable, removeHoverable]);
+  return /* @__PURE__ */ jsx24(Fragment5, { children: hover && /* @__PURE__ */ jsx24(
+    Html,
+    {
+      position: hover.position,
+      style: {
+        background: "white",
+        color: "black",
+        padding: "5px",
+        borderRadius: "3px",
+        fontFamily: "sans-serif",
+        transform: "translate(1rem, 1rem)"
+      },
+      children: hover.name
+    }
+  ) });
+}
+function CadViewerGlb({
+  source,
+  objectVisibility,
+  ...containerProps
+}) {
+  const { model, isLoading, error } = useGlbModel(source);
+  const message = error ? `Unable to load 3D view: ${error}` : "Loading 3D view...";
+  const role = error ? "alert" : "status";
+  if (!model) return /* @__PURE__ */ jsx24("div", { role, children: message });
   return /* @__PURE__ */ jsxs8(Fragment5, { children: [
-    bounds && /* @__PURE__ */ jsx24(FitCameraToComparison, { bounds }),
-    hover && /* @__PURE__ */ jsx24(
-      Html,
+    /* @__PURE__ */ jsx24(
+      GlbViewport,
       {
-        position: hover.position,
-        style: {
-          background: "white",
-          color: "black",
-          padding: "5px",
-          borderRadius: "3px",
-          fontFamily: "sans-serif",
-          transform: "translate(1rem, 1rem)"
-        },
-        children: hover.name
+        model,
+        objectVisibility,
+        ...containerProps
       }
-    )
+    ),
+    (isLoading || error) && /* @__PURE__ */ jsx24("div", { role, style: { position: "absolute", top: 12, left: 12 }, children: message })
   ] });
 }
-function CadViewerGlb({
-  source,
+function GlbViewport({
+  model,
   objectVisibility,
   ...containerProps
 }) {
-  const result = useGlbModel(source);
-  const framing = useMemo31(() => {
-    if (!result?.model) return void 0;
-    const bounds = new THREE62.Box3().setFromObject(result.model);
-    if (bounds.isEmpty()) return void 0;
-    return {
-      boardDimensions: {
-        width: bounds.max.x - bounds.min.x,
-        height: bounds.max.y - bounds.min.y
-      },
-      boardCenter: {
-        x: (bounds.min.x + bounds.max.x) / 2,
-        y: (bounds.min.y + bounds.max.y) / 2
-      }
-    };
-  }, [result, source]);
-  if (!result) return /* @__PURE__ */ jsx24("div", { role: "status", children: "Loading 3D view..." });
-  if (result.error)
-    return /* @__PURE__ */ jsxs8("div", { role: "alert", children: [
-      "Unable to load 3D view: ",
-      result.error
-    ] });
-  if (!result.model) return null;
-  return /* @__PURE__ */ jsx24(CadViewerContainer, { ...containerProps, ...framing, children: /* @__PURE__ */ jsx24(GlbScene, { model: result.model, objectVisibility }) });
+  const [framing, setFraming] = useState23(() => getGlbFraming(model));
+  useEffect37(() => {
+    if (framing) return;
+    const nextFraming = getGlbFraming(model);
+    if (nextFraming) setFraming(nextFraming);
+  }, [framing, model]);
+  return /* @__PURE__ */ jsxs8(
+    CadViewerContainer,
+    {
+      ...containerProps,
+      boardDimensions: framing?.boardDimensions,
+      boardCenter: framing?.boardCenter,
+      children: [
+        framing && /* @__PURE__ */ jsx24(FitCameraToComparison, { bounds: framing.bounds }),
+        /* @__PURE__ */ jsx24(GlbScene, { model, objectVisibility })
+      ]
+    }
+  );
+}
+function getGlbFraming(model) {
+  const box = new THREE62.Box3().setFromObject(model);
+  if (box.isEmpty()) return void 0;
+  return {
+    bounds: {
+      minX: box.min.x,
+      maxX: box.max.x,
+      minY: box.min.y,
+      maxY: box.max.y,
+      minZ: box.min.z,
+      maxZ: box.max.z
+    },
+    boardDimensions: {
+      width: box.max.x - box.min.x,
+      height: box.max.y - box.min.y
+    },
+    boardCenter: {
+      x: (box.min.x + box.max.x) / 2,
+      y: (box.min.y + box.max.y) / 2
+    }
+  };
 }
 
 // node_modules/@radix-ui/react-dropdown-menu/dist/index.mjs
@@ -32391,7 +32432,7 @@ var IS_DEVELOPMENT = false;
 
 // node_modules/@radix-ui/react-use-layout-effect/dist/index.mjs
 import * as React13 from "react";
-var useLayoutEffect2 = globalThis?.document ? React13.useLayoutEffect : () => {
+var useLayoutEffect22 = globalThis?.document ? React13.useLayoutEffect : () => {
 };
 
 // node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
@@ -32415,7 +32456,7 @@ function useEffectEvent(callback) {
       ref.current = callback;
     });
   } else {
-    useLayoutEffect2(() => {
+    useLayoutEffect22(() => {
       ref.current = callback;
     });
   }
@@ -32426,7 +32467,7 @@ __name4(useEffectEvent, "useEffectEvent");
 // node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
 var __defProp6 = Object.defineProperty;
 var __name5 = (target, value) => __defProp6(target, "name", { value, configurable: true });
-var useInsertionEffect = React15[" useInsertionEffect ".trim().toString()] || useLayoutEffect2;
+var useInsertionEffect = React15[" useInsertionEffect ".trim().toString()] || useLayoutEffect22;
 function useControllableState({
   prop,
   defaultProp,
@@ -33266,7 +33307,7 @@ function createCollection2(name) {
         [registryRef]
       );
       const composedRefs = useComposedRefs(forwardedRef, registerElement, ref);
-      useLayoutEffect2(() => {
+      useLayoutEffect22(() => {
         const node = ref.current;
         const registry = registryRef.current;
         if (node && registry.has(node)) {
@@ -33419,7 +33460,7 @@ function useCallbackRef(callback) {
       callbackRef.current = callback;
     });
   } else {
-    useLayoutEffect2(() => {
+    useLayoutEffect22(() => {
       callbackRef.current = callback;
     });
   }
@@ -34088,7 +34129,7 @@ var useReactId = React26[" useId ".trim().toString()] || (() => void 0);
 var count2 = 0;
 function useId2(deterministicId) {
   const [id, setId] = React26.useState(useReactId());
-  useLayoutEffect2(() => {
+  useLayoutEffect22(() => {
     if (!deterministicId) setId((reactId) => reactId ?? String(count2++));
   }, [deterministicId]);
   return deterministicId || (id ? `radix-${id}` : "");
@@ -35692,12 +35733,12 @@ var computePosition2 = (reference, floating, options) => {
 
 // node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs
 import * as React27 from "react";
-import { useLayoutEffect as useLayoutEffect3 } from "react";
+import { useLayoutEffect as useLayoutEffect4 } from "react";
 import * as ReactDOM3 from "react-dom";
 var isClient = typeof document !== "undefined";
 var noop = function noop2() {
 };
-var index = isClient ? useLayoutEffect3 : noop;
+var index = isClient ? useLayoutEffect4 : noop;
 function deepEqual(a, b) {
   if (a === b) {
     return true;
@@ -36007,7 +36048,7 @@ var __defProp16 = Object.defineProperty;
 var __name15 = (target, value) => __defProp16(target, "name", { value, configurable: true });
 function useSize(element) {
   const [size4, setSize] = React28.useState(void 0);
-  useLayoutEffect2(() => {
+  useLayoutEffect22(() => {
     if (element) {
       setSize({ width: element.offsetWidth, height: element.offsetHeight });
       let rAF = 0;
@@ -36214,7 +36255,7 @@ var PopperContent = /* @__PURE__ */ React29.forwardRef(
       ]
     });
     const setPlacementState = context.setPlacementState;
-    useLayoutEffect2(() => {
+    useLayoutEffect22(() => {
       setPlacementState(placement);
       return () => {
         setPlacementState(void 0);
@@ -36222,7 +36263,7 @@ var PopperContent = /* @__PURE__ */ React29.forwardRef(
     }, [placement, setPlacementState]);
     const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
     const handlePlaced = useCallbackRef(onPlaced);
-    useLayoutEffect2(() => {
+    useLayoutEffect22(() => {
       if (isPositioned) {
         handlePlaced?.();
       }
@@ -36231,7 +36272,7 @@ var PopperContent = /* @__PURE__ */ React29.forwardRef(
     const arrowY = middlewareData.arrow?.y;
     const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
     const [contentZIndex, setContentZIndex] = React29.useState();
-    useLayoutEffect2(() => {
+    useLayoutEffect22(() => {
       if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
     }, [content]);
     return /* @__PURE__ */ jsx32(
@@ -36341,7 +36382,7 @@ var Portal = /* @__PURE__ */ React30.forwardRef(
   /* @__PURE__ */ __name17(function Portal2(props, forwardedRef) {
     const { container: containerProp, ...portalProps } = props;
     const [mounted, setMounted] = React30.useState(false);
-    useLayoutEffect2(() => setMounted(true), []);
+    useLayoutEffect22(() => setMounted(true), []);
     const container = containerProp || mounted && globalThis?.document?.body;
     return container ? ReactDOM4.createPortal(/* @__PURE__ */ jsx33(Primitive.div, { ...portalProps, ref: forwardedRef }), container) : null;
   }, "Portal")
@@ -36395,7 +36436,7 @@ function usePresence(present) {
       prevAnimationNameRef.current = "none";
     }
   }, [state]);
-  useLayoutEffect2(() => {
+  useLayoutEffect22(() => {
     const styles = stylesRef.current;
     const wasPresent = prevPresentRef.current;
     const hasPresentChanged = wasPresent !== present;
@@ -36418,7 +36459,7 @@ function usePresence(present) {
       prevPresentRef.current = present;
     }
   }, [present, send]);
-  useLayoutEffect2(() => {
+  useLayoutEffect22(() => {
     if (node) {
       let timeoutId;
       const ownerWindow = node.ownerDocument.defaultView ?? window;
@@ -36698,7 +36739,7 @@ var RovingFocusGroupItem = /* @__PURE__ */ React33.forwardRef(
     const getItems = useCollection(__scopeRovingFocusGroup);
     const { onFocusableItemAdd, onFocusableItemRemove, currentTabStopId } = context;
     const isHydrated = useIsHydrated2();
-    useLayoutEffect2(() => {
+    useLayoutEffect22(() => {
       if (!isHydrated || !focusable) {
         return;
       }
@@ -38592,12 +38633,12 @@ var DropdownMenuSubContent = /* @__PURE__ */ React42.forwardRef(/* @__PURE__ */
 }, "DropdownMenuSubContent"));
 
 // src/components/ViewportSubContent.tsx
-import { useLayoutEffect as useLayoutEffect5, useState as useState40 } from "react";
+import { useLayoutEffect as useLayoutEffect6, useState as useState40 } from "react";
 import { jsx as jsx37 } from "react/jsx-runtime";
 var ViewportSubContent = (props) => {
   const [content, setContent] = useState40(null);
   const [overlapWidth, setOverlapWidth] = useState40();
-  useLayoutEffect5(() => {
+  useLayoutEffect6(() => {
     if (!content) return;
     const trigger = document.getElementById(
       content.getAttribute("aria-labelledby") ?? ""
@@ -39740,10 +39781,10 @@ var ContextMenu = ({
 };
 
 // src/components/KeyboardShortcutsDialog.tsx
-import { useEffect as useEffect55, useMemo as useMemo41, useRef as useRef28, useState as useState44 } from "react";
+import { useEffect as useEffect55, useMemo as useMemo40, useRef as useRef28, useState as useState44 } from "react";
 
 // src/hooks/useRegisteredHotkey.ts
-import { useEffect as useEffect54, useMemo as useMemo40, useRef as useRef27, useState as useState43 } from "react";
+import { useEffect as useEffect54, useMemo as useMemo39, useRef as useRef27, useState as useState43 } from "react";
 var hotkeyRegistry = /* @__PURE__ */ new Map();
 var subscribers = /* @__PURE__ */ new Set();
 var isListenerAttached = false;
@@ -39867,7 +39908,7 @@ var subscribeToRegistry = (subscriber) => {
 var useRegisteredHotkey = (id, handler, metadata) => {
   const handlerRef = useRef27(handler);
   handlerRef.current = handler;
-  const normalizedMetadata = useMemo40(
+  const normalizedMetadata = useMemo39(
     () => ({
       shortcut: metadata.shortcut,
       description: metadata.description
@@ -39925,7 +39966,7 @@ var KeyboardShortcutsDialog = ({
       }, 0);
     }
   }, [open]);
-  const filteredHotkeys = useMemo41(() => {
+  const filteredHotkeys = useMemo40(() => {
     const normalizedQuery = query.trim().toLowerCase();
     if (!normalizedQuery) {
       return hotkeys;
@@ -41152,10 +41193,10 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
 import {
   GLTFExporter as GLTFExporter3
 } from "three/examples/jsm/exporters/GLTFExporter.js";
-import { useEffect as useEffect58, useState as useState47, useMemo as useMemo42, useCallback as useCallback26 } from "react";
+import { useEffect as useEffect58, useState as useState47, useMemo as useMemo41, useCallback as useCallback26 } from "react";
 function useSaveGltfAs(options = {}) {
   const parse2 = useParser(options);
-  const link = useMemo42(() => document.createElement("a"), []);
+  const link = useMemo41(() => document.createElement("a"), []);
   const saveAs = async (filename) => {
     const name = filename ?? options.filename ?? "";
     if (options.binary == null) options.binary = name.endsWith(".glb");
@@ -41190,7 +41231,7 @@ function useExportGltfUrl(options = {}) {
   return [ref, url, error];
 }
 function useParser(options = {}) {
-  const exporter = useMemo42(() => new GLTFExporter3(), []);
+  const exporter = useMemo41(() => new GLTFExporter3(), []);
   return (instance) => {
     const { promise, resolve, reject } = Promise.withResolvers();
     exporter.parse(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/3d-viewer",
-  "version": "0.0.640",
+  "version": "0.0.642",
   "repository": {
     "type": "git",
     "url": "https://github.com/tscircuit/3d-viewer"