← Back to branch summary

~ubuntu-branches/ubuntu/raring/maas/raring-updates

« back to all changes in this revision

Viewing changes to src/maasserver/static/jslibs/yui/3.4.1/build/graphics/graphics.js

  • Committer: Package Import Robot
  • Author(s): Andres Rodriguez
  • Date: 2012-07-03 17:42:37 UTC
  • mfrom: (1.1.13)
  • Revision ID: package-import@ubuntu.com-20120703174237-p8l0keuuznfg721k
Tags: 0.1+bzr709+dfsg-0ubuntu1
* New Upstream release
* debian/control:
  - Depends on python-celery, python-tempita, libjs-yui3-{full,min},
    libjs-raphael
* debian/maas.install:
  - Install apiclient, celeryconfig.py, maas-import-pxe-files, preseeds_v2.
  - Update to install various files from chroot, rather tha manually copy
    them from the source.
* debian/maas.links: symlink celeryconfig.py
* debian/maas.maas-celery.upstart: Add job.
* debian/rules:
  - Install celery upstart job.
  - Do not install jslibs as packages are now used.
  - Drop copying of maas_local_settings_sample.py as source now ships
    a maas_local_settings.py
* debian/patches:
  - 04-maas-http-fix.patch: Drop. Merged upstream.
  - 01-fix-database-settings.patch: Refreshed.
  - 99_enums_js.patch: Added until creation of enum.js / build process
    is fixed.
* debian/maas.postinst: Update bzr version to correctly handle upgrades.

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/maasserver/static/jslibs/yui/3.4.1/build/graphics/graphics.js
1
 
/*
2
 
YUI 3.4.1 (build 4118)
3
 
Copyright 2011 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
 
    BaseGraphic,
47
 
    AttributeLite,
48
 
    Matrix;
49
 
 
50
 
    /**
51
 
     * Matrix is a class that allows for the manipulation of a transform matrix.
52
 
     * This class is a work in progress.
53
 
     *
54
 
     * @class Matrix
55
 
     * @constructor
56
 
     */
57
 
    Matrix = function(config) {
58
 
        this.init(config);
59
 
    };
