Babylon.js/gui/src/controls/button.ts

/// <reference path="../../../dist/preview release/babylon.d.ts"/>

module BABYLON.GUI {
    export class Button extends Rectangle {    
        public pointerEnterAnimation: () => void;
        public pointerOutAnimation: () => void;
        public pointerDownAnimation: () => void;
        public pointerUpAnimation: () => void;

        constructor(public name: string) {
            super(name);
            this.thickness = 1;
            this.isPointerBlocker = true;

            this.pointerEnterAnimation = () => {
                this.alpha -= 0.1;
            }

            this.pointerOutAnimation = () => {
                this.alpha += 0.1;
            }    

            this.pointerDownAnimation = () => {
                this.scaleX -= 0.05;
                this.scaleY -= 0.05;
            }

            this.pointerUpAnimation = () => {
                this.scaleX += 0.05;
                this.scaleY += 0.05;
            }                      
        }

        // While being a container, the button behaves like a control.
        public _processPicking(x: number, y: number, type: number): boolean {
            if (!this.contains(x, y)) {
                return false;
            }

            this._processObservables(type);

            return true;
        }

        protected _onPointerEnter(): void {
            if (this.pointerEnterAnimation) {
                this.pointerEnterAnimation();
            }
            super._onPointerEnter();
        }

        protected _onPointerOut(): void {
            if (this.pointerOutAnimation) {
                this.pointerOutAnimation();
            }
            super._onPointerOut();
        }

        protected _onPointerDown(): void {
            if (this.pointerDownAnimation) {
                this.pointerDownAnimation();
            }

            super._onPointerDown();
        }

        protected _onPointerUp (): void {
            if (this.pointerUpAnimation) {
                this.pointerUpAnimation();
            }

            super._onPointerUp();
        }        

        // Statics
        public static CreateImageButton(name: string, text: string, imageUrl: string): Button {
            var result = new Button(name);

            // Adding text
            var textBlock = new BABYLON.GUI.TextBlock(name + "_button", text);
            textBlock.textWrapping = true;
            textBlock.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
            textBlock.marginLeft = "20%";
            result.addControl(textBlock);   

            // Adding image
            var iconImage = new BABYLON.GUI.Image(name + "_icon", imageUrl);
            iconImage.width = "20%";
            iconImage.stretch = BABYLON.GUI.Image.STRETCH_UNIFORM;
            iconImage.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
            result.addControl(iconImage);            

            return result;
        }

        public static CreateImageOnlyButton(name: string, imageUrl: string): Button {
            var result = new Button(name);

            // Adding image
            var iconImage = new BABYLON.GUI.Image(name + "_icon", imageUrl);
            iconImage.stretch = BABYLON.GUI.Image.STRETCH_FILL;
            iconImage.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
            result.addControl(iconImage);            

            return result;
        }

        public static CreateSimpleButton(name: string, text: string): Button {
            var result = new Button(name);

            // Adding text
            var textBlock = new BABYLON.GUI.TextBlock(name + "_button", text);
            textBlock.textWrapping = true;
            textBlock.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
            result.addControl(textBlock);           

            return result;
        }
    }    
}