Added CheckBox + minWidth/Height for Stage

src/CheckBox.js

@@ -0,0 +1,172 @@
+var InputBase = require('./InputBase'),
+    ClickEvent = require('./Interaction/ClickEvent.js'),
+    InputController = require('./Interaction/InputController');
+
+/**
+ * An UI button object
+ *
+ * @class
+ * @extends PIXI.UI.InputBase
+ * @memberof PIXI.UI
+ * @param [options.checked=false] {bool} is checked
+ * @param options.background {(PIXI.UI.SliceSprite|PIXI.UI.Sprite)} will be used as background for CheckBox
+ * @param options.checkmark {(PIXI.UI.SliceSprite|PIXI.UI.Sprite)} will be used as checkmark for CheckBox
+ * @param [options.checkgroup=null] {String} CheckGroup name
+ * @param options.value {String} mostly used along with checkgroup
+ * @param [options.tabIndex=0] {Number} input tab index
+ * @param [options.tabGroup=0] {Number|String} input tab group
+ */
+
+function CheckBox(options) {
+    InputBase.call(this, options.background.width, options.background.height, options.tabIndex || 0, options.tabGroup || 0);
+    this._checked = options.checked !== undefined ? options.checked : false;
+    this._value = options.value || "";
+    this.checkGroup = options.checkgroup || null;
+
+    this.background = options.background;
+    this.addChild(this.background);
+
+    this.checkmark = options.checkmark;
+    if (this.checkmark) {
+        this.checkmark.verticalAlign = "middle";
+        this.checkmark.horizontalAlign = "center";
+        this.checkmark.alpha = this._checked ? 1 : 0;
+        this.addChild(this.checkmark);
+    }
+
+
+
+
+    this.container.buttonMode = true;
+
+    if (this.checkGroup !== null)
+        InputController.registrerCheckGroup(this);
+
+    var self = this;
+    var keyDownEvent = function (e) {
+        if (e.which === 32) { //space
+            if (self.checkGroup !== null && self.checked)
+                return;
+            self.checked = !self.checked;
+        }
+    };
+
+    var clickEvent = new ClickEvent(this.background);
+    clickEvent.onHover = function (e) {
+        self.emit("hover", true);
+    };
+
+    clickEvent.onLeave = function (e) {
+        self.emit("hover", false);
+    };
+
+    clickEvent.onPress = function (e, isPressed) {
+        if (isPressed) {
+            self.focus();
+            e.data.originalEvent.preventDefault();
+        }
+        self.emit("press", isPressed);
+    };
+
+    clickEvent.onClick = function (e) {
+        self.emit("click");
+
+        if (self.checkGroup !== null && self.checked)
+            return;
+
+        self.checked = !self.checked;
+    };
+
+    this.change = function (val) {
+        if (this.checkmark)
+            this.checkmark.alpha = val ? 1 : 0;
+    };
+
+    //public methods
+    this.focus = function () {
+        if (!this._focused) {
+            InputBase.prototype.focus.call(this);
+            document.addEventListener("keydown", keyDownEvent, false);
+        }
+
+    };
+
+    this.blur = function () {
+        if (this._focused) {
+            InputBase.prototype.blur.call(this);
+            document.removeEventListener("keydown", keyDownEvent);
+        }
+    };
+}
+
+CheckBox.prototype = Object.create(InputBase.prototype);
+CheckBox.prototype.constructor = CheckBox;
+module.exports = CheckBox;
+
+Object.defineProperties(CheckBox.prototype, {
+    checked: {
+        get: function () {
+            return this._checked;
+        },
+        set: function (val) {
+
+
+            if (val !== this._checked) {
+
+                if (this.checkGroup !== null && val)
+                    InputController.updateCheckGroupSelected(this);
+
+
+                this.change(val);
+                this.emit("change", val);
+                this._checked = val;
+
+            }
+        }
+    },
+    value: {
+        get: function () {
+            return this._value;
+        },
+        set: function (val) {
+            this._value = val;
+            if (this.checked)
+                InputController.updateCheckGroupSelected(this);
+        }
+    },
+    selectedValue: {
+        get: function () {
+            return InputController.getCheckGroupSelectedValue(this.checkGroup);
+        },
+        set: function (val) {
+            InputController.setCheckGroupSelectedValue(this.checkGroup, val);
+        }
+    }
+});
+
+
+
+/*
+ * Features:
+ * checkbox, radio button (checkgroups)
+ * 
+ * Methods:
+ * blur()
+ * focus()
+ * change(checked) //only exposed to overwrite (if you dont want to hard toggle alpha of checkmark) 
+ * 
+ * Properties:
+ * checked: get/set checkbox checked
+ * value: get/set checkbox value
+ * selectedValue: get/set selected value for checkgroup
+ * 
+ * Events:
+ * "hover"          param: [bool]isHover (hover/leave)
+ * "press"          param: [bool]isPressed (pointerdown/pointerup)
+ * "click"
+ * "blur"
+ * "focus"
+ * "focusChanged"   param: [bool]isFocussed
+ * "change"         param: [bool]isChecked
+ *  
+ */