60
 
 
61
 
    Matrix.prototype = {
62
 
        /**
63
 
         * Used as value for the _rounding method.
64
 
         *
65
 
         * @property _rounder
66
 
         * @private
67
 
         */
68
 
        _rounder: 100000,
69
 
 
70
 
        /**
71
 
         * Updates the matrix. 
72
 
         *
73
 
         * @method multiple
74
 
         * @param {Number} a 
75
 
         * @param {Number} b
76
 
         * @param {Number} c
77
 
         * @param {Number} d
78
 
         * @param {Number} dx
79
 
         * @param {Number} dy
80
 
         */
81
 
        multiply: function(a, b, c, d, dx, dy) {
82
 
            var matrix = this,
83
 
                matrix_a = matrix.a * a + matrix.c * b,
84
 
                matrix_b = matrix.b * a + matrix.d * b,
85
 
                matrix_c = matrix.a * c + matrix.c * d,
86
 
                matrix_d = matrix.b * c + matrix.d * d,
87
 
                matrix_dx = matrix.a * dx + matrix.c * dy + matrix.dx,
88
 
                matrix_dy = matrix.b * dx + matrix.d * dy + matrix.dy;
89
 
 
90
 
            matrix.a = matrix_a;
91
 
            matrix.b = matrix_b;
92
 
            matrix.c = matrix_c;
93
 
            matrix.d = matrix_d;
94
 
            matrix.dx = matrix_dx;
95
 
            matrix.dy = matrix_dy;
96
 
            return this;
97
 
        },
98
 
 
99
 
        /**
100
 
         * Parses a string and updates the matrix.
101
 
         *
102
 
         * @method applyCSSText
103
 
         * @param {String} val A css transform string
104
 
         */
105
 
        applyCSSText: function(val) {
106
 
            var re = /\s*([a-z]*)\(([\w,\s]*)\)/gi,
107
 
                args,
108
 
                m;
109
 
 
110
 
            while ((m = re.exec(val))) {
111
 
                if (typeof this[m[1]] === 'function') {
112
 
                    args = m[2].split(',');
113
 
                    console.log(args);
114
 
                    this[m[1]].apply(this, args);
115
 
                }
116
 
            }
117
 
        },
118
 
        
119
 
        /**
120
 
         * Parses a string and returns an array of transform arrays.
121
 
         *
122
 
         * @method applyCSSText
123
 
         * @param {String} val A css transform string
124
 
         * @return Array
125
 
         */
126
 
        getTransformArray: function(val) {
127
 
            var re = /\s*([a-z]*)\(([\w,\s]*)\)/gi,
128
 
                transforms = [],
129
 
                args,
130
 
                m;
131
 
 
132
 
            while ((m = re.exec(val))) {
133
 
                if (typeof this[m[1]] === 'function') {
134
 
                    args = m[2].split(',');
135
 
                    args.unshift(m[1]);
136
 
                    transforms.push(args);
137
 
                }
138
 
            }
139
 
            return transforms;
140
 
        },
141
 
 
142
 
        /**
143
 
         * Default values for the matrix
144
 
         *
145
 
         * @property _defaults
146
 
         * @private
147
 
         */
148
 
        _defaults: {
149
 
            a: 1,
150
 
            b: 0,
151
 
            c: 0,
152
 
            d: 1,
153
 
            dx: 0,
154
 
            dy: 0
155
 
        },
156
 
 
157
 
        /**
158
 
         * Rounds values
159
 
         *
160
 
         * @method _round
161
 
         * @private
162
 
         */
163
 
        _round: function(val) {
164
 
            val = Math.round(val * this._rounder) / this._rounder;
165
 
            return val;
166
 
        },
167
 
 
168
 
        /**
169
 
         * Initializes a matrix.
170
 
         *
171
 
         * @method init
172
 
         * @param {Object} config Specified key value pairs for matrix properties. If a property is not explicitly defined in the config argument,
173
 
         * the default value will be used.
174
 
         */
175
 
        init: function(config) {
176
 
            var defaults = this._defaults,
177
 
                prop;
178
 
 
179
 
            config = config || {};
180
 
 
181
 
            for (prop in defaults) {
182
 
                if(defaults.hasOwnProperty(prop))
183
 
                {
184
 
                    this[prop] = (prop in config) ? config[prop] : defaults[prop];
185
 
                }
186
 
            }
187
 
 
188
 
            this._config = config;
189
 
        },
190
 
 
191
 
        /**
192
 
         * Applies a scale transform
193
 
         *
194
 
         * @method scale
195
 
         * @param {Number} val
196
 
         */
197
 
        scale: function(x, y) {
198
 
            this.multiply(x, 0, 0, y, 0, 0);
199
 
            return this;
200
 
        },
201
 
        
202
 
        /**
203
 
         * Applies a skew transformation.
204
 
         *
205
 
         * @method skew
206
 
         * @param {Number} x The value to skew on the x-axis.
207
 
         * @param {Number} y The value to skew on the y-axis.
208
 
         */
209
 
        skew: function(x, y) {
210
 
            x = x || 0;
211
 
            y = y || 0;
212
 
 
213
 
            if (x !== undefined) { // null or undef
214
 
                x = this._round(Math.tan(this.angle2rad(x)));
215
 
 
216
 
            }
217
 
 
218
 
            if (y !== undefined) { // null or undef
219
 
                y = this._round(Math.tan(this.angle2rad(y)));
220
 
            }
221
 
 
222
 
            this.multiply(1, y, x, 1, 0, 0);
223
 
            return this;
224
 
        },
225
 
 
226
 
        /**
227
 
         * Applies a skew to the x-coordinate
228
 
         *
229
 
         * @method skewX
230
 
         * @param {Number} x x-coordinate
231
 
         */
232
 
        skewX: function(x) {
233
 
            this.skew(x);
234
 
            return this;
235
 
        },
236
 
 
237
 
        /**
238
 
         * Applies a skew to the y-coordinate
239
 
         *
240
 
         * @method skewY
241
 
         * @param {Number} y y-coordinate
242
 
         */
243
 
        skewY: function(y) {
244
 
            this.skew(null, y);
245
 
            return this;
246
 
        },
247
 
 
248
 
        /**
249
 
         * Returns a string of text that can be used to populate a the css transform property of an element.
250
 
         *
251
 
         * @method toCSSText
252
 
         * @return String
253
 
         */
254
 
        toCSSText: function() {
255
 
            var matrix = this,
256
 
                dx = matrix.dx,
257
 
                dy = matrix.dy,
258
 
                text = 'matrix(';
259
 
 
260
 
 
261
 
            if (Y.UA.gecko) { // requires unit
262
 
                if (!isNaN(dx)) {
263
 
                    dx += 'px';
264
 
                }
265
 
                if (!isNaN(dy)) {
266
 
                    dy += 'px';
267
 
                }
268
 
            }
269
 
 
270
 
            text +=     matrix.a + ',' + 
271
 
                        matrix.b + ',' + 
272
 
                        matrix.c + ',' + 
273
 
                        matrix.d + ',' + 
274
 
                        dx + ',' +
275
 
                        dy;
276
 
 
277
 
            text += ')';
278
 
 
279
 
            return text;
280
 
        },
281
 
 
282
 
        /**
283
 
         * Returns a string that can be used to populate the css filter property of an element.
284
 
         *
285
 
         * @method toFilterText
286
 
         * @return String
287
 
         */
288
 
        toFilterText: function() {
289
 
            var matrix = this,
290
 
                text = 'progid:DXImageTransform.Microsoft.Matrix(';
291
 
            text +=     'M11=' + matrix.a + ',' + 
292
 
                        'M21=' + matrix.b + ',' + 
293
 
                        'M12=' + matrix.c + ',' + 
294
 
                        'M22=' + matrix.d + ',' +
295
 
                        'sizingMethod="auto expand")';
296
 
 
297
 
            text += '';
298
 
 
299
 
            return text;
300
 
        },
301
 
 
302
 
        /**
303
 
         * Converts a radian value to a degree.
304
 
         *
305
 
         * @method rad2deg
306
 
         * @param {Number} rad Radian value to be converted.
307
 
         * @return Number
308
 
         */
309
 
        rad2deg: function(rad) {
310
 
            var deg = rad * (180 / Math.PI);
311
 
            return deg;
312
 
        },
313
 
 
314
 
        /**
315
 
         * Converts a degree value to a radian.
316
 
         *
317
 
         * @method deg2rad
318
 
         * @param {Number} deg Degree value to be converted to radian.
319
 
         * @return Number
320
 
         */
321
 
        deg2rad: function(deg) {
322
 
            var rad = deg * (Math.PI / 180);
323
 
            return rad;
324
 
        },
325
 
 
326
 
        angle2rad: function(val) {
327
 
            if (typeof val === 'string' && val.indexOf('rad') > -1) {
328
 
                val = parseFloat(val);
329
 
            } else { // default to deg
330
 
                val = this.deg2rad(parseFloat(val));
331
 
            }
332
 
 
333
 
            return val;
334
 
        },
335
 
 
336
 
        /**
337
 
         * Applies a rotate transform.
338
 
         *
339
 
         * @method rotate
340
 
         * @param {Number} deg The degree of the rotation.
341
 
         */
342
 
        rotate: function(deg, x, y) {
343
 
            var matrix = [],
344
 
                rad = this.angle2rad(deg),
345
 
                sin = this._round(Math.sin(rad)),
346
 
                cos = this._round(Math.cos(rad));
347
 
            this.multiply(cos, sin, 0 - sin, cos, 0, 0);
348
 
            return this;
349
 
        },
350
 
 
351
 
        /**
352
 
         * Applies translate transformation.
353
 
         *
354
 
         * @method translate
355
 
         * @param {Number} x The value to transate on the x-axis.
356
 
         * @param {Number} y The value to translate on the y-axis.
357
 
         */
358
 
        translate: function(x, y) {
359
 
            this.multiply(1, 0, 0, 1, parseFloat(x), parseFloat(y));
360
 
            return this;
361
 
        }
362
 
    };
363
 
    Y.Matrix = Matrix;
364
 
    
365
 
    /**
366
 
         * AttributeLite provides Attribute-like getters and setters for shape classes in the Graphics module. It provides a get/set API without the event infastructure.
367
 
     * This class is temporary and a work in progress.
368
 
         *
369
 
         * @class AttributeLite
370
 
         * @constructor
371
 
         */
372
 
    AttributeLite = function()
373
 
    {
374
 
        var host = this; // help compression
375
 
        
376
 
        // Perf tweak - avoid creating event literals if not required.
377
 
        host._ATTR_E_FACADE = {};
378
 
        
379
 
        Y.EventTarget.call(this, {emitFacade:true});
380
 
        host._state = {};
381
 
        host.prototype = Y.mix(AttributeLite.prototype, host.prototype);
382
 
    };
