SVGShape.js revision 828c58761d90445b8b9d20a82d85dc1479317f71
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * Base class for creating shapes.
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @class SVGShape
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync var host = this,
6ec4e1827eab6a424d672ef0e5a17b065e52db20vboxsync host._eventPrefix = host.constructor.EVENT_PREFIX || host.constructor.NAME;
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync // Need to initPlugins manually, to handle constructor parsing, static Plug parsing
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync init: function()
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * Initializes the shape
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @method _initialize
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync var host = this;
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * Add a class name to each node.
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @method addClass
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @param {String} className the class name to add to the node's class attribute
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync node.className.baseVal = Y_LANG.trim([node.className.baseVal, className].join(' '));
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * Removes a class name from each node.
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @method removeClass
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @param {String} className the class name to remove from the node's class attribute
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync classString = classString.replace(new RegExp(className + ' '), className).replace(new RegExp(className), '');
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * Gets the current position of the node in page coordinates.
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @method getXY
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @return Array The XY position of the shape.
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * Set the position of the shape in page coordinates, regardless of how the node is positioned.
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @method setXY
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @param {Array} Contains X & Y values for new position (coordinates are page-based)
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * Determines whether the node is an ancestor of another HTML element in the DOM hierarchy.
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @method contains
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @param {SVGShape | HTMLElement} needle The possible node or descendent
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @return Boolean Whether or not this shape is the needle or its ancestor.
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * Compares nodes to determine if they match.
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * Node instances can be compared to each other and/or HTMLElements.
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @method compareTo
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @param {HTMLElement | Node} refNode The reference node to compare to the node.
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @return {Boolean} True if the nodes match, false if they do not.
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * Test if the supplied node matches the supplied selector.
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @method test
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @param {String} selector The CSS selector to test against.
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @return Boolean Wheter or not the shape matches the selector.
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * Value function for fill attribute
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @method _getDefaultFill
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @return Object
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * Value function for stroke attribute
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @method _getDefaultStroke
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @return Object
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * Creates the dom node for the shape.
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @return HTMLElement
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync var node = document.createElementNS("http://www.w3.org/2000/svg", "svg:" + this._type),
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync node.setAttribute("pointer-events", pointerEvents);
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync if(type.indexOf('mouse') > -1 || type.indexOf('click') > -1)
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync return true;
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync return false;
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * Adds a stroke to the shape node.
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @method _strokeChangeHandler
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync dash = Y_LANG.isArray(dashstyle) ? dashstyle.toString() : dashstyle;
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync stroke.opacity = Y_LANG.isNumber(strokeOpacity) ? strokeOpacity : 1;
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync node.setAttribute("stroke-linecap", stroke.linecap);
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync node.setAttribute("stroke-opacity", stroke.opacity);
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync node.setAttribute("stroke-miterlimit", Math.max(linejoin, 1));
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * Adds a fill to the shape node.
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @method _fillChangeHandler
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync node.setAttribute("fill", "url(#grad" + this.get("id") + ")");
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync fillOpacity = fill.opacity = Y_LANG.isNumber(fillOpacity) ? fillOpacity : 1;
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * Returns a linear gradient fill
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @method _getLinearGradient
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @param {String} type gradient type
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync gradientNode = graphic.getGradientNode("grad" + this.get("id"), type),
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync gradientNode.setAttribute("gradientTransform", "rotate(" + rotation + "," + (w/2) + ", " + (h/2) + ")");
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync gradientNode.setAttribute("gradientUnits", "userSpaceOnUse");
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync set: function()
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync var host = this;
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync AttributeLite.prototype.set.apply(host, arguments);
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * Applies translate transformation.
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @method translate
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @param {Number} x The x-coordinate
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @param {Number} y The y-coordinate
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync translate: function(x, y)
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * Applies translate transformation.
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @method translate
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @param {Number} x The x-coordinate
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @param {Number} y The y-coordinate
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @protected
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync _translate: function(x, y)
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * Applies a skew to the x-coordinate
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @method skewX
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @param {Number} x x-coordinate
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync skewX: function(x)
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * Applies a skew to the x-coordinate
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @method skewX
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @param {Number} x x-coordinate
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync skewY: function(y)
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * Applies a rotation.
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @method rotate
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * Applies a scale transform
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @method scale
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @param {Number} val
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * Applies a matrix transformation
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @method matrix
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync matrix: function(a, b, c, d, e, f)
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync this._transformArgs[type] = Array.prototype.slice.call(args, 0);
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync args[1] = this.get("x") + (this.get("width") * transformOrigin[0]);
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync args[2] = this.get("y") + (this.get("height") * transformOrigin[1]);
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync val = key + "(" + this._transformArgs[key].toString() + ")";
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * Updates the shape.
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @method _draw
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * Change event listener
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @method _updateHandler
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * Storage for translateX
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * Storage for translateY
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * Returns the bounds for a shape.
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @method getBounds
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @return Object
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync sinRadians = parseFloat(parseFloat(Math.sin(absRot * radCon)).toFixed(8)),
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync cosRadians = parseFloat(parseFloat(Math.cos(absRot * radCon)).toFixed(8)),
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync x = (x + originalWidth * tox) - (sinRadians * (originalHeight * (1 - toy))) - (cosRadians * (originalWidth * tox));
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync y = (y + originalHeight * toy) - (sinRadians * (originalWidth * tox)) - (cosRadians * originalHeight * toy);
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * An array of x, y values which indicates the transformOrigin in which to rotate the shape. Valid values range between 0 and 1 representing a
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * fraction of the shape's corresponding bounding box dimension. The default value is [0.5, 0.5].
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @attribute transformOrigin
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @type Array
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * The rotation (in degrees) of the shape.
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @attribute rotation
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @type Number
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * Unique id for class instance.
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @attribute id
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @type String
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync return Y.guid();
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * Indicates the x position of shape.
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @attribute x
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @type Number
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * Indicates the y position of shape.
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @attribute y
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @type Number
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * Indicates the width of the shape
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @attribute width
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @type Number
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * Indicates the height of the shape
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @attribute height
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @type Number
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * Indicates whether the shape is visible.
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @attribute visible
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * @type Boolean
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * Contains information about the fill of the shape.
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * <dt>color</dt><dd>The color of the fill.</dd>
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * <dt>opacity</dt><dd>Number between 0 and 1 that indicates the opacity of the fill. The default value is 1.</dd>
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * <dt>type</dt><dd>Type of fill.
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * <dt>solid</dt><dd>Solid single color fill. (default)</dd>
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * <dt>linear</dt><dd>Linear gradient fill.</dd>
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * <dt>radial</dt><dd>Radial gradient fill.</dd>
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * <p>If a gradient (linear or radial) is specified as the fill type. The following properties are used:
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * <dt>stops</dt><dd>An array of objects containing the following properties:
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * <dt>color</dt><dd></dd>
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * <dt>opacity</dt><dd></dd>
75f41c9995e4a8d9ed39651503f229147318dbd2vboxsync * <dt>offset</dt><dd>Number between 0 and 1 indicating where the color stop is positioned.</dd>
75f41c9995e4a8d9ed39651503f229147318dbd2vboxsync * <dt></dt><dd></dd>
75f41c9995e4a8d9ed39651503f229147318dbd2vboxsync * <dt></dt><dd></dd>
75f41c9995e4a8d9ed39651503f229147318dbd2vboxsync * <dt></dt><dd></dd>
75f41c9995e4a8d9ed39651503f229147318dbd2vboxsync * @attribute fill
75f41c9995e4a8d9ed39651503f229147318dbd2vboxsync * @type Object
75f41c9995e4a8d9ed39651503f229147318dbd2vboxsync if(fill.color === undefined || fill.color == "none")
75f41c9995e4a8d9ed39651503f229147318dbd2vboxsync * Contains information about the stroke of the shape.
75f41c9995e4a8d9ed39651503f229147318dbd2vboxsync * <dt>color</dt><dd>The color of the stroke.</dd>
75f41c9995e4a8d9ed39651503f229147318dbd2vboxsync * <dt>weight</dt><dd>Number that indicates the width of the stroke.</dd>
75f41c9995e4a8d9ed39651503f229147318dbd2vboxsync * <dt>opacity</dt><dd>Number between 0 and 1 that indicates the opacity of the stroke. The default value is 1.</dd>
75f41c9995e4a8d9ed39651503f229147318dbd2vboxsync * <dt>dashstyle</dt>Indicates whether to draw a dashed stroke. When set to "none", a solid stroke is drawn. When set to an array, the first index indicates the
75f41c9995e4a8d9ed39651503f229147318dbd2vboxsync * length of the dash. The second index indicates the length of gap.
75f41c9995e4a8d9ed39651503f229147318dbd2vboxsync * @attribute stroke
75f41c9995e4a8d9ed39651503f229147318dbd2vboxsync * @type Object
75f41c9995e4a8d9ed39651503f229147318dbd2vboxsync var tmpl = this.get("stroke") || this._getDefaultStroke();
75f41c9995e4a8d9ed39651503f229147318dbd2vboxsync * Indicates whether or not the instance will size itself based on its contents.
75f41c9995e4a8d9ed39651503f229147318dbd2vboxsync * @attribute autoSize
75f41c9995e4a8d9ed39651503f229147318dbd2vboxsync * @type Boolean
75f41c9995e4a8d9ed39651503f229147318dbd2vboxsync * Determines whether the instance will receive mouse events.
75f41c9995e4a8d9ed39651503f229147318dbd2vboxsync * @attribute pointerEvents
75f41c9995e4a8d9ed39651503f229147318dbd2vboxsync * @type string
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * Performs a translate on the x-coordinate. When translating x and y coordinates,
a33af978add1a03aab11b2895f441af5cb2a11a6vboxsync * use the <code>translate</code> method.
translateX: {
getter: function()
return this._translateX;
return val;
translateY: {
getter: function()
return this._translateY;
return val;
gradientNode: {
return val;
autoDraw: {
getter: function()
node: {
readOnly: true,
getter: function()
return this.node;
graphic: {
readOnly: true,
getter: function()
return this._graphic;