@configura/babylon-view 2.1.0 → 2.2.0-alpha.1

package/dist/view/SingleProductDefaultCameraViewConfiguration.d.ts

@@ -1,45 +1,45 @@
-import { EventListener } from "@configura/web-utilities";
-import { CfgOrbitalCameraBasicProps } from "../camera/CfgOrbitalCameraControlProps.js";
-import { CameraConfigurationProps } from "./BaseViewConfiguration.js";
-import { SingleProductViewConfiguration, SingleProductViewEventMap } from "./SingleProductViewConfiguration.js";
-/**
- * @param yaw Horizontal angle for the camera. Range -π to π radians. The camera will reset to this angle.
- * @param pitch Vertical angle for the camera. Range 0 to π radians, measured from the north pole. The camera will reset to this angle.
- * @param distance Only works if disableAutomaticSizing is set
- * @param initial If set these values are used for the initial configuration of the camera. If not set yaw, pitch and distance are used.
- * @param disableZoom Don't let the camera dolly in and out. Zoom is strictly speaking not correct, we only dolly the camera.
- * @param disableAutomaticSizing Turn off automatic adaption of camera distance and light rig size.
- * @param disableSubFloorCam It is common that catalogue models are designed to never be shown from below. This limits camera polar angle.
- * @param lowestAllowedCameraHeight Relative to the size of the viewed model, the lowest height the camera can reach. Setting this to 0 is the same as disableSubFloorCam. 1 means the camera can not move lower than the height of the model. Any numeric value is allowed.
- * @param autoRotate See babylon-documentation for parameter-documentation
- */
-export interface SingleProductDefaultCameraViewConfiguration extends SingleProductViewConfiguration {
-    camera?: CfgOrbitalCameraBasicProps & {
-        initial?: CfgOrbitalCameraBasicProps;
-        disableZoom?: boolean;
-        disableAutomaticSizing?: boolean;
-        disableSubFloorCam?: boolean;
-        lowestAllowedCameraHeight?: number;
-        autoRotate?: {
-            idleRotationSpeed?: number;
-            idleRotationSpinupTime?: number;
-            idleRotationWaitTime?: number;
-            zoomStopsAnimation?: boolean;
-        };
-    };
-}
-export interface SingleProductDefaultCameraViewEventMap extends SingleProductViewEventMap {
-    orbitalCameraConfiguration: OrbitalCameraConfigurationProps;
-}
-export declare type SingleProductDefaultCameraViewEventListener<K extends keyof SingleProductDefaultCameraViewEventMap> = EventListener<SingleProductDefaultCameraViewEventMap, K>;
-export interface OrbitalCameraConfigurationProps extends CameraConfigurationProps {
-    disableZoom: boolean;
-    minDistance: number;
-    maxDistance: number;
-    minYaw: number;
-    maxYaw: number;
-    minPitch: number;
-    maxPitch: number;
-}
-export declare function orbitalCameraConfigurationPropsEquals(left: OrbitalCameraConfigurationProps, right: OrbitalCameraConfigurationProps): boolean;
+import { EventListener } from "@configura/web-utilities";
+import { CfgOrbitalCameraBasicProps } from "../camera/CfgOrbitalCameraControlProps.js";
+import { CameraConfigurationProps } from "./BaseViewConfiguration.js";
+import { SingleProductViewConfiguration, SingleProductViewEventMap } from "./SingleProductViewConfiguration.js";
+/**
+ * @param yaw Horizontal angle for the camera. Range -π to π radians. The camera will reset to this angle.
+ * @param pitch Vertical angle for the camera. Range 0 to π radians, measured from the north pole. The camera will reset to this angle.
+ * @param distance Only works if disableAutomaticSizing is set
+ * @param initial If set these values are used for the initial configuration of the camera. If not set yaw, pitch and distance are used.
+ * @param disableZoom Don't let the camera dolly in and out. Zoom is strictly speaking not correct, we only dolly the camera.
+ * @param disableAutomaticSizing Turn off automatic adaption of camera distance and light rig size.
+ * @param disableSubFloorCam It is common that catalogue models are designed to never be shown from below. This limits camera polar angle.
+ * @param lowestAllowedCameraHeight Relative to the size of the viewed model, the lowest height the camera can reach. Setting this to 0 is the same as disableSubFloorCam. 1 means the camera can not move lower than the height of the model. Any numeric value is allowed.
+ * @param autoRotate See babylon-documentation for parameter-documentation
+ */
+export interface SingleProductDefaultCameraViewConfiguration extends SingleProductViewConfiguration {
+    camera?: CfgOrbitalCameraBasicProps & {
+        initial?: CfgOrbitalCameraBasicProps;
+        disableZoom?: boolean;
+        disableAutomaticSizing?: boolean;
+        disableSubFloorCam?: boolean;
+        lowestAllowedCameraHeight?: number;
+        autoRotate?: {
+            idleRotationSpeed?: number;
+            idleRotationSpinupTime?: number;
+            idleRotationWaitTime?: number;
+            zoomStopsAnimation?: boolean;
+        };
+    };
+}
+export interface SingleProductDefaultCameraViewEventMap extends SingleProductViewEventMap {
+    orbitalCameraConfiguration: OrbitalCameraConfigurationProps;
+}
+export declare type SingleProductDefaultCameraViewEventListener<K extends keyof SingleProductDefaultCameraViewEventMap> = EventListener<SingleProductDefaultCameraViewEventMap, K>;
+export interface OrbitalCameraConfigurationProps extends CameraConfigurationProps {
+    disableZoom: boolean;
+    minDistance: number;
+    maxDistance: number;
+    minYaw: number;
+    maxYaw: number;
+    minPitch: number;
+    maxPitch: number;
+}
+export declare function orbitalCameraConfigurationPropsEquals(left: OrbitalCameraConfigurationProps, right: OrbitalCameraConfigurationProps): boolean;
 //# sourceMappingURL=SingleProductDefaultCameraViewConfiguration.d.ts.map

