@configura/babylon-view 1.3.0-alpha.3 → 1.3.0

package/dist/view/BaseView.js

@@ -1,291 +1,297 @@
-import "@babylonjs/core/Debug/debugLayer.js";
-import { Matrix } from "@babylonjs/core/Maths/math.vector.js";
-import { AssetsManager } from "@babylonjs/core/Misc/assetsManager.js";
-import { SymGetMeshEnv } from "@configura/web-core/dist/cm/format/cmsym/components/SymGetMeshEnv.js";
-import { DexManager } from "@configura/web-core/dist/cm/format/dex/DexManager.js";
-import { AggregatedLoadingObservable, isAbortError, Observable, PromiseCache, toError, } from "@configura/web-utilities";
-import { getDefaultGradingApplier } from "../camera/GradingApplier.js";
-import { getDefaultEngine } from "../engine/EngineCreator.js";
-import { getDefaultLightRigCreator } from "../light/DefaultLightRig.js";
-import { defaultDummyMaterialCreator, } from "../material/DummyMaterialCreator.js";
-import { CfgContentRootNode } from "../nodes/CfgContentRootNode.js";
-import { getDefaultScene } from "../scene/SceneCreator.js";
-import { CfgBoundingBox } from "../utilities/CfgBoundingBox.js";
-import { cameraConfigurationPropsEquals, DetailLevel, } from "./BaseViewConfiguration.js";
-// CET coordinate system is Z-up, Babylon is Y-up, both are right handed
-// CET coordinates are used in the CfgProductNode and all its children.
-export const CET_TO_BABYLON_MATRIX = Matrix.RotationX(-Math.PI / 2);
-export const BABYLON_TO_CET_MATRIX = Matrix.RotationX(Math.PI / 2);
-const ENABLE_CONTINUOUS_RENDER = false;
-const CULL_EMPTY_NODES = true;
-/// Load the highest quality meshes by default.
-///
-/// @remarks We only use "base" as a last fallback. The reason is that even though this LOD level
-/// could theoretically include a better version than "super" it is not normally included in CmSym
-/// files and never used by CET, which makes it unpredictable. See WRD-387 for a case where it
-/// caused problems when it was the first choice.
-export const DEFAULT_DETAIL_LEVELS = [
-    DetailLevel.super,
-    DetailLevel.high,
-    DetailLevel.medium,
-    DetailLevel.low,
-    DetailLevel.base,
-];
-// As this cache contains items read from a another resource undefined
-// is an acceptable cache value representing a value that will not be
-// anything but undefined no mather how many times you try.
-const geometryCache = new PromiseCache();
-const symNodeCache = new PromiseCache();
-const materialCache = new PromiseCache();
-const textureImageCache = new PromiseCache();
-const derivedNormalMapCache = new PromiseCache();
-// Singletons
-const SYM_MESH_ENV = new SymGetMeshEnv();
-const DEX_MANAGER = new DexManager("BabylonCanvas");
-function getAssetManager(scene) {
-    const assetsManager = new AssetsManager(scene);
-    assetsManager.useDefaultLoadingScreen = false;
-    return assetsManager;
-}
-export class BaseView {
-    constructor(options) {
-        this._destroyed = false;
-        this._inspectorActive = false;
-        this._needsRenderFrame = false;
-        this._dumpNextFrameToImage = [];
-        this._enginePauseSemaphore = 0;
-        this._errorObservable = new Observable();
-        this._loadingObservable = new AggregatedLoadingObservable();
-        this._renderEnvironmentObservable = new Observable();
-        // To be able to add/remove event listeners without binding them
-        this._boundNotifyCameraListeners = () => {
-            this.notifyCameraListeners();
-            this.scheduleRerender();
-        };
-        this.notifyError = (e) => {
-            if (isAbortError(e)) {
-                return;
-            }
-            this._errorObservable.notifyAll(toError(e));
-        };
-        const { canvas, cameraCreator, engineCreator, lightRigCreator, sceneCreator, gradingApplier, dummyMaterialCreator, } = options;
-        this._canvas = canvas;
-        // This workaround prevents canvas long taps to select text near the canvas on iOS
-        for (const eventName of [
-            "click",
-            "dblclick",
-            "mousedown",
-            "mouseup",
-            "mousemove",
-            "touchstart",
-            "touchend",
-            "touchmove",
-        ]) {
-            canvas.addEventListener(eventName, (event) => {
-                event.preventDefault();
-            });
-        }
-        const { width, height } = canvas.getBoundingClientRect();
-        this._viewportSize = [width, height];
-        const engine = (engineCreator || getDefaultEngine)(canvas, width, height);
-        const scene = (sceneCreator || getDefaultScene)(engine);
-        scene.useRightHandedSystem = true;
-        const camera = cameraCreator(scene, canvas);
-        (gradingApplier || getDefaultGradingApplier())(camera);
-        this._scene = scene;
-        this._engine = engine;
-        this._camera = camera;
-        const lightRig = (lightRigCreator || getDefaultLightRigCreator(true))(scene, camera);
-        this._lightRig = lightRig;
-        this._dummyMaterialCreator = dummyMaterialCreator || defaultDummyMaterialCreator;
-        this._renderEnvironment = {
-            scene,
-            assetsManager: getAssetManager(scene),
-            geometryCache,
-            symNodeCache,
-            materialCache,
-            textureImageCache,
-            derivedNormalMapCache,
-            lightRig,
-            dummyMaterial: this._dummyMaterialCreator(scene, lightRig.lightCount),
-            scheduleRerender: this.scheduleRerender.bind(this),
-            notifyError: this.notifyError.bind(this),
-            symMeshEnv: SYM_MESH_ENV,
-            dexManager: DEX_MANAGER,
-            cullEmptyNodes: CULL_EMPTY_NODES,
-            allowedDetailLevels: DEFAULT_DETAIL_LEVELS,
-        };
-        this._contentRoot = new CfgContentRootNode(this._renderEnvironment);
-        this.setConfiguration({}); // Init the RenderEnv
-        requestAnimationFrame(this.browserTick.bind(this));
-        // NOTE: As of now we mix view and projection-related properties when we notify, so let's subscribe to both
-        this._camera.onViewMatrixChangedObservable.add(this._boundNotifyCameraListeners);
-        this._camera.onProjectionMatrixChangedObservable.add(this._boundNotifyCameraListeners);
-    }
-    destroy() {
-        this._destroyed = true;
-        this._camera.onViewMatrixChangedObservable.removeCallback(this._boundNotifyCameraListeners);
-        this._camera.onProjectionMatrixChangedObservable.removeCallback(this._boundNotifyCameraListeners);
-        this._hideInspector();
-        this._camera.dispose();
-        geometryCache.clear();
-        materialCache.clear();
-    }
-    pauseRendering() {
-        this._enginePauseSemaphore += 1;
-    }
-    resumeRendering() {
-        this._enginePauseSemaphore = Math.max(0, this._enginePauseSemaphore - 1);
-    }
-    _hideInspector() {
-        // The debugLayer getter initializes the backing field _debugLayer, but if we do that before
-        // "@babylonjs/inspector" is loaded it will not work properly.
-        if (this._scene._debugLayer === undefined) {
-            return;
-        }
-        this._scene.debugLayer.hide();
-    }
-    showInspector(target) {
-        if (target === undefined) {
-            this._hideInspector();
-        }
-        else {
-            if (!this._scene.debugLayer.BJSINSPECTOR) {
-                console.warn("@babylonjs/inspector has to be loaded before the Inspector can be shown.");
-                return;
-            }
-            this._scene.debugLayer.show({
-                globalRoot: target,
-                enableClose: false,
-            });
-        }
-        this._inspectorActive = target !== undefined;
-    }
-    setConfiguration(configuration) {
-        if (configuration.allowedDetailLevels !== undefined) {
-            this._renderEnvironment.allowedDetailLevels = configuration.allowedDetailLevels;
-        }
-        this._renderEnvironmentObservable.notifyAll(this._renderEnvironment);
-    }
-    get cameraConfiguration() {
-        return {
-            nearClipping: this._camera.minZ,
-            farClipping: this._camera.maxZ,
-            position: this._camera.position.clone(),
-            contentPosition: this.contentCenter,
-            fov: this._camera.fov,
-            aspect: this._engine.getScreenAspectRatio(),
-        };
-    }
-    get contentCenter() {
-        const { min, max } = this._contentRoot.getHierarchyBoundingVectors();
-        return new CfgBoundingBox(min, max).center;
-    }
-    notifyCameraListeners() {
-        if (this._cameraConfigurationObservable === undefined) {
-            return;
-        }
-        const cameraConf = this.cameraConfiguration;
-        if (this._previousCameraConf !== undefined &&
-            cameraConfigurationPropsEquals(this._previousCameraConf, cameraConf)) {
-            return;
-        }
-        this._cameraConfigurationObservable.notifyAll(cameraConf, this._cameraConfigurationObservable);
-        this._previousCameraConf = cameraConf;
-    }
-    addEventListener(event, listener) {
-        switch (event) {
-            case "cameraConfiguration":
-                if (this._cameraConfigurationObservable === undefined) {
-                    this._cameraConfigurationObservable =
-                        new Observable();
-                }
-                this._cameraConfigurationObservable.listen(listener);
-                break;
-            case "renderEnv":
-                const l = listener;
-                this._renderEnvironmentObservable.listen(l);
-                l(this._renderEnvironment);
-                break;
-            case "error":
-                this._errorObservable.listen(listener);
-                break;
-            case "loading":
-                this._loadingObservable.listen(listener);
-                break;
-            default:
-                throw Error(`Unknown event-type ${event}`);
-        }
-    }
-    removeEventListener(event, listener) {
-        switch (event) {
-            case "cameraConfiguration":
-                if (this._cameraConfigurationObservable === undefined) {
-                    return;
-                }
-                this._cameraConfigurationObservable.stopListen(listener);
-                break;
-            case "renderEnv":
-                this._renderEnvironmentObservable.stopListen(listener);
-                break;
-            case "error":
-                this._errorObservable.stopListen(listener);
-                break;
-            case "loading":
-                this._loadingObservable.stopListen(listener);
-                break;
-            default:
-                throw Error(`Unknown event-type ${event}`);
-        }
-    }
-    scheduleRerender(dumpNextFrameToImage) {
-        this._needsRenderFrame = true;
-        if (dumpNextFrameToImage !== undefined) {
-            this._dumpNextFrameToImage.push(dumpNextFrameToImage);
-        }
-    }
-    isContinuousRender() {
-        return ENABLE_CONTINUOUS_RENDER || this._inspectorActive;
-    }
-    getNeededFrameRender(time) {
-        return this._needsRenderFrame || this.isContinuousRender();
-    }
-    browserTick(time) {
-        if (this._destroyed) {
-            return;
-        }
-        this._camera.update();
-        if (this._enginePauseSemaphore === 0 && this.getNeededFrameRender(time)) {
-            this.renderFrame(time);
-        }
-        requestAnimationFrame(this.browserTick.bind(this));
-    }
-    renderFrame(time) {
-        if (this._viewportSize === undefined) {
-            console.warn("Size not inited");
-            return;
-        }
-        this._needsRenderFrame = false;
-        this.refreshCameraNearFar();
-        this._engine.beginFrame();
-        this._scene.render();
-        this._engine.endFrame();
-        if (0 < this._dumpNextFrameToImage.length) {
-            const dataUrl = this._canvas.toDataURL("image/png");
-            this._dumpNextFrameToImage.forEach((c) => c(dataUrl));
-            this._dumpNextFrameToImage.length = 0;
-        }
-    }
-    resizeViewport(width, height) {
-        this._viewportSize = [width, height];
-        this._canvas.style.width = Math.floor(width) + "px";
-        this._canvas.style.height = Math.floor(height) + "px";
-        this._engine.resize();
-        this.handleSizing(false);
-        this.scheduleRerender();
-    }
-    // Exists to be overridden
-    handleSizing(_force) { }
-    // Exists to be overridden
-    refreshCameraNearFar() { }
-}
+import "@babylonjs/core/Debug/debugLayer.js";
+import { Matrix } from "@babylonjs/core/Maths/math.vector.js";
+import { AssetsManager } from "@babylonjs/core/Misc/assetsManager.js";
+import { SymGetMeshEnv } from "@configura/web-core/dist/cm/format/cmsym/components/SymGetMeshEnv.js";
+import { DexManager } from "@configura/web-core/dist/cm/format/dex/DexManager.js";
+import { AggregatedLoadingObservable, isAbortError, Observable, PromiseCache, toError, } from "@configura/web-utilities";
+import { getDefaultGradingApplier } from "../camera/GradingApplier.js";
+import { getDefaultEngine } from "../engine/EngineCreator.js";
+import { getDefaultLightRigCreator } from "../light/DefaultLightRig.js";
+import { defaultDummyMaterialCreator, } from "../material/DummyMaterialCreator.js";
+import { CfgContentRootNode } from "../nodes/CfgContentRootNode.js";
+import { getDefaultScene } from "../scene/SceneCreator.js";
+import { CfgBoundingBox } from "../utilities/CfgBoundingBox.js";
+import { cameraConfigurationPropsEquals, DetailLevel, } from "./BaseViewConfiguration.js";
+// CET coordinate system is Z-up, Babylon is Y-up, both are right handed
+// CET coordinates are used in the CfgProductNode and all its children.
+export const CET_TO_BABYLON_MATRIX = Matrix.RotationX(-Math.PI / 2);
+export const BABYLON_TO_CET_MATRIX = Matrix.RotationX(Math.PI / 2);
+const ENABLE_CONTINUOUS_RENDER = false;
+const CULL_EMPTY_NODES = true;
+/**
+ * Load the highest quality meshes by default.
+ *
+ * @remarks We only use "base" as a last fallback. The reason is that even though this LOD level
+ * could theoretically include a better version than "super" it is not normally included in CmSym
+ * files and never used by CET, which makes it unpredictable. See WRD-387 for a case where it
+ * caused problems when it was the first choice.
+ */
+export const DEFAULT_DETAIL_LEVELS = [
+    DetailLevel.super,
+    DetailLevel.high,
+    DetailLevel.medium,
+    DetailLevel.low,
+    DetailLevel.base,
+];
+/**
+ * @remarks As this cache contains items read from a another resource undefined is an acceptable
+ * cache value representing a value that will not be anything but undefined no mather how many
+ * times you try.
+ */
+const geometryCache = new PromiseCache((i1, i2) => i1.component === i2.component &&
+    i1.stretchDatasHash === i2.stretchDatasHash &&
+    i1.uvMapperHash === i2.uvMapperHash);
+const symNodeCache = new PromiseCache();
+const materialCache = new PromiseCache();
+const textureImageCache = new PromiseCache();
+const derivedNormalMapCache = new PromiseCache();
+// Singletons
+const SYM_MESH_ENV = new SymGetMeshEnv();
+const DEX_MANAGER = new DexManager("BabylonCanvas");
+function getAssetManager(scene) {
+    const assetsManager = new AssetsManager(scene);
+    assetsManager.useDefaultLoadingScreen = false;
+    return assetsManager;
+}
+export class BaseView {
+    constructor(options) {
+        this._destroyed = false;
+        this._inspectorActive = false;
+        this._needsRenderFrame = false;
+        this._dumpNextFrameToImage = [];
+        this._enginePauseSemaphore = 0;
+        this._errorObservable = new Observable();
+        this._loadingObservable = new AggregatedLoadingObservable();
+        this._renderEnvironmentObservable = new Observable();
+        // To be able to add/remove event listeners without binding them
+        this._boundNotifyCameraListeners = () => {
+            this.notifyCameraListeners();
+            this.scheduleRerender();
+        };
+        this.notifyError = (e) => {
+            if (isAbortError(e)) {
+                return;
+            }
+            this._errorObservable.notifyAll(toError(e));
+        };
+        const { canvas, cameraCreator, engineCreator, lightRigCreator, sceneCreator, gradingApplier, dummyMaterialCreator, } = options;
+        this._canvas = canvas;
+        // This workaround prevents canvas long taps to select text near the canvas on iOS
+        for (const eventName of [
+            "click",
+            "dblclick",
+            "mousedown",
+            "mouseup",
+            "mousemove",
+            "touchstart",
+            "touchend",
+            "touchmove",
+        ]) {
+            canvas.addEventListener(eventName, (event) => {
+                event.preventDefault();
+            });
+        }
+        const { width, height } = canvas.getBoundingClientRect();
+        this._viewportSize = [width, height];
+        const engine = (engineCreator || getDefaultEngine)(canvas, width, height);
+        const scene = (sceneCreator || getDefaultScene)(engine);
+        scene.useRightHandedSystem = true;
+        const camera = cameraCreator(scene, canvas);
+        (gradingApplier || getDefaultGradingApplier())(camera);
+        this._scene = scene;
+        this._engine = engine;
+        this._camera = camera;
+        const lightRig = (lightRigCreator || getDefaultLightRigCreator(true))(scene, camera);
+        this._lightRig = lightRig;
+        this._dummyMaterialCreator = dummyMaterialCreator || defaultDummyMaterialCreator;
+        this._renderEnvironment = {
+            scene,
+            assetsManager: getAssetManager(scene),
+            geometryCache,
+            symNodeCache,
+            materialCache,
+            textureImageCache,
+            derivedNormalMapCache,
+            lightRig,
+            dummyMaterial: this._dummyMaterialCreator(scene, lightRig.lightCount),
+            scheduleRerender: this.scheduleRerender.bind(this),
+            notifyError: this.notifyError.bind(this),
+            symMeshEnv: SYM_MESH_ENV,
+            dexManager: DEX_MANAGER,
+            cullEmptyNodes: CULL_EMPTY_NODES,
+            allowedDetailLevels: DEFAULT_DETAIL_LEVELS,
+        };
+        this._contentRoot = new CfgContentRootNode(this._renderEnvironment);
+        this.setConfiguration({}); // Init the RenderEnv
+        requestAnimationFrame(this.browserTick.bind(this));
+        // NOTE: As of now we mix view and projection-related properties when we notify, so let's subscribe to both
+        this._camera.onViewMatrixChangedObservable.add(this._boundNotifyCameraListeners);
+        this._camera.onProjectionMatrixChangedObservable.add(this._boundNotifyCameraListeners);
+    }
+    destroy() {
+        this._destroyed = true;
+        this._camera.onViewMatrixChangedObservable.removeCallback(this._boundNotifyCameraListeners);
+        this._camera.onProjectionMatrixChangedObservable.removeCallback(this._boundNotifyCameraListeners);
+        this._hideInspector();
+        this._camera.dispose();
+        geometryCache.clear();
+        materialCache.clear();
+    }
+    pauseRendering() {
+        this._enginePauseSemaphore += 1;
+    }
+    resumeRendering() {
+        this._enginePauseSemaphore = Math.max(0, this._enginePauseSemaphore - 1);
+    }
+    _hideInspector() {
+        // The debugLayer getter initializes the backing field _debugLayer, but if we do that before
+        // "@babylonjs/inspector" is loaded it will not work properly.
+        if (this._scene._debugLayer === undefined) {
+            return;
+        }
+        this._scene.debugLayer.hide();
+    }
+    showInspector(target) {
+        if (target === undefined) {
+            this._hideInspector();
+        }
+        else {
+            if (!this._scene.debugLayer.BJSINSPECTOR) {
+                console.warn("@babylonjs/inspector has to be loaded before the Inspector can be shown.");
+                return;
+            }
+            this._scene.debugLayer.show({
+                globalRoot: target,
+                enableClose: false,
+            });
+        }
+        this._inspectorActive = target !== undefined;
+    }
+    setConfiguration(configuration) {
+        if (configuration.allowedDetailLevels !== undefined) {
+            this._renderEnvironment.allowedDetailLevels = configuration.allowedDetailLevels;
+        }
+        this._renderEnvironmentObservable.notifyAll(this._renderEnvironment);
+    }
+    get cameraConfiguration() {
+        return {
+            nearClipping: this._camera.minZ,
+            farClipping: this._camera.maxZ,
+            position: this._camera.position.clone(),
+            contentPosition: this.contentCenter,
+            fov: this._camera.fov,
+            aspect: this._engine.getScreenAspectRatio(),
+        };
+    }
+    get contentCenter() {
+        const { min, max } = this._contentRoot.getHierarchyBoundingVectors();
+        return new CfgBoundingBox(min, max).center;
+    }
+    notifyCameraListeners() {
+        if (this._cameraConfigurationObservable === undefined) {
+            return;
+        }
+        const cameraConf = this.cameraConfiguration;
+        if (this._previousCameraConf !== undefined &&
+            cameraConfigurationPropsEquals(this._previousCameraConf, cameraConf)) {
+            return;
+        }
+        this._cameraConfigurationObservable.notifyAll(cameraConf, this._cameraConfigurationObservable);
+        this._previousCameraConf = cameraConf;
+    }
+    addEventListener(event, listener) {
+        switch (event) {
+            case "cameraConfiguration":
+                if (this._cameraConfigurationObservable === undefined) {
+                    this._cameraConfigurationObservable =
+                        new Observable();
+                }
+                this._cameraConfigurationObservable.listen(listener);
+                break;
+            case "renderEnv":
+                const l = listener;
+                this._renderEnvironmentObservable.listen(l);
+                l(this._renderEnvironment);
+                break;
+            case "error":
+                this._errorObservable.listen(listener);
+                break;
+            case "loading":
+                this._loadingObservable.listen(listener);
+                break;
+            default:
+                throw Error(`Unknown event-type ${event}`);
+        }
+    }
+    removeEventListener(event, listener) {
+        switch (event) {
+            case "cameraConfiguration":
+                if (this._cameraConfigurationObservable === undefined) {
+                    return;
+                }
+                this._cameraConfigurationObservable.stopListen(listener);
+                break;
+            case "renderEnv":
+                this._renderEnvironmentObservable.stopListen(listener);
+                break;
+            case "error":
+                this._errorObservable.stopListen(listener);
+                break;
+            case "loading":
+                this._loadingObservable.stopListen(listener);
+                break;
+            default:
+                throw Error(`Unknown event-type ${event}`);
+        }
+    }
+    scheduleRerender(dumpNextFrameToImage) {
+        this._needsRenderFrame = true;
+        if (dumpNextFrameToImage !== undefined) {
+            this._dumpNextFrameToImage.push(dumpNextFrameToImage);
+        }
+    }
+    isContinuousRender() {
+        return ENABLE_CONTINUOUS_RENDER || this._inspectorActive;
+    }
+    getNeededFrameRender(time) {
+        return this._needsRenderFrame || this.isContinuousRender();
+    }
+    browserTick(time) {
+        if (this._destroyed) {
+            return;
+        }
+        this._camera.update();
+        if (this._enginePauseSemaphore === 0 && this.getNeededFrameRender(time)) {
+            this.renderFrame(time);
+        }
+        requestAnimationFrame(this.browserTick.bind(this));
+    }
+    renderFrame(time) {
+        if (this._viewportSize === undefined) {
+            console.warn("Size not inited");
+            return;
+        }
+        this._needsRenderFrame = false;
+        this.refreshCameraNearFar();
+        this._engine.beginFrame();
+        this._scene.render();
+        this._engine.endFrame();
+        if (0 < this._dumpNextFrameToImage.length) {
+            const dataUrl = this._canvas.toDataURL("image/png");
+            this._dumpNextFrameToImage.forEach((c) => c(dataUrl));
+            this._dumpNextFrameToImage.length = 0;
+        }
+    }
+    resizeViewport(width, height) {
+        this._viewportSize = [width, height];
+        this._canvas.style.width = Math.floor(width) + "px";
+        this._canvas.style.height = Math.floor(height) + "px";
+        this._engine.resize();
+        this.handleSizing(false);
+        this.scheduleRerender();
+    }
+    // Exists to be overridden
+    handleSizing(_force) { }
+    // Exists to be overridden
+    refreshCameraNearFar() { }
+}