383
 
 
384
 
    AttributeLite.prototype = {
385
 
                /**
386
 
                 * Initializes the attributes for a shape. If an attribute config is passed into the constructor of the host, 
387
 
                 * the initial values will be overwritten.
388
 
                 *
389
 
                 * @method addAttrs
390
 
                 * @param {Object} cfg Optional object containing attributes key value pairs to be set.
391
 
                 */
392
 
                addAttrs: function(cfg)
393
 
                {
394
 
                        var host = this,
395
 
                                attrConfig = this.constructor.ATTRS, 
396
 
                                attr,
397
 
                                i,
398
 
                                fn,
399
 
                                state = host._state;
400
 
                        for(i in attrConfig)
401
 
                        {
402
 
                                if(attrConfig.hasOwnProperty(i))
403
 
                                {
404
 
                                        attr = attrConfig[i];
405
 
                                        if(attr.hasOwnProperty(VALUE))
406
 
                                        {
407
 
                                                state[i] = attr.value;
408
 
                                        }
409
 
                                        else if(attr.hasOwnProperty(VALUEFN))
410
 
                                        {
411
 
                                                fn = attr.valueFn;
412
 
                                                if(Y_LANG.isString(fn))
413
 
                                                {
414
 
                                                        state[i] = host[fn].apply(host);
415
 
                                                }
416
 
                                                else
417
 
                                                {
418
 
                                                        state[i] = fn.apply(host);
419
 
                                                }
420
 
                                        }
421
 
                            }
422
 
            }
423
 
                        host._state = state;
424
 
            for(i in attrConfig)
425
 
                        {
426
 
                                if(attrConfig.hasOwnProperty(i))
427
 
                                {
428
 
                                        attr = attrConfig[i];
429
 
                    if(attr.hasOwnProperty(READONLY) && attr.readOnly)
430
 
                                        {
431
 
                                                continue;
432
 
                                        }
433
 
 
434
 
                                        if(attr.hasOwnProperty(WRITE_ONCE) && attr.writeOnce)
435
 
                                        {
436
 
                                                attr.readOnly = true;
437
 
                                        }
438
 
 
439
 
                                        if(cfg && cfg.hasOwnProperty(i))
440
 
                                        {
441
 
                                                if(attr.hasOwnProperty(SETTER))
442
 
                                                {
443
 
                                                        host._state[i] = attr.setter.apply(host, [cfg[i]]);
444
 
                                                }
445
 
                                                else
446
 
                                                {
447
 
                                                        host._state[i] = cfg[i];
448
 
                                                }
449
 
                                        }
450
 
                                }
451
 
                        }
452
 
                },
453
 
 
454
 
        /**
455
 
         * For a given item, returns the value of the property requested, or undefined if not found.
456
 
         *
457
 
         * @method get
458
 
         * @param name {String} The name of the item
459
 
         * @return {Any} The value of the supplied property.
460
 
         */
461
 
        get: function(attr)
462
 
        {
463
 
            var host = this,
464
 
                getter,
465
 
                attrConfig = host.constructor.ATTRS;
466
 
            if(attrConfig && attrConfig[attr])
467
 
            {
468
 
                getter = attrConfig[attr].getter;
469
 
                if(getter)
470
 
                {
471
 
                    if(typeof getter == STR)
472
 
                    {
473
 
                        return host[getter].apply(host);
474
 
                    }
475
 
                    return attrConfig[attr].getter.apply(host);
476
 
                }
477
 
 
478
 
                return host._state[attr];
479
 
            }
480
 
            return null;
481
 
        },
482
 
    
483
 
        /**
484
 
         * Sets the value of an attribute.
485
 
         *
486
 
         * @method set
487
 
         * @param {String|Object} name The name of the attribute. Alternatively, an object of key value pairs can 
488
 
         * be passed in to set multiple attributes at once.
489
 
         * @param {Any} value The value to set the attribute to. This value is ignored if an object is received as 
490
 
         * the name param.
491
 
         */
492
 
        set: function(attr, val)
493
 
        {
494
 
            var i;
495
 
            if(Y_LANG.isObject(attr))
496
 
            {
497
 
                for(i in attr)
498
 
                {
499
 
                    if(attr.hasOwnProperty(i))
500
 
                    {
501
 
                        this._set(i, attr[i]);
502
 
                    }
503
 
                }
504
 
            }
505
 
            else
506
 
            {
507
 
                this._set.apply(this, arguments);
508
 
            }
509
 
        },
510
 
 
511
 
                /**
512
 
         * Provides setter logic. Used by `set`.
513
 
         *
514
 
         * @method _set
515
 
         * @param {String|Object} name The name of the attribute. Alternatively, an object of key value pairs can 
516
 
         * be passed in to set multiple attributes at once.
517
 
         * @param {Any} value The value to set the attribute to. This value is ignored if an object is received as 
518
 
         * the name param.
519
 
                 * @protected
520
 
                 */
521
 
                _set: function(attr, val)
522
 
                {
523
 
                        var host = this,
524
 
                                setter,
525
 
                                args,
526
 
                                attrConfig = host.constructor.ATTRS;
527
 
                        if(attrConfig && attrConfig.hasOwnProperty(attr))
528
 
                        {
529
 
                                setter = attrConfig[attr].setter;
530
 
                                if(setter)
531
 
                                {
532
 
                                        args = [val];
533
 
                                        if(typeof setter == STR)
534
 
                                        {
535
 
                                                val = host[setter].apply(host, args);
536
 
                                        }
537
 
                                        else
538
 
                    {
539
 
                                            val = attrConfig[attr].setter.apply(host, args);
540
 
                    }
541
 
                                }
542
 
                                host._state[attr] = val;
543
 
                        }
544
 
                }
545
 
        };
546
 
    Y.mix(AttributeLite, Y.EventTarget, false, null, 1);
547
 
        Y.AttributeLite = AttributeLite;
548
 
 
549
 
    /**
550
 
     * BaseGraphic serves as the base class for the graphic layer. It serves the same purpose as
551
 
     * Base but uses a lightweight getter/setter class instead of Attribute.
552
 
     * This class is temporary and a work in progress.
553
 
     *
554
 
     * @class BaseGraphic
555
 
     * @constructor
556
 
     * @param {Object} cfg Key value pairs for attributes
557
 
     */
558
 
    BaseGraphic = function(cfg)
559
 
    {
560
 
        var host = this,
561
 
            PluginHost = Y.Plugin && Y.Plugin.Host;  
562
 
        if (host._initPlugins && PluginHost) {
563
 
            PluginHost.call(host);
564
 
        }
565
 
        
566
 
        host.name = host.constructor.NAME;
567
 
        host._eventPrefix = host.constructor.EVENT_PREFIX || host.constructor.NAME;
568
 
        AttributeLite.call(host);
569
 
        host.addAttrs(cfg);
570
 
        host.init.apply(this, arguments);
571
 
        if (host._initPlugins) {
572
 
            // Need to initPlugins manually, to handle constructor parsing, static Plug parsing
573
 
            host._initPlugins(cfg);
574
 
        }
575
 
        host.initialized = true;
576
 
    };
577
 
 
578
 
    BaseGraphic.NAME = "baseGraphic";
579
 
 
580
 
    BaseGraphic.prototype = {
581
 
        /**
582
 
         * Init method, invoked during construction.
583
 
         * Fires an init event after calling `initializer` on implementers.
584
 
         *
585
 
         * @method init
586
 
         * @protected 
587
 
         */
588
 
        init: function()
589
 
        {
590
 
            this.publish("init", {
591
 
                fireOnce:true
592
 
            });
593
 
            this.initializer.apply(this, arguments);
594
 
            this.fire("init", {cfg: arguments[0]});
595
 
        }
596
 
    };
597
 
//Straightup augment, no wrapper functions
598
 
Y.mix(BaseGraphic, Y.AttributeLite, false, null, 1);
599
 
Y.mix(BaseGraphic, PluginHost, false, null, 1);
600
 
BaseGraphic.prototype.constructor = BaseGraphic;
601
 
BaseGraphic.plug = PluginHost.plug;
602
 
BaseGraphic.unplug = PluginHost.unplug;
603
 
Y.BaseGraphic = BaseGraphic;
604
 
 
605
 
 
606
 
