Added labels, hover and background

gui/src/2D/controls/container.ts

@@ -154,6 +154,20 @@ export class Container extends Control {
     }
 
     /**
+     * Removes all controls from the current container
+     * @returns the current container
+     */
+    public clearControls(): Container {
+        let children = this._children.slice();
+
+        for (var child of children) {
+            this.removeControl(child);
+        }
+
+        return this;
+    }
+
+    /**
      * Removes a control from the current container
      * @param control defines the control to remove
      * @returns the current container

gui/src/2D/controls/displayGrid.ts

@@ -17,6 +17,37 @@ export class DisplayGrid extends Control {
 
     private _background = "Black";
 
+    private _displayMajorLines = true;
+    private _displayMinorLines = true;
+
+    /** Gets or sets a boolean indicating if minor lines must be rendered (true by default)) */
+    public get displayMinorLines(): boolean {
+        return this._displayMinorLines;
+    }
+
+    public set displayMinorLines(value: boolean) {
+        if (this._displayMinorLines === value) {
+            return;
+        }
+
+        this._displayMinorLines = value;
+        this._markAsDirty();
+    }  
+
+    /** Gets or sets a boolean indicating if major lines must be rendered (true by default)) */
+    public get displayMajorLines(): boolean {
+        return this._displayMajorLines;
+    }
+
+    public set displayMajorLines(value: boolean) {
+        if (this._displayMajorLines === value) {
+            return;
+        }
+
+        this._displayMajorLines = value;
+        this._markAsDirty();
+    }  
+
     /** Gets or sets background color (Black by default) */
     public get background(): string {
         return this._background;
@@ -131,52 +162,55 @@ export class DisplayGrid extends Control {
             let cellCountX = this._currentMeasure.width / this._cellWidth;
             let cellCountY = this._currentMeasure.height / this._cellHeight;
 
-            // Minor lines
-            context.strokeStyle = this._minorLineColor;
-            context.lineWidth = this._minorLineTickness;        
-
+            // Minor lines    
             const left = this._currentMeasure.left + this._currentMeasure.width / 2;
-
-            for (var x = -cellCountX / 2; x < cellCountX / 2; x++) {
-                const cellX = left + x * this.cellWidth;
-
-                context.beginPath();
-                context.moveTo(cellX, this._currentMeasure.top);
-                context.lineTo(cellX, this._currentMeasure.top + this._currentMeasure.height);
-                
-                context.stroke();                
-            }
-
             const top = this._currentMeasure.top + this._currentMeasure.height / 2;
 
-            for (var y = -cellCountY / 2; y < cellCountY / 2; y++) {
-                const cellY = top + y * this.cellHeight;
+            if (this._displayMinorLines) {
+                context.strokeStyle = this._minorLineColor;
+                context.lineWidth = this._minorLineTickness;    
 
-                context.beginPath();
-                context.moveTo(this._currentMeasure.left, cellY);
-                context.lineTo(this._currentMeasure.left + this._currentMeasure.width, cellY);
-                context.stroke();
-            }
+                for (var x = -cellCountX / 2; x < cellCountX / 2; x++) {
+                    const cellX = left + x * this.cellWidth;
 
-            // Major lines
-            context.strokeStyle = this._majorLineColor;
-            context.lineWidth = this._majorLineTickness;        
+                    context.beginPath();
+                    context.moveTo(cellX, this._currentMeasure.top);
+                    context.lineTo(cellX, this._currentMeasure.top + this._currentMeasure.height);
+                    
+                    context.stroke();                
+                }
 
-            for (var x = -cellCountX / 2 + this._majorLineFrequency; x < cellCountX / 2; x += this._majorLineFrequency) {
-                let cellX = left + x * this.cellWidth;
+                for (var y = -cellCountY / 2; y < cellCountY / 2; y++) {
+                    const cellY = top + y * this.cellHeight;
 
-                context.beginPath();    
-                context.moveTo(cellX, this._currentMeasure.top);
-                context.lineTo(cellX, this._currentMeasure.top + this._currentMeasure.height);
-                context.stroke();
+                    context.beginPath();
+                    context.moveTo(this._currentMeasure.left, cellY);
+                    context.lineTo(this._currentMeasure.left + this._currentMeasure.width, cellY);
+                    context.stroke();
+                }
             }
 
-            for (var y = -cellCountY / 2 + this._majorLineFrequency; y < cellCountY / 2; y += this._majorLineFrequency) {
-                let cellY = top + y * this.cellHeight;
-                context.moveTo(this._currentMeasure.left, cellY);
-                context.lineTo(this._currentMeasure.left + this._currentMeasure.width, cellY);
-                context.closePath();
-                context.stroke();
+            // Major lines
+            if (this._displayMajorLines) {
+                context.strokeStyle = this._majorLineColor;
+                context.lineWidth = this._majorLineTickness;        
+
+                for (var x = -cellCountX / 2 + this._majorLineFrequency; x < cellCountX / 2; x += this._majorLineFrequency) {
+                    let cellX = left + x * this.cellWidth;
+
+                    context.beginPath();    
+                    context.moveTo(cellX, this._currentMeasure.top);
+                    context.lineTo(cellX, this._currentMeasure.top + this._currentMeasure.height);
+                    context.stroke();
+                }
+
+                for (var y = -cellCountY / 2 + this._majorLineFrequency; y < cellCountY / 2; y += this._majorLineFrequency) {
+                    let cellY = top + y * this.cellHeight;
+                    context.moveTo(this._currentMeasure.left, cellY);
+                    context.lineTo(this._currentMeasure.left + this._currentMeasure.width, cellY);
+                    context.closePath();
+                    context.stroke();
+                }
             }
         }
 

gui/src/3D/charting/barGraph.ts

@@ -1,5 +1,7 @@
-import { Nullable, Scene, Mesh, Observable, StandardMaterial, Material, Color3, Animation } from "babylonjs";
+import { Nullable, Scene, Mesh, StandardMaterial, Material, Animation, Observer, Vector3, GlowLayer, Engine, AbstractMesh } from "babylonjs";
 import { Chart } from ".";
+import { AdvancedDynamicTexture, DisplayGrid } from "../../2D";
+import { FluentMaterial } from "../materials";
 
 /** Class used to render bar graphs */
 export class BarGraph extends Chart {
@@ -9,9 +11,17 @@ export class BarGraph extends Chart {
     private _defaultMaterial: Nullable<Material>;
     protected _ownDefaultMaterial = false;
     private _barMeshes: Nullable<Array<Mesh>>;
+    private _backgroundMesh: Nullable<Mesh>;
+    private _backgroundADT : Nullable<AdvancedDynamicTexture>;
 
-    /** Observable raised when a new element is created (one per bar) */
-    public onElementCreated = new Observable<Mesh>();
+    private _pickedPointObserver: Nullable<Observer<Vector3>>;
+
+    private _glowLayer: GlowLayer;
+    
+    private _onElementEnterObserver: Nullable<Observer<AbstractMesh>>;
+    private _onElementOutObserver: Nullable<Observer<AbstractMesh>>;
+    
+    private _labelDimension: string;
 
     /** Gets or sets the margin between bars */
     public get margin(): number {
@@ -58,6 +68,21 @@ export class BarGraph extends Chart {
         this.refresh();
     }
 
+    /** Gets or sets the dimension used for the labels */
+    public get labelDimension(): string {
+        return this._labelDimension;
+    }
+
+    public set labelDimension(value: string) {
+        if (this._labelDimension === value) {
+            return;
+        }
+
+        this._labelDimension = value;
+
+        this.refresh();
+    }
+
     /** Gets or sets the material used by bar meshes */
     public get defaultMaterial(): Nullable<Material> {
         return this._defaultMaterial;
@@ -76,16 +101,47 @@ export class BarGraph extends Chart {
     /**
      * Creates a new BarGraph
      * @param name defines the name of the graph
+     * @param scene defines the hosting scene
      */
-    constructor(name: string, scene?: Scene) {
+    constructor(name: string, scene: Nullable<Scene> = Engine.LastCreatedScene) {
         super(name, scene);
+
+        this._glowLayer = new GlowLayer("glow", scene!);
+
+        let activeBar: Nullable<Mesh>;
+        this._onElementEnterObserver = this.onElementEnterObservable.add(mesh => {
+            activeBar = <Mesh>mesh;
+        });
+
+        this._onElementOutObserver = this.onElementOutObservable.add(mesh => {
+            activeBar = null;
+        });
+
+        this._glowLayer.customEmissiveColorSelector = (mesh, subMesh, material, result) => {
+            if (mesh === activeBar) {
+                let chartColor = this._dataSource!.color.scale(0.75);
+                result.set(chartColor.r, chartColor.g, chartColor.b, 1.0);
+            } else {
+                result.set(0, 0, 0, 0);
+            }
+        }
     }
 
     protected _createDefaultMaterial(scene: Scene): Material {
-        var result = new StandardMaterial("Plastic", scene);
-
-        result.diffuseColor = this._dataSource!.color;
-        result.specularColor = Color3.Black();
+        var result = new FluentMaterial("fluent", scene);
+        result.albedoColor = this._dataSource!.color.scale(0.5);
+        result.innerGlowColorIntensity = 0.6;
+        result.renderHoverLight = true;
+        result.hoverRadius = 5;
+
+        this._pickedPointObserver = this.onPickedPointChangedObservable.add(pickedPoint => {
+            if (pickedPoint) {
+                result.hoverPosition = pickedPoint;
+                result.hoverColor.a = 1.0;
+            } else {
+                result.hoverColor.a = 0;
+            }
+        });
 
         return result;
     }
@@ -100,6 +156,8 @@ export class BarGraph extends Chart {
         var box = Mesh.CreateBox(name, 1, scene);
         box.setPivotPoint(new BABYLON.Vector3(0, -0.5, 0));
 
+        box.metadata = "chart";
+
         return box;
     }
 
@@ -108,6 +166,10 @@ export class BarGraph extends Chart {
      * @returns the current BarGraph
     */
     public refresh(): BarGraph {
+        if (this._blockRefresh) {
+            return this;
+        }
+
         if (!this._dataSource) {
             this._clean();
             return this;
@@ -138,6 +200,7 @@ export class BarGraph extends Chart {
         });
 
         let ratio = this.maxBarHeight / (max - min);
+
         let createMesh = false;
 
         // Do we need to create new graph or animate the current one
@@ -145,7 +208,32 @@ export class BarGraph extends Chart {
             this._clean();
             createMesh = true;
             this._barMeshes = [];
+        }        
+
+        this.removeLabels();
+
+        // Axis
+        if (!this._backgroundMesh) {
+            this._backgroundMesh = BABYLON.Mesh.CreatePlane("background", 1, scene);
+            this._backgroundMesh.parent = this._rootNode;            
+            this._backgroundMesh.setPivotPoint(new BABYLON.Vector3(0, -0.5, 0));
+
+            this._backgroundADT = AdvancedDynamicTexture.CreateForMesh(this._backgroundMesh, 512, 512, false);
+
+            let displayGrid = new DisplayGrid();
+            displayGrid.displayMajorLines = false;
+            displayGrid.minorLineColor = "White";
+            displayGrid.minorLineTickness = 2;
+            displayGrid.cellWidth = 512 / data.length;
+            displayGrid.cellHeight = 512 / 5;
+
+            this._backgroundADT.addControl(displayGrid);
+
+            (<StandardMaterial>this._backgroundMesh.material!).opacityTexture = null;
         }
+        this._backgroundMesh.position.z = this.barWidth;
+        this._backgroundMesh.scaling.x = (this.barWidth + this.margin) * data.length;
+        this._backgroundMesh.scaling.y = this._maxBarHeight; 
 
         // We will generate one bar per entry
         let left = -(data.length / 2) * (this.barWidth + this.margin) + 1.5 * this._margin;
@@ -155,6 +243,7 @@ export class BarGraph extends Chart {
             var barMesh: Mesh;
             if (createMesh) {
                 barMesh = this._createBarMesh(this.name + "_box_" + index++, scene);
+                barMesh.enablePointerMoveEvents = true;
                 this._barMeshes!.push(barMesh);
             } else {
                 barMesh = this._barMeshes![index++];
@@ -173,24 +262,58 @@ export class BarGraph extends Chart {
             this.onElementCreated.notifyObservers(barMesh);
 
             left += this.barWidth + this.margin;
-        });
 
+            // Label
+            if (!this._labelDimension) {
+                return;
+            }
+
+            let label = this.addLabel(entry[this._labelDimension]);
+            label.position = barMesh.position.clone();
+            label.position.z -= this.barWidth;
+            label.scaling.x = this.barWidth;
+        });
 
         return this;
     }
 
     /** Clean associated resources */
     public dispose() {
+        super.dispose();
         if (this._ownDefaultMaterial && this._defaultMaterial) {
             this._defaultMaterial.dispose();
             this._defaultMaterial = null;
         }
 
-        this._rootNode.dispose();
+        if (this._backgroundADT) {
+            this._backgroundADT.dispose();
+            this._backgroundADT = null;
+        }
+
+        if (this._pickedPointObserver) {
+            this.onPickedPointChangedObservable.remove(this._pickedPointObserver);
+            this._pickedPointObserver = null;
+        }
+
+        if (this._onElementEnterObserver) {
+            this.onElementEnterObservable.remove(this._onElementEnterObserver);
+            this._onElementEnterObserver = null;
+        }
+
+        if (this._onElementOutObserver) {
+            this.onElementOutObservable.remove(this._onElementOutObserver);
+            this._onElementOutObserver = null;
+        }
     }
 
     protected _clean(): void {
         super._clean();
         this._barMeshes = null;
+        this._backgroundMesh = null;
+
+        if (this._backgroundADT) {
+            this._backgroundADT.dispose();
+            this._backgroundADT = null;
+        }
     }
 }

gui/src/3D/charting/chart.ts

@@ -1,11 +1,35 @@
-import { Nullable, TransformNode, Scene, Vector3 } from "babylonjs";
+import { Nullable, TransformNode, Scene, Vector3, Engine, Observer, PointerInfo, Observable, Mesh, AbstractMesh } from "babylonjs";
 import { DataSeries } from ".";
+import { AdvancedDynamicTexture, TextBlock } from "../../2D";
 
 /** base class for all chart controls*/
 export abstract class Chart {
     protected _dataSource: Nullable<DataSeries>;
     protected _rootNode: TransformNode;
     protected _dataFilters: {[key: string]: string};
+    private _pointerObserver: Nullable<Observer<PointerInfo>>;
+    protected _scene: Scene;
+    private _lastElementOver: Nullable<AbstractMesh>;
+    private _labelMeshes = new Array<Mesh>();
+    protected _blockRefresh = false;
+
+    /** Observable raised when a new element is created */
+    public onElementCreated = new Observable<Mesh>();
+
+    /**
+     * Observable raised when the point picked by the pointer events changed
+     */
+    public onPickedPointChangedObservable = new Observable<Nullable<Vector3>>();
+
+    /**
+     * Observable raised when the pointer enters an element of the chart
+    */
+    public onElementEnterObservable = new Observable<AbstractMesh>();
+
+    /**
+     * Observable raised when the pointer leaves an element of the chart
+     */
+    public onElementOutObservable = new Observable<AbstractMesh>();
 
     /** Gets or sets the rotation of the entire chart */
     public set rotation(value: Vector3) {
@@ -65,16 +89,85 @@ export abstract class Chart {
         return this._rootNode;
     }
 
+    /** Gets or sets a value indicating if refresh function should be executed (useful when multiple changes will happen and you want to run refresh only at the end) */
+    public get blockRefresh(): boolean {
+        return this._blockRefresh;
+    }
+
+    public set blockRefresh(value: boolean) {
+        if (this._blockRefresh === value) {
+            return;
+        }
+
+        this._blockRefresh = value;
+
+        if (value) {
+            this.refresh();
+        }
+    }
+
     /** Gets or sets the name of the graph */
     public name: string; 
 
     /**
      * Creates a new Chart
      * @param name defines the name of the graph
+     * @param scene defines the hosting scene
      */
-    constructor(name: string, scene?: Scene) {
+    constructor(name: string, scene: Nullable<Scene> = Engine.LastCreatedScene) {
         this.name = name;
         this._rootNode = new TransformNode(name, scene);
+
+        this._scene = scene!;
+
+        this._pointerObserver = this._scene.onPointerObservable.add((pi, state) => {
+            if (!pi.pickInfo || !pi.pickInfo.hit) {
+                if (this._lastElementOver) {
+                    this.onElementOutObservable.notifyObservers(this._lastElementOver);
+                    this._lastElementOver = null;
+                }
+
+                this.onPickedPointChangedObservable.notifyObservers(null);
+                return;
+            }
+
+            if (pi.pickInfo.pickedMesh!.metadata === "chart") {
+                if (this._lastElementOver !== pi.pickInfo.pickedMesh) {
+                    this._lastElementOver = pi.pickInfo.pickedMesh;
+                    this.onElementEnterObservable.notifyObservers(this._lastElementOver!);
+                }
+            }
+
+            this.onPickedPointChangedObservable.notifyObservers(pi.pickInfo.pickedPoint);
+        });
+    }
+
+    public addLabel(label: string): Mesh {
+        let plane = Mesh.CreatePlane(label, 1, this._scene);
+
+        this._labelMeshes.push(plane);
+
+        plane.parent = this._rootNode;
+        plane.billboardMode = Mesh.BILLBOARDMODE_ALL;
+        plane.renderingGroupId = 1;
+
+        let adt = AdvancedDynamicTexture.CreateForMesh(plane, 512, 128, false);
+        let textBlock = new TextBlock(label, label);
+        textBlock.color = "White";
+        textBlock.fontWeight = "Bold";
+        textBlock.fontSize = 80;
+
+        adt.addControl(textBlock);
+
+        return plane;
+    }
+
+    public removeLabels() {
+        this._labelMeshes.forEach(label => {
+            label.dispose(false, true);
+        });
+
+        this._labelMeshes = [];
     }
 
     /** 
@@ -83,6 +176,15 @@ export abstract class Chart {
     */
     public abstract refresh(): Chart;
 
+    public dispose() {
+        if (this._pointerObserver) {
+            this._scene.onPointerObservable.remove(this._pointerObserver);
+            this._pointerObserver = null;
+        }
+
+        this._rootNode.dispose();
+    }
+
     protected _clean(): void {
         // Cleanup
         var descendants = this._rootNode.getDescendants();

gui/src/3D/charting/dataSeries.ts

@@ -70,7 +70,7 @@ export class DataSeries {
     public static CreateFakeData(): DataSeries {
         var series = new DataSeries();
         series.label = "Product #1";
-        series.color = Color3.Red();
+        series.color = new Color3(1.0, 0, 0);
 
         series.dimensions = ["Year", "Country"];
 

gui/src/3D/materials/fluentMaterial.ts

@@ -80,7 +80,7 @@ export class FluentMaterial extends PushMaterial {
     public renderHoverLight = false;
 
     /**
-     * Gets or sets the radius used to render the hover light (default is 0.15)
+     * Gets or sets the radius used to render the hover light (default is 1.0)
      */
     @serialize()
     public hoverRadius = 1.0;

src/Collisions/babylon.pickingInfo.ts

@@ -25,7 +25,7 @@
          */
         public pickedPoint: Nullable<Vector3> = null;
         /**
-         * The mesh corrisponding the the pick collision
+         * The mesh corresponding the the pick collision
          */
         public pickedMesh: Nullable<AbstractMesh> = null;
         /** (See getTextureCoordinates) The barycentric U coordinate that is used when calulating the texture coordinates of the collision.*/
@@ -48,10 +48,10 @@
         public ray: Nullable<Ray> = null;
 
         /**
-         * Gets the normal corrispodning to the face the pick collided with
+         * Gets the normal correspodning to the face the pick collided with
          * @param useWorldCoordinates If the resulting normal should be relative to the world (default: false)
          * @param useVerticesNormals If the vertices normals should be used to calculate the normal instead of the normal map
-         * @returns The normal corrispodning to the face the pick collided with
+         * @returns The normal correspodning to the face the pick collided with
          */
         public getNormal(useWorldCoordinates = false, useVerticesNormals = true): Nullable<Vector3> {
             if (!this.pickedMesh || !this.pickedMesh.isVerticesDataPresent(VertexBuffer.NormalKind)) {