package/dist/view/SingleProductDefaultCameraViewConfiguration.js

@@ -1,11 +1,11 @@
-import { cameraConfigurationPropsEquals, } from "./BaseViewConfiguration.js";
-export function orbitalCameraConfigurationPropsEquals(left, right) {
-    return (left.disableZoom === right.disableZoom &&
-        left.minDistance === right.minDistance &&
-        left.maxDistance === right.maxDistance &&
-        left.minYaw === right.minYaw &&
-        left.maxYaw === right.maxYaw &&
-        left.minPitch === right.minPitch &&
-        left.maxPitch === right.maxPitch &&
-        cameraConfigurationPropsEquals(left, right));
-}
+import { cameraConfigurationPropsEquals, } from "./BaseViewConfiguration.js";
+export function orbitalCameraConfigurationPropsEquals(left, right) {
+    return (left.disableZoom === right.disableZoom &&
+        left.minDistance === right.minDistance &&
+        left.maxDistance === right.maxDistance &&
+        left.minYaw === right.minYaw &&
+        left.maxYaw === right.maxYaw &&
+        left.minPitch === right.minPitch &&
+        left.maxPitch === right.maxPitch &&
+        cameraConfigurationPropsEquals(left, right));
+}

package/dist/view/SingleProductView.d.ts