/**
607
 
 * `Drawing` provides a set of drawing methods used by `Path` and custom shape classes. 
608
 
 * `Drawing` has the following implementations based on browser capability.
609
 
 *  <ul>
610
 
 *      <li><a href="SVGDrawing.html">`SVGDrawing`</a></li>
611
 
 *      <li><a href="VMLDrawing.html">`VMLDrawing`</a></li>
612
 
 *      <li><a href="CanvasDrawing.html">`CanvasDrawing`</a></li>
613
 
 *  </ul>
614
 
 *
615
 
 * @class Drawing
616
 
 * @constructor
617
 
 */
618
 
    /**
619
 
     * Draws a line segment using the current line style from the current drawing position to the specified x and y coordinates.
620
 
     * 
621
 
     * @method lineTo
622
 
     * @param {Number} point1 x-coordinate for the end point.
623
 
     * @param {Number} point2 y-coordinate for the end point.
624
 
     */
625
 
    /**
626
 
     * Moves the current drawing position to specified x and y coordinates.
627
 
     *
628
 
     * @method moveTo
629
 
     * @param {Number} x x-coordinate for the end point.
630
 
     * @param {Number} y y-coordinate for the end point.
631
 
     */
632
 
    /**
633
 
     * Draws a bezier curve.
634
 
     *
635
 
     * @method curveTo
636
 
     * @param {Number} cp1x x-coordinate for the first control point.
637
 
     * @param {Number} cp1y y-coordinate for the first control point.
638
 
     * @param {Number} cp2x x-coordinate for the second control point.
639
 
     * @param {Number} cp2y y-coordinate for the second control point.
640
 
     * @param {Number} x x-coordinate for the end point.
641
 
     * @param {Number} y y-coordinate for the end point.
642
 
     */
643
 
    /**
644
 
     * Draws a quadratic bezier curve.
645
 
     *
646
 
     * @method quadraticCurveTo
647
 
     * @param {Number} cpx x-coordinate for the control point.
648
 
     * @param {Number} cpy y-coordinate for the control point.
649
 
     * @param {Number} x x-coordinate for the end point.
650
 
     * @param {Number} y y-coordinate for the end point.
651
 
     */
652
 
    /**
653
 
     * Draws a rectangle.
654
 
     *
655
 
     * @method drawRect
656
 
     * @param {Number} x x-coordinate
657
 
     * @param {Number} y y-coordinate
658
 
     * @param {Number} w width
659
 
     * @param {Number} h height
660
 
     */
661
 
    /**
662
 
     * Draws a rectangle with rounded corners.
663
 
     * 
664
 
     * @method drawRoundRect
665
 
     * @param {Number} x x-coordinate
666
 
     * @param {Number} y y-coordinate
667
 
     * @param {Number} w width
668
 
     * @param {Number} h height
669
 
     * @param {Number} ew width of the ellipse used to draw the rounded corners
670
 
     * @param {Number} eh height of the ellipse used to draw the rounded corners
671
 
     */
672
 
    /**
673
 
     * Completes a drawing operation. 
674
 
     *
675
 
     * @method end
676
 
     */
677
 
    /**
678
 
     * Clears the path.
679
 
     *
680
 
     * @method clear
681
 
     */
682
 
/**
683
 
 *  <p>Base class for creating shapes.</p>
684
 
 *  <p>`Shape` is an abstract class and is not meant to be used directly. The following classes extend
685
 
 *  `Shape`.
686
 
 *
687
 
 *  <ul>
688
 
 *      <li><a href="Circle.html">`Circle`</a></li>
689
 
 *      <li><a href="Ellipse.html">`Ellipse`</a></li>
690
 
 *      <li><a href="Rect.html">`Rect`</a></li>
691
 
 *      <li><a href="Path.html">`Path`</a></li>
692
 
 *  </ul>
693
 
 *
694
 
 * `Shape` can also be extended to create custom shape classes.</p>
695
 
 *
696
 
 * `Shape` has the following implementations based on browser capability.
697
 
 *  <ul>
698
 
 *      <li><a href="SVGShape.html">`SVGShape`</a></li>
699
 
 *      <li><a href="VMLShape.html">`VMLShape`</a></li>
700
 
 *      <li><a href="CanvasShape.html">`CanvasShape`</a></li>
701
 
 *  </ul>
702
 
 *
703
 
 * It is not necessary to interact with these classes directly. `Shape` will point to the appropriate implemention.</p>
704
 
 *
705
 
 * @class Shape
706
 
 * @constructor
707
 
 * @param {Object} cfg (optional) Attribute configs
708
 
 */
709
 
    /**
710
 
     * Init method, invoked during construction.
711
 
     * Calls `initializer` method.
712
 
     *
713
 
     * @method init
714
 
     * @protected
715
 
     */
716
 
        /**
717
 
         * Initializes the shape
718
 
         *
719
 
         * @private
720
 
         * @method initializer
721
 
         */
722
 
        /**
723
 
         * Add a class name to each node.
724
 
         *
725
 
         * @method addClass
726
 
         * @param {String} className the class name to add to the node's class attribute 
727
 
         */
728
 
        /**
729
 
         * Removes a class name from each node.
730
 
         *
731
 
         * @method removeClass
732
 
         * @param {String} className the class name to remove from the node's class attribute
733
 
         */
734
 
        /**
735
 
         * Gets the current position of the node in page coordinates.
736
 
         *
737
 
         * @method getXY
738
 
         * @return Array The XY position of the shape.
739
 
         */
740
 
        /**
741
 
         * Set the position of the shape in page coordinates, regardless of how the node is positioned.
742
 
         *
743
 
         * @method setXY
744
 
         * @param {Array} Contains x & y values for new position (coordinates are page-based)
745
 
         */
746
 
        /**
747
 
         * Determines whether the node is an ancestor of another HTML element in the DOM hierarchy. 
748
 
         *
749
 
         * @method contains
750
 
         * @param {Shape | HTMLElement} needle The possible node or descendent
751
 
         * @return Boolean Whether or not this shape is the needle or its ancestor.
752
 
         */
753
 
        /**
754
 
         * Compares nodes to determine if they match.
755
 
         * Node instances can be compared to each other and/or HTMLElements.
756
 
         * @method compareTo
757
 
         * @param {HTMLElement | Node} refNode The reference node to compare to the node.
758
 
         * @return {Boolean} True if the nodes match, false if they do not.
759
 
         */
760
 
        /**
761
 
         * Test if the supplied node matches the supplied selector.
762
 
         *
763
 
         * @method test
764
 
         * @param {String} selector The CSS selector to test against.
765
 
         * @return Boolean Wheter or not the shape matches the selector.
766
 
         */
767
 
    /**
768
 
     * Sets the value of an attribute.
769
 
     *
770
 
     * @method set
771
 
     * @param {String|Object} name The name of the attribute. Alternatively, an object of key value pairs can 
772
 
     * be passed in to set multiple attributes at once.
773
 
     * @param {Any} value The value to set the attribute to. This value is ignored if an object is received as 
774
 
     * the name param.
775
 
     */
776
 
        /**
777
 
         * Specifies a 2d translation.
778
 
         *
779
 
         * @method translate
780
 
         * @param {Number} x The value to transate on the x-axis.
781
 
         * @param {Number} y The value to translate on the y-axis.
782
 
         */
