@babylonjs/viewer 5.0.0-rc.3 → 5.0.1

package/viewer/defaultViewer.js

@@ -1,671 +1,666 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-import { FilesInput } from '@babylonjs/core/Misc/filesInput.js';
-import { SpotLight } from '@babylonjs/core/Lights/spotLight.js';
-import { Vector3 } from '@babylonjs/core/Maths/math.js';
-import { TemplateManager } from '../templating/templateManager.js';
-import { AbstractViewerWithTemplate } from './viewerWithTemplate.js';
-import { StandardMaterial } from '@babylonjs/core/Materials/standardMaterial.js';
-import { PBRMaterial } from '@babylonjs/core/Materials/PBR/pbrMaterial.js';
-import { extendClassWithConfig } from '../helper/index.js';
-import { AnimationState } from '../model/modelAnimation.js';
-import { HDButtonPlugin } from '../templating/plugins/hdButtonPlugin.js';
-import { PrintButtonPlugin } from '../templating/plugins/printButton.js';
-/**
- * The Default viewer is the default implementation of the AbstractViewer.
- * It uses the templating system to render a new canvas and controls.
- */
-var DefaultViewer = /** @class */ (function (_super) {
-    __extends(DefaultViewer, _super);
-    /**
-     * Create a new default viewer
-     * @param containerElement the element in which the templates will be rendered
-     * @param initialConfiguration the initial configuration. Defaults to extending the default configuration
-     */
-    function DefaultViewer(containerElement, initialConfiguration) {
-        if (initialConfiguration === void 0) { initialConfiguration = { extends: 'default' }; }
-        var _this = _super.call(this, containerElement, initialConfiguration) || this;
-        _this.containerElement = containerElement;
-        _this._registeredPlugins = [];
-        _this._handlePointerClick = function (event) {
-            var pointerDown = event.event;
-            if (pointerDown.button !== 0) {
-                return;
-            }
-            var element = event.event.target;
-            if (!element) {
-                return;
-            }
-            var parentClasses = element.parentElement.classList;
-            var elementClasses = element.classList;
-            var elementName = "";
-            for (var i = 0; i < elementClasses.length; ++i) {
-                var className = elementClasses[i];
-                if (className.indexOf("-button") !== -1 || className.indexOf("-wrapper") !== -1) {
-                    elementName = className;
-                    break;
-                }
-            }
-            switch (elementName) {
-                case "speed-button":
-                case "types-button":
-                    if (parentClasses.contains("open")) {
-                        parentClasses.remove("open");
-                    }
-                    else {
-                        parentClasses.add("open");
-                    }
-                    break;
-                case "play-pause-button":
-                    _this._togglePlayPause();
-                    break;
-                case "label-option-button":
-                    var value = element.dataset["value"];
-                    var label = element.querySelector("span.animation-label");
-                    if (label && value) {
-                        _this._updateAnimationType({ value: value.trim(), label: label.innerHTML });
-                    }
-                    break;
-                case "speed-option-button":
-                    if (!_this._currentAnimation) {
-                        return;
-                    }
-                    var speed = element.dataset["value"];
-                    if (speed) {
-                        _this._updateAnimationSpeed(speed);
-                    }
-                    break;
-                case "progress-wrapper":
-                    _this._resumePlay = !_this._isAnimationPaused;
-                    if (_this._resumePlay) {
-                        _this._togglePlayPause(true);
-                    }
-                    break;
-                case "fullscreen-button":
-                    _this.toggleFullscreen();
-                    break;
-                case "vr-button":
-                    _this.toggleVR();
-                    break;
-                default:
-                    return;
-            }
-        };
-        /**
-         * Plays or Pauses animation
-         */
-        _this._togglePlayPause = function (noUiUpdate) {
-            if (!_this._currentAnimation) {
-                return;
-            }
-            if (_this._isAnimationPaused) {
-                _this._currentAnimation.restart();
-            }
-            else {
-                _this._currentAnimation.pause();
-            }
-            _this._isAnimationPaused = !_this._isAnimationPaused;
-            if (noUiUpdate) {
-                return;
-            }
-            var navbar = _this.templateManager.getTemplate('navBar');
-            if (!navbar) {
-                return;
-            }
-            navbar.updateParams({
-                paused: _this._isAnimationPaused,
-            });
-        };
-        /**
-         * Control progress bar position based on animation current frame
-         */
-        _this._updateProgressBar = function () {
-            var navbar = _this.templateManager.getTemplate('navBar');
-            if (!navbar) {
-                return;
-            }
-            var progressSlider = navbar.parent.querySelector("input.progress-wrapper");
-            if (progressSlider && _this._currentAnimation) {
-                var progress = _this._currentAnimation.currentFrame / _this._currentAnimation.frames * 100;
-                var currentValue = progressSlider.valueAsNumber;
-                if (Math.abs(currentValue - progress) > 0.5) { // Only move if greater than a 1% change
-                    progressSlider.value = '' + progress;
-                }
-                if (_this._currentAnimation.state === AnimationState.PLAYING) {
-                    if (_this.sceneManager.camera.autoRotationBehavior && !_this._oldIdleRotationValue) {
-                        _this._oldIdleRotationValue = _this.sceneManager.camera.autoRotationBehavior.idleRotationSpeed;
-                        _this.sceneManager.camera.autoRotationBehavior.idleRotationSpeed = 0;
-                    }
-                }
-                else {
-                    if (_this.sceneManager.camera.autoRotationBehavior && _this._oldIdleRotationValue) {
-                        _this.sceneManager.camera.autoRotationBehavior.idleRotationSpeed = _this._oldIdleRotationValue;
-                        _this._oldIdleRotationValue = 0;
-                    }
-                }
-            }
-        };
-        /**
-         * Update Current Animation Speed
-         */
-        _this._updateAnimationSpeed = function (speed, paramsObject) {
-            var navbar = _this.templateManager.getTemplate('navBar');
-            if (!navbar) {
-                return;
-            }
-            if (speed && _this._currentAnimation) {
-                _this._currentAnimation.speedRatio = parseFloat(speed);
-                if (!_this._isAnimationPaused) {
-                    _this._currentAnimation.restart();
-                }
-                if (paramsObject) {
-                    paramsObject.selectedSpeed = speed + "x";
-                }
-                else {
-                    navbar.updateParams({
-                        selectedSpeed: speed + "x",
-                    });
-                }
-            }
-        };
-        /**
-         * Update Current Animation Type
-         */
-        _this._updateAnimationType = function (data, paramsObject) {
-            var navbar = _this.templateManager.getTemplate('navBar');
-            if (!navbar) {
-                return;
-            }
-            if (data) {
-                _this._currentAnimation = _this.sceneManager.models[0].setCurrentAnimationByName(data.value);
-            }
-            if (paramsObject) {
-                paramsObject.selectedAnimation = (_this._animationList.indexOf(data.value) + 1);
-                paramsObject.selectedAnimationName = data.label;
-            }
-            else {
-                navbar.updateParams({
-                    selectedAnimation: (_this._animationList.indexOf(data.value) + 1),
-                    selectedAnimationName: data.label
-                });
-            }
-            _this._updateAnimationSpeed("1.0", paramsObject);
-        };
-        /**
-         * Toggle fullscreen of the entire viewer
-         */
-        _this.toggleFullscreen = function () {
-            var viewerTemplate = _this.templateManager.getTemplate('viewer');
-            var viewerElement = viewerTemplate && viewerTemplate.parent;
-            var fullscreenElement = _this.fullscreenElement || viewerElement;
-            if (fullscreenElement) {
-                var currentElement = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
-                if (!currentElement) {
-                    var requestFullScreen = fullscreenElement.requestFullscreen || fullscreenElement.webkitRequestFullscreen || fullscreenElement.msRequestFullscreen || fullscreenElement.mozRequestFullScreen;
-                    requestFullScreen.call(fullscreenElement);
-                    if (viewerElement) {
-                        viewerElement.classList.add("in-fullscreen");
-                    }
-                }
-                else {
-                    var exitFullscreen = document.exitFullscreen || document.webkitExitFullscreen || document.msExitFullscreen || document.mozCancelFullScreen;
-                    exitFullscreen.call(document);
-                    if (viewerElement) {
-                        viewerElement.classList.remove("in-fullscreen");
-                    }
-                }
-            }
-        };
-        _this._onModelLoaded = function (model) {
-            _this._configureTemplate(model);
-            // with a short timeout, making sure everything is there already.
-            var hideLoadingDelay = 20;
-            if (_this.configuration.lab && _this.configuration.lab.hideLoadingDelay !== undefined) {
-                hideLoadingDelay = _this.configuration.lab.hideLoadingDelay;
-            }
-            setTimeout(function () {
-                _this.sceneManager.scene.executeWhenReady(function () {
-                    _this.hideLoadingScreen();
-                });
-            }, hideLoadingDelay);
-            return;
-        };
-        _this.onModelLoadedObservable.add(_this._onModelLoaded);
-        _this.onModelRemovedObservable.add(function () {
-            _this._configureTemplate();
-        });
-        _this.onEngineInitObservable.add(function () {
-            _this.sceneManager.onLightsConfiguredObservable.add(function (data) {
-                _this._configureLights();
-            });
-        });
-        _this.onInitDoneObservable.add(function () {
-            _this.sceneManager.setDefaultMaterial = function (sceneConfig) {
-                var conf = sceneConfig.defaultMaterial;
-                if (!conf) {
-                    return;
-                }
-                if ((conf.materialType === 'standard' && this.scene.defaultMaterial.getClassName() !== 'StandardMaterial') ||
-                    (conf.materialType === 'pbr' && this.scene.defaultMaterial.getClassName() !== 'PBRMaterial')) {
-                    this.scene.defaultMaterial.dispose();
-                    if (conf.materialType === 'standard') {
-                        this.scene.defaultMaterial = new StandardMaterial("defaultMaterial", this.scene);
-                    }
-                    else {
-                        this.scene.defaultMaterial = new PBRMaterial("defaultMaterial", this.scene);
-                    }
-                }
-                extendClassWithConfig(this.scene.defaultMaterial, conf);
-            };
-            if (!_this.sceneManager.models.length) {
-                _this.hideLoadingScreen();
-            }
-        });
-        return _this;
-    }
-    DefaultViewer.prototype.registerTemplatePlugin = function (plugin) {
-        var _this = this;
-        //validate
-        if (!plugin.templateName) {
-            throw new Error("No template name provided");
-        }
-        this._registeredPlugins.push(plugin);
-        var template = this.templateManager.getTemplate(plugin.templateName);
-        if (!template) {
-            throw new Error("Template ".concat(plugin.templateName, " not found"));
-        }
-        if (plugin.addHTMLTemplate) {
-            template.onHTMLRendered.add(function (tmpl) {
-                plugin.addHTMLTemplate(tmpl);
-            });
-            template.redraw();
-        }
-        if (plugin.eventsToAttach) {
-            plugin.eventsToAttach.forEach(function (eventName) {
-                plugin.onEvent && _this.templateManager.eventManager.registerCallback(plugin.templateName, function (event) {
-                    if (plugin.onEvent && plugin.interactionPredicate(event)) {
-                        plugin.onEvent(event);
-                    }
-                }, eventName);
-            });
-        }
-    };
-    /**
-     * This will be executed when the templates initialize.
-     */
-    DefaultViewer.prototype._onTemplatesLoaded = function () {
-        var _this = this;
-        this.showLoadingScreen();
-        // navbar
-        this._initNavbar();
-        // close overlay button
-        var template = this.templateManager.getTemplate('overlay');
-        if (template) {
-            var closeButton = template.parent.querySelector('.close-button');
-            if (closeButton) {
-                closeButton.addEventListener('pointerdown', function () {
-                    _this.hideOverlayScreen();
-                });
-            }
-        }
-        if (this.configuration.templates && this.configuration.templates.viewer) {
-            if (this.configuration.templates.viewer.params && this.configuration.templates.viewer.params.enableDragAndDrop) {
-                this.onSceneInitObservable.addOnce(function () {
-                    var filesInput = new FilesInput(_this.engine, _this.sceneManager.scene, function () {
-                    }, function () {
-                    }, function () {
-                    }, function () {
-                    }, function () {
-                    }, function (file) {
-                        _this.loadModel(file);
-                    }, function () {
-                    });
-                    filesInput.monitorElementForDragNDrop(_this.templateManager.getCanvas());
-                });
-            }
-        }
-        return _super.prototype._onTemplatesLoaded.call(this);
-    };
-    DefaultViewer.prototype._initNavbar = function () {
-        var _this = this;
-        var navbar = this.templateManager.getTemplate('navBar');
-        if (navbar) {
-            this.onFrameRenderedObservable.add(this._updateProgressBar);
-            this.templateManager.eventManager.registerCallback('navBar', this._handlePointerClick, 'click');
-            // an example how to trigger the help button. publiclly available
-            this.templateManager.eventManager.registerCallback("navBar", function () {
-                // do your thing
-            }, "pointerdown", ".help-button");
-            this.templateManager.eventManager.registerCallback("navBar", function (event) {
-                var evt = event.event;
-                var element = (evt.target);
-                if (!_this._currentAnimation) {
-                    return;
-                }
-                var gotoFrame = +element.value / 100 * _this._currentAnimation.frames;
-                if (isNaN(gotoFrame)) {
-                    return;
-                }
-                _this._currentAnimation.goToFrame(gotoFrame);
-            }, "input");
-            this.templateManager.eventManager.registerCallback("navBar", function () {
-                if (_this._resumePlay) {
-                    _this._togglePlayPause(true);
-                }
-                _this._resumePlay = false;
-            }, "pointerup", ".progress-wrapper");
-            if (window.devicePixelRatio === 1 && navbar.configuration.params && !navbar.configuration.params.hideHdButton) {
-                navbar.updateParams({
-                    hideHdButton: true
-                });
-            }
-            this.registerTemplatePlugin(new HDButtonPlugin(this));
-            this.registerTemplatePlugin(new PrintButtonPlugin(this));
-        }
-    };
-    DefaultViewer.prototype._initVR = function () {
-        var _this = this;
-        this.engine.onVRDisplayChangedObservable.add(function () {
-            var viewerTemplate = _this.templateManager.getTemplate('viewer');
-            var viewerElement = viewerTemplate && viewerTemplate.parent;
-            if (viewerElement) {
-                if (_this.sceneManager.vrHelper.isInVRMode) {
-                    viewerElement.classList.add("in-vr");
-                }
-                else {
-                    viewerElement.classList.remove("in-vr");
-                }
-            }
-        });
-        if (this.sceneManager.vrHelper) {
-            // due to the way the experience helper is exisintg VR, this must be added.
-            this.sceneManager.vrHelper.onExitingVR.add(function () {
-                var viewerTemplate = _this.templateManager.getTemplate('viewer');
-                var viewerElement = viewerTemplate && viewerTemplate.parent;
-                if (viewerElement) {
-                    viewerElement.classList.remove("in-vr");
-                }
-            });
-        }
-        _super.prototype._initVR.call(this);
-    };
-    /**
-     * Preparing the container element to present the viewer
-     */
-    DefaultViewer.prototype._prepareContainerElement = function () {
-        var htmlElement = this.containerElement;
-        if (htmlElement.style) {
-            htmlElement.style.position = 'relative';
-            htmlElement.style.height = '100%';
-            htmlElement.style.display = 'flex';
-        }
-    };
-    /**
-     * This function will configure the templates and update them after a model was loaded
-     * It is mainly responsible to changing the title and subtitle etc'.
-     * @param model the model to be used to configure the templates by
-     */
-    DefaultViewer.prototype._configureTemplate = function (model) {
-        var navbar = this.templateManager.getTemplate('navBar');
-        if (!navbar) {
-            return;
-        }
-        var newParams = navbar.configuration.params || {};
-        if (!model) {
-            newParams.animations = null;
-        }
-        else {
-            var animationNames = model.getAnimationNames();
-            newParams.animations = animationNames.map(function (a) { return { label: a, value: a }; });
-            if (animationNames.length) {
-                this._isAnimationPaused = (model.configuration.animation && !model.configuration.animation.autoStart) || !model.configuration.animation;
-                this._animationList = animationNames;
-                newParams.paused = this._isAnimationPaused;
-                var animationIndex = 0;
-                if (model.configuration.animation && typeof model.configuration.animation.autoStart === 'string') {
-                    animationIndex = animationNames.indexOf(model.configuration.animation.autoStart);
-                    if (animationIndex === -1) {
-                        animationIndex = 0;
-                    }
-                }
-                this._updateAnimationType(newParams.animations[animationIndex], newParams);
-            }
-            else {
-                newParams.animations = null;
-            }
-            if (model.configuration.thumbnail) {
-                newParams.logoImage = model.configuration.thumbnail;
-            }
-        }
-        navbar.updateParams(newParams, false);
-    };
-    /**
-     * This will load a new model to the default viewer
-     * overriding the AbstractViewer's loadModel.
-     * The scene will automatically be cleared of the old models, if exist.
-     * @param model the configuration object (or URL) to load.
-     */
-    DefaultViewer.prototype.loadModel = function (model) {
-        var _this = this;
-        if (!model) {
-            model = this.configuration.model;
-        }
-        this.showLoadingScreen();
-        return _super.prototype.loadModel.call(this, model, true).catch(function (error) {
-            console.log(error);
-            _this.hideLoadingScreen();
-            _this.showOverlayScreen('error');
-            return Promise.reject(error);
-        });
-    };
-    /**
-     * Show the overlay and the defined sub-screen.
-     * Mainly used for help and errors
-     * @param subScreen the name of the subScreen. Those can be defined in the configuration object
-     */
-    DefaultViewer.prototype.showOverlayScreen = function (subScreen) {
-        var _this = this;
-        var template = this.templateManager.getTemplate('overlay');
-        if (!template) {
-            return Promise.resolve('Overlay template not found');
-        }
-        return template.show((function (template) {
-            var canvasRect = _this.containerElement.getBoundingClientRect();
-            template.parent.style.display = 'flex';
-            template.parent.style.width = canvasRect.width + "px";
-            template.parent.style.height = canvasRect.height + "px";
-            template.parent.style.opacity = "1";
-            var subTemplate = _this.templateManager.getTemplate(subScreen);
-            if (!subTemplate) {
-                return Promise.reject(subScreen + ' template not found');
-            }
-            return subTemplate.show((function (template) {
-                template.parent.style.display = 'flex';
-                return Promise.resolve(template);
-            }));
-        }));
-    };
-    /**
-     * Hide the overlay screen.
-     */
-    DefaultViewer.prototype.hideOverlayScreen = function () {
-        var template = this.templateManager.getTemplate('overlay');
-        if (!template) {
-            return Promise.resolve('Overlay template not found');
-        }
-        return template.hide((function (template) {
-            template.parent.style.opacity = "0";
-            var onTransitionEnd = function () {
-                template.parent.removeEventListener("transitionend", onTransitionEnd);
-                template.parent.style.display = 'none';
-            };
-            template.parent.addEventListener("transitionend", onTransitionEnd);
-            var overlays = template.parent.querySelectorAll('.overlay');
-            if (overlays) {
-                for (var i = 0; i < overlays.length; ++i) {
-                    var htmlElement = overlays.item(i);
-                    htmlElement.style.display = 'none';
-                }
-            }
-            return Promise.resolve(template);
-        }));
-    };
-    /**
-     * show the viewer (in case it was hidden)
-     *
-     * @param visibilityFunction an optional function to execute in order to show the container
-     */
-    DefaultViewer.prototype.show = function (visibilityFunction) {
-        var template = this.templateManager.getTemplate('main');
-        //not possible, but yet:
-        if (!template) {
-            return Promise.reject('Main template not found');
-        }
-        return template.show(visibilityFunction);
-    };
-    /**
-     * hide the viewer (in case it is visible)
-     *
-     * @param visibilityFunction an optional function to execute in order to hide the container
-     */
-    DefaultViewer.prototype.hide = function (visibilityFunction) {
-        var template = this.templateManager.getTemplate('main');
-        //not possible, but yet:
-        if (!template) {
-            return Promise.reject('Main template not found');
-        }
-        return template.hide(visibilityFunction);
-    };
-    /**
-     * Show the loading screen.
-     * The loading screen can be configured using the configuration object
-     */
-    DefaultViewer.prototype.showLoadingScreen = function () {
-        var _this = this;
-        var template = this.templateManager.getTemplate('loadingScreen');
-        if (!template) {
-            return Promise.resolve('Loading Screen template not found');
-        }
-        return template.show((function (template) {
-            var canvasRect = _this.containerElement.getBoundingClientRect();
-            // var canvasPositioning = window.getComputedStyle(this.containerElement).position;
-            template.parent.style.display = 'flex';
-            template.parent.style.width = canvasRect.width + "px";
-            template.parent.style.height = canvasRect.height + "px";
-            template.parent.style.opacity = "1";
-            // from the configuration!!!
-            var color = "black";
-            if (_this.configuration.templates && _this.configuration.templates.loadingScreen) {
-                color = (_this.configuration.templates.loadingScreen.params &&
-                    _this.configuration.templates.loadingScreen.params.backgroundColor) || color;
-            }
-            template.parent.style.backgroundColor = color;
-            return Promise.resolve(template);
-        }));
-    };
-    /**
-     * Hide the loading screen
-     */
-    DefaultViewer.prototype.hideLoadingScreen = function () {
-        var template = this.templateManager.getTemplate('loadingScreen');
-        if (!template) {
-            return Promise.resolve('Loading Screen template not found');
-        }
-        return template.hide((function (template) {
-            template.parent.style.opacity = "0";
-            var onTransitionEnd = function () {
-                template.parent.removeEventListener("transitionend", onTransitionEnd);
-                template.parent.style.display = 'none';
-            };
-            template.parent.addEventListener("transitionend", onTransitionEnd);
-            return Promise.resolve(template);
-        }));
-    };
-    DefaultViewer.prototype.dispose = function () {
-        this.templateManager.dispose();
-        _super.prototype.dispose.call(this);
-    };
-    DefaultViewer.prototype._onConfigurationLoaded = function (configuration) {
-        var _this = this;
-        _super.prototype._onConfigurationLoaded.call(this, configuration);
-        this.templateManager = new TemplateManager(this.containerElement);
-        // initialize the templates
-        var templateConfiguration = this.configuration.templates || {};
-        this.templateManager.initTemplate(templateConfiguration);
-        // when done, execute onTemplatesLoaded()
-        this.templateManager.onAllLoaded.add(function () {
-            var canvas = _this.templateManager.getCanvas();
-            if (canvas) {
-                _this._canvas = canvas;
-            }
-            _this._onTemplateLoaded();
-        });
-    };
-    /**
-     * An extension of the light configuration of the abstract viewer.
-     * @param lightsConfiguration the light configuration to use
-     * @param model the model that will be used to configure the lights (if the lights are model-dependant)
-     */
-    DefaultViewer.prototype._configureLights = function () {
-        var _this = this;
-        // labs feature - flashlight
-        if (this.configuration.lab && this.configuration.lab.flashlight) {
-            var lightTarget_1;
-            var angle = 0.5;
-            var exponent = Math.PI / 2;
-            if (typeof this.configuration.lab.flashlight === "object") {
-                exponent = this.configuration.lab.flashlight.exponent || exponent;
-                angle = this.configuration.lab.flashlight.angle || angle;
-            }
-            var flashlight = new SpotLight("flashlight", Vector3.Zero(), Vector3.Zero(), exponent, angle, this.sceneManager.scene);
-            if (typeof this.configuration.lab.flashlight === "object") {
-                flashlight.intensity = this.configuration.lab.flashlight.intensity || flashlight.intensity;
-                if (this.configuration.lab.flashlight.diffuse) {
-                    flashlight.diffuse.r = this.configuration.lab.flashlight.diffuse.r;
-                    flashlight.diffuse.g = this.configuration.lab.flashlight.diffuse.g;
-                    flashlight.diffuse.b = this.configuration.lab.flashlight.diffuse.b;
-                }
-                if (this.configuration.lab.flashlight.specular) {
-                    flashlight.specular.r = this.configuration.lab.flashlight.specular.r;
-                    flashlight.specular.g = this.configuration.lab.flashlight.specular.g;
-                    flashlight.specular.b = this.configuration.lab.flashlight.specular.b;
-                }
-            }
-            this.sceneManager.scene.constantlyUpdateMeshUnderPointer = true;
-            this.sceneManager.scene.onPointerObservable.add(function (eventData) {
-                if (eventData.type === 4 && eventData.pickInfo) {
-                    lightTarget_1 = (eventData.pickInfo.pickedPoint);
-                }
-                else {
-                    lightTarget_1 = undefined;
-                }
-            });
-            var updateFlashlightFunction = function () {
-                if (_this.sceneManager.camera && flashlight) {
-                    flashlight.position.copyFrom(_this.sceneManager.camera.position);
-                    if (lightTarget_1) {
-                        lightTarget_1.subtractToRef(flashlight.position, flashlight.direction);
-                    }
-                }
-            };
-            this.sceneManager.scene.registerBeforeRender(updateFlashlightFunction);
-            this._registeredOnBeforeRenderFunctions.push(updateFlashlightFunction);
-        }
-    };
-    return DefaultViewer;
-}(AbstractViewerWithTemplate));
-export { DefaultViewer };
+import { __extends } from "tslib";
+import { TemplateManager } from "../templating/templateManager.js";
+import { FilesInput } from "@babylonjs/core/Misc/filesInput.js";
+import { SpotLight } from "@babylonjs/core/Lights/spotLight.js";
+import { Vector3 } from "@babylonjs/core/Maths/math.js";
+import { AbstractViewerWithTemplate } from "./viewerWithTemplate.js";
+import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial.js";
+import { PBRMaterial } from "@babylonjs/core/Materials/PBR/pbrMaterial.js";
+// eslint-disable-next-line import/no-internal-modules
+import { extendClassWithConfig } from "../helper/index.js";
+import { AnimationState } from "../model/modelAnimation.js";
+import { HDButtonPlugin } from "../templating/plugins/hdButtonPlugin.js";
+import { PrintButtonPlugin } from "../templating/plugins/printButton.js";
+import "@babylonjs/core/Lights/Shadows/shadowGeneratorSceneComponent.js";
+/**
+ * The Default viewer is the default implementation of the AbstractViewer.
+ * It uses the templating system to render a new canvas and controls.
+ */
+var DefaultViewer = /** @class */ (function (_super) {
+    __extends(DefaultViewer, _super);
+    /**
+     * Create a new default viewer
+     * @param containerElement the element in which the templates will be rendered
+     * @param initialConfiguration the initial configuration. Defaults to extending the default configuration
+     */
+    function DefaultViewer(containerElement, initialConfiguration) {
+        if (initialConfiguration === void 0) { initialConfiguration = { extends: "default" }; }
+        var _this = _super.call(this, containerElement, initialConfiguration) || this;
+        _this.containerElement = containerElement;
+        _this._registeredPlugins = [];
+        _this._handlePointerClick = function (event) {
+            var pointerDown = event.event;
+            if (pointerDown.button !== 0) {
+                return;
+            }
+            var element = event.event.target;
+            if (!element) {
+                return;
+            }
+            var parentClasses = element.parentElement.classList;
+            var elementClasses = element.classList;
+            var elementName = "";
+            for (var i = 0; i < elementClasses.length; ++i) {
+                var className = elementClasses[i];
+                if (className.indexOf("-button") !== -1 || className.indexOf("-wrapper") !== -1) {
+                    elementName = className;
+                    break;
+                }
+            }
+            switch (elementName) {
+                case "speed-button":
+                case "types-button":
+                    if (parentClasses.contains("open")) {
+                        parentClasses.remove("open");
+                    }
+                    else {
+                        parentClasses.add("open");
+                    }
+                    break;
+                case "play-pause-button":
+                    _this._togglePlayPause();
+                    break;
+                case "label-option-button": {
+                    var value = element.dataset["value"];
+                    var label = element.querySelector("span.animation-label");
+                    if (label && value) {
+                        _this._updateAnimationType({ value: value.trim(), label: label.innerHTML });
+                    }
+                    break;
+                }
+                case "speed-option-button": {
+                    if (!_this._currentAnimation) {
+                        return;
+                    }
+                    var speed = element.dataset["value"];
+                    if (speed) {
+                        _this._updateAnimationSpeed(speed);
+                    }
+                    break;
+                }
+                case "progress-wrapper":
+                    _this._resumePlay = !_this._isAnimationPaused;
+                    if (_this._resumePlay) {
+                        _this._togglePlayPause(true);
+                    }
+                    break;
+                case "fullscreen-button":
+                    _this.toggleFullscreen();
+                    break;
+                case "vr-button":
+                    _this.toggleVR();
+                    break;
+                default:
+                    return;
+            }
+        };
+        /**
+         * Plays or Pauses animation
+         * @param noUiUpdate
+         */
+        _this._togglePlayPause = function (noUiUpdate) {
+            if (!_this._currentAnimation) {
+                return;
+            }
+            if (_this._isAnimationPaused) {
+                _this._currentAnimation.restart();
+            }
+            else {
+                _this._currentAnimation.pause();
+            }
+            _this._isAnimationPaused = !_this._isAnimationPaused;
+            if (noUiUpdate) {
+                return;
+            }
+            var navbar = _this.templateManager.getTemplate("navBar");
+            if (!navbar) {
+                return;
+            }
+            navbar.updateParams({
+                paused: _this._isAnimationPaused,
+            });
+        };
+        /**
+         * Control progress bar position based on animation current frame
+         */
+        _this._updateProgressBar = function () {
+            var navbar = _this.templateManager.getTemplate("navBar");
+            if (!navbar) {
+                return;
+            }
+            var progressSlider = navbar.parent.querySelector("input.progress-wrapper");
+            if (progressSlider && _this._currentAnimation) {
+                var progress = (_this._currentAnimation.currentFrame / _this._currentAnimation.frames) * 100;
+                var currentValue = progressSlider.valueAsNumber;
+                if (Math.abs(currentValue - progress) > 0.5) {
+                    // Only move if greater than a 1% change
+                    progressSlider.value = "" + progress;
+                }
+                if (_this._currentAnimation.state === AnimationState.PLAYING) {
+                    if (_this.sceneManager.camera.autoRotationBehavior && !_this._oldIdleRotationValue) {
+                        _this._oldIdleRotationValue = _this.sceneManager.camera.autoRotationBehavior.idleRotationSpeed;
+                        _this.sceneManager.camera.autoRotationBehavior.idleRotationSpeed = 0;
+                    }
+                }
+                else {
+                    if (_this.sceneManager.camera.autoRotationBehavior && _this._oldIdleRotationValue) {
+                        _this.sceneManager.camera.autoRotationBehavior.idleRotationSpeed = _this._oldIdleRotationValue;
+                        _this._oldIdleRotationValue = 0;
+                    }
+                }
+            }
+        };
+        /**
+         * Update Current Animation Speed
+         * @param speed
+         * @param paramsObject
+         */
+        _this._updateAnimationSpeed = function (speed, paramsObject) {
+            var navbar = _this.templateManager.getTemplate("navBar");
+            if (!navbar) {
+                return;
+            }
+            if (speed && _this._currentAnimation) {
+                _this._currentAnimation.speedRatio = parseFloat(speed);
+                if (!_this._isAnimationPaused) {
+                    _this._currentAnimation.restart();
+                }
+                if (paramsObject) {
+                    paramsObject.selectedSpeed = speed + "x";
+                }
+                else {
+                    navbar.updateParams({
+                        selectedSpeed: speed + "x",
+                    });
+                }
+            }
+        };
+        /**
+         * Update Current Animation Type
+         * @param data
+         * @param data.label
+         * @param data.value
+         * @param paramsObject
+         */
+        _this._updateAnimationType = function (data, paramsObject) {
+            var navbar = _this.templateManager.getTemplate("navBar");
+            if (!navbar) {
+                return;
+            }
+            if (data) {
+                _this._currentAnimation = _this.sceneManager.models[0].setCurrentAnimationByName(data.value);
+            }
+            if (paramsObject) {
+                paramsObject.selectedAnimation = _this._animationList.indexOf(data.value) + 1;
+                paramsObject.selectedAnimationName = data.label;
+            }
+            else {
+                navbar.updateParams({
+                    selectedAnimation: _this._animationList.indexOf(data.value) + 1,
+                    selectedAnimationName: data.label,
+                });
+            }
+            _this._updateAnimationSpeed("1.0", paramsObject);
+        };
+        /**
+         * Toggle fullscreen of the entire viewer
+         */
+        _this.toggleFullscreen = function () {
+            var viewerTemplate = _this.templateManager.getTemplate("viewer");
+            var viewerElement = viewerTemplate && viewerTemplate.parent;
+            var fullscreenElement = _this.fullscreenElement || viewerElement;
+            if (fullscreenElement) {
+                var currentElement = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
+                if (!currentElement) {
+                    var requestFullScreen = fullscreenElement.requestFullscreen ||
+                        fullscreenElement.webkitRequestFullscreen ||
+                        fullscreenElement.msRequestFullscreen ||
+                        fullscreenElement.mozRequestFullScreen;
+                    requestFullScreen.call(fullscreenElement);
+                    if (viewerElement) {
+                        viewerElement.classList.add("in-fullscreen");
+                    }
+                }
+                else {
+                    var exitFullscreen = document.exitFullscreen || document.webkitExitFullscreen || document.msExitFullscreen || document.mozCancelFullScreen;
+                    exitFullscreen.call(document);
+                    if (viewerElement) {
+                        viewerElement.classList.remove("in-fullscreen");
+                    }
+                }
+            }
+        };
+        _this._onModelLoaded = function (model) {
+            _this._configureTemplate(model);
+            // with a short timeout, making sure everything is there already.
+            var hideLoadingDelay = 20;
+            if (_this.configuration.lab && _this.configuration.lab.hideLoadingDelay !== undefined) {
+                hideLoadingDelay = _this.configuration.lab.hideLoadingDelay;
+            }
+            setTimeout(function () {
+                _this.sceneManager.scene.executeWhenReady(function () {
+                    _this.hideLoadingScreen();
+                });
+            }, hideLoadingDelay);
+            return;
+        };
+        _this.onModelLoadedObservable.add(_this._onModelLoaded);
+        _this.onModelRemovedObservable.add(function () {
+            _this._configureTemplate();
+        });
+        _this.onEngineInitObservable.add(function () {
+            _this.sceneManager.onLightsConfiguredObservable.add(function () {
+                _this._configureLights();
+            });
+        });
+        _this.onInitDoneObservable.add(function () {
+            _this.sceneManager.setDefaultMaterial = function (sceneConfig) {
+                var conf = sceneConfig.defaultMaterial;
+                if (!conf) {
+                    return;
+                }
+                if ((conf.materialType === "standard" && this.scene.defaultMaterial.getClassName() !== "StandardMaterial") ||
+                    (conf.materialType === "pbr" && this.scene.defaultMaterial.getClassName() !== "PBRMaterial")) {
+                    this.scene.defaultMaterial.dispose();
+                    if (conf.materialType === "standard") {
+                        this.scene.defaultMaterial = new StandardMaterial("defaultMaterial", this.scene);
+                    }
+                    else {
+                        this.scene.defaultMaterial = new PBRMaterial("defaultMaterial", this.scene);
+                    }
+                }
+                extendClassWithConfig(this.scene.defaultMaterial, conf);
+            };
+            if (!_this.sceneManager.models.length) {
+                _this.hideLoadingScreen();
+            }
+        });
+        return _this;
+    }
+    DefaultViewer.prototype.registerTemplatePlugin = function (plugin) {
+        var _this = this;
+        //validate
+        if (!plugin.templateName) {
+            throw new Error("No template name provided");
+        }
+        this._registeredPlugins.push(plugin);
+        var template = this.templateManager.getTemplate(plugin.templateName);
+        if (!template) {
+            throw new Error("Template ".concat(plugin.templateName, " not found"));
+        }
+        if (plugin.addHTMLTemplate) {
+            template.onHTMLRendered.add(function (tmpl) {
+                plugin.addHTMLTemplate(tmpl);
+            });
+            template.redraw();
+        }
+        if (plugin.eventsToAttach) {
+            plugin.eventsToAttach.forEach(function (eventName) {
+                plugin.onEvent &&
+                    _this.templateManager.eventManager.registerCallback(plugin.templateName, function (event) {
+                        if (plugin.onEvent && plugin.interactionPredicate(event)) {
+                            plugin.onEvent(event);
+                        }
+                    }, eventName);
+            });
+        }
+    };
+    /**
+     * This will be executed when the templates initialize.
+     */
+    DefaultViewer.prototype._onTemplatesLoaded = function () {
+        var _this = this;
+        this.showLoadingScreen();
+        // navbar
+        this._initNavbar();
+        // close overlay button
+        var template = this.templateManager.getTemplate("overlay");
+        if (template) {
+            var closeButton = template.parent.querySelector(".close-button");
+            if (closeButton) {
+                closeButton.addEventListener("pointerdown", function () {
+                    _this.hideOverlayScreen();
+                });
+            }
+        }
+        if (this.configuration.templates && this.configuration.templates.viewer) {
+            if (this.configuration.templates.viewer.params && this.configuration.templates.viewer.params.enableDragAndDrop) {
+                this.onSceneInitObservable.addOnce(function () {
+                    var filesInput = new FilesInput(_this.engine, _this.sceneManager.scene, function () { }, function () { }, function () { }, function () { }, function () { }, function (file) {
+                        _this.loadModel(file);
+                    }, function () { });
+                    filesInput.monitorElementForDragNDrop(_this.templateManager.getCanvas());
+                });
+            }
+        }
+        return _super.prototype._onTemplatesLoaded.call(this);
+    };
+    DefaultViewer.prototype._initNavbar = function () {
+        var _this = this;
+        var navbar = this.templateManager.getTemplate("navBar");
+        if (navbar) {
+            this.onFrameRenderedObservable.add(this._updateProgressBar);
+            this.templateManager.eventManager.registerCallback("navBar", this._handlePointerClick, "click");
+            // an example how to trigger the help button. publiclly available
+            this.templateManager.eventManager.registerCallback("navBar", function () {
+                // do your thing
+            }, "pointerdown", ".help-button");
+            this.templateManager.eventManager.registerCallback("navBar", function (event) {
+                var evt = event.event;
+                var element = evt.target;
+                if (!_this._currentAnimation) {
+                    return;
+                }
+                var gotoFrame = (+element.value / 100) * _this._currentAnimation.frames;
+                if (isNaN(gotoFrame)) {
+                    return;
+                }
+                _this._currentAnimation.goToFrame(gotoFrame);
+            }, "input");
+            this.templateManager.eventManager.registerCallback("navBar", function () {
+                if (_this._resumePlay) {
+                    _this._togglePlayPause(true);
+                }
+                _this._resumePlay = false;
+            }, "pointerup", ".progress-wrapper");
+            if (window.devicePixelRatio === 1 && navbar.configuration.params && !navbar.configuration.params.hideHdButton) {
+                navbar.updateParams({
+                    hideHdButton: true,
+                });
+            }
+            this.registerTemplatePlugin(new HDButtonPlugin(this));
+            this.registerTemplatePlugin(new PrintButtonPlugin(this));
+        }
+    };
+    DefaultViewer.prototype._initVR = function () {
+        var _this = this;
+        this.engine.onVRDisplayChangedObservable.add(function () {
+            var viewerTemplate = _this.templateManager.getTemplate("viewer");
+            var viewerElement = viewerTemplate && viewerTemplate.parent;
+            if (viewerElement) {
+                if (_this.sceneManager.vrHelper.isInVRMode) {
+                    viewerElement.classList.add("in-vr");
+                }
+                else {
+                    viewerElement.classList.remove("in-vr");
+                }
+            }
+        });
+        if (this.sceneManager.vrHelper) {
+            // due to the way the experience helper is exisintg VR, this must be added.
+            this.sceneManager.vrHelper.onExitingVR.add(function () {
+                var viewerTemplate = _this.templateManager.getTemplate("viewer");
+                var viewerElement = viewerTemplate && viewerTemplate.parent;
+                if (viewerElement) {
+                    viewerElement.classList.remove("in-vr");
+                }
+            });
+        }
+        _super.prototype._initVR.call(this);
+    };
+    /**
+     * Preparing the container element to present the viewer
+     */
+    DefaultViewer.prototype._prepareContainerElement = function () {
+        var htmlElement = this.containerElement;
+        if (htmlElement.style) {
+            htmlElement.style.position = "relative";
+            htmlElement.style.height = "100%";
+            htmlElement.style.display = "flex";
+        }
+    };
+    /**
+     * This function will configure the templates and update them after a model was loaded
+     * It is mainly responsible to changing the title and subtitle etc'.
+     * @param model the model to be used to configure the templates by
+     */
+    DefaultViewer.prototype._configureTemplate = function (model) {
+        var navbar = this.templateManager.getTemplate("navBar");
+        if (!navbar) {
+            return;
+        }
+        var newParams = navbar.configuration.params || {};
+        if (!model) {
+            newParams.animations = null;
+        }
+        else {
+            var animationNames = model.getAnimationNames();
+            newParams.animations = animationNames.map(function (a) {
+                return { label: a, value: a };
+            });
+            if (animationNames.length) {
+                this._isAnimationPaused = (model.configuration.animation && !model.configuration.animation.autoStart) || !model.configuration.animation;
+                this._animationList = animationNames;
+                newParams.paused = this._isAnimationPaused;
+                var animationIndex = 0;
+                if (model.configuration.animation && typeof model.configuration.animation.autoStart === "string") {
+                    animationIndex = animationNames.indexOf(model.configuration.animation.autoStart);
+                    if (animationIndex === -1) {
+                        animationIndex = 0;
+                    }
+                }
+                this._updateAnimationType(newParams.animations[animationIndex], newParams);
+            }
+            else {
+                newParams.animations = null;
+            }
+            if (model.configuration.thumbnail) {
+                newParams.logoImage = model.configuration.thumbnail;
+            }
+        }
+        navbar.updateParams(newParams, false);
+    };
+    /**
+     * This will load a new model to the default viewer
+     * overriding the AbstractViewer's loadModel.
+     * The scene will automatically be cleared of the old models, if exist.
+     * @param model the configuration object (or URL) to load.
+     */
+    DefaultViewer.prototype.loadModel = function (model) {
+        var _this = this;
+        if (!model) {
+            model = this.configuration.model;
+        }
+        this.showLoadingScreen();
+        return _super.prototype.loadModel.call(this, model, true).catch(function (error) {
+            console.log(error);
+            _this.hideLoadingScreen();
+            _this.showOverlayScreen("error");
+            return Promise.reject(error);
+        });
+    };
+    /**
+     * Show the overlay and the defined sub-screen.
+     * Mainly used for help and errors
+     * @param subScreen the name of the subScreen. Those can be defined in the configuration object
+     */
+    DefaultViewer.prototype.showOverlayScreen = function (subScreen) {
+        var _this = this;
+        var template = this.templateManager.getTemplate("overlay");
+        if (!template) {
+            return Promise.resolve("Overlay template not found");
+        }
+        return template.show(function (template) {
+            var canvasRect = _this.containerElement.getBoundingClientRect();
+            template.parent.style.display = "flex";
+            template.parent.style.width = canvasRect.width + "px";
+            template.parent.style.height = canvasRect.height + "px";
+            template.parent.style.opacity = "1";
+            var subTemplate = _this.templateManager.getTemplate(subScreen);
+            if (!subTemplate) {
+                return Promise.reject(subScreen + " template not found");
+            }
+            return subTemplate.show(function (template) {
+                template.parent.style.display = "flex";
+                return Promise.resolve(template);
+            });
+        });
+    };
+    /**
+     * Hide the overlay screen.
+     */
+    DefaultViewer.prototype.hideOverlayScreen = function () {
+        var template = this.templateManager.getTemplate("overlay");
+        if (!template) {
+            return Promise.resolve("Overlay template not found");
+        }
+        return template.hide(function (template) {
+            template.parent.style.opacity = "0";
+            var onTransitionEnd = function () {
+                template.parent.removeEventListener("transitionend", onTransitionEnd);
+                template.parent.style.display = "none";
+            };
+            template.parent.addEventListener("transitionend", onTransitionEnd);
+            var overlays = template.parent.querySelectorAll(".overlay");
+            if (overlays) {
+                for (var i = 0; i < overlays.length; ++i) {
+                    var htmlElement = overlays.item(i);
+                    htmlElement.style.display = "none";
+                }
+            }
+            return Promise.resolve(template);
+        });
+    };
+    /**
+     * show the viewer (in case it was hidden)
+     *
+     * @param visibilityFunction an optional function to execute in order to show the container
+     */
+    DefaultViewer.prototype.show = function (visibilityFunction) {
+        var template = this.templateManager.getTemplate("main");
+        //not possible, but yet:
+        if (!template) {
+            return Promise.reject("Main template not found");
+        }
+        return template.show(visibilityFunction);
+    };
+    /**
+     * hide the viewer (in case it is visible)
+     *
+     * @param visibilityFunction an optional function to execute in order to hide the container
+     */
+    DefaultViewer.prototype.hide = function (visibilityFunction) {
+        var template = this.templateManager.getTemplate("main");
+        //not possible, but yet:
+        if (!template) {
+            return Promise.reject("Main template not found");
+        }
+        return template.hide(visibilityFunction);
+    };
+    /**
+     * Show the loading screen.
+     * The loading screen can be configured using the configuration object
+     */
+    DefaultViewer.prototype.showLoadingScreen = function () {
+        var _this = this;
+        var template = this.templateManager.getTemplate("loadingScreen");
+        if (!template) {
+            return Promise.resolve("Loading Screen template not found");
+        }
+        return template.show(function (template) {
+            var canvasRect = _this.containerElement.getBoundingClientRect();
+            // var canvasPositioning = window.getComputedStyle(this.containerElement).position;
+            template.parent.style.display = "flex";
+            template.parent.style.width = canvasRect.width + "px";
+            template.parent.style.height = canvasRect.height + "px";
+            template.parent.style.opacity = "1";
+            // from the configuration!!!
+            var color = "black";
+            if (_this.configuration.templates && _this.configuration.templates.loadingScreen) {
+                color = (_this.configuration.templates.loadingScreen.params && _this.configuration.templates.loadingScreen.params.backgroundColor) || color;
+            }
+            template.parent.style.backgroundColor = color;
+            return Promise.resolve(template);
+        });
+    };
+    /**
+     * Hide the loading screen
+     */
+    DefaultViewer.prototype.hideLoadingScreen = function () {
+        var template = this.templateManager.getTemplate("loadingScreen");
+        if (!template) {
+            return Promise.resolve("Loading Screen template not found");
+        }
+        return template.hide(function (template) {
+            template.parent.style.opacity = "0";
+            var onTransitionEnd = function () {
+                template.parent.removeEventListener("transitionend", onTransitionEnd);
+                template.parent.style.display = "none";
+            };
+            template.parent.addEventListener("transitionend", onTransitionEnd);
+            return Promise.resolve(template);
+        });
+    };
+    DefaultViewer.prototype.dispose = function () {
+        this.templateManager.dispose();
+        _super.prototype.dispose.call(this);
+    };
+    DefaultViewer.prototype._onConfigurationLoaded = function (configuration) {
+        var _this = this;
+        _super.prototype._onConfigurationLoaded.call(this, configuration);
+        this.templateManager = new TemplateManager(this.containerElement);
+        // initialize the templates
+        var templateConfiguration = this.configuration.templates || {};
+        this.templateManager.initTemplate(templateConfiguration);
+        // when done, execute onTemplatesLoaded()
+        this.templateManager.onAllLoaded.add(function () {
+            var canvas = _this.templateManager.getCanvas();
+            if (canvas) {
+                _this._canvas = canvas;
+            }
+            _this._onTemplateLoaded();
+        });
+    };
+    /**
+     * An extension of the light configuration of the abstract viewer.
+     */
+    DefaultViewer.prototype._configureLights = function () {
+        var _this = this;
+        // labs feature - flashlight
+        if (this.configuration.lab && this.configuration.lab.flashlight) {
+            var lightTarget_1;
+            var angle = 0.5;
+            var exponent = Math.PI / 2;
+            if (typeof this.configuration.lab.flashlight === "object") {
+                exponent = this.configuration.lab.flashlight.exponent || exponent;
+                angle = this.configuration.lab.flashlight.angle || angle;
+            }
+            var flashlight_1 = new SpotLight("flashlight", Vector3.Zero(), Vector3.Zero(), exponent, angle, this.sceneManager.scene);
+            if (typeof this.configuration.lab.flashlight === "object") {
+                flashlight_1.intensity = this.configuration.lab.flashlight.intensity || flashlight_1.intensity;
+                if (this.configuration.lab.flashlight.diffuse) {
+                    flashlight_1.diffuse.r = this.configuration.lab.flashlight.diffuse.r;
+                    flashlight_1.diffuse.g = this.configuration.lab.flashlight.diffuse.g;
+                    flashlight_1.diffuse.b = this.configuration.lab.flashlight.diffuse.b;
+                }
+                if (this.configuration.lab.flashlight.specular) {
+                    flashlight_1.specular.r = this.configuration.lab.flashlight.specular.r;
+                    flashlight_1.specular.g = this.configuration.lab.flashlight.specular.g;
+                    flashlight_1.specular.b = this.configuration.lab.flashlight.specular.b;
+                }
+            }
+            this.sceneManager.scene.constantlyUpdateMeshUnderPointer = true;
+            this.sceneManager.scene.onPointerObservable.add(function (eventData) {
+                if (eventData.type === 4 && eventData.pickInfo) {
+                    lightTarget_1 = eventData.pickInfo.pickedPoint;
+                }
+                else {
+                    lightTarget_1 = undefined;
+                }
+            });
+            var updateFlashlightFunction = function () {
+                if (_this.sceneManager.camera && flashlight_1) {
+                    flashlight_1.position.copyFrom(_this.sceneManager.camera.position);
+                    if (lightTarget_1) {
+                        lightTarget_1.subtractToRef(flashlight_1.position, flashlight_1.direction);
+                    }
+                }
+            };
+            this.sceneManager.scene.registerBeforeRender(updateFlashlightFunction);
+            this._registeredOnBeforeRenderFunctions.push(updateFlashlightFunction);
+        }
+    };
+    return DefaultViewer;
+}(AbstractViewerWithTemplate));
+export { DefaultViewer };
 //# sourceMappingURL=defaultViewer.js.map