ADT: interactions

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

@@ -103,6 +103,7 @@ declare module BABYLON.GUI {
         _link(root: Container, host: AdvancedDynamicTexture): void;
         protected applyStates(context: CanvasRenderingContext2D): void;
         protected _processMeasures(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+        protected _clip(context: CanvasRenderingContext2D): void;
         protected _measure(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
         protected _computeAlignment(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
         protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
@@ -141,6 +142,7 @@ declare module BABYLON.GUI {
         _reOrderControl(control: Control): void;
         protected _localDraw(context: CanvasRenderingContext2D): void;
         _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+        protected _clipForChildren(context: CanvasRenderingContext2D): void;
         protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
     }
 }
@@ -151,11 +153,15 @@ declare module BABYLON.GUI {
         name: string;
         private _thickness;
         private _background;
+        private _cornerRadius;
         thickness: number;
+        cornerRadius: number;
         background: string;
         constructor(name: string);
         protected _localDraw(context: CanvasRenderingContext2D): void;
         protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+        private _drawRoundedRect(context, offset?);
+        protected _clipForChildren(context: CanvasRenderingContext2D): void;
     }
 }
 

dist/preview release/gui/babylon.gui.js

@@ -509,14 +509,23 @@ var BABYLON;
                     this._currentMeasure.copyFrom(parentMeasure);
                     this._measure(parentMeasure, context);
                     this._computeAlignment(parentMeasure, context);
+                    // Convert to int values
+                    this._currentMeasure.left = this._currentMeasure.left | 0;
+                    this._currentMeasure.top = this._currentMeasure.top | 0;
+                    this._currentMeasure.width = this._currentMeasure.width | 0;
+                    this._currentMeasure.height = this._currentMeasure.height | 0;
+                    // Let children add more features
                     this._additionalProcessing(parentMeasure, context);
                     this._isDirty = false;
                     this._cachedParentMeasure.copyFrom(parentMeasure);
                 }
                 // Clip
+                this._clip(context);
+                context.clip();
+            };
+            Control.prototype._clip = function (context) {
                 context.beginPath();
                 context.rect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
-                context.clip();
             };
             Control.prototype._measure = function (parentMeasure, context) {
                 // Width / Height
@@ -770,12 +779,16 @@ var BABYLON;
                 _super.prototype._processMeasures.call(this, parentMeasure, context);
                 this.applyStates(context);
                 this._localDraw(context);
+                this._clipForChildren(context);
                 for (var _i = 0, _a = this._children; _i < _a.length; _i++) {
                     var child = _a[_i];
                     child._draw(this._measureForChildren, context);
                 }
                 context.restore();
             };
+            Container.prototype._clipForChildren = function (context) {
+                // DO nothing
+            };
             Container.prototype._additionalProcessing = function (parentMeasure, context) {
                 _super.prototype._additionalProcessing.call(this, parentMeasure, context);
                 this._measureForChildren.copyFrom(this._currentMeasure);
@@ -809,6 +822,7 @@ var BABYLON;
                 var _this = _super.call(this, name) || this;
                 _this.name = name;
                 _this._thickness = 1;
+                _this._cornerRadius = 0;
                 return _this;
             }
             Object.defineProperty(Rectangle.prototype, "thickness", {
@@ -825,6 +839,23 @@ var BABYLON;
                 enumerable: true,
                 configurable: true
             });