@@ -1,45 +1,45 @@
-import { Camera } from "@babylonjs/core/Cameras/camera.js";
-import { CfgProduct, DtoApplicationArea } from "@configura/web-api";
-import { EventListener } from "@configura/web-utilities";
-import { CoordinatorWithMeta } from "../animation/coordinator/Coordinator.js";
-import { CameraCreator } from "../camera/CameraCreator.js";
-import { EngineCreator } from "../engine/EngineCreator.js";
-import { LightRigCreator } from "../light/LightRigCreator.js";
-import { DummyMaterialCreator } from "../material/DummyMaterialCreator.js";
-import { CfgProductNode } from "../nodes/CfgProductNode.js";
-import { SceneCreator } from "../scene/SceneCreator.js";
-import { BaseView } from "./BaseView.js";
-import { SingleProductViewConfiguration, SingleProductViewEventMap } from "./SingleProductViewConfiguration.js";
-export declare type LoadingOrApplicationAreas = DtoApplicationArea[] | "loading";
-export declare type SingleProductViewConstructorOptions<C extends Camera> = {
-    canvas: HTMLCanvasElement;
-    cameraCreator: CameraCreator<C>;
-    engineCreator?: EngineCreator;
-    lightRigCreator?: LightRigCreator;
-    sceneCreator?: SceneCreator;
-    dummyMaterialCreator?: DummyMaterialCreator;
-};
-export declare class SingleProductView<C extends Camera = Camera, T extends SingleProductViewEventMap = SingleProductViewEventMap> extends BaseView<C, T> {
-    private _isFirstLoad;
-    private _currentProductNode;
-    private _scheduledForRemoval;
-    private _viewPhaseObservable;
-    private _currentPhase;
-    private _animationCoordinatorCreator;
-    private _animationCoordinator;
-    constructor(options: SingleProductViewConstructorOptions<C>);
-    destroy(): void;
-    private scheduleForRemoval;
-    setConfiguration(configuration: SingleProductViewConfiguration): void;
-    get currentProductNode(): CfgProductNode | undefined;
-    get isFirstLoad(): boolean;
-    addEventListener<K extends keyof T>(event: K, listener: EventListener<T, K>): void;
-    removeEventListener<K extends keyof T>(event: K, listener: EventListener<T, K>): void;
-    protected getNeededFrameRender(time: number): boolean;
-    protected renderFrame(time: number): void;
-    private notifyPhaseChange;
-    clearProduct: () => void;
-    flushScheduledForRemove(animationCoordinator?: CoordinatorWithMeta): Promise<void>;
-    loadProduct: (applicationAreas: LoadingOrApplicationAreas, product: CfgProduct) => (() => void);
-}
+import { Camera } from "@babylonjs/core/Cameras/camera.js";
+import { CfgProduct, DtoApplicationArea } from "@configura/web-api";
+import { EventListener } from "@configura/web-utilities";
+import { CoordinatorWithMeta } from "../animation/coordinator/Coordinator.js";
+import { CameraCreator } from "../camera/CameraCreator.js";
+import { EngineCreator } from "../engine/EngineCreator.js";
+import { LightRigCreator } from "../light/LightRigCreator.js";
+import { DummyMaterialCreator } from "../material/DummyMaterialCreator.js";
+import { CfgProductNode } from "../nodes/CfgProductNode.js";
+import { SceneCreator } from "../scene/SceneCreator.js";
+import { BaseView } from "./BaseView.js";
+import { SingleProductViewConfiguration, SingleProductViewEventMap } from "./SingleProductViewConfiguration.js";
+export declare type LoadingOrApplicationAreas = DtoApplicationArea[] | "loading";
+export declare type SingleProductViewConstructorOptions<C extends Camera> = {
+    canvas: HTMLCanvasElement;
+    cameraCreator: CameraCreator<C>;
+    engineCreator?: EngineCreator;
+    lightRigCreator?: LightRigCreator;
+    sceneCreator?: SceneCreator;
+    dummyMaterialCreator?: DummyMaterialCreator;
+};
+export declare class SingleProductView<C extends Camera = Camera, T extends SingleProductViewEventMap = SingleProductViewEventMap> extends BaseView<C, T> {
+    private _isFirstLoad;
+    private _currentProductNode;
+    private _scheduledForRemoval;
+    private _viewPhaseObservable;
+    private _currentPhase;
+    private _animationCoordinatorCreator;
+    private _animationCoordinator;
+    constructor(options: SingleProductViewConstructorOptions<C>);
+    destroy(): void;
+    private scheduleForRemoval;
+    setConfiguration(configuration: SingleProductViewConfiguration): void;
+    get currentProductNode(): CfgProductNode | undefined;
+    get isFirstLoad(): boolean;
+    addEventListener<K extends keyof T>(event: K, listener: EventListener<T, K>): void;
+    removeEventListener<K extends keyof T>(event: K, listener: EventListener<T, K>): void;
+    protected getNeededFrameRender(time: number): boolean;
+    protected renderFrame(time: number): void;
+    private notifyPhaseChange;
+    clearProduct: () => void;
+    flushScheduledForRemove(animationCoordinator?: CoordinatorWithMeta): Promise<void>;
+    loadProduct: (applicationAreas: LoadingOrApplicationAreas, product: CfgProduct) => (() => void);
+}
 //# sourceMappingURL=SingleProductView.d.ts.map

package/dist/view/SingleProductView.js