783
 
        /**
784
 
         * Translates the shape along the x-axis. When translating x and y coordinates,
785
 
         * use the `translate` method.
786
 
         *
787
 
         * @method translateX
788
 
         * @param {Number} x The value to translate.
789
 
         */
790
 
        /**
791
 
         * Translates the shape along the y-axis. When translating x and y coordinates,
792
 
         * use the `translate` method.
793
 
         *
794
 
         * @method translateY
795
 
         * @param {Number} y The value to translate.
796
 
         */
797
 
    /**
798
 
     * Skews the shape around the x-axis and y-axis.
799
 
     *
800
 
     * @method skew
801
 
     * @param {Number} x The value to skew on the x-axis.
802
 
     * @param {Number} y The value to skew on the y-axis.
803
 
     */
804
 
        /**
805
 
         * Skews the shape around the x-axis.
806
 
         *
807
 
         * @method skewX
808
 
         * @param {Number} x x-coordinate
809
 
         */
810
 
        /**
811
 
         * Skews the shape around the y-axis.
812
 
         *
813
 
         * @method skewY
814
 
         * @param {Number} y y-coordinate
815
 
         */
816
 
        /**
817
 
         * Rotates the shape clockwise around it transformOrigin.
818
 
         *
819
 
         * @method rotate
820
 
         * @param {Number} deg The degree of the rotation.
821
 
         */
822
 
        /**
823
 
         * Specifies a 2d scaling operation.
824
 
         *
825
 
         * @method scale
826
 
         * @param {Number} val
827
 
         */
828
 
        /**
829
 
         * Returns the bounds for a shape.
830
 
         *
831
 
     * Calculates the a new bounding box from the original corner coordinates (base on size and position) and the transform matrix.
832
 
     * The calculated bounding box is used by the graphic instance to calculate its viewBox. 
833
 
     *
834
 
         * @method getBounds
835
 
         * @return Object
836
 
         */
837
 
    /**
838
 
     * Destroys the instance.
839
 
     *
840
 
     * @method destroy
841
 
     */
842
 
        /**
843
 
         * 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 
844
 
         * fraction of the shape's corresponding bounding box dimension. The default value is [0.5, 0.5].
845
 
         *
846
 
         * @config transformOrigin
847
 
         * @type Array
848
 
         */
849
 
    /**
850
 
     * <p>A string containing, in order, transform operations applied to the shape instance. The `transform` string can contain the following values:
851
 
     *     
852
 
     *    <dl>
853
 
     *        <dt>rotate</dt><dd>Rotates the shape clockwise around it transformOrigin.</dd>
854
 
     *        <dt>translate</dt><dd>Specifies a 2d translation.</dd>
855
 
     *        <dt>skew</dt><dd>Skews the shape around the x-axis and y-axis.</dd>
856
 
     *        <dt>scale</dt><dd>Specifies a 2d scaling operation.</dd>
857
 
     *        <dt>translateX</dt><dd>Translates the shape along the x-axis.</dd>
858
 
     *        <dt>translateY</dt><dd>Translates the shape along the y-axis.</dd>
859
 
     *        <dt>skewX</dt><dd>Skews the shape around the x-axis.</dd>
860
 
     *        <dt>skewY</dt><dd>Skews the shape around the y-axis.</dd>
861
 
     *    </dl>
862
 
     * </p>
863
 
     * <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
864
 
     * 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>
865
 
            var myRect = new Y.Rect({
866
 
                type:"rect",
867
 
                width: 50,
868
 
                height: 40,
869
 
                transform: "rotate(45)"
870
 
            };
871
 
     * <p>The code below would apply `translate` and `rotate` to an existing shape.</p>
872
 
    
873
 
        myRect.set("transform", "translate(40, 50) rotate(45)");
874
 
         * @config transform
875
 
     * @type String  
876
 
         */
877
 
        /**
878
 
         * Unique id for class instance.
879
 
         *
880
 
         * @config id
881
 
         * @type String
882
 
         */
883
 
        /**
884
 
         * Indicates the x position of shape.
885
 
         *
886
 
         * @config x
887
 
         * @type Number
888
 
         */
889
 
        /**
890
 
         * Indicates the y position of shape.
891
 
         *
892
 
         * @config y
893
 
         * @type Number
894
 
         */
895
 
        /**
896
 
         * Indicates the width of the shape
897
 
         *
898
 
         * @config width
899
 
         * @type Number
900
 
         */
901
 
        /**
902
 
         * Indicates the height of the shape
903
 
         * 
904
 
         * @config height
905
 
         * @type Number
906
 
         */
907
 
        /**
908
 
         * Indicates whether the shape is visible.
909
 
         *
910
 
         * @config visible
911
 
         * @type Boolean
912
 
         */
913
 
        /**
914
 
         * Contains information about the fill of the shape. 
915
 
     *  <dl>
916
 
     *      <dt>color</dt><dd>The color of the fill.</dd>
917
 
     *      <dt>opacity</dt><dd>Number between 0 and 1 that indicates the opacity of the fill. The default value is 1.</dd>
918
 
     *      <dt>type</dt><dd>Type of fill.
919
 
     *          <dl>
920
 
     *              <dt>solid</dt><dd>Solid single color fill. (default)</dd>
921
 
     *              <dt>linear</dt><dd>Linear gradient fill.</dd>
922
 
     *              <dt>radial</dt><dd>Radial gradient fill.</dd>
923
 
     *          </dl>
924
 
     *      </dd>
925
 
     *  </dl>
926
 
     *  <p>If a `linear` or `radial` is specified as the fill type. The following additional property is used:
927
 
     *  <dl>
928
 
     *      <dt>stops</dt><dd>An array of objects containing the following properties:
929
 
     *          <dl>
930
 
     *              <dt>color</dt><dd>The color of the stop.</dd>
931
 
     *              <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>
932
 
     *              <dt>offset</dt><dd>Number between 0 and 1 indicating where the color stop is positioned.</dd> 
933
 
     *          </dl>
934
 
     *      </dd>
935
 
     *      <p>Linear gradients also have the following property:</p>
936
 
     *      <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>
937
 
     *      <p>Radial gradients have the following additional properties:</p>
938
 
     *      <dt>r</dt><dd>Radius of the gradient circle.</dd>
939
 
     *      <dt>fx</dt><dd>Focal point x-coordinate of the gradient.</dd>
940
 
     *      <dt>fy</dt><dd>Focal point y-coordinate of the gradient.</dd>
941
 
     *      <dt>cx</dt><dd>
942
 
     *          <p>The x-coordinate of the center of the gradient circle. Determines where the color stop begins. The default value 0.5.</p>
943
 
     *          <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>
944
 
     *      </dd>
945
 
     *      <dt>cy</dt><dd>
946
 
     *          <p>The y-coordinate of the center of the gradient circle. Determines where the color stop begins. The default value 0.5.</p>
947
 
     *          <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>
948
 
     *      </dd>
949
 
     *  </dl>
950
 
         *
951
 
         * @config fill
952
 
         * @type Object 
953
 
         */
