less dependencies between modules

Viewer/src/configuration/configurationContainer.ts

@@ -0,0 +1,12 @@
+import { ViewerConfiguration } from './configuration';
+import { Color3 } from 'babylonjs';
+
+export class ConfigurationContainer {
+
+    public configuration: ViewerConfiguration;
+
+    public viewerId: string;
+
+    public mainColor: Color3 = Color3.White();
+    public reflectionColor: Color3 = Color3.White();
+}

Viewer/src/configuration/globals.ts

@@ -1,8 +1,12 @@
+import { ConfigurationContainer } from "./configurationContainer";
+
 export class ViewerGlobals {
 
     public disableInit: boolean = false;
     public disableWebGL2Support: boolean = false;
 
+    public configurations: { [id: string]: ConfigurationContainer };
+
 }
 
 export let viewerGlobals: ViewerGlobals = new ViewerGlobals();

Viewer/src/configuration/interfaces/sceneConfiguration.ts

@@ -1,4 +1,4 @@
-import { IImageProcessingConfiguration, IColorGradingConfiguration } from ".";
+import { IImageProcessingConfiguration, IColorGradingConfiguration } from "./";
 import { IGlowLayerOptions } from "babylonjs";
 
 export interface ISceneConfiguration {

Viewer/src/configuration/interfaces/skyboxConfiguration.ts

@@ -1,4 +1,4 @@
-import { IImageProcessingConfiguration } from ".";
+import { IImageProcessingConfiguration } from "./";
 
 export interface ISkyboxConfiguration {
     cubeTexture?: {

Viewer/src/loader/modelLoader.ts

@@ -1,11 +1,12 @@
-import { AbstractViewer } from "../viewer/viewer";
 import { ISceneLoaderPlugin, ISceneLoaderPluginAsync, Tools, SceneLoader, Tags } from "babylonjs";
 import { GLTFFileLoader, GLTFLoaderAnimationStartMode } from "babylonjs-loaders";
-import { IModelConfiguration } from "../configuration/interfaces";
+import { IModelConfiguration, ViewerConfiguration } from "../configuration";
 import { ViewerModel, ModelState } from "../model/viewerModel";
 import { ILoaderPlugin } from './plugins/loaderPlugin';
 import { TelemetryLoaderPlugin } from './plugins/telemetryLoaderPlugin';
 import { getLoaderPluginByName } from './plugins/';
+import { ObservablesManager } from "managers/observablesManager";
+import { ConfigurationContainer } from "../configuration/configurationContainer";
 
 /**
  * An instance of the class is in charge of loading the model correctly.
@@ -26,7 +27,7 @@ export class ModelLoader {
      * Create a new Model loader
      * @param _viewer the viewer using this model loader
      */
-    constructor(private _viewer: AbstractViewer) {
+    constructor(private _observablesManager: ObservablesManager, private _configurationContainer?: ConfigurationContainer) {
         this._loaders = [];
         this._loadId = 0;
         this._plugins = [];
@@ -58,7 +59,7 @@ export class ModelLoader {
      */
     public load(modelConfiguration: IModelConfiguration): ViewerModel {
 
-        const model = new ViewerModel(this._viewer, modelConfiguration);
+        const model = new ViewerModel(this._observablesManager, modelConfiguration);
 
         model.loadId = this._loadId++;
 
@@ -69,6 +70,7 @@ export class ModelLoader {
         }
 
         let base: string;
+
         let filename: any;
         if (modelConfiguration.file) {
             base = "file:";
@@ -82,7 +84,9 @@ export class ModelLoader {
 
         let plugin = modelConfiguration.loader;
 
-        model.loader = SceneLoader.ImportMesh(undefined, base, filename, this._viewer.sceneManager.scene, (meshes, particleSystems, skeletons, animationGroups) => {
+        let scene = model.rootMesh.getScene();
+
+        model.loader = SceneLoader.ImportMesh(undefined, base, filename, scene, (meshes, particleSystems, skeletons, animationGroups) => {
             meshes.forEach(mesh => {
                 Tags.AddTagsTo(mesh, "viewerMesh");
                 model.addMesh(mesh);
@@ -95,7 +99,7 @@ export class ModelLoader {
             }
 
             this._checkAndRun("onLoaded", model);
-            this._viewer.sceneManager.scene.executeWhenReady(() => {
+            scene.executeWhenReady(() => {
                 model.onLoadedObservable.notifyObservers(model);
             });
         }, (progressEvent) => {
@@ -119,7 +123,11 @@ export class ModelLoader {
                 };
             }
             // if ground is set to "mirror":
-            if (this._viewer.configuration.ground && typeof this._viewer.configuration.ground === 'object' && this._viewer.configuration.ground.mirror) {
+            if (this._configurationContainer
+                && this._configurationContainer.configuration
+                && this._configurationContainer.configuration.ground
+                && typeof this._configurationContainer.configuration.ground === 'object'
+                && this._configurationContainer.configuration.ground.mirror) {
                 gltfLoader.useClipPlane = true;
             }
             Object.keys(gltfLoader).filter(name => name.indexOf('on') === 0 && name.indexOf('Observable') !== -1).forEach(functionName => {

Viewer/src/loader/plugins/applyMaterialConfig.ts

@@ -1,6 +1,6 @@
 import { ILoaderPlugin } from "./loaderPlugin";
 import { telemetryManager } from "../../telemetryManager";
-import { ViewerModel } from "../..";
+import { ViewerModel } from "../../model/viewerModel";
 import { Tools, ISceneLoaderPlugin, ISceneLoaderPluginAsync, Material } from "babylonjs";
 import { IGLTFLoaderData, GLTF2 } from "babylonjs-loaders";
 

Viewer/src/loader/plugins/msftLodLoaderPlugin.ts

@@ -1,6 +1,6 @@
 import { ILoaderPlugin } from "./loaderPlugin";
 import { telemetryManager } from "../../telemetryManager";
-import { ViewerModel } from "../..";
+import { ViewerModel } from "../../model/viewerModel";
 import { Tools, ISceneLoaderPlugin, ISceneLoaderPluginAsync } from "babylonjs";
 import { IGLTFLoaderExtension, GLTF2 } from "babylonjs-loaders";
 

Viewer/src/loader/plugins/telemetryLoaderPlugin.ts

@@ -1,6 +1,6 @@
 import { ILoaderPlugin } from "./loaderPlugin";
 import { telemetryManager } from "../../telemetryManager";
-import { ViewerModel } from "../..";
+import { ViewerModel } from "../../model/viewerModel";
 import { Tools, ISceneLoaderPlugin, ISceneLoaderPluginAsync } from "babylonjs";
 
 
@@ -17,30 +17,30 @@ export class TelemetryLoaderPlugin implements ILoaderPlugin {
     }
 
     public onLoaded(model: ViewerModel) {
-        telemetryManager.broadcast("Model Loaded", model.getViewer(), {
+        telemetryManager.broadcast("Model Loaded", model.getViewerId(), {
             model: model,
             loadTime: Tools.Now - this._loadStart
         });
-        telemetryManager.flushWebGLErrors(this._model.getViewer());
+        telemetryManager.flushWebGLErrors(model.rootMesh.getEngine(), model.getViewerId());
     }
 
     public onError(message: string, exception: any) {
         this._loadEnd = Tools.Now;
-        telemetryManager.broadcast("Load Error", this._model.getViewer(), {
+        telemetryManager.broadcast("Load Error", this._model.getViewerId(), {
             model: this._model,
             loadTime: this._loadEnd - this._loadStart
         });
 
-        telemetryManager.flushWebGLErrors(this._model.getViewer());
+        telemetryManager.flushWebGLErrors(this._model.rootMesh.getEngine(), this._model.getViewerId());
     }
 
     public onComplete() {
         this._loadEnd = Tools.Now;
-        telemetryManager.broadcast("Load Complete", this._model.getViewer(), {
+        telemetryManager.broadcast("Load Complete", this._model.getViewerId(), {
             model: this._model,
             loadTime: this._loadEnd - this._loadStart
         });
 
-        telemetryManager.flushWebGLErrors(this._model.getViewer());
+        telemetryManager.flushWebGLErrors(this._model.rootMesh.getEngine(), this._model.getViewerId());
     }
 }

Viewer/src/managers/sceneManager.ts

@@ -123,8 +123,9 @@ export class SceneManager {
         //});
 
         this.onSceneInitObservable.add((scene) => {
+            this.scene.animationPropertiesOverride = this.scene.animationPropertiesOverride || new AnimationPropertiesOverride();
 
-            this.labs = new ViewerLabs(this.scene);
+            this.labs = new ViewerLabs(scene);
 
             let updateShadows = () => {
                 for (let light of this.scene.lights) {
@@ -155,20 +156,30 @@ export class SceneManager {
             });
             return this._observablesManager && this._observablesManager.onSceneInitObservable.notifyObserversWithPromise(this.scene);
         });
-
-        this._observablesManager && this._observablesManager.onModelLoadedObservable.add((model) => {
-            for (let light of this.scene.lights) {
-                let generator = light.getShadowGenerator();
-                if (generator) {
-                    // Processing shadows if animates
-                    let shadowMap = generator.getShadowMap();
-                    if (shadowMap) {
-                        shadowMap.refreshRate = RenderTargetTexture.REFRESHRATE_RENDER_ONCE;
+        if (this._observablesManager) {
+            this._observablesManager.onModelLoadedObservable.add((model) => {
+                for (let light of this.scene.lights) {
+                    let generator = light.getShadowGenerator();
+                    if (generator) {
+                        // Processing shadows if animates
+                        let shadowMap = generator.getShadowMap();
+                        if (shadowMap) {
+                            shadowMap.refreshRate = RenderTargetTexture.REFRESHRATE_RENDER_ONCE;
+                        }
                     }
                 }
-            }
-            this._focusOnModel(model);
-        });
+                this._focusOnModel(model);
+            });
+
+            this._observablesManager.onModelAddedObservable.add(model => {
+                this.models.push(model);
+            });
+            this._observablesManager.onModelRemovedObservable.add(model => {
+                this.models.splice(this.models.indexOf(model), 1);
+            })
+
+        }
+
     }
 
     /**
@@ -190,13 +201,15 @@ export class SceneManager {
     }
 
     public get animationBlendingEnabled() {
-        return this._animationBlendingEnabled;
+        return this.scene && this.scene.animationPropertiesOverride!.enableBlending;
     }
 
     public set animationBlendingEnabled(value: boolean) {
-        this.scene.animationPropertiesOverride = this.scene.animationPropertiesOverride || new AnimationPropertiesOverride();
-        this.scene.animationPropertiesOverride.enableBlending = value;
-        this._animationBlendingEnabled = value;
+        this.scene.animationPropertiesOverride!.enableBlending = value;
+    }
+
+    public get observablesManager() {
+        return this._observablesManager;
     }
 
     private _processShadows: boolean = true;

Viewer/src/model/viewerModel.ts

@@ -3,9 +3,9 @@ import { GLTFFileLoader, GLTF2 } from "babylonjs-loaders";
 import { IModelConfiguration, IModelAnimationConfiguration } from "../configuration/interfaces";
 import { IModelAnimation, GroupModelAnimation, AnimationPlayMode, ModelAnimationConfiguration, EasingFunction, AnimationState } from "./modelAnimation";
 
-import { deepmerge } from '../helper/';
-import { AbstractViewer } from "..";
-import { extendClassWithConfig } from "../helper/";
+import { deepmerge, extendClassWithConfig } from '../helper/';
+import { ObservablesManager } from "managers/observablesManager";
+import { ConfigurationContainer } from "configuration/configurationContainer";
 
 
 /**
@@ -104,7 +104,7 @@ export class ViewerModel implements IDisposable {
 
     private _shadowsRenderedAfterLoad: boolean = false;
 
-    constructor(protected _viewer: AbstractViewer, modelConfiguration: IModelConfiguration) {
+    constructor(private _observablesManager: ObservablesManager, modelConfiguration: IModelConfiguration, private _configurationContainer?: ConfigurationContainer) {
         this.onLoadedObservable = new Observable();
         this.onLoadErrorObservable = new Observable();
         this.onLoadProgressObservable = new Observable();
@@ -113,8 +113,8 @@ export class ViewerModel implements IDisposable {
 
         this.state = ModelState.INIT;
 
-        this.rootMesh = new AbstractMesh("modelRootMesh", this._viewer.sceneManager.scene);
-        this._pivotMesh = new AbstractMesh("pivotMesh", this._viewer.sceneManager.scene);
+        this.rootMesh = new AbstractMesh("modelRootMesh");
+        this._pivotMesh = new AbstractMesh("pivotMesh");
         this._pivotMesh.parent = this.rootMesh;
         // rotate 180, gltf fun
         this._pivotMesh.rotation.y += Math.PI;
@@ -123,10 +123,9 @@ export class ViewerModel implements IDisposable {
 
         this._animations = [];
         //create a copy of the configuration to make sure it doesn't change even after it is changed in the viewer
-        this._modelConfiguration = deepmerge(this._viewer.configuration.model || {}, modelConfiguration);
+        this._modelConfiguration = deepmerge((this._configurationContainer && this._configurationContainer.configuration.model) || {}, modelConfiguration);
 
-        this._viewer.sceneManager.models.push(this);
-        this._viewer.onModelAddedObservable.notifyObservers(this);
+        if (this._observablesManager) { this._observablesManager.onModelAddedObservable.notifyObservers(this); }
 
         if (this._modelConfiguration.entryAnimation) {
             this.rootMesh.setEnabled(false);
@@ -134,7 +133,7 @@ export class ViewerModel implements IDisposable {
 
         this.onLoadedObservable.add(() => {
             this.updateConfiguration(this._modelConfiguration);
-            this._viewer.onModelLoadedObservable.notifyObservers(this);
+            if (this._observablesManager) { this._observablesManager.onModelLoadedObservable.notifyObservers(this); }
             this._initAnimations();
         });
 
@@ -155,6 +154,10 @@ export class ViewerModel implements IDisposable {
         }
     }
 
+    public getViewerId() {
+        return this._configurationContainer && this._configurationContainer.viewerId;
+    }
+
     /**
      * Is this model enabled?
      */
@@ -181,13 +184,6 @@ export class ViewerModel implements IDisposable {
     }
 
     /**
-     * Get the viewer showing this model
-     */
-    public getViewer() {
-        return this._viewer;
-    }
-
-    /**
      * Add a mesh to this model.
      * Any mesh that has no parent will be provided with the root mesh as its new parent.
      * 
@@ -244,7 +240,7 @@ export class ViewerModel implements IDisposable {
         // check if this is not a gltf loader and init the animations
         if (this.skeletons.length) {
             this.skeletons.forEach((skeleton, idx) => {
-                let ag = new AnimationGroup("animation-" + idx, this._viewer.sceneManager.scene);
+                let ag = new AnimationGroup("animation-" + idx);
                 skeleton.getAnimatables().forEach(a => {
                     if (a.animations[0]) {
                         ag.addTargetedAnimation(a.animations[0], a);
@@ -282,9 +278,10 @@ export class ViewerModel implements IDisposable {
      * @param completeCallback A function to call when the animation has completed
      */
     private _enterScene(completeCallback?: () => void): void {
+        const scene = this.rootMesh.getScene();
         let callback = () => {
             this.state = ModelState.ENTRYDONE;
-            this._viewer.sceneManager.animationBlendingEnabled = true;
+            scene.animationPropertiesOverride!.enableBlending = true;
             this._checkCompleteState();
             if (completeCallback) completeCallback();
         }
@@ -294,7 +291,7 @@ export class ViewerModel implements IDisposable {
         }
         this.rootMesh.setEnabled(true);
         // disable blending for the sake of the entry animation;
-        this._viewer.sceneManager.animationBlendingEnabled = false;
+        scene.animationPropertiesOverride!.enableBlending = false;
         this._applyAnimation(this._entryAnimation, true, callback);
     }
 
@@ -553,8 +550,8 @@ export class ViewerModel implements IDisposable {
             if (this._modelConfiguration.material.directEnabled !== undefined) {
                 material.disableLighting = !this._modelConfiguration.material.directEnabled;
             }
-            if (this._viewer.sceneManager.reflectionColor) {
-                material.reflectionColor = this._viewer.sceneManager.reflectionColor;
+            if (this._configurationContainer && this._configurationContainer.reflectionColor) {
+                material.reflectionColor = this._configurationContainer.reflectionColor;
             }
         }
         else if (material instanceof MultiMaterial) {
@@ -631,8 +628,8 @@ export class ViewerModel implements IDisposable {
 
         this.rootMesh.animations = animations;
 
-        if (this._viewer.sceneManager.scene.beginAnimation) {
-            let animatable: Animatable = this._viewer.sceneManager.scene.beginAnimation(this.rootMesh, 0, this._frameRate * duration, false, 1, () => {
+        if (this.rootMesh.getScene().beginAnimation) {
+            let animatable: Animatable = this.rootMesh.getScene().beginAnimation(this.rootMesh, 0, this._frameRate * duration, false, 1, () => {
                 if (onAnimationEnd) {
                     onAnimationEnd();
                 }
@@ -733,10 +730,10 @@ export class ViewerModel implements IDisposable {
      */
     public remove() {
         this.stopAllAnimations();
-        this._viewer.sceneManager.models.splice(this._viewer.sceneManager.models.indexOf(this), 1);
+
         // hide it
         this.rootMesh.isVisible = false;
-        this._viewer.onModelRemovedObservable.notifyObservers(this);
+        if (this._observablesManager) { this._observablesManager.onModelRemovedObservable.notifyObservers(this); }
     }
 
     /**

Viewer/src/telemetryManager.ts

@@ -1,5 +1,4 @@
 import { Engine, Observable } from "babylonjs";
-import { AbstractViewer } from "./viewer/viewer";
 
 /**
  * The data structure of a telemetry event.
@@ -9,7 +8,7 @@ export interface TelemetryData {
     session: string;
     date: Date;
     now: number;
-    viewer?: AbstractViewer
+    viewerId?: string;
     detail: any;
 }
 
@@ -22,7 +21,7 @@ export class TelemetryManager {
 
     private _currentSessionId: string;
 
-    private _event: (event: string, viewer: AbstractViewer, details?: any) => void = this._eventEnabled;
+    private _event: (event: string, viewerId?: string, details?: any) => void = this._eventEnabled;
 
     /**
      * Receives a telemetry event
@@ -37,8 +36,7 @@ export class TelemetryManager {
      * Log a Telemetry event for errors raised on the WebGL context.
      * @param engine The Babylon engine with the WebGL context.
      */
-    public flushWebGLErrors(viewer: AbstractViewer) {
-        const engine = viewer.engine;
+    public flushWebGLErrors(engine: Engine, viewerId?: string) {
         if (!engine) {
             return;
         }
@@ -51,7 +49,7 @@ export class TelemetryManager {
                 if (error === gl.NO_ERROR) {
                     logErrors = false;
                 } else {
-                    this.broadcast("WebGL Error", viewer, { error: error });
+                    this.broadcast("WebGL Error", viewerId, { error: error });
                 }
             } else {
                 logErrors = false;
@@ -83,9 +81,9 @@ export class TelemetryManager {
      * @param event - The name of the Telemetry event
      * @param details An additional value, or an object containing a list of property/value pairs
      */
-    private _eventEnabled(event: string, viewer?: AbstractViewer, details?: any): void {
+    private _eventEnabled(event: string, viewerId?: string, details?: any): void {
         let telemetryData: TelemetryData = {
-            viewer,
+            viewerId,
             event: event,
             session: this.session,
             date: new Date(),

Viewer/src/viewer/defaultViewer.ts

@@ -347,8 +347,8 @@ export class DefaultViewer extends AbstractViewer {
         this._configureTemplate(model);
         // with a short timeout, making sure everything is there already.
         let hideLoadingDelay = 20;
-        if (this._configuration.lab && this._configuration.lab.hideLoadingDelay !== undefined) {
-            hideLoadingDelay = this._configuration.lab.hideLoadingDelay;
+        if (this.configuration.lab && this.configuration.lab.hideLoadingDelay !== undefined) {
+            hideLoadingDelay = this.configuration.lab.hideLoadingDelay;
         }
         setTimeout(() => {
             this.sceneManager.scene.executeWhenReady(() => {
@@ -493,7 +493,7 @@ export class DefaultViewer extends AbstractViewer {
         super._onConfigurationLoaded(configuration);
 
         // initialize the templates
-        let templateConfiguration = this._configuration.templates || {};
+        let templateConfiguration = this.configuration.templates || {};
         this.templateManager = new TemplateManager(this.containerElement);
         this.templateManager.initTemplate(templateConfiguration);
         // when done, execute onTemplatesLoaded()
@@ -513,28 +513,28 @@ export class DefaultViewer extends AbstractViewer {
      */
     private _configureLights(lightsConfiguration: { [name: string]: ILightConfiguration | boolean | number } = {}, model?: ViewerModel) {
         // labs feature - flashlight
-        if (this._configuration.lab && this._configuration.lab.flashlight) {
+        if (this.configuration.lab && this.configuration.lab.flashlight) {
             let pointerPosition = Vector3.Zero();
             let lightTarget;
             let angle = 0.5;
             let 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;
+            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 (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;
+                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;
                 }
 
             }