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