CanvasGraphic.js revision 66ca16dd76367c074fe4df1dcf7b555489a9bf85
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove * CanvasGraphic is a simple drawing api that allows for basic drawing operations.
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove * @module graphics
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove * @class CanvasGraphic
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove * @constructor
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove CanvasGraphic.superclass.constructor.apply(this, arguments);
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.
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove * @attribute render
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove * @type Node | String
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove * Unique id for class instance.
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove * @attribute id
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove * @type String
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove * Key value pairs in which a shape instance is associated with its id.
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove * @attribute shapes
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove * @type Object
c5eeeb5cc5fdca25f16cb4f2fd3e59dd0f937debRyan Grove * Object containing size and coordinate data for the content of a Graphic in relation to the graphic instance's position.
readOnly: true,
getter: function()
return this._contentBounds;
node: {
readOnly: true,
getter: function()
return this._node;
width: {
if(this._node)
return val;
height: {
if(this._node)
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.
autoSize: {
value: false
* When overflow is set to true, by default, the contentBounds will resize to greater values but not smaller values. (for performance)
resizeDown: {
getter: function()
return this._resizeDown;
this._redraw();
return val;
getter: function()
return this._x;
if(this._node)
return val;
getter: function()
return this._y;
if(this._node)
return val;
* Indicates whether or not the instance will automatically redraw after a change is made to a shape.
autoDraw: {
value: true
visible: {
value: true,
return val;
getXY: function()
xy;
if(node)
return xy;
_resizeDown: false,
this._shapes = {};
this._redrawQueue = {};
this._contentBounds = {
if(render)
destroy: function()
this._removeAllShapes();
return shape;
this._redraw();
return shape;
removeAllShapes: function()
for(i in shapes)
this._shapes = {};
var child;
if(shapes)
for(i in shapes)
if(shape)
return shape;
return val;
_shapeClass: {
return shape;
method();
this._redraw();
_getDocFrag: function()
if(!this._frag)
return this._frag;
_redraw: function()
if(this._frag)
this._frag = null;
var shapeBox,
box;
this._redraw();
_getUpdatedContentBounds: function()
var bounds,
box = {
for(i in queue)
return box;