Final merge

dist/preview release/loaders/babylon.glTF1FileLoader.js

@@ -647,14 +647,18 @@ var BABYLON;
             };
         };
         GLTFFileLoader._compareVersion = function (a, b) {
-            if (a.major > b.major)
+            if (a.major > b.major) {
                 return 1;
-            if (a.major < b.major)
+            }
+            if (a.major < b.major) {
                 return -1;
-            if (a.minor > b.minor)
+            }
+            if (a.minor > b.minor) {
                 return 1;
-            if (a.minor < b.minor)
+            }
+            if (a.minor < b.minor) {
                 return -1;
+            }
             return 0;
         };
         GLTFFileLoader._decodeBufferToText = function (buffer) {
@@ -867,8 +871,9 @@ var BABYLON;
                 this._maxPos = toParse.length;
             }
             Tokenizer.prototype.getNextToken = function () {
-                if (this.isEnd())
+                if (this.isEnd()) {
                     return ETokenType.END_OF_INPUT;
+                }
                 this.currentString = this.read();
                 this.currentToken = ETokenType.UNKNOWN;
                 if (this.currentString === "_" || this.isLetterOrDigitPattern.test(this.currentString)) {
@@ -2294,7 +2299,6 @@ var BABYLON;
                     onload();
                 }
             };
-            ;
             GLTFLoader.prototype._loadBuffersAsync = function (gltfRuntime, onLoad, onProgress) {
                 var hasBuffers = false;
                 var processBuffer = function (buf, buffer) {
@@ -2349,7 +2353,6 @@ var BABYLON;
             return GLTFLoader;
         }());
         GLTF1.GLTFLoader = GLTFLoader;
-        ;
         BABYLON.GLTFFileLoader._CreateGLTFLoaderV1 = function () { return new GLTFLoader(); };
     })(GLTF1 = BABYLON.GLTF1 || (BABYLON.GLTF1 = {}));
 })(BABYLON || (BABYLON = {}));
@@ -2758,8 +2761,6 @@ var BABYLON;
     var GLTF1;
     (function (GLTF1) {
         var BinaryExtensionBufferName = "binary_glTF";
-        ;
-        ;
         var GLTFBinaryExtension = /** @class */ (function (_super) {
             __extends(GLTFBinaryExtension, _super);
             function GLTFBinaryExtension() {
@@ -2837,20 +2838,19 @@ var BABYLON;
 (function (BABYLON) {
     var GLTF1;
     (function (GLTF1) {
-        ;
-        ;
-        ;
         var GLTFMaterialsCommonExtension = /** @class */ (function (_super) {
             __extends(GLTFMaterialsCommonExtension, _super);
             function GLTFMaterialsCommonExtension() {
                 return _super.call(this, "KHR_materials_common") || this;
             }
             GLTFMaterialsCommonExtension.prototype.loadRuntimeExtensionsAsync = function (gltfRuntime, onSuccess, onError) {
-                if (!gltfRuntime.extensions)
+                if (!gltfRuntime.extensions) {
                     return false;
+                }
                 var extension = gltfRuntime.extensions[this.name];
-                if (!extension)
+                if (!extension) {
                     return false;
+                }
                 // Create lights
                 var lights = extension.lights;
                 if (lights) {
@@ -2895,11 +2895,13 @@ var BABYLON;
             };
             GLTFMaterialsCommonExtension.prototype.loadMaterialAsync = function (gltfRuntime, id, onSuccess, onError) {
                 var material = gltfRuntime.materials[id];
-                if (!material || !material.extensions)
+                if (!material || !material.extensions) {
                     return false;
+                }
                 var extension = material.extensions[this.name];
-                if (!extension)
+                if (!extension) {
                     return false;
+                }
                 var standardMaterial = new BABYLON.StandardMaterial(id, gltfRuntime.scene);
                 standardMaterial.sideOrientation = BABYLON.Material.CounterClockWiseSideOrientation;
                 if (extension.technique === "CONSTANT") {

dist/preview release/loaders/babylon.glTF2FileLoader.js

@@ -647,14 +647,18 @@ var BABYLON;
             };
         };
         GLTFFileLoader._compareVersion = function (a, b) {
-            if (a.major > b.major)
+            if (a.major > b.major) {
                 return 1;
-            if (a.major < b.major)
+            }
+            if (a.major < b.major) {
                 return -1;
-            if (a.minor > b.minor)
+            }
+            if (a.minor > b.minor) {
                 return 1;
-            if (a.minor < b.minor)
+            }
+            if (a.minor < b.minor) {
                 return -1;
+            }
             return 0;
         };
         GLTFFileLoader._decodeBufferToText = function (buffer) {
@@ -1446,12 +1450,15 @@ var BABYLON;
                     matrix.decompose(scaling, rotation, position);
                 }
                 else {
-                    if (node.translation)
+                    if (node.translation) {
                         position = BABYLON.Vector3.FromArray(node.translation);
-                    if (node.rotation)
+                    }
+                    if (node.rotation) {
                         rotation = BABYLON.Quaternion.FromArray(node.rotation);
-                    if (node.scale)
+                    }
+                    if (node.scale) {
                         scaling = BABYLON.Vector3.FromArray(node.scale);
+                    }
                 }
                 babylonNode.position = position;
                 babylonNode.rotationQuaternion = rotation;
@@ -2192,7 +2199,6 @@ var BABYLON;
                         wrapV: GLTFLoader._GetTextureWrapMode(context + "/wrapT", sampler.wrapT)
                     };
                 }
-                ;
                 return sampler._data;
             };
             /**
@@ -3093,12 +3099,15 @@ var BABYLON;
                             var promise = Promise.all(clipPromises).then(function () {
                                 var weights = emitter.clips.map(function (clip) { return clip.weight || 1; });
                                 var weightedSound = new BABYLON.WeightedSound(emitter.loop || false, emitter._babylonSounds, weights);
-                                if (emitter.innerAngle)
+                                if (emitter.innerAngle) {
                                     weightedSound.directionalConeInnerAngle = 2 * BABYLON.Tools.ToDegrees(emitter.innerAngle);
-                                if (emitter.outerAngle)
+                                }
+                                if (emitter.outerAngle) {
                                     weightedSound.directionalConeOuterAngle = 2 * BABYLON.Tools.ToDegrees(emitter.outerAngle);
-                                if (emitter.volume)
+                                }
+                                if (emitter.volume) {
                                     weightedSound.volume = emitter.volume;
+                                }
                                 emitter._babylonData.sound = weightedSound;
                             });
                             emitter._babylonData = {

dist/preview release/loaders/babylon.glTFFileLoader.js

@@ -647,14 +647,18 @@ var BABYLON;
             };
         };
         GLTFFileLoader._compareVersion = function (a, b) {
-            if (a.major > b.major)
+            if (a.major > b.major) {
                 return 1;
-            if (a.major < b.major)
+            }
+            if (a.major < b.major) {
                 return -1;
-            if (a.minor > b.minor)
+            }
+            if (a.minor > b.minor) {
                 return 1;
-            if (a.minor < b.minor)
+            }
+            if (a.minor < b.minor) {
                 return -1;
+            }
             return 0;
         };
         GLTFFileLoader._decodeBufferToText = function (buffer) {
@@ -867,8 +871,9 @@ var BABYLON;
                 this._maxPos = toParse.length;
             }
             Tokenizer.prototype.getNextToken = function () {
-                if (this.isEnd())
+                if (this.isEnd()) {
                     return ETokenType.END_OF_INPUT;
+                }
                 this.currentString = this.read();
                 this.currentToken = ETokenType.UNKNOWN;
                 if (this.currentString === "_" || this.isLetterOrDigitPattern.test(this.currentString)) {
@@ -2294,7 +2299,6 @@ var BABYLON;
                     onload();
                 }
             };
-            ;
             GLTFLoader.prototype._loadBuffersAsync = function (gltfRuntime, onLoad, onProgress) {
                 var hasBuffers = false;
                 var processBuffer = function (buf, buffer) {
@@ -2349,7 +2353,6 @@ var BABYLON;
             return GLTFLoader;
         }());
         GLTF1.GLTFLoader = GLTFLoader;
-        ;
         BABYLON.GLTFFileLoader._CreateGLTFLoaderV1 = function () { return new GLTFLoader(); };
     })(GLTF1 = BABYLON.GLTF1 || (BABYLON.GLTF1 = {}));
 })(BABYLON || (BABYLON = {}));

dist/preview release/loaders/babylon.objFileLoader.js

@@ -350,14 +350,16 @@ var BABYLON;
              * @returns {boolean}
              */
             var isInArray = function (arr, obj) {
-                if (!arr[obj[0]])
+                if (!arr[obj[0]]) {
                     arr[obj[0]] = { normals: [], idx: [] };
+                }
                 var idx = arr[obj[0]].normals.indexOf(obj[1]);
                 return idx === -1 ? -1 : arr[obj[0]].idx[idx];
             };
             var isInArrayUV = function (arr, obj) {
-                if (!arr[obj[0]])
+                if (!arr[obj[0]]) {
                     arr[obj[0]] = { normals: [], idx: [], uv: [] };
+                }
                 var idx = arr[obj[0]].normals.indexOf(obj[1]);
                 if (idx != 1 && (obj[2] == arr[obj[0]].uv[idx])) {
                     return arr[obj[0]].idx[idx];
@@ -411,8 +413,9 @@ var BABYLON;
                     //Add the tuple in the comparison list
                     tuplePosNorm[indicePositionFromObj].normals.push(indiceNormalFromObj);
                     tuplePosNorm[indicePositionFromObj].idx.push(curPositionInIndices++);
-                    if (OBJFileLoader.OPTIMIZE_WITH_UV)
+                    if (OBJFileLoader.OPTIMIZE_WITH_UV) {
                         tuplePosNorm[indicePositionFromObj].uv.push(indiceUvsFromObj);
+                    }
                 }
                 else {
                     //The tuple already exists

dist/preview release/loaders/babylonjs.loaders.js

@@ -549,14 +549,16 @@ var BABYLON;
              * @returns {boolean}
              */
             var isInArray = function (arr, obj) {
-                if (!arr[obj[0]])
+                if (!arr[obj[0]]) {
                     arr[obj[0]] = { normals: [], idx: [] };
+                }
                 var idx = arr[obj[0]].normals.indexOf(obj[1]);
                 return idx === -1 ? -1 : arr[obj[0]].idx[idx];
             };
             var isInArrayUV = function (arr, obj) {
-                if (!arr[obj[0]])
+                if (!arr[obj[0]]) {
                     arr[obj[0]] = { normals: [], idx: [], uv: [] };
+                }
                 var idx = arr[obj[0]].normals.indexOf(obj[1]);
                 if (idx != 1 && (obj[2] == arr[obj[0]].uv[idx])) {
                     return arr[obj[0]].idx[idx];
@@ -610,8 +612,9 @@ var BABYLON;
                     //Add the tuple in the comparison list
                     tuplePosNorm[indicePositionFromObj].normals.push(indiceNormalFromObj);
                     tuplePosNorm[indicePositionFromObj].idx.push(curPositionInIndices++);
-                    if (OBJFileLoader.OPTIMIZE_WITH_UV)
+                    if (OBJFileLoader.OPTIMIZE_WITH_UV) {
                         tuplePosNorm[indicePositionFromObj].uv.push(indiceUvsFromObj);
+                    }
                 }
                 else {
                     //The tuple already exists
@@ -1730,14 +1733,18 @@ var BABYLON;
             };
         };
         GLTFFileLoader._compareVersion = function (a, b) {
-            if (a.major > b.major)
+            if (a.major > b.major) {
                 return 1;
-            if (a.major < b.major)
+            }
+            if (a.major < b.major) {
                 return -1;
-            if (a.minor > b.minor)
+            }
+            if (a.minor > b.minor) {
                 return 1;
-            if (a.minor < b.minor)
+            }
+            if (a.minor < b.minor) {
                 return -1;
+            }
             return 0;
         };
         GLTFFileLoader._decodeBufferToText = function (buffer) {
@@ -1950,8 +1957,9 @@ var BABYLON;
                 this._maxPos = toParse.length;
             }
             Tokenizer.prototype.getNextToken = function () {
-                if (this.isEnd())
+                if (this.isEnd()) {
                     return ETokenType.END_OF_INPUT;
+                }
                 this.currentString = this.read();
                 this.currentToken = ETokenType.UNKNOWN;
                 if (this.currentString === "_" || this.isLetterOrDigitPattern.test(this.currentString)) {
@@ -3377,7 +3385,6 @@ var BABYLON;
                     onload();
                 }
             };
-            ;
             GLTFLoader.prototype._loadBuffersAsync = function (gltfRuntime, onLoad, onProgress) {
                 var hasBuffers = false;
                 var processBuffer = function (buf, buffer) {
@@ -3432,7 +3439,6 @@ var BABYLON;
             return GLTFLoader;
         }());
         GLTF1.GLTFLoader = GLTFLoader;
-        ;
         BABYLON.GLTFFileLoader._CreateGLTFLoaderV1 = function () { return new GLTFLoader(); };
     })(GLTF1 = BABYLON.GLTF1 || (BABYLON.GLTF1 = {}));
 })(BABYLON || (BABYLON = {}));

dist/preview release/serializers/babylon.glTF2Serializer.js

@@ -3,7 +3,6 @@ BABYLON.Effect.ShadersStore['textureTransformPixelShader'] = "precision highp fl
 /// <reference path="../../../../dist/preview release/babylon.d.ts"/>
 var BABYLON;
 (function (BABYLON) {
-    ;
     /**
      * Class for generating glTF data from a Babylon scene.
      */
@@ -1153,7 +1152,6 @@ var BABYLON;
                                     }
                                 }
                             }
-                            ;
                             if (scene.nodes.length) {
                                 _this._scenes.push(scene);
                             }
@@ -1203,7 +1201,6 @@ var BABYLON;
                         var babylonTransformNode = nodes_2[_i];
                         _loop_1(babylonTransformNode);
                     }
-                    ;
                     return promiseChain.then(function () {
                         if (runtimeGLTFAnimation.channels.length && runtimeGLTFAnimation.samplers.length) {
                             _this._animations.push(runtimeGLTFAnimation);
@@ -2749,7 +2746,6 @@ var BABYLON;
                                 }
                             }
                         }
-                        ;
                     }
                 };
                 /**
@@ -2787,12 +2783,10 @@ var BABYLON;
                                     }
                                 }
                             }
-                            ;
                             if (glTFAnimation.channels.length && glTFAnimation.samplers.length) {
                                 glTFAnimations.push(glTFAnimation);
                             }
                         }
-                        ;
                     }
                 };
                 _GLTFAnimation.AddAnimation = function (name, glTFAnimation, babylonTransformNode, animation, dataAccessorType, animationChannelTargetPath, nodeMap, binaryWriter, bufferViews, accessors, convertToRightHandedSystem, useQuaternion, animationSampleRate) {
@@ -3004,7 +2998,6 @@ var BABYLON;
                         inputs.push(keyFrame.frame / animation.framePerSecond); // keyframes in seconds.
                         _GLTFAnimation._AddKeyframeValue(keyFrame, animation, outputs, animationChannelTargetPath, babylonTransformNode, convertToRightHandedSystem, useQuaternion);
                     }
-                    ;
                 };
                 /**
                  * Creates cubic spline animation from the animation key frames

dist/preview release/serializers/babylonjs.serializers.js

@@ -164,7 +164,6 @@ BABYLON.Effect.ShadersStore['textureTransformPixelShader'] = "precision highp fl
 
 var BABYLON;
 (function (BABYLON) {
-    ;
     /**
      * Class for generating glTF data from a Babylon scene.
      */
@@ -1314,7 +1313,6 @@ var BABYLON;
                                     }
                                 }
                             }
