Fix #4825

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

@@ -156,6 +156,8 @@ declare module BABYLON.GUI {
                 */
             getProjectedPosition(position: BABYLON.Vector3, worldMatrix: BABYLON.Matrix): BABYLON.Vector2;
             /** @hidden */
+            _changeCursor(cursor: string): void;
+            /** @hidden */
             _cleanControlAfterRemovalFromList(list: {
                     [pointerId: number]: Control;
             }, control: Control): void;
@@ -849,6 +851,8 @@ declare module BABYLON.GUI {
             shadowBlur: number;
             /** Gets or sets a value indicating the color of the shadow (black by default ie. "#000") */
             shadowColor: string;
+            /** Gets or sets the cursor to use when the control is hovered */
+            hoverCursor: string;
             /** @hidden */
             protected _linkOffsetX: ValueAndUnit;
             /** @hidden */
@@ -2443,7 +2447,7 @@ declare module BABYLON.GUI {
             /** BABYLON.Observable raised when a refresh was done */
             onRefreshObservable: BABYLON.Observable<Chart>;
             /** BABYLON.Observable raised when a new element is created */
-            onElementCreatedObservable: BABYLON.Observable<BABYLON.Mesh>;
+            onElementCreatedObservable: BABYLON.Observable<BABYLON.AbstractMesh>;
             /**
                 * BABYLON.Observable raised when the point picked by the pointer events changed
                 */

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

@@ -199,6 +199,8 @@ declare module 'babylonjs-gui/2D/advancedDynamicTexture' {
                 */
             getProjectedPosition(position: Vector3, worldMatrix: Matrix): Vector2;
             /** @hidden */
+            _changeCursor(cursor: string): void;
+            /** @hidden */
             _cleanControlAfterRemovalFromList(list: {
                     [pointerId: number]: Control;
             }, control: Control): void;
@@ -957,6 +959,8 @@ declare module 'babylonjs-gui/2D/controls/control' {
             shadowBlur: number;
             /** Gets or sets a value indicating the color of the shadow (black by default ie. "#000") */
             shadowColor: string;
+            /** Gets or sets the cursor to use when the control is hovered */
+            hoverCursor: string;
             /** @hidden */
             protected _linkOffsetX: ValueAndUnit;
             /** @hidden */
@@ -2660,7 +2664,7 @@ declare module 'babylonjs-gui/3D/charting/chart' {
             /** Observable raised when a refresh was done */
             onRefreshObservable: Observable<Chart>;
             /** Observable raised when a new element is created */
-            onElementCreatedObservable: Observable<Mesh>;
+            onElementCreatedObservable: Observable<AbstractMesh>;
             /**
                 * Observable raised when the point picked by the pointer events changed
                 */
@@ -2969,6 +2973,8 @@ declare module BABYLON.GUI {
                 */
             getProjectedPosition(position: BABYLON.Vector3, worldMatrix: BABYLON.Matrix): BABYLON.Vector2;
             /** @hidden */
+            _changeCursor(cursor: string): void;
+            /** @hidden */
             _cleanControlAfterRemovalFromList(list: {
                     [pointerId: number]: Control;
             }, control: Control): void;
@@ -3662,6 +3668,8 @@ declare module BABYLON.GUI {
             shadowBlur: number;
             /** Gets or sets a value indicating the color of the shadow (black by default ie. "#000") */
             shadowColor: string;
+            /** Gets or sets the cursor to use when the control is hovered */
+            hoverCursor: string;
             /** @hidden */
             protected _linkOffsetX: ValueAndUnit;
             /** @hidden */
@@ -5256,7 +5264,7 @@ declare module BABYLON.GUI {
             /** BABYLON.Observable raised when a refresh was done */
             onRefreshObservable: BABYLON.Observable<Chart>;
             /** BABYLON.Observable raised when a new element is created */
-            onElementCreatedObservable: BABYLON.Observable<BABYLON.Mesh>;
+            onElementCreatedObservable: BABYLON.Observable<BABYLON.AbstractMesh>;
             /**
                 * BABYLON.Observable raised when the point picked by the pointer events changed
                 */

gui/src/2D/advancedDynamicTexture.ts

@@ -61,6 +61,7 @@ export class AdvancedDynamicTexture extends DynamicTexture {
     private _focusedControl: Nullable<IFocusableControl>;
     private _blockNextFocusCheck = false;
     private _renderScale = 1;
+    private _rootCanvas: Nullable<HTMLCanvasElement>;
 
     /**
      * Gets or sets a boolean defining if alpha is stored as premultiplied
@@ -247,6 +248,8 @@ export class AdvancedDynamicTexture extends DynamicTexture {
             return;
         }
 
+        this._rootCanvas = scene.getEngine()!.getRenderingCanvas()!;
+
         this._renderObserver = scene.onBeforeCameraRenderObservable.add((camera: Camera) => this._checkUpdate(camera));
         this._preKeyboardObserver = scene.onPreKeyboardObservable.add(info => {
             if (!this._focusedControl) {
@@ -346,6 +349,8 @@ export class AdvancedDynamicTexture extends DynamicTexture {
             return;
         }
 
+        this._rootCanvas = null;
+
         scene.onBeforeCameraRenderObservable.remove(this._renderObserver);
 
         if (this._resizeObserver) {
@@ -516,6 +521,13 @@ export class AdvancedDynamicTexture extends DynamicTexture {
         this._rootContainer._draw(measure, context);
     }
 
+    /** @hidden */
+    public _changeCursor(cursor: string) {
+        if (this._rootCanvas) {
+            this._rootCanvas.style.cursor = cursor;
+        }
+    }
+
     private _doPicking(x: number, y: number, type: number, pointerId: number, buttonIndex: number): void {
         var scene = this.getScene();
 
@@ -537,7 +549,7 @@ export class AdvancedDynamicTexture extends DynamicTexture {
         }
 
         if (!this._rootContainer._processPicking(x, y, type, pointerId, buttonIndex)) {
-
+            this._changeCursor("");
             if (type === PointerEventTypes.POINTERMOVE) {
                 if (this._lastControlOver[pointerId]) {
                     this._lastControlOver[pointerId]._onPointerOut(this._lastControlOver[pointerId]);

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

@@ -320,6 +320,9 @@ export class Container extends Control {
         for (var index = this._children.length - 1; index >= 0; index--) {
             var child = this._children[index];
             if (child._processPicking(x, y, type, pointerId, buttonIndex)) {
+                if (child.hoverCursor) {
+                    this._host._changeCursor(child.hoverCursor);
+                }
                 return true;
             }
         }

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

@@ -96,6 +96,9 @@ export class Control {
     /** Gets or sets a value indicating the color of the shadow (black by default ie. "#000") */
     public shadowColor = '#000';
 
+    /** Gets or sets the cursor to use when the control is hovered */
+    public hoverCursor = "";
+
     /** @hidden */
     protected _linkOffsetX = new ValueAndUnit(0);
     /** @hidden */