src/InputBase.js

@@ -16,7 +16,7 @@ function InputBase(width, height, tabIndex, tabGroup) {
     var self = this;
     this._focused = false;
     this._useTab = this._usePrev = this._useNext = true;
-
+    this.container.interactive = true;
     InputController.registrer(this, tabIndex, tabGroup);
 
 

src/Interaction/InputController.js

@@ -1,5 +1,8 @@
 var _currentItem;
 var tabGroups = {};
+var checkGroups = {};
+var checkGroupValues = {};
+
 var InputController = {
     registrer: function (item, tabIndex, tabGroup) {
         var groupName = tabGroup || "default";
@@ -9,7 +12,7 @@ var InputController = {
             items = tabGroups[groupName] = [];
 
         var i = items.indexOf(item);
-        if (i === -1){
+        if (i === -1) {
             item._tabIndex = tabIndex !== undefined ? tabIndex : -1;
             item._tabGroup = items;
             items.push(item);
@@ -50,6 +53,38 @@ var InputController = {
             if (i < 0) i = 0;
             _currentItem._tabGroup[i].focus();
         }
+    },
+    registrerCheckGroup: function (cb) {
+        var name = cb.checkGroup;
+        var group = checkGroups[name];
+        if (!group) group = checkGroups[name] = {};
+        group[cb.value] = cb;
+
+        if (cb.checked)
+            checkGroupValues[name] = cb.value;
+    },
+    updateCheckGroupSelected: function (cb) {
+        var group = checkGroups[cb.checkGroup];
+        for (var val in group) {
+            var b = group[val];
+            if (b !== cb)
+                b.checked = false;
+        }
+        checkGroupValues[cb.checkGroup] = cb.value;
+    },
+    getCheckGroupSelectedValue: function (name) {
+        if (checkGroupValues[name])
+            return checkGroupValues[name];
+        return "";
+    },
+    setCheckGroupSelectedValue: function (name, val) {
+        var group = checkGroups[name];
+        if (group) {
+            var cb = group[val];
+            if (cb) {
+                cb.checked = true;
+            }
+        }
     }
 };
 

src/Stage.js

@@ -13,6 +13,9 @@ function Stage(width, height) {
     PIXI.Container.call(this);
     this.__width = width;
     this.__height = height;
+    this.minWidth = 0;
+    this.minHeight = 0;
+
     this.UIChildren = [];
     this.stage = this;
     this.interactive = true;
@@ -56,15 +59,44 @@ Stage.prototype.removeChild = function (UIObject) {
             this.UIChildren.splice(index, 1);
             UIObject.parent = null;
         }
-        
+
     }
 };
 
 Stage.prototype.resize = function (width, height) {
     if (!isNaN(height)) this.__height = height;
     if (!isNaN(width)) this.__width = width;
+
+    if (this.minWidth || this.minHeight) {
+        var rx = 1,
+            ry = 1;
+
+        if (width && width < this.minWidth) {
+            rx = this.minWidth / width;
+        }
+
+        if (height && height < this.minHeight) {
+            ry = this.minHeight / height;
+        }
+
+        if (rx > ry && rx > 1) {
+            this.scale.set(1 / rx);
+            this.__height *= rx;
+            this.__width *= rx;
+        }
+        else if (ry > 1) {
+            this.scale.set(1 / ry);
+            this.__width *= ry;
+            this.__height *= ry;
+        }
+        else if (this.scale.x !== 1) {
+            this.scale.set(1);
+        }
+    }
+
     this.hitArea.width = this.__width;
     this.hitArea.height = this.__height;
+
     for (var i = 0; i < this.UIChildren.length; i++)
         this.UIChildren[i].updatesettings(true, false);
 };

src/TextInput.js

@@ -324,7 +324,6 @@ function TextInput(options) {
     var _sp = new PIXI.Point();
     var scrollToPosition = function (pos) {
         _sp.copy(pos);
-        console.log("y", _sp.y, paddingTop);
         if (multiLine && _sp.y >= lineHeight)
             _sp.y += lineHeight;
         textContainer.focusPosition(_sp);
@@ -642,7 +641,7 @@ function TextInput(options) {
             _pui_tempInput.addEventListener('textInput', inputEvent, false);
 
             setTimeout(function () {
-                if (!caret.visible && !self.selection.visible)
+                if (!caret.visible && !self.selection.visible && !multiLine)
                     self.setCaretIndex(chars.length);
             }, 0);
 
@@ -838,6 +837,7 @@ Object.defineProperties(TextInput.prototype, {
  * Events:
  * "change"
  * "blur"
+ * "blur"
  * "focus"
  * "focusChanged" param: [bool]focus
  *  

src/UI.js

@@ -10,6 +10,7 @@
     ScrollBar: require('./ScrollBar'),
     Text: require('./Text'),
     TextInput: require('./TextInput'),
+    CheckBox: require('./CheckBox'),
     MathHelper: require('./MathHelper'),
     Tween: require('./Tween'),
     Ease: require('./Ease/Ease'),