-                            ;
                             if (scene.nodes.length) {
                                 _this._scenes.push(scene);
                             }
@@ -1364,7 +1362,6 @@ var BABYLON;
                         var babylonTransformNode = nodes_2[_i];
                         _loop_1(babylonTransformNode);
                     }
-                    ;
                     return promiseChain.then(function () {
                         if (runtimeGLTFAnimation.channels.length && runtimeGLTFAnimation.samplers.length) {
                             _this._animations.push(runtimeGLTFAnimation);
@@ -2910,7 +2907,6 @@ var BABYLON;
                                 }
                             }
                         }
-                        ;
                     }
                 };
                 /**
@@ -2948,12 +2944,10 @@ var BABYLON;
                                     }
                                 }
                             }
-                            ;
                             if (glTFAnimation.channels.length && glTFAnimation.samplers.length) {
                                 glTFAnimations.push(glTFAnimation);
                             }
                         }
-                        ;
                     }
                 };
                 _GLTFAnimation.AddAnimation = function (name, glTFAnimation, babylonTransformNode, animation, dataAccessorType, animationChannelTargetPath, nodeMap, binaryWriter, bufferViews, accessors, convertToRightHandedSystem, useQuaternion, animationSampleRate) {
@@ -3165,7 +3159,6 @@ var BABYLON;
                         inputs.push(keyFrame.frame / animation.framePerSecond); // keyframes in seconds.
                         _GLTFAnimation._AddKeyframeValue(keyFrame, animation, outputs, animationChannelTargetPath, babylonTransformNode, convertToRightHandedSystem, useQuaternion);
                     }
-                    ;
                 };
                 /**
                  * Creates cubic spline animation from the animation key frames

dist/preview release/viewer/babylon.viewer.d.ts

@@ -123,6 +123,80 @@ declare module BabylonViewer {
     export let viewerManager: ViewerManager;
 }
 declare module BabylonViewer {
+    /**
+        * The Default viewer is the default implementation of the AbstractViewer.
+        * It uses the templating system to render a new canvas and controls.
+        */
+    export class DefaultViewer extends AbstractViewer {
+            containerElement: HTMLElement;
+            fullscreenElement?: HTMLElement;
+            /**
+                * 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
+                */
+            constructor(containerElement: HTMLElement, initialConfiguration?: ViewerConfiguration);
+            registerTemplatePlugin(plugin: IViewerTemplatePlugin): void;
+            /**
+                * This will be executed when the templates initialize.
+                */
+            protected _onTemplatesLoaded(): Promise<AbstractViewer>;
+            protected _initVR(): void;
+            /**
+                * Toggle fullscreen of the entire viewer
+                */
+            toggleFullscreen: () => void;
+            /**
+                * Preparing the container element to present the viewer
+                */
+            protected _prepareContainerElement(): void;
+            /**
+                * 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
+                */
+            protected _configureTemplate(model?: ViewerModel): void;
+            /**
+                * 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.
+                */
+            loadModel(model?: string | File | IModelConfiguration): Promise<ViewerModel>;
+            /**
+                * 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
+                */
+            showOverlayScreen(subScreen: string): Promise<string> | Promise<Template>;
+            /**
+                * Hide the overlay screen.
+                */
+            hideOverlayScreen(): Promise<string> | Promise<Template>;
+            /**
+                * show the viewer (in case it was hidden)
+                *
+                * @param visibilityFunction an optional function to execute in order to show the container
+                */
+            show(visibilityFunction?: ((template: Template) => Promise<Template>)): Promise<Template>;
+            /**
+                * hide the viewer (in case it is visible)
+                *
+                * @param visibilityFunction an optional function to execute in order to hide the container
+                */
+            hide(visibilityFunction?: ((template: Template) => Promise<Template>)): Promise<Template>;
+            /**
+                * Show the loading screen.
+                * The loading screen can be configured using the configuration object
+                */
+            showLoadingScreen(): Promise<string> | Promise<Template>;
+            /**
+                * Hide the loading screen
+                */
+            hideLoadingScreen(): Promise<string> | Promise<Template>;
+            dispose(): void;
+            protected _onConfigurationLoaded(configuration: ViewerConfiguration): void;
+    }
 }
 declare module BabylonViewer {
     /**
@@ -823,6 +897,26 @@ declare module BabylonViewer {
     }
 }
 declare module BabylonViewer {
+    export interface IViewerTemplatePlugin {
+        readonly templateName: string;
+        readonly eventsToAttach?: Array<string>;
+        interactionPredicate(event: EventCallback): boolean;
+        onEvent?(event: EventCallback): void;
+        addHTMLTemplate?(template: Template): void;
+    }
+    export abstract class AbstractViewerNavbarButton implements IViewerTemplatePlugin {
+        readonly templateName: string;
+        readonly eventsToAttach: Array<string>;
+        protected _prepend: boolean;
+        protected _buttonName: string;
+        protected _buttonClass: string;
+        protected _htmlTemplate: string;
+        constructor(buttonName: string, buttonClass?: string, htmlTemplate?: string);
+        interactionPredicate(event: EventCallback): boolean;
+        abstract onEvent(event: EventCallback): void;
+        addHTMLTemplate(template: Template): void;
+        protected _generateHTMLElement(template: Template): Element | DocumentFragment;
+    }
 }
 declare module BabylonViewer {
     /**
@@ -944,6 +1038,171 @@ declare module BabylonViewer {
     }
 }
 declare module BabylonViewer {
+    /**
+        * The object sent when an event is triggered
+        */
+    export interface EventCallback {
+            event: Event;
+            template: Template;
+            selector: string;
+            payload?: any;
+    }
+    /**
+        * The template manager, a member of the viewer class, will manage the viewer's templates and generate the HTML.
+        * The template manager managers a single viewer and can be seen as the collection of all sub-templates of the viewer.
+        */
+    export class TemplateManager {
+            containerElement: HTMLElement;
+            /**
+                * Will be triggered when any template is initialized
+                */
+            onTemplateInit: BABYLON.Observable<Template>;
+            /**
+                * Will be triggered when any template is fully loaded
+                */
+            onTemplateLoaded: BABYLON.Observable<Template>;
+            /**
+                * Will be triggered when a template state changes
+                */
+            onTemplateStateChange: BABYLON.Observable<Template>;
+            /**
+                * Will be triggered when all templates finished loading
+                */
+            onAllLoaded: BABYLON.Observable<TemplateManager>;
+            /**
+                * Will be triggered when any event on any template is triggered.
+                */
+            onEventTriggered: BABYLON.Observable<EventCallback>;
+            /**
+                * This template manager's event manager. In charge of callback registrations to native event types
+                */
+            eventManager: EventManager;
+            constructor(containerElement: HTMLElement);
+            /**
+                * Initialize the template(s) for the viewer. Called bay the Viewer class
+                * @param templates the templates to be used to initialize the main template
+                */
+            initTemplate(templates: {
+                    [key: string]: ITemplateConfiguration;
+            }): Promise<void>;
+            /**
+                * Get the canvas in the template tree.
+                * There must be one and only one canvas inthe template.
+                */
+            getCanvas(): HTMLCanvasElement | null;
+            /**
+                * Get a specific template from the template tree
+                * @param name the name of the template to load
+                */
+            getTemplate(name: string): Template | undefined;
+            /**
+                * Dispose the template manager
+                */
+            dispose(): void;
+    }
+    /**
+        * This class represents a single template in the viewer's template tree.
+        * An example for a template is a single canvas, an overlay (containing sub-templates) or the navigation bar.
+        * A template is injected using the template manager in the correct position.
+        * The template is rendered using Handlebars and can use Handlebars' features (such as parameter injection)
+        *
+        * For further information please refer to the documentation page, https://doc.babylonjs.com
+        */
+    export class Template {
+            name: string;
+            /**
+                * Will be triggered when the template is loaded
+                */
+            onLoaded: BABYLON.Observable<Template>;
+            /**
+                * will be triggered when the template is appended to the tree
+                */
+            onAppended: BABYLON.Observable<Template>;
+            /**
+                * Will be triggered when the template's state changed (shown, hidden)
+                */
+            onStateChange: BABYLON.Observable<Template>;
+            /**
+                * Will be triggered when an event is triggered on ths template.
+                * The event is a native browser event (like mouse or pointer events)
+                */
+            onEventTriggered: BABYLON.Observable<EventCallback>;
+            onParamsUpdated: BABYLON.Observable<Template>;
+            onHTMLRendered: BABYLON.Observable<Template>;
+            /**
+                * is the template loaded?
+                */
+            isLoaded: boolean;
+            /**
+                * This is meant to be used to track the show and hide functions.
+                * This is NOT (!!) a flag to check if the element is actually visible to the user.
+                */
+            isShown: boolean;
+            /**
+                * Is this template a part of the HTML tree (the template manager injected it)
+                */
+            isInHtmlTree: boolean;
+            /**
+                * The HTML element containing this template
+                */
+            parent: HTMLElement;
+            /**
+                * A promise that is fulfilled when the template finished loading.
+                */
+            initPromise: Promise<Template>;
+            constructor(name: string, _configuration: ITemplateConfiguration);
+            /**
+                * Some templates have parameters (like background color for example).
+                * The parameters are provided to Handlebars which in turn generates the template.
+                * This function will update the template with the new parameters
+                *
+                * Note that when updating parameters the events will be registered again (after being cleared).
+                *
+                * @param params the new template parameters
+                */
+            updateParams(params: {
+                    [key: string]: string | number | boolean | object;
+            }, append?: boolean): void;
+            redraw(): void;
+            /**
+                * Get the template'S configuration
+                */
+            readonly configuration: ITemplateConfiguration;
+            /**
+                * A template can be a parent element for other templates or HTML elements.
+                * This function will deliver all child HTML elements of this template.
+                */
+            getChildElements(): Array<string>;
+            /**
+                * Appending the template to a parent HTML element.
+                * If a parent is already set and you wish to replace the old HTML with new one, forceRemove should be true.
+                * @param parent the parent to which the template is added
+                * @param forceRemove if the parent already exists, shoud the template be removed from it?
+                */
+            appendTo(parent: HTMLElement, forceRemove?: boolean): void;
+            /**
+                * Show the template using the provided visibilityFunction, or natively using display: flex.
+                * The provided function returns a promise that should be fullfilled when the element is shown.
+                * Since it is a promise async operations are more than possible.
+                * See the default viewer for an opacity example.
+                * @param visibilityFunction The function to execute to show the template.
+                */
+            show(visibilityFunction?: (template: Template) => Promise<Template>): Promise<Template>;
+            /**
+                * Hide the template using the provided visibilityFunction, or natively using display: none.
+                * The provided function returns a promise that should be fullfilled when the element is hidden.
+                * Since it is a promise async operations are more than possible.
+                * See the default viewer for an opacity example.
+                * @param visibilityFunction The function to execute to show the template.
+                */
+            hide(visibilityFunction?: (template: Template) => Promise<Template>): Promise<Template>;
+            /**
+                * Dispose this template
+                */
+            dispose(): void;
+    }
+}
+declare module BabylonViewer {
     export class ConfigurationContainer {
         configuration: ViewerConfiguration;
         viewerId: string;
@@ -1220,171 +1479,6 @@ declare module BabylonViewer {
     }
 }
 declare module BabylonViewer {
-    /**
-        * The object sent when an event is triggered
-        */
-    export interface EventCallback {
-            event: Event;
-            template: Template;
-            selector: string;
-            payload?: any;
-    }
-    /**
-        * The template manager, a member of the viewer class, will manage the viewer's templates and generate the HTML.
-        * The template manager managers a single viewer and can be seen as the collection of all sub-templates of the viewer.
-        */
-    export class TemplateManager {
-            containerElement: HTMLElement;
-            /**
-                * Will be triggered when any template is initialized
-                */
-            onTemplateInit: BABYLON.Observable<Template>;
-            /**
-                * Will be triggered when any template is fully loaded
-                */
-            onTemplateLoaded: BABYLON.Observable<Template>;
-            /**
-                * Will be triggered when a template state changes
-                */
-            onTemplateStateChange: BABYLON.Observable<Template>;
-            /**
-                * Will be triggered when all templates finished loading
-                */
-            onAllLoaded: BABYLON.Observable<TemplateManager>;
-            /**
-                * Will be triggered when any event on any template is triggered.
-                */
-            onEventTriggered: BABYLON.Observable<EventCallback>;
-            /**
-                * This template manager's event manager. In charge of callback registrations to native event types
-                */
-            eventManager: EventManager;
-            constructor(containerElement: HTMLElement);
-            /**
-                * Initialize the template(s) for the viewer. Called bay the Viewer class
-                * @param templates the templates to be used to initialize the main template
-                */
-            initTemplate(templates: {
-                    [key: string]: ITemplateConfiguration;
-            }): Promise<void>;
-            /**
-                * Get the canvas in the template tree.
-                * There must be one and only one canvas inthe template.
-                */
-            getCanvas(): HTMLCanvasElement | null;
-            /**
-                * Get a specific template from the template tree
-                * @param name the name of the template to load
-                */
-            getTemplate(name: string): Template | undefined;
-            /**
-                * Dispose the template manager
-                */
-            dispose(): void;
-    }
-    /**
-        * This class represents a single template in the viewer's template tree.
-        * An example for a template is a single canvas, an overlay (containing sub-templates) or the navigation bar.
-        * A template is injected using the template manager in the correct position.
-        * The template is rendered using Handlebars and can use Handlebars' features (such as parameter injection)
-        *
-        * For further information please refer to the documentation page, https://doc.babylonjs.com
-        */
-    export class Template {
-            name: string;
-            /**
-                * Will be triggered when the template is loaded
-                */
-            onLoaded: BABYLON.Observable<Template>;
-            /**
-                * will be triggered when the template is appended to the tree
-                */
-            onAppended: BABYLON.Observable<Template>;
-            /**
-                * Will be triggered when the template's state changed (shown, hidden)
-                */
-            onStateChange: BABYLON.Observable<Template>;
-            /**
-                * Will be triggered when an event is triggered on ths template.
-                * The event is a native browser event (like mouse or pointer events)
-                */
-            onEventTriggered: BABYLON.Observable<EventCallback>;
-            onParamsUpdated: BABYLON.Observable<Template>;
-            onHTMLRendered: BABYLON.Observable<Template>;
-            /**
-                * is the template loaded?
-                */
-            isLoaded: boolean;
-            /**
-                * This is meant to be used to track the show and hide functions.
-                * This is NOT (!!) a flag to check if the element is actually visible to the user.
-                */
-            isShown: boolean;
-            /**
-                * Is this template a part of the HTML tree (the template manager injected it)
-                */
-            isInHtmlTree: boolean;
-            /**
-                * The HTML element containing this template
-                */
-            parent: HTMLElement;
-            /**
-                * A promise that is fulfilled when the template finished loading.
-                */
-            initPromise: Promise<Template>;
-            constructor(name: string, _configuration: ITemplateConfiguration);
-            /**
-                * Some templates have parameters (like background color for example).
-                * The parameters are provided to Handlebars which in turn generates the template.
-                * This function will update the template with the new parameters
-                *
-                * Note that when updating parameters the events will be registered again (after being cleared).
-                *
-                * @param params the new template parameters
-                */
-            updateParams(params: {
-                    [key: string]: string | number | boolean | object;
-            }, append?: boolean): void;
-            redraw(): void;
-            /**
-                * Get the template'S configuration
-                */
-            readonly configuration: ITemplateConfiguration;
-            /**
-                * A template can be a parent element for other templates or HTML elements.
-                * This function will deliver all child HTML elements of this template.
-                */
-            getChildElements(): Array<string>;
-            /**
-                * Appending the template to a parent HTML element.
-                * If a parent is already set and you wish to replace the old HTML with new one, forceRemove should be true.
-                * @param parent the parent to which the template is added
-                * @param forceRemove if the parent already exists, shoud the template be removed from it?
-                */
-            appendTo(parent: HTMLElement, forceRemove?: boolean): void;
-            /**
-                * Show the template using the provided visibilityFunction, or natively using display: flex.
-                * The provided function returns a promise that should be fullfilled when the element is shown.
-                * Since it is a promise async operations are more than possible.
-                * See the default viewer for an opacity example.
-                * @param visibilityFunction The function to execute to show the template.
-                */
-            show(visibilityFunction?: (template: Template) => Promise<Template>): Promise<Template>;
-            /**
-                * Hide the template using the provided visibilityFunction, or natively using display: none.
-                * The provided function returns a promise that should be fullfilled when the element is hidden.
-                * Since it is a promise async operations are more than possible.
-                * See the default viewer for an opacity example.
-                * @param visibilityFunction The function to execute to show the template.
-                */
-            hide(visibilityFunction?: (template: Template) => Promise<Template>): Promise<Template>;
-            /**
-                * Dispose this template
-                */
-            dispose(): void;
-    }
-}
-declare module BabylonViewer {
     export interface IModelConfiguration {
             id?: string;
             url?: string;
@@ -1505,6 +1599,39 @@ declare module BabylonViewer {
 }
 declare module BabylonViewer {
     /**
+        * The EventManager is in charge of registering user interctions with the viewer.
+        * It is used in the TemplateManager
+        */
+    export class EventManager {
+            constructor(_templateManager: TemplateManager);
+            /**
+                * Register a new callback to a specific template.
+                * The best example for the usage can be found in the DefaultViewer
+                *
+                * @param templateName the templateName to register the event to
+                * @param callback The callback to be executed
+                * @param eventType the type of event to register
+                * @param selector an optional selector. if not defined the parent object in the template will be selected
+                */
+            registerCallback(templateName: string, callback: (eventData: EventCallback) => void, eventType?: string, selector?: string): void;
+            /**
+                * This will remove a registered event from the defined template.
+                * Each one of the variables apart from the template name are optional, but one must be provided.
+                *
+                * @param templateName the templateName
+                * @param callback the callback to remove (optional)
+                * @param eventType the event type to remove (optional)
+                * @param selector the selector from which to remove the event (optional)
+                */
+            unregisterCallback(templateName: string, callback: (eventData: EventCallback) => void, eventType?: string, selector?: string): void;
+            /**
+                * Dispose the event manager
+                */
+            dispose(): void;
+    }
+}
+declare module BabylonViewer {
+    /**
         * The ViewerLabs class will hold functions that are not (!) backwards compatible.
         * The APIs in all labs-related classes and configuration  might change.
         * Once stable, lab features will be moved to the publis API and configuration object.
@@ -1553,39 +1680,6 @@ declare module BabylonViewer {
 }
 declare module BabylonViewer {
     /**
-        * The EventManager is in charge of registering user interctions with the viewer.
-        * It is used in the TemplateManager
-        */
-    export class EventManager {
-            constructor(_templateManager: TemplateManager);
-            /**
-                * Register a new callback to a specific template.
-                * The best example for the usage can be found in the DefaultViewer
-                *
-                * @param templateName the templateName to register the event to
-                * @param callback The callback to be executed
-                * @param eventType the type of event to register
-                * @param selector an optional selector. if not defined the parent object in the template will be selected
-                */
-            registerCallback(templateName: string, callback: (eventData: EventCallback) => void, eventType?: string, selector?: string): void;
-            /**
-                * This will remove a registered event from the defined template.
-                * Each one of the variables apart from the template name are optional, but one must be provided.
-                *
-                * @param templateName the templateName
-                * @param callback the callback to remove (optional)
-                * @param eventType the event type to remove (optional)
-                * @param selector the selector from which to remove the event (optional)
-                */
-            unregisterCallback(templateName: string, callback: (eventData: EventCallback) => void, eventType?: string, selector?: string): void;
-            /**
-                * Dispose the event manager
-                */
-            dispose(): void;
-    }
-}
-declare module BabylonViewer {
-    /**
         * Defines an animation to be applied to a model (translation, scale or rotation).
         */
     export interface IModelAnimationConfiguration {

dist/preview release/viewer/babylon.viewer.module.d.ts

@@ -150,7 +150,85 @@ declare module 'babylonjs-viewer/viewer/viewerManager' {
 }
 
 declare module 'babylonjs-viewer/viewer/defaultViewer' {
-    
+    import { ViewerConfiguration, IModelConfiguration } from 'babylonjs-viewer/configuration';
+    import { Template } from 'babylonjs-viewer/templating/templateManager';
+    import { AbstractViewer } from 'babylonjs-viewer/viewer/viewer';
+    import { ViewerModel } from 'babylonjs-viewer/model/viewerModel';
+    import { IViewerTemplatePlugin } from 'babylonjs-viewer/templating/viewerTemplatePlugin';
+    /**
+        * The Default viewer is the default implementation of the AbstractViewer.
+        * It uses the templating system to render a new canvas and controls.
+        */
+    export class DefaultViewer extends AbstractViewer {
+            containerElement: HTMLElement;
+            fullscreenElement?: HTMLElement;
+            /**
+                * 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
+                */
+            constructor(containerElement: HTMLElement, initialConfiguration?: ViewerConfiguration);
+            registerTemplatePlugin(plugin: IViewerTemplatePlugin): void;
+            /**
+                * This will be executed when the templates initialize.
+                */
+            protected _onTemplatesLoaded(): Promise<AbstractViewer>;
+            protected _initVR(): void;
+            /**
+                * Toggle fullscreen of the entire viewer
+                */
+            toggleFullscreen: () => void;
+            /**
+                * Preparing the container element to present the viewer
+                */
+            protected _prepareContainerElement(): void;
+            /**
+                * 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
+                */
+            protected _configureTemplate(model?: ViewerModel): void;
+            /**
+                * 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.
+                */
+            loadModel(model?: string | File | IModelConfiguration): Promise<ViewerModel>;
+            /**
+                * 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
+                */
+            showOverlayScreen(subScreen: string): Promise<string> | Promise<Template>;
+            /**
+                * Hide the overlay screen.
+                */
+            hideOverlayScreen(): Promise<string> | Promise<Template>;
+            /**
+                * show the viewer (in case it was hidden)
+                *
+                * @param visibilityFunction an optional function to execute in order to show the container
+                */
+            show(visibilityFunction?: ((template: Template) => Promise<Template>)): Promise<Template>;
+            /**
+                * hide the viewer (in case it is visible)
+                *
+                * @param visibilityFunction an optional function to execute in order to hide the container
+                */
+            hide(visibilityFunction?: ((template: Template) => Promise<Template>)): Promise<Template>;
+            /**
+                * Show the loading screen.
+                * The loading screen can be configured using the configuration object
+                */
+            showLoadingScreen(): Promise<string> | Promise<Template>;
+            /**
+                * Hide the loading screen
+                */
+            hideLoadingScreen(): Promise<string> | Promise<Template>;
+            dispose(): void;
+            protected _onConfigurationLoaded(configuration: ViewerConfiguration): void;
+    }
 }
 
 declare module 'babylonjs-viewer/viewer/viewer' {
@@ -883,7 +961,27 @@ declare module 'babylonjs-viewer/loader/plugins/loaderPlugin' {
 }
 
 declare module 'babylonjs-viewer/templating/viewerTemplatePlugin' {
-    
+    import { EventCallback, Template } from "babylonjs-viewer/templating/templateManager";
+    export interface IViewerTemplatePlugin {
+        readonly templateName: string;
+        readonly eventsToAttach?: Array<string>;
+        interactionPredicate(event: EventCallback): boolean;
+        onEvent?(event: EventCallback): void;
+        addHTMLTemplate?(template: Template): void;
+    }
+    export abstract class AbstractViewerNavbarButton implements IViewerTemplatePlugin {
+        readonly templateName: string;
+        readonly eventsToAttach: Array<string>;
+        protected _prepend: boolean;
+        protected _buttonName: string;
+        protected _buttonClass: string;
+        protected _htmlTemplate: string;
+        constructor(buttonName: string, buttonClass?: string, htmlTemplate?: string);
+        interactionPredicate(event: EventCallback): boolean;
+        abstract onEvent(event: EventCallback): void;
+        addHTMLTemplate(template: Template): void;
+        protected _generateHTMLElement(template: Template): Element | DocumentFragment;
+    }
 }
 
 declare module 'babylonjs-viewer/optimizer/custom' {
@@ -1016,6 +1114,175 @@ declare module 'babylonjs-viewer/configuration/configuration' {
     }
 }
 
+declare module 'babylonjs-viewer/templating/templateManager' {
+    import { Observable } from 'babylonjs';
+    import { EventManager } from 'babylonjs-viewer/templating/eventManager';
+    import { ITemplateConfiguration } from 'babylonjs-viewer/configuration/interfaces';
+    /**
+        * The object sent when an event is triggered
+        */
+    export interface EventCallback {
+            event: Event;
+            template: Template;
+            selector: string;
+            payload?: any;
+    }
+    /**
+        * The template manager, a member of the viewer class, will manage the viewer's templates and generate the HTML.
+        * The template manager managers a single viewer and can be seen as the collection of all sub-templates of the viewer.
+        */
+    export class TemplateManager {
+            containerElement: HTMLElement;
+            /**
+                * Will be triggered when any template is initialized
+                */
+            onTemplateInit: Observable<Template>;
+            /**
+                * Will be triggered when any template is fully loaded
+                */
+            onTemplateLoaded: Observable<Template>;
+            /**
+                * Will be triggered when a template state changes
+                */
+            onTemplateStateChange: Observable<Template>;
+            /**
+                * Will be triggered when all templates finished loading
+                */
+            onAllLoaded: Observable<TemplateManager>;
+            /**
+                * Will be triggered when any event on any template is triggered.
+                */
+            onEventTriggered: Observable<EventCallback>;
+            /**
+                * This template manager's event manager. In charge of callback registrations to native event types
+                */
+            eventManager: EventManager;
+            constructor(containerElement: HTMLElement);
+            /**
+                * Initialize the template(s) for the viewer. Called bay the Viewer class
+                * @param templates the templates to be used to initialize the main template
+                */
+            initTemplate(templates: {
+                    [key: string]: ITemplateConfiguration;
+            }): Promise<void>;
+            /**
+                * Get the canvas in the template tree.
+                * There must be one and only one canvas inthe template.
+                */
+            getCanvas(): HTMLCanvasElement | null;
+            /**
+                * Get a specific template from the template tree
+                * @param name the name of the template to load
+                */
+            getTemplate(name: string): Template | undefined;
+            /**
+                * Dispose the template manager
+                */
+            dispose(): void;
+    }
+    /**
+        * This class represents a single template in the viewer's template tree.
+        * An example for a template is a single canvas, an overlay (containing sub-templates) or the navigation bar.
+        * A template is injected using the template manager in the correct position.
+        * The template is rendered using Handlebars and can use Handlebars' features (such as parameter injection)
+        *
+        * For further information please refer to the documentation page, https://doc.babylonjs.com
+        */
+    export class Template {
+            name: string;
+            /**
+                * Will be triggered when the template is loaded
+                */
+            onLoaded: Observable<Template>;
+            /**
+                * will be triggered when the template is appended to the tree
+                */
+            onAppended: Observable<Template>;
+            /**
+                * Will be triggered when the template's state changed (shown, hidden)
+                */
+            onStateChange: Observable<Template>;
+            /**
+                * Will be triggered when an event is triggered on ths template.
+                * The event is a native browser event (like mouse or pointer events)
+                */
+            onEventTriggered: Observable<EventCallback>;
+            onParamsUpdated: Observable<Template>;
+            onHTMLRendered: Observable<Template>;
+            /**
+                * is the template loaded?
+                */
+            isLoaded: boolean;
+            /**
+                * This is meant to be used to track the show and hide functions.
+                * This is NOT (!!) a flag to check if the element is actually visible to the user.
+                */
+            isShown: boolean;
+            /**
+                * Is this template a part of the HTML tree (the template manager injected it)
+                */
+            isInHtmlTree: boolean;
+            /**
+                * The HTML element containing this template
+                */
+            parent: HTMLElement;
+            /**
+                * A promise that is fulfilled when the template finished loading.
+                */
+            initPromise: Promise<Template>;
+            constructor(name: string, _configuration: ITemplateConfiguration);
+            /**
+                * Some templates have parameters (like background color for example).
+                * The parameters are provided to Handlebars which in turn generates the template.
+                * This function will update the template with the new parameters
+                *
+                * Note that when updating parameters the events will be registered again (after being cleared).
+                *
+                * @param params the new template parameters
+                */
+            updateParams(params: {
+                    [key: string]: string | number | boolean | object;
+            }, append?: boolean): void;
+            redraw(): void;
+            /**
+                * Get the template'S configuration
+                */
+            readonly configuration: ITemplateConfiguration;
+            /**
+                * A template can be a parent element for other templates or HTML elements.
+                * This function will deliver all child HTML elements of this template.
+                */
+            getChildElements(): Array<string>;
+            /**
+                * Appending the template to a parent HTML element.
+                * If a parent is already set and you wish to replace the old HTML with new one, forceRemove should be true.
+                * @param parent the parent to which the template is added
+                * @param forceRemove if the parent already exists, shoud the template be removed from it?
+                */
+            appendTo(parent: HTMLElement, forceRemove?: boolean): void;
+            /**
+                * Show the template using the provided visibilityFunction, or natively using display: flex.
+                * The provided function returns a promise that should be fullfilled when the element is shown.
+                * Since it is a promise async operations are more than possible.
+                * See the default viewer for an opacity example.
+                * @param visibilityFunction The function to execute to show the template.
+                */
+            show(visibilityFunction?: (template: Template) => Promise<Template>): Promise<Template>;
+            /**
+                * Hide the template using the provided visibilityFunction, or natively using display: none.
+                * The provided function returns a promise that should be fullfilled when the element is hidden.
+                * Since it is a promise async operations are more than possible.
+                * See the default viewer for an opacity example.
+                * @param visibilityFunction The function to execute to show the template.
+                */
+            hide(visibilityFunction?: (template: Template) => Promise<Template>): Promise<Template>;
+            /**
+                * Dispose this template
+                */
+            dispose(): void;
+    }
+}
+
 declare module 'babylonjs-viewer/configuration/configurationContainer' {
     import { ViewerConfiguration } from 'babylonjs-viewer/configuration/configuration';
     import { Color3, Scene } from 'babylonjs';
@@ -1308,175 +1575,6 @@ declare module 'babylonjs-viewer/managers/sceneManager' {
     }
 }
 
-declare module 'babylonjs-viewer/templating/templateManager' {
-    import { Observable } from 'babylonjs';
-    import { EventManager } from 'babylonjs-viewer/templating/eventManager';
-    import { ITemplateConfiguration } from 'babylonjs-viewer/configuration/interfaces';
-    /**
-        * The object sent when an event is triggered
-        */
-    export interface EventCallback {
-            event: Event;
-            template: Template;
-            selector: string;
-            payload?: any;
-    }
-    /**
-        * The template manager, a member of the viewer class, will manage the viewer's templates and generate the HTML.
-        * The template manager managers a single viewer and can be seen as the collection of all sub-templates of the viewer.
-        */
-    export class TemplateManager {
-            containerElement: HTMLElement;
-            /**
-                * Will be triggered when any template is initialized
-                */
-            onTemplateInit: Observable<Template>;
-            /**
-                * Will be triggered when any template is fully loaded
-                */
-            onTemplateLoaded: Observable<Template>;
-            /**
-                * Will be triggered when a template state changes
-                */
-            onTemplateStateChange: Observable<Template>;
-            /**
-                * Will be triggered when all templates finished loading
-                */
-            onAllLoaded: Observable<TemplateManager>;
-            /**
-                * Will be triggered when any event on any template is triggered.
-                */
-            onEventTriggered: Observable<EventCallback>;
-            /**
-                * This template manager's event manager. In charge of callback registrations to native event types
-                */
-            eventManager: EventManager;
-            constructor(containerElement: HTMLElement);
-            /**
-                * Initialize the template(s) for the viewer. Called bay the Viewer class
-                * @param templates the templates to be used to initialize the main template
-                */
-            initTemplate(templates: {
-                    [key: string]: ITemplateConfiguration;
-            }): Promise<void>;
-            /**
-                * Get the canvas in the template tree.
-                * There must be one and only one canvas inthe template.
-                */
-            getCanvas(): HTMLCanvasElement | null;
-            /**
-                * Get a specific template from the template tree
-                * @param name the name of the template to load
-                */
-            getTemplate(name: string): Template | undefined;
-            /**
-                * Dispose the template manager
-                */
-            dispose(): void;
-    }
-    /**
-        * This class represents a single template in the viewer's template tree.
-        * An example for a template is a single canvas, an overlay (containing sub-templates) or the navigation bar.
-        * A template is injected using the template manager in the correct position.
-        * The template is rendered using Handlebars and can use Handlebars' features (such as parameter injection)
-        *
-        * For further information please refer to the documentation page, https://doc.babylonjs.com
-        */
-    export class Template {
-            name: string;
-            /**
-                * Will be triggered when the template is loaded
-                */
-            onLoaded: Observable<Template>;
-            /**
-                * will be triggered when the template is appended to the tree
-                */
-            onAppended: Observable<Template>;
-            /**
-                * Will be triggered when the template's state changed (shown, hidden)
-                */
-            onStateChange: Observable<Template>;
-            /**
-                * Will be triggered when an event is triggered on ths template.
-                * The event is a native browser event (like mouse or pointer events)
-                */
-            onEventTriggered: Observable<EventCallback>;
-            onParamsUpdated: Observable<Template>;
-            onHTMLRendered: Observable<Template>;
-            /**
-                * is the template loaded?
-                */
-            isLoaded: boolean;
-            /**
-                * This is meant to be used to track the show and hide functions.
-                * This is NOT (!!) a flag to check if the element is actually visible to the user.
-                */
-            isShown: boolean;
-            /**
-                * Is this template a part of the HTML tree (the template manager injected it)
-                */
-            isInHtmlTree: boolean;
-            /**
-                * The HTML element containing this template
-                */
-            parent: HTMLElement;
-            /**
-                * A promise that is fulfilled when the template finished loading.
-                */
-            initPromise: Promise<Template>;
-            constructor(name: string, _configuration: ITemplateConfiguration);
-            /**
-                * Some templates have parameters (like background color for example).
-                * The parameters are provided to Handlebars which in turn generates the template.
-                * This function will update the template with the new parameters
-                *
-                * Note that when updating parameters the events will be registered again (after being cleared).
-                *
-                * @param params the new template parameters
-                */
-            updateParams(params: {
-                    [key: string]: string | number | boolean | object;
-            }, append?: boolean): void;
-            redraw(): void;
-            /**
-                * Get the template'S configuration
-                */
-            readonly configuration: ITemplateConfiguration;
-            /**
-                * A template can be a parent element for other templates or HTML elements.
-                * This function will deliver all child HTML elements of this template.
-                */
-            getChildElements(): Array<string>;
-            /**
-                * Appending the template to a parent HTML element.
-                * If a parent is already set and you wish to replace the old HTML with new one, forceRemove should be true.
-                * @param parent the parent to which the template is added
-                * @param forceRemove if the parent already exists, shoud the template be removed from it?
-                */
-            appendTo(parent: HTMLElement, forceRemove?: boolean): void;
-            /**
-                * Show the template using the provided visibilityFunction, or natively using display: flex.
-                * The provided function returns a promise that should be fullfilled when the element is shown.
-                * Since it is a promise async operations are more than possible.
-                * See the default viewer for an opacity example.
-                * @param visibilityFunction The function to execute to show the template.
-                */
-            show(visibilityFunction?: (template: Template) => Promise<Template>): Promise<Template>;
-            /**
-                * Hide the template using the provided visibilityFunction, or natively using display: none.
-                * The provided function returns a promise that should be fullfilled when the element is hidden.
-                * Since it is a promise async operations are more than possible.
-                * See the default viewer for an opacity example.
-                * @param visibilityFunction The function to execute to show the template.
-                */
-            hide(visibilityFunction?: (template: Template) => Promise<Template>): Promise<Template>;
-            /**
-                * Dispose this template
-                */
-            dispose(): void;
-    }
-}
-
 declare module 'babylonjs-viewer/configuration/interfaces/modelConfiguration' {
     import { IModelAnimationConfiguration } from "babylonjs-viewer/configuration/interfaces/modelAnimationConfiguration";
     export interface IModelConfiguration {
@@ -1624,6 +1722,41 @@ declare module 'babylonjs-viewer/configuration/interfaces/environmentMapConfigur
     }
 }
 
+declare module 'babylonjs-viewer/templating/eventManager' {
+    import { EventCallback, TemplateManager } from "babylonjs-viewer/templating/templateManager";
+    /**
+        * The EventManager is in charge of registering user interctions with the viewer.
+        * It is used in the TemplateManager
+        */
+    export class EventManager {
+            constructor(_templateManager: TemplateManager);
+            /**
+                * Register a new callback to a specific template.
+                * The best example for the usage can be found in the DefaultViewer
+                *
+                * @param templateName the templateName to register the event to
+                * @param callback The callback to be executed
+                * @param eventType the type of event to register
+                * @param selector an optional selector. if not defined the parent object in the template will be selected
+                */
+            registerCallback(templateName: string, callback: (eventData: EventCallback) => void, eventType?: string, selector?: string): void;
+            /**
+                * This will remove a registered event from the defined template.
+                * Each one of the variables apart from the template name are optional, but one must be provided.
+                *
+                * @param templateName the templateName
+                * @param callback the callback to remove (optional)
+                * @param eventType the event type to remove (optional)
+                * @param selector the selector from which to remove the event (optional)
+                */
+            unregisterCallback(templateName: string, callback: (eventData: EventCallback) => void, eventType?: string, selector?: string): void;
+            /**
+                * Dispose the event manager
+                */
+            dispose(): void;
+    }
+}
+
 declare module 'babylonjs-viewer/labs/viewerLabs' {
     import { PBREnvironment } from "babylonjs-viewer/labs/environmentSerializer";
     import { ShadowLight, Vector3, Scene } from 'babylonjs';
@@ -1675,41 +1808,6 @@ declare module 'babylonjs-viewer/labs/viewerLabs' {
     }
 }
 
-declare module 'babylonjs-viewer/templating/eventManager' {
-    import { EventCallback, TemplateManager } from "babylonjs-viewer/templating/templateManager";
-    /**
-        * The EventManager is in charge of registering user interctions with the viewer.
-        * It is used in the TemplateManager
-        */
-    export class EventManager {
-            constructor(_templateManager: TemplateManager);
-            /**
-                * Register a new callback to a specific template.
-                * The best example for the usage can be found in the DefaultViewer
-                *
-                * @param templateName the templateName to register the event to
-                * @param callback The callback to be executed
-                * @param eventType the type of event to register
-                * @param selector an optional selector. if not defined the parent object in the template will be selected
-                */
-            registerCallback(templateName: string, callback: (eventData: EventCallback) => void, eventType?: string, selector?: string): void;
-            /**
-                * This will remove a registered event from the defined template.
-                * Each one of the variables apart from the template name are optional, but one must be provided.
-                *
-                * @param templateName the templateName
-                * @param callback the callback to remove (optional)
-                * @param eventType the event type to remove (optional)
-                * @param selector the selector from which to remove the event (optional)
-                */
-            unregisterCallback(templateName: string, callback: (eventData: EventCallback) => void, eventType?: string, selector?: string): void;
-            /**
-                * Dispose the event manager
-                */
-            dispose(): void;
-    }
-}
-
 declare module 'babylonjs-viewer/configuration/interfaces/modelAnimationConfiguration' {
     /**
         * Defines an animation to be applied to a model (translation, scale or rotation).

src/Gizmos/babylon.gizmoManager.ts

@@ -11,8 +11,8 @@ module BABYLON {
         private _pointerObserver: Nullable<Observer<PointerInfo>> = null;
         private _attachedMesh: Nullable<AbstractMesh> = null;
         private _boundingBoxColor = BABYLON.Color3.FromHexString("#0984e3");
-        private _defaultUtilityLayer:UtilityLayerRenderer;
-        private _defaultKeepDepthUtilityLayer:UtilityLayerRenderer;
+        private _defaultUtilityLayer: UtilityLayerRenderer;
+        private _defaultKeepDepthUtilityLayer: UtilityLayerRenderer;
         /**
          * When bounding box gizmo is enabled, this can be used to track drag/end events
          */
@@ -30,15 +30,11 @@ module BABYLON {
          * Instatiates a gizmo manager
          * @param scene the scene to overlay the gizmos on top of
          */
-<<<<<<< HEAD
         constructor(private scene: Scene) {
-=======
-        constructor(private scene:Scene){
             this._defaultKeepDepthUtilityLayer = new UtilityLayerRenderer(scene);
             this._defaultKeepDepthUtilityLayer.utilityLayerScene.autoClearDepthAndStencil = false;
             this._defaultUtilityLayer = new UtilityLayerRenderer(scene);
-            
->>>>>>> 747ca4d7ec7c52281e24f222de0c930976354dad
+
             this.gizmos = {positionGizmo: null, rotationGizmo: null, scaleGizmo: null, boundingBoxGizmo: null};
 
             // Instatiate/dispose gizmos based on pointer actions
@@ -102,17 +98,10 @@ module BABYLON {
         /**
          * If the position gizmo is enabled
          */
-<<<<<<< HEAD
         public set positionGizmoEnabled(value: boolean) {
             if (value) {
                 if (!this.gizmos.positionGizmo) {
-                    this.gizmos.positionGizmo = new PositionGizmo();
-=======
-        public set positionGizmoEnabled(value:boolean){
-            if(value){
-                if(!this.gizmos.positionGizmo){
                     this.gizmos.positionGizmo = new PositionGizmo(this._defaultUtilityLayer);
->>>>>>> 747ca4d7ec7c52281e24f222de0c930976354dad
                 }
                 this.gizmos.positionGizmo.attachedMesh = this._attachedMesh;
             }else if (this.gizmos.positionGizmo) {
@@ -126,17 +115,10 @@ module BABYLON {
         /**
          * If the rotation gizmo is enabled
          */
-<<<<<<< HEAD
         public set rotationGizmoEnabled(value: boolean) {
             if (value) {
                 if (!this.gizmos.rotationGizmo) {
-                    this.gizmos.rotationGizmo = new RotationGizmo();
-=======
-        public set rotationGizmoEnabled(value:boolean){
-            if(value){
-                if(!this.gizmos.rotationGizmo){
                     this.gizmos.rotationGizmo = new RotationGizmo(this._defaultUtilityLayer);
->>>>>>> 747ca4d7ec7c52281e24f222de0c930976354dad
                 }
                 this.gizmos.rotationGizmo.attachedMesh = this._attachedMesh;
             }else if (this.gizmos.rotationGizmo) {
@@ -150,15 +132,9 @@ module BABYLON {
         /**
          * If the scale gizmo is enabled
          */
-<<<<<<< HEAD
         public set scaleGizmoEnabled(value: boolean) {
             if (value) {
-                this.gizmos.scaleGizmo = this.gizmos.scaleGizmo || new ScaleGizmo();
-=======
-        public set scaleGizmoEnabled(value:boolean){
-            if(value){
                 this.gizmos.scaleGizmo = this.gizmos.scaleGizmo || new ScaleGizmo(this._defaultUtilityLayer);
->>>>>>> 747ca4d7ec7c52281e24f222de0c930976354dad
                 this.gizmos.scaleGizmo.attachedMesh = this._attachedMesh;
             }else if (this.gizmos.scaleGizmo) {
                 this.gizmos.scaleGizmo.attachedMesh = null;
@@ -171,15 +147,9 @@ module BABYLON {
         /**
          * If the boundingBox gizmo is enabled
          */
-<<<<<<< HEAD
         public set boundingBoxGizmoEnabled(value: boolean) {
             if (value) {
-                this.gizmos.boundingBoxGizmo = this.gizmos.boundingBoxGizmo || new BoundingBoxGizmo(this._boundingBoxColor);
-=======
-        public set boundingBoxGizmoEnabled(value:boolean){
-            if(value){
                 this.gizmos.boundingBoxGizmo = this.gizmos.boundingBoxGizmo || new BoundingBoxGizmo(this._boundingBoxColor, this._defaultKeepDepthUtilityLayer);
->>>>>>> 747ca4d7ec7c52281e24f222de0c930976354dad
                 this.gizmos.boundingBoxGizmo.attachedMesh = this._attachedMesh;
                 if (this._attachedMesh) {
                     this._attachedMesh.removeBehavior(this.boundingBoxDragBehavior);

src/Gizmos/babylon.planeRotationGizmo.ts

@@ -1,198 +1,3 @@
-<<<<<<< HEAD
-module BABYLON {
-    /**
-     * Single plane rotation gizmo
-     */
-    export class PlaneRotationGizmo extends Gizmo {
-        /**
-         * Drag behavior responsible for the gizmos dragging interactions
-         */
-        public dragBehavior: PointerDragBehavior;
-        private _pointerObserver: Nullable<Observer<PointerInfo>> = null;
-
-        /**
-         * Rotation distance in radians that the gizmo will snap to (Default: 0)
-         */
-        public snapDistance = 0;
-        /**
-         * Event that fires each time the gizmo snaps to a new location.
-         * * snapDistance is the the change in distance
-         */
-        public onSnapObservable = new Observable<{snapDistance: number}>();
-
-        /**
-         * Creates a PlaneRotationGizmo
-         * @param gizmoLayer The utility layer the gizmo will be added to
-         * @param planeNormal The normal of the plane which the gizmo will be able to rotate on
-         * @param color The color of the gizmo
-         */
-        constructor(planeNormal: Vector3, color: Color3 = Color3.Gray(), gizmoLayer: UtilityLayerRenderer = UtilityLayerRenderer.DefaultUtilityLayer) {
-            super(gizmoLayer);
-
-            // Create Material
-            var coloredMaterial = new BABYLON.StandardMaterial("", gizmoLayer.utilityLayerScene);
-            coloredMaterial.disableLighting = true;
-            coloredMaterial.emissiveColor = color;
-
-            var hoverMaterial = new BABYLON.StandardMaterial("", gizmoLayer.utilityLayerScene);
-            hoverMaterial.disableLighting = true;
-            hoverMaterial.emissiveColor = color.add(new Color3(0.3, 0.3, 0.3));
-
-            // Build mesh on root node
-            var parentMesh = new BABYLON.AbstractMesh("", gizmoLayer.utilityLayerScene);
-
-            // Create circle out of lines
-            var tessellation = 20;
-            var radius = 0.8;
-            var points = new Array<Vector3>();
-            for (var i = 0; i < tessellation; i++) {
-                var radian = (2 * Math.PI) * (i / (tessellation - 1));
-                points.push(new Vector3(radius * Math.sin(radian), 0, radius * Math.cos(radian)));
-            }
-            let rotationMesh = Mesh.CreateLines("", points, gizmoLayer.utilityLayerScene);
-            rotationMesh.color = coloredMaterial.emissiveColor;
-
-            // Position arrow pointing in its drag axis
-            rotationMesh.scaling.scaleInPlace(0.26);
-            rotationMesh.material = coloredMaterial;
-            rotationMesh.rotation.x = Math.PI / 2;
-            parentMesh.addChild(rotationMesh);
-            parentMesh.lookAt(this._rootMesh.position.subtract(planeNormal));
-
-            this._rootMesh.addChild(parentMesh);
-            parentMesh.scaling.scaleInPlace(1 / 3);
-            // Add drag behavior to handle events when the gizmo is dragged
-            this.dragBehavior = new PointerDragBehavior({dragPlaneNormal: planeNormal});
-            this.dragBehavior.moveAttached = false;
-            this.dragBehavior.maxDragAngle =  Math.PI * 9 / 20;
-            this.dragBehavior._useAlternatePickedPointAboveMaxDragAngle = true;
-            this._rootMesh.addBehavior(this.dragBehavior);
-
-            var lastDragPosition = new Vector3();
-
-            this.dragBehavior.onDragStartObservable.add((e) => {
-                if (this.attachedMesh) {
-                    lastDragPosition.copyFrom(e.dragPlanePoint);
-                }
-            });
-
-            var rotationMatrix = new Matrix();
-            var planeNormalTowardsCamera = new Vector3();
-            var localPlaneNormalTowardsCamera = new Vector3();
-
-            var tmpSnapEvent = {snapDistance: 0};
-            var currentSnapDragDistance = 0;
-            var tmpMatrix = new BABYLON.Matrix();
-            var tmpVector = new BABYLON.Vector3();
-            var amountToRotate = new BABYLON.Quaternion();
-            this.dragBehavior.onDragObservable.add((event) => {
-                if (this.attachedMesh) {
-                    if (!this.attachedMesh.rotationQuaternion) {
-                        this.attachedMesh.rotationQuaternion = Quaternion.RotationYawPitchRoll(this.attachedMesh.rotation.y, this.attachedMesh.rotation.x, this.attachedMesh.rotation.z);
-                    }
-                    // Calc angle over full 360 degree (https://stackoverflow.com/questions/43493711/the-angle-between-two-3d-vectors-with-a-result-range-0-360)
-                    var newVector = event.dragPlanePoint.subtract(this.attachedMesh.absolutePosition).normalize();
-                    var originalVector = lastDragPosition.subtract(this.attachedMesh.absolutePosition).normalize();
-                    var cross = Vector3.Cross(newVector, originalVector);
-                    var dot = Vector3.Dot(newVector, originalVector);
-                    var angle = Math.atan2(cross.length(), dot);
-                    planeNormalTowardsCamera.copyFrom(planeNormal);
-                    localPlaneNormalTowardsCamera.copyFrom(planeNormal);
-                    if (this.updateGizmoRotationToMatchAttachedMesh) {
-                        this.attachedMesh.rotationQuaternion.toRotationMatrix(rotationMatrix);
-                        localPlaneNormalTowardsCamera = Vector3.TransformCoordinates(planeNormalTowardsCamera, rotationMatrix);
-                    }
-                    // Flip up vector depending on which side the camera is on
-                    if (gizmoLayer.utilityLayerScene.activeCamera) {
-                        var camVec = gizmoLayer.utilityLayerScene.activeCamera.position.subtract(this.attachedMesh.position);
-                        if (Vector3.Dot(camVec, localPlaneNormalTowardsCamera) > 0) {
-                            planeNormalTowardsCamera.scaleInPlace(-1);
-                            localPlaneNormalTowardsCamera.scaleInPlace(-1);
-                        }
-                    }
-                    var halfCircleSide = Vector3.Dot(localPlaneNormalTowardsCamera, cross) > 0.0;
-                    if (halfCircleSide) { angle = -angle; }
-
-                    // Snapping logic
-                    var snapped = false;
-                    if (this.snapDistance != 0) {
-                        currentSnapDragDistance += angle;
-                        if (Math.abs(currentSnapDragDistance) > this.snapDistance) {
-                            var dragSteps = Math.floor(currentSnapDragDistance / this.snapDistance);
-                            currentSnapDragDistance = currentSnapDragDistance % this.snapDistance;
-                            angle = this.snapDistance * dragSteps;
-                            snapped = true;
-                        }else {
-                            angle = 0;
-                        }
-                    }
-
-                    // If the mesh has a parent, convert needed world rotation to local rotation
-                    tmpMatrix.reset();
-                    if (this.attachedMesh.parent) {
-                        this.attachedMesh.parent.computeWorldMatrix().invertToRef(tmpMatrix);
-                        tmpMatrix.getRotationMatrixToRef(tmpMatrix);
-                        Vector3.TransformCoordinatesToRef(planeNormalTowardsCamera, tmpMatrix, planeNormalTowardsCamera);
-                    }
-
-                    // Convert angle and axis to quaternion (http://www.euclideanspace.com/maths/geometry/rotations/conversions/angleToQuaternion/index.htm)
-                    var quaternionCoefficient = Math.sin(angle / 2);
-                    amountToRotate.set(planeNormalTowardsCamera.x * quaternionCoefficient, planeNormalTowardsCamera.y * quaternionCoefficient, planeNormalTowardsCamera.z * quaternionCoefficient, Math.cos(angle / 2));
-
-                    // If the meshes local scale is inverted (eg. loaded gltf file parent with z scale of -1) the rotation needs to be inverted on the y axis
-                    if (tmpMatrix.determinant() > 0) {
-                        amountToRotate.toEulerAnglesToRef(tmpVector);
-                        BABYLON.Quaternion.RotationYawPitchRollToRef(tmpVector.y, -tmpVector.x, -tmpVector.z, amountToRotate);
-                    }
-
-                     if (this.updateGizmoRotationToMatchAttachedMesh) {
-                        // Rotate selected mesh quaternion over fixed axis
-                        this.attachedMesh.rotationQuaternion.multiplyToRef(amountToRotate, this.attachedMesh.rotationQuaternion);
-                     }else {
-                         // Rotate selected mesh quaternion over rotated axis
-                        amountToRotate.multiplyToRef(this.attachedMesh.rotationQuaternion, this.attachedMesh.rotationQuaternion);
-                     }
-
-                    lastDragPosition.copyFrom(event.dragPlanePoint);
-                    if (snapped) {
-                        tmpSnapEvent.snapDistance = angle;
-                        this.onSnapObservable.notifyObservers(tmpSnapEvent);
-                    }
-                }
-            });
-
-            this._pointerObserver = gizmoLayer.utilityLayerScene.onPointerObservable.add((pointerInfo, eventState) => {
-                if (this._customMeshSet) {
-                    return;
-                }
-                var isHovered = pointerInfo.pickInfo && (this._rootMesh.getChildMeshes().indexOf(<Mesh>pointerInfo.pickInfo.pickedMesh) != -1);
-                var material = isHovered ? hoverMaterial : coloredMaterial;
-                this._rootMesh.getChildMeshes().forEach((m) => {
-                    m.material = material;
-                    if ((<LinesMesh>m).color) {
-                        (<LinesMesh>m).color = material.emissiveColor;
-                    }
-                });
-            });
-        }
-
-        protected _attachedMeshChanged(value: Nullable<AbstractMesh>) {
-            if (this.dragBehavior) {
-                this.dragBehavior.enabled = value ? true : false;
-            }
-        }
-
-        /**
-         * Disposes of the gizmo
-         */
-        public dispose() {
-            this.onSnapObservable.clear();
-            this.gizmoLayer.utilityLayerScene.onPointerObservable.remove(this._pointerObserver);
-            this.dragBehavior.detach();
-            super.dispose();
-        }
-    }
-=======
 module BABYLON {
     /**
      * Single plane rotation gizmo
@@ -201,9 +6,9 @@ module BABYLON {
         /**
          * Drag behavior responsible for the gizmos dragging interactions
          */
-        public dragBehavior:PointerDragBehavior;
-        private _pointerObserver:Nullable<Observer<PointerInfo>> = null;
-        
+        public dragBehavior: PointerDragBehavior;
+        private _pointerObserver: Nullable<Observer<PointerInfo>> = null;
+
         /**
          * Rotation distance in radians that the gizmo will snap to (Default: 0)
          */
@@ -212,7 +17,7 @@ module BABYLON {
          * Event that fires each time the gizmo snaps to a new location.
          * * snapDistance is the the change in distance
          */
-        public onSnapObservable = new Observable<{snapDistance:number}>();
+        public onSnapObservable = new Observable<{snapDistance: number}>();
 
         /**
          * Creates a PlaneRotationGizmo
@@ -221,17 +26,17 @@ module BABYLON {
          * @param color The color of the gizmo
          * @param tessellation Amount of tessellation to be used when creating rotation circles
          */
-        constructor(planeNormal:Vector3, color:Color3 = Color3.Gray(), gizmoLayer:UtilityLayerRenderer = UtilityLayerRenderer.DefaultUtilityLayer, tessellation = 32){
+        constructor(planeNormal: Vector3, color: Color3 = Color3.Gray(), gizmoLayer: UtilityLayerRenderer = UtilityLayerRenderer.DefaultUtilityLayer, tessellation = 32) {
             super(gizmoLayer);
-            
+
             // Create Material
             var coloredMaterial = new BABYLON.StandardMaterial("", gizmoLayer.utilityLayerScene);
             coloredMaterial.disableLighting = true;
             coloredMaterial.emissiveColor = color;
-            
+
             var hoverMaterial = new BABYLON.StandardMaterial("", gizmoLayer.utilityLayerScene);
             hoverMaterial.disableLighting = true;
-            hoverMaterial.emissiveColor = color.add(new Color3(0.3,0.3,0.3));
+            hoverMaterial.emissiveColor = color.add(new Color3(0.3, 0.3, 0.3));
 
             // Build mesh on root node
             var parentMesh = new BABYLON.AbstractMesh("", gizmoLayer.utilityLayerScene);
@@ -239,36 +44,36 @@ module BABYLON {
             // Create circle out of lines
             var radius = 0.8;
             var points = new Array<Vector3>();
-            for(var i = 0;i < tessellation;i++){
-                var radian = (2*Math.PI) * (i/(tessellation-1));
-                points.push(new Vector3(radius*Math.sin(radian), 0, radius*Math.cos(radian)));
+            for (var i = 0; i < tessellation; i++) {
+                var radian = (2 * Math.PI) * (i / (tessellation - 1));
+                points.push(new Vector3(radius * Math.sin(radian), 0, radius * Math.cos(radian)));
             }
             let rotationMesh = Mesh.CreateLines("", points, gizmoLayer.utilityLayerScene);
             rotationMesh.color = coloredMaterial.emissiveColor;
-            
+
             // Position arrow pointing in its drag axis
             rotationMesh.scaling.scaleInPlace(0.26);
             rotationMesh.material = coloredMaterial;
-            rotationMesh.rotation.x = Math.PI/2;
+            rotationMesh.rotation.x = Math.PI / 2;
             parentMesh.addChild(rotationMesh);
             parentMesh.lookAt(this._rootMesh.position.subtract(planeNormal));
-            
+
             this._rootMesh.addChild(parentMesh);
-            parentMesh.scaling.scaleInPlace(1/3);
+            parentMesh.scaling.scaleInPlace(1 / 3);
             // Add drag behavior to handle events when the gizmo is dragged
             this.dragBehavior = new PointerDragBehavior({dragPlaneNormal: planeNormal});
             this.dragBehavior.moveAttached = false;
-            this.dragBehavior.maxDragAngle =  Math.PI*9/20;
+            this.dragBehavior.maxDragAngle =  Math.PI * 9 / 20;
             this.dragBehavior._useAlternatePickedPointAboveMaxDragAngle = true;
             this._rootMesh.addBehavior(this.dragBehavior);
 
             var lastDragPosition = new Vector3();
 
-            this.dragBehavior.onDragStartObservable.add((e)=>{
-                if(this.attachedMesh){
+            this.dragBehavior.onDragStartObservable.add((e) => {
+                if (this.attachedMesh) {
                     lastDragPosition.copyFrom(e.dragPlanePoint);
                 }
-            })
+            });
 
             var rotationMatrix = new Matrix();
             var planeNormalTowardsCamera = new Vector3();
@@ -279,100 +84,99 @@ module BABYLON {
             var tmpMatrix = new BABYLON.Matrix();
             var tmpVector = new BABYLON.Vector3();
             var amountToRotate = new BABYLON.Quaternion();
-            this.dragBehavior.onDragObservable.add((event)=>{
-                if(this.attachedMesh){
-                    if(!this.attachedMesh.rotationQuaternion){
+            this.dragBehavior.onDragObservable.add((event) => {
+                if (this.attachedMesh) {
+                    if (!this.attachedMesh.rotationQuaternion) {
                         this.attachedMesh.rotationQuaternion = Quaternion.RotationYawPitchRoll(this.attachedMesh.rotation.y, this.attachedMesh.rotation.x, this.attachedMesh.rotation.z);
                     }
                     // Calc angle over full 360 degree (https://stackoverflow.com/questions/43493711/the-angle-between-two-3d-vectors-with-a-result-range-0-360)
                     var newVector = event.dragPlanePoint.subtract(this.attachedMesh.absolutePosition).normalize();
                     var originalVector = lastDragPosition.subtract(this.attachedMesh.absolutePosition).normalize();
-                    var cross = Vector3.Cross(newVector,originalVector);
-                    var dot = Vector3.Dot(newVector,originalVector);
+                    var cross = Vector3.Cross(newVector, originalVector);
+                    var dot = Vector3.Dot(newVector, originalVector);
                     var angle = Math.atan2(cross.length(), dot);
                     planeNormalTowardsCamera.copyFrom(planeNormal);
                     localPlaneNormalTowardsCamera.copyFrom(planeNormal);
-                    if(this.updateGizmoRotationToMatchAttachedMesh){
+                    if (this.updateGizmoRotationToMatchAttachedMesh) {
                         this.attachedMesh.rotationQuaternion.toRotationMatrix(rotationMatrix);
                         localPlaneNormalTowardsCamera = Vector3.TransformCoordinates(planeNormalTowardsCamera, rotationMatrix);
                     }
                     // Flip up vector depending on which side the camera is on
-                    if(gizmoLayer.utilityLayerScene.activeCamera){
+                    if (gizmoLayer.utilityLayerScene.activeCamera) {
                         var camVec = gizmoLayer.utilityLayerScene.activeCamera.position.subtract(this.attachedMesh.position);
-                        if(Vector3.Dot(camVec, localPlaneNormalTowardsCamera) > 0){
+                        if (Vector3.Dot(camVec, localPlaneNormalTowardsCamera) > 0) {
                             planeNormalTowardsCamera.scaleInPlace(-1);
                             localPlaneNormalTowardsCamera.scaleInPlace(-1);
                         }
                     }
                     var halfCircleSide = Vector3.Dot(localPlaneNormalTowardsCamera, cross) > 0.0;
-                    if (halfCircleSide) angle = -angle;
-                    
+                    if (halfCircleSide) { angle = -angle; }
+
                     // Snapping logic
                     var snapped = false;
-                    if(this.snapDistance != 0){
-                        currentSnapDragDistance+=angle
-                        if(Math.abs(currentSnapDragDistance)>this.snapDistance){
-                            var dragSteps = Math.floor(currentSnapDragDistance/this.snapDistance);
+                    if (this.snapDistance != 0) {
+                        currentSnapDragDistance += angle;
+                        if (Math.abs(currentSnapDragDistance) > this.snapDistance) {
+                            var dragSteps = Math.floor(currentSnapDragDistance / this.snapDistance);
                             currentSnapDragDistance = currentSnapDragDistance % this.snapDistance;
-                            angle = this.snapDistance*dragSteps;
+                            angle = this.snapDistance * dragSteps;
                             snapped = true;
-                        }else{
+                        }else {
                             angle = 0;
                         }
                     }
 
                     // If the mesh has a parent, convert needed world rotation to local rotation
                     tmpMatrix.reset();
-                    if(this.attachedMesh.parent){
+                    if (this.attachedMesh.parent) {
                         this.attachedMesh.parent.computeWorldMatrix().invertToRef(tmpMatrix);
                         tmpMatrix.getRotationMatrixToRef(tmpMatrix);
                         Vector3.TransformCoordinatesToRef(planeNormalTowardsCamera, tmpMatrix, planeNormalTowardsCamera);
                     }
 
                     // Convert angle and axis to quaternion (http://www.euclideanspace.com/maths/geometry/rotations/conversions/angleToQuaternion/index.htm)
-                    var quaternionCoefficient = Math.sin(angle/2);
-                    amountToRotate.set(planeNormalTowardsCamera.x*quaternionCoefficient,planeNormalTowardsCamera.y*quaternionCoefficient,planeNormalTowardsCamera.z*quaternionCoefficient,Math.cos(angle/2));
+                    var quaternionCoefficient = Math.sin(angle / 2);
+                    amountToRotate.set(planeNormalTowardsCamera.x * quaternionCoefficient, planeNormalTowardsCamera.y * quaternionCoefficient, planeNormalTowardsCamera.z * quaternionCoefficient, Math.cos(angle / 2));
 
                     // If the meshes local scale is inverted (eg. loaded gltf file parent with z scale of -1) the rotation needs to be inverted on the y axis
-                    if(tmpMatrix.determinant() > 0){
+                    if (tmpMatrix.determinant() > 0) {
                         amountToRotate.toEulerAnglesToRef(tmpVector);
                         BABYLON.Quaternion.RotationYawPitchRollToRef(tmpVector.y, -tmpVector.x, -tmpVector.z, amountToRotate);
                     }
 
-                     if(this.updateGizmoRotationToMatchAttachedMesh){
+                     if (this.updateGizmoRotationToMatchAttachedMesh) {
                         // Rotate selected mesh quaternion over fixed axis
-                        this.attachedMesh.rotationQuaternion.multiplyToRef(amountToRotate,this.attachedMesh.rotationQuaternion);
-                     }else{
+                        this.attachedMesh.rotationQuaternion.multiplyToRef(amountToRotate, this.attachedMesh.rotationQuaternion);
+                     }else {
                          // Rotate selected mesh quaternion over rotated axis
-                        amountToRotate.multiplyToRef(this.attachedMesh.rotationQuaternion,this.attachedMesh.rotationQuaternion);
+                        amountToRotate.multiplyToRef(this.attachedMesh.rotationQuaternion, this.attachedMesh.rotationQuaternion);
                      }
-                     
 
                     lastDragPosition.copyFrom(event.dragPlanePoint);
-                    if(snapped){
+                    if (snapped) {
                         tmpSnapEvent.snapDistance = angle;
                         this.onSnapObservable.notifyObservers(tmpSnapEvent);
                     }
                 }
-            })
+            });
 
-            this._pointerObserver = gizmoLayer.utilityLayerScene.onPointerObservable.add((pointerInfo, eventState)=>{
-                if(this._customMeshSet){
+            this._pointerObserver = gizmoLayer.utilityLayerScene.onPointerObservable.add((pointerInfo, eventState) => {
+                if (this._customMeshSet) {
                     return;
                 }
                 var isHovered = pointerInfo.pickInfo && (this._rootMesh.getChildMeshes().indexOf(<Mesh>pointerInfo.pickInfo.pickedMesh) != -1);
                 var material = isHovered ? hoverMaterial : coloredMaterial;
-                this._rootMesh.getChildMeshes().forEach((m)=>{
+                this._rootMesh.getChildMeshes().forEach((m) => {
                     m.material = material;
-                    if((<LinesMesh>m).color){
-                        (<LinesMesh>m).color = material.emissiveColor
+                    if ((<LinesMesh>m).color) {
+                        (<LinesMesh>m).color = material.emissiveColor;
                     }
                 });
             });
         }
 
-        protected _attachedMeshChanged(value:Nullable<AbstractMesh>){
-            if(this.dragBehavior){
+        protected _attachedMeshChanged(value: Nullable<AbstractMesh>) {
+            if (this.dragBehavior) {
                 this.dragBehavior.enabled = value ? true : false;
             }
         }
@@ -380,12 +184,11 @@ module BABYLON {
         /**
          * Disposes of the gizmo
          */
-        public dispose(){
+        public dispose() {
             this.onSnapObservable.clear();
             this.gizmoLayer.utilityLayerScene.onPointerObservable.remove(this._pointerObserver);
             this.dragBehavior.detach();
             super.dispose();
         }
     }
->>>>>>> 747ca4d7ec7c52281e24f222de0c930976354dad
 }

src/Gizmos/babylon.rotationGizmo.ts

@@ -28,19 +28,11 @@ module BABYLON {
          * @param gizmoLayer The utility layer the gizmo will be added to
          * @param tessellation Amount of tessellation to be used when creating rotation circles
          */
-<<<<<<< HEAD
-        constructor(gizmoLayer: UtilityLayerRenderer= UtilityLayerRenderer.DefaultUtilityLayer) {
+        constructor(gizmoLayer: UtilityLayerRenderer= UtilityLayerRenderer.DefaultUtilityLayer, tessellation = 32) {
             super(gizmoLayer);
-            this.xGizmo = new PlaneRotationGizmo(new Vector3(1, 0, 0), BABYLON.Color3.Red().scale(0.5), gizmoLayer);
-            this.yGizmo = new PlaneRotationGizmo(new Vector3(0, 1, 0), BABYLON.Color3.Green().scale(0.5), gizmoLayer);
-            this.zGizmo = new PlaneRotationGizmo(new Vector3(0, 0, 1), BABYLON.Color3.Blue().scale(0.5), gizmoLayer);
-=======
-        constructor(gizmoLayer:UtilityLayerRenderer=UtilityLayerRenderer.DefaultUtilityLayer, tessellation = 32){
-            super(gizmoLayer);
-            this.xGizmo = new PlaneRotationGizmo(new Vector3(1,0,0), BABYLON.Color3.Red().scale(0.5), gizmoLayer, tessellation);
-            this.yGizmo = new PlaneRotationGizmo(new Vector3(0,1,0), BABYLON.Color3.Green().scale(0.5), gizmoLayer, tessellation);
-            this.zGizmo = new PlaneRotationGizmo(new Vector3(0,0,1), BABYLON.Color3.Blue().scale(0.5), gizmoLayer, tessellation);
->>>>>>> 747ca4d7ec7c52281e24f222de0c930976354dad
+            this.xGizmo = new PlaneRotationGizmo(new Vector3(1, 0, 0), BABYLON.Color3.Red().scale(0.5), gizmoLayer, tessellation);
+            this.yGizmo = new PlaneRotationGizmo(new Vector3(0, 1, 0), BABYLON.Color3.Green().scale(0.5), gizmoLayer, tessellation);
+            this.zGizmo = new PlaneRotationGizmo(new Vector3(0, 0, 1), BABYLON.Color3.Blue().scale(0.5), gizmoLayer, tessellation);
             this.attachedMesh = null;
         }
 

src/Particles/babylon.subEmitter.ts

@@ -41,16 +41,16 @@ module BABYLON {
             public particleSystem: ParticleSystem
         ) {
             // Create mesh as emitter to support rotation
-            if(!particleSystem.emitter || !(<AbstractMesh>particleSystem.emitter).dispose){
+            if (!particleSystem.emitter || !(<AbstractMesh>particleSystem.emitter).dispose) {
                 particleSystem.emitter = new BABYLON.AbstractMesh("SubemitterSystemEmitter", particleSystem.getScene());
             }
 
             // Automatically dispose of subemitter when system is disposed
-            particleSystem.onDisposeObservable.add(()=>{
-                if(particleSystem.emitter && (<AbstractMesh>particleSystem.emitter).dispose){
+            particleSystem.onDisposeObservable.add(() => {
+                if (particleSystem.emitter && (<AbstractMesh>particleSystem.emitter).dispose) {
                     (<AbstractMesh>particleSystem.emitter).dispose();
                 }
-            })
+            });
         }
         /**
          * Clones the sub emitter