@file-viewer/renderer-3d 2.2.3 → 2.2.5

package/dist/model.js

@@ -3,6 +3,7 @@ import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 import { createFileViewerViewStateChange, createFileViewerViewStateChangeEmitter, createFileViewerZoomChangeEmitter, createFileViewerTranslator, registerFileViewerZoomProvider, registerFileViewerViewStateProvider, resolveFileViewerColorScheme, resolveFileViewerLocale, resolveFileViewerModelAssetUrls, resolveFileViewerRuntimeAssetBaseUrl, unregisterFileViewerZoomProvider, unregisterFileViewerViewStateProvider, } from '@file-viewer/core';
 import { formatGeometryKernelNotice, importOcctGeometryFile, inspectGeometryKernelFile, isGeometryKernelFormat, } from '@file-viewer/geometry-engine';
 import { buildOcctThreeObject } from './occtModel.js';
+import { syncModelViewport } from './modelViewport.js';
 const modelStyle = `
 .model-viewer{display:flex;height:100%;min-height:100%;flex-direction:column;background:#f8fafc;color:#162333}
 .model-viewer *{box-sizing:border-box}
@@ -199,6 +200,8 @@ export default async function renderModel(buffer, target, type = 'glb', context)
     let stopSystemThemeListener = null;
     let activeDarkMode = null;
     let resizeObserver = null;
+    let controlsWithEvents = null;
+    let disposed = false;
     let animationFrame = 0;
     let activeVersion = 0;
     let modelMeshCount = 0;
@@ -397,12 +400,13 @@ export default async function renderModel(buffer, target, type = 'glb', context)
         if (!renderer || !camera) {
             return;
         }
-        const rect = canvas.getBoundingClientRect();
-        const width = Math.max(1, Math.floor(rect.width));
-        const height = Math.max(1, Math.floor(rect.height));
-        renderer.setSize(width, height, false);
-        camera.aspect = width / height;
-        camera.updateProjectionMatrix();
+        syncModelViewport({
+            renderer,
+            camera,
+            stage,
+            canvas,
+            devicePixelRatio: target.ownerDocument.defaultView?.devicePixelRatio || 1,
+        });
     };
     const findThemeHost = () => {
         let current = root;
@@ -495,7 +499,6 @@ export default async function renderModel(buffer, target, type = 'glb', context)
                 canvas,
                 powerPreference: 'high-performance',
             });
-            renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
             renderer.outputColorSpace = THREE.SRGBColorSpace;
         }
         if (!scene) {
@@ -525,6 +528,10 @@ export default async function renderModel(buffer, target, type = 'glb', context)
         applyModelTheme(initializeTheme);
         updateHelperVisibility();
         resize();
+        if (!controls) {
+            throw new Error('Failed to initialize 3D controls.');
+        }
+        return controls;
     };
     const clearModel = () => {
         if (modelRoot && scene) {
@@ -919,12 +926,18 @@ export default async function renderModel(buffer, target, type = 'glb', context)
             errorMessage = normalizeError(reason) || t('model.error.parseFailed', { type: normalizedType.toUpperCase() });
             updateUi();
             zoomEmitter.emit();
+            throw reason instanceof Error ? reason : new Error(errorMessage);
         }
     };
     const renderFrame = (timestamp) => {
         if (!renderer || !scene || !camera || !controls) {
             return;
         }
+        // A framework transition or a repeated File assignment can reset canvas
+        // attributes without changing its CSS box. ResizeObserver will not see
+        // that backing-buffer downgrade, so validate the cheap size contract on
+        // each frame and resize only when the values diverge.
+        resize();
         timer.update(timestamp);
         const delta = timer.getDelta();
         controls.autoRotate = autoRotate;
@@ -972,63 +985,75 @@ export default async function renderModel(buffer, target, type = 'glb', context)
         updateHelperVisibility();
         emitViewStateChange('view-option-change', 'user');
     });
-    updateUi();
-    ensureScene();
-    observeModelTheme();
-    const controlsWithEvents = controls;
-    controlsWithEvents?.addEventListener('start', onControlsStart);
-    controlsWithEvents?.addEventListener('end', onControlsEnd);
-    registerFileViewerZoomProvider(root, {
-        zoomIn: () => setModelZoom(getModelScale() * MODEL_ZOOM_STEP, 'user', 'zoom-in'),
-        zoomOut: () => setModelZoom(getModelScale() / MODEL_ZOOM_STEP, 'user', 'zoom-out'),
-        resetZoom: () => setModelZoom(1, 'user', 'zoom-reset'),
-        setZoom: scale => setModelZoom(scale, 'api', 'zoom-change'),
-        fit: applyModelFit,
-        getState: getModelZoomState,
-        subscribe: zoomEmitter.subscribe,
-    });
-    registerFileViewerViewStateProvider(root, {
-        getState: getModelViewState,
-        applyState: applyModelViewState,
-        fit: applyModelFit,
-        subscribe: viewStateEmitter.subscribe,
-    });
-    resizeObserver = new ResizeObserver(resize);
-    resizeObserver.observe(canvas);
-    timer.connect(target.ownerDocument);
-    renderFrame();
-    await loadModel();
+    const cleanup = () => {
+        if (disposed)
+            return;
+        disposed = true;
+        activeVersion += 1;
+        window.cancelAnimationFrame(animationFrame);
+        resizeObserver?.disconnect();
+        resizeObserver = null;
+        themeObserver?.disconnect();
+        themeObserver = null;
+        stopSystemThemeListener?.();
+        stopSystemThemeListener = null;
+        clearModel();
+        controlsWithEvents?.removeEventListener('start', onControlsStart);
+        controlsWithEvents?.removeEventListener('end', onControlsEnd);
+        controlsWithEvents = null;
+        unregisterFileViewerZoomProvider(root);
+        unregisterFileViewerViewStateProvider(root);
+        controls?.dispose();
+        controls = null;
+        if (scene) {
+            disposeObject(scene);
+        }
+        renderer?.dispose();
+        renderer?.renderLists.dispose();
+        renderer = null;
+        timer.dispose();
+        scene = null;
+        camera = null;
+        gridHelper = null;
+        axesHelper = null;
+        hemisphereLight = null;
+        target.replaceChildren();
+    };
+    try {
+        updateUi();
+        controlsWithEvents = ensureScene();
+        observeModelTheme();
+        controlsWithEvents.addEventListener('start', onControlsStart);
+        controlsWithEvents.addEventListener('end', onControlsEnd);
+        registerFileViewerZoomProvider(root, {
+            zoomIn: () => setModelZoom(getModelScale() * MODEL_ZOOM_STEP, 'user', 'zoom-in'),
+            zoomOut: () => setModelZoom(getModelScale() / MODEL_ZOOM_STEP, 'user', 'zoom-out'),
+            resetZoom: () => setModelZoom(1, 'user', 'zoom-reset'),
+            setZoom: scale => setModelZoom(scale, 'api', 'zoom-change'),
+            fit: applyModelFit,
+            getState: getModelZoomState,
+            subscribe: zoomEmitter.subscribe,
+        });
+        registerFileViewerViewStateProvider(root, {
+            getState: getModelViewState,
+            applyState: applyModelViewState,
+            fit: applyModelFit,
+            subscribe: viewStateEmitter.subscribe,
+        });
+        resizeObserver = new ResizeObserver(resize);
+        resizeObserver.observe(stage);
+        timer.connect(target.ownerDocument);
+        renderFrame();
+        await loadModel();
+    }
+    catch (error) {
+        cleanup();
+        throw error;
+    }
     return {
         $el: root,
         unmount() {
-            activeVersion += 1;
-            window.cancelAnimationFrame(animationFrame);
-            resizeObserver?.disconnect();
-            resizeObserver = null;
-            themeObserver?.disconnect();
-            themeObserver = null;
-            stopSystemThemeListener?.();
-            stopSystemThemeListener = null;
-            clearModel();
-            controlsWithEvents?.removeEventListener('start', onControlsStart);
-            controlsWithEvents?.removeEventListener('end', onControlsEnd);
-            unregisterFileViewerZoomProvider(root);
-            unregisterFileViewerViewStateProvider(root);
-            controls?.dispose();
-            controls = null;
-            if (scene) {
-                disposeObject(scene);
-            }
-            renderer?.dispose();
-            renderer?.renderLists.dispose();
-            renderer = null;
-            timer.dispose();
-            scene = null;
-            camera = null;
-            gridHelper = null;
-            axesHelper = null;
-            hemisphereLight = null;
-            target.replaceChildren();
+            cleanup();
         },
     };
 }

package/dist/modelViewport.d.ts

@@ -0,0 +1,23 @@
+export interface ModelViewportRenderer {
+    getPixelRatio(): number;
+    setPixelRatio(value: number): void;
+    setSize(width: number, height: number, updateStyle: boolean): void;
+}
+export interface ModelViewportCamera {
+    aspect: number;
+    updateProjectionMatrix(): void;
+}
+export interface SyncModelViewportInput {
+    renderer: ModelViewportRenderer;
+    camera: ModelViewportCamera;
+    stage: HTMLElement;
+    canvas: HTMLCanvasElement;
+    devicePixelRatio?: number;
+}
+export interface ModelViewportState {
+    width: number;
+    height: number;
+    pixelRatio: number;
+    resized: boolean;
+}
+export declare const syncModelViewport: ({ renderer, camera, stage, canvas, devicePixelRatio }: SyncModelViewportInput) => ModelViewportState;

package/dist/modelViewport.js

@@ -0,0 +1,39 @@
+const resolveCssSize = (stage, canvas) => {
+    return {
+        width: Math.max(1, Math.floor(stage.clientWidth ||
+            canvas.clientWidth ||
+            stage.getBoundingClientRect().width ||
+            canvas.getBoundingClientRect().width)),
+        height: Math.max(1, Math.floor(stage.clientHeight ||
+            canvas.clientHeight ||
+            stage.getBoundingClientRect().height ||
+            canvas.getBoundingClientRect().height))
+    };
+};
+export const syncModelViewport = ({ renderer, camera, stage, canvas, devicePixelRatio = 1 }) => {
+    const { width, height } = resolveCssSize(stage, canvas);
+    const pixelRatio = Math.min(2, Math.max(1, Number.isFinite(devicePixelRatio) ? devicePixelRatio : 1));
+    const pixelRatioChanged = Math.abs(renderer.getPixelRatio() - pixelRatio) > 0.001;
+    if (pixelRatioChanged) {
+        renderer.setPixelRatio(pixelRatio);
+    }
+    const expectedWidth = Math.max(1, Math.floor(width * pixelRatio));
+    const expectedHeight = Math.max(1, Math.floor(height * pixelRatio));
+    const resized = (pixelRatioChanged ||
+        canvas.width !== expectedWidth ||
+        canvas.height !== expectedHeight);
+    if (resized) {
+        renderer.setSize(width, height, false);
+    }
+    const aspect = width / height;
+    if (Math.abs(camera.aspect - aspect) > 0.0001) {
+        camera.aspect = aspect;
+        camera.updateProjectionMatrix();
+    }
+    return {
+        width,
+        height,
+        pixelRatio,
+        resized
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@file-viewer/renderer-3d",
-  "version": "2.2.3",
+  "version": "2.2.5",
   "private": false,
   "type": "module",
   "description": "Standalone 3D model renderer plugin for File Viewer powered by Three.js loaders and OrbitControls.",
@@ -57,8 +57,8 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@file-viewer/core": "2.2.3",
-    "@file-viewer/geometry-engine": "2.2.3",
+    "@file-viewer/core": "2.2.5",
+    "@file-viewer/geometry-engine": "2.2.5",
     "three": "^0.184.0"
   },
   "devDependencies": {