Merge pull request #2431 from ameuleman/master

Update inspector's label tool: uses BABYLON.GUI instead of canvas2D

Tools/Gulp/config.json

@@ -1437,6 +1437,7 @@
                     "../../inspector/src/gui/BasicElement.ts",
                     "../../inspector/src/adapters/Adapter.ts",
                     "../../inspector/src/adapters/CameraAdapter.ts",
+                    "../../inspector/src/adapters/PhysicsImpostorAdapter.ts",
                     "../../inspector/src/adapters/GUIAdapter.ts",
                     "../../inspector/src/adapters/SoundAdapter.ts",
                     "../../inspector/src/adapters/TextureAdapter.ts",

inspector/src/tools/LabelTool.ts

@@ -4,17 +4,10 @@ module INSPECTOR {
 
         /** True if label are displayed, false otherwise */
         private _isDisplayed         : boolean            = false;
-        private _canvas              : BABYLON.ScreenSpaceCanvas2D = null;
+        private _advancedTexture     : BABYLON.GUI.AdvancedDynamicTexture = null;
         private _labelInitialized    : boolean = false;
         private _scene               : BABYLON.Scene = null;
-        private _canvas2DLoaded      : boolean = false;
-
-        private _newMeshObserver       : BABYLON.Observer<BABYLON.AbstractMesh> = null;
-        private _removedMeshObserver   : BABYLON.Observer<BABYLON.AbstractMesh> = null;
-        private _newLightObserver      : BABYLON.Observer<BABYLON.Light> = null;
-        private _removedLightObserver  : BABYLON.Observer<BABYLON.Light> = null;
-        private _newCameraObserver     : BABYLON.Observer<BABYLON.Camera> = null;
-        private _removedCameraObserver : BABYLON.Observer<BABYLON.Camera> = null;
+        private _guiLoaded      : boolean = false;
         
         constructor(parent:HTMLElement, inspector:Inspector) {
             super('fa-tags', parent, inspector, 'Display mesh names on the canvas');
@@ -23,31 +16,20 @@ module INSPECTOR {
         }
 
         public dispose() {
-            if (this._newMeshObserver) {
-                this._scene.onNewMeshAddedObservable.remove(this._newMeshObserver);
-                this._scene.onMeshRemovedObservable.remove (this._removedMeshObserver);
 
-                this._scene.onNewLightAddedObservable.remove(this._newLightObserver);
-                this._scene.onLightRemovedObservable.remove (this._removedLightObserver);
-
-                this._scene.onNewCameraAddedObservable.remove(this._newCameraObserver);
-                this._scene.onCameraRemovedObservable.remove (this._removedCameraObserver);
-    
-                this._newMeshObserver = this._newLightObserver = this._newCameraObserver = this._removedMeshObserver = this._removedLightObserver = this._removedCameraObserver = null;
+            if(this._advancedTexture){
+                this._advancedTexture.dispose();
             }
-
-            this._canvas.dispose();
-            this._canvas = null;
         }
 
-        private _checkC2DLoaded(): boolean {
-            if (this._canvas2DLoaded === true) {
+        private _checkGUILoaded(): boolean {
+            if (this._guiLoaded === true) {
                 return true;
             }
-            if (BABYLON.Canvas2D) {
-                this._canvas2DLoaded = true;
+            if (BABYLON.GUI) {
+                this._guiLoaded = true;
             }
-            return this._canvas2DLoaded;
+            return this._guiLoaded;
         }
 
         private _initializeLabels() {
@@ -56,13 +38,13 @@ module INSPECTOR {
                 return;
             }
 
-            // Can't initialize them if the Canvas2D lib is not loaded yet
-            if (!this._checkC2DLoaded()) {
+            // Can't initialize them if the GUI lib is not loaded yet
+            if (!this._checkGUILoaded()) {
                 return;
             }
 
             // Create the canvas that will be used to display the labels
-            this._canvas = new BABYLON.ScreenSpaceCanvas2D(this._scene, {id: "###Label Canvas###"/*, cachingStrategy: BABYLON.Canvas2D.CACHESTRATEGY_TOPLEVELGROUPS*/});
+            this._advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
 
             // Create label for all the Meshes, Lights and Cameras
             // Those that will be created/removed after this method is called will be taken care by the event handlers added below
@@ -70,77 +52,48 @@ module INSPECTOR {
             for (let m of this._scene.meshes) {
                 this._createLabel(m);
             }
-
-            for (let l of this._scene.lights) {
-                this._createLabel(l);
-            }
-
-            for (let c of this._scene.cameras) {
-                this._createLabel(c);
-            }
-
-            // Add handlers for new/removed meshes, camera and lights
-
-            this._newMeshObserver = this._scene.onNewMeshAddedObservable.add((e, s) => {
-                this._createLabel(e);
-            });
-
-            this._removedMeshObserver = this._scene.onMeshRemovedObservable.add((e, s) => {
-                this._removeLabel(e);
-            });
-
-            this._newLightObserver = this._scene.onNewLightAddedObservable.add((e, s) => {
-                this._createLabel(e);
-            });
-
-            this._removedLightObserver = this._scene.onLightRemovedObservable.add((e, s) => {
-                this._removeLabel(e);
+            
+            this._scene.onNewMeshAddedObservable.add((m, s) => {
+                this._createLabel(m);
             });
 
-            this._newCameraObserver = this._scene.onNewCameraAddedObservable.add((e, s) => {
-                this._createLabel(e);
+            this._scene.onMeshRemovedObservable.add((m, s) => {
+                this._removeLabel(m);
             });
 
-            this._removedCameraObserver = this._scene.onCameraRemovedObservable.add((e, s) => {
-                this._removeLabel(e);
-            });
-            
             this._labelInitialized = true;
         }
 
-        private _createLabel(node: BABYLON.Node): BABYLON.Group2D {
+        private _createLabel(mesh: BABYLON.AbstractMesh){
             // Don't create label for "system nodes" (starting and ending with ###)
-            let name = node.name;
+            let name = mesh.name;
 
             if (Helpers.IsSystemName(name)) {
                 return;
             }
 
-            let labelGroup = new BABYLON.Group2D({ parent: this._canvas, id: `Label of ${node.name}`, trackNode: node, origin: BABYLON.Vector2.Zero(), 
-            children: [
-                    new BABYLON.Rectangle2D({ id: "LabelRect", x: 0, y: 0, width: 100, height: 30, origin: BABYLON.Vector2.Zero(), border: "#FFFFFFFF", fill: "#808080B0", children: [
-                            new BABYLON.Text2D(node.name, { x: 10, y: 4, fontName: "bold 16px Arial", fontSignedDistanceField: true })
-                        ]
-                    })
-                ]}
-            );
+            if(mesh){
+                let rect1 = new BABYLON.GUI.Rectangle();
+                rect1.width = 4 + 10 * name.length + "px";
+                rect1.height = "22px";
+                rect1.background = "rgba(0,0,0,0.6)";
+                rect1.color = "black";
+                this._advancedTexture.addControl(rect1);
 
-            let r = labelGroup.children[0] as BABYLON.Rectangle2D;
-            let t = r.children[0] as BABYLON.Text2D;
-            let ts = t.textSize.width;
-            r.width = ts + 20;
-            r.height = t.textSize.height + 12;
+                let label = new BABYLON.GUI.TextBlock();
+                label.text = name;
+                label.fontSize = 12;
+                rect1.addControl(label);
 
-            labelGroup.addExternalData("owner", node);
-
-            return labelGroup;
+                rect1.linkWithMesh(mesh); 
+            }
         }
 
-        private _removeLabel(node: BABYLON.Node) {
-            for (let g of this._canvas.children) {
-                let ed = g.getExternalData("owner");
-                if (ed === node) {
-                    g.dispose();
+        private _removeLabel(mesh: BABYLON.AbstractMesh) {
+            for (let g of this._advancedTexture._rootContainer.children) {
+                let ed = g._linkedMesh;
+                if (ed === mesh) {
+                    this._advancedTexture.removeControl(g);
                     break;
                 }
             }
@@ -149,7 +102,7 @@ module INSPECTOR {
         // Action : Display/hide mesh names on the canvas
         public action() {
             // Don't toggle if the script is not loaded
-            if (!this._checkC2DLoaded()) {
+            if (!this._checkGUILoaded()) {
                 return;
             }
 
@@ -159,12 +112,12 @@ module INSPECTOR {
             // Check if we have to display the labels
             if (this._isDisplayed) {
                 this._initializeLabels();
-                this._canvas.levelVisible = true;
+                this._advancedTexture._rootContainer.isVisible = true;
             } 
             
             // Or to hide them
             else {
-                this._canvas.levelVisible = false;
+                this._advancedTexture._rootContainer.isVisible = false;
             }
         }
     }

inspector/test/index.js

@@ -228,6 +228,13 @@ var Test = (function () {
         box4.position.x = 1.5;
         box4.parent = box3;
 
+        window.addEventListener("keydown", function (evt) {
+            sphere1.dispose();
+            var sphere7 = BABYLON.Mesh.CreateSphere("Sphere7", 10.0, 9.0, scene);
+            sphere7.position.x = 40;
+        });
+
+
         // gui
         var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");