@@ -1,212 +1,212 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { CfgMtrlApplication, CfgMtrlApplicationSource, } from "@configura/web-api";
-import { getWaitFramesPromise, Observable } from "@configura/web-utilities";
-import { CoordinatorIdentity } from "../animation/coordinator/CoordinatorIdentity.js";
-import { CfgProductNode } from "../nodes/CfgProductNode.js";
-import { BaseView } from "./BaseView.js";
-import { SingleProductViewPhase, } from "./SingleProductViewConfiguration.js";
-export class SingleProductView extends BaseView {
-    constructor(options) {
-        super(options);
-        this._isFirstLoad = true;
-        this._scheduledForRemoval = [];
-        this._viewPhaseObservable = new Observable();
-        this._currentPhase = SingleProductViewPhase.Idle;
-        this.notifyPhaseChange = (phase) => {
-            this._viewPhaseObservable.notifyAll({
-                previous: this._currentPhase,
-                current: phase,
-            });
-            this._currentPhase = phase;
-        };
-        this.clearProduct = () => {
-            const currentProductNode = this._currentProductNode;
-            if (currentProductNode !== undefined) {
-                this.notifyPhaseChange(SingleProductViewPhase.RemovePreviousProduct);
-                this.scheduleForRemoval(currentProductNode);
-                this._currentProductNode = undefined;
-            }
-        };
-        this.loadProduct = (applicationAreas, product) => {
-            this.notifyPhaseChange(SingleProductViewPhase.LoadProductCalled);
-            const abortController = new AbortController();
-            const abortSignal = abortController.signal;
-            const loadingToken = this._loadingObservable.startChildLoading();
-            const stopLoading = () => {
-                this._loadingObservable.stopChildLoading(loadingToken);
-            };
-            void (() => __awaiter(this, void 0, void 0, function* () {
-                let isNewProduct = false;
-                let currentProductNode = this._currentProductNode;
-                if (currentProductNode === undefined ||
-                    !currentProductNode.product.isBackedBySame(product)) {
-                    this.clearProduct();
-                    this.notifyPhaseChange(SingleProductViewPhase.MakeNewProduct);
-                    currentProductNode = CfgProductNode.make(this._renderEnvironment, product);
-                    this.notifyPhaseChange(SingleProductViewPhase.AddNewProduct);
-                    this._currentProductNode = currentProductNode;
-                    this._contentRoot.add(currentProductNode);
-                    isNewProduct = true;
-                }
-                const animationCoordinator = {
-                    coordinator: this._animationCoordinator,
-                    isNewProduct,
-                };
-                try {
-                    this.notifyPhaseChange(SingleProductViewPhase.SetModelsAndLoadGeo);
-                    currentProductNode.refreshStretch();
-                    yield currentProductNode.loadGeo(animationCoordinator);
-                    if (isNewProduct) {
-                        // New products needs resizing before rendering the first time
-                        this.notifyPhaseChange(SingleProductViewPhase.HandleSizing);
-                        this.handleSizing(true);
-                    }
-                    if (abortSignal.aborted) {
-                        this.notifyPhaseChange(SingleProductViewPhase.Aborted);
-                        return;
-                    }
-                    if (applicationAreas !== "loading") {
-                        this.notifyPhaseChange(SingleProductViewPhase.SetApplicationAreas);
-                        currentProductNode.setApplicationAreas(applicationAreas.map((a) => CfgMtrlApplication.fromMtrlLikeApplication(CfgMtrlApplicationSource.ApplicationArea, a)));
-                    }
-                    const loadMaterialsPromise = currentProductNode.loadMaterials(animationCoordinator);
-                    const doRenderTemporaryMaterials = yield Promise.race([
-                        (() => __awaiter(this, void 0, void 0, function* () {
-                            yield loadMaterialsPromise;
-                            return false;
-                        }))(),
-                        (() => __awaiter(this, void 0, void 0, function* () {
-                            yield getWaitFramesPromise(10);
-                            return true;
-                        }))(),
-                    ]);
-                    this.notifyPhaseChange(SingleProductViewPhase.ApplyGeo);
-                    yield currentProductNode.applyGeo(animationCoordinator);
-                    // We don't have to wait for this
-                    void this.flushScheduledForRemove(animationCoordinator);
-                    if (abortSignal.aborted) {
-                        this.notifyPhaseChange(SingleProductViewPhase.Aborted);
-                        return;
-                    }
-                    if (!isNewProduct) {
-                        // At this stage, any change in geometry has been applied
-                        this.notifyPhaseChange(SingleProductViewPhase.HandleSizing);
-                        this.handleSizing(false);
-                    }
-                    this._isFirstLoad = false;
-                    if (doRenderTemporaryMaterials) {
-                        this.scheduleRerender();
-                    }
-                    if (abortSignal.aborted) {
-                        this.notifyPhaseChange(SingleProductViewPhase.Aborted);
-                        return;
-                    }
-                    this.notifyPhaseChange(SingleProductViewPhase.LoadMaterials);
-                    yield loadMaterialsPromise;
-                    if (abortSignal.aborted) {
-                        this.notifyPhaseChange(SingleProductViewPhase.Aborted);
-                        return;
-                    }
-                    this.notifyPhaseChange(SingleProductViewPhase.ApplyMaterials);
-                    this.pauseRendering();
-                    yield currentProductNode.applyMaterials();
-                    this.resumeRendering();
-                    this.notifyPhaseChange(SingleProductViewPhase.AppliedMaterials);
-                    this.scheduleRerender();
-                    stopLoading();
-                    this.notifyPhaseChange(SingleProductViewPhase.Idle);
-                }
-                catch (e) {
-                    this.notifyPhaseChange(SingleProductViewPhase.Error);
-                    this.notifyError(e);
-                    stopLoading();
-                    // Might result in double-unlock of semaphore, this is OK.
-                    this.resumeRendering();
-                }
-            }))();
-            return () => {
-                abortController.abort();
-                stopLoading();
-            };
-        };
-        this._animationCoordinator = new CoordinatorIdentity(this, this._viewPhaseObservable);
-    }
-    destroy() {
-        this._animationCoordinator.destroy();
-        super.destroy();
-    }
-    scheduleForRemoval(productNode) {
-        productNode.destroy();
-        this._scheduledForRemoval.push(productNode);
-    }
-    setConfiguration(configuration) {
-        const animationCoordinatorCreator = configuration.experimentalAnimationCoordinator;
-        if (animationCoordinatorCreator !== undefined &&
-            this._animationCoordinatorCreator !== animationCoordinatorCreator) {
-            this._animationCoordinatorCreator = animationCoordinatorCreator;
-            this._animationCoordinator.destroy();
-            this._animationCoordinator = animationCoordinatorCreator(this, this._viewPhaseObservable);
-        }
-        super.setConfiguration(configuration);
-    }
-    get currentProductNode() {
-        return this._currentProductNode;
-    }
-    get isFirstLoad() {
-        return this._isFirstLoad;
-    }
-    addEventListener(event, listener) {
-        switch (event) {
-            case "viewPhase":
-                this._viewPhaseObservable.listen(listener);
-                break;
-            default:
-                super.addEventListener(event, listener);
-        }
-    }
-    removeEventListener(event, listener) {
-        switch (event) {
-            case "viewPhase":
-                this._viewPhaseObservable.stopListen(listener);
-                break;
-            default:
-                super.removeEventListener(event, listener);
-        }
-    }
-    getNeededFrameRender(time) {
-        return (super.getNeededFrameRender(time) ||
-            this._animationCoordinator.willTick(time, this._engine.getDeltaTime()));
-    }
-    renderFrame(time) {
-        this._animationCoordinator.tick(time, this._engine.getDeltaTime());
-        super.renderFrame(time);
-    }
-    flushScheduledForRemove(animationCoordinator) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this._scheduledForRemoval.length === 0) {
-                return;
-            }
-            const promises = [];
-            for (;;) {
-                const productNode = this._scheduledForRemoval.shift();
-                if (productNode === undefined) {
-                    break;
-                }
-                promises.push((() => __awaiter(this, void 0, void 0, function* () {
-                    yield productNode.flushScheduledForRemove(animationCoordinator);
-                    this._contentRoot.remove(true, productNode);
-                }))());
-            }
-            yield Promise.all(promises);
-            this.notifyPhaseChange(SingleProductViewPhase.RemovedProduct);
-        });
-    }
-}
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { CfgMtrlApplication, CfgMtrlApplicationSource, } from "@configura/web-api";
+import { getWaitFramesPromise, Observable } from "@configura/web-utilities";
+import { CoordinatorIdentity } from "../animation/coordinator/CoordinatorIdentity.js";
+import { CfgProductNode } from "../nodes/CfgProductNode.js";
+import { BaseView } from "./BaseView.js";
+import { SingleProductViewPhase, } from "./SingleProductViewConfiguration.js";
+export class SingleProductView extends BaseView {
+    constructor(options) {
+        super(options);
+        this._isFirstLoad = true;
+        this._scheduledForRemoval = [];
+        this._viewPhaseObservable = new Observable();
+        this._currentPhase = SingleProductViewPhase.Idle;
+        this.notifyPhaseChange = (phase) => {
+            this._viewPhaseObservable.notifyAll({
+                previous: this._currentPhase,
+                current: phase,
+            });
+            this._currentPhase = phase;
+        };
+        this.clearProduct = () => {
+            const currentProductNode = this._currentProductNode;
+            if (currentProductNode !== undefined) {
+                this.notifyPhaseChange(SingleProductViewPhase.RemovePreviousProduct);
+                this.scheduleForRemoval(currentProductNode);
+                this._currentProductNode = undefined;
+            }
+        };
+        this.loadProduct = (applicationAreas, product) => {
+            this.notifyPhaseChange(SingleProductViewPhase.LoadProductCalled);
+            const abortController = new AbortController();
+            const abortSignal = abortController.signal;
+            const loadingToken = this._loadingObservable.startChildLoading();
+            const stopLoading = () => {
+                this._loadingObservable.stopChildLoading(loadingToken);
+            };
+            void (() => __awaiter(this, void 0, void 0, function* () {
+                let isNewProduct = false;
+                let currentProductNode = this._currentProductNode;
+                if (currentProductNode === undefined ||
+                    !currentProductNode.product.isBackedBySame(product)) {
+                    this.clearProduct();
+                    this.notifyPhaseChange(SingleProductViewPhase.MakeNewProduct);
+                    currentProductNode = CfgProductNode.make(this._renderEnvironment, product);
+                    this.notifyPhaseChange(SingleProductViewPhase.AddNewProduct);
+                    this._currentProductNode = currentProductNode;
+                    this._contentRoot.add(currentProductNode);
+                    isNewProduct = true;
+                }
+                const animationCoordinator = {
+                    coordinator: this._animationCoordinator,
+                    isNewProduct,
+                };
+                try {
+                    this.notifyPhaseChange(SingleProductViewPhase.SetModelsAndLoadGeo);
+                    currentProductNode.refreshStretch();
+                    yield currentProductNode.loadGeo(animationCoordinator);
+                    if (isNewProduct) {
+                        // New products needs resizing before rendering the first time
+                        this.notifyPhaseChange(SingleProductViewPhase.HandleSizing);
+                        this.handleSizing(true);
+                    }
+                    if (abortSignal.aborted) {
+                        this.notifyPhaseChange(SingleProductViewPhase.Aborted);
+                        return;
+                    }
+                    if (applicationAreas !== "loading") {
+                        this.notifyPhaseChange(SingleProductViewPhase.SetApplicationAreas);
+                        currentProductNode.setApplicationAreas(applicationAreas.map((a) => CfgMtrlApplication.fromMtrlLikeApplication(CfgMtrlApplicationSource.ApplicationArea, a)));
+                    }
+                    const loadMaterialsPromise = currentProductNode.loadMaterials(animationCoordinator);
+                    const doRenderTemporaryMaterials = yield Promise.race([
+                        (() => __awaiter(this, void 0, void 0, function* () {
+                            yield loadMaterialsPromise;
+                            return false;
+                        }))(),
+                        (() => __awaiter(this, void 0, void 0, function* () {
+                            yield getWaitFramesPromise(10);
+                            return true;
+                        }))(),
+                    ]);
+                    this.notifyPhaseChange(SingleProductViewPhase.ApplyGeo);
+                    yield currentProductNode.applyGeo(animationCoordinator);
+                    // We don't have to wait for this
+                    void this.flushScheduledForRemove(animationCoordinator);
+                    if (abortSignal.aborted) {
+                        this.notifyPhaseChange(SingleProductViewPhase.Aborted);
+                        return;
+                    }
+                    if (!isNewProduct) {
+                        // At this stage, any change in geometry has been applied
+                        this.notifyPhaseChange(SingleProductViewPhase.HandleSizing);
+                        this.handleSizing(false);
+                    }
+                    this._isFirstLoad = false;
+                    if (doRenderTemporaryMaterials) {
+                        this.scheduleRerender();
+                    }
+                    if (abortSignal.aborted) {
+                        this.notifyPhaseChange(SingleProductViewPhase.Aborted);
+                        return;
+                    }
+                    this.notifyPhaseChange(SingleProductViewPhase.LoadMaterials);
+                    yield loadMaterialsPromise;
+                    if (abortSignal.aborted) {
+                        this.notifyPhaseChange(SingleProductViewPhase.Aborted);
+                        return;
+                    }
+                    this.notifyPhaseChange(SingleProductViewPhase.ApplyMaterials);
+                    this.pauseRendering();
+                    yield currentProductNode.applyMaterials();
+                    this.resumeRendering();
+                    this.notifyPhaseChange(SingleProductViewPhase.AppliedMaterials);
+                    this.scheduleRerender();
+                    stopLoading();
+                    this.notifyPhaseChange(SingleProductViewPhase.Idle);
+                }
+                catch (e) {
+                    this.notifyPhaseChange(SingleProductViewPhase.Error);
+                    this.notifyError(e);
+                    stopLoading();
+                    // Might result in double-unlock of semaphore, this is OK.
+                    this.resumeRendering();
+                }
+            }))();
+            return () => {
+                abortController.abort();
+                stopLoading();
+            };
+        };
+        this._animationCoordinator = new CoordinatorIdentity(this, this._viewPhaseObservable);
+    }
+    destroy() {
+        this._animationCoordinator.destroy();
+        super.destroy();
+    }
+    scheduleForRemoval(productNode) {
+        productNode.destroy();
+        this._scheduledForRemoval.push(productNode);
+    }
+    setConfiguration(configuration) {
+        const animationCoordinatorCreator = configuration.experimentalAnimationCoordinator;
+        if (animationCoordinatorCreator !== undefined &&
+            this._animationCoordinatorCreator !== animationCoordinatorCreator) {
+            this._animationCoordinatorCreator = animationCoordinatorCreator;
+            this._animationCoordinator.destroy();
+            this._animationCoordinator = animationCoordinatorCreator(this, this._viewPhaseObservable);
+        }
+        super.setConfiguration(configuration);
+    }
+    get currentProductNode() {
+        return this._currentProductNode;
+    }
+    get isFirstLoad() {
+        return this._isFirstLoad;
+    }
+    addEventListener(event, listener) {
+        switch (event) {
+            case "viewPhase":
+                this._viewPhaseObservable.listen(listener);
+                break;
+            default:
+                super.addEventListener(event, listener);
+        }
+    }
+    removeEventListener(event, listener) {
+        switch (event) {
+            case "viewPhase":
+                this._viewPhaseObservable.stopListen(listener);
+                break;
+            default:
+                super.removeEventListener(event, listener);
+        }
+    }
+    getNeededFrameRender(time) {
+        return (super.getNeededFrameRender(time) ||
+            this._animationCoordinator.willTick(time, this._engine.getDeltaTime()));
+    }
+    renderFrame(time) {
+        this._animationCoordinator.tick(time, this._engine.getDeltaTime());
+        super.renderFrame(time);
+    }
+    flushScheduledForRemove(animationCoordinator) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this._scheduledForRemoval.length === 0) {
+                return;
+            }
+            const promises = [];
+            for (;;) {
+                const productNode = this._scheduledForRemoval.shift();
+                if (productNode === undefined) {
+                    break;
+                }
+                promises.push((() => __awaiter(this, void 0, void 0, function* () {
+                    yield productNode.flushScheduledForRemove(animationCoordinator);
+                    this._contentRoot.remove(true, productNode);
+                }))());
+            }
+            yield Promise.all(promises);
+            this.notifyPhaseChange(SingleProductViewPhase.RemovedProduct);
+        });
+    }
+}