954
 
        /**
955
 
         * Contains information about the stroke of the shape.
956
 
     *  <dl>
957
 
     *      <dt>color</dt><dd>The color of the stroke.</dd>
958
 
     *      <dt>weight</dt><dd>Number that indicates the width of the stroke.</dd>
959
 
     *      <dt>opacity</dt><dd>Number between 0 and 1 that indicates the opacity of the stroke. The default value is 1.</dd>
960
 
     *      <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
961
 
     *  length of the dash. The second index indicates the length of gap.
962
 
     *      <dt>linecap</dt><dd>Specifies the linecap for the stroke. The following values can be specified:
963
 
     *          <dl>
964
 
     *              <dt>butt (default)</dt><dd>Specifies a butt linecap.</dd>
965
 
     *              <dt>square</dt><dd>Specifies a sqare linecap.</dd>
966
 
     *              <dt>round</dt><dd>Specifies a round linecap.</dd>
967
 
     *          </dl>
968
 
     *      </dd>
969
 
     *      <dt>linejoin</dt><dd>Specifies a linejoin for the stroke. The following values can be specified:
970
 
     *          <dl>
971
 
     *              <dt>round (default)</dt><dd>Specifies that the linejoin will be round.</dd>
972
 
     *              <dt>bevel</dt><dd>Specifies a bevel for the linejoin.</dd>
973
 
     *              <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
974
 
     *  separate miter and miter limit values.</dd>
975
 
     *          </dl>
976
 
     *      </dd>
977
 
     *  </dl>
978
 
         *
979
 
         * @config stroke
980
 
         * @type Object
981
 
         */
982
 
        /**
983
 
         * Dom node for the shape.
984
 
         *
985
 
         * @config node
986
 
         * @type HTMLElement
987
 
         * @readOnly
988
 
         */
989
 
        /**
990
 
         * Reference to the parent graphic instance
991
 
         *
992
 
         * @config graphic
993
 
         * @type Graphic
994
 
         * @readOnly
995
 
         */
996
 
 
997
 
/**
998
 
 * <p>Creates circle shape with editable attributes.</p> 
999
 
 * <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. 
1000
 
 * The method's `cfg` argument contains a `type` attribute. Assigning "circle" or `Y.Circle` to this attribute will create a `Circle` instance. Required attributes
1001
 
 * for instantiating a `Circle` are `type` and `radius`. Optional attributes include:
1002
 
 *  <ul>
1003
 
 *      <li><a href="#attr_fill">fill</a></li>
1004
 
 *      <li><a href="#attr_id">id</a></li>
1005
 
 *      <li><a href="#attr_stroke">stroke</a></li>
1006
 
 *      <li><a href="#attr_transform">transform</a></li>
1007
 
 *      <li><a href="#attr_transformOrigin">transformOrigin</a></li>
1008
 
 *      <li><a href="#attr_visible">visible</a></li>
1009
 
 *      <li><a href="#attr_x">x</a></li>
1010
 
 *      <li><a href="#attr_y">y</a></li>
1011
 
 *  </ul>
1012
 
 * 
1013
 
 * The below code creates a circle by defining the `type` attribute as "circle":</p>
1014
 
 
1015
 
        var myCircle = myGraphic.addShape({
1016
 
            type: "circle",
1017
 
            radius: 10,
1018
 
            fill: {
1019
 
                color: "#9aa"
1020
 
            },
1021
 
            stroke: {
1022
 
                weight: 1,
1023
 
                color: "#000"
1024
 
            }
1025
 
        });
1026
 
 
1027
 
 * Below, this same circle is created by defining the `type` attribute with a class reference:
1028
 
 *
1029
 
        var myCircle = myGraphic.addShape({
1030
 
            type: Y.Circle,
1031
 
            radius: 10,
1032
 
            fill: {
1033
 
                color: "#9aa"
1034
 
            },
1035
 
            stroke: {
1036
 
                weight: 1,
1037
 
                color: "#000"
1038
 
            }
1039
 
        });
1040
 
 * 
1041
 
 * <p>`Circle` has the following implementations based on browser capability.
1042
 
 *  <ul>
1043
 
 *      <li><a href="SVGCircle.html">`SVGCircle`</a></li>
1044
 
 *      <li><a href="VMLCircle.html">`VMLCircle`</a></li>
1045
 
 *      <li><a href="CanvasCircle.html">`CanvasCircle`</a></li>
1046
 
 *  </ul>
1047
 
 *
1048
 
 * It is not necessary to interact with these classes directly. `Circle` will point to the appropriate implemention.</p>
1049
 
 *
1050
 
 * @class Circle
1051
 
 * @extends Shape
1052
 
 * @constructor
1053
 
 */
1054
 
    /**
1055
 
     * Radius of the circle
1056
 
     *
1057
 
     * @config radius
1058
 
     * @type Number
1059
 
     */
1060
 
/**
1061
 
 * <p>Creates an ellipse shape with editable attributes.</p>
1062
 
 * <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. 
1063
 
 * The method's `cfg` argument contains a `type` attribute. Assigning "ellipse" or `Y.Ellipse` to this attribute will create a `Ellipse` instance. Required attributes
1064
 
 * for instantiating a `Ellipse` are `type`, `width` and `height`. Optional attributes include:
1065
 
 *  <ul>
1066
 
 *      <li><a href="#attr_fill">fill</a></li>
1067
 
 *      <li><a href="#attr_id">id</a></li>
1068
 
 *      <li><a href="#attr_stroke">stroke</a></li>
1069
 
 *      <li><a href="#attr_transform">transform</a></li>
1070
 
 *      <li><a href="#attr_transformOrigin">transformOrigin</a></li>
1071
 
 *      <li><a href="#attr_visible">visible</a></li>
1072
 
 *      <li><a href="#attr_x">x</a></li>
1073
 
 *      <li><a href="#attr_y">y</a></li>
1074
 
 *  </ul>
1075
 
 * 
1076
 
 * The below code creates an ellipse by defining the `type` attribute as "ellipse":</p>
1077
 
 
1078
 
        var myEllipse = myGraphic.addShape({
1079
 
            type: "ellipse",
1080
 
            width: 20,
1081
 
            height: 10,
1082
 
            fill: {
1083
 
                color: "#9aa"
1084
 
            },
1085
 
            stroke: {
1086
 
                weight: 1,
1087
 
                color: "#000"
1088
 
            }
1089
 
        });
1090
 
 
1091
 
 * Below, the same ellipse is created by defining the `type` attribute with a class reference:
1092
 
 *
1093
 
        var myEllipse = myGraphic.addShape({
1094
 
            type: Y.Ellipse,
1095
 
            width: 20,
1096
 
            height: 10,
1097
 
            fill: {
1098
 
                color: "#9aa"
1099
 
            },
1100
 
            stroke: {
1101
 
                weight: 1,
1102
 
                color: "#000"
1103
 
            }
1104
 
        });
1105
 
 * 
1106
 
 * <p>`Ellipse` has the following implementations based on browser capability.
1107
 
 *  <ul>
1108
 
 *      <li><a href="SVGEllipse.html">`SVGEllipse`</a></li>
1109
 
 *      <li><a href="VMLEllipse.html">`VMLEllipse`</a></li>
1110
 
 *      <li><a href="CanvasEllipse.html">`CanvasEllipse`</a></li>
1111
 
 *  </ul>
1112
 
 *
1113
 
 * It is not necessary to interact with these classes directly. `Ellipse` will point to the appropriate implemention.</p>
1114
 
 *
1115
 
 * @class Ellipse
1116
 
 * @extends Shape
1117
 
 * @constructor
1118
 
 */
