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