From aac403f64084eddb57e8d0dbf17e5c5f57fefc0a Mon Sep 17 00:00:00 2001 From: Nicolai Mortensen Date: Thu, 17 Nov 2016 06:05:12 +0100 Subject: [PATCH] Interaction, Slider, ScrollBars and multitouch(drag) + misc changes --- bin/pixi-ui.js | 2678 +- bin/pixi-ui.js.map | 2 +- bin/pixi-ui.min.js | 5 +- bin/pixi-ui.min.js.map | 2 +- src/Container.js | 15 +- src/Ease/Ease.js | 136 + src/Ease/EaseBase.js | 11 + src/Ease/ExponentialEase.js | 26 + src/Interaction/ClickEvent.js | 76 + src/Interaction/DragDropController.js | 52 + src/Interaction/DragEvent.js | 98 + src/Interaction/MouseScrollEvent.js | 52 + src/MathHelper.js | 13 + src/ScrollBar.js | 92 + src/ScrollingContainer.js | 223 +- src/SliceSprite.js | 141 +- src/Slider.js | 228 + src/SortableList.js | 54 +- src/Sprite.js | 4 +- src/Stage.js | 29 +- src/Text.js | 73 +- src/Ticker.js | 76 + src/TilingSprite.js | 36 + src/Tween.js | 182 + src/UI.js | 12 +- src/UIBase.js | 1040 +- src/UISettings.js | 6 +- test/4.1.1.html | 329 + test/4.2.1.html | 329 + test/UISprites.json | 18 +- test/UISprites.png | Bin 487 -> 1054 bytes test/index.html | 209 +- test/index1.html | 329 + test/index2.html | 87 + test/index3.html | 57 + test/index4.html | 85 + test/pixi.js | 36263 ++++++++++++++++++++++++ test/pixi4.js | 35329 +++++++++++++++++++++++ 38 files changed, 77308 insertions(+), 1089 deletions(-) create mode 100644 src/Ease/Ease.js create mode 100644 src/Ease/EaseBase.js create mode 100644 src/Ease/ExponentialEase.js create mode 100644 src/Interaction/ClickEvent.js create mode 100644 src/Interaction/DragDropController.js create mode 100644 src/Interaction/DragEvent.js create mode 100644 src/Interaction/MouseScrollEvent.js create mode 100644 src/MathHelper.js create mode 100644 src/ScrollBar.js create mode 100644 src/Slider.js create mode 100644 src/Ticker.js create mode 100644 src/TilingSprite.js create mode 100644 src/Tween.js create mode 100644 test/4.1.1.html create mode 100644 test/4.2.1.html create mode 100644 test/index1.html create mode 100644 test/index2.html create mode 100644 test/index3.html create mode 100644 test/index4.html create mode 100644 test/pixi.js create mode 100644 test/pixi4.js diff --git a/bin/pixi-ui.js b/bin/pixi-ui.js index 2d6cbb2..5daf5a4 100644 --- a/bin/pixi-ui.js +++ b/bin/pixi-ui.js @@ -1,6 +1,6 @@ /*! * pixi-ui - v1.0.0 - * Compiled Sat, 05 Nov 2016 21:28:52 UTC + * Compiled Thu, 17 Nov 2016 05:02:02 UTC * * pixi-ui is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license @@ -19,25 +19,598 @@ 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; -},{"./UIBase":9}],2:[function(require,module,exports){ +Container.prototype.update = function () { + this.container.hitArea.width = this._width; + this.container.hitArea.height = this._height; +}; + + +},{"./UIBase":21}],2:[function(require,module,exports){ +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; + + + +},{"./EaseBase":3,"./ExponentialEase":4}],3:[function(require,module,exports){ +function EaseBase() { + this.getPosition = function (p) { + return p; + }; +} + +EaseBase.prototype.constructor = EaseBase; +module.exports = EaseBase; + + + + +},{}],4:[function(require,module,exports){ +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; + + + + +},{"./EaseBase":3}],5:[function(require,module,exports){ +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) { }; +},{}],6:[function(require,module,exports){ +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; +},{}],7:[function(require,module,exports){ +var DragEvent = function (obj) { + var bound = false, + start = new PIXI.Point(), + offset = new PIXI.Point(), + mouse = new PIXI.Point(), + movementX = 0, + movementY = 0, + cancel = false, + dragging = false, + self = this, + id = 0; + + obj.container.interactive = true; + + var _onDragStart = function (event) { + id = event.data.identifier; + self.onPress.call(obj, event, true); + if (!bound) { + start.copy(event.data.global); + obj.stage.on('mousemove', _onDragMove); + obj.stage.on('touchmove', _onDragMove); + obj.stage.on('mouseup', _onDragEnd); + obj.stage.on('mouseupoutside', _onDragEnd); + obj.stage.on('touchend', _onDragEnd); + obj.stage.on('touchendoutside', _onDragEnd); + bound = true; + } + }; + + var _onDragMove = function (event) { + if (event.data.identifier !== id) return; + mouse.copy(event.data.global); + offset.set(mouse.x - start.x, mouse.y - start.y); + if (!dragging) { + movementX = Math.abs(offset.x); + movementY = Math.abs(offset.y); + if (movementX === 0 && movementY === 0 || Math.max(movementX, movementY) < obj.dragThreshold) return; //thresshold + if (obj.dragRestrictAxis !== null) { + cancel = false; + if (obj.dragRestrictAxis == "x" && movementY > movementX) cancel = true; + else if (obj.dragRestrictAxis == "y" && movementY <= movementX) cancel = true; + if (cancel) { + _onDragEnd(event); + return; + } + } + self.onDragStart.call(obj, event); + dragging = true; + } + self.onDragMove.call(obj, event, offset); + }; + + var _onDragEnd = function (event) { + if (event.data.identifier !== id) return; + if (bound) { + obj.stage.removeListener('mousemove', _onDragMove); + obj.stage.removeListener('touchmove', _onDragMove); + obj.stage.removeListener('mouseup', _onDragEnd); + obj.stage.removeListener('mouseupoutside', _onDragEnd); + obj.stage.removeListener('touchend', _onDragEnd); + obj.stage.removeListener('touchendoutside', _onDragEnd); + dragging = false; + bound = false; + self.onDragEnd.call(obj, event); + self.onPress.call(obj, event, false); + + } + }; + + this.stopEvent = function () { + if (bound) { + obj.stage.removeListener('mousemove', _onDragMove); + obj.stage.removeListener('touchmove', _onDragMove); + obj.stage.removeListener('mouseup', _onDragEnd); + obj.stage.removeListener('mouseupoutside', _onDragEnd); + obj.stage.removeListener('touchend', _onDragEnd); + obj.stage.removeListener('touchendoutside', _onDragEnd); + bound = false; + } + obj.container.removeListener('mousedown', _onDragStart); + obj.container.removeListener('touchstart', _onDragStart); + }; + + this.startEvent = function () { + obj.container.on('mousedown', _onDragStart); + obj.container.on('touchstart', _onDragStart); + }; + + this.startEvent(); +}; + +DragEvent.prototype.constructor = DragEvent; +module.exports = DragEvent; + +DragEvent.prototype.onPress = function (event, isPressed) { }; +DragEvent.prototype.onDragEnd = function (event) { }; +DragEvent.prototype.onDragMove = function (event, offset) { }; +DragEvent.prototype.onDragStart = function (event) { }; +},{}],8:[function(require,module,exports){ +var MouseScrollEvent = function (obj, preventDefault) { + var bound = false, delta = new PIXI.Point(), self = this; + obj.container.interactive = true; + + var _onMouseScroll = function (event) { + if (preventDefault) + event.preventDefault(); + + delta.set(event.deltaX, event.deltaY); + self.onMouseScroll.call(obj, event, delta); + }; + + var _onHover = function (event) { + if (!bound) { + document.addEventListener("mousewheel", _onMouseScroll, false); + document.addEventListener("DOMMouseScroll", _onMouseScroll, false); + bound = true; + } + }; + + var _onMouseOut = function (event) { + if (bound) { + document.removeEventListener("mousewheel", _onMouseScroll); + document.removeEventListener("DOMMouseScroll", _onMouseScroll); + bound = false; + } + }; + + this.stopEvent = function () { + if (bound) { + document.removeEventListener("mousewheel", _onMouseScroll); + document.removeEventListener("DOMMouseScroll", _onMouseScroll); + bound = false; + } + obj.container.removeListener('mouseover', _onHover); + obj.container.removeListener('mouseout', _onMouseOut); + }; + + this.startEvent = function () { + obj.container.on('mouseover', _onHover); + obj.container.on('mouseout', _onMouseOut); + }; + + this.startEvent(); + + +}; + +MouseScrollEvent.prototype.constructor = MouseScrollEvent; +module.exports = MouseScrollEvent; + +MouseScrollEvent.prototype.onMouseScroll = function (event, delta) { }; +},{}],9:[function(require,module,exports){ +var MathHelper = { + Lerp: function (start, stop, amt) { + if (amt > 1) amt = 1; + else if (amt < 0) amt = 0; + return start + (stop - start) * amt; + }, + Round: function(number, decimals) { + var pow = Math.pow(10, decimals); + return Math.round(number * pow) / pow; + } +}; + +module.exports = MathHelper; +},{}],10:[function(require,module,exports){ +var Slider = require('./Slider'), + Tween = require('./Tween'), + Ease = require('./Ease/Ease'); + +/** +* An UI scrollbar to control a ScrollingContainer +* +* @class +* @extends PIXI.UI.Slider +* @memberof PIXI.UI +* @param options {Object} ScrollBar settings +* @param options.track {(PIXI.UI.SliceSprite|PIXI.UI.Sprite)} Any type of UIOBject, will be used for the scrollbar track +* @param options.handle {(PIXI.UI.SliceSprite|PIXI.UI.Sprite)} will be used as scrollbar handle +* @param options.scrollingContainer {PIXI.UI.ScrollingContainer} The container to control +* @param [options.vertical=false] {boolean} Direction of the scrollbar +* @param [options.autohide=false] {boolean} Hides the scrollbar when not needed +* +*/ +function ScrollBar(options) { + Slider.call(this, { track: options.track, handle: options.handle, fill: null, vertical: options.vertical }); + this.scrollingContainer = options.scrollingContainer; + this.autohide = options.autohide; + this._hidden = false; + +} + +ScrollBar.prototype = Object.create(Slider.prototype); +ScrollBar.prototype.constructor = ScrollBar; +module.exports = ScrollBar; + + +ScrollBar.prototype.initialize = function () { + Slider.prototype.initialize.call(this); + this.decimals = 3; //up decimals to trigger ValueChanging more often + + this._onValueChanging = function (val) { + var sizeAmt = this.scrollingContainer._height / this.scrollingContainer.innerContainer.height || 0.001; + if (sizeAmt < 1) + this.scrollingContainer.forcePctPosition(this.vertical ? "y" : "x", this._amt); + }; + + this.scrollingContainer._scrollBars.push(this); + +}; + +ScrollBar.prototype.alignToContainer = function () { + var newPos, + size, + x_y = this.vertical ? "y" : "x", + width_height = this.vertical ? "height" : "width", + top_left = this.vertical ? "top" : "left", + _posAmt = !this.scrollingContainer.innerContainer[width_height] ? 0 : -(this.scrollingContainer.innerContainer[x_y] / this.scrollingContainer.innerContainer[width_height]), + sizeAmt = !this.scrollingContainer.innerContainer[width_height] ? 1 : this.scrollingContainer["_" + width_height] / this.scrollingContainer.innerContainer[width_height]; + + //update amt + this._amt = !this.scrollingContainer["_" + width_height] ? 0 : -(this.scrollingContainer.innerContainer[x_y] / (this.scrollingContainer.innerContainer[width_height] - this.scrollingContainer["_" + width_height])); + + if (sizeAmt >= 1) { + size = this["_" + width_height]; + this.handle[top_left] = size * 0.5; + this.toggleHidden(true); + } + else { + size = this["_" + width_height] * sizeAmt; + if (this._amt > 1) size -= (this["_" + width_height] - size) * (this._amt - 1); + else if (this._amt < 0) size -= (this["_" + width_height] - size) * -this._amt; + if (this._amt < 0) newPos = size * 0.5; + else if (this._amt > 1) newPos = this["_" + width_height] - size * 0.5; + else newPos = (_posAmt * this.scrollingContainer["_" + width_height]) + (size * 0.5); + this.handle[top_left] = newPos; + this.toggleHidden(false); + } + this.handle[width_height] = size; +}; + + +ScrollBar.prototype.toggleHidden = function (hidden) { + if (this.autohide) { + if (hidden && !this._hidden) { + Tween.to(this, 0.2, { alpha: 0 }); + this._hidden = true; + } + else if (!hidden && this._hidden) { + Tween.to(this, 0.2, { alpha: 1 }); + this._hidden = false; + } + } +}; + + + + + +},{"./Ease/Ease":2,"./Slider":13,"./Tween":19}],11:[function(require,module,exports){ var UIBase = require('./UIBase'), - Container = require('./Container'); + Container = require('./Container'), + MathHelper = require('./MathHelper'), + Ticker = require('./Ticker'), + DragEvent = require('./Interaction/DragEvent'), + MouseScrollEvent = require('./Interaction/MouseScrollEvent'); + /** * An UI Container object with overflow hidden and possibility to enable scrolling @@ -48,36 +621,20 @@ var UIBase = require('./UIBase'), * @param width {Number} Width of the Container * @param height {Number} Height of the Container */ -function ScrollingContainer(width, height, scrollX, scrollY, cornerRadius) { +function ScrollingContainer(scrollY, scrollX, smoothness, cornerRadius, width, height) { Container.call(this, width, height); this.mask = new PIXI.Graphics(); this.innerContainer = new PIXI.Container(); - this.container.addChild(this.innerContainer); this.container.addChild(this.mask); + this.container.addChild(this.innerContainer); this.container.mask = this.mask; this.scrollX = scrollX; this.scrollY = scrollY; + this.smoothness = Math.max(Math.min(smoothness || 0, 1), 0); this.cornerRadius = cornerRadius || 0; - - - - this.update = function () { - if (this._lastWidth != this.width || this._lastHeight != this.height) { - this.mask.clear(); - this.mask.lineStyle(0); - if (this.cornerRadius == 0) { - this.mask.beginFill(0xFFFFFF, 1); - this.mask.drawRect(0, 0, this.width, this.height); - } - else { - this.mask.beginFill(0xFFFFFF, 1); - this.mask.drawRoundedRect(0, 0, this.width, this.height, this.cornerRadius); - } - this._lastWidth = this.width; - this._lastHeight = this.height; - } - - } + this.animating = false; + this.scrolling = false; + this._scrollBars = []; } @@ -86,18 +643,42 @@ ScrollingContainer.prototype.constructor = ScrollingContainer; module.exports = ScrollingContainer; +ScrollingContainer.prototype.initialize = function () { + Container.prototype.initialize.apply(this); + if (this.scrollX || this.scrollY) { + this.initScrolling(); + } +}; + +ScrollingContainer.prototype.update = function () { + Container.prototype.update.apply(this); + if (this._lastWidth != this._width || this._lastHeight != this._height) { + this.mask.clear(); + this.mask.lineStyle(0); + this.mask.beginFill(0xFFFFFF, 1); + if (this.cornerRadius === 0) { + + //this.mask.drawRect(0, 0, this._width, this._height); + this.mask.moveTo(0, 0); + this.mask.lineTo(this._width, 0); + this.mask.lineTo(this._width, this._height); + this.mask.lineTo(0, this._height); + this.mask.lineTo(0, 0); -Object.defineProperties(ScrollingContainer.prototype, { - overflowHidden: { - get: function () { - return this._overflowHidden; - }, - set: function (val) { - this._overflowHidden = val; - this.updateOverflow(); } - }, -}); + else { + this.mask.drawRoundedRect(0, 0, this._width, this.height, this.cornerRadius); + } + this.mask.endFill(); + this._lastWidth = this._width; + this._lastHeight = this._height; + } + + + if (this.setScrollPosition) { + this.setScrollPosition(); + } +}; ScrollingContainer.prototype.addChild = function (UIObject) { var argumentsLength = arguments.length; @@ -114,14 +695,157 @@ ScrollingContainer.prototype.addChild = function (UIObject) { }; -},{"./Container":1,"./UIBase":9}],3:[function(require,module,exports){ +ScrollingContainer.prototype.updateScrollBars = function () { + for (var i = 0; i < this._scrollBars.length; i++) { + this._scrollBars[i].alignToContainer(); + } +}; + +ScrollingContainer.prototype.initScrolling = function () { + var container = this.innerContainer, + containerStart = new PIXI.Point(), + targetPosition = new PIXI.Point(), + lastPosition = new PIXI.Point(), + Position = new PIXI.Point(), + Speed = new PIXI.Point(), + stop, + self = this; + + this.forcePctPosition = function (direction, pct) { + if (this.scrollX && direction == "x") { + this.innerContainer.position[direction] = -((this.innerContainer.width - this._width) * pct); + } + if (this.scrollY && direction == "y") { + this.innerContainer.position[direction] = -((this.innerContainer.height - this._height) * pct); + } + Position[direction] = targetPosition[direction] = this.innerContainer.position[direction]; + }; + + this.setScrollPosition = function (speed) { + if (speed) { + Speed = speed; + } + + if (!this.animating) { + this.animating = true; + lastPosition.copy(container.position); + targetPosition.copy(container.position); + Ticker.on("update", this.updateScrollPosition, this); + } + }; + + this.updateScrollPosition = function (delta) { + stop = true; + if (this.scrollX) this.updateDirection("x", delta); + if (this.scrollY) this.updateDirection("y", delta); + if (stop) { + Ticker.removeListener("update", this.updateScrollPosition); + this.animating = false; + } + }; + + this.updateDirection = function (direction, delta) { + var min; + if (direction == "y") + min = Math.round(Math.min(0, this._height - container.height)); + else + min = Math.round(Math.min(0, this._width - container.width)); + + if (!this.scrolling && Math.round(Speed[direction]) !== 0) { + targetPosition[direction] += Speed[direction]; + Speed[direction] = MathHelper.Lerp(Speed[direction], 0, (5 + 2.5 / Math.max(this.smoothness, 0.01)) * delta); + + if (targetPosition[direction] > 0) { + targetPosition[direction] = 0; + + } + else if (targetPosition[direction] < min) { + targetPosition[direction] = min; + + } + } + + if (!this.scrolling && Math.round(Speed[direction]) === 0 && (container[direction] > 0 || container[direction] < min)) { + var target = Position[direction] > 0 ? 0 : min; + Position[direction] = MathHelper.Lerp(Position[direction], target, (40 - (30 * this.smoothness)) * delta); + stop = false; + } + else if (this.scrolling || Math.round(Speed[direction]) !== 0) { + + if (this.scrolling) { + Speed[direction] = Position[direction] - lastPosition[direction]; + lastPosition.copy(Position); + } + + if (targetPosition[direction] > 0) { + Speed[direction] = 0; + Position[direction] = 100 * this.smoothness * (1 - Math.exp(targetPosition[direction] / -200)); + } + else if (targetPosition[direction] < min) { + Speed[direction] = 0; + Position[direction] = min - (100 * this.smoothness * (1 - Math.exp((min - targetPosition[direction]) / -200))); + } + else { + Position[direction] = targetPosition[direction]; + } + stop = false; + } + + container.position[direction] = Math.round(Position[direction]); + + self.updateScrollBars(); + + }; + + + //Drag scroll + var drag = new DragEvent(this); + drag.onDragStart = function (e) { + if (!this.scrolling) { + containerStart.copy(container.position); + Position.copy(container.position); + this.scrolling = true; + this.setScrollPosition(); + } + }; + + drag.onDragMove = function (e, offset) { + if (this.scrollX) + targetPosition.x = containerStart.x + offset.x; + if (this.scrollY) + targetPosition.y = containerStart.y + offset.y; + }; + + drag.onDragEnd = function (e) { + this.scrolling = false; + }; + + + //Mouse scroll + var scrollSpeed = new PIXI.Point(); + var scroll = new MouseScrollEvent(this, true); + scroll.onMouseScroll = function (e, delta) { + scrollSpeed.set(-delta.x * 0.2, -delta.y * 0.2); + this.setScrollPosition(scrollSpeed); + }; + + + self.updateScrollBars(); + + +}; + + + + + +},{"./Container":1,"./Interaction/DragEvent":7,"./Interaction/MouseScrollEvent":8,"./MathHelper":9,"./Ticker":18,"./UIBase":21}],12:[function(require,module,exports){ var UIBase = require('./UIBase'); /** * A sliced sprite with dynamic width and height. * * @class - * @extends PIXI.UI.UIBase * @memberof PIXI.UI * @param Texture {PIXI.Texture} the texture for this SliceSprite * @param BorderWidth {Number} Width of the sprite borders @@ -130,6 +854,9 @@ var UIBase = require('./UIBase'); */ function SliceSprite(texture, borderWidth, horizontalSlice, verticalSlice) { UIBase.call(this, texture.width, texture.height); + this.setting.minWidth = borderWidth * 2; + this.setting.minHeight = borderWidth * 2; + var ftl, ftr, fbl, fbr, ft, fb, fl, fr, ff, stl, str, sbl, sbr, st, sb, sl, sr, sf, bw = borderWidth || 5, @@ -139,62 +866,68 @@ function SliceSprite(texture, borderWidth, horizontalSlice, verticalSlice) { f = texture.frame; - //get frames - if (vs && hs) { - ftl = new PIXI.Rectangle(f.x, f.y, bw, bw); - ftr = new PIXI.Rectangle(f.x + f.width - bw, f.y, bw, bw); - fbl = new PIXI.Rectangle(f.x, f.y + f.height - bw, bw, bw); - fbr = new PIXI.Rectangle(f.x + f.width - bw, f.y + f.height - bw, bw, bw); - ft = new PIXI.Rectangle(f.x + bw, f.y, f.width - bw * 2, bw); - fb = new PIXI.Rectangle(f.x + bw, f.y + f.height - bw, f.width - bw * 2, bw); - fl = new PIXI.Rectangle(f.x, f.y + bw, bw, f.height - bw * 2); - fr = new PIXI.Rectangle(f.x + f.width - bw, f.y + bw, bw, f.height - bw * 2); - ff = new PIXI.Rectangle(f.x + bw, f.y + bw, f.width - bw * 2, f.height - bw * 2); - } - else if (hs) { - fl = new PIXI.Rectangle(f.x, f.y, bw, f.height); - fr = new PIXI.Rectangle(f.x + f.width - bw, f.y, bw, f.height); - ff = new PIXI.Rectangle(f.x + bw, f.y, f.width - bw * 2, f.height); - } - else { //vs - ft = new PIXI.Rectangle(f.x, f.y, f.width, bw); - fb = new PIXI.Rectangle(f.x, f.y + f.height - bw, f.width, bw); - ff = new PIXI.Rectangle(f.x, f.y + bw, f.width, f.height - bw * 2); - } - - //TODO: swap frames if rotation - + this.initialize = function () { + UIBase.prototype.initialize.apply(this); + //get frames + if (vs && hs) { + ftl = new PIXI.Rectangle(f.x, f.y, bw, bw); + ftr = new PIXI.Rectangle(f.x + f.width - bw, f.y, bw, bw); + fbl = new PIXI.Rectangle(f.x, f.y + f.height - bw, bw, bw); + fbr = new PIXI.Rectangle(f.x + f.width - bw, f.y + f.height - bw, bw, bw); + ft = new PIXI.Rectangle(f.x + bw, f.y, f.width - bw * 2, bw); + fb = new PIXI.Rectangle(f.x + bw, f.y + f.height - bw, f.width - bw * 2, bw); + fl = new PIXI.Rectangle(f.x, f.y + bw, bw, f.height - bw * 2); + fr = new PIXI.Rectangle(f.x + f.width - bw, f.y + bw, bw, f.height - bw * 2); + ff = new PIXI.Rectangle(f.x + bw, f.y + bw, f.width - bw * 2, f.height - bw * 2); + } + else if (hs) { + fl = new PIXI.Rectangle(f.x, f.y, bw, f.height); + fr = new PIXI.Rectangle(f.x + f.width - bw, f.y, bw, f.height); + ff = new PIXI.Rectangle(f.x + bw, f.y, f.width - bw * 2, f.height); + } + else { //vs + ft = new PIXI.Rectangle(f.x, f.y, f.width, bw); + fb = new PIXI.Rectangle(f.x, f.y + f.height - bw, f.width, bw); + ff = new PIXI.Rectangle(f.x, f.y + bw, f.width, f.height - bw * 2); + } - //make sprites - sf = new PIXI.Sprite(new PIXI.Texture(t, ff)); - this.container.addChild(sf); - if (vs && hs) { - stl = new PIXI.Sprite(new PIXI.Texture(t, ftl)); - str = new PIXI.Sprite(new PIXI.Texture(t, ftr)); - sbl = new PIXI.Sprite(new PIXI.Texture(t, fbl)); - sbr = new PIXI.Sprite(new PIXI.Texture(t, fbr)); - this.container.addChild(stl, str, sbl, sbr); + //TODO: swap frames if rotation - } - if (hs) { - this.setting.minWidth = bw * 2; - sl = new PIXI.Sprite(new PIXI.Texture(t, fl)); - sr = new PIXI.Sprite(new PIXI.Texture(t, fr)); - this.container.addChild(sl, sr); - } - if (vs) { - this.setting.minHeight = bw * 2; - st = new PIXI.Sprite(new PIXI.Texture(t, ft)); - sb = new PIXI.Sprite(new PIXI.Texture(t, fb)); - this.container.addChild(st, sb); - } - //set constant position and sizes - if (vs && hs) st.x = sb.x = sl.y = sr.y = stl.width = str.width = sbl.width = sbr.width = stl.height = str.height = sbl.height = sbr.height = bw; - if (hs) sf.x = sl.width = sr.width = bw; - if (vs) sf.y = st.height = sb.height = bw; + //make sprites + sf = new PIXI.Sprite(new PIXI.Texture(t, ff)); + this.container.addChildAt(sf, 0); + if (vs && hs) { + stl = new PIXI.Sprite(new PIXI.Texture(t, ftl)); + str = new PIXI.Sprite(new PIXI.Texture(t, ftr)); + sbl = new PIXI.Sprite(new PIXI.Texture(t, fbl)); + sbr = new PIXI.Sprite(new PIXI.Texture(t, fbr)); + this.container.addChildAt(stl, 0); + this.container.addChildAt(str, 0); + this.container.addChildAt(sbl, 0); + this.container.addChildAt(sbr, 0); + + } + if (hs) { + sl = new PIXI.Sprite(new PIXI.Texture(t, fl)); + sr = new PIXI.Sprite(new PIXI.Texture(t, fr)); + this.container.addChildAt(sl, 0); + this.container.addChildAt(sr, 0); + } + if (vs) { + st = new PIXI.Sprite(new PIXI.Texture(t, ft)); + sb = new PIXI.Sprite(new PIXI.Texture(t, fb)); + this.container.addChildAt(st, 0); + this.container.addChildAt(sb, 0); + } + + //set constant position and sizes + if (vs && hs) st.x = sb.x = sl.y = sr.y = stl.width = str.width = sbl.width = sbr.width = stl.height = str.height = sbl.height = sbr.height = bw; + if (hs) sf.x = sl.width = sr.width = bw; + if (vs) sf.y = st.height = sb.height = bw; + }; /** * Updates the sliced sprites position and size @@ -202,21 +935,22 @@ function SliceSprite(texture, borderWidth, horizontalSlice, verticalSlice) { * @private */ this.update = function () { + if (!this.initialized) return; if (vs && hs) { - str.x = sbr.x = sr.x = this.width - bw; - sbl.y = sbr.y = sb.y = this.height - bw; - sf.width = st.width = sb.width = this.width - bw * 2; - sf.height = sl.height = sr.height = this.height - bw * 2; + str.x = sbr.x = sr.x = this._width - bw; + sbl.y = sbr.y = sb.y = this._height - bw; + sf.width = st.width = sb.width = this._width - bw * 2; + sf.height = sl.height = sr.height = this._height - bw * 2; } else if (hs) { - sr.x = this.width - bw; - sl.height = sr.height = sf.height = this.height; - sf.width = this.width - bw * 2; + sr.x = this._width - bw; + sl.height = sr.height = sf.height = this._height; + sf.width = this._width - bw * 2; } else { //vs - sb.y = this.height - bw; - st.width = sb.width = sf.width = this.width; - sf.height = this.height - bw * 2; + sb.y = this._height - bw; + st.width = sb.width = sf.width = this._width; + sf.height = this._height - bw * 2; } if (this.tint !== null) { @@ -232,30 +966,263 @@ function SliceSprite(texture, borderWidth, horizontalSlice, verticalSlice) { if (hs) sl.blendMode = sr.blendMode = this.blendMode; if (vs) st.blendMode = sb.blendMode = this.blendMode; } - }; -} - -SliceSprite.prototype = Object.create(UIBase.prototype); -SliceSprite.prototype.constructor = SliceSprite; -module.exports = SliceSprite; - - - - -},{"./UIBase":9}],4:[function(require,module,exports){ + }; +} + +SliceSprite.prototype = Object.create(UIBase.prototype); +SliceSprite.prototype.constructor = SliceSprite; +module.exports = SliceSprite; + + + + +},{"./UIBase":21}],13:[function(require,module,exports){ +var UIBase = require('./UIBase'), + DragEvent = require('./Interaction/DragEvent'), + ClickEvent = require('./Interaction/ClickEvent'), + Tween = require('./Tween'), + Ease = require('./Ease/Ease'), + MathHelper = require('./MathHelper'); + +/** +* An UI Slider, the default width/height is 90% +* +* @class +* @extends UIBase +* @memberof PIXI.UI +* @param options {Object} Slider settings +* @param options.track {(PIXI.UI.SliceSprite|PIXI.UI.Sprite)} Any type of UIOBject, will be used for the slider track +* @param options.handle {(PIXI.UI.SliceSprite|PIXI.UI.Sprite)} will be used as slider handle +* @param [options.fill=null] {(PIXI.UI.SliceSprite|PIXI.UI.Sprite)} will be used for slider fill +* @param [options.vertical=false] {boolean} Direction of the slider +* @param [options.value=0] {number} value of the slider +* @param [options.minValue=0] {number} minimum value +* @param [options.maxValue=100] {number} max value +* @param [options.decimals=0] {boolean} the decimal precision (use negative to round tens and hundreds) +* @param [options.onValueChange=null] {callback} Callback when the value has changed +* @param [options.onValueChanging=null] {callback} Callback while the value is changing +* +* +*/ +function Slider(options) { + UIBase.call(this); + this._amt = 0; + + //set options + this.track = options.track; + this.handle = options.handle; + this.fill = options.fill || null; + this._minValue = options.minValue || 0; + this._maxValue = options.maxValue || 100; + this.decimals = options.decimals || 0; + this.vertical = options.vertical || false; + this._onValueChange = options.onValueChange || null; + this._onValueChanging = options.onValueChanging || null; + this.value = options.value || 50; + this.handle.pivot = 0.5; + + + + this.addChild(this.track); + if (this.fill) this.track.addChild(this.fill); + this.track.addChild(this.handle); + +} + +Slider.prototype = Object.create(UIBase.prototype); +Slider.prototype.constructor = Slider; +module.exports = Slider; + +Slider.prototype.update = function (soft) { + var handleSize, val; + + if (this.vertical) { + handleSize = this.handle._height || this.handle.container.height; + val = ((this._height - handleSize) * this._amt) + (handleSize * 0.5); + if (soft) { + Tween.to(this.handle, 0.3, { top: val }, Ease.Power2.easeOut); + if (this.fill) Tween.to(this.fill, 0.3, { height: val }, Ease.Power2.easeOut); + } + else { + Tween.set(this.handle, { top: val }); + if (this.fill) Tween.set(this.fill, { height: val }); + } + } + else { + handleSize = this.handle._width || this.handle.container.width; + val = ((this._width - handleSize) * this._amt) + (handleSize * 0.5); + if (soft) { + Tween.to(this.handle, 0.3, { left: val }, Ease.Power2.easeOut); + if (this.fill) Tween.to(this.fill, 0.3, { width: val }, Ease.Power2.easeOut); + } + else { + Tween.set(this.handle, { left: val }); + if (this.fill) Tween.set(this.fill, { width: val }); + } + } +}; + +Slider.prototype.initialize = function () { + UIBase.prototype.initialize.call(this); + + + + var self = this; + var startValue = 0; + + if (this.vertical) { + this.height = "90%"; + this.width = this.track.width; + this.track.height = "100%"; + this.handle.horizontalAlign = "center"; + if (this.fill) this.fill.horizontalAlign = "center"; + } + else { + this.width = "90%"; + this.height = this.track.height; + this.track.width = "100%"; + this.handle.verticalAlign = "middle"; + if (this.fill) this.fill.verticalAlign = "middle"; + } + + ////Handle dragging + var handleDrag = new DragEvent(this.handle); + handleDrag.onPress = function (event, isPressed) { + event.stopPropagation(); + }; + + handleDrag.onDragStart = function (event) { + startValue = self._amt; + maxPosition = self.vertical ? self._height - self.handle._height : self._width - self.handle._width; + }; + + handleDrag.onDragMove = function (event, offset) { + + self._amt = !maxPosition ? 0 : Math.max(0, Math.min(1, startValue + ((self.vertical ? offset.y : offset.x) / maxPosition))); + + triggerValueChanging(); + self.update(); + }; + + handleDrag.onDragEnd = function () { + triggerValueChange(); + self.update(); + }; + + //Bar pressing/dragging + var localMousePosition = new PIXI.Point(); + var trackDrag = new DragEvent(this.track); + + trackDrag.onPress = function (event, isPressed) { + if (isPressed) + updatePositionToMouse(event.data.global, true); + event.stopPropagation(); + }; + + trackDrag.onDragMove = function (event) { + updatePositionToMouse(event.data.global, false); + }; + + trackDrag.onDragEnd = function () { + triggerValueChange(); + }; + + var updatePositionToMouse = function (mousePosition, soft) { + self.track.container.toLocal(mousePosition, null, localMousePosition, true); + + var newPos = self.vertical ? localMousePosition.y - self.handle._height * 0.5 : localMousePosition.x - self.handle._width * 0.5; + var maxPos = self.vertical ? self._height - self.handle._height : self._width - self.handle._width; + self._amt = !maxPos ? 0 : Math.max(0, Math.min(1, newPos / maxPos)); + self.update(soft); + triggerValueChanging(); + }; + + var triggerValueChange = function () { + if (self._lastChange != self.value) { + self._lastChange = self.value; + if (typeof self.onValueChange === "function") + self.onValueChange(self.value); + } + }; + + var triggerValueChanging = function () { + if (self._lastChanging != self.value) { + self._lastChanging = self.value; + if (typeof self._onValueChanging === "function") + self._onValueChanging(self.value); + } + }; +}; + + +Object.defineProperties(Slider.prototype, { + value: { + get: function () { + return MathHelper.Round(MathHelper.Lerp(this._minValue, this._maxValue, this._amt), this.decimals); + }, + set: function (val) { + this._amt = (Math.max(this._minValue, Math.min(this._maxValue, val)) - this._minValue) / (this._maxValue - this._minValue); + if (typeof this.onValueChange === "function") + self.onValueChange(this.value); + if (typeof this._onValueChanging === "function") + this._onValueChanging(this.value); + this.update(); + } + }, + + onValueChange: { + get: function () { + return this._onValueChange; + }, + set: function (val) { + this._onValueChange = val; + } + }, + onValueChanging: { + get: function () { + return this._onValueChanging; + }, + set: function (val) { + this._onValueChanging = val; + } + }, + minValue: { + get: function () { + return this._minValue; + }, + set: function (val) { + this._minValue = val; + this.update(); + } + }, + maxValue: { + get: function () { + return this._maxValue; + }, + set: function (val) { + this._maxValue = val; + this.update(); + } + } +}); +},{"./Ease/Ease":2,"./Interaction/ClickEvent":5,"./Interaction/DragEvent":7,"./MathHelper":9,"./Tween":19,"./UIBase":21}],14:[function(require,module,exports){ var Container = require('./Container'); +var Tween = require('./Tween'); /** * An UI Container object * * @class * @extends PIXI.UI.UIBase * @memberof PIXI.UI - * @param width {Number} Width of the Container - * @param height {Number} Height of the Container + * @param desc {Boolean} Sort the list descending + * @param tweenTime {Number} if above 0 the sort will be animated + * @param tweenEase {PIXI.UI.Ease} ease method used for animation */ -function SortableList(desc) { +function SortableList(desc, tweenTime, tweenEase) { Container.call(this); - this.desc = typeof desc !== "undefined" ? desc : true; + this.desc = typeof desc !== "undefined" ? desc : false; + this.tweenTime = tweenTime || 0; + this.tweenEase = tweenEase; this.items = []; } @@ -282,7 +1249,7 @@ SortableList.prototype.addChild = function (UIObject, fnValue, fnThenBy) { this.sort(); -} +}; SortableList.prototype.removeChild = function (UIObject) { if (arguments.length > 1) { @@ -298,41 +1265,63 @@ SortableList.prototype.removeChild = function (UIObject) { } this.sort(); } -} +}; SortableList.prototype.sort = function () { - var desc = this.desc; + clearTimeout(this._sortTimeout); + var _this = this; + this._sortTimeout = setTimeout(function () { _this._sort(); }, 1); +}; + +SortableList.prototype._sort = function () { + var self = this, + desc = this.desc, + y = 0, + alt = true; + this.items.sort(function (a, b) { var res = a._sortListValue() < b._sortListValue() ? desc ? 1 : -1 : a._sortListValue() > b._sortListValue() ? desc ? -1 : 1 : 0; - if (res == 0 && a._sortListThenByValue && b._sortListThenByValue) { + if (res === 0 && a._sortListThenByValue && b._sortListThenByValue) { res = a._sortListThenByValue() < b._sortListThenByValue() ? desc ? 1 : -1 : a._sortListThenByValue() > b._sortListThenByValue() ? desc ? -1 : 1 : 0; } - if (res == 0) { + if (res === 0) { res = a._sortListRnd > b._sortListRnd ? 1 : a._sortListRnd < b._sortListRnd ? -1 : 0; } return res; }); - var y = 0 - var alt = true; for (var i = 0; i < this.items.length; i++) { - alt = !alt; var item = this.items[i]; - item.y = y; + + alt = !alt; + + if (this.tweenTime > 0) { + Tween.fromTo(item, this.tweenTime, { x: item.x, y: item.y }, { x: 0, y: y }, this.tweenEase); + } + else { + item.x = 0; + item.y = y; + } y += item.height; if (typeof item.altering === "function") item.altering(alt); } -} + //force it to update parents when sort animation is done (prevent scrolling container bug) + if (this.tweenTime > 0) { + setTimeout(function () { + self.updatesettings(false, true); + }, this.tweenTime * 1000); + } +}; -},{"./Container":1}],5:[function(require,module,exports){ +},{"./Container":1,"./Tween":19}],15:[function(require,module,exports){ var UIBase = require('./UIBase'); /** @@ -365,12 +1354,12 @@ Sprite.prototype.update = function () { if (this.blendMode !== null) this.sprite.blendMode = this.blendMode; - this.sprite.width = this.width; - this.sprite.height = this.height; + this.sprite.width = this._width; + this.sprite.height = this._height; }; -},{"./UIBase":9}],6:[function(require,module,exports){ +},{"./UIBase":21}],16:[function(require,module,exports){ var UIBase = require('./UIBase'); /** @@ -383,10 +1372,13 @@ var UIBase = require('./UIBase'); * @param height {Number} Height of the Stage */ function Stage(width, height) { - this._width = width; - this._height = height; PIXI.Container.call(this); + this.__width = width; + this.__height = height; this.UIChildren = []; + this.stage = this; + this.interactive = true; + this.initialized = true; } Stage.prototype = Object.create(PIXI.Container.prototype); @@ -407,6 +1399,7 @@ Stage.prototype.addChild = function (UIObject) { UIObject.parent = this; this.UIChildren.push(UIObject); PIXI.Container.prototype.addChild.call(this, UIObject.container); + UIObject.updatesettings(true); } }; @@ -418,48 +1411,49 @@ Stage.prototype.removeChild = function (UIObject) { } } else { + PIXI.Container.prototype.removeChild.call(this, UIObject.container); var index = this.UIChildren.indexOf(UIObject); if (index != -1) { this.UIChildren.splice(index, 1); UIObject.parent = null; } - PIXI.Container.prototype.addChild.call(this, UIObject.container); + } }; Stage.prototype.resize = function (width, height) { - if (!isNaN(height)) this._height = height; - if (!isNaN(width)) this._width = width; + if (!isNaN(height)) this.__height = height; + if (!isNaN(width)) this.__width = width; for (var i = 0; i < this.UIChildren.length; i++) - this.UIChildren[i].updatesettings(); + this.UIChildren[i].updatesettings(true, false); }; Object.defineProperties(Stage.prototype, { - width: { + _width: { get: function () { - return this._width; + return this.__width; }, set: function (val) { if (!isNaN(val)) { - this._width = val; + this.__width = val; this.resize(); } } }, - height: { + _height: { get: function () { - return this._height; + return this.__height; }, set: function (val) { if (!isNaN(val)) { - this._height = val; + this.__height = val; this.resize(); } } } }); -},{"./UIBase":9}],7:[function(require,module,exports){ +},{"./UIBase":21}],17:[function(require,module,exports){ var UIBase = require('./UIBase'); /** @@ -472,46 +1466,356 @@ var UIBase = require('./UIBase'); * @param TextStyle {PIXI.TextStyle} Style used for the Text */ function Text(text, PIXITextStyle) { - this.text = new PIXI.Text(text, PIXITextStyle); - UIBase.call(this, this.text.width, this.text.height); - this.container.addChild(this.text); + + this._text = new PIXI.Text(text, PIXITextStyle); + UIBase.call(this, this._text.width, this._text.height); + this.container.addChild(this._text); + + this.baseupdate = function () { + //force original text width unless using anchors + if (this._anchorLeft === null || this._anchorRight === null) { + this.setting.width = this._text.width; + this.setting.widthPct = null; + } + else { + console.log("ehm"); + console.log(this.anchorLeft, this.anchorRight); + this._text.width = this._width; + } + + //force original text height unless using anchors + if (this._anchorTop === null || this._anchorBottom === null) { + this.setting.height = this._text.height; + this.setting.heightPct = null; + } + else { + this._text.width = this._width; + } + + + UIBase.prototype.baseupdate.call(this); + }; + + this.update = function () { + //set tint + if (this.tint !== null) + this._text.tint = this.tint; + + //set blendmode + if (this.blendMode !== null) + this._text.blendMode = this.blendMode; + }; } Text.prototype = Object.create(UIBase.prototype); Text.prototype.constructor = Text; module.exports = Text; + +Object.defineProperties(Text.prototype, { + value: { + get: function () { + return this._text.text; + }, + set: function (val) { + this._text.text = val; + this.baseupdate(); + } + }, + text: { + get: function () { + return this.value; + }, + set: function (val) { + this.value = val; + } + } +}); +},{"./UIBase":21}],18:[function(require,module,exports){ +var Tween = require('./Tween'); + +function Ticker(autoStart) { + PIXI.utils.EventEmitter.call(this); + this._disabled = true; + this._now = 0; + + this.DeltaTime = 0; + this.Time = performance.now(); + this.Ms = 0; + if (autoStart) { + this.disabled = false; + } + Ticker.shared = this; +} + +Ticker.prototype = Object.create(PIXI.utils.EventEmitter.prototype); +Ticker.prototype.constructor = Ticker; + +module.exports = Ticker; + + + +Object.defineProperties(Ticker.prototype, { + disabled: { + get: function () { + return this._disabled; + }, + set: function (val) { + if (!this._disabled) { + this._disabled = true; + } + else { + this._disabled = false; + Ticker.shared = this; + this.update(performance.now(), true); + } + } + }, +}); + + + /** * Updates the text * * @private */ -Text.prototype.update = function () { - if (this.tint !== null) - text.tint = this.tint; +Ticker.prototype.update = function (time) { + Ticker.shared._now = time; + Ticker.shared.Ms = Ticker.shared._now - Ticker.shared.Time; + Ticker.shared.Time = Ticker.shared._now; + Ticker.shared.DeltaTime = Ticker.shared.Ms * 0.001; + Ticker.shared.emit("update", Ticker.shared.DeltaTime); + Tween._update(Ticker.shared.DeltaTime); + if (!Ticker.shared._disabled) + requestAnimationFrame(Ticker.shared.update); +}; - if (this.blendMode !== null) - this.text.blendMode = this.blendMode; + + + +Ticker.on = function (event, fn, context) { + Ticker.prototype.on.apply(this.shared, arguments); +}; + +Ticker.once = function (event, fn, context) { + Ticker.prototype.once.apply(this.shared, arguments); +}; + +Ticker.removeListener = function (event, fn) { + Ticker.prototype.removeListener.apply(this.shared, arguments); +}; + + +Ticker.shared = new Ticker(true); +},{"./Tween":19}],19:[function(require,module,exports){ +var MathHelper = require('./MathHelper'); +var Ease = require('./Ease/Ease'); +var _tweenItemCache = []; +var _tweenObjects = {}; +var _activeTweenObjects = {}; +var _currentId = 0; + +var TweenObject = function (object) { + this.object = object; + this.tweens = {}; + this.active = false; +}; + +var TweenItem = function () { + this._ready = false; + this.parent = null; + this.obj = null; + this.key = ""; + this.from = 0; + this.to = 0; + this.time = 0; + this.ease = 0; + this.currentTime = 0; + this.t = 0; +}; + +var widthKeys = ["width", "minWidth", "maxWidth", "anchorLeft", "anchorRight", "left", "right", "x"]; +var heightKeys = ["height", "minHeight", "maxHeight", "anchorTop", "anchorBottom", "top", "bottom", "y"]; + + +function getFromValue(from, to, obj, key) { + //both number + if (!isNaN(from) && !isNaN(to)) + return from; + + //both percentage + if (isNaN(from) && isNaN(to) && from.indexOf('%') !== -1 && to.indexOf('%') !== -1) + return parseFloat(from.replace('%', '')); + + //convert from to px + if (isNaN(from) && !isNaN(to) && from.indexOf('%') !== -1) { + if (widthKeys.indexOf(key) !== -1) + return obj.parent._width * (parseFloat(from.replace('%', '')) * 0.01); + else if (heightKeys.indexOf(key) !== -1) + return obj.parent._height * (parseFloat(from.replace('%', '')) * 0.01); + else + return 0; + } + + //convert from to percentage + if (!isNaN(from) && isNaN(to) && to.indexOf('%') !== -1) { + if (widthKeys.indexOf(key) !== -1) + return from / obj.parent._width * 100; + else if (heightKeys.indexOf(key) !== -1) + return from / obj.parent._height * 100; + else + return 0; + } + return 0; +} + +function getSurfix(to) { + if (isNaN(to) && to.indexOf('%') !== -1) + return "%"; +} + +function getToValue(to) { + if (!isNaN(to)) + return to; + if (isNaN(to) && to.indexOf('%') !== -1) + return parseFloat(to.replace('%', '')); +} + +TweenItem.prototype.set = function (obj, key, from, to, time, ease) { + this.parent = obj; + this.obj = obj.object; + this.key = key; + this.surfix = getSurfix(to); + this.to = getToValue(to); + this.from = getFromValue(from, to, this.obj, key); + this.time = time; + this.currentTime = 0; + this.ease = ease; + this._ready = false; + + if (!this.parent.active) + _activeTweenObjects[this.obj._tweenObjectId] = this.parent; +}; + +TweenItem.prototype.update = function (delta) { + this.currentTime += delta; + this.t = Math.min(this.currentTime, this.time) / this.time; + if (this.ease) + this.t = this.ease.getPosition(this.t); + + var val = MathHelper.Lerp(this.from, this.to, this.t); + this.obj[this.key] = this.surfix ? val + this.surfix : val; + + if (this.currentTime >= this.time) { + this._ready = true; + delete this.parent.tweens[this.key]; + if (!Object.keys(this.parent.tweens).length) { + this.parent.active = false; + delete _activeTweenObjects[this.obj._tweenObjectId]; + } + } +}; + + +function getObject(obj) { + if (!obj._tweenObjectId) { + obj._tweenObjectId = _currentId; + _currentId++; + } + var object = _tweenObjects[obj._tweenObjectId]; + if (!object) { + object = _tweenObjects[obj._tweenObjectId] = new TweenObject(obj); + } + return object; +} + +function getTweenItem() { + for (var i = 0; i < _tweenItemCache.length; i++) { + if (_tweenItemCache[i]._ready) + return _tweenItemCache[i]; + } + + var tween = new TweenItem(); + _tweenItemCache.push(tween); + return tween; +} + +var Tween = { + to: function (obj, time, params, ease) { + var object = getObject(obj); + for (var key in params) { + if (params[key] == obj[key] || typeof obj[key] === "undefined") continue; + if (!object.tweens[key]) + object.tweens[key] = getTweenItem(); + object.tweens[key].set(object, key, obj[key], params[key], time, ease); + + } + }, + from: function (obj, time, params, ease) { + var object = getObject(obj); + for (var key in params) { + if (params[key] == obj[key] || typeof obj[key] === "undefined") continue; + if (!object.tweens[key]) + object.tweens[key] = getTweenItem(); + object.tweens[key].set(object, key, params[key], obj[key], time, ease); + } + }, + fromTo: function (obj, time, paramsFrom, paramsTo, ease) { + var object = getObject(obj); + for (var key in paramsFrom) { + if (paramsFrom[key] == paramsTo[key] || typeof obj[key] === "undefined" || typeof paramsTo[key] === "undefined") continue; + if (!object.tweens[key]) { + object.tweens[key] = getTweenItem(); + } + object.tweens[key].set(object, key, paramsFrom[key], paramsTo[key], time, ease); + } + }, + set: function (obj, params) { + var object = getObject(obj); + for (var key in params) { + if (params[key] == obj[key] || typeof obj[key] === "undefined") continue; + if (object.tweens[key]) delete object.tweens[key]; + obj[key] = params[key]; + } + }, + _update: function (delta) { + for (var id in _activeTweenObjects) { + var object = _activeTweenObjects[id]; + for (var key in object.tweens) { + object.tweens[key].update(delta); + } + } + } }; -},{"./UIBase":9}],8:[function(require,module,exports){ +module.exports = Tween; +},{"./Ease/Ease":2,"./MathHelper":9}],20:[function(require,module,exports){ var UI = { - UISettings: require('./UISettings'), - UIBase: require('./UIBase'), Stage: require('./Stage'), Container: require('./Container'), ScrollingContainer: require('./ScrollingContainer'), SortableList: require('./SortableList'), Sprite: require('./Sprite'), SliceSprite: require('./SliceSprite'), - Text: require('./Text') + Slider: require('./Slider'), + ScrollBar: require('./ScrollBar'), + Text: require('./Text'), + MathHelper: require('./MathHelper'), + Tween: require('./Tween'), + Ease: require('./Ease/Ease'), + Ticker: require('./Ticker').shared, + _draggedItems: [] }; + module.exports = UI; -},{"./Container":1,"./ScrollingContainer":2,"./SliceSprite":3,"./SortableList":4,"./Sprite":5,"./Stage":6,"./Text":7,"./UIBase":9,"./UISettings":10}],9:[function(require,module,exports){ +},{"./Container":1,"./Ease/Ease":2,"./MathHelper":9,"./ScrollBar":10,"./ScrollingContainer":11,"./SliceSprite":12,"./Slider":13,"./SortableList":14,"./Sprite":15,"./Stage":16,"./Text":17,"./Ticker":18,"./Tween":19}],21:[function(require,module,exports){ var UISettings = require('./UISettings'), - UI = require('./UI') + UI = require('./UI'), + DragEvent = require('./Interaction/DragEvent'), + DragDropController = require('./Interaction/DragDropController'); /** * Base class of all UIObjects @@ -523,14 +1827,52 @@ var UISettings = require('./UISettings'), */ function UIBase(width, height) { this.container = new PIXI.Container(); - this.setting = new UISettings(); this.children = []; this.parent = null; - this.width = width || 0; - this.height = height || 0; - this._draggable = false; - this.container.interactiveChildren = true; + this.stage = null; + this.initialized = false; + this.dragInitialized = false; + this.dropInitialized = false; + this.dirty = true; + this._oldWidth = -1; + this._oldHeight = -1; + + + + if (width && isNaN(width) && width.indexOf('%') != -1) { + this.setting.widthPct = parseFloat(width.replace('%', '')) * 0.01; + } + else { + this.setting.widthPct = null; + } + + if (height && isNaN(height) && height.indexOf('%') != -1) + this.setting.heightPct = parseFloat(height.replace('%', '')) * 0.01; + else { + this.setting.heightPct = null; + } + + this.setting.width = width || 0; + this.setting.height = height || 0; + + //actual values + this._width = 0; + this._height = 0; + this._minWidth = null; + this._minHeight = null; + this._maxWidth = null; + this._maxHeight = null; + this._anchorLeft = null; + this._anchorRight = null; + this._anchorTop = null; + this._anchorBottom = null; + this._left = null; + this._right = null; + this._top = null; + this._bottom = null; + + this._dragPosition = null; //used for overriding positions if tweens is playing } UIBase.prototype.constructor = UIBase; @@ -541,10 +1883,29 @@ module.exports = UIBase; * * @private */ -UIBase.prototype.updatesettings = function () { +UIBase.prototype.updatesettings = function (updateChildren, updateParent) { + + if (!this.initialized) { + if (this.parent !== null && this.parent.stage !== null && this.parent.initialized) { + this.initialize(); + } + else { + return; + } + } + + if (updateParent) + this.updateParent(); + this.baseupdate(); this.update(); - this.updateChildren(); + + if (updateChildren) + this.updateChildren(); + + + + }; /** @@ -556,6 +1917,18 @@ UIBase.prototype.update = function () { }; +/** + * Updates the parent + * + * @private + */ +UIBase.prototype.updateParent = function () { + if (this.parent !== null) { + if (this.parent.updatesettings) { + this.parent.updatesettings(false, true); + } + } +}; /** @@ -564,164 +1937,168 @@ UIBase.prototype.update = function () { * @private */ UIBase.prototype.baseupdate = function () { - var parentWidth = this.parent !== null ? this.parent.width : 0; - var parentHeight = this.parent !== null ? this.parent.height : 0; - this.setting.height = this.setting._height; - this.setting.width = this.setting._width; - - //percentage convertions - if (this.setting.widthPct !== null) - this.setting.width = parentWidth * this.setting.widthPct; - if (this.setting.heightPct !== null) - this.setting.height = parentHeight * this.setting.heightPct; - if (this.setting.minWidthPct !== null) - this.setting.minWidth = parentWidth * this.setting.minWidthPct; - if (this.setting.minHeightPct !== null) - this.setting.minHeight = parentHeight * this.setting.minHeightPct; - if (this.setting.maxWidthPct !== null) - this.setting.maxWidth = parentWidth * this.setting.maxWidthPct; - if (this.setting.maxHeightPct !== null) - this.setting.maxHeight = parentHeight * this.setting.maxHeightPct; - if (this.setting.leftPct !== null) - this.setting.left = parentWidth * this.setting.leftPct; - if (this.setting.rightPct !== null) - this.setting.right = parentWidth * this.setting.rightPct; - if (this.setting.topPct !== null) - this.setting.top = parentHeight * this.setting.topPct; - if (this.setting.bottomPct !== null) - this.setting.bottom = parentHeight * this.setting.bottomPct; - if (this.setting.anchorLeftPct !== null) - this.setting.anchorLeft = parentWidth * this.setting.anchorLeftPct; - if (this.setting.anchorRightPct !== null) - this.setting.anchorRight = parentWidth * this.setting.anchorRightPct; - if (this.setting.anchorTopPct !== null) - this.setting.anchorTop = parentHeight * this.setting.anchorTopPct; - if (this.setting.anchorBottomPct !== null) - this.setting.anchorBottom = parentHeight * this.setting.anchorBottomPct; - - if (this.horizontalAlign === null) { - //get anchors (use left right if conflict) - var anchorLeft = this.anchorLeft; - var anchorRight = this.anchorRight; - if (anchorLeft !== null && anchorRight === null && this.right !== null) - anchorRight = this.right; - else if (anchorLeft === null && anchorRight !== null && this.left !== null) - anchorLeft = this.left; - else if (anchorLeft === null && anchorRight === null && this.left !== null && this.right !== null) { - anchorLeft = this.left; - anchorRight = this.right; - } - - var useHorizontalAnchor = anchorLeft !== null || anchorRight !== null; - var useLeftRight = !useHorizontalAnchor && (this.left !== null || this.right !== null); - - if (useLeftRight) { - if (this.left !== null) - this.container.position.x = this.left; - else if (this.right !== null) - this.container.position.x = parentWidth - this.right; - } - else if (useHorizontalAnchor) { - if (anchorLeft !== null && anchorRight === null) - this.container.position.x = anchorLeft; - else if (anchorLeft === null && anchorRight !== null) - this.container.position.x = parentWidth - this.width - anchorRight; - else if (anchorLeft !== null && anchorRight !== null) { - this.container.position.x = anchorLeft; - this.setting.width = parentWidth - anchorLeft - anchorRight; - } - this.container.position.x += this.pivotX * this.setting.width; - } - else { - this.container.position.x = 0; - } - } + //return if parent size didnt change + if (this.parent !== null) { + var parentHeight, parentWidth; + + + + + //transform convertion (% etc) + this.dirty = true; + this.i1 = this._width = this.actual_width; + this.i2 = this._height = this.actual_height; + this.i3 = this._minWidth = this.actual_minWidth; + this.i4 = this._minHeight = this.actual_minHeight; + this.i5 = this._maxWidth = this.actual_maxWidth; + this.i6 = this._maxHeight = this.actual_maxHeight; + this.i7 = this._anchorLeft = this.actual_anchorLeft; + this.i8 = this._anchorRight = this.actual_anchorRight; + this.i9 = this._anchorTop = this.actual_anchorTop; + this.i10 = this._anchorBottom = this.actual_anchorBottom; + this.i11 = this._left = this.actual_left; + this.i12 = this._right = this.actual_right; + this.i13 = this._top = this.actual_top; + this.i14 = this._bottom = this.actual_bottom; + this.i15 = parentWidth = this.parent._width; + this.i16 = parentHeight = this.parent._height; + this.i17 = this.scaleX; + this.i18 = this.scaleY; + this.i19 = this.pivotX; + this.i20 = this.pivotY; + this.i21 = this.alpha; + this.dirty = false; + + + + if (this.horizontalAlign === null) { + //get anchors (use left right if conflict) + if (this._anchorLeft !== null && this._anchorRight === null && this._right !== null) + this._anchorRight = this._right; + else if (this._anchorLeft === null && this._anchorRight !== null && this._left !== null) + this._anchorLeft = this._left; + else if (this._anchorLeft === null && this._anchorRight === null && this._left !== null && this._right !== null) { + this._anchorLeft = this._left; + this._anchorRight = this._right; + } + + + var useHorizontalAnchor = this._anchorLeft !== null || this._anchorRight !== null; + var useLeftRight = !useHorizontalAnchor && (this._left !== null || this._right !== null); - if (this.verticalAlign === null) { - //get anchors (use top bottom if conflict) - var anchorTop = this.anchorTop; - var anchorBottom = this.anchorBottom; - if (anchorTop !== null && anchorBottom === null && this.bottom !== null) - anchorBottom = this.bottom; - if (anchorTop === null && anchorBottom !== null && this.top !== null) - anchorTop = this.top; - - var useVerticalAnchor = anchorTop !== null || anchorBottom !== null; - var useTopBottom = !useVerticalAnchor && (this.top !== null || this.bottom !== null); - - if (useTopBottom) { - if (this.top !== null) - this.container.position.y = this.top; - else if (this.bottom !== null) - this.container.position.y = parentHeight - this.bottom; - } - else if (useVerticalAnchor) { - if (anchorTop !== null && anchorBottom === null) - this.container.position.y = anchorTop; - else if (anchorTop === null && anchorBottom !== null) - this.container.position.y = parentHeight - this.height - anchorBottom; - else if (anchorTop !== null && anchorBottom !== null) { - this.container.position.y = anchorTop; - this.setting.height = parentHeight - anchorTop - anchorBottom; - } - this.container.position.y += this.pivotY * this.setting.width; + if (useLeftRight) { + if (this._left !== null) + this.container.position.x = this._left; + else if (this._right !== null) + this.container.position.x = parentWidth - this._right; + } + else if (useHorizontalAnchor) { + + if (this._anchorLeft !== null && this._anchorRight === null) + this.container.position.x = this._anchorLeft; + else if (this._anchorLeft === null && this._anchorRight !== null) + this.container.position.x = parentWidth - this._width - this._anchorRight; + else if (this._anchorLeft !== null && this._anchorRight !== null) { + this.container.position.x = this._anchorLeft; + this._width = parentWidth - this._anchorLeft - this._anchorRight; + } + this.container.position.x += this.pivotX * this._width; + } + else { + this.container.position.x = 0; + } } - else { - this.container.position.y = 0; + + + + if (this.verticalAlign === null) { + //get anchors (use top bottom if conflict) + if (this._anchorTop !== null && this._anchorBottom === null && this._bottom !== null) + this._anchorBottom = this._bottom; + if (this._anchorTop === null && this._anchorBottom !== null && this._top !== null) + this._anchorTop = this._top; + + var useVerticalAnchor = this._anchorTop !== null || this._anchorBottom !== null; + var useTopBottom = !useVerticalAnchor && (this._top !== null || this._bottom !== null); + + if (useTopBottom) { + if (this._top !== null) + this.container.position.y = this._top; + else if (this._bottom !== null) + this.container.position.y = parentHeight - this._bottom; + } + else if (useVerticalAnchor) { + if (this._anchorTop !== null && this._anchorBottom === null) + this.container.position.y = this._anchorTop; + else if (this._anchorTop === null && this._anchorBottom !== null) + this.container.position.y = parentHeight - this._height - this._anchorBottom; + else if (this._anchorTop !== null && this._anchorBottom !== null) { + this.container.position.y = this._anchorTop; + this._height = parentHeight - this._anchorTop - this._anchorBottom; + } + this.container.position.y += this.pivotY * this._width; + } + else { + this.container.position.y = 0; + } } - } - //min/max sizes - if (this.setting.maxWidth !== null && this.setting.width > this.setting.maxWidth) this.setting.width = this.setting.maxWidth; - if (this.setting.width < this.setting.minWidth) this.setting.width = this.setting.minWidth; + //min/max sizes + if (this._maxWidth !== null && this._width > this._maxWidth) this._width = this._maxWidth; + if (this._width < this._minWidth) this._width = this._minWidth; - if (this.setting.maxHeight !== null && this.setting.height > this.setting.maxHeight) this.setting.height = this.setting.maxHeight; - if (this.setting.height < this.setting.minHeight) this.setting.height = this.setting.minHeight; + if (this._maxHeight !== null && this._height > this._maxHeight) this._height = this._maxHeight; + if (this._height < this._minHeight) this._height = this._minHeight; - //pure vertical/horizontal align - if (this.horizontalAlign !== null) { - if (this.horizontalAlign == "center") - this.container.position.x = parentWidth * 0.5 - this.width * 0.5; - else if (this.horizontalAlign == "right") - this.container.position.x = parentWidth - this.width; - else - this.container.position.x = 0; - this.container.position.x += this.width * this.pivotX; - } - if (this.verticalAlign !== null) { - if (this.verticalAlign == "middle") - this.container.position.y = parentHeight * 0.5 - this.height * 0.5; - else if (this.verticalAlign == "bottom") - this.container.position.y = parentHeight - this.height; - else - this.container.position.y = 0; - this.container.position.y += this.height * this.pivotY; - } + //pure vertical/horizontal align + if (this.horizontalAlign !== null) { + if (this.horizontalAlign == "center") + this.container.position.x = parentWidth * 0.5 - this._width * 0.5; + else if (this.horizontalAlign == "right") + this.container.position.x = parentWidth - this._width; + else + this.container.position.x = 0; + this.container.position.x += this._width * this.pivotX; + } + if (this.verticalAlign !== null) { + if (this.verticalAlign == "middle") + this.container.position.y = parentHeight * 0.5 - this._height * 0.5; + else if (this.verticalAlign == "bottom") + this.container.position.y = parentHeight - this._height; + else + this.container.position.y = 0; + this.container.position.y += this._height * this.pivotY; + } - //Unrestricted dragging - if (this.dragging && !this.setting.dragRestricted) { - this.container.position.x = this.left; - this.container.position.y = this.top; - } + //Unrestricted dragging + if (this.dragging && !this.setting.dragRestricted) { + this.container.position.x = this._dragPosition.x; + this.container.position.y = this._dragPosition.y; + } - //scale - if (this.setting.scaleX !== null) this.container.scale.x = this.setting.scaleX; - if (this.setting.scaleY !== null) this.container.scale.y = this.setting.scaleY; + //scale + if (this.setting.scaleX !== null) this.container.scale.x = this.setting.scaleX; + if (this.setting.scaleY !== null) this.container.scale.y = this.setting.scaleY; - //pivot - if (this.setting.pivotX !== null) this.container.pivot.x = this.setting.width * this.setting.pivotX; - if (this.setting.pivotY !== null) this.container.pivot.y = this.setting.height * this.setting.pivotY; + //pivot + if (this.setting.pivotX !== null) this.container.pivot.x = this._width * this.setting.pivotX; + if (this.setting.pivotY !== null) this.container.pivot.y = this._height * this.setting.pivotY; - if (this.setting.alpha !== null) this.container.alpha = this.setting.alpha; - if (this.setting.rotation !== null) this.container.rotation = this.setting.rotation; + if (this.setting.alpha !== null) this.container.alpha = this.setting.alpha; + if (this.setting.rotation !== null) this.container.rotation = this.setting.rotation; - this.container.position.x = Math.round(this.container.position.x); - this.container.position.y = Math.round(this.container.position.y); + //make pixel perfect + this._width = Math.round(this._width); + this._height = Math.round(this._height); + this.container.position.x = Math.round(this.container.position.x); + this.container.position.y = Math.round(this.container.position.y); + } }; + /** * Updates all UI Children * @@ -729,7 +2106,7 @@ UIBase.prototype.baseupdate = function () { */ UIBase.prototype.updateChildren = function () { for (var i = 0; i < this.children.length; i++) { - this.children[i].updatesettings(); + this.children[i].updatesettings(true); } }; @@ -748,7 +2125,7 @@ UIBase.prototype.addChild = function (UIObject) { UIObject.parent = this; this.container.addChild(UIObject.container); this.children.push(UIObject); - this.updatesettings(); + this.updatesettings(true, true); } return UIObject; @@ -764,156 +2141,180 @@ UIBase.prototype.removeChild = function (UIObject) { else { var index = this.children.indexOf(UIObject); if (index !== -1) { + var oldUIParent = UIObject.parent; + var oldParent = UIObject.container.parent; UIObject.container.parent.removeChild(UIObject.container); this.children.splice(index, 1); UIObject.parent = null; + + //oldParent._recursivePostUpdateTransform(); + setTimeout(function () { //hack but cant get the transforms to update propertly otherwice? + if (oldUIParent.updatesettings) + oldUIParent.updatesettings(true, true); + }, 0); } } }; -UIBase.prototype.clearDraggable = function () { - if (this.setting.draggable) { - this.container.removeListener('mousedown', this.onDragMove); - this.container.removeListener('touchstart', this.onDragMove); - document.removeEventListener("mousemove", this.onDragMove); - document.removeEventListener("touchmove", this.onDragMove); - document.removeEventListener('mouseup', this.onDragEnd); - document.removeEventListener('mouseupoutside', this.onDragEnd); - document.removeEventListener('touchend', this.onDragEnd); - document.removeEventListener('touchendoutside', this.onDragEnd); - this.setting.draggable = false; +/** + * Initializes the object when its added to an UIStage + * + * @private + */ +UIBase.prototype.initialize = function () { + this.initialized = true; + this.stage = this.parent.stage; + if (this.draggable) { + this.initDraggable(); } -} - -UIBase.prototype.initDraggable = function () { - if (!this.setting.draggable) { - var container = this.container, - uiobject = this, - containerStart = new PIXI.Point(), - mouseStart = new PIXI.Point(), - stageOffset = new PIXI.Point(); - - this.container.interactive = true; - this.onDragStart = function (event) { - if (!uiobject.dragging) { - mouseStart.set(event.data.originalEvent.clientX, event.data.originalEvent.clientY); - containerStart.copy(container.position); - document.addEventListener('mousemove', uiobject.onDragMove); - document.addEventListener('touchmove', uiobject.onDragMove); - } - } - - this.onDragMove = function (event) { - if (!uiobject.dragging) { - document.addEventListener('mouseup', uiobject.onDragEnd); - document.addEventListener('mouseupoutside', uiobject.onDragEnd); - document.addEventListener('touchend', uiobject.onDragEnd); - document.addEventListener('touchendoutside', uiobject.onDragEnd); - uiobject.dragging = true; - container.interactive = false; - PIXI.UI._dropTarget = null; + if (this.droppable) { + this.initDroppable(); + } +}; - if (uiobject.dragContainer) { +UIBase.prototype.clearDraggable = function () { + if (this.dragInitialized) { + this.dragInitialized = false; + this.drag.stopEvent(); + } +}; - var c = uiobject.dragContainer.container ? uiobject.dragContainer.container : uiobject.dragContainer; - console.log("before:", uiobject.container.worldTransform); +UIBase.prototype.initDraggable = function () { + if (!this.dragInitialized) { + this.dragInitialized = true; + var containerStart = new PIXI.Point(), + stageOffset = new PIXI.Point(), + self = this; + + this._dragPosition = new PIXI.Point(); + this.drag = new DragEvent(this); + this.drag.onDragStart = function (e) { + var added = DragDropController.add(this, e); + if (!this.dragging && added) { + this.dragging = true; + this.container.interactive = false; + containerStart.copy(this.container.position); + if (this.dragContainer) { + var c = this.dragContainer.container ? this.dragContainer.container : this.dragContainer; if (c) { - stageOffset.set(c.worldTransform.tx - uiobject.parent.container.worldTransform.tx, c.worldTransform.ty - uiobject.parent.container.worldTransform.ty); - c.addChild(uiobject.container); + //_this.container._recursivePostUpdateTransform(); + stageOffset.set(c.worldTransform.tx - this.parent.container.worldTransform.tx, c.worldTransform.ty - this.parent.container.worldTransform.ty); + c.addChild(this.container); } } else { stageOffset.set(0); } - } - var x = event.clientX - mouseStart.x, - y = event.clientY - mouseStart.y; - - uiobject.x = containerStart.x + x - stageOffset.x; - uiobject.y = containerStart.y + y - stageOffset.y; - } + } + }; - this.onDragEnd = function (event) { - if (uiobject.dragging) { - uiobject.dragging = false; - container.interactive = true; - document.removeEventListener("mousemove", uiobject.onDragMove); - document.removeEventListener("touchmove", uiobject.onDragMove); - document.removeEventListener('mouseup', uiobject.onDragEnd); - document.removeEventListener('mouseupoutside', uiobject.onDragEnd); - document.removeEventListener('touchend', uiobject.onDragEnd); - document.removeEventListener('touchendoutside', uiobject.onDragEnd); - + this.drag.onDragMove = function (e, offset) { + if (this.dragging) { + this._dragPosition.set(containerStart.x + offset.x - stageOffset.x, containerStart.y + offset.y - stageOffset.y); + this.x = this._dragPosition.x; + this.y = this._dragPosition.y; + } + }; + this.drag.onDragEnd = function (e) { + if (this.dragging) { + this.dragging = false; + //Return to container after 1ms if not picked up by a droppable setTimeout(function () { - var x = event.clientX - mouseStart.x, - y = event.clientY - mouseStart.y; - uiobject.x = containerStart.x + x; - uiobject.y = containerStart.y + y; - - if (PIXI.UI._dropTarget && PIXI.UI._dropTarget.dragGroup == uiobject.dragGroup) { - PIXI.UI._dropTarget.addChild(uiobject); + self.container.interactive = true; + var item = DragDropController.getItem(self); + if (item) { + var container = self.parent === self.stage ? self.stage : self.parent.container; + container.toLocal(self.container.position, self.container.parent, self); + if (container != self.container) { + self.parent.addChild(self); + } } - else { - uiobject.parent.addChild(uiobject); - } - }, 0); - + }, 1); } - } - - - container.on('mousedown', this.onDragStart); - container.on('touchstart', this.onDragStart); - this.setting.draggable = true; + }; } }; UIBase.prototype.clearDroppable = function () { - if (this.setting.droppable) { + if (this.dropInitialized) { + this.dropInitialized = false; this.container.removeListener('mouseup', this.onDrop); this.container.removeListener('touchend', this.onDrop); - this.setting.droppable = false; } -} +}; UIBase.prototype.initDroppable = function () { - if (!this.setting.droppable) { + if (!this.dropInitialized) { + this.dropInitialized = true; var container = this.container, - uiobject = this; + self = this; this.container.interactive = true; this.onDrop = function (event) { - if (uiobject.droppableParent != null) - PIXI.UI._dropTarget = uiobject.droppableParent; - else - PIXI.UI._dropTarget = uiobject; - } + var item = DragDropController.getEventItem(event, self.dropGroup); + if (item && item.dragging) { + item.dragging = false; + item.container.interactive = true; + var parent = self.droppableReparent !== null ? self.droppableReparent : self; + parent.container.toLocal(item.container.position, item.container.parent, item); + if (parent.container != item.container.parent) + parent.addChild(item); + } + }; container.on('mouseup', this.onDrop); container.on('touchend', this.onDrop); - this.setting.droppable = true; } }; Object.defineProperties(UIBase.prototype, { + x: { + get: function () { + return this.setting.left; + }, + set: function (val) { + this.left = val; + } + }, + y: { + get: function () { + return this.setting.top; + }, + set: function (val) { + this.top = val; + } + }, width: { get: function () { return this.setting.width; }, set: function (val) { if (isNaN(val) && val.indexOf('%') !== -1) { - val = val.replace('%', ''); - this.setting.widthPct = parseFloat(val) * 0.01; + this.setting.width = val; + this.setting.widthPct = parseFloat(val.replace('%', '')) * 0.01; } else { + this.setting.width = val; this.setting.widthPct = null; - this.setting._width = val; } - this.updatesettings(); + this.updatesettings(true); + } + }, + actual_width: { + get: function () { + if (this.dirty) { + if (this.setting.widthPct !== null) { + this._width = this.parent._width * this.setting.widthPct; + } + else { + this._width = this.setting.width; + } + } + return this._width; } }, height: { @@ -922,14 +2323,27 @@ Object.defineProperties(UIBase.prototype, { }, set: function (val) { if (isNaN(val) && val.indexOf('%') !== -1) { - val = val.replace('%', ''); - this.setting.heightPct = parseFloat(val) * 0.01; + this.setting.height = val; + this.setting.heightPct = parseFloat(val.replace('%', '')) * 0.01; } else { + this.setting.height = val; this.setting.heightPct = null; - this.setting._height = val; } - this.updatesettings(); + this.updatesettings(true); + } + }, + actual_height: { + get: function () { + if (this.dirty) { + if (this.setting.heightPct !== null) { + this._height = this.parent._height * this.setting.heightPct; + } + else { + this._height = this.setting.height; + } + } + return this._height; } }, minWidth: { @@ -938,14 +2352,27 @@ Object.defineProperties(UIBase.prototype, { }, set: function (val) { if (isNaN(val) && val.indexOf('%') !== -1) { - val = val.replace('%', ''); - this.setting.percentageMinWidth = parseFloat(val) * 0.01; + this.setting.minWidth = val; + this.setting.minWidthPct = parseFloat(val.replace('%', '')) * 0.01; } else { - this.setting.percentageMinWidth = null; this.setting.minWidth = val; + this.setting.minWidthPct = null; + } + this.updatesettings(true); + } + }, + actual_minWidth: { + get: function () { + if (this.dirty) { + if (this.setting.minWidthPct !== null) { + this._minWidth = this.parent._width * this.setting.minWidthPct; + } + else { + this._minWidth = this.setting.minWidth; + } } - this.updatesettings(); + return this._minWidth; } }, minHeight: { @@ -954,14 +2381,27 @@ Object.defineProperties(UIBase.prototype, { }, set: function (val) { if (isNaN(val) && val.indexOf('%') !== -1) { - val = val.replace('%', ''); - this.setting.percentageMinHeight = parseFloat(val) * 0.01; + this.setting.minHeight = val; + this.setting.minHeightPct = parseFloat(val.replace('%', '')) * 0.01; } else { - this.setting.percentageMinHeight = null; this.setting.minHeight = val; + this.setting.minHeightPct = null; + } + this.updatesettings(true); + } + }, + actual_minHeight: { + get: function () { + if (this.dirty) { + if (this.setting.minHeightPct !== null) { + this._minHeight = this.parent._height * this.setting.minHeightPct; + } + else { + this._minHeight = this.setting.minHeight; + } } - this.updatesettings(); + return this._minHeight; } }, maxWidth: { @@ -970,14 +2410,27 @@ Object.defineProperties(UIBase.prototype, { }, set: function (val) { if (isNaN(val) && val.indexOf('%') !== -1) { - val = val.replace('%', ''); - this.setting.maxWidthPct = parseFloat(val) * 0.01; + this.setting.maxWidth = val; + this.setting.maxWidthPct = parseFloat(val.replace('%', '')) * 0.01; } else { - this.setting.maxWidthPct = null; this.setting.maxWidth = val; + this.setting.maxWidthPct = null; + } + this.updatesettings(true); + } + }, + actual_maxWidth: { + get: function () { + if (this.dirty) { + if (this.setting.maxWidthPct !== null) { + this._maxWidth = this.parent._width * this.setting.maxWidthPct; + } + else { + this._maxWidth = this.setting.maxWidth; + } } - this.updatesettings(); + return this._maxWidth; } }, maxHeight: { @@ -986,14 +2439,27 @@ Object.defineProperties(UIBase.prototype, { }, set: function (val) { if (isNaN(val) && val.indexOf('%') !== -1) { - val = val.replace('%', ''); - this.setting.maxHeightPct = parseFloat(val) * 0.01; + this.setting.maxHeight = val; + this.setting.maxHeightPct = parseFloat(val.replace('%', '')) * 0.01; } else { - this.setting.maxHeightPct = null; this.setting.maxHeight = val; + this.setting.maxHeightPct = null; } - this.updatesettings(); + this.updatesettings(true); + } + }, + actual_maxHeight: { + get: function () { + if (this.dirty) { + if (this.setting.maxHeightPct !== null) { + this._maxHeight = this.parent._height * this.setting.maxHeightPct; + } + else { + this._maxHeight = this.setting.maxHeight; + } + } + return this._maxHeight; } }, anchorLeft: { @@ -1002,14 +2468,27 @@ Object.defineProperties(UIBase.prototype, { }, set: function (val) { if (isNaN(val) && val.indexOf('%') !== -1) { - val = val.replace('%', ''); - this.setting.anchorLeftPct = parseFloat(val) * 0.01; + this.setting.anchorLeft = val; + this.setting.anchorLeftPct = parseFloat(val.replace('%', '')) * 0.01; } else { - this.setting.anchorLeftPct = null; this.setting.anchorLeft = val; + this.setting.anchorLeftPct = null; + } + this.updatesettings(true); + } + }, + actual_anchorLeft: { + get: function () { + if (this.dirty) { + if (this.setting.anchorLeftPct !== null) { + this._anchorLeft = this.parent._width * this.setting.anchorLeftPct; + } + else { + this._anchorLeft = this.setting.anchorLeft; + } } - this.updatesettings(); + return this._anchorLeft; } }, anchorRight: { @@ -1018,14 +2497,27 @@ Object.defineProperties(UIBase.prototype, { }, set: function (val) { if (isNaN(val) && val.indexOf('%') !== -1) { - val = val.replace('%', ''); - this.setting.anchorRightPct = parseFloat(val) * 0.01; + this.setting.anchorRight = val; + this.setting.anchorRightPct = parseFloat(val.replace('%', '')) * 0.01; } else { - this.setting.anchorRightPct = null; this.setting.anchorRight = val; + this.setting.anchorRightPct = null; + } + this.updatesettings(true); + } + }, + actual_anchorRight: { + get: function () { + if (this.dirty) { + if (this.setting.anchorRightPct !== null) { + this._anchorRight = this.parent._width * this.setting.anchorRightPct; + } + else { + this._anchorRight = this.setting.anchorRight; + } } - this.updatesettings(); + return this._anchorRight; } }, anchorTop: { @@ -1034,14 +2526,27 @@ Object.defineProperties(UIBase.prototype, { }, set: function (val) { if (isNaN(val) && val.indexOf('%') !== -1) { - val = val.replace('%', ''); - this.setting.anchorTopPct = parseFloat(val) * 0.01; + this.setting.anchorTop = val; + this.setting.anchorTopPct = parseFloat(val.replace('%', '')) * 0.01; } else { - this.setting.anchorTopPct = null; this.setting.anchorTop = val; + this.setting.anchorTopPct = null; + } + this.updatesettings(true); + } + }, + actual_anchorTop: { + get: function () { + if (this.dirty) { + if (this.setting.anchorTopPct !== null) { + this._anchorTop = this.parent._height * this.setting.anchorTopPct; + } + else { + this._anchorTop = this.setting.anchorTop; + } } - this.updatesettings(); + return this._anchorTop; } }, anchorBottom: { @@ -1050,14 +2555,143 @@ Object.defineProperties(UIBase.prototype, { }, set: function (val) { if (isNaN(val) && val.indexOf('%') !== -1) { - val = val.replace('%', ''); - this.setting.anchorBottomPct = parseFloat(val) * 0.01; + this.setting.anchorBottom = val; + this.setting.anchorBottomPct = parseFloat(val.replace('%', '')) * 0.01; } else { - this.setting.anchorBottomPct = null; this.setting.anchorBottom = val; + this.setting.anchorBottomPct = null; + } + this.updatesettings(true); + } + }, + actual_anchorBottom: { + get: function () { + if (this.dirty) { + if (this.setting.anchorBottomPct !== null) { + this._anchorBottom = this.parent._height * this.setting.anchorBottomPct; + } + else { + this._anchorBottom = this.setting.anchorBottom; + } + } + return this._anchorBottom; + } + }, + left: { + get: function () { + return this.setting.left; + }, + set: function (val) { + if (isNaN(val) && val.indexOf('%') !== -1) { + this.setting.left = val; + this.setting.leftPct = parseFloat(val.replace('%', '')) * 0.01; + } + else { + this.setting.left = val; + this.setting.leftPct = null; + } + this.updatesettings(true); + } + }, + actual_left: { + get: function () { + if (this.dirty) { + if (this.setting.leftPct !== null) { + this._left = this.parent._width * this.setting.leftPct; + } + else { + this._left = this.setting.left; + } + } + return this._left; + } + }, + right: { + get: function () { + return this.setting.right; + }, + set: function (val) { + if (isNaN(val) && val.indexOf('%') !== -1) { + this.setting.right = val; + this.setting.rightPct = parseFloat(val.replace('%', '')) * 0.01; } - this.updatesettings(); + else { + this.setting.right = val; + this.setting.rightPct = null; + } + this.updatesettings(true); + } + }, + actual_right: { + get: function () { + if (this.dirty) { + if (this.setting.rightPct !== null) { + this._right = this.parent._width * this.setting.rightPct; + } + else { + this._right = this.setting.right; + } + } + return this._right; + } + }, + top: { + get: function () { + return this.setting.top; + }, + set: function (val) { + if (isNaN(val) && val.indexOf('%') !== -1) { + this.setting.top = val; + this.setting.topPct = parseFloat(val.replace('%', '')) * 0.01; + } + else { + this.setting.top = val; + this.setting.topPct = null; + } + this.updatesettings(true); + } + }, + actual_top: { + get: function () { + if (this.dirty) { + if (this.setting.topPct !== null) { + this._top = this.parent._height * this.setting.topPct; + } + else { + this._top = this.setting.top; + } + } + return this._top; + } + }, + bottom: { + get: function () { + return this.setting.bottom; + }, + set: function (val) { + if (isNaN(val) && val.indexOf('%') !== -1) { + this.setting.bottom = val; + this.setting.bottomPct = parseFloat(val.replace('%', '')) * 0.01; + } + else { + this.setting.bottom = val; + this.setting.bottomPct = null; + } + this.updatesettings(true); + } + }, + actual_bottom: { + get: function () { + if (this.dirty) { + if (this.setting.bottomPct !== null) { + this._bottom = this.parent._height * this.setting.bottomPct; + } + else { + this._bottom = this.setting.bottom; + } + } + return this._bottom; } }, verticalAlign: { @@ -1066,7 +2700,7 @@ Object.defineProperties(UIBase.prototype, { }, set: function (val) { this.setting.verticalAlign = val; - this.updatesettings(); + this.baseupdate(); } }, horizontalAlign: { @@ -1075,7 +2709,7 @@ Object.defineProperties(UIBase.prototype, { }, set: function (val) { this.setting.horizontalAlign = val; - this.updatesettings(); + this.baseupdate(); } }, tint: { @@ -1111,7 +2745,7 @@ Object.defineProperties(UIBase.prototype, { }, set: function (val) { this.setting.blendMode = val; - this.updatesettings(); + this.update(); } }, pivotX: { @@ -1120,7 +2754,8 @@ Object.defineProperties(UIBase.prototype, { }, set: function (val) { this.setting.pivotX = val; - this.updatesettings(); + this.baseupdate(); + this.update(); } }, pivotY: { @@ -1129,14 +2764,16 @@ Object.defineProperties(UIBase.prototype, { }, set: function (val) { this.setting.pivotY = val; - this.updatesettings(); + this.baseupdate(); + this.update(); } }, pivot: { set: function (val) { this.setting.pivotX = val; this.setting.pivotY = val; - this.updatesettings(); + this.baseupdate(); + this.update(); } }, scaleX: { @@ -1145,7 +2782,7 @@ Object.defineProperties(UIBase.prototype, { }, set: function (val) { this.setting.scaleX = val; - this.updatesettings(); + this.container.scale.x = val; } }, scaleY: { @@ -1154,147 +2791,126 @@ Object.defineProperties(UIBase.prototype, { }, set: function (val) { this.setting.scaleY = val; - this.updatesettings(); + this.container.scale.y = val; } }, scale: { + get: function () { + return this.setting.scaleX; + }, set: function (val) { this.setting.scaleX = val; this.setting.scaleY = val; - this.updatesettings(); + this.container.scale.x = val; + this.container.scale.y = val; } }, - left: { + + draggable: { get: function () { - return this.setting.left; + return this.setting.draggable; }, set: function (val) { - if (isNaN(val) && val.indexOf('%') !== -1) { - val = val.replace('%', ''); - this.setting.leftPct = parseFloat(val) * 0.01; - } - else { - this.setting.leftPct = null; - this.setting.left = val; + this.setting.draggable = val; + if (this.initialized) { + if (val) + this.initDraggable(); + else + this.clearDraggable(); } - this.updatesettings(); } }, - right: { + dragRestricted: { get: function () { - return this.setting.right; + return this.setting.dragRestricted; }, set: function (val) { - if (isNaN(val) && val.indexOf('%') !== -1) { - val = val.replace('%', ''); - this.setting.rightPct = parseFloat(val) * 0.01; - } - else { - this.setting.rightPct = null; - this.setting.right = val; - } - this.updatesettings(); + this.setting.dragRestricted = val; } }, - top: { + dragRestrictAxis: { get: function () { - return this.setting.top; + return this.setting.dragRestrictAxis; }, set: function (val) { - if (isNaN(val) && val.indexOf('%') !== -1) { - val = val.replace('%', ''); - this.setting.topPct = parseFloat(val) * 0.01; - } - else { - this.setting.topPct = null; - this.setting.top = val; - } - this.updatesettings(); + this.setting.dragRestrictAxis = val; } }, - bottom: { + dragThreshold: { get: function () { - return this.setting.bottom; + return this.setting.dragThreshold; }, set: function (val) { - if (isNaN(val) && val.indexOf('%') !== -1) { - val = val.replace('%', ''); - this.setting.bottomPct = parseFloat(val) * 0.01; - } - else { - this.setting.bottomPct = null; - this.setting.bottom = val; - } - this.updatesettings(); + this.setting.dragThreshold = val; } }, - x: { + dragGroup: { get: function () { - return this.setting.left; + return this.setting.dragGroup; }, set: function (val) { - this.left = val; + this.setting.dragGroup = val; } }, - y: { + dragContainer: { get: function () { - return this.setting.right; + return this.setting.dragContainer; }, set: function (val) { - this.top = val; + this.setting.dragContainer = val; } }, - draggable: { + droppable: { get: function () { - return this.setting.draggable; + return this.setting.droppable; }, set: function (val) { - if (val) - this.initDraggable(); - else - this.clearDraggable(); + this.setting.droppable = true; + if (this.initialized) { + if (val) + this.initDroppable(); + else + this.clearDroppable(); + } } }, - dragRestricted: { + droppableReparent: { get: function () { - return this.setting.dragRestricted; + return this.setting.droppableReparent; }, set: function (val) { - this.setting.dragRestricted = val; + this.setting.droppableReparent = val; } }, - dragGroup: { + dropGroup: { get: function () { - return this.setting.dragGroup; + return this.setting.dropGroup; }, set: function (val) { - this.setting.dragGroup = val; + this.setting.dropGroup = val; } }, - dragContainer: { + renderable: { get: function () { - return this.setting.dragContainer; + return this.container.renderable; }, set: function (val) { - this.setting.dragContainer = val; + this.container.renderable = val; } }, - droppable: { + visible: { get: function () { - return this.setting.droppable; + return this.container.visible; }, set: function (val) { - if (val) - this.initDroppable(); - else - this.clearDroppable(); + this.container.visible = val; } - }, + } }); -},{"./UI":8,"./UISettings":10}],10:[function(require,module,exports){ +},{"./Interaction/DragDropController":6,"./Interaction/DragEvent":7,"./UI":20,"./UISettings":22}],22:[function(require,module,exports){ /** * Settings object for all UIObjects * @@ -1302,10 +2918,8 @@ Object.defineProperties(UIBase.prototype, { * @memberof PIXI.UI */ function UISettings() { - this._width = 0; this.width = 0; this.widthPct = null; - this._height = 0; this.height = 0; this.heightPct = null; this.minWidth = 0; @@ -1344,9 +2958,13 @@ function UISettings() { this.alpha = null; this.draggable = null; this.dragRestricted = false; + this.dragRestrictAxis = null; //x, y + this.dragThreshold = 0; this.dragGroup = null; this.dragContainer = null; this.droppable = null; + this.droppableReparent = null; + this.dropGroup = null; } @@ -1354,7 +2972,7 @@ module.exports = UISettings; -},{}],11:[function(require,module,exports){ +},{}],23:[function(require,module,exports){ var Library = { UI: require('./UI') @@ -1366,7 +2984,7 @@ Object.assign(PIXI, Library); module.exports = Library; -},{"./UI":8}]},{},[11])(11) +},{"./UI":20}]},{},[23])(23) }); diff --git a/bin/pixi-ui.js.map b/bin/pixi-ui.js.map index c7839d4..ffbecd1 100644 --- a/bin/pixi-ui.js.map +++ b/bin/pixi-ui.js.map @@ -1 +1 @@ -{"version":3,"sources":["node_modules/browser-pack/_prelude.js","src/Container.js","src/ScrollingContainer.js","src/SliceSprite.js","src/SortableList.js","src/Sprite.js","src/Stage.js","src/Text.js","src/UI.js","src/UIBase.js","src/UISettings.js","src"],"names":[],"mappings":";;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AC5BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AC7EA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AC9HA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;ACxFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;ACpCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;ACvFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AClCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;ACZA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AC/wBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AC1DA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"pixi-ui.js","sourcesContent":["(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require==\"function\"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error(\"Cannot find module '\"+o+\"'\");throw f.code=\"MODULE_NOT_FOUND\",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require==\"function\"&&require;for(var o=0;o