← Back to branch summary

~smagoun/whoopsie/whoopsie-lp1017637

« back to all changes in this revision

Viewing changes to backend/stats/static/js/yui/build/graphics/graphics.js

  • Committer: Evan Dandrea
  • Date: 2012-05-09 05:53:45 UTC
  • Revision ID: evan.dandrea@canonical.com-20120509055345-z2j41tmcbf4as5uf
The backend now lives in lp:daisy and the website (errors.ubuntu.com) now lives in lp:errors.

Show diffs side-by-side

added added

removed removed

Lines of Context:
backend/stats/static/js/yui/build/graphics/graphics.js
1
 
/*
2
 
YUI 3.5.0 (build 5089)
3
 
Copyright 2012 Yahoo! Inc. All rights reserved.
4
 
Licensed under the BSD License.
5
 
http://yuilibrary.com/license/
6
 
*/
7
 
YUI.add('graphics', function(Y) {
8
 
 
9
 
/**
10
 
 * 
11
 
 * <p>The `Graphics` module provides a JavaScript API for creating shapes in a variety of formats across 
12
 
 * a <a href="http://developer.yahoo.com/yui/articles/gbs">browser test baseline</a>. 
13
 
 * Based on device and browser capabilities, `Graphics` leverages <a href="http://www.w3.org/TR/SVG/">SVG</a>, 
14
 
 * <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> 
15
 
 * to render its graphical elements.</p>
16
 
 *
17
 
 * <p>The `Graphics` module features a <a href="../classes/Graphic.html">`Graphic`</a> class that allows you to easily create and manage shapes. 
18
 
 * Currently, a <a href="../classes/Graphic.html">`Graphic`</a> instance can be used to create predifined shapes and free-form polygons with fill 
19
 
 * and stroke properties.</p>  
20
 
 *
21
 
 * <p>The `Graphics` module normalizes an API through the use of alias and implementation classes that share
22
 
 * interfaces. Each alias class points to an appropriate implementation class dependent on the browser's 
23
 
 * capabilities. There should rarely, if ever, be a need to interact directly with an implementation class.</p>
24
 
 *
25
 
 * <p>Below is a list of available classes. 
26
 
 *     <ul>
27
 
 *         <li><a href="../classes/Graphic.html">`Graphic`</a>
28
 
 *         <li><a href="../classes/Shape.html">`Shape`</a>
29
 
 *         <li><a href="../classes/Circle.html">`Circle`</a>
30
 
 *         <li><a href="../classes/Ellipse.html">`Ellipse`</a>
31
 
 *         <li><a href="../classes/Rect.html">`Rect`</a>
32
 
 *         <li><a href="../classes/Path.html">`Path`</a>
33
 
 *     </ul>
34
 
 * You can also extend the `Shape` class to create your own custom shape classes.</p>
35
 
 * @module graphics
36
 
 * @main graphics
37
 
 */
38
 
var SETTER = "setter",
39
 
        PluginHost = Y.Plugin.Host,
40
 
    VALUE = "value",
41
 
    VALUEFN = "valueFn",
42
 
    READONLY = "readOnly",
43
 
    Y_LANG = Y.Lang,
44
 
    STR = "string",
45
 
    WRITE_ONCE = "writeOnce",
46
 
    GraphicBase,
47
 
    AttributeLite;
48
 
    
49
 
    /**
50
 
         * AttributeLite provides Attribute-like getters and setters for shape classes in the Graphics module. It provides a get/set API without the event infastructure.
51
 
     * This class is temporary and a work in progress.
52
 
         *
53
 
         * @class AttributeLite
54
 
         * @constructor
55
 
         */
56
 
    AttributeLite = function()
57
 
    {
58
 
        var host = this; // help compression
59
 
        
60
 
        // Perf tweak - avoid creating event literals if not required.
61
 
        host._ATTR_E_FACADE = {};
62
 
        
63
 
        Y.EventTarget.call(this, {emitFacade:true});
64
 
        host._state = {};
65
 
        host.prototype = Y.mix(AttributeLite.prototype, host.prototype);
66
 
    };
67
 
 
68
 
    AttributeLite.prototype = {
69
 
                /**
70
 
                 * Initializes the attributes for a shape. If an attribute config is passed into the constructor of the host, 
71
 
                 * the initial values will be overwritten.
72
 
                 *
73
 
                 * @method addAttrs
74
 
                 * @param {Object} cfg Optional object containing attributes key value pairs to be set.
75
 
                 */
76
 
                addAttrs: function(cfg)
77
 
                {
78
 
                        var host = this,
79
 
                                attrConfig = this.constructor.ATTRS, 
80
 
                                attr,
81
 
                                i,
82
 
                                fn,
83
 
                                state = host._state;
84
 
                        for(i in attrConfig)
85
 
                        {
86
 
                                if(attrConfig.hasOwnProperty(i))
87
 
                                {
88
 
                                        attr = attrConfig[i];
89
 
                                        if(attr.hasOwnProperty(VALUE))
90
 
                                        {
91
 
                                                state[i] = attr.value;
92
 
                                        }
93
 
                                        else if(attr.hasOwnProperty(VALUEFN))
94
 
                                        {
95
 
                                                fn = attr.valueFn;
96
 
                                                if(Y_LANG.isString(fn))
97
 
                                                {
98
 
                                                        state[i] = host[fn].apply(host);
99
 
                                                }
100
 
                                                else
101
 
                                                {
102
 
                                                        state[i] = fn.apply(host);
103
 
                                                }
104
 
                                        }
105
 
                            }
106
 
            }
107
 
                        host._state = state;
108
 
            for(i in attrConfig)
109
 
                        {
110
 
                                if(attrConfig.hasOwnProperty(i))
111
 
                                {
112
 
                                        attr = attrConfig[i];
113
 
                    if(attr.hasOwnProperty(READONLY) && attr.readOnly)
114
 
                                        {
115
 
                                                continue;
116
 
                                        }
117
 
 
118
 
                                        if(attr.hasOwnProperty(WRITE_ONCE) && attr.writeOnce)
119
 
                                        {
120
 
                                                attr.readOnly = true;
121
 
                                        }
122
 
 
123
 
                                        if(cfg && cfg.hasOwnProperty(i))
124
 
                                        {
125
 
                                                if(attr.hasOwnProperty(SETTER))
126
 
                                                {
127
 
                                                        host._state[i] = attr.setter.apply(host, [cfg[i]]);
128
 
                                                }
129
 
                                                else
130
 
                                                {
131
 
                                                        host._state[i] = cfg[i];
132
 
                                                }
133
 
                                        }
134
 
                                }
135
 
                        }
136
 
                },
137
 
 
138
 
        /**
139
 
         * For a given item, returns the value of the property requested, or undefined if not found.
140
 
         *
141
 
         * @method get
142
 
         * @param name {String} The name of the item
143
 
         * @return {Any} The value of the supplied property.
144
 
         */
145
 
        get: function(attr)
146
 
        {
147
 
            var host = this,
148
 
                getter,
149
 
                attrConfig = host.constructor.ATTRS;
150
 
            if(attrConfig && attrConfig[attr])
151
 
            {
152
 
                getter = attrConfig[attr].getter;
153
 
                if(getter)
154
 
                {
155
 
                    if(typeof getter == STR)
156
 
                    {
157
 
                        return host[getter].apply(host);
158
 
                    }
159
 
                    return attrConfig[attr].getter.apply(host);
160
 
                }
161
 
 
162
 
                return host._state[attr];
163
 
            }
164
 
            return null;
165
 
        },
166
 
    
167
 
        /**
168
 
         * Sets the value of an attribute.
169
 
         *
170
 
         * @method set
171
 
         * @param {String|Object} name The name of the attribute. Alternatively, an object of key value pairs can 
172
 
         * be passed in to set multiple attributes at once.
173
 
         * @param {Any} value The value to set the attribute to. This value is ignored if an object is received as 
174
 
         * the name param.
175
 
         */
176
 
        set: function(attr, val)
177
 
        {
178
 
            var i;
179
 
            if(Y_LANG.isObject(attr))
180
 
            {
181
 
                for(i in attr)
182
 
                {
183
 
                    if(attr.hasOwnProperty(i))
184
 
                    {
185
 
                        this._set(i, attr[i]);
186
 
                    }
187
 
                }
188
 
            }
189
 
            else
190
 
            {
191
 
                this._set.apply(this, arguments);
192
 
            }
193
 
        },
194
 
 
195
 
                /**
196
 
         * Provides setter logic. Used by `set`.
197
 
         *
198
 
         * @method _set
199
 
         * @param {String|Object} name The name of the attribute. Alternatively, an object of key value pairs can 
200
 
         * be passed in to set multiple attributes at once.
201
 
         * @param {Any} value The value to set the attribute to. This value is ignored if an object is received as 
202
 
         * the name param.
203
 
                 * @protected
204
 
                 */
205
 
                _set: function(attr, val)
206
 
                {
207
 
                        var host = this,
208
 
                                setter,
209
 
                                args,
210
 
                                attrConfig = host.constructor.ATTRS;
211
 
                        if(attrConfig && attrConfig.hasOwnProperty(attr))
212
 
                        {
213
 
                                setter = attrConfig[attr].setter;
214
 
                                if(setter)
215
 
                                {
216
 
                                        args = [val];
217
 
                                        if(typeof setter == STR)
218
 
                                        {
219
 
                                                val = host[setter].apply(host, args);
220
 
                                        }
221
 
                                        else
222
 
                    {
223
 
                                            val = attrConfig[attr].setter.apply(host, args);
224
 
                    }
225
 
                                }
226
 
                                host._state[attr] = val;
227
 
                        }
228
 
                }
229
 
        };
230
 
    Y.mix(AttributeLite, Y.EventTarget, false, null, 1);
231
 
        Y.AttributeLite = AttributeLite;
232
 
 
233
 
    /**
234
 
     * GraphicBase serves as the base class for the graphic layer. It serves the same purpose as
235
 
     * Base but uses a lightweight getter/setter class instead of Attribute.
236
 
     * This class is temporary and a work in progress.
237
 
     *
238
 
     * @class GraphicBase
239
 
     * @constructor
240
 
     * @param {Object} cfg Key value pairs for attributes
241
 
     */
242
 
    GraphicBase = function(cfg)
243
 
    {
244
 
        var host = this,
245
 
            PluginHost = Y.Plugin && Y.Plugin.Host;  
246
 
        if (host._initPlugins && PluginHost) {
247
 
            PluginHost.call(host);
248
 
        }
249
 
        
250
 
        host.name = host.constructor.NAME;
251
 
        host._eventPrefix = host.constructor.EVENT_PREFIX || host.constructor.NAME;
252
 
        AttributeLite.call(host);
253
 
        host.addAttrs(cfg);
254
 
        host.init.apply(this, arguments);
255
 
        if (host._initPlugins) {
256
 
            // Need to initPlugins manually, to handle constructor parsing, static Plug parsing
257
 
            host._initPlugins(cfg);
258
 
        }
259
 
        host.initialized = true;
260
 
    };
261
 
 
262
 
    GraphicBase.NAME = "baseGraphic";
263
 
 
264
 
    GraphicBase.prototype = {
265
 
        /**
266
 
         * Init method, invoked during construction.
267
 
         * Fires an init event after calling `initializer` on implementers.
268
 
         *
269
 
         * @method init
270
 
         * @protected 
271
 
         */
272
 
        init: function()
273
 
        {
274
 
            this.publish("init", {
275
 
                fireOnce:true
276
 
            });
277
 
            this.initializer.apply(this, arguments);
278
 
            this.fire("init", {cfg: arguments[0]});
279
 
        }
280
 
    };
281
 
//Straightup augment, no wrapper functions
282
 
Y.mix(GraphicBase, Y.AttributeLite, false, null, 1);
283
 
Y.mix(GraphicBase, PluginHost, false, null, 1);
284
 
GraphicBase.prototype.constructor = GraphicBase;
285
 
GraphicBase.plug = PluginHost.plug;
286
 
GraphicBase.unplug = PluginHost.unplug;
287
 
Y.GraphicBase = GraphicBase;
288
 
 
289
 
 
290
 
/**
291
 
 * `Drawing` provides a set of drawing methods used by `Path` and custom shape classes. 
292
 
 * `Drawing` has the following implementations based on browser capability.
293
 
 *  <ul>
294
 
 *      <li><a href="SVGDrawing.html">`SVGDrawing`</a></li>
295
 
 *      <li><a href="VMLDrawing.html">`VMLDrawing`</a></li>
296
 
 *      <li><a href="CanvasDrawing.html">`CanvasDrawing`</a></li>
297
 
 *  </ul>
298
 
 *
299
 
 * @class Drawing
300
 
 * @constructor
301
 
 */
302
 
    /**
303
 
     * Draws a line segment using the current line style from the current drawing position to the specified x and y coordinates.
304
 
     * 
305
 
     * @method lineTo
306
 
     * @param {Number} point1 x-coordinate for the end point.
307
 
     * @param {Number} point2 y-coordinate for the end point.
308
 
     */
309
 
    /**
310
 
     * Moves the current drawing position to specified x and y coordinates.
311
 
     *
312
 
     * @method moveTo
313
 
     * @param {Number} x x-coordinate for the end point.
314
 
     * @param {Number} y y-coordinate for the end point.
315
 
     */
316
 
    /**
317
 
     * Draws a bezier curve.
318
 
     *
319
 
     * @method curveTo
320
 
     * @param {Number} cp1x x-coordinate for the first control point.
321
 
     * @param {Number} cp1y y-coordinate for the first control point.
322
 
     * @param {Number} cp2x x-coordinate for the second control point.
323
 
     * @param {Number} cp2y y-coordinate for the second control point.
324
 
     * @param {Number} x x-coordinate for the end point.
325
 
     * @param {Number} y y-coordinate for the end point.
326
 
     */
327
 
    /**
328
 
     * Draws a quadratic bezier curve.
329
 
     *
330
 
     * @method quadraticCurveTo
331
 
     * @param {Number} cpx x-coordinate for the control point.
332
 
     * @param {Number} cpy y-coordinate for the control point.
333
 
     * @param {Number} x x-coordinate for the end point.
334
 
     * @param {Number} y y-coordinate for the end point.
335
 
     */
336
 
    /**
337
 
     * Draws a rectangle.
338
 
     *
339
 
     * @method drawRect
340
 
     * @param {Number} x x-coordinate
341
 
     * @param {Number} y y-coordinate
342
 
     * @param {Number} w width
343
 
     * @param {Number} h height
344
 
     */
345
 
    /**
346
 
     * Draws a rectangle with rounded corners.
347
 
     * 
348
 
     * @method drawRoundRect
349
 
     * @param {Number} x x-coordinate
350
 
     * @param {Number} y y-coordinate
351
 
     * @param {Number} w width
352
 
     * @param {Number} h height
353
 
     * @param {Number} ew width of the ellipse used to draw the rounded corners
354
 
     * @param {Number} eh height of the ellipse used to draw the rounded corners
355
 
     */
356
 
    /**
357
 
     * Completes a drawing operation. 
358
 
     *
359
 
     * @method end
360
 
     */
361
 
    /**
362
 
     * Clears the path.
363
 
     *
364
 
     * @method clear
365
 
     */
366
 
/**
367
 
 *  <p>Base class for creating shapes.</p>
368
 
 *  <p>`Shape` is an abstract class and is not meant to be used directly. The following classes extend
369
 
 *  `Shape`.
370
 
 *
371
 
 *  <ul>
372
 
 *      <li><a href="Circle.html">`Circle`</a></li>
373
 
 *      <li><a href="Ellipse.html">`Ellipse`</a></li>
374
 
 *      <li><a href="Rect.html">`Rect`</a></li>
375
 
 *      <li><a href="Path.html">`Path`</a></li>
376
 
 *  </ul>
377
 
 *
378
 
 * `Shape` can also be extended to create custom shape classes.</p>
379
 
 *
380
 
 * `Shape` has the following implementations based on browser capability.
381
 
 *  <ul>
382
 
 *      <li><a href="SVGShape.html">`SVGShape`</a></li>
383
 
 *      <li><a href="VMLShape.html">`VMLShape`</a></li>
384
 
 *      <li><a href="CanvasShape.html">`CanvasShape`</a></li>
385
 
 *  </ul>
386
 
 *
387
 
 * It is not necessary to interact with these classes directly. `Shape` will point to the appropriate implemention.</p>
388
 
 *
389
 
 * @class Shape
390
 
 * @constructor
391
 
 * @param {Object} cfg (optional) Attribute configs
392
 
 */
393
 
    /**
394
 
     * Init method, invoked during construction.
395
 
     * Calls `initializer` method.
396
 
     *
397
 
     * @method init
398
 
     * @protected
399
 
     */
400
 
        /**
401
 
         * Initializes the shape
402
 
         *
403
 
         * @private
404
 
         * @method initializer
405
 
         */
406
 
        /**
407
 
         * Add a class name to each node.
408
 
         *
409
 
         * @method addClass
410
 
         * @param {String} className the class name to add to the node's class attribute 
411
 
         */
412
 
        /**
413
 
         * Removes a class name from each node.
414
 
         *
415
 
         * @method removeClass
416
 
         * @param {String} className the class name to remove from the node's class attribute
417
 
         */
418
 
        /**
419
 
         * Gets the current position of the node in page coordinates.
420
 
         *
421
 
         * @method getXY
422
 
         * @return Array The XY position of the shape.
423
 
         */
424
 
        /**
425
 
         * Set the position of the shape in page coordinates, regardless of how the node is positioned.
426
 
         *
427
 
         * @method setXY
428
 
         * @param {Array} Contains x & y values for new position (coordinates are page-based)
429
 
         */
430
 
        /**
431
 
         * Determines whether the node is an ancestor of another HTML element in the DOM hierarchy. 
432
 
         *
433
 
         * @method contains
434
 
         * @param {Shape | HTMLElement} needle The possible node or descendent
435
 
         * @return Boolean Whether or not this shape is the needle or its ancestor.
436
 
         */
437
 
        /**
438
 
         * Compares nodes to determine if they match.
439
 
         * Node instances can be compared to each other and/or HTMLElements.
440
 
         * @method compareTo
441
 
         * @param {HTMLElement | Node} refNode The reference node to compare to the node.
442
 
         * @return {Boolean} True if the nodes match, false if they do not.
443
 
         */
444
 
        /**
445
 
         * Test if the supplied node matches the supplied selector.
446
 
         *
447
 
         * @method test
448
 
         * @param {String} selector The CSS selector to test against.
449
 
         * @return Boolean Wheter or not the shape matches the selector.
450
 
         */
451
 
    /**
452
 
     * Sets the value of an attribute.
453
 
     *
454
 
     * @method set
455
 
     * @param {String|Object} name The name of the attribute. Alternatively, an object of key value pairs can 
456
 
     * be passed in to set multiple attributes at once.
457
 
     * @param {Any} value The value to set the attribute to. This value is ignored if an object is received as 
458
 
     * the name param.
459
 
     */
460
 
        /**
461
 
         * Specifies a 2d translation.
462
 
         *
463
 
         * @method translate
464
 
         * @param {Number} x The value to transate on the x-axis.
465
 
         * @param {Number} y The value to translate on the y-axis.
466
 
         */
467
 
        /**
468
 
         * Translates the shape along the x-axis. When translating x and y coordinates,
469
 
         * use the `translate` method.
470
 
         *
471
 
         * @method translateX
472
 
         * @param {Number} x The value to translate.
473
 
         */
474
 
        /**
475
 
         * Translates the shape along the y-axis. When translating x and y coordinates,
476
 
         * use the `translate` method.
477
 
         *
478
 
         * @method translateY
479
 
         * @param {Number} y The value to translate.
480
 
         */
481
 
    /**
482
 
     * Skews the shape around the x-axis and y-axis.
483
 
     *
484
 
     * @method skew
485
 
     * @param {Number} x The value to skew on the x-axis.
486
 
     * @param {Number} y The value to skew on the y-axis.
487
 
     */
488
 
        /**
489
 
         * Skews the shape around the x-axis.
490
 
         *
491
 
         * @method skewX
492
 
         * @param {Number} x x-coordinate
493
 
         */
494
 
        /**
495
 
         * Skews the shape around the y-axis.
496
 
         *
497
 
         * @method skewY
498
 
         * @param {Number} y y-coordinate
499
 
         */
500
 
        /**
501
 
         * Rotates the shape clockwise around it transformOrigin.
502
 
         *
503
 
         * @method rotate
504
 
         * @param {Number} deg The degree of the rotation.
505
 
         */
506
 
        /**
507
 
         * Specifies a 2d scaling operation.
508
 
         *
509
 
         * @method scale
510
 
         * @param {Number} val
511
 
         */
512
 
        /**
513
 
         * Returns the bounds for a shape.
514
 
         *
515
 
     * Calculates the a new bounding box from the original corner coordinates (base on size and position) and the transform matrix.
516
 
     * The calculated bounding box is used by the graphic instance to calculate its viewBox. 
517
 
     *
518
 
         * @method getBounds
519
 
         * @return Object
520
 
         */
521
 
    /**
522
 
     * Destroys the instance.
523
 
     *
524
 
     * @method destroy
525
 
     */
526
 
        /**
527
 
         * 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 
528
 
         * fraction of the shape's corresponding bounding box dimension. The default value is [0.5, 0.5].
529
 
         *
530
 
         * @config transformOrigin
531
 
         * @type Array
532
 
         */
533
 
    /**
534
 
     * <p>A string containing, in order, transform operations applied to the shape instance. The `transform` string can contain the following values:
535
 
     *     
536
 
     *    <dl>
537
 
     *        <dt>rotate</dt><dd>Rotates the shape clockwise around it transformOrigin.</dd>
538
 
     *        <dt>translate</dt><dd>Specifies a 2d translation.</dd>
539
 
     *        <dt>skew</dt><dd>Skews the shape around the x-axis and y-axis.</dd>
540
 
     *        <dt>scale</dt><dd>Specifies a 2d scaling operation.</dd>
541
 
     *        <dt>translateX</dt><dd>Translates the shape along the x-axis.</dd>
542
 
     *        <dt>translateY</dt><dd>Translates the shape along the y-axis.</dd>
543
 
     *        <dt>skewX</dt><dd>Skews the shape around the x-axis.</dd>
544
 
     *        <dt>skewY</dt><dd>Skews the shape around the y-axis.</dd>
545
 
     *    </dl>
546
 
     * </p>
547
 
     * <p>Applying transforms through the transform attribute will reset the transform matrix and apply a new transform. The shape class also contains corresponding methods for each transform
548
 
     * that will apply the transform to the current matrix. The below code illustrates how you might use the `transform` attribute to instantiate a recangle with a rotation of 45 degrees.</p>
549
 
            var myRect = new Y.Rect({
550
 
                type:"rect",
551
 
                width: 50,
552
 
                height: 40,
553
 
                transform: "rotate(45)"
554
 
            };
555
 
     * <p>The code below would apply `translate` and `rotate` to an existing shape.</p>
556
 
    
557
 
        myRect.set("transform", "translate(40, 50) rotate(45)");
558
 
         * @config transform
559
 
     * @type String  
560
 
         */
561
 
        /**
562
 
         * Unique id for class instance.
563
 
         *
564
 
         * @config id
565
 
         * @type String
566
 
         */
567
 
        /**
568
 
         * Indicates the x position of shape.
569
 
         *
570
 
         * @config x
571
 
         * @type Number
572
 
         */
573
 
        /**
574
 
         * Indicates the y position of shape.
575
 
         *
576
 
         * @config y
577
 
         * @type Number
578
 
         */
579
 
        /**
580
 
         * Indicates the width of the shape
581
 
         *
582
 
         * @config width
583
 
         * @type Number
584
 
         */
585
 
        /**
586
 
         * Indicates the height of the shape
587
 
         * 
588
 
         * @config height
589
 
         * @type Number
590
 
         */
591
 
        /**
592
 
         * Indicates whether the shape is visible.
593
 
         *
594
 
         * @config visible
595
 
         * @type Boolean
596
 
         */
597
 
        /**
598
 
         * Contains information about the fill of the shape. 
599
 
     *  <dl>
600
 
     *      <dt>color</dt><dd>The color of the fill.</dd>
601
 
     *      <dt>opacity</dt><dd>Number between 0 and 1 that indicates the opacity of the fill. The default value is 1.</dd>
602
 
     *      <dt>type</dt><dd>Type of fill.
603
 
     *          <dl>
604
 
     *              <dt>solid</dt><dd>Solid single color fill. (default)</dd>
605
 
     *              <dt>linear</dt><dd>Linear gradient fill.</dd>
606
 
     *              <dt>radial</dt><dd>Radial gradient fill.</dd>
607
 
     *          </dl>
608
 
     *      </dd>
609
 
     *  </dl>
610
 
     *  <p>If a `linear` or `radial` is specified as the fill type. The following additional property is used:
611
 
     *  <dl>
612
 
     *      <dt>stops</dt><dd>An array of objects containing the following properties:
613
 
     *          <dl>
614
 
     *              <dt>color</dt><dd>The color of the stop.</dd>
615
 
     *              <dt>opacity</dt><dd>Number between 0 and 1 that indicates the opacity of the stop. The default value is 1. Note: No effect for IE 6 - 8</dd>
616
 
     *              <dt>offset</dt><dd>Number between 0 and 1 indicating where the color stop is positioned.</dd> 
617
 
     *          </dl>
618
 
     *      </dd>
619
 
     *      <p>Linear gradients also have the following property:</p>
620
 
     *      <dt>rotation</dt><dd>Linear gradients flow left to right by default. The rotation property allows you to change the flow by rotation. (e.g. A rotation of 180 would make the gradient pain from right to left.)</dd>
621
 
     *      <p>Radial gradients have the following additional properties:</p>
622
 
     *      <dt>r</dt><dd>Radius of the gradient circle.</dd>
623
 
     *      <dt>fx</dt><dd>Focal point x-coordinate of the gradient.</dd>
624
 
     *      <dt>fy</dt><dd>Focal point y-coordinate of the gradient.</dd>
625
 
     *      <dt>cx</dt><dd>
626
 
     *          <p>The x-coordinate of the center of the gradient circle. Determines where the color stop begins. The default value 0.5.</p>
627
 
     *          <p><strong>Note: </strong>Currently, this property is not implemented for corresponding `CanvasShape` and `VMLShape` classes which are used on Android or IE 6 - 8.</p>
628
 
     *      </dd>
629
 
     *      <dt>cy</dt><dd>
630
 
     *          <p>The y-coordinate of the center of the gradient circle. Determines where the color stop begins. The default value 0.5.</p>
631
 
     *          <p><strong>Note: </strong>Currently, this property is not implemented for corresponding `CanvasShape` and `VMLShape` classes which are used on Android or IE 6 - 8.</p>
632
 
     *      </dd>
633
 
     *  </dl>
634
 
         *
635
 
         * @config fill
636
 
         * @type Object 
637
 
         */
638
 
        /**
639
 
         * Contains information about the stroke of the shape.
640
 
     *  <dl>
641
 
     *      <dt>color</dt><dd>The color of the stroke.</dd>
642
 
     *      <dt>weight</dt><dd>Number that indicates the width of the stroke.</dd>
643
 
     *      <dt>opacity</dt><dd>Number between 0 and 1 that indicates the opacity of the stroke. The default value is 1.</dd>
644
 
     *      <dt>dashstyle</dt>Indicates whether to draw a dashed stroke. When set to "none", a solid stroke is drawn. When set to an array, the first index indicates the
645
 
     *  length of the dash. The second index indicates the length of gap.
646
 
     *      <dt>linecap</dt><dd>Specifies the linecap for the stroke. The following values can be specified:
647
 
     *          <dl>
648
 
     *              <dt>butt (default)</dt><dd>Specifies a butt linecap.</dd>
649
 
     *              <dt>square</dt><dd>Specifies a sqare linecap.</dd>
650
 
     *              <dt>round</dt><dd>Specifies a round linecap.</dd>
651
 
     *          </dl>
652
 
     *      </dd>
653
 
     *      <dt>linejoin</dt><dd>Specifies a linejoin for the stroke. The following values can be specified:
654
 
     *          <dl>
655
 
     *              <dt>round (default)</dt><dd>Specifies that the linejoin will be round.</dd>
656
 
     *              <dt>bevel</dt><dd>Specifies a bevel for the linejoin.</dd>
657
 
     *              <dt>miter limit</dt><dd>An integer specifying the miter limit of a miter linejoin. If you want to specify a linejoin of miter, you simply specify the limit as opposed to having
658
 
     *  separate miter and miter limit values.</dd>
659
 
     *          </dl>
660
 
     *      </dd>
661
 
     *  </dl>
662
 
         *
663
 
         * @config stroke
664
 
         * @type Object
665
 
         */
666
 
        /**
667
 
         * Dom node for the shape.
668
 
         *
669
 
         * @config node
670
 
         * @type HTMLElement
671
 
         * @readOnly
672
 
         */
673
 
        /**
674
 
         * Reference to the parent graphic instance
675
 
         *
676
 
         * @config graphic
677
 
         * @type Graphic
678
 
         * @readOnly
679
 
         */
680
 
 
681
 
/**
682
 
 * <p>Creates circle shape with editable attributes.</p> 
683
 
 * <p>`Circle` instances can be created using the <a href="Graphic.html#method_addShape">`addShape`</a> method of the <a href="Graphic.html">`Graphic`</a> class. 
684
 
 * The method's `cfg` argument contains a `type` attribute. Assigning "circle" or `Y.Circle` to this attribute will create a `Circle` instance. Required attributes
685
 
 * for instantiating a `Circle` are `type` and `radius`. Optional attributes include:
686
 
 *  <ul>
687
 
 *      <li><a href="#attr_fill">fill</a></li>
688
 
 *      <li><a href="#attr_id">id</a></li>
689
 
 *      <li><a href="#attr_stroke">stroke</a></li>
690
 
 *      <li><a href="#attr_transform">transform</a></li>
691
 
 *      <li><a href="#attr_transformOrigin">transformOrigin</a></li>
692
 
 *      <li><a href="#attr_visible">visible</a></li>
693
 
 *      <li><a href="#attr_x">x</a></li>
694
 
 *      <li><a href="#attr_y">y</a></li>
695
 
 *  </ul>
696
 
 * 
697
 
 * The below code creates a circle by defining the `type` attribute as "circle":</p>
698
 
 
699
 
        var myCircle = myGraphic.addShape({
700
 
            type: "circle",
701
 
            radius: 10,
702
 
            fill: {
703
 
                color: "#9aa"
704
 
            },
705
 
            stroke: {
706
 
                weight: 1,
707
 
                color: "#000"
708
 
            }
709
 
        });
710
 
 
711
 
 * Below, this same circle is created by defining the `type` attribute with a class reference:
712
 
 *
713
 
        var myCircle = myGraphic.addShape({
714
 
            type: Y.Circle,
715
 
            radius: 10,
716
 
            fill: {
717
 
                color: "#9aa"
718
 
            },
719
 
            stroke: {
720
 
                weight: 1,
721
 
                color: "#000"
722
 
            }
723
 
        });
724
 
 * 
725
 
 * <p>`Circle` has the following implementations based on browser capability.
726
 
 *  <ul>
727
 
 *      <li><a href="SVGCircle.html">`SVGCircle`</a></li>
728
 
 *      <li><a href="VMLCircle.html">`VMLCircle`</a></li>
729
 
 *      <li><a href="CanvasCircle.html">`CanvasCircle`</a></li>
730
 
 *  </ul>
731
 
 *
732
 
 * It is not necessary to interact with these classes directly. `Circle` will point to the appropriate implemention.</p>
733
 
 *
734
 
 * @class Circle
735
 
 * @extends Shape
736
 
 * @constructor
737
 
 */
738
 
    /**
739
 
     * Radius of the circle
740
 
     *
741
 
     * @config radius
742
 
     * @type Number
743
 
     */
744
 
/**
745
 
 * <p>Creates an ellipse shape with editable attributes.</p>
746
 
 * <p>`Ellipse` instances can be created using the <a href="Graphic.html#method_addShape">`addShape`</a> method of the <a href="Graphic.html">`Graphic`</a> class. 
747
 
 * The method's `cfg` argument contains a `type` attribute. Assigning "ellipse" or `Y.Ellipse` to this attribute will create a `Ellipse` instance. Required attributes
748
 
 * for instantiating a `Ellipse` are `type`, `width` and `height`. Optional attributes include:
749
 
 *  <ul>
750
 
 *      <li><a href="#attr_fill">fill</a></li>
751
 
 *      <li><a href="#attr_id">id</a></li>
752
 
 *      <li><a href="#attr_stroke">stroke</a></li>
753
 
 *      <li><a href="#attr_transform">transform</a></li>
754
 
 *      <li><a href="#attr_transformOrigin">transformOrigin</a></li>
755
 
 *      <li><a href="#attr_visible">visible</a></li>
756
 
 *      <li><a href="#attr_x">x</a></li>
757
 
 *      <li><a href="#attr_y">y</a></li>
758
 
 *  </ul>
759
 
 * 
760
 
 * The below code creates an ellipse by defining the `type` attribute as "ellipse":</p>
761
 
 
762
 
        var myEllipse = myGraphic.addShape({
763
 
            type: "ellipse",
764
 
            width: 20,
765
 
            height: 10,
766
 
            fill: {
767
 
                color: "#9aa"
768
 
            },
769
 
            stroke: {
770
 
                weight: 1,
771
 
                color: "#000"
772
 
            }
773
 
        });
774
 
 
775
 
 * Below, the same ellipse is created by defining the `type` attribute with a class reference:
776
 
 *
777
 
        var myEllipse = myGraphic.addShape({
778
 
            type: Y.Ellipse,
779
 
            width: 20,
780
 
            height: 10,
781
 
            fill: {
782
 
                color: "#9aa"
783
 
            },
784
 
            stroke: {
785
 
                weight: 1,
786
 
                color: "#000"
787
 
            }
788
 
        });
789
 
 * 
790
 
 * <p>`Ellipse` has the following implementations based on browser capability.
791
 
 *  <ul>
792
 
 *      <li><a href="SVGEllipse.html">`SVGEllipse`</a></li>
793
 
 *      <li><a href="VMLEllipse.html">`VMLEllipse`</a></li>
794
 
 *      <li><a href="CanvasEllipse.html">`CanvasEllipse`</a></li>
795
 
 *  </ul>
796
 
 *
797
 
 * It is not necessary to interact with these classes directly. `Ellipse` will point to the appropriate implemention.</p>
798
 
 *
799
 
 * @class Ellipse
800
 
 * @extends Shape
801
 
 * @constructor
802
 
 */
803
 
/**
804
 
 * <p>Creates an rectangle shape with editable attributes.</p>
805
 
 * <p>`Rect` instances can be created using the <a href="Graphic.html#method_addShape">`addShape`</a> method of the <a href="Graphic.html">`Graphic`</a> 
806
 
 * class. The method's `cfg` argument contains a `type` attribute. Assigning "rect" or `Y.Rect` to this attribute will create a `Rect` instance. 
807
 
 * Required attributes for instantiating a `Rect` are `type`, `width` and `height`. Optional attributes include:
808
 
 *  <ul>
809
 
 *      <li><a href="#attr_fill">fill</a></li>
810
 
 *      <li><a href="#attr_id">id</a></li>
811
 
 *      <li><a href="#attr_stroke">stroke</a></li>
812
 
 *      <li><a href="#attr_transform">transform</a></li>
813
 
 *      <li><a href="#attr_transformOrigin">transformOrigin</a></li>
814
 
 *      <li><a href="#attr_visible">visible</a></li>
815
 
 *      <li><a href="#attr_x">x</a></li>
816
 
 *      <li><a href="#attr_y">y</a></li>
817
 
 *  </ul>
818
 
 *
819
 
 * The below code creates a rectangle by defining the `type` attribute as "rect":</p>
820
 
 
821
 
        var myRect = myGraphic.addShape({
822
 
            type: "rect",
823
 
            width: 20,
824
 
            height: 10,
825
 
            fill: {
826
 
                color: "#9aa"
827
 
            },
828
 
            stroke: {
829
 
                weight: 1,
830
 
                color: "#000"
831
 
            }
832
 
        });
833
 
 
834
 
 * Below, the same rectangle is created by defining the `type` attribute with a class reference:
835
 
 *
836
 
        var myRect = myGraphic.addShape({
837
 
            type: Y.Rect,
838
 
            width: 20,
839
 
            height: 10,
840
 
            fill: {
841
 
                color: "#9aa"
842
 
            },
843
 
            stroke: {
844
 
                weight: 1,
845
 
                color: "#000"
846
 
            }
847
 
        });
848
 
 *
849
 
 * <p>`Rect` has the following implementations based on browser capability.
850
 
 *  <ul>
851
 
 *      <li><a href="SVGRect.html">`SVGRect`</a></li>
852
 
 *      <li><a href="VMLRect.html">`VMLRect`</a></li>
853
 
 *      <li><a href="CanvasRect.html">`CanvasRect`</a></li>
854
 
 *  </ul>
855
 
 *
856
 
 * It is not necessary to interact with these classes directly. `Rect` will point to the appropriate implemention.</p>
857
 
 *
858
 
 * @class Rect
859
 
 * @extends Shape
860
 
 * @constructor
861
 
 */
862
 
/**
863
 
 * <p>The `Path` class creates a shape through the use of drawing methods. The `Path` class has the following drawing methods available:</p>
864
 
 *  <ul>
865
 
 *      <li><a href="#method_clear">`clear`</a></li>
866
 
 *      <li><a href="#method_curveTo">`curveTo`</a></li>
867
 
 *      <li><a href="#method_drawRect">`drawRect`</a></li>
868
 
 *      <li><a href="#method_drawRoundRect">`drawRoundRect`</a></li>
869
 
 *      <li><a href="#method_end">`end`</a></li>
870
 
 *      <li><a href="#method_lineTo">`lineTo`</a></li>
871
 
 *      <li><a href="#method_moveTo">`moveTo`</a></li>
872
 
 *      <li><a href="#method_quadraticCurveTo">`quadraticCurveTo`</a></li>
873
 
 *  </ul>
874
 
 *
875
 
 *  <p>Like other shapes, `Path` elements are created using the <a href="Graphic.html#method_addShape">`addShape`</a> method of the <a href="Graphic.html">`Graphic`</a> 
876
 
 *  class. The method's `cfg` argument contains a `type` attribute. Assigning "path" or `Y.Path` to this attribute will create a `Path` instance.
877
 
 *  After instantiation, a series of drawing operations must be performed in order to render a shape. The below code instantiates a path element by defining the `type` 
878
 
 *  attribute as "path":</p>
879
 
 
880
 
        var myPath = myGraphic.addShape({
881
 
            type: "path",
882
 
            fill: {
883
 
                color: "#9aa"
884
 
            },
885
 
            stroke: {
886
 
                weight: 1,
887
 
                color: "#000"
888
 
            }
889
 
        });
890
 
 
891
 
 * Below a `Path` element with the same properties is instantiated by defining the `type` attribute with a class reference:
892
 
 *
893
 
        var myPath = myGraphic.addShape({
894
 
            type: Y.Path,
895
 
            fill: {
896
 
                color: "#9aa"
897
 
            },
898
 
            stroke: {
899
 
                weight: 1,
900
 
                color: "#000"
901
 
            }
902
 
        });
903
 
 
904
 
 * After instantiation, a shape or segment needs to be drawn for an element to render. After all draw operations are performed, the <a href="#method_end">`end`</a>
905
 
 * method will render the shape. The code below will draw a triangle:
906
 
 
907
 
        myPath.moveTo(35, 5);
908
 
        myPath.lineTo(65, 65);
909
 
        myPath.lineTo(5, 65);
910
 
        myPath.lineTo(35, 5);
911
 
        myPath.end();
912
 
 *
913
 
 * <p>`Path` has the following implementations based on browser capability.
914
 
 *  <ul>
915
 
 *      <li><a href="SVGPath.html">`SVGPath`</a></li>
916
 
 *      <li><a href="VMLPath.html">`VMLPath`</a></li>
917
 
 *      <li><a href="CanvasPath.html">`CanvasPath`</a></li>
918
 
 *  </ul> 
919
 
 * It is not necessary to interact with these classes directly. `Path` will point to the appropriate implemention.</p>
920
 
 *
921
 
 * @class Path
922
 
 * @extends Shape
923
 
 * @uses Drawing
924
 
 * @constructor
925
 
 */
926
 
        /**
927
 
         * Indicates the path used for the node.
928
 
         *
929
 
         * @config path
930
 
         * @type String
931
 
     * @readOnly
932
 
         */
933
 
/**
934
 
 * `Graphic` acts a factory and container for shapes. You need at least one `Graphic` instance to create shapes for your application. 
935
 
 * <p>The code block below creates a `Graphic` instance and appends it to an HTMLElement with the id 'mygraphiccontainer'.</p>
936
 
    
937
 
        var myGraphic = new Y.Graphic({render:"#mygraphiccontainer"});
938
 
 
939
 
 * <p>Alternatively, you can add a `Graphic` instance to the DOM using the <a href="#method_render">`render`</a> method.</p>
940
 
        var myGraphic = new Y.Graphic();
941
 
        myGraphic.render("#mygraphiccontainer");
942
 
 
943
 
 * `Graphic` has the following implementations based on browser capability.
944
 
 *  <ul>
945
 
 *      <li><a href="SVGGraphic.html">`SVGGraphic`</a></li>
946
 
 *      <li><a href="VMLGraphic.html">`VMLGraphic`</a></li>
947
 
 *      <li><a href="CanvasGraphic.html">`CanvasGraphic`</a></li>
948
 
 *  </ul>
949
 
 *
950
 
 * It is not necessary to interact with these classes directly. `Graphic` will point to the appropriate implemention.</p>
951
 
 *
952
 
 * @class Graphic
953
 
 * @constructor
954
 
 */
955
 
    /**
956
 
     * Whether or not to render the `Graphic` automatically after to a specified parent node after init. This can be a Node instance or a CSS selector string.
957
 
     * 
958
 
     * @config render
959
 
     * @type Node | String 
960
 
     */
961
 
    /**
962
 
         * Unique id for class instance.
963
 
         *
964
 
         * @config id
965
 
         * @type String
966
 
         */
967
 
    /**
968
 
     * Key value pairs in which a shape instance is associated with its id.
969
 
     *
970
 
     *  @config shapes
971
 
     *  @type Object
972
 
     *  @readOnly
973
 
     */
974
 
    /**
975
 
     *  Object containing size and coordinate data for the content of a Graphic in relation to the coordSpace node.
976
 
     *
977
 
     *  @config contentBounds
978
 
     *  @type Object 
979
 
     *  @readOnly
980
 
     */
981
 
    /**
982
 
     *  The html element that represents to coordinate system of the Graphic instance.
983
 
     *
984
 
     *  @config node
985
 
     *  @type HTMLElement
986
 
     *  @readOnly
987
 
     */
988
 
        /**
989
 
         * Indicates the width of the `Graphic`. 
990
 
         *
991
 
         * @config width
992
 
         * @type Number
993
 
         */
994
 
        /**
995
 
         * Indicates the height of the `Graphic`. 
996
 
         *
997
 
         * @config height 
998
 
         * @type Number
999
 
         */
1000
 
    /**
1001
 
     *  Determines how the size of instance is calculated. If true, the width and height are determined by the size of the contents.
1002
 
     *  If false, the width and height values are either explicitly set or determined by the size of the parent node's dimensions.
1003
 
     *
1004
 
     *  @config autoSize
1005
 
     *  @type Boolean
1006
 
     *  @default false
1007
 
     */
1008
 
    /**
1009
 
     * The contentBounds will resize to greater values but not to smaller values. (for performance)
1010
 
     * When resizing the contentBounds down is desirable, set the resizeDown value to true.
1011
 
     *
1012
 
     * @config resizeDown 
1013
 
     * @type Boolean
1014
 
     */
1015
 
        /**
1016
 
         * Indicates the x-coordinate for the instance.
1017
 
         *
1018
 
         * @config x
1019
 
         * @type Number
1020
 
         */
1021
 
        /**
1022
 
         * Indicates the y-coordinate for the instance.
1023
 
         *
1024
 
         * @config y
1025
 
         * @type Number
1026
 
         */
1027
 
    /**
1028
 
     * Indicates whether or not the instance will automatically redraw after a change is made to a shape.
1029
 
     * This property will get set to false when batching operations.
1030
 
     *
1031
 
     * @config autoDraw
1032
 
     * @type Boolean
1033
 
     * @default true
1034
 
     * @private
1035
 
     */
1036
 
        /**
1037
 
         * Indicates whether the `Graphic` and its children are visible.
1038
 
         *
1039
 
         * @config visible
1040
 
         * @type Boolean
1041
 
         */
1042
 
    /**
1043
 
     * Gets the current position of the graphic instance in page coordinates.
1044
 
     *
1045
 
     * @method getXY
1046
 
     * @return Array The XY position of the shape.
1047
 
     */
1048
 
    /**
1049
 
     * Adds the graphics node to the dom.
1050
 
     * 
1051
 
     * @method render
1052
 
     * @param {Node|String} parentNode node in which to render the graphics node into.
1053
 
     */
1054
 
    /**
1055
 
     * Removes all nodes.
1056
 
     *
1057
 
     * @method destroy
1058
 
     */
1059
 
    /**
1060
 
     * <p>Generates a shape instance by type. The method accepts an object that contain's the shape's
1061
 
     * type and attributes to be customized. For example, the code below would create a rectangle:</p>
1062
 
     *
1063
 
            var myRect = myGraphic.addShape({
1064
 
                type: "rect",
1065
 
                width: 40,
1066
 
                height: 30,
1067
 
                fill: {
1068
 
                    color: "#9aa"
1069
 
                },
1070
 
                stroke: {
1071
 
                    weight: 1,
1072
 
                    color: "#000"
1073
 
                }
1074
 
            });
1075
 
     *
1076
 
     * <p>The `Graphics` module includes a few basic shapes. More information on their creation 
1077
 
     * can be found in each shape's documentation:
1078
 
     *
1079
 
     *  <ul>
1080
 
     *      <li><a href="Circle.html">`Circle`</a></li>
1081
 
     *      <li><a href="Ellipse.html">`Ellipse`</a></li>
1082
 
     *      <li><a href="Rect.html">`Rect`</a></li>
1083
 
     *      <li><a href="Path.html">`Path`</a></li>
1084
 
     *  </ul>
1085
 
     *
1086
 
     *  The `Graphics` module also allows for the creation of custom shapes. If a custom shape
1087
 
     *  has been created, it can be instantiated with the `addShape` method as well. The attributes,
1088
 
     *  required and optional, would need to be defined in the custom shape.
1089
 
     *
1090
 
            var myCustomShape = myGraphic.addShape({
1091
 
                type: Y.MyCustomShape,
1092
 
                width: 50,
1093
 
                height: 50,
1094
 
                fill: {
1095
 
                    color: "#9aa"
1096
 
                },
1097
 
                stroke: {
1098
 
                    weight: 1,
1099
 
                    color: "#000"
1100
 
                }
1101
 
            });
1102
 
     *
1103
 
     * @method addShape
1104
 
     * @param {Object} cfg Object containing the shape's type and attributes. 
1105
 
     * @return Shape
1106
 
     */
1107
 
    /**
1108
 
     * Removes a shape instance from from the graphic instance.
1109
 
     *
1110
 
     * @method removeShape
1111
 
     * @param {Shape|String} shape The instance or id of the shape to be removed.
1112
 
     */
1113
 
    /**
1114
 
     * Removes all shape instances from the dom.
1115
 
     *
1116
 
     * @method removeAllShapes
1117
 
     */
1118
 
    /**
1119
 
     * Returns a shape based on the id of its dom node.
1120
 
     *
1121
 
     * @method getShapeById
1122
 
     * @param {String} id Dom id of the shape's node attribute.
1123
 
     * @return Shape
1124
 
     */
1125
 
        /**
1126
 
         * Allows for creating multiple shapes in order to batch appending and redraw operations.
1127
 
         *
1128
 
         * @method batch
1129
 
         * @param {Function} method Method to execute.
1130
 
         */
1131
 
 
1132
 
 
1133
 
}, '3.5.0' ,{requires:['event-custom', 'node', 'pluginhost']});