API Docs for: 0.3.0
Show:

File: modules/Graphic/GraphicObject.js

/**
 * @module Graphic
 * @namespace Graphic
 */

var TW = TW || {};
define(['../Math/Matrix2D', '../Utils/copyParam'], function(Matrix2D, copyParam) {

	TW.Graphic = TW.Graphic || {};


	/**
	 * GraphicObject represent an object that has a relationship with graphical context.
	 * It is the root class of every graphical component of the framework.
	 *
	 * ## General
	 *
	 * It provide many method for manipulate object in 2D space,
	 * keeping a internal matrix. It contain also dimensions, and a reference point
	 * for all transformations (center point).<br />
	 * Each object can have a parent, which is informed to any child modification, with the method `onChange()`.
	 *
	 * GraphicObject contain many properties which can be modified easily. **However, you should use `setAttr` instead
	 * of directly modifing properties, to regenerate the caches if necessary. Direct access don't invalidate caches.**
	 *
	 * ## extend this class
	 *
	 * All 2D graphical objects should inherit from this class.
	 * All inherited class should implement the {{#crossLink "Graphic.GraphicObject/draw"}}draw(){{/crossLink}} method,
	 * not implemented by default.<br />
	 * Inherited class must also inform the parent (if any) after each modification that influence the graphical
	 * render, by calling protected method
	 * {{#crossLink "Graphic.GraphicObject/notifyParentChange"}}notifyParentChange(){{/crossLink}}
	 *
	 *
	 * @class GraphicObject
	 * @param {Object} [params] it is an object that represent the parameters of the graphicalObject to set.
	 *  @param {Number} [params.x=0] position on X axis.
	 *  @param {Number} [params.y=0] position on Y axis.
	 *  @param {Number} [params.width=0] width of the element.
	 *  @param {Number} [params.height=0] height of the element.
	 *  @param {Object} [params.centerPoint] centerPoint of the current object
	 *   @param {Object} [params.centerPoint.x=0] x centerPoint value
	 *   @param {Object} [params.centerPoint.y=0] y centerPoint value
	 *  @param {Number} [params.zIndex=0] define display order with other graphic elements. default to 0.
	 *  @param {Number} [params.alpha=1.0] set the transparency, between 0 and 1. default to 1 (completely opaque).
	 *  @param {Matrix2D} [params.matrix] matrix to set to the object. default to identity matrix.
	 *  @param {Number} [params.parent=null] parent of the element.
	 * @constructor
	 */
	function GraphicObject(params) {
		copyParam(this, params, {
			/**
			 * position on X axis
			 *
			 * @property {Number} x
			 */
			x:            0,

			/**
			 * position on Y axis
			 *
			 * @property {Number} y
			 */
			y:            0,

			/**
			 * @property {Number} width
			 */
			width:        0,

			/**
			 * @property {Number} height
			 */
			height:       0,

			/**
			 * default center of all matrix transformations.
			 *
			 * values are exprimed depending on the size of the object.
			 * 0;0 is the up-left corner.
			 *
			 * @property {Object} centerPoint
			 *   @property {Object} centerPoint.x
			 *   @property {Object} centerPoint.y
			 */
			centerPoint: {
				x: 0,
			    y: 0
			},

			/**
			 * zIndex, used to determine the drawing order. Hight zIndex are drawn first.
			 *
			 * @property {Number} zIndex
			 */
			zIndex:       0,

			/**
			 * value of opacity, between 0.0 (fully transparent) and 1.0 (opaque)
			 *
			 * @property {Number} alpha
			 */
			alpha:        1.0,

			/**
			 * matrix applied to this object before draw.
			 *
			 * @property {Matrix} matrix
			 */
			matrix:       Matrix2D.identity(),

			/**
			 * parent containing this object.
			 *
			 * @property {Layer} parent
			 */
			parent:       null
		});
	}

	/**
	 * Setter availlable for updating attibuts and correctly clear the caches.
	 * You can set all attributes supported by this instance
	 * (see the GraphicObject constructor for common available properties)
	 *
	 * @example
	 *
	 *      object.setAttr({
	 *          width: 20,
	 *          height: 20
	 *      });
	 *
	 *      object.setAttr({
	 *          pos: {
	 *              x: 0,
	 *              y: 0
	 *          }
	 *      });
	 *
	 * @method setAttr
	 * @param {Object} attrs GraphicObject attributs. See the constructor for more details.
	 * @chainable
	 */
	GraphicObject.prototype.setAttr = function(attrs) {
		copyParam(this, attrs, this);
		this.notifyParentChange();
		return this;
	};

	/**
	 * This method is aimed to be overrides by the classes who extends GraphicObject class.
	 *
	 * @method draw
	 * @param {CanvasRenderingContext2D} context represent the context of the canvas to draw on.
	 */
	GraphicObject.prototype.draw = function(context) {

	};

	/**
	 * This method allow you to translate the GraphicalObject,
	 * Internally this method modify the GraphicObject's matrix.
	 *
	 * @method translate
	 * @param {Number} x this is the translation scalar of the x axis.
	 * @param {Number} y this is the translation scalar of the y axis.
	 * @chainable
	 */
	GraphicObject.prototype.translate = function(x, y) {
		this.matrix.translate(x, y);
		this.notifyParentChange();
		return this;
	};

	/**
	 * This method allow you to rotate the Graphical object around the center point of the GraphicalObject.
	 *
	 * @method rotate
	 * @param {Number} angle represent the angle of rotation, it's expressed in degree.
	 * @chainable
	 */
	GraphicObject.prototype.rotate = function(angle) {
		this.matrix.rotate(angle);
		this.notifyParentChange();
		return this;
	};

	/**
	 * this method allow you to do a scale on the GraphicObject.
	 *
	 * @method scale
	 * @param {Number} x this is the x scale factor
	 * @param {Number} y this is the y scale factor
	 * @chainable
	 */
	GraphicObject.prototype.scale = function(x, y) {
		this.matrix.scale(x, y);
		this.notifyParentChange();
		return this;
	};

	/**
	 * This method allow you to do a skew transform on the GraphicObject.
	 *
	 * @method skew
	 * @param {Number} a the factor of skew on the y axis
	 * @param {Number} b the factor of skew on the x axis
	 * @chainable
	 */
	GraphicObject.prototype.skew = function(a, b) {
		this.matrix.skew(a, b);
		this.notifyParentChange();
		return this;
	};

	/**
	 * This method notify the parent that a change has been done, and that it should clear his cache.
	 *
	 * @method notifyParentChange
	 * @protected
	 */
	GraphicObject.prototype.notifyParentChange = function() {
		if (this.parent) {
			this.parent.onChange(this);
		}
	};

	TW.Graphic.GraphicObject = GraphicObject;
	return GraphicObject;
});