var math = require('../math'),
utils = require('../utils'),
DisplayObject = require('./DisplayObject'),
RenderTexture = require('../textures/RenderTexture'),
_tempMatrix = new math.Matrix();
/**
* A Container represents a collection of display objects.
* It is the base class of all display objects that act as a container for other objects.
*
*```js
* var container = new PIXI.Container();
* container.addChild(sprite);
* ```
* @class
* @extends PIXI.DisplayObject
* @memberof PIXI
*/
function Container()
{
DisplayObject.call(this);
/**
* The array of children of this container.
*
* @member {PIXI.DisplayObject[]}
* @readonly
*/
this.children = [];
}
// constructor
Container.prototype = Object.create(DisplayObject.prototype);
Container.prototype.constructor = Container;
module.exports = Container;
Object.defineProperties(Container.prototype, {
/**
* The width of the Container, setting this will actually modify the scale to achieve the value set
*
* @member {number}
* @memberof PIXI.Container#
*/
width: {
get: function ()
{
return this.scale.x * this.getLocalBounds().width;
},
set: function (value)
{
var width = this.getLocalBounds().width;
if (width !== 0)
{
this.scale.x = value / width;
}
else
{
this.scale.x = 1;
}
this._width = value;
}
},
/**
* The height of the Container, setting this will actually modify the scale to achieve the value set
*
* @member {number}
* @memberof PIXI.Container#
*/
height: {
get: function ()
{
return this.scale.y * this.getLocalBounds().height;
},
set: function (value)
{
var height = this.getLocalBounds().height;
if (height !== 0)
{
this.scale.y = value / height ;
}
else
{
this.scale.y = 1;
}
this._height = value;
}
}
});
/**
* Overridable method that can be used by Container subclasses whenever the children array is modified
*
* @private
*/
Container.prototype.onChildrenChange = function () {};
/**
* Adds a child to the container.
*
* You can also add multple items like so: myContainer.addChild(thinkOne, thingTwo, thingThree)
* @param child {PIXI.DisplayObject} The DisplayObject to add to the container
* @return {PIXI.DisplayObject} The child that was added.
*/
Container.prototype.addChild = function (child)
{
var argumentsLength = arguments.length;
// if there is only one argument we can bypass looping through the them
if(argumentsLength > 1)
{
// loop through the arguments property and add all children
// use it the right way (.length and [i]) so that this function can still be optimised by JS runtimes
for (var i = 0; i < argumentsLength; i++)
{
this.addChild( arguments[i] );
}
}
else
{
// if the child has a parent then lets remove it as Pixi objects can only exist in one place
if (child.parent)
{
child.parent.removeChild(child);
}
child.parent = this;
this.children.push(child);
// TODO - lets either do all callbacks or all events.. not both!
this.onChildrenChange(this.children.length-1);
child.emit('added', this);
}
return child;
};
/**
* Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown
*
* @param child {PIXI.DisplayObject} The child to add
* @param index {number} The index to place the child in
* @return {PIXI.DisplayObject} The child that was added.
*/
Container.prototype.addChildAt = function (child, index)
{
if (index >= 0 && index <= this.children.length)
{
if (child.parent)
{
child.parent.removeChild(child);
}
child.parent = this;
this.children.splice(index, 0, child);
// TODO - lets either do all callbacks or all events.. not both!
this.onChildrenChange(index);
child.emit('added', this);
return child;
}
else
{
throw new Error(child + 'addChildAt: The index '+ index +' supplied is out of bounds ' + this.children.length);
}
};
/**
* Swaps the position of 2 Display Objects within this container.
*
* @param child {PIXI.DisplayObject}
* @param child2 {PIXI.DisplayObject}
*/
Container.prototype.swapChildren = function (child, child2)
{
if (child === child2)
{
return;
}
var index1 = this.getChildIndex(child);
var index2 = this.getChildIndex(child2);
if (index1 < 0 || index2 < 0)
{
throw new Error('swapChildren: Both the supplied DisplayObjects must be children of the caller.');
}
this.children[index1] = child2;
this.children[index2] = child;
this.onChildrenChange(index1 < index2 ? index1 : index2);
};
/**
* Returns the index position of a child DisplayObject instance
*
* @param child {PIXI.DisplayObject} The DisplayObject instance to identify
* @return {number} The index position of the child display object to identify
*/
Container.prototype.getChildIndex = function (child)
{
var index = this.children.indexOf(child);
if (index === -1)
{
throw new Error('The supplied DisplayObject must be a child of the caller');
}
return index;
};
/**
* Changes the position of an existing child in the display object container
*
* @param child {PIXI.DisplayObject} The child DisplayObject instance for which you want to change the index number
* @param index {number} The resulting index number for the child display object
*/
Container.prototype.setChildIndex = function (child, index)
{
if (index < 0 || index >= this.children.length)
{
throw new Error('The supplied index is out of bounds');
}
var currentIndex = this.getChildIndex(child);
utils.removeItems(this.children, currentIndex, 1); // remove from old position
this.children.splice(index, 0, child); //add at new position
this.onChildrenChange(index);
};
/**
* Returns the child at the specified index
*
* @param index {number} The index to get the child at
* @return {PIXI.DisplayObject} The child at the given index, if any.
*/
Container.prototype.getChildAt = function (index)
{
if (index < 0 || index >= this.children.length)
{
throw new Error('getChildAt: Supplied index ' + index + ' does not exist in the child list, or the supplied DisplayObject is not a child of the caller');
}
return this.children[index];
};
/**
* Removes a child from the container.
*
* @param child {PIXI.DisplayObject} The DisplayObject to remove
* @return {PIXI.DisplayObject} The child that was removed.
*/
Container.prototype.removeChild = function (child)
{
var argumentsLength = arguments.length;
// if there is only one argument we can bypass looping through the them
if(argumentsLength > 1)
{
// loop through the arguments property and add all children
// use it the right way (.length and [i]) so that this function can still be optimised by JS runtimes
for (var i = 0; i < argumentsLength; i++)
{
this.removeChild( arguments[i] );
}
}
else
{
var index = this.children.indexOf(child);
if (index === -1)
{
return;
}
child.parent = null;
utils.removeItems(this.children, index, 1);
// TODO - lets either do all callbacks or all events.. not both!
this.onChildrenChange(index);
child.emit('removed', this);
}
return child;
};
/**
* Removes a child from the specified index position.
*
* @param index {number} The index to get the child from
* @return {PIXI.DisplayObject} The child that was removed.
*/
Container.prototype.removeChildAt = function (index)
{
var child = this.getChildAt(index);
child.parent = null;
utils.removeItems(this.children, index, 1);
// TODO - lets either do all callbacks or all events.. not both!
this.onChildrenChange(index);
child.emit('removed', this);
return child;
};
/**
* Removes all children from this container that are within the begin and end indexes.
*
* @param beginIndex {number} The beginning position. Default value is 0.
* @param endIndex {number} The ending position. Default value is size of the container.
*/
Container.prototype.removeChildren = function (beginIndex, endIndex)
{
var begin = beginIndex || 0;
var end = typeof endIndex === 'number' ? endIndex : this.children.length;
var range = end - begin;
var removed, i;
if (range > 0 && range <= end)
{
removed = this.children.splice(begin, range);
for (i = 0; i < removed.length; ++i)
{
removed[i].parent = null;
}
this.onChildrenChange(beginIndex);
for (i = 0; i < removed.length; ++i)
{
removed[i].emit('removed', this);
}
return removed;
}
else if (range === 0 && this.children.length === 0)
{
return [];
}
else
{
throw new RangeError('removeChildren: numeric values are outside the acceptable range.');
}
};
/**
* Useful function that returns a texture of the display object that can then be used to create sprites
* This can be quite useful if your displayObject is static / complicated and needs to be reused multiple times.
*
* @param renderer {PIXI.CanvasRenderer|PIXI.WebGLRenderer} The renderer used to generate the texture.
* @param resolution {number} The resolution of the texture being generated
* @param scaleMode {number} See {@link PIXI.SCALE_MODES} for possible values
* @return {PIXI.Texture} a texture of the display object
*/
Container.prototype.generateTexture = function (renderer, resolution, scaleMode)
{
var bounds = this.getLocalBounds();
var renderTexture = new RenderTexture(renderer, bounds.width | 0, bounds.height | 0, scaleMode, resolution);
_tempMatrix.tx = -bounds.x;
_tempMatrix.ty = -bounds.y;
renderTexture.render(this, _tempMatrix);
return renderTexture;
};
/*
* Updates the transform on all children of this container for rendering
*
* @private
*/
Container.prototype.updateTransform = function ()
{
if (!this.visible)
{
return;
}
this.displayObjectUpdateTransform();
for (var i = 0, j = this.children.length; i < j; ++i)
{
this.children[i].updateTransform();
}
};
// performance increase to avoid using call.. (10x faster)
Container.prototype.containerUpdateTransform = Container.prototype.updateTransform;
/**
* Retrieves the bounds of the Container as a rectangle. The bounds calculation takes all visible children into consideration.
*
* @return {PIXI.Rectangle} The rectangular bounding area
*/
Container.prototype.getBounds = function ()
{
if(!this._currentBounds)
{
if (this.children.length === 0)
{
return math.Rectangle.EMPTY;
}
// TODO the bounds have already been calculated this render session so return what we have
var minX = Infinity;
var minY = Infinity;
var maxX = -Infinity;
var maxY = -Infinity;
var childBounds;
var childMaxX;
var childMaxY;
var childVisible = false;
for (var i = 0, j = this.children.length; i < j; ++i)
{
var child = this.children[i];
if (!child.visible)
{
continue;
}
childBounds = this.children[i].getBounds();
if (childBounds === math.Rectangle.EMPTY) {
continue;
}
childVisible = true;
minX = minX < childBounds.x ? minX : childBounds.x;
minY = minY < childBounds.y ? minY : childBounds.y;
childMaxX = childBounds.width + childBounds.x;
childMaxY = childBounds.height + childBounds.y;
maxX = maxX > childMaxX ? maxX : childMaxX;
maxY = maxY > childMaxY ? maxY : childMaxY;
}
if (!childVisible)
{
this._currentBounds = math.Rectangle.EMPTY;
return this._currentBounds;
}
var bounds = this._bounds;
bounds.x = minX;
bounds.y = minY;
bounds.width = maxX - minX;
bounds.height = maxY - minY;
this._currentBounds = bounds;
}
return this._currentBounds;
};
Container.prototype.containerGetBounds = Container.prototype.getBounds;
/**
* Retrieves the non-global local bounds of the Container as a rectangle.
* The calculation takes all visible children into consideration.
*
* @return {PIXI.Rectangle} The rectangular bounding area
*/
Container.prototype.getLocalBounds = function ()
{
var matrixCache = this.worldTransform;
this.worldTransform = math.Matrix.IDENTITY;
for (var i = 0, j = this.children.length; i < j; ++i)
{
this.children[i].updateTransform();
}
this.worldTransform = matrixCache;
this._currentBounds = null;
return this.getBounds( math.Matrix.IDENTITY );
};
/**
* Renders the object using the WebGL renderer
*
* @param renderer {PIXI.WebGLRenderer} The renderer
*/
Container.prototype.renderWebGL = function (renderer)
{
// if the object is not visible or the alpha is 0 then no need to render this element
if (!this.visible || this.worldAlpha <= 0 || !this.renderable)
{
return;
}
var i, j;
// do a quick check to see if this element has a mask or a filter.
if (this._mask || this._filters)
{
renderer.currentRenderer.flush();
// push filter first as we need to ensure the stencil buffer is correct for any masking
if (this._filters && this._filters.length)
{
renderer.filterManager.pushFilter(this, this._filters);
}
if (this._mask)
{
renderer.maskManager.pushMask(this, this._mask);
}
renderer.currentRenderer.start();
// add this object to the batch, only rendered if it has a texture.
this._renderWebGL(renderer);
// now loop through the children and make sure they get rendered
for (i = 0, j = this.children.length; i < j; i++)
{
this.children[i].renderWebGL(renderer);
}
renderer.currentRenderer.flush();
if (this._mask)
{
renderer.maskManager.popMask(this, this._mask);
}
if (this._filters)
{
renderer.filterManager.popFilter();
}
renderer.currentRenderer.start();
}
else
{
this._renderWebGL(renderer);
// simple render children!
for (i = 0, j = this.children.length; i < j; ++i)
{
this.children[i].renderWebGL(renderer);
}
}
};
/**
* To be overridden by the subclass
*
* @param renderer {PIXI.WebGLRenderer} The renderer
* @private
*/
Container.prototype._renderWebGL = function (renderer) // jshint unused:false
{
// this is where content itself gets rendered...
};
/**
* To be overridden by the subclass
*
* @param renderer {PIXI.CanvasRenderer} The renderer
* @private
*/
Container.prototype._renderCanvas = function (renderer) // jshint unused:false
{
// this is where content itself gets rendered...
};
/**
* Renders the object using the Canvas renderer
*
* @param renderer {PIXI.CanvasRenderer} The renderer
*/
Container.prototype.renderCanvas = function (renderer)
{
// if not visible or the alpha is 0 then no need to render this
if (!this.visible || this.alpha <= 0 || !this.renderable)
{
return;
}
if (this._mask)
{
renderer.maskManager.pushMask(this._mask, renderer);
}
this._renderCanvas(renderer);
for (var i = 0, j = this.children.length; i < j; ++i)
{
this.children[i].renderCanvas(renderer);
}
if (this._mask)
{
renderer.maskManager.popMask(renderer);
}
};
/**
* Destroys the container
* @param [destroyChildren=false] {boolean} if set to true, all the children will have their destroy method called as well
*/
Container.prototype.destroy = function (destroyChildren)
{
DisplayObject.prototype.destroy.call(this);
if (destroyChildren)
{
for (var i = 0, j = this.children.length; i < j; ++i)
{
this.children[i].destroy(destroyChildren);
}
}
this.removeChildren();
this.children = null;
};
