Interaction, Slider, ScrollBars and multitouch(drag) + misc changes

src/Container.js

@@ -11,18 +11,17 @@ var UIBase = require('./UIBase');
  */
 function Container(width, height) {
     UIBase.call(this, width, height);
-    this.container.hitArea = new PIXI.Rectangle(0,0,width,height);
-
-    this.update = function () {
-        this.container.hitArea.width = this.width;
-        this.container.hitArea.height = this.height;
-
-    }
+    this.container.hitArea = new PIXI.Rectangle(0, 0, width, height);
 }
 
 
-
 Container.prototype = Object.create(UIBase.prototype);
 Container.prototype.constructor = Container;
 module.exports = Container;
 
+
+Container.prototype.update = function () {
+    this.container.hitArea.width = this._width;
+    this.container.hitArea.height = this._height;
+};
+

src/Ease/Ease.js

@@ -0,0 +1,136 @@
+var Ease = {},
+    EaseBase = require('./EaseBase'),
+    ExponentialEase = require('./ExponentialEase'),
+    HALF_PI = Math.PI * 0.5;
+
+function create(fn) {
+    var e = Object.create(EaseBase.prototype);
+    e.getPosition = fn;
+    return e;
+}
+
+
+//Liear
+Ease.Linear = new EaseBase();
+
+//Exponetial Eases
+function wrapEase(easeInFunction, easeOutFunction, easeInOutFunction) {
+    return {
+        easeIn: easeInFunction,
+        easeOut: easeOutFunction,
+        easeInOut: easeInOutFunction
+    };
+}
+
+Ease.Power0 = {
+    "easeNone" : Ease.Linear,
+};
+
+Ease.Power1 = Ease.Quad = wrapEase(
+    new ExponentialEase(1, 1, 0),
+    new ExponentialEase(1, 0, 1),
+    new ExponentialEase(1, 1, 1));
+
+Ease.Power2 = Ease.Cubic = wrapEase(
+    new ExponentialEase(2, 1, 0),
+    new ExponentialEase(2, 0, 1),
+    new ExponentialEase(2, 1, 1));
+
+Ease.Power3 = Ease.Quart = wrapEase(
+    new ExponentialEase(3, 1, 0),
+    new ExponentialEase(3, 0, 1),
+    new ExponentialEase(3, 1, 1));
+
+Ease.Power4 = Ease.Quint = wrapEase(
+    new ExponentialEase(4, 1, 0),
+    new ExponentialEase(4, 0, 1),
+    new ExponentialEase(4, 1, 1));
+
+
+//Bounce
+Ease.Bounce = {
+    "BounceIn": create(function (p) {
+        if ((p = 1 - p) < 1 / 2.75) {
+            return 1 - (7.5625 * p * p);
+        } else if (p < 2 / 2.75) {
+            return 1 - (7.5625 * (p -= 1.5 / 2.75) * p + 0.75);
+        } else if (p < 2.5 / 2.75) {
+            return 1 - (7.5625 * (p -= 2.25 / 2.75) * p + 0.9375);
+        }
+        return 1 - (7.5625 * (p -= 2.625 / 2.75) * p + 0.984375);
+    }),
+    "BounceOut": create(function (p) {
+        if (p < 1 / 2.75) {
+            return 7.5625 * p * p;
+        } else if (p < 2 / 2.75) {
+            return 7.5625 * (p -= 1.5 / 2.75) * p + 0.75;
+        } else if (p < 2.5 / 2.75) {
+            return 7.5625 * (p -= 2.25 / 2.75) * p + 0.9375;
+        }
+        return 7.5625 * (p -= 2.625 / 2.75) * p + 0.984375;
+    }),
+    "BounceInOut": create(function (p) {
+        var invert = (p < 0.5);
+        if (invert) {
+            p = 1 - (p * 2);
+        } else {
+            p = (p * 2) - 1;
+        }
+        if (p < 1 / 2.75) {
+            p = 7.5625 * p * p;
+        } else if (p < 2 / 2.75) {
+            p = 7.5625 * (p -= 1.5 / 2.75) * p + 0.75;
+        } else if (p < 2.5 / 2.75) {
+            p = 7.5625 * (p -= 2.25 / 2.75) * p + 0.9375;
+        } else {
+            p = 7.5625 * (p -= 2.625 / 2.75) * p + 0.984375;
+        }
+        return invert ? (1 - p) * 0.5 : p * 0.5 + 0.5;
+    })
+};
+
+//Circ
+Ease.Circ = {
+    "CircIn": create(function (p) {
+        return -(Math.sqrt(1 - (p * p)) - 1);
+    }),
+    "CircOut": create(function (p) {
+        return Math.sqrt(1 - (p = p - 1) * p);
+    }),
+    "CircInOut": create(function (p) {
+        return ((p *= 2) < 1) ? -0.5 * (Math.sqrt(1 - p * p) - 1) : 0.5 * (Math.sqrt(1 - (p -= 2) * p) + 1);
+    })
+};
+
+
+//Expo
+Ease.Expo = {
+    "ExpoIn": create(function (p) {
+        return Math.pow(2, 10 * (p - 1)) - 0.001;
+    }),
+    "ExpoOut": create(function (p) {
+        return 1 - Math.pow(2, -10 * p);
+    }),
+    "ExpoInOut": create(function (p) {
+        return ((p *= 2) < 1) ? 0.5 * Math.pow(2, 10 * (p - 1)) : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
+    })
+};
+
+
+//Sine
+Ease.Sine = {
+    "SineIn": create(function (p) {
+        return -Math.cos(p * HALF_PI) + 1;
+    }),
+    "SineOut": create(function (p) {
+        return Math.sin(p * HALF_PI);
+    }),
+    "SineInOut": create(function (p) {
+        return -0.5 * (Math.cos(Math.PI * p) - 1);
+    })
+};
+
+
+module.exports = Ease;
+
+

