1 /*

     2 YUI 3.10.3 (build 2fb5187)

     3 Copyright 2013 Yahoo! Inc. All rights reserved.

     4 Licensed under the BSD License.

     5 http://yuilibrary.com/license/

     6 */

     7 

     8 YUI.add('graphics', function (Y, NAME) {

     9 

    10 /**

    11  *

    12  * <p>The `Graphics` module provides a JavaScript API for creating shapes in a variety of formats across

    13  * a <a href="http://developer.yahoo.com/yui/articles/gbs">browser test baseline</a>.

    14  * Based on device and browser capabilities, `Graphics` leverages <a href="http://www.w3.org/TR/SVG/">SVG</a>,

    15  * <a href="http://www.w3.org/TR/html5/the-canvas-element.html">Canvas</a> and <a href="http://www.w3.org/TR/NOTE-VML">VML</a>

    16  * to render its graphical elements.</p>

    17  *

    18  * <p>The `Graphics` module features a <a href="../classes/Graphic.html">`Graphic`</a> class that allows you to easily create and manage shapes.

    19  * Currently, a <a href="../classes/Graphic.html">`Graphic`</a> instance can be used to create predifined shapes and free-form polygons with fill

    20  * and stroke properties.</p>

    21  *

    22  * <p>The `Graphics` module normalizes an API through the use of alias and implementation classes that share

    23  * interfaces. Each alias class points to an appropriate implementation class dependent on the browser's

    24  * capabilities. There should rarely, if ever, be a need to interact directly with an implementation class.</p>

    25  *

    26  * <p>Below is a list of available classes.

    27  *     <ul>

    28  *         <li><a href="../classes/Graphic.html">`Graphic`</a>

    29  *         <li><a href="../classes/Shape.html">`Shape`</a>

    30  *         <li><a href="../classes/Circle.html">`Circle`</a>

    31  *         <li><a href="../classes/Ellipse.html">`Ellipse`</a>

    32  *         <li><a href="../classes/Rect.html">`Rect`</a>

    33  *         <li><a href="../classes/Path.html">`Path`</a>

    34  *     </ul>

    35  * You can also extend the `Shape` class to create your own custom shape classes.</p>

    36  * @module graphics

    37  * @main graphics

    38  */

    39 var SETTER = "setter",

    40 	PluginHost = Y.Plugin.Host,

    41     VALUE = "value",

    42     VALUEFN = "valueFn",

    43     READONLY = "readOnly",

    44     Y_LANG = Y.Lang,

    45     STR = "string",

    46     WRITE_ONCE = "writeOnce",

    47     GraphicBase,

    48     AttributeLite;

    49 

    50     /**

    51 	 * AttributeLite provides Attribute-like getters and setters for shape classes in the Graphics module.

    52      * It provides a get/set API without the event infastructure. This class is temporary and a work in progress.

    53 	 *

    54 	 * @class AttributeLite

    55 	 * @constructor

    56 	 */

    57     AttributeLite = function()

    58     {

    59         var host = this; // help compression

    60 

    61         // Perf tweak - avoid creating event literals if not required.

    62         host._ATTR_E_FACADE = {};

    63 

    64         Y.EventTarget.call(this, {emitFacade:true});

    65         host._state = {};

    66         host.prototype = Y.mix(AttributeLite.prototype, host.prototype);

    67     };

    68 

    69     AttributeLite.prototype = {

    70 		/**

    71 		 * Initializes the attributes for a shape. If an attribute config is passed into the constructor of the host,

    72 		 * the initial values will be overwritten.

    73 		 *

    74 		 * @method addAttrs

    75 		 * @param {Object} cfg Optional object containing attributes key value pairs to be set.

    76 		 */

    77 		addAttrs: function(cfg)

    78 		{

    79 			var host = this,

    80 				attrConfig = this.constructor.ATTRS,

    81 				attr,

    82 				i,

    83 				fn,

    84 				state = host._state;

    85 			for(i in attrConfig)

    86 			{

    87 				if(attrConfig.hasOwnProperty(i))

    88 				{

    89 					attr = attrConfig[i];

    90 					if(attr.hasOwnProperty(VALUE))

    91 					{

    92 						state[i] = attr.value;

    93 					}

    94 					else if(attr.hasOwnProperty(VALUEFN))

    95 					{

    96 						fn = attr.valueFn;

    97 						if(Y_LANG.isString(fn))

    98 						{

    99 							state[i] = host[fn].apply(host);

   100 						}

   101 						else

   102 						{

   103 							state[i] = fn.apply(host);

   104 						}

   105 					}

   106                 }

   107             }

   108 			host._state = state;

   109             for(i in attrConfig)

   110 			{

   111 				if(attrConfig.hasOwnProperty(i))

   112 				{

   113 					attr = attrConfig[i];

   114                     if(attr.hasOwnProperty(READONLY) && attr.readOnly)

   115 					{

   116 						continue;

   117 					}

   118 

   119 					if(attr.hasOwnProperty(WRITE_ONCE) && attr.writeOnce)

   120 					{

   121 						attr.readOnly = true;

   122 					}

   123 

   124 					if(cfg && cfg.hasOwnProperty(i))

   125 					{

   126 						if(attr.hasOwnProperty(SETTER))

   127 						{

   128 							host._state[i] = attr.setter.apply(host, [cfg[i]]);

   129 						}

   130 						else

   131 						{

   132 							host._state[i] = cfg[i];

   133 						}

   134 					}

   135 				}

   136 			}

   137 		},

   138 

   139         /**

   140          * For a given item, returns the value of the property requested, or undefined if not found.

   141          *

   142          * @method get

   143          * @param name {String} The name of the item

   144          * @return {Any} The value of the supplied property.

   145          */

   146         get: function(attr)

   147         {

   148             var host = this,

   149                 getter,

   150                 attrConfig = host.constructor.ATTRS;

   151             if(attrConfig && attrConfig[attr])

   152             {

   153                 getter = attrConfig[attr].getter;

   154                 if(getter)

   155                 {

   156                     if(typeof getter === STR)

   157                     {

   158                         return host[getter].apply(host);

   159                     }

   160                     return attrConfig[attr].getter.apply(host);

   161                 }

   162 

   163                 return host._state[attr];

   164             }

   165             return null;

   166         },

   167 

   168         /**

   169          * Sets the value of an attribute.

   170          *

   171          * @method set

   172          * @param {String|Object} name The name of the attribute. Alternatively, an object of key value pairs can

   173          * be passed in to set multiple attributes at once.

   174          * @param {Any} value The value to set the attribute to. This value is ignored if an object is received as

   175          * the name param.

   176          */

   177         set: function()

   178         {

   179             var attr = arguments[0],

   180                 i;

   181             if(Y_LANG.isObject(attr))

   182             {

   183                 for(i in attr)

   184                 {

   185                     if(attr.hasOwnProperty(i))

   186                     {

   187                         this._set(i, attr[i]);

   188                     }

   189                 }

   190             }

   191             else

   192             {

   193                 this._set.apply(this, arguments);

   194             }

   195         },

   196 

   197 		/**

   198          * Provides setter logic. Used by `set`.

   199          *

   200          * @method _set

   201          * @param {String|Object} name The name of the attribute. Alternatively, an object of key value pairs can

   202          * be passed in to set multiple attributes at once.

   203          * @param {Any} value The value to set the attribute to. This value is ignored if an object is received as

   204          * the name param.

   205 		 * @protected

   206 		 */

   207 		_set: function(attr, val)

   208 		{

   209 			var host = this,

   210 				setter,

   211 				args,

   212 				attrConfig = host.constructor.ATTRS;

   213 			if(attrConfig && attrConfig.hasOwnProperty(attr))

   214 			{

   215 				setter = attrConfig[attr].setter;

   216 				if(setter)

   217 				{

   218 					args = [val];

   219 					if(typeof setter === STR)

   220 					{

   221 						val = host[setter].apply(host, args);

   222 					}

   223 					else

   224                     {

   225                         val = attrConfig[attr].setter.apply(host, args);

   226                     }

   227 				}

   228 				host._state[attr] = val;

   229 			}

   230 		}

   231 	};

   232     Y.mix(AttributeLite, Y.EventTarget, false, null, 1);

   233 	Y.AttributeLite = AttributeLite;

   234 

   235     /**

   236      * GraphicBase serves as the base class for the graphic layer. It serves the same purpose as

   237      * Base but uses a lightweight getter/setter class instead of Attribute.

   238      * This class is temporary and a work in progress.

   239      *

   240      * @class GraphicBase

   241      * @constructor

   242      * @param {Object} cfg Key value pairs for attributes

   243      */

   244     GraphicBase = function(cfg)

   245     {

   246         var host = this,

   247             PluginHost = Y.Plugin && Y.Plugin.Host;

   248         if (host._initPlugins && PluginHost) {

   249             PluginHost.call(host);

   250         }

   251 

   252         host.name = host.constructor.NAME;

   253         host._eventPrefix = host.constructor.EVENT_PREFIX || host.constructor.NAME;

   254         AttributeLite.call(host);

   255         host.addAttrs(cfg);

   256         host.init.apply(this, arguments);

   257         if (host._initPlugins) {

   258             // Need to initPlugins manually, to handle constructor parsing, static Plug parsing

   259             host._initPlugins(cfg);

   260         }

   261         host.initialized = true;

   262     };

   263 

   264     GraphicBase.NAME = "baseGraphic";

   265 

   266     GraphicBase.prototype = {

   267         /**

   268          * Init method, invoked during construction.

   269          * Fires an init event after calling `initializer` on implementers.

   270          *

   271          * @method init

   272          * @protected

   273          */

   274         init: function()

   275         {

   276             this.publish("init", {

   277                 fireOnce:true

   278             });

   279             this.initializer.apply(this, arguments);

   280             this.fire("init", {cfg: arguments[0]});

   281         },

   282 

   283         /**

   284          * Camel case concatanates two strings.

   285          *

   286          * @method _camelCaseConcat

   287          * @param {String} prefix The first string

   288          * @param {String} name The second string

   289          * @return String

   290          * @private

   291          */

   292         _camelCaseConcat: function(prefix, name)

   293         {

   294             return prefix + name.charAt(0).toUpperCase() + name.slice(1);

   295         }

   296     };

   297 //Straightup augment, no wrapper functions

   298 Y.mix(GraphicBase, Y.AttributeLite, false, null, 1);

   299 Y.mix(GraphicBase, PluginHost, false, null, 1);

   300 GraphicBase.prototype.constructor = GraphicBase;

   301 GraphicBase.plug = PluginHost.plug;

   302 GraphicBase.unplug = PluginHost.unplug;

   303 Y.GraphicBase = GraphicBase;

   304 

   305 

   306 /**

   307  * `Drawing` provides a set of drawing methods used by `Path` and custom shape classes.

   308  * `Drawing` has the following implementations based on browser capability.

   309  *  <ul>

   310  *      <li><a href="SVGDrawing.html">`SVGDrawing`</a></li>

   311  *      <li><a href="VMLDrawing.html">`VMLDrawing`</a></li>

   312  *      <li><a href="CanvasDrawing.html">`CanvasDrawing`</a></li>

   313  *  </ul>

   314  *

   315  * @class Drawing

   316  * @constructor

   317  */

   318     /**

   319      * Draws a line segment using the current line style from the current drawing position to the specified x and y coordinates.

   320      *

   321      * @method lineTo

   322      * @param {Number} point1 x-coordinate for the end point.

   323      * @param {Number} point2 y-coordinate for the end point.

   324      */

   325     /**

   326      * Moves the current drawing position to specified x and y coordinates.

   327      *

   328      * @method moveTo

   329      * @param {Number} x x-coordinate for the end point.

   330      * @param {Number} y y-coordinate for the end point.

   331      */

   332     /**

   333      * Draws a bezier curve.

   334      *

   335      * @method curveTo

   336      * @param {Number} cp1x x-coordinate for the first control point.

   337      * @param {Number} cp1y y-coordinate for the first control point.

   338      * @param {Number} cp2x x-coordinate for the second control point.

   339      * @param {Number} cp2y y-coordinate for the second control point.

   340      * @param {Number} x x-coordinate for the end point.

   341      * @param {Number} y y-coordinate for the end point.

   342      */

   343     /**

   344      * Draws a quadratic bezier curve.

   345      *

   346      * @method quadraticCurveTo

   347      * @param {Number} cpx x-coordinate for the control point.

   348      * @param {Number} cpy y-coordinate for the control point.

   349      * @param {Number} x x-coordinate for the end point.

   350      * @param {Number} y y-coordinate for the end point.

   351      */

   352     /**

   353      * Draws a rectangle.

   354      *

   355      * @method drawRect

   356      * @param {Number} x x-coordinate

   357      * @param {Number} y y-coordinate

   358      * @param {Number} w width

   359      * @param {Number} h height

   360      */

   361     /**

   362      * Draws a rectangle with rounded corners.

   363      *

   364      * @method drawRoundRect

   365      * @param {Number} x x-coordinate

   366      * @param {Number} y y-coordinate

   367      * @param {Number} w width

   368      * @param {Number} h height

   369      * @param {Number} ew width of the ellipse used to draw the rounded corners

   370      * @param {Number} eh height of the ellipse used to draw the rounded corners

   371      */

   372     /**

   373      * Completes a drawing operation.

   374      *

   375      * @method end

   376      */

   377     /**

   378      * Clears the path.

   379      *

   380      * @method clear

   381      */

   382 /**

   383  *  <p>Base class for creating shapes.</p>

   384  *  <p>`Shape` is an abstract class and is not meant to be used directly. The following classes extend

   385  *  `Shape`.

   386  *

   387  *  <ul>

   388  *      <li><a href="Circle.html">`Circle`</a></li>

   389  *      <li><a href="Ellipse.html">`Ellipse`</a></li>

   390  *      <li><a href="Rect.html">`Rect`</a></li>

   391  *      <li><a href="Path.html">`Path`</a></li>

   392  *  </ul>

   393  *

   394  * `Shape` can also be extended to create custom shape classes.</p>

   395  *

   396  * `Shape` has the following implementations based on browser capability.

   397  *  <ul>

   398  *      <li><a href="SVGShape.html">`SVGShape`</a></li>

   399  *      <li><a href="VMLShape.html">`VMLShape`</a></li>

   400  *      <li><a href="CanvasShape.html">`CanvasShape`</a></li>

   401  *  </ul>

   402  *

   403  * It is not necessary to interact with these classes directly. `Shape` will point to the appropriate implemention.</p>

   404  *

   405  * @class Shape

   406  * @constructor

   407  * @param {Object} cfg (optional) Attribute configs

   408  */

   409     /**

   410      * Init method, invoked during construction.

   411      * Calls `initializer` method.

   412      *

   413      * @method init

   414      * @protected

   415      */

   416 	/**

   417 	 * Initializes the shape

   418 	 *

   419 	 * @private

   420 	 * @method initializer

   421 	 */

   422 	/**

   423 	 * Add a class name to each node.

   424 	 *

   425 	 * @method addClass

   426 	 * @param {String} className the class name to add to the node's class attribute

   427 	 */

   428 	/**

   429 	 * Removes a class name from each node.

   430 	 *

   431 	 * @method removeClass

   432 	 * @param {String} className the class name to remove from the node's class attribute

   433 	 */

   434 	/**

   435 	 * Gets the current position of the node in page coordinates.

   436 	 *

   437 	 * @method getXY

   438 	 * @return Array The XY position of the shape.

   439 	 */

   440 	/**

   441 	 * Set the position of the shape in page coordinates, regardless of how the node is positioned.

   442 	 *

   443 	 * @method setXY

   444 	 * @param {Array} Contains x & y values for new position (coordinates are page-based)

   445 	 */

   446 	/**

   447 	 * Determines whether the node is an ancestor of another HTML element in the DOM hierarchy.

   448 	 *

   449 	 * @method contains

   450 	 * @param {Shape | HTMLElement} needle The possible node or descendent

   451 	 * @return Boolean Whether or not this shape is the needle or its ancestor.

   452 	 */

   453 	/**

   454 	 * Compares nodes to determine if they match.

   455 	 * Node instances can be compared to each other and/or HTMLElements.

   456 	 * @method compareTo

   457 	 * @param {HTMLElement | Node} refNode The reference node to compare to the node.

   458 	 * @return {Boolean} True if the nodes match, false if they do not.

   459 	 */

   460 	/**

   461 	 * Test if the supplied node matches the supplied selector.

   462 	 *

   463 	 * @method test

   464 	 * @param {String} selector The CSS selector to test against.

   465 	 * @return Boolean Wheter or not the shape matches the selector.

   466 	 */

   467     /**

   468      * Sets the value of an attribute.

   469      *

   470      * @method set

   471      * @param {String|Object} name The name of the attribute. Alternatively, an object of key value pairs can

   472      * be passed in to set multiple attributes at once.

   473      * @param {Any} value The value to set the attribute to. This value is ignored if an object is received as

   474      * the name param.

   475      */

   476 	/**

   477 	 * Specifies a 2d translation.

   478 	 *

   479 	 * @method translate

   480 	 * @param {Number} x The value to transate on the x-axis.

   481 	 * @param {Number} y The value to translate on the y-axis.

   482 	 */

   483 	/**

   484 	 * Translates the shape along the x-axis. When translating x and y coordinates,

   485 	 * use the `translate` method.

   486 	 *

   487 	 * @method translateX

   488 	 * @param {Number} x The value to translate.

   489 	 */

   490 	/**

   491 	 * Translates the shape along the y-axis. When translating x and y coordinates,

   492 	 * use the `translate` method.

   493 	 *

   494 	 * @method translateY

   495 	 * @param {Number} y The value to translate.

   496 	 */

   497     /**

   498      * Skews the shape around the x-axis and y-axis.

   499      *

   500      * @method skew

   501      * @param {Number} x The value to skew on the x-axis.

   502      * @param {Number} y The value to skew on the y-axis.

   503      */

   504 	/**

   505 	 * Skews the shape around the x-axis.

   506 	 *

   507 	 * @method skewX

   508 	 * @param {Number} x x-coordinate

   509 	 */

   510 	/**

   511 	 * Skews the shape around the y-axis.

   512 	 *

   513 	 * @method skewY

   514 	 * @param {Number} y y-coordinate

   515 	 */

   516 	/**

   517 	 * Rotates the shape clockwise around it transformOrigin.

   518 	 *

   519 	 * @method rotate

   520 	 * @param {Number} deg The degree of the rotation.

   521 	 */

   522 	/**

   523 	 * Specifies a 2d scaling operation.

   524 	 *

   525 	 * @method scale

   526 	 * @param {Number} val

   527 	 */

   528 	/**

   529 	 * Returns the bounds for a shape.

   530 	 *

   531      * Calculates the a new bounding box from the original corner coordinates (base on size and position) and the transform matrix.

   532      * The calculated bounding box is used by the graphic instance to calculate its viewBox.

   533      *

   534 	 * @method getBounds

   535 	 * @return Object

   536 	 */

   537     /**

   538      * Destroys the instance.

   539      *

   540      * @method destroy

   541      */

   542 	/**

   543 	 * 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

   544 	 * fraction of the shape's corresponding bounding box dimension. The default value is [0.5, 0.5].

   545 	 *

   546 	 * @config transformOrigin

   547 	 * @type Array

   548 	 */

   549     /**

   550      * <p>A string containing, in order, transform operations applied to the shape instance. The `transform` string can contain the following values:

   551      *

   552      *    <dl>

   553      *        <dt>rotate</dt><dd>Rotates the shape clockwise around it transformOrigin.</dd>

   554      *        <dt>translate</dt><dd>Specifies a 2d translation.</dd>

   555      *        <dt>skew</dt><dd>Skews the shape around the x-axis and y-axis.</dd>

   556      *        <dt>scale</dt><dd>Specifies a 2d scaling operation.</dd>

   557      *        <dt>translateX</dt><dd>Translates the shape along the x-axis.</dd>

   558      *        <dt>translateY</dt><dd>Translates the shape along the y-axis.</dd>

   559      *        <dt>skewX</dt><dd>Skews the shape around the x-axis.</dd>

   560      *        <dt>skewY</dt><dd>Skews the shape around the y-axis.</dd>

   561      *        <dt>matrix</dt><dd>Specifies a 2D transformation matrix comprised of the specified six values.</dd>

   562      *    </dl>

   563      * </p>

   564      * <p>Applying transforms through the transform attribute will reset the transform matrix and apply a new transform. The shape class also contains

   565      * corresponding methods for each transform that will apply the transform to the current matrix. The below code illustrates how you might use the

   566      * `transform` attribute to instantiate a recangle with a rotation of 45 degrees.</p>

   567             var myRect = new Y.Rect({

   568                 type:"rect",

   569                 width: 50,

   570                 height: 40,

   571                 transform: "rotate(45)"

   572             };

   573      * <p>The code below would apply `translate` and `rotate` to an existing shape.</p>

   574 

   575         myRect.set("transform", "translate(40, 50) rotate(45)");

   576 	 * @config transform

   577      * @type String

   578 	 */

   579 	/**

   580 	 * Unique id for class instance.

   581 	 *

   582 	 * @config id

   583 	 * @type String

   584 	 */

   585 	/**

   586 	 * Indicates the x position of shape.

   587 	 *

   588 	 * @config x

   589 	 * @type Number

   590 	 */

   591 	/**

   592 	 * Indicates the y position of shape.

   593 	 *

   594 	 * @config y

   595 	 * @type Number

   596 	 */

   597 	/**

   598 	 * Indicates the width of the shape

   599 	 *

   600 	 * @config width

   601 	 * @type Number

   602 	 */

   603 	/**

   604 	 * Indicates the height of the shape

   605 	 *

   606 	 * @config height

   607 	 * @type Number

   608 	 */

   609 	/**

   610 	 * Indicates whether the shape is visible.

   611 	 *

   612 	 * @config visible

   613 	 * @type Boolean

   614 	 */

   615 	/**

   616 	 * Contains information about the fill of the shape.

   617      *  <dl>

   618      *      <dt>color</dt><dd>The color of the fill.</dd>

   619      *      <dt>opacity</dt><dd>Number between 0 and 1 that indicates the opacity of the fill. The default value is 1.</dd>

   620      *      <dt>type</dt><dd>Type of fill.

   621      *          <dl>

   622      *              <dt>solid</dt><dd>Solid single color fill. (default)</dd>

   623      *              <dt>linear</dt><dd>Linear gradient fill.</dd>

   624      *              <dt>radial</dt><dd>Radial gradient fill.</dd>

   625      *          </dl>

   626      *      </dd>

   627      *  </dl>

   628      *  <p>If a `linear` or `radial` is specified as the fill type. The following additional property is used:

   629      *  <dl>

   630      *      <dt>stops</dt><dd>An array of objects containing the following properties:

   631      *          <dl>

   632      *              <dt>color</dt><dd>The color of the stop.</dd>

   633      *              <dt>opacity</dt><dd>Number between 0 and 1 that indicates the opacity of the stop. The default value is 1.

   634      *              Note: No effect for IE 6 - 8</dd>

   635      *              <dt>offset</dt><dd>Number between 0 and 1 indicating where the color stop is positioned.</dd>

   636      *          </dl>

   637      *      </dd>

   638      *      <p>Linear gradients also have the following property:</p>

   639      *      <dt>rotation</dt><dd>Linear gradients flow left to right by default. The rotation property allows you to change the

   640      *      flow by rotation. (e.g. A rotation of 180 would make the gradient pain from right to left.)</dd>

   641      *      <p>Radial gradients have the following additional properties:</p>

   642      *      <dt>r</dt><dd>Radius of the gradient circle.</dd>

   643      *      <dt>fx</dt><dd>Focal point x-coordinate of the gradient.</dd>

   644      *      <dt>fy</dt><dd>Focal point y-coordinate of the gradient.</dd>

   645      *      <dt>cx</dt><dd>

   646      *          <p>The x-coordinate of the center of the gradient circle. Determines where the color stop begins. The default value 0.5.</p>

   647      *          <p><strong>Note: </strong>Currently, this property is not implemented for corresponding `CanvasShape` and

   648      *          `VMLShape` classes which are used on Android or IE 6 - 8.</p>

   649      *      </dd>

   650      *      <dt>cy</dt><dd>

   651      *          <p>The y-coordinate of the center of the gradient circle. Determines where the color stop begins. The default value 0.5.</p>

   652      *          <p><strong>Note: </strong>Currently, this property is not implemented for corresponding `CanvasShape` and `VMLShape`

   653      *          classes which are used on Android or IE 6 - 8.</p>

   654      *      </dd>

   655      *  </dl>

   656 	 *

   657 	 * @config fill

   658 	 * @type Object

   659 	 */

   660 	/**

   661 	 * Contains information about the stroke of the shape.

   662      *  <dl>

   663      *      <dt>color</dt><dd>The color of the stroke.</dd>

   664      *      <dt>weight</dt><dd>Number that indicates the width of the stroke.</dd>

   665      *      <dt>opacity</dt><dd>Number between 0 and 1 that indicates the opacity of the stroke. The default value is 1.</dd>

   666      *      <dt>dashstyle</dt>Indicates whether to draw a dashed stroke. When set to "none", a solid stroke is drawn. When set

   667      *      to an array, the first index indicates the length of the dash. The second index indicates the length of gap.

   668      *      <dt>linecap</dt><dd>Specifies the linecap for the stroke. The following values can be specified:

   669      *          <dl>

   670      *              <dt>butt (default)</dt><dd>Specifies a butt linecap.</dd>

   671      *              <dt>square</dt><dd>Specifies a sqare linecap.</dd>

   672      *              <dt>round</dt><dd>Specifies a round linecap.</dd>

   673      *          </dl>

   674      *      </dd>

   675      *      <dt>linejoin</dt><dd>Specifies a linejoin for the stroke. The following values can be specified:

   676      *          <dl>

   677      *              <dt>round (default)</dt><dd>Specifies that the linejoin will be round.</dd>

   678      *              <dt>bevel</dt><dd>Specifies a bevel for the linejoin.</dd>

   679      *              <dt>miter limit</dt><dd>An integer specifying the miter limit of a miter linejoin. If you want to specify a linejoin

   680      *              of miter, you simply specify the limit as opposed to having separate miter and miter limit values.</dd>

   681      *          </dl>

   682      *      </dd>

   683      *  </dl>

   684 	 *

   685 	 * @config stroke

   686 	 * @type Object

   687 	 */

   688 	/**

   689 	 * Dom node for the shape.

   690 	 *

   691 	 * @config node

   692 	 * @type HTMLElement

   693 	 * @readOnly

   694 	 */

   695     /**

   696      * Represents an SVG Path string. This will be parsed and added to shape's API to represent the SVG data across all

   697      * implementations. Note that when using VML or SVG implementations, part of this content will be added to the DOM using

   698      * respective VML/SVG attributes. If your content comes from an untrusted source, you will need to ensure that no

   699      * malicious code is included in that content.

   700      *

   701      * @config data

   702      * @type String

   703      */

   704 	/**

   705 	 * Reference to the parent graphic instance

   706 	 *

   707 	 * @config graphic

   708 	 * @type Graphic

   709 	 * @readOnly

   710 	 */

   711 

   712 /**

   713  * <p>Creates circle shape with editable attributes.</p>

   714  * <p>`Circle` instances can be created using the <a href="Graphic.html#method_addShape">`addShape`</a> method of the

   715  * <a href="Graphic.html">`Graphic`</a> class. The method's `cfg` argument contains a `type` attribute. Assigning "circle"

   716  * or `Y.Circle` to this attribute will create a `Circle` instance. Required attributes for instantiating a `Circle` are

   717  * `type` and `radius`. Optional attributes include:

   718  *  <ul>

   719  *      <li><a href="#attr_fill">fill</a></li>

   720  *      <li><a href="#attr_id">id</a></li>

   721  *      <li><a href="#attr_stroke">stroke</a></li>

   722  *      <li><a href="#attr_transform">transform</a></li>

   723  *      <li><a href="#attr_transformOrigin">transformOrigin</a></li>

   724  *      <li><a href="#attr_visible">visible</a></li>

   725  *      <li><a href="#attr_x">x</a></li>

   726  *      <li><a href="#attr_y">y</a></li>

   727  *  </ul>

   728  *

   729  * The below code creates a circle by defining the `type` attribute as "circle":</p>

   730 

   731         var myCircle = myGraphic.addShape({

   732             type: "circle",

   733             radius: 10,

   734             fill: {

   735                 color: "#9aa"

   736             },

   737             stroke: {

   738                 weight: 1,

   739                 color: "#000"

   740             }

   741         });

   742 

   743  * Below, this same circle is created by defining the `type` attribute with a class reference:

   744  *

   745         var myCircle = myGraphic.addShape({

   746             type: Y.Circle,

   747             radius: 10,

   748             fill: {

   749                 color: "#9aa"

   750             },

   751             stroke: {

   752                 weight: 1,

   753                 color: "#000"

   754             }

   755         });

   756  *

   757  * <p>`Circle` has the following implementations based on browser capability.

   758  *  <ul>

   759  *      <li><a href="SVGCircle.html">`SVGCircle`</a></li>

   760  *      <li><a href="VMLCircle.html">`VMLCircle`</a></li>

   761  *      <li><a href="CanvasCircle.html">`CanvasCircle`</a></li>

   762  *  </ul>

   763  *

   764  * It is not necessary to interact with these classes directly. `Circle` will point to the appropriate implemention.</p>

   765  *

   766  * @class Circle

   767  * @extends Shape

   768  * @constructor

   769  */

   770     /**

   771      * Radius of the circle

   772      *

   773      * @config radius

   774      * @type Number

   775      */

   776 /**

   777  * <p>Creates an ellipse shape with editable attributes.</p>

   778  * <p>`Ellipse` instances can be created using the <a href="Graphic.html#method_addShape">`addShape`</a> method of the

   779  * <a href="Graphic.html">`Graphic`</a> class. The method's `cfg` argument contains a `type` attribute. Assigning "ellipse"

   780  * or `Y.Ellipse` to this attribute will create a `Ellipse` instance. Required attributes for instantiating a `Ellipse` are

   781  * `type`, `width` and `height`. Optional attributes include:

   782  *  <ul>

   783  *      <li><a href="#attr_fill">fill</a></li>

   784  *      <li><a href="#attr_id">id</a></li>

   785  *      <li><a href="#attr_stroke">stroke</a></li>

   786  *      <li><a href="#attr_transform">transform</a></li>

   787  *      <li><a href="#attr_transformOrigin">transformOrigin</a></li>

   788  *      <li><a href="#attr_visible">visible</a></li>

   789  *      <li><a href="#attr_x">x</a></li>

   790  *      <li><a href="#attr_y">y</a></li>

   791  *  </ul>

   792  *

   793  * The below code creates an ellipse by defining the `type` attribute as "ellipse":</p>

   794 

   795         var myEllipse = myGraphic.addShape({

   796             type: "ellipse",

   797             width: 20,

   798             height: 10,

   799             fill: {

   800                 color: "#9aa"

   801             },

   802             stroke: {

   803                 weight: 1,

   804                 color: "#000"

   805             }

   806         });

   807 

   808  * Below, the same ellipse is created by defining the `type` attribute with a class reference:

   809  *

   810         var myEllipse = myGraphic.addShape({

   811             type: Y.Ellipse,

   812             width: 20,

   813             height: 10,

   814             fill: {

   815                 color: "#9aa"

   816             },

   817             stroke: {

   818                 weight: 1,

   819                 color: "#000"

   820             }

   821         });

   822  *

   823  * <p>`Ellipse` has the following implementations based on browser capability.

   824  *  <ul>

   825  *      <li><a href="SVGEllipse.html">`SVGEllipse`</a></li>

   826  *      <li><a href="VMLEllipse.html">`VMLEllipse`</a></li>

   827  *      <li><a href="CanvasEllipse.html">`CanvasEllipse`</a></li>

   828  *  </ul>

   829  *

   830  * It is not necessary to interact with these classes directly. `Ellipse` will point to the appropriate implemention.</p>

   831  *

   832  * @class Ellipse

   833  * @extends Shape

   834  * @constructor

   835  */

   836 /**

   837  * <p>Creates an rectangle shape with editable attributes.</p>

   838  * <p>`Rect` instances can be created using the <a href="Graphic.html#method_addShape">`addShape`</a> method of the

   839  * <a href="Graphic.html">`Graphic`</a> class. The method's `cfg` argument contains a `type` attribute. Assigning "rect"

   840  * or `Y.Rect` to this attribute will create a `Rect` instance. Required attributes for instantiating a `Rect` are `type`,

   841  * `width` and `height`. Optional attributes include:

   842  *  <ul>

   843  *      <li><a href="#attr_fill">fill</a></li>

   844  *      <li><a href="#attr_id">id</a></li>

   845  *      <li><a href="#attr_stroke">stroke</a></li>

   846  *      <li><a href="#attr_transform">transform</a></li>

   847  *      <li><a href="#attr_transformOrigin">transformOrigin</a></li>

   848  *      <li><a href="#attr_visible">visible</a></li>

   849  *      <li><a href="#attr_x">x</a></li>

   850  *      <li><a href="#attr_y">y</a></li>

   851  *  </ul>

   852  *

   853  * The below code creates a rectangle by defining the `type` attribute as "rect":</p>

   854 

   855         var myRect = myGraphic.addShape({

   856             type: "rect",

   857             width: 20,

   858             height: 10,

   859             fill: {

   860                 color: "#9aa"

   861             },

   862             stroke: {

   863                 weight: 1,

   864                 color: "#000"

   865             }

   866         });

   867 

   868  * Below, the same rectangle is created by defining the `type` attribute with a class reference:

   869  *

   870         var myRect = myGraphic.addShape({

   871             type: Y.Rect,

   872             width: 20,

   873             height: 10,

   874             fill: {

   875                 color: "#9aa"

   876             },

   877             stroke: {

   878                 weight: 1,

   879                 color: "#000"

   880             }

   881         });

   882  *

   883  * <p>`Rect` has the following implementations based on browser capability.

   884  *  <ul>

   885  *      <li><a href="SVGRect.html">`SVGRect`</a></li>

   886  *      <li><a href="VMLRect.html">`VMLRect`</a></li>

   887  *      <li><a href="CanvasRect.html">`CanvasRect`</a></li>

   888  *  </ul>

   889  *

   890  * It is not necessary to interact with these classes directly. `Rect` will point to the appropriate implemention.</p>

   891  *

   892  * @class Rect

   893  * @extends Shape

   894  * @constructor

   895  */

   896 /**

   897  * <p>The `Path` class creates a shape through the use of drawing methods. The `Path` class has the following drawing methods available:</p>

   898  *  <ul>

   899  *      <li><a href="#method_clear">`clear`</a></li>

   900  *      <li><a href="#method_curveTo">`curveTo`</a></li>

   901  *      <li><a href="#method_drawRect">`drawRect`</a></li>

   902  *      <li><a href="#method_drawRoundRect">`drawRoundRect`</a></li>

   903  *      <li><a href="#method_end">`end`</a></li>

   904  *      <li><a href="#method_lineTo">`lineTo`</a></li>

   905  *      <li><a href="#method_moveTo">`moveTo`</a></li>

   906  *      <li><a href="#method_quadraticCurveTo">`quadraticCurveTo`</a></li>

   907  *  </ul>

   908  *

   909  *  <p>Like other shapes, `Path` elements are created using the <a href="Graphic.html#method_addShape">`addShape`</a>

   910  *  method of the <a href="Graphic.html">`Graphic`</a> class. The method's `cfg` argument contains a `type` attribute.

   911  *  Assigning "path" or `Y.Path` to this attribute will create a `Path` instance. After instantiation, a series of drawing

   912  *  operations must be performed in order to render a shape. The below code instantiates a path element by defining the

   913  *  `type` attribute as "path":</p>

   914 

   915         var myPath = myGraphic.addShape({

   916             type: "path",

   917             fill: {

   918                 color: "#9aa"

   919             },

   920             stroke: {

   921                 weight: 1,

   922                 color: "#000"

   923             }

   924         });

   925 

   926  * Below a `Path` element with the same properties is instantiated by defining the `type` attribute with a class reference:

   927  *

   928         var myPath = myGraphic.addShape({

   929             type: Y.Path,

   930             fill: {

   931                 color: "#9aa"

   932             },

   933             stroke: {

   934                 weight: 1,

   935                 color: "#000"

   936             }

   937         });

   938 

   939  * After instantiation, a shape or segment needs to be drawn for an element to render. After all draw operations are performed,

   940  * the <a href="#method_end">`end`</a> method will render the shape. The code below will draw a triangle:

   941 

   942         myPath.moveTo(35, 5);

   943         myPath.lineTo(65, 65);

   944         myPath.lineTo(5, 65);

   945         myPath.lineTo(35, 5);

   946         myPath.end();

   947  *

   948  * <p>`Path` has the following implementations based on browser capability.

   949  *  <ul>

   950  *      <li><a href="SVGPath.html">`SVGPath`</a></li>

   951  *      <li><a href="VMLPath.html">`VMLPath`</a></li>

   952  *      <li><a href="CanvasPath.html">`CanvasPath`</a></li>

   953  *  </ul>

   954  * It is not necessary to interact with these classes directly. `Path` will point to the appropriate implemention.</p>

   955  *

   956  * @class Path

   957  * @extends Shape

   958  * @uses Drawing

   959  * @constructor

   960  */

   961 	/**

   962 	 * Indicates the path used for the node.

   963 	 *

   964 	 * @config path

   965 	 * @type String

   966      * @readOnly

   967 	 */

   968 /**

   969  * `Graphic` acts a factory and container for shapes. You need at least one `Graphic` instance to create shapes for your application.

   970  * <p>The code block below creates a `Graphic` instance and appends it to an HTMLElement with the id 'mygraphiccontainer'.</p>

   971 

   972         var myGraphic = new Y.Graphic({render:"#mygraphiccontainer"});

   973 

   974  * <p>Alternatively, you can add a `Graphic` instance to the DOM using the <a href="#method_render">`render`</a> method.</p>

   975         var myGraphic = new Y.Graphic();

   976         myGraphic.render("#mygraphiccontainer");

   977 

   978  * `Graphic` has the following implementations based on browser capability.

   979  *  <ul>

   980  *      <li><a href="SVGGraphic.html">`SVGGraphic`</a></li>

   981  *      <li><a href="VMLGraphic.html">`VMLGraphic`</a></li>

   982  *      <li><a href="CanvasGraphic.html">`CanvasGraphic`</a></li>

   983  *  </ul>

   984  *

   985  * It is not necessary to interact with these classes directly. `Graphic` will point to the appropriate implemention.</p>

   986  *

   987  * @class Graphic

   988  * @constructor

   989  */

   990     /**

   991      * Whether or not to render the `Graphic` automatically after to a specified parent node after init. This can be a Node

   992      * instance or a CSS selector string.

   993      *

   994      * @config render

   995      * @type Node | String

   996      */

   997     /**

   998 	 * Unique id for class instance.

   999 	 *

  1000 	 * @config id

  1001 	 * @type String

  1002 	 */

  1003     /**

  1004      * Key value pairs in which a shape instance is associated with its id.

  1005      *

  1006      *  @config shapes

  1007      *  @type Object

  1008      *  @readOnly

  1009      */

  1010     /**

  1011      *  Object containing size and coordinate data for the content of a Graphic in relation to the coordSpace node.

  1012      *

  1013      *  @config contentBounds

  1014      *  @type Object

  1015      *  @readOnly

  1016      */

  1017     /**

  1018      *  The html element that represents to coordinate system of the Graphic instance.

  1019      *

  1020      *  @config node

  1021      *  @type HTMLElement

  1022      *  @readOnly

  1023      */

  1024 	/**

  1025 	 * Indicates the width of the `Graphic`.

  1026 	 *

  1027 	 * @config width

  1028 	 * @type Number

  1029 	 */

  1030 	/**

  1031 	 * Indicates the height of the `Graphic`.

  1032 	 *

  1033 	 * @config height

  1034 	 * @type Number

  1035 	 */

  1036     /**

  1037      *  Determines the sizing of the Graphic.

  1038      *

  1039      *  <dl>

  1040      *      <dt>sizeContentToGraphic</dt><dd>The Graphic's width and height attributes are, either explicitly set through the

  1041      *      <code>width</code> and <code>height</code> attributes or are determined by the dimensions of the parent element. The

  1042      *      content contained in the Graphic will be sized to fit with in the Graphic instance's dimensions. When using this

  1043      *      setting, the <code>preserveAspectRatio</code> attribute will determine how the contents are sized.</dd>

  1044      *      <dt>sizeGraphicToContent</dt><dd>(Also accepts a value of true) The Graphic's width and height are determined by the

  1045      *      size and positioning of the content.</dd>

  1046      *      <dt>false</dt><dd>The Graphic's width and height attributes are, either explicitly set through the <code>width</code>

  1047      *      and <code>height</code> attributes or are determined by the dimensions of the parent element. The contents of the

  1048      *      Graphic instance are not affected by this setting.</dd>

  1049      *  </dl>

  1050      *

  1051      *

  1052      *  @config autoSize

  1053      *  @type Boolean | String

  1054      *  @default false

  1055      */

  1056     /**

  1057      * Determines how content is sized when <code>autoSize</code> is set to <code>sizeContentToGraphic</code>.

  1058      *

  1059      *  <dl>

  1060      *      <dt>none<dt><dd>Do not force uniform scaling. Scale the graphic content of the given element non-uniformly if necessary

  1061      *      such that the element's bounding box exactly matches the viewport rectangle.</dd>

  1062      *      <dt>xMinYMin</dt><dd>Force uniform scaling position along the top left of the Graphic's node.</dd>

  1063      *      <dt>xMidYMin</dt><dd>Force uniform scaling horizontally centered and positioned at the top of the Graphic's node.<dd>

  1064      *      <dt>xMaxYMin</dt><dd>Force uniform scaling positioned horizontally from the right and vertically from the top.</dd>

  1065      *      <dt>xMinYMid</dt>Force uniform scaling positioned horizontally from the left and vertically centered.</dd>

  1066      *      <dt>xMidYMid (the default)</dt><dd>Force uniform scaling with the content centered.</dd>

  1067      *      <dt>xMaxYMid</dt><dd>Force uniform scaling positioned horizontally from the right and vertically centered.</dd>

  1068      *      <dt>xMinYMax</dt><dd>Force uniform scaling positioned horizontally from the left and vertically from the bottom.</dd>

  1069      *      <dt>xMidYMax</dt><dd>Force uniform scaling horizontally centered and position vertically from the bottom.</dd>

  1070      *      <dt>xMaxYMax</dt><dd>Force uniform scaling positioned horizontally from the right and vertically from the bottom.</dd>

  1071      *  </dl>

  1072      *

  1073      * @config preserveAspectRatio

  1074      * @type String

  1075      * @default xMidYMid

  1076      */

  1077     /**

  1078      * The contentBounds will resize to greater values but not to smaller values. (for performance)

  1079      * When resizing the contentBounds down is desirable, set the resizeDown value to true.

  1080      *

  1081      * @config resizeDown

  1082      * @type Boolean

  1083      */

  1084 	/**

  1085 	 * Indicates the x-coordinate for the instance.

  1086 	 *

  1087 	 * @config x

  1088 	 * @type Number

  1089 	 */

  1090 	/**

  1091 	 * Indicates the y-coordinate for the instance.

  1092 	 *

  1093 	 * @config y

  1094 	 * @type Number

  1095 	 */

  1096     /**

  1097      * Indicates whether or not the instance will automatically redraw after a change is made to a shape.

  1098      * This property will get set to false when batching operations.

  1099      *

  1100      * @config autoDraw

  1101      * @type Boolean

  1102      * @default true

  1103      * @private

  1104      */

  1105 	/**

  1106 	 * Indicates whether the `Graphic` and its children are visible.

  1107 	 *

  1108 	 * @config visible

  1109 	 * @type Boolean

  1110 	 */

  1111     /**

  1112      * Gets the current position of the graphic instance in page coordinates.

  1113      *

  1114      * @method getXY

  1115      * @return Array The XY position of the shape.

  1116      */

  1117     /**

  1118      * Adds the graphics node to the dom.

  1119      *

  1120      * @method render

  1121      * @param {Node|String} parentNode node in which to render the graphics node into.

  1122      */

  1123     /**

  1124      * Removes all nodes.

  1125      *

  1126      * @method destroy

  1127      */

  1128     /**

  1129      * <p>Generates a shape instance by type. The method accepts an object that contain's the shape's

  1130      * type and attributes to be customized. For example, the code below would create a rectangle:</p>

  1131      *

  1132             var myRect = myGraphic.addShape({

  1133                 type: "rect",

  1134                 width: 40,

  1135                 height: 30,

  1136                 fill: {