1119
 
/**
1120
 
 * <p>Creates an rectangle shape with editable attributes.</p>
1121
 
 * <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> 
1122
 
 * class. The method's `cfg` argument contains a `type` attribute. Assigning "rect" or `Y.Rect` to this attribute will create a `Rect` instance. 
1123
 
 * Required attributes for instantiating a `Rect` are `type`, `width` and `height`. Optional attributes include:
1124
 
 *  <ul>
1125
 
 *      <li><a href="#attr_fill">fill</a></li>
1126
 
 *      <li><a href="#attr_id">id</a></li>
1127
 
 *      <li><a href="#attr_stroke">stroke</a></li>
1128
 
 *      <li><a href="#attr_transform">transform</a></li>
1129
 
 *      <li><a href="#attr_transformOrigin">transformOrigin</a></li>
1130
 
 *      <li><a href="#attr_visible">visible</a></li>
1131
 
 *      <li><a href="#attr_x">x</a></li>
1132
 
 *      <li><a href="#attr_y">y</a></li>
1133
 
 *  </ul>
1134
 
 *
1135
 
 * The below code creates a rectangle by defining the `type` attribute as "rect":</p>
1136
 
 
1137
 
        var myRect = myGraphic.addShape({
1138
 
            type: "rect",
1139
 
            width: 20,
1140
 
            height: 10,
1141
 
            fill: {
1142
 
                color: "#9aa"
1143
 
            },
1144
 
            stroke: {
1145
 
                weight: 1,
1146
 
                color: "#000"
1147
 
            }
1148
 
        });
1149
 
 
1150
 
 * Below, the same rectangle is created by defining the `type` attribute with a class reference:
1151
 
 *
1152
 
        var myRect = myGraphic.addShape({
1153
 
            type: Y.Rect,
1154
 
            width: 20,
1155
 
            height: 10,
1156
 
            fill: {
1157
 
                color: "#9aa"
1158
 
            },
1159
 
            stroke: {
1160
 
                weight: 1,
1161
 
                color: "#000"
1162
 
            }
1163
 
        });
1164
 
 *
1165
 
 * <p>`Rect` has the following implementations based on browser capability.
1166
 
 *  <ul>
1167
 
 *      <li><a href="SVGRect.html">`SVGRect`</a></li>
1168
 
 *      <li><a href="VMLRect.html">`VMLRect`</a></li>
1169
 
 *      <li><a href="CanvasRect.html">`CanvasRect`</a></li>
1170
 
 *  </ul>
1171
 
 *
1172
 
 * It is not necessary to interact with these classes directly. `Rect` will point to the appropriate implemention.</p>
1173
 
 *
1174
 
 * @class Rect
1175
 
 * @extends Shape
1176
 
 * @constructor
1177
 
 */
1178
 
/**
1179
 
 * <p>The `Path` class creates a shape through the use of drawing methods. The `Path` class has the following drawing methods available:</p>
1180
 
 *  <ul>
1181
 
 *      <li><a href="#method_clear">`clear`</a></li>
1182
 
 *      <li><a href="#method_curveTo">`curveTo`</a></li>
1183
 
 *      <li><a href="#method_drawRect">`drawRect`</a></li>
1184
 
 *      <li><a href="#method_drawRoundRect">`drawRoundRect`</a></li>
1185
 
 *      <li><a href="#method_end">`end`</a></li>
1186
 
 *      <li><a href="#method_lineTo">`lineTo`</a></li>
1187
 
 *      <li><a href="#method_moveTo">`moveTo`</a></li>
1188
 
 *      <li><a href="#method_quadraticCurveTo">`quadraticCurveTo`</a></li>
1189
 
 *  </ul>
1190
 
 *
1191
 
 *  <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> 
1192
 
 *  class. The method's `cfg` argument contains a `type` attribute. Assigning "path" or `Y.Path` to this attribute will create a `Path` instance.
1193
 
 *  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` 
1194
 
 *  attribute as "path":</p>
1195
 
 
1196
 
        var myPath = myGraphic.addShape({
1197
 
            type: "path",
1198
 
            fill: {
1199
 
                color: "#9aa"
1200
 
            },
1201
 
            stroke: {
1202
 
                weight: 1,
1203
 
                color: "#000"
1204
 
            }
1205
 
        });
1206
 
 
1207
 
 * Below a `Path` element with the same properties is instantiated by defining the `type` attribute with a class reference:
1208
 
 *
1209
 
        var myPath = myGraphic.addShape({
1210
 
            type: Y.Path,
1211
 
            fill: {
1212
 
                color: "#9aa"
1213
 
            },
1214
 
            stroke: {
1215
 
                weight: 1,
1216
 
                color: "#000"
1217
 
            }
1218
 
        });
1219
 
 
1220
 
 * 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>
1221
 
 * method will render the shape. The code below will draw a triangle:
1222
 
 
1223
 
        myPath.moveTo(35, 5);
1224
 
        myPath.lineTo(65, 65);
1225
 
        myPath.lineTo(5, 65);
1226
 
        myPath.lineTo(35, 5);
1227
 
        myPath.end();
1228
 
 *
1229
 
 * <p>`Path` has the following implementations based on browser capability.
1230
 
 *  <ul>
1231
 
 *      <li><a href="SVGPath.html">`SVGPath`</a></li>
1232
 
 *      <li><a href="VMLPath.html">`VMLPath`</a></li>
1233
 
 *      <li><a href="CanvasPath.html">`CanvasPath`</a></li>
1234
 
 *  </ul> 
1235
 
 * It is not necessary to interact with these classes directly. `Path` will point to the appropriate implemention.</p>
1236
 
 *
1237
 
 * @class Path
1238
 
 * @extends Shape
1239
 
 * @uses Drawing
1240
 
 * @constructor
1241
 
 */
1242
 
        /**
1243
 
         * Indicates the path used for the node.
1244
 
         *
1245
 
         * @config path
1246
 
         * @type String
1247
 
     * @readOnly
1248
 
         */
1249
 
/**
1250
 
 * `Graphic` acts a factory and container for shapes. You need at least one `Graphic` instance to create shapes for your application. 
1251
 
 * <p>The code block below creates a `Graphic` instance and appends it to an HTMLElement with the id 'mygraphiccontainer'.</p>
1252
 
    
1253
 
        var myGraphic = new Y.Graphic({render:"#mygraphiccontainer"});
1254
 
 
1255
 
 * <p>Alternatively, you can add a `Graphic` instance to the DOM using the <a href="#method_render">`render`</a> method.</p>
1256
 
        var myGraphic = new Y.Graphic();
1257
 
        myGraphic.render("#mygraphiccontainer");
1258
 
 
1259
 
 * `Graphic` has the following implementations based on browser capability.
1260
 
 *  <ul>
1261
 
 *      <li><a href="SVGGraphic.html">`SVGGraphic`</a></li>
1262
 
 *      <li><a href="VMLGraphic.html">`VMLGraphic`</a></li>
1263
 
 *      <li><a href="CanvasGraphic.html">`CanvasGraphic`</a></li>
1264
 
 *  </ul>
1265
 
 *
1266
 
 * It is not necessary to interact with these classes directly. `Graphic` will point to the appropriate implemention.</p>
1267
 
 *
1268
 
 * @class Graphic
1269
 
 * @constructor
1270
 
 */
