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

     2 

     3 /**

     4  *

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

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

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

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

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

    10  *

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

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

    13  * and stroke properties.</p>

    14  *

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

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

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

    18  *

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

    20  *     <ul>

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

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

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

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

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

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

    27  *     </ul>

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

    29  * @module graphics

    30  * @main graphics

    31  */

    32 var SETTER = "setter",

    33 	PluginHost = Y.Plugin.Host,

    34     VALUE = "value",

    35     VALUEFN = "valueFn",

    36     READONLY = "readOnly",

    37     Y_LANG = Y.Lang,

    38     STR = "string",

    39     WRITE_ONCE = "writeOnce",

    40     GraphicBase,

    41     AttributeLite;

    42 

    43     /**

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

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

    46 	 *

    47 	 * @class AttributeLite

    48 	 * @constructor

    49 	 */

    50     AttributeLite = function()

    51     {

    52         var host = this; // help compression

    53 

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

    55         host._ATTR_E_FACADE = {};

    56 

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

    58         host._state = {};

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

    60     };

    61 

    62     AttributeLite.prototype = {

    63 		/**

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

    65 		 * the initial values will be overwritten.

    66 		 *

    67 		 * @method addAttrs

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

    69 		 */

    70 		addAttrs: function(cfg)

    71 		{

    72 			var host = this,

    73 				attrConfig = this.constructor.ATTRS,

    74 				attr,

    75 				i,

    76 				fn,

    77 				state = host._state;

    78 			for(i in attrConfig)

    79 			{

    80 				if(attrConfig.hasOwnProperty(i))

    81 				{

    82 					attr = attrConfig[i];

    83 					if(attr.hasOwnProperty(VALUE))

    84 					{

    85 						state[i] = attr.value;

    86 					}

    87 					else if(attr.hasOwnProperty(VALUEFN))

    88 					{

    89 						fn = attr.valueFn;

    90 						if(Y_LANG.isString(fn))

    91 						{

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

    93 						}

    94 						else

    95 						{

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

    97 						}

    98 					}

    99                 }

   100             }

   101 			host._state = state;

   102             for(i in attrConfig)

   103 			{

   104 				if(attrConfig.hasOwnProperty(i))

   105 				{

   106 					attr = attrConfig[i];

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

   108 					{

   109 						continue;

   110 					}

   111 

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

   113 					{

   114 						attr.readOnly = true;

   115 					}

   116 

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

   118 					{

   119 						if(attr.hasOwnProperty(SETTER))

   120 						{

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

   122 						}

   123 						else

   124 						{

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

   126 						}

   127 					}

   128 				}

   129 			}

   130 		},

   131 

   132         /**

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

   134          *

   135          * @method get

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

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

   138          */

   139         get: function(attr)

   140         {

   141             var host = this,

   142                 getter,

   143                 attrConfig = host.constructor.ATTRS;

   144             if(attrConfig && attrConfig[attr])

   145             {

   146                 getter = attrConfig[attr].getter;

   147                 if(getter)

   148                 {

   149                     if(typeof getter === STR)

   150                     {

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

   152                     }

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

   154                 }

   155 

   156                 return host._state[attr];

   157             }

   158             return null;

   159         },

   160 

   161         /**

   162          * Sets the value of an attribute.

   163          *

   164          * @method set

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

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

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

   168          * the name param.

   169          */

   170         set: function()

   171         {

   172             var attr = arguments[0],

   173                 i;

   174             if(Y_LANG.isObject(attr))

   175             {

   176                 for(i in attr)

   177                 {

   178                     if(attr.hasOwnProperty(i))

   179                     {

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

   181                     }

   182                 }

   183             }

   184             else

   185             {

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

   187             }

   188         },

   189 

   190 		/**

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

   192          *

   193          * @method _set

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

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

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

   197          * the name param.

   198 		 * @protected

   199 		 */

   200 		_set: function(attr, val)

   201 		{

   202 			var host = this,

   203 				setter,

   204 				args,

   205 				attrConfig = host.constructor.ATTRS;

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

   207 			{

   208 				setter = attrConfig[attr].setter;

   209 				if(setter)

   210 				{

   211 					args = [val];

   212 					if(typeof setter === STR)

   213 					{

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

   215 					}

   216 					else

   217                     {

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

   219                     }

   220 				}

   221 				host._state[attr] = val;

   222 			}

   223 		}

   224 	};

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

   226 	Y.AttributeLite = AttributeLite;

   227 

   228     /**

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

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

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

   232      *

   233      * @class GraphicBase

   234      * @constructor

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

   236      */

   237     GraphicBase = function(cfg)

   238     {

   239         var host = this,

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

   241         if (host._initPlugins && PluginHost) {

   242             PluginHost.call(host);

   243         }

   244 

   245         host.name = host.constructor.NAME;

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

   247         AttributeLite.call(host);

   248         host.addAttrs(cfg);

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

   250         if (host._initPlugins) {

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

   252             host._initPlugins(cfg);

   253         }

   254         host.initialized = true;

   255     };

   256 

   257     GraphicBase.NAME = "baseGraphic";

   258 

   259     GraphicBase.prototype = {

   260         /**

   261          * Init method, invoked during construction.

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

   263          *

   264          * @method init

   265          * @protected

   266          */

   267         init: function()

   268         {

   269             this.publish("init", {

   270                 fireOnce:true

   271             });

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

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

   274         },

   275 

   276         /**

   277          * Camel case concatanates two strings.

   278          *

   279          * @method _camelCaseConcat

   280          * @param {String} prefix The first string

   281          * @param {String} name The second string

   282          * @return String

   283          * @private

   284          */

   285         _camelCaseConcat: function(prefix, name)

   286         {

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

   288         }

   289     };

   290 //Straightup augment, no wrapper functions

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

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

   293 GraphicBase.prototype.constructor = GraphicBase;

   294 GraphicBase.plug = PluginHost.plug;

   295 GraphicBase.unplug = PluginHost.unplug;

   296 Y.GraphicBase = GraphicBase;

   297 

   298 

   299 /**

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

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

   302  *  <ul>

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

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

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

   306  *  </ul>

   307  *

   308  * @class Drawing

   309  * @constructor

   310  */

   311     /**

   312      * Draws a bezier curve.

   313      *

   314      * @method curveTo

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

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

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

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

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

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

   321      * @chainable

   322      */

   323     /**

   324      * Draws a quadratic bezier curve.

   325      *

   326      * @method quadraticCurveTo

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

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

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

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

   331      * @chainable

   332      */

   333     /**

   334      * Draws a rectangle.

   335      *

   336      * @method drawRect

   337      * @param {Number} x x-coordinate

   338      * @param {Number} y y-coordinate

   339      * @param {Number} w width

   340      * @param {Number} h height

   341      * @chainable

   342      */

   343     /**

   344      * Draws a rectangle with rounded corners.

   345      *

   346      * @method drawRoundRect

   347      * @param {Number} x x-coordinate

   348      * @param {Number} y y-coordinate

   349      * @param {Number} w width

   350      * @param {Number} h height

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

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

   353      * @chainable

   354      */

   355     /**

   356      * Draws a circle.

   357      *

   358      * @method drawCircle

   359      * @param {Number} x y-coordinate

   360      * @param {Number} y x-coordinate

   361      * @param {Number} r radius

   362      * @chainable

   363      * @protected

   364      */

   365     /**

   366      * Draws an ellipse.

   367      *

   368      * @method drawEllipse

   369      * @param {Number} x x-coordinate

   370      * @param {Number} y y-coordinate

   371      * @param {Number} w width

   372      * @param {Number} h height

   373      * @chainable

   374      * @protected

   375      */

   376     /**

   377      * Draws a diamond.

   378      *

   379      * @method drawDiamond

   380      * @param {Number} x y-coordinate

   381      * @param {Number} y x-coordinate

   382      * @param {Number} width width

   383      * @param {Number} height height

   384      * @chainable

   385      * @protected

   386      */

   387     /**

   388      * Draws a wedge.

   389      *

   390      * @method drawWedge

   391      * @param {Number} x x-coordinate of the wedge's center point

   392      * @param {Number} y y-coordinate of the wedge's center point

   393      * @param {Number} startAngle starting angle in degrees

   394      * @param {Number} arc sweep of the wedge. Negative values draw clockwise.

   395      * @param {Number} radius radius of wedge. If [optional] yRadius is defined, then radius is the x radius.

   396      * @param {Number} yRadius [optional] y radius for wedge.

   397      * @chainable

   398      * @private

   399      */

   400     /**

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

   402      *

   403      * @method lineTo

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

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

   406      * @chainable

   407      */

   408     /**

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

   410      *

   411      * @method relativeLineTo

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

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

   414      * @chainable

   415      */

   416     /**

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

   418      *

   419      * @method moveTo

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

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

   422      * @chainable

   423      */

   424     /**

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

   426      *

   427      * @method relativeMoveTo

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

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

   430      * @chainable

   431      */

   432     /**

   433      * Completes a drawing operation.

   434      *

   435      * @method end

   436      * @chainable

   437      */

   438     /**

   439      * Clears the path.

   440      *

   441      * @method clear

   442      * @chainable

   443      */

   444     /**

   445      * Ends a fill and stroke

   446      *

   447      * @method closePath

   448      * @chainable

   449      */

   450 /**

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

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

   453  *  `Shape`.

   454  *

   455  *  <ul>

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

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

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

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

   460  *  </ul>

   461  *

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

   463  *

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

   465  *  <ul>

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

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

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

   469  *  </ul>

   470  *

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

   472  *

   473  * @class Shape

   474  * @constructor

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

   476  */

   477     /**

   478      * Init method, invoked during construction.

   479      * Calls `initializer` method.

   480      *

   481      * @method init

   482      * @protected

   483      */

   484 	/**

   485 	 * Initializes the shape

   486 	 *

   487 	 * @private

   488 	 * @method initializer

   489 	 */

   490 	/**

   491 	 * Add a class name to each node.

   492 	 *

   493 	 * @method addClass

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

   495 	 */

   496 	/**

   497 	 * Removes a class name from each node.

   498 	 *

   499 	 * @method removeClass

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

   501 	 */

   502 	/**

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

   504 	 *

   505 	 * @method getXY

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

   507 	 */

   508 	/**

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

   510 	 *

   511 	 * @method setXY

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

   513 	 */

   514 	/**

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

   516 	 *

   517 	 * @method contains

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

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

   520 	 */

   521 	/**

   522 	 * Compares nodes to determine if they match.

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

   524 	 * @method compareTo

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

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

   527 	 */

   528 	/**

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

   530 	 *

   531 	 * @method test

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

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

   534 	 */

   535     /**

   536      * Sets the value of an attribute.

   537      *

   538      * @method set

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

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

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

   542      * the name param.

   543      */

   544 	/**

   545 	 * Specifies a 2d translation.

   546 	 *

   547 	 * @method translate

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

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

   550 	 */

   551 	/**

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

   553 	 * use the `translate` method.

   554 	 *

   555 	 * @method translateX

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

   557 	 */

   558 	/**

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

   560 	 * use the `translate` method.

   561 	 *

   562 	 * @method translateY

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

   564 	 */

   565     /**

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

   567      *

   568      * @method skew

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

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

   571      */

   572 	/**

   573 	 * Skews the shape around the x-axis.

   574 	 *

   575 	 * @method skewX

   576 	 * @param {Number} x x-coordinate

   577 	 */

   578 	/**

   579 	 * Skews the shape around the y-axis.

   580 	 *

   581 	 * @method skewY

   582 	 * @param {Number} y y-coordinate

   583 	 */

   584 	/**

   585 	 * Rotates the shape clockwise around it transformOrigin.

   586 	 *

   587 	 * @method rotate

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

   589 	 */

   590 	/**

   591 	 * Specifies a 2d scaling operation.

   592 	 *

   593 	 * @method scale

   594 	 * @param {Number} val

   595 	 */

   596 	/**

   597 	 * Returns the bounds for a shape.

   598 	 *

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

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

   601      *

   602 	 * @method getBounds

   603 	 * @return Object

   604 	 */

   605     /**

   606      * Destroys the instance.

   607      *

   608      * @method destroy

   609      */

   610 	/**

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

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

   613 	 *

   614 	 * @config transformOrigin

   615 	 * @type Array

   616 	 */

   617     /**

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

   619      *

   620      *    <dl>

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

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

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

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

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

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

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

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

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

   630      *    </dl>

   631      * </p>

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

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

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

   635             var myRect = new Y.Rect({

   636                 type:"rect",

   637                 width: 50,

   638                 height: 40,

   639                 transform: "rotate(45)"

   640             };

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

   642 

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

   644 	 * @config transform

   645      * @type String

   646 	 */

   647 	/**

   648 	 * Unique id for class instance.

   649 	 *

   650 	 * @config id

   651 	 * @type String

   652 	 */

   653 	/**

   654 	 * Indicates the x position of shape.

   655 	 *

   656 	 * @config x

   657 	 * @type Number

   658 	 */

   659 	/**

   660 	 * Indicates the y position of shape.

   661 	 *

   662 	 * @config y

   663 	 * @type Number

   664 	 */

   665 	/**

   666 	 * Indicates the width of the shape

   667 	 *

   668 	 * @config width

   669 	 * @type Number

   670 	 */

   671 	/**

   672 	 * Indicates the height of the shape

   673 	 *

   674 	 * @config height

   675 	 * @type Number

   676 	 */

   677 	/**

   678 	 * Indicates whether the shape is visible.

   679 	 *

   680 	 * @config visible

   681 	 * @type Boolean

   682 	 */

   683 	/**

   684 	 * Contains information about the fill of the shape.

   685      *  <dl>

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

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

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

   689      *          <dl>

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

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

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

   693      *          </dl>

   694      *      </dd>

   695      *  </dl>

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

   697      *  <dl>

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

   699      *          <dl>

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

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

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

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

   704      *          </dl>

   705      *      </dd>

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

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

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

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

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

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

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

   713      *      <dt>cx</dt><dd>

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

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

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

   717      *      </dd>

   718      *      <dt>cy</dt><dd>

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

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

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

   722      *      </dd>

   723      *  </dl>

   724 	 *

   725 	 * @config fill

   726 	 * @type Object

   727 	 */

   728 	/**

   729 	 * Contains information about the stroke of the shape.

   730      *  <dl>

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

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

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

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

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

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

   737      *          <dl>

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

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

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

   741      *          </dl>

   742      *      </dd>

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

   744      *          <dl>

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

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

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

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

   749      *          </dl>

   750      *      </dd>

   751      *  </dl>

   752 	 *

   753 	 * @config stroke

   754 	 * @type Object

   755 	 */

   756 	/**

   757 	 * Dom node for the shape.

   758 	 *

   759 	 * @config node

   760 	 * @type HTMLElement

   761 	 * @readOnly

   762 	 */

   763     /**

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

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

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

   767      * malicious code is included in that content.

   768      *

   769      * @config data

   770      * @type String

   771      */

   772 	/**

   773 	 * Reference to the parent graphic instance

   774 	 *

   775 	 * @config graphic

   776 	 * @type Graphic

   777 	 * @readOnly

   778 	 */

   779 

   780 /**

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

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

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

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

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

   786  *  <ul>

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

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

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

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

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

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

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

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

   795  *  </ul>

   796  *

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

   798 

   799         var myCircle = myGraphic.addShape({

   800             type: "circle",

   801             radius: 10,

   802             fill: {

   803                 color: "#9aa"

   804             },

   805             stroke: {

   806                 weight: 1,

   807                 color: "#000"

   808             }

   809         });

   810 

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

   812  *

   813         var myCircle = myGraphic.addShape({

   814             type: Y.Circle,

   815             radius: 10,

   816             fill: {

   817                 color: "#9aa"

   818             },

   819             stroke: {

   820                 weight: 1,

   821                 color: "#000"

   822             }

   823         });

   824  *

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

   826  *  <ul>

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

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

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

   830  *  </ul>

   831  *

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

   833  *

   834  * @class Circle

   835  * @extends Shape

   836  * @constructor

   837  */

   838     /**

   839      * Radius of the circle

   840      *

   841      * @config radius

   842      * @type Number

   843      */

   844 /**

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

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

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

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

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

   850  *  <ul>

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

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

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

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

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

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

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

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

   859  *  </ul>

   860  *

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

   862 

   863         var myEllipse = myGraphic.addShape({

   864             type: "ellipse",

   865             width: 20,

   866             height: 10,

   867             fill: {

   868                 color: "#9aa"

   869             },

   870             stroke: {

   871                 weight: 1,

   872                 color: "#000"

   873             }

   874         });

   875 

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

   877  *

   878         var myEllipse = myGraphic.addShape({

   879             type: Y.Ellipse,

   880             width: 20,

   881             height: 10,

   882             fill: {

   883                 color: "#9aa"

   884             },

   885             stroke: {

   886                 weight: 1,

   887                 color: "#000"

   888             }

   889         });

   890  *

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

   892  *  <ul>

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

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

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

   896  *  </ul>

   897  *

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

   899  *

   900  * @class Ellipse

   901  * @extends Shape

   902  * @constructor

   903  */

   904 /**

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

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

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

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

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

   910  *  <ul>

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

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

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

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

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

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

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

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

   919  *  </ul>

   920  *

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

   922 

   923         var myRect = myGraphic.addShape({

   924             type: "rect",

   925             width: 20,

   926             height: 10,

   927             fill: {

   928                 color: "#9aa"

   929             },

   930             stroke: {

   931                 weight: 1,

   932                 color: "#000"

   933             }

   934         });

   935 

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

   937  *

   938         var myRect = myGraphic.addShape({

   939             type: Y.Rect,

   940             width: 20,

   941             height: 10,

   942             fill: {

   943                 color: "#9aa"

   944             },

   945             stroke: {

   946                 weight: 1,

   947                 color: "#000"

   948             }

   949         });

   950  *

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

   952  *  <ul>

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

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

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

   956  *  </ul>

   957  *

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

   959  *

   960  * @class Rect

   961  * @extends Shape

   962  * @constructor

   963  */

   964 /**

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

   966  *  <ul>

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

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

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

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

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

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

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

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

   975  *  </ul>

   976  *

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

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

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

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

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

   982 

   983         var myPath = myGraphic.addShape({

   984             type: "path",

   985             fill: {

   986                 color: "#9aa"

   987             },

   988             stroke: {

   989                 weight: 1,

   990                 color: "#000"

   991             }

   992         });

   993 

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

   995  *

   996         var myPath = myGraphic.addShape({

   997             type: Y.Path,

   998             fill: {

   999                 color: "#9aa"

  1000             },

  1001             stroke: {

  1002                 weight: 1,

  1003                 color: "#000"

  1004             }

  1005         });

  1006 

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

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

  1009 

  1010         myPath.moveTo(35, 5);

  1011         myPath.lineTo(65, 65);

  1012         myPath.lineTo(5, 65);

  1013         myPath.lineTo(35, 5);

  1014         myPath.end();

  1015  *

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

  1017  *  <ul>

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

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

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

  1021  *  </ul>

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

  1023  *

  1024  * @class Path

  1025  * @extends Shape

  1026  * @uses Drawing

  1027  * @constructor

  1028  */

  1029 	/**

  1030 	 * Indicates the path used for the node.

  1031 	 *

  1032 	 * @config path

  1033 	 * @type String

  1034      * @readOnly

  1035 	 */

  1036 /**

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

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

  1039 

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

  1041 

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

  1043         var myGraphic = new Y.Graphic();

  1044         myGraphic.render("#mygraphiccontainer");

  1045 

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

  1047  *  <ul>

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

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

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

  1051  *  </ul>

  1052  *

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

  1054  *

  1055  * @class Graphic

  1056  * @constructor

  1057  */

  1058     /**

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

  1060      * instance or a CSS selector string.

  1061      *

  1062      * @config render

  1063      * @type Node | String

  1064      */

  1065     /**

  1066 	 * Unique id for class instance.

  1067 	 *

  1068 	 * @config id

  1069 	 * @type String

  1070 	 */

  1071     /**

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

  1073      *

  1074      *  @config shapes

  1075      *  @type Object

  1076      *  @readOnly

  1077      */

  1078     /**

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

  1080      *

  1081      *  @config contentBounds

  1082      *  @type Object

  1083      *  @readOnly

  1084      */

  1085     /**

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

  1087      *

  1088      *  @config node

  1089      *  @type HTMLElement

  1090      *  @readOnly

  1091      */

  1092 	/**

  1093 	 * Indicates the width of the `Graphic`.

  1094 	 *

  1095 	 * @config width

  1096 	 * @type Number

  1097 	 */

  1098 	/**

  1099 	 * Indicates the height of the `Graphic`.

  1100 	 *

  1101 	 * @config height

  1102 	 * @type Number

  1103 	 */

  1104     /**

  1105      *  Determines the sizing of the Graphic.

  1106      *

  1107      *  <dl>

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

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

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

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

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

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

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

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

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

  1117      *  </dl>

  1118      *

  1119      *

  1120      *  @config autoSize

  1121      *  @type Boolean | String

  1122      *  @default false

  1123      */

  1124     /**

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

  1126      *

  1127      *  <dl>

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

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

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

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

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

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

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

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

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