@file-viewer/renderer-3d 2.1.12 → 2.1.14

package/dist/model.js

@@ -1,6 +1,6 @@
 import * as THREE from 'three';
 import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-import { createFileViewerTranslator, } from '@file-viewer/core';
+import { createFileViewerViewStateChange, createFileViewerViewStateChangeEmitter, createFileViewerTranslator, registerFileViewerViewStateProvider, unregisterFileViewerViewStateProvider, } from '@file-viewer/core';
 import { formatGeometryKernelNotice, inspectGeometryKernelFile, isGeometryKernelFormat, } from '@file-viewer/geometry-engine';
 const modelStyle = `
 .model-viewer{display:flex;height:100%;min-height:100%;flex-direction:column;background:#f8fafc;color:#162333}
@@ -106,6 +106,7 @@ export default async function renderModel(buffer, target, type = 'glb', context)
     let activeVersion = 0;
     let mixer = null;
     const clock = new THREE.Clock();
+    const viewStateEmitter = createFileViewerViewStateChangeEmitter();
     const root = createElement('div', 'model-viewer');
     const toolbar = createElement('div', 'model-toolbar');
     const actions = createElement('div', 'model-actions');
@@ -165,6 +166,68 @@ export default async function renderModel(buffer, target, type = 'glb', context)
         }
         updateUi();
     };
+    const vectorToArray = (vector) => {
+        return vector ? [vector.x, vector.y, vector.z] : undefined;
+    };
+    const readVector = (value, fallback) => {
+        if (!Array.isArray(value)) {
+            return fallback.clone();
+        }
+        const [x, y, z] = value.map(Number);
+        if (!Number.isFinite(x) || !Number.isFinite(y) || !Number.isFinite(z)) {
+            return fallback.clone();
+        }
+        return new THREE.Vector3(x, y, z);
+    };
+    const getModelViewState = () => ({
+        renderer: 'model',
+        extra: {
+            status,
+            cameraPosition: vectorToArray(camera?.position),
+            cameraTarget: vectorToArray(controls?.target),
+            autoRotate,
+            wireframe,
+            showGrid,
+            showAxes,
+        },
+    });
+    const emitViewStateChange = (action, source = 'viewer') => {
+        const state = getModelViewState();
+        viewStateEmitter.emit(createFileViewerViewStateChange(state, { action, source }));
+        return state;
+    };
+    const applyModelViewState = (state, applyOptions = {}) => {
+        const source = applyOptions.source || 'api';
+        const action = applyOptions.action || 'restore';
+        const notify = applyOptions.notify !== false;
+        if (camera) {
+            camera.position.copy(readVector(state.extra?.cameraPosition, camera.position));
+            camera.updateProjectionMatrix();
+        }
+        if (controls) {
+            controls.target.copy(readVector(state.extra?.cameraTarget, controls.target));
+            controls.update();
+        }
+        if (typeof state.extra?.autoRotate === 'boolean') {
+            autoRotate = state.extra.autoRotate;
+        }
+        if (typeof state.extra?.wireframe === 'boolean') {
+            wireframe = state.extra.wireframe;
+            updateWireframe();
+        }
+        if (typeof state.extra?.showGrid === 'boolean') {
+            showGrid = state.extra.showGrid;
+        }
+        if (typeof state.extra?.showAxes === 'boolean') {
+            showAxes = state.extra.showAxes;
+        }
+        updateHelperVisibility();
+        updateUi();
+        if (notify) {
+            return emitViewStateChange(action, source);
+        }
+        return getModelViewState();
+    };
     const resize = () => {
         if (!renderer || !camera) {
             return;
@@ -296,7 +359,7 @@ export default async function renderModel(buffer, target, type = 'glb', context)
             size,
         };
     };
-    const fitToView = () => {
+    const fitToView = (source = 'viewer') => {
         if (!modelRoot || !camera || !controls) {
             return;
         }
@@ -311,6 +374,7 @@ export default async function renderModel(buffer, target, type = 'glb', context)
         camera.updateProjectionMatrix();
         controls.target.copy(center);
         controls.update();
+        emitViewStateChange('fit', source);
     };
     const addModelToScene = async (object) => {
         if (!scene) {
@@ -522,25 +586,39 @@ export default async function renderModel(buffer, target, type = 'glb', context)
         }
         updateUi();
     };
-    fitButton.addEventListener('click', fitToView);
+    const onControlsEnd = () => {
+        emitViewStateChange('camera-change', 'user');
+    };
+    fitButton.addEventListener('click', () => fitToView('user'));
     rotateButton.addEventListener('click', () => {
         autoRotate = !autoRotate;
         updateUi();
+        emitViewStateChange('view-option-change', 'user');
     });
     wireframeButton.addEventListener('click', () => {
         wireframe = !wireframe;
         updateWireframe();
+        emitViewStateChange('view-option-change', 'user');
     });
     gridButton.addEventListener('click', () => {
         showGrid = !showGrid;
         updateHelperVisibility();
+        emitViewStateChange('view-option-change', 'user');
     });
     axesButton.addEventListener('click', () => {
         showAxes = !showAxes;
         updateHelperVisibility();
+        emitViewStateChange('view-option-change', 'user');
     });
     updateUi();
     ensureScene();
+    const controlsWithEvents = controls;
+    controlsWithEvents?.addEventListener('end', onControlsEnd);
+    registerFileViewerViewStateProvider(root, {
+        getState: getModelViewState,
+        applyState: applyModelViewState,
+        subscribe: viewStateEmitter.subscribe,
+    });
     resizeObserver = new ResizeObserver(resize);
     resizeObserver.observe(canvas);
     clock.start();
@@ -554,6 +632,8 @@ export default async function renderModel(buffer, target, type = 'glb', context)
             resizeObserver?.disconnect();
             resizeObserver = null;
             clearModel();
+            controlsWithEvents?.removeEventListener('end', onControlsEnd);
+            unregisterFileViewerViewStateProvider(root);
             controls?.dispose();
             controls = null;
             renderer?.dispose();

package/package.json

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