CanvasGraphic.js revision 66ca16dd76367c074fe4df1dcf7b555489a9bf85
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove/**
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove * CanvasGraphic is a simple drawing api that allows for basic drawing operations.
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove *
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove * @module graphics
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove * @class CanvasGraphic
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove * @constructor
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove */
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grovefunction CanvasGraphic(config) {
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove CanvasGraphic.superclass.constructor.apply(this, arguments);
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove}
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan GroveCanvasGraphic.NAME = "canvasGraphic";
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan GroveCanvasGraphic.ATTRS = {
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove /**
e0bd6b490d14919b958622a831bfadbf322397baRyan Grove * Whether or not to render the `Graphic` automatically after to a specified parent node after init. This can be a Node instance or a CSS selector string.
e0bd6b490d14919b958622a831bfadbf322397baRyan Grove *
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove * @attribute render
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove * @type Node | String
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove */
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove render: {},
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove /**
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove * Unique id for class instance.
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove *
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove * @attribute id
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove * @type String
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove */
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove id: {
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove valueFn: function()
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove {
45490685ca09e86b69dc49a42f0d61a43fcb921aRyan Grove return Y.guid();
45490685ca09e86b69dc49a42f0d61a43fcb921aRyan Grove },
45490685ca09e86b69dc49a42f0d61a43fcb921aRyan Grove
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove setter: function(val)
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove {
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove var node = this._node;
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove if(node)
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove {
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove node.setAttribute("id", val);
1442be8e9c34fb5a7f7f12aa504ce8038ed40eddRyan Grove }
1442be8e9c34fb5a7f7f12aa504ce8038ed40eddRyan Grove return val;
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove }
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove },
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove /**
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove * Key value pairs in which a shape instance is associated with its id.
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove *
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove * @attribute shapes
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove * @type Object
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove * @readOnly
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove */
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove shapes: {
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove readOnly: true,
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove getter: function()
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove {
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove return this._shapes;
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove }
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove },
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove /**
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove * Object containing size and coordinate data for the content of a Graphic in relation to the graphic instance's position.
*
* @attribute contentBounds
* @type Object
* @readOnly
*/
contentBounds: {
readOnly: true,
getter: function()
{
return this._contentBounds;
}
},
/**
* The outermost html element of the Graphic instance.
*
* @attribute node
* @type HTMLElement
* @readOnly
*/
node: {
readOnly: true,
getter: function()
{
return this._node;
}
},
/**
* Indicates the width of the `Graphic`.
*
* @attribute width
* @type Number
*/
width: {
setter: function(val)
{
if(this._node)
{
this._node.style.width = val + "px";
}
return val;
}
},
/**
* Indicates the height of the `Graphic`.
*
* @attribute height
* @type Number
*/
height: {
setter: function(val)
{
if(this._node)
{
this._node.style.height = val + "px";
}
return val;
}
},
/**
* Determines how the size of instance is calculated. If true, the width and height are determined by the size of the contents.
* If false, the width and height values are either explicitly set or determined by the size of the parent node's dimensions.
*
* @attribute autoSize
* @type Boolean
* @default false
*/
autoSize: {
value: false
},
/**
* When overflow is set to true, by default, the contentBounds will resize to greater values but not smaller values. (for performance)
* When resizing the contentBounds down is desirable, set the resizeDown value to true.
*
* @attribute resizeDown
* @type Boolean
*/
resizeDown: {
getter: function()
{
return this._resizeDown;
},
setter: function(val)
{
this._resizeDown = val;
this._redraw();
return val;
}
},
/**
* Indicates the x-coordinate for the instance.
*
* @attribute x
* @type Number
*/
x: {
getter: function()
{
return this._x;
},
setter: function(val)
{
this._x = val;
if(this._node)
{
this._node.style.left = val + "px";
}
return val;
}
},
/**
* Indicates the y-coordinate for the instance.
*
* @attribute y
* @type Number
*/
y: {
getter: function()
{
return this._y;
},
setter: function(val)
{
this._y = val;
if(this._node)
{
this._node.style.top = val + "px";
}
return val;
}
},
/**
* Indicates whether or not the instance will automatically redraw after a change is made to a shape.
* This property will get set to false when batching operations.
*
* @attribute autoDraw
* @type Boolean
* @default true
* @private
*/
autoDraw: {
value: true
},
/**
* Indicates whether the `Graphic` and its children are visible.
*
* @attribute visible
* @type Boolean
*/
visible: {
value: true,
setter: function(val)
{
this._toggleVisible(val);
return val;
}
}
};
Y.extend(CanvasGraphic, Y.BaseGraphic, {
/**
* Storage for `x` attribute.
*
* @property _x
* @type Number
* @private
*/
_x: 0,
/**
* Storage for `y` attribute.
*
* @property _y
* @type Number
* @private
*/
_y: 0,
/**
* Gets the current position of the graphic instance in page coordinates.
*
* @method getXY
* @return Array The XY position of the shape.
*/
getXY: function()
{
var node = Y.one(this._node),
xy;
if(node)
{
xy = node.getXY();
}
return xy;
},
/**
* Storage for `resizeDown` attribute.
*
* @property _resizeDown
* @type Boolean
* @private
*/
_resizeDown: false,
/**
* Initializes the class.
*
* @method initializer
* @param {Object} config Optional attributes
* @private
*/
initializer: function(config) {
var render = this.get("render"),
w = this.get("width") || 0,
h = this.get("height") || 0;
this._shapes = {};
this._redrawQueue = {};
this._contentBounds = {
left: 0,
top: 0,
right: 0,
bottom: 0
};
this._node = DOCUMENT.createElement('div');
this._node.style.position = "absolute";
this.set("width", w);
this.set("height", h);
if(render)
{
this.render(render);
}
},
/**
* 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 parentNode = Y.one(render),
node = this._node,
w = this.get("width") || parseInt(parentNode.getComputedStyle("width"), 10),
h = this.get("height") || parseInt(parentNode.getComputedStyle("height"), 10);
parentNode = parentNode || DOCUMENT.body;
parentNode.appendChild(node);
node.style.display = "block";
node.style.position = "absolute";
node.style.left = "0px";
node.style.top = "0px";
this.set("width", w);
this.set("height", h);
this.parentNode = parentNode;
return this;
},
/**
* Removes all nodes.
*
* @method destroy
*/
destroy: function()
{
this._removeAllShapes();
this._removeChildren(this._node);
if(this._node && this._node.parentNode)
{
this._node.parentNode.removeChild(this._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 shapeClass = this._getShapeClass(cfg.type),
shape = new shapeClass(cfg);
this.addShape(shape);
return shape;
},
/**
* Adds a shape instance to the graphic instance.
*
* @method addShape
* @param {Shape} shape The shape instance to be added to the graphic.
* @private
*/
addShape: function(shape)
{
var node = shape.node,
parentNode = this._frag || this._node;
if(this.get("autoDraw"))
{
parentNode.appendChild(node);
}
else
{
this._getDocFrag().appendChild(node);
}
},
/**
* Removes a shape instance from from the graphic instance.
*
* @method removeShape
* @param {Shape|String} shape The instance or id of the shape to be removed.
*/
removeShape: function(shape)
{
if(!(shape instanceof CanvasShape))
{
if(Y_LANG.isString(shape))
{
shape = this._shapes[shape];
}
}
if(shape && shape instanceof CanvasShape)
{
shape.destroy();
delete this._shapes[shape.get("id")];
}
if(this.get("autoDraw"))
{
this._redraw();
}
return shape;
},
/**
* Removes all shape instances from the dom.
*
* @method removeAllShapes
*/
removeAllShapes: function()
{
var shapes = this._shapes,
i;
for(i in shapes)
{
if(shapes.hasOwnProperty(i))
{
shapes[i].destroy();
}
}
this._shapes = {};
},
/**
* 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);
}
}
},
/**
* Toggles visibility
*
* @method _toggleVisible
* @param {Boolean} val indicates visibilitye
* @private
*/
_toggleVisible: function(val)
{
var i,
shapes = this._shapes,
visibility = val ? "visible" : "hidden";
if(shapes)
{
for(i in shapes)
{
if(shapes.hasOwnProperty(i))
{
shapes[i].set("visible", val);
}
}
}
this._node.style.visibility = visibility;
},
/**
* Returns a shape class. Used by `getShape`.
*
* @param {Shape | String} val Indicates which shape class.
* @return Function
* @private
*/
_getShapeClass: function(val)
{
var shape = this._shapeClass[val];
if(shape)
{
return shape;
}
return val;
},
/**
* Look up for shape classes. Used by `getShape` to retrieve a class for instantiation.
*
* @property _shapeClass
* @type Object
* @private
*/
_shapeClass: {
circle: Y.CanvasCircle,
rect: Y.CanvasRect,
path: Y.CanvasPath,
ellipse: Y.CanvasEllipse,
pieslice: Y.CanvasPieSlice
},
/**
* Returns a shape based on the id of its dom node.
*
* @method getShapeById
* @param {String} id Dom id of the shape's node attribute.
* @return Shape
*/
getShapeById: function(id)
{
var shape = this._shapes[id];
return shape;
},
/**
* 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 autoDraw = this.get("autoDraw");
this.set("autoDraw", false);
method();
this._redraw();
this.set("autoDraw", autoDraw);
},
/**
* Returns a document fragment to for attaching shapes.
*
* @method _getDocFrag
* @return DocumentFragment
* @private
*/
_getDocFrag: function()
{
if(!this._frag)
{
this._frag = DOCUMENT.createDocumentFragment();
}
return this._frag;
},
/**
* Redraws all shapes.
*
* @method _redraw
* @private
*/
_redraw: function()
{
var box = this.get("resizeDown") ? this._getUpdatedContentBounds() : this._contentBounds;
if(this.get("autoSize"))
{
this.set("width", box.right);
this.set("height", box.bottom);
}
if(this._frag)
{
this._node.appendChild(this._frag);
this._frag = null;
}
},
/**
* Adds a shape to the redraw queue.
*
* @method addToRedrawQueue
* @param Shape shape The shape instance to add to the queue
*/
addToRedrawQueue: function(shape)
{
var shapeBox,
box;
this._shapes[shape.get("id")] = shape;
if(!this.get("resizeDown"))
{
shapeBox = shape.getBounds();
box = this._contentBounds;
box.left = box.left < shapeBox.left ? box.left : shapeBox.left;
box.top = box.top < shapeBox.top ? box.top : shapeBox.top;
box.right = box.right > shapeBox.right ? box.right : shapeBox.right;
box.bottom = box.bottom > shapeBox.bottom ? box.bottom : shapeBox.bottom;
box.width = box.right - box.left;
box.height = box.bottom - box.top;
this._contentBounds = box;
}
if(this.get("autoDraw"))
{
this._redraw();
}
},
/**
* Recalculates and returns the `contentBounds` for the `Graphic` instance.
*
* @method _getUpdateContentBounds
* @return {Object}
* @private
*/
_getUpdatedContentBounds: function()
{
var bounds,
i,
shape,
queue = this._shapes,
box = {
left: 0,
top: 0,
right: 0,
bottom: 0
};
for(i in queue)
{
if(queue.hasOwnProperty(i))
{
shape = queue[i];
bounds = shape.getBounds();
box.left = Math.min(box.left, bounds.left);
box.top = Math.min(box.top, bounds.top);
box.right = Math.max(box.right, bounds.right);
box.bottom = Math.max(box.bottom, bounds.bottom);
}
}
box.width = box.right - box.left;
box.height = box.bottom - box.top;
this._contentBounds = box;
return box;
}
});
Y.CanvasGraphic = CanvasGraphic;