1271
 
    /**
1272
 
     * 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.
1273
 
     * 
1274
 
     * @config render
1275
 
     * @type Node | String 
1276
 
     */
1277
 
    /**
1278
 
         * Unique id for class instance.
1279
 
         *
1280
 
         * @config id
1281
 
         * @type String
1282
 
         */
1283
 
    /**
1284
 
     * Key value pairs in which a shape instance is associated with its id.
1285
 
     *
1286
 
     *  @config shapes
1287
 
     *  @type Object
1288
 
     *  @readOnly
1289
 
     */
1290
 
    /**
1291
 
     *  Object containing size and coordinate data for the content of a Graphic in relation to the coordSpace node.
1292
 
     *
1293
 
     *  @config contentBounds
1294
 
     *  @type Object 
1295
 
     *  @readOnly
1296
 
     */
1297
 
    /**
1298
 
     *  The html element that represents to coordinate system of the Graphic instance.
1299
 
     *
1300
 
     *  @config node
1301
 
     *  @type HTMLElement
1302
 
     *  @readOnly
1303
 
     */
1304
 
        /**
1305
 
         * Indicates the width of the `Graphic`. 
1306
 
         *
1307
 
         * @config width
1308
 
         * @type Number
1309
 
         */
1310
 
        /**
1311
 
         * Indicates the height of the `Graphic`. 
1312
 
         *
1313
 
         * @config height 
1314
 
         * @type Number
1315
 
         */
1316
 
    /**
1317
 
     *  Determines how the size of instance is calculated. If true, the width and height are determined by the size of the contents.
1318
 
     *  If false, the width and height values are either explicitly set or determined by the size of the parent node's dimensions.
1319
 
     *
1320
 
     *  @config autoSize
1321
 
     *  @type Boolean
1322
 
     *  @default false
1323
 
     */
1324
 
    /**
1325
 
     * The contentBounds will resize to greater values but not to smaller values. (for performance)
1326
 
     * When resizing the contentBounds down is desirable, set the resizeDown value to true.
1327
 
     *
1328
 
     * @config resizeDown 
1329
 
     * @type Boolean
1330
 
     */
1331
 
        /**
1332
 
         * Indicates the x-coordinate for the instance.
1333
 
         *
1334
 
         * @config x
1335
 
         * @type Number
1336
 
         */
1337
 
        /**
1338
 
         * Indicates the y-coordinate for the instance.
1339
 
         *
1340
 
         * @config y
1341
 
         * @type Number
1342
 
         */
1343
 
    /**
1344
 
     * Indicates whether or not the instance will automatically redraw after a change is made to a shape.
1345
 
     * This property will get set to false when batching operations.
1346
 
     *
1347
 
     * @config autoDraw
1348
 
     * @type Boolean
1349
 
     * @default true
1350
 
     * @private
1351
 
     */
1352
 
        /**
1353
 
         * Indicates whether the `Graphic` and its children are visible.
1354
 
         *
1355
 
         * @config visible
1356
 
         * @type Boolean
1357
 
         */
1358
 
    /**
1359
 
     * Gets the current position of the graphic instance in page coordinates.
1360
 
     *
1361
 
     * @method getXY
1362
 
     * @return Array The XY position of the shape.
1363
 
     */
1364
 
    /**
1365
 
     * Adds the graphics node to the dom.
1366
 
     * 
1367
 
     * @method render
1368
 
     * @param {Node|String} parentNode node in which to render the graphics node into.
1369
 
     */
1370
 
    /**
1371
 
     * Removes all nodes.
1372
 
     *
1373
 
     * @method destroy
1374
 
     */
1375
 
    /**
1376
 
     * <p>Generates a shape instance by type. The method accepts an object that contain's the shape's
1377
 
     * type and attributes to be customized. For example, the code below would create a rectangle:</p>
1378
 
     *
1379
 
            var myRect = myGraphic.addShape({
1380
 
                type: "rect",
1381
 
                width: 40,
1382
 
                height: 30,
1383
 
                fill: {
1384
 
                    color: "#9aa"
1385
 
                },
1386
 
                stroke: {
1387
 
                    weight: 1,
1388
 
                    color: "#000"
1389
 
                }
1390
 
            });
1391
 
     *
1392
 
     * <p>The `Graphics` module includes a few basic shapes. More information on their creation 
1393
 
     * can be found in each shape's documentation:
1394
 
     *
1395
 
     *  <ul>
1396
 
     *      <li><a href="Circle.html">`Circle`</a></li>
1397
 
     *      <li><a href="Ellipse.html">`Ellipse`</a></li>
1398
 
     *      <li><a href="Rect.html">`Rect`</a></li>
1399
 
     *      <li><a href="Path.html">`Path`</a></li>
1400
 
     *  </ul>
1401
 
     *
1402
 
     *  The `Graphics` module also allows for the creation of custom shapes. If a custom shape
1403
 
     *  has been created, it can be instantiated with the `addShape` method as well. The attributes,
1404
 
     *  required and optional, would need to be defined in the custom shape.
1405
 
     *
1406
 
            var myCustomShape = myGraphic.addShape({
1407
 
                type: Y.MyCustomShape,
1408
 
                width: 50,
1409
 
                height: 50,
1410
 
                fill: {
1411
 
                    color: "#9aa"
1412
 
                },
1413
 
                stroke: {
1414
 
                    weight: 1,
1415
 
                    color: "#000"
1416
 
                }
1417
 
            });
1418
 
     *
1419
 
     * @method addShape
1420
 
     * @param {Object} cfg Object containing the shape's type and attributes. 
1421
 
     * @return Shape
1422
 
     */
1423
 
    /**
1424
 
     * Removes a shape instance from from the graphic instance.
1425
 
     *
1426
 
     * @method removeShape
1427
 
     * @param {Shape|String} shape The instance or id of the shape to be removed.
1428
 
     */
1429
 
    /**
1430
 
     * Removes all shape instances from the dom.
1431
 
     *
1432
 
     * @method removeAllShapes
1433
 
     */
1434
 
    /**
1435
 
     * Returns a shape based on the id of its dom node.
1436
 
     *
1437
 
     * @method getShapeById
1438
 
     * @param {String} id Dom id of the shape's node attribute.
1439
 
     * @return Shape
1440
 
     */
1441
 
        /**
1442
 
         * Allows for creating multiple shapes in order to batch appending and redraw operations.
1443
 
         *
1444
 
         * @method batch
1445
 
         * @param {Function} method Method to execute.
1446
 
         */
1447
 
 
1448
 
 
1449
 
}, '3.4.1' ,{requires:['event-custom', 'node', 'pluginhost']});