CanvasGraphic.js revision 9eaaa502227248d304ac9170902697d02158c1d9
225N/A/**
225N/A * CanvasGraphic is a simple drawing api that allows for basic drawing operations.
225N/A *
225N/A * @class CanvasGraphic
225N/A * @constructor
225N/A */
225N/Afunction CanvasGraphic(config) {
225N/A
225N/A this.initializer.apply(this, arguments);
225N/A}
225N/A
225N/ACanvasGraphic.prototype = {
225N/A /**
225N/A * Gets the current position of the node in page coordinates.
225N/A *
225N/A * @method getXY
225N/A * @return Array The XY position of the shape.
225N/A */
225N/A getXY: function()
225N/A {
225N/A var node = Y.one(this.node),
225N/A xy = node.getXY();
844N/A return xy;
225N/A },
225N/A
225N/A /**
225N/A * Indicates whether or not the instance will size itself based on its contents.
225N/A *
1176N/A * @property autoSize
618N/A * @type String
225N/A */
225N/A autoSize: true,
844N/A
1176N/A /**
225N/A * Indicates whether or not the instance will automatically redraw after a change is made to a shape.
225N/A * This property will get set to false when batching operations.
225N/A *
225N/A * @property autoDraw
225N/A * @type Boolean
225N/A * @default true
225N/A */
225N/A autoDraw: true,
225N/A
225N/A /**
225N/A * Initializes the class.
225N/A *
225N/A * @method initializer
225N/A * @private
225N/A */
225N/A initializer: function(config) {
225N/A this._shapes = {};
225N/A config = config || {};
225N/A var w = config.width || 0,
225N/A h = config.height || 0;
225N/A this.node = Y.config.doc.createElement('div');
225N/A this.setSize(w, h);
225N/A if(config.render)
225N/A {
225N/A this.render(config.render);
225N/A }
225N/A },
225N/A
225N/A /**
225N/A * Sets the size of the graphics object.
225N/A *
225N/A * @method setSize
225N/A * @param w {Number} width to set for the instance.
225N/A * @param h {Number} height to set for the instance.
225N/A */
225N/A setSize: function(w, h) {
225N/A if(this.autoSize)
225N/A {
225N/A if(w > this.node.getAttribute("width"))
225N/A {
225N/A this.node.style.width = w + "px";
225N/A this.node.setAttribute("width", w);
225N/A }
225N/A if(h > this.node.getAttribute("height"))
225N/A {
897N/A this.node.style.height = h + "px";
897N/A this.node.setAttribute("height", h);
225N/A }
225N/A }
225N/A },
225N/A
/**
* Updates the size of the graphics object
*
* @method _trackSize
* @param {Number} w width
* @param {Number} h height
* @private
*/
_trackSize: function(w, h) {
if (w > this._width) {
this._width = w;
}
if (h > this._height) {
this._height = h;
}
this.setSize(w, h);
},
/**
* Sets the positon of the graphics object.
*
* @method setPosition
* @param {Number} x x-coordinate for the object.
* @param {Number} y y-coordinate for the object.
*/
setPosition: function(x, y)
{
this.node.style.left = x + "px";
this.node.style.top = y + "px";
},
/**
* Adds the graphics node to the dom.
*
* @method render
* @param {HTMLElement} parentNode node in which to render the graphics node into.
*/
render: function(render) {
var node = this.node,
parentNode = Y.one(render),
w = parentNode.get("width") || parentNode.get("offsetWidth"),
h = parentNode.get("height") || parentNode.get("offsetHeight");
node.style.display = "block";
node.style.position = "absolute";
node.style.left = Y.one(node).getStyle("left");
node.style.top = Y.one(node).getStyle("top");
node.style.pointerEvents = "visiblePainted";
parentNode = parentNode || Y.config.doc.body;
parentNode.appendChild(this.node);
this.setSize(w, h);
return this;
},
/**
* Shows and and hides a the graphic instance.
*
* @method toggleVisible
* @param val {Boolean} indicates whether the instance should be visible.
*/
toggleVisible: function(val)
{
this.node.style.visibility = val ? "visible" : "hidden";
},
/**
* Adds a shape instance to the graphic instance.
*
* @method addShape
* @param {Shape} shape The shape instance to be added to the graphic.
*/
addShape: function(shape)
{
var node = shape.node,
parentNode = this._frag || this.node;
parentNode.appendChild(node);
if(!this._graphicsList)
{
this._graphicsList = [];
}
this._graphicsList.push(node);
},
/**
* Generates a shape instance by type.
*
* @method getShape
* @param {String} type type of shape to generate.
* @param {Object} cfg attributes for the shape
* @return Shape
*/
getShape: function(cfg)
{
cfg.graphic = this;
var shape = new this._shapeClass[cfg.type](cfg);
this._shapes[shape.get("id")] = shape;
this.addShape(shape);
return shape;
},
/**
* @private
*/
_shapeClass: {
circle: Y.CanvasCircle,
rect: Y.CanvasRect,
path: Y.CanvasPath,
ellipse: Y.CanvasEllipse
},
/**
* Allows for creating multiple shapes in order to batch appending and redraw operations.
*
* @method batch
* @param {Function} method Method to execute.
*/
batch: function(method)
{
var node = this.node,
frag = document.createDocumentFragment();
this._frag = frag;
this.autoDraw = false;
method();
node.appendChild(frag);
this._frag = null;
this.autoDraw = true;
},
/**
* Removes all nodes.
*
* @method destroy
*/
destroy: function()
{
this._removeChildren(this.node);
if(this.node && this.node.parentNode)
{
this.node.parentNode.removeChild(this.node);
}
},
/**
* Removes all child nodes.
*
* @method _removeChildren
* @param {HTMLElement} node
* @private
*/
_removeChildren: function(node)
{
if(node.hasChildNodes())
{
var child;
while(node.firstChild)
{
child = node.firstChild;
this._removeChildren(child);
node.removeChild(child);
}
}
}
};
Y.CanvasGraphic = CanvasGraphic;