src/Ease/EaseBase.js

@@ -0,0 +1,11 @@
+function EaseBase() {
+    this.getPosition = function (p) {
+        return p;
+    };
+}
+
+EaseBase.prototype.constructor = EaseBase;
+module.exports = EaseBase;
+
+
+

src/Ease/ExponentialEase.js

@@ -0,0 +1,26 @@
+var EaseBase = require('./EaseBase');
+
+function ExponentialEase(power, easeIn, easeOut) {
+    var pow = power;
+    var t = easeIn && easeOut ? 3 : easeOut ? 1 : 2;
+    this.getPosition = function (p) {
+        var r = (t === 1) ? 1 - p : (t === 2) ? p : (p < 0.5) ? p * 2 : (1 - p) * 2;
+        if (pow === 1) {
+            r *= r;
+        } else if (pow === 2) {
+            r *= r * r;
+        } else if (pow === 3) {
+            r *= r * r * r;
+        } else if (pow === 4) {
+            r *= r * r * r * r;
+        }
+        return (t === 1) ? 1 - r : (t === 2) ? r : (p < 0.5) ? r / 2 : 1 - (r / 2);
+    };
+}
+
+ExponentialEase.prototype = Object.create(EaseBase.prototype);
+ExponentialEase.prototype.constructor = ExponentialEase;
+module.exports = ExponentialEase;
+
+
+

src/Interaction/ClickEvent.js

@@ -0,0 +1,76 @@
+var ClickEvent = function (obj) {
+    var bound = false,
+        self = this;
+
+    obj.container.interactive = true;
+
+    var _onMouseDown = function (event) {
+        if (!bound) {
+            obj.container.on('mouseup', _onMouseUp);
+            obj.container.on('mouseupoutside', _onMouseUpOutside);
+            obj.container.on('touchend', _onMouseUp);
+            obj.container.on('touchendoutside', _onMouseUpOutside);
+            bound = true;
+        }
+        self.onPress.call(obj, event, true);
+    };
+
+    var _mouseUpAll = function (event) {
+        if (bound) {
+            obj.container.removeListener('mouseup', _onMouseUp);
+            obj.container.removeListener('mouseupoutside', _onMouseUpOutside);
+            obj.container.removeListener('touchend', _onMouseUp);
+            obj.container.removeListener('touchendoutside', _onMouseUpOutside);
+            bound = false;
+        }
+        self.onPress.call(obj, event, false);
+    };
+
+    var _onMouseUp = function (event) {
+        _mouseUpAll(event);
+        self.onClick.call(obj, event);
+    };
+
+    var _onMouseUpOutside = function (event) {
+        _mouseUpAll(event);
+    };
+
+    var _onMouseOver = function (event) {
+        self.onHover.call(obj, event);
+    };
+
+    var _onMouseOut = function (event) {
+        self.onLeave.call(obj, event);
+    };
+
+    this.stopEvent = function () {
+        if (bound) {
+            obj.container.removeListener('mouseup', _onMouseUp);
+            obj.container.removeListener('mouseupoutside', _onMouseUpOutside);
+            obj.container.removeListener('touchend', _onMouseUp);
+            obj.container.removeListener('touchendoutside', _onMouseUpOutside);
+            bound = false;
+        }
+        obj.container.removeListener('mousedown', _onMouseDown);
+        obj.container.removeListener('touchstart', _onMouseDown);
+        obj.container.removeListener('mouseover', _onMouseOver);
+        obj.container.removeListener('mouseout', _onMouseOut);
+    };
+
+    this.startEvent = function () {
+        obj.container.on('mousedown', _onMouseDown);
+        obj.container.on('touchstart', _onMouseDown);
+        obj.container.on('mouseover', _onMouseOver);
+        obj.container.on('mouseout', _onMouseOut);
+    };
+
+    this.startEvent();
+};
+
+ClickEvent.prototype.constructor = ClickEvent;
+module.exports = ClickEvent;
+
+ClickEvent.prototype.onHover = function (event) { };
+ClickEvent.prototype.onLeave = function (event) { };
+ClickEvent.prototype.onPress = function (event, isPressed) { };
+ClickEvent.prototype.onClick = function (event) { };

src/Interaction/DragDropController.js

@@ -0,0 +1,52 @@
+var _items = [];
+var DragDropController = {
+    add: function (item, event) {
+        item._dragDropEventId = event.data.identifier;
+        if (_items.indexOf(item) === -1) {
+            _items.push(item);
+            return true;
+        }
+        return false;
+    },
+    getItem: function (object) {
+        var item = null, index;
+        for (var i = 0; i < _items.length; i++) {
+            if (_items[i] === object) {
+                item = _items[i];
+                index = i;
+                break;
+            }
+        }
+
+        if (item !== null) {
+            _items.splice(index, 1);
+            return item;
+        }
+        else {
+            return false;
+        }
+    },
+    getEventItem: function (event, group) {
+        var item = null, index, id = event.data.identifier;
+        for (var i = 0; i < _items.length; i++) {
+            if (_items[i]._dragDropEventId === id) {
+                if (group !== _items[i].dragGroup) {
+                    return false;
+                }
+                item = _items[i];
+                index = i;
+                break;
+            }
+        }
+
+        if (item !== null) {
+            _items.splice(index, 1);
+            return item;
+        }
+        else {
+            return false;
+        }
+    }
+};
+
+module.exports = DragDropController;