+            Object.defineProperty(Rectangle.prototype, "cornerRadius", {
+                get: function () {
+                    return this._cornerRadius;
+                },
+                set: function (value) {
+                    if (value < 0) {
+                        value = 0;
+                    }
+                    if (this._cornerRadius === value) {
+                        return;
+                    }
+                    this._cornerRadius = value;
+                    this._markAsDirty();
+                },
+                enumerable: true,
+                configurable: true
+            });
             Object.defineProperty(Rectangle.prototype, "background", {
                 get: function () {
                     return this._background;
@@ -843,14 +874,26 @@ var BABYLON;
                 context.save();
                 if (this._background) {
                     context.fillStyle = this._background;
-                    context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
+                    if (this._cornerRadius) {
+                        this._drawRoundedRect(context, this._thickness / 2);
+                        context.fill();
+                    }
+                    else {
+                        context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
+                    }
                 }
                 if (this._thickness) {
                     if (this.color) {
                         context.strokeStyle = this.color;
                     }
                     context.lineWidth = this._thickness;
-                    context.strokeRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
+                    if (this._cornerRadius) {
+                        this._drawRoundedRect(context, this._thickness / 2);
+                        context.stroke();
+                    }
+                    else {
+                        context.strokeRect(this._currentMeasure.left + this._thickness / 2, this._currentMeasure.top + this._thickness / 2, this._currentMeasure.width - this._thickness, this._currentMeasure.height - this._thickness);
+                    }
                 }
                 context.restore();
             };
@@ -861,6 +904,30 @@ var BABYLON;
                 this._measureForChildren.left += this._thickness;
                 this._measureForChildren.top += this._thickness;
             };
+            Rectangle.prototype._drawRoundedRect = function (context, offset) {
+                if (offset === void 0) { offset = 0; }
+                var x = this._currentMeasure.left + offset;
+                var y = this._currentMeasure.top + offset;
+                var width = this._currentMeasure.width - offset * 2;
+                var height = this._currentMeasure.height - offset * 2;
+                context.beginPath();
+                context.moveTo(x + this._cornerRadius, y);
+                context.lineTo(x + width - this._cornerRadius, y);
+                context.quadraticCurveTo(x + width, y, x + width, y + this._cornerRadius);
+                context.lineTo(x + width, y + height - this._cornerRadius);
+                context.quadraticCurveTo(x + width, y + height, x + width - this._cornerRadius, y + height);
+                context.lineTo(x + this._cornerRadius, y + height);
+                context.quadraticCurveTo(x, y + height, x, y + height - this._cornerRadius);
+                context.lineTo(x, y + this._cornerRadius);
+                context.quadraticCurveTo(x, y, x + this._cornerRadius, y);
+                context.closePath();
+            };
+            Rectangle.prototype._clipForChildren = function (context) {
+                if (this._cornerRadius) {
+                    this._drawRoundedRect(context, this._thickness);
+                    context.clip();
+                }
+            };
             return Rectangle;
         }(GUI.Container));
         GUI.Rectangle = Rectangle;

gui/readme.md

@@ -15,6 +15,6 @@ The Babylon.js GUI library is an extension you can use to generate interactive u
 ==> ideas
 * lines (with cap)
 * ellipse
-* rounded rect
 * button
-* interactions
+* interactions
+* rotate / scale

gui/src/advancedDynamicTexture.ts

@@ -5,8 +5,10 @@ module BABYLON.GUI {
         private _isDirty = false;
         private _renderObserver: Observer<Scene>;
         private _resizeObserver: Observer<Engine>;
+        private _pointerMoveObserver: Observer<PointerInfo>;
         private _background: string;
         private _rootContainer = new Container("root");
+        public _lastControlOver: Control;
 
         public get background(): string {
             return this._background;
@@ -58,6 +60,10 @@ module BABYLON.GUI {
                 this.getScene().getEngine().onResizeObservable.remove(this._resizeObserver);
             }
 
+            if (this._pointerMoveObserver) {
+                this.getScene().onPointerObservable.remove(this._pointerMoveObserver);
+            }
+
             super.dispose();
         }
 
@@ -104,6 +110,32 @@ module BABYLON.GUI {
             this._rootContainer._draw(measure, context);
         }
 
+        private _doPicking(x: number, y: number, type: number): void {
+            if (!this._rootContainer._processPicking(x, y, type)) {
+
+                if (type === BABYLON.PointerEventTypes.POINTERMOVE) {
+                    if (this._lastControlOver && this._lastControlOver.onPointerOutObservable.hasObservers()) {
+                        this._lastControlOver.onPointerOutObservable.notifyObservers(this._lastControlOver);
+                    }
+                    
+                    this._lastControlOver = null;
+                }
+            }
+        }
+
+        public attach(): void {
+            var scene = this.getScene();
+            this._pointerMoveObserver = scene.onPointerObservable.add((pi, state) => {
+                if (pi.type !== BABYLON.PointerEventTypes.POINTERMOVE 
+                    && pi.type !== BABYLON.PointerEventTypes.POINTERUP
+                    && pi.type !== BABYLON.PointerEventTypes.POINTERDOWN) {
+                    return;
+                }
+
+                this._doPicking(scene.pointerX, scene.pointerY, pi.type);
+            });
+        }
+
         // Statics
         public static CreateForMesh(mesh: AbstractMesh, width = 1024, height = 1024): AdvancedDynamicTexture {
             var result = new AdvancedDynamicTexture(mesh.name + " AdvancedDynamicTexture", width, height, mesh.getScene(), true, Texture.TRILINEAR_SAMPLINGMODE);
@@ -125,6 +157,9 @@ module BABYLON.GUI {
             var layer = new BABYLON.Layer(name + "_layer", null, scene, !foreground);
             layer.texture = result;
 
+            // Attach
+            result.attach();
+
             return result;
         }
     }    

gui/src/controls/container.ts

@@ -68,6 +68,22 @@ module BABYLON.GUI {
             context.restore();
         }
 
+        public _processPicking(x: number, y: number, type: number): boolean {
+            if (!super._contains(x, y)) {
+                return false;
+            }
+
+            // Checking backwards to pick closest first
+            for (var index = this._children.length - 1; index >= 0; index--) {
+                var child = this._children[index];
+                if (child._processPicking(x, y, type)) {
+                    return true;
+                }
+            }
+
+            return this._processObservables(type);
+        }
+
         protected _clipForChildren(context: CanvasRenderingContext2D): void {
             // DO nothing
         }

gui/src/controls/control.ts

@@ -26,6 +26,31 @@ module BABYLON.GUI {
         private _top = new ValueAndUnit(0);
         
         // Properties
+
+        /**
+        * An event triggered when the pointer move over the control.
+        * @type {BABYLON.Observable}
+        */
+        public onPointerMoveObservable = new Observable<Control>();
+
+        /**
+        * An event triggered when the pointer move out of the control.
+        * @type {BABYLON.Observable}
+        */
+        public onPointerOutObservable = new Observable<Control>();        
+
+        /**
+        * An event triggered when the pointer taps the control
+        * @type {BABYLON.Observable}
+        */
+        public onPointerDownObservable = new Observable<Control>();     
+
+        /**
+        * An event triggered when pointer up
+        * @type {BABYLON.Observable}
+        */
+        public onPointerUpObservable = new Observable<Control>();     
+
         public get horizontalAlignment(): number {
             return this._horizontalAlignment;
         }
@@ -357,6 +382,59 @@ module BABYLON.GUI {
             // Do nothing
         }
 
+        protected _contains(x: number, y: number) : boolean {
+            if (x < this._currentMeasure.left) {
+                return false;
+            }
+
+            if (x > this._currentMeasure.left + this._currentMeasure.width) {
+                return false;
+            }
+
+            if (y < this._currentMeasure.top) {
+                return false;
+            }
+
+            if (y > this._currentMeasure.top + this._currentMeasure.height) {
+                return false;
+            } 
+
+            return true;
+        }
+
+        public _processPicking(x: number, y: number, type: number): boolean {
+            if (!this._contains(x, y)) {
+                return false;
+            }
+
+            return this._processObservables(type);
+        }
+
+        protected _processObservables(type: number): boolean {
+            if (type === BABYLON.PointerEventTypes.POINTERMOVE && this.onPointerMoveObservable.hasObservers()) {
+                this.onPointerMoveObservable.notifyObservers(this);
+
+                var previousControlOver = this._host._lastControlOver;
+                if (previousControlOver && previousControlOver !== this && previousControlOver.onPointerOutObservable.hasObservers()) {
+                    previousControlOver.onPointerOutObservable.notifyObservers(previousControlOver);
+                }
+                this._host._lastControlOver = this;
+                return true;
+            }
+
+            if (type === BABYLON.PointerEventTypes.POINTERDOWN && this.onPointerDownObservable.hasObservers()) {
+                this.onPointerDownObservable.notifyObservers(this);
+                return true;
+            }
+
+            if (type === BABYLON.PointerEventTypes.POINTERUP && this.onPointerUpObservable.hasObservers()) {
+                this.onPointerUpObservable.notifyObservers(this);
+                return true;
+            }
+        
+            return false;
+        }
+
         private _prepareFont() {
             if (!this._fontFamily) {
                 return;

gui/src/controls/rectangle.ts

@@ -100,16 +100,18 @@ module BABYLON.GUI {
             var width = this._currentMeasure.width - offset * 2;
             var height = this._currentMeasure.height - offset * 2;
 
+            var radius = Math.min(height / 2 - 2, Math.min(width / 2 - 2, this._cornerRadius));
+
             context.beginPath();
-            context.moveTo(x + this._cornerRadius, y);
-            context.lineTo(x + width - this._cornerRadius, y);
-            context.quadraticCurveTo(x + width, y, x + width, y + this._cornerRadius);
-            context.lineTo(x + width, y + height - this._cornerRadius);
-            context.quadraticCurveTo(x + width, y + height, x + width - this._cornerRadius, y + height);
-            context.lineTo(x + this._cornerRadius, y + height);
-            context.quadraticCurveTo(x, y + height, x, y + height - this._cornerRadius);
-            context.lineTo(x, y + this._cornerRadius);
-            context.quadraticCurveTo(x, y, x + this._cornerRadius, y);
+            context.moveTo(x + radius, y);
+            context.lineTo(x + width - radius, y);
+            context.quadraticCurveTo(x + width, y, x + width, y + radius);
+            context.lineTo(x + width, y + height - radius);
+            context.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+            context.lineTo(x + radius, y + height);
+            context.quadraticCurveTo(x, y + height, x, y + height - radius);
+            context.lineTo(x, y + radius);
+            context.quadraticCurveTo(x, y, x + radius, y);
             context.closePath();
         }