diff -r 322d0feea350 -r 89ef5ed3c48b src/cm/media/js/lib/yui/yui_3.10.3/build/graphics/graphics.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/cm/media/js/lib/yui/yui_3.10.3/build/graphics/graphics.js Tue Jul 16 14:29:46 2013 +0200 @@ -0,0 +1,1202 @@ +/* +YUI 3.10.3 (build 2fb5187) +Copyright 2013 Yahoo! Inc. All rights reserved. +Licensed under the BSD License. +http://yuilibrary.com/license/ +*/ + +YUI.add('graphics', function (Y, NAME) { + +/** + * + *

The `Graphics` module provides a JavaScript API for creating shapes in a variety of formats across + * a browser test baseline. + * Based on device and browser capabilities, `Graphics` leverages SVG, + * Canvas and VML + * to render its graphical elements.

+ * + *

The `Graphics` module features a `Graphic` class that allows you to easily create and manage shapes. + * Currently, a `Graphic` instance can be used to create predifined shapes and free-form polygons with fill + * and stroke properties.

+ * + *

The `Graphics` module normalizes an API through the use of alias and implementation classes that share + * interfaces. Each alias class points to an appropriate implementation class dependent on the browser's + * capabilities. There should rarely, if ever, be a need to interact directly with an implementation class.

+ * + *

Below is a list of available classes. + *

+ * You can also extend the `Shape` class to create your own custom shape classes.

+ * @module graphics + * @main graphics + */ +var SETTER = "setter", + PluginHost = Y.Plugin.Host, + VALUE = "value", + VALUEFN = "valueFn", + READONLY = "readOnly", + Y_LANG = Y.Lang, + STR = "string", + WRITE_ONCE = "writeOnce", + GraphicBase, + AttributeLite; + + /** + * AttributeLite provides Attribute-like getters and setters for shape classes in the Graphics module. + * It provides a get/set API without the event infastructure. This class is temporary and a work in progress. + * + * @class AttributeLite + * @constructor + */ + AttributeLite = function() + { + var host = this; // help compression + + // Perf tweak - avoid creating event literals if not required. + host._ATTR_E_FACADE = {}; + + Y.EventTarget.call(this, {emitFacade:true}); + host._state = {}; + host.prototype = Y.mix(AttributeLite.prototype, host.prototype); + }; + + AttributeLite.prototype = { + /** + * Initializes the attributes for a shape. If an attribute config is passed into the constructor of the host, + * the initial values will be overwritten. + * + * @method addAttrs + * @param {Object} cfg Optional object containing attributes key value pairs to be set. + */ + addAttrs: function(cfg) + { + var host = this, + attrConfig = this.constructor.ATTRS, + attr, + i, + fn, + state = host._state; + for(i in attrConfig) + { + if(attrConfig.hasOwnProperty(i)) + { + attr = attrConfig[i]; + if(attr.hasOwnProperty(VALUE)) + { + state[i] = attr.value; + } + else if(attr.hasOwnProperty(VALUEFN)) + { + fn = attr.valueFn; + if(Y_LANG.isString(fn)) + { + state[i] = host[fn].apply(host); + } + else + { + state[i] = fn.apply(host); + } + } + } + } + host._state = state; + for(i in attrConfig) + { + if(attrConfig.hasOwnProperty(i)) + { + attr = attrConfig[i]; + if(attr.hasOwnProperty(READONLY) && attr.readOnly) + { + continue; + } + + if(attr.hasOwnProperty(WRITE_ONCE) && attr.writeOnce) + { + attr.readOnly = true; + } + + if(cfg && cfg.hasOwnProperty(i)) + { + if(attr.hasOwnProperty(SETTER)) + { + host._state[i] = attr.setter.apply(host, [cfg[i]]); + } + else + { + host._state[i] = cfg[i]; + } + } + } + } + }, + + /** + * For a given item, returns the value of the property requested, or undefined if not found. + * + * @method get + * @param name {String} The name of the item + * @return {Any} The value of the supplied property. + */ + get: function(attr) + { + var host = this, + getter, + attrConfig = host.constructor.ATTRS; + if(attrConfig && attrConfig[attr]) + { + getter = attrConfig[attr].getter; + if(getter) + { + if(typeof getter === STR) + { + return host[getter].apply(host); + } + return attrConfig[attr].getter.apply(host); + } + + return host._state[attr]; + } + return null; + }, + + /** + * Sets the value of an attribute. + * + * @method set + * @param {String|Object} name The name of the attribute. Alternatively, an object of key value pairs can + * be passed in to set multiple attributes at once. + * @param {Any} value The value to set the attribute to. This value is ignored if an object is received as + * the name param. + */ + set: function() + { + var attr = arguments[0], + i; + if(Y_LANG.isObject(attr)) + { + for(i in attr) + { + if(attr.hasOwnProperty(i)) + { + this._set(i, attr[i]); + } + } + } + else + { + this._set.apply(this, arguments); + } + }, + + /** + * Provides setter logic. Used by `set`. + * + * @method _set + * @param {String|Object} name The name of the attribute. Alternatively, an object of key value pairs can + * be passed in to set multiple attributes at once. + * @param {Any} value The value to set the attribute to. This value is ignored if an object is received as + * the name param. + * @protected + */ + _set: function(attr, val) + { + var host = this, + setter, + args, + attrConfig = host.constructor.ATTRS; + if(attrConfig && attrConfig.hasOwnProperty(attr)) + { + setter = attrConfig[attr].setter; + if(setter) + { + args = [val]; + if(typeof setter === STR) + { + val = host[setter].apply(host, args); + } + else + { + val = attrConfig[attr].setter.apply(host, args); + } + } + host._state[attr] = val; + } + } + }; + Y.mix(AttributeLite, Y.EventTarget, false, null, 1); + Y.AttributeLite = AttributeLite; + + /** + * GraphicBase serves as the base class for the graphic layer. It serves the same purpose as + * Base but uses a lightweight getter/setter class instead of Attribute. + * This class is temporary and a work in progress. + * + * @class GraphicBase + * @constructor + * @param {Object} cfg Key value pairs for attributes + */ + GraphicBase = function(cfg) + { + var host = this, + PluginHost = Y.Plugin && Y.Plugin.Host; + if (host._initPlugins && PluginHost) { + PluginHost.call(host); + } + + host.name = host.constructor.NAME; + host._eventPrefix = host.constructor.EVENT_PREFIX || host.constructor.NAME; + AttributeLite.call(host); + host.addAttrs(cfg); + host.init.apply(this, arguments); + if (host._initPlugins) { + // Need to initPlugins manually, to handle constructor parsing, static Plug parsing + host._initPlugins(cfg); + } + host.initialized = true; + }; + + GraphicBase.NAME = "baseGraphic"; + + GraphicBase.prototype = { + /** + * Init method, invoked during construction. + * Fires an init event after calling `initializer` on implementers. + * + * @method init + * @protected + */ + init: function() + { + this.publish("init", { + fireOnce:true + }); + this.initializer.apply(this, arguments); + this.fire("init", {cfg: arguments[0]}); + }, + + /** + * Camel case concatanates two strings. + * + * @method _camelCaseConcat + * @param {String} prefix The first string + * @param {String} name The second string + * @return String + * @private + */ + _camelCaseConcat: function(prefix, name) + { + return prefix + name.charAt(0).toUpperCase() + name.slice(1); + } + }; +//Straightup augment, no wrapper functions +Y.mix(GraphicBase, Y.AttributeLite, false, null, 1); +Y.mix(GraphicBase, PluginHost, false, null, 1); +GraphicBase.prototype.constructor = GraphicBase; +GraphicBase.plug = PluginHost.plug; +GraphicBase.unplug = PluginHost.unplug; +Y.GraphicBase = GraphicBase; + + +/** + * `Drawing` provides a set of drawing methods used by `Path` and custom shape classes. + * `Drawing` has the following implementations based on browser capability. + * + * + * @class Drawing + * @constructor + */ + /** + * Draws a line segment using the current line style from the current drawing position to the specified x and y coordinates. + * + * @method lineTo + * @param {Number} point1 x-coordinate for the end point. + * @param {Number} point2 y-coordinate for the end point. + */ + /** + * Moves the current drawing position to specified x and y coordinates. + * + * @method moveTo + * @param {Number} x x-coordinate for the end point. + * @param {Number} y y-coordinate for the end point. + */ + /** + * Draws a bezier curve. + * + * @method curveTo + * @param {Number} cp1x x-coordinate for the first control point. + * @param {Number} cp1y y-coordinate for the first control point. + * @param {Number} cp2x x-coordinate for the second control point. + * @param {Number} cp2y y-coordinate for the second control point. + * @param {Number} x x-coordinate for the end point. + * @param {Number} y y-coordinate for the end point. + */ + /** + * Draws a quadratic bezier curve. + * + * @method quadraticCurveTo + * @param {Number} cpx x-coordinate for the control point. + * @param {Number} cpy y-coordinate for the control point. + * @param {Number} x x-coordinate for the end point. + * @param {Number} y y-coordinate for the end point. + */ + /** + * Draws a rectangle. + * + * @method drawRect + * @param {Number} x x-coordinate + * @param {Number} y y-coordinate + * @param {Number} w width + * @param {Number} h height + */ + /** + * Draws a rectangle with rounded corners. + * + * @method drawRoundRect + * @param {Number} x x-coordinate + * @param {Number} y y-coordinate + * @param {Number} w width + * @param {Number} h height + * @param {Number} ew width of the ellipse used to draw the rounded corners + * @param {Number} eh height of the ellipse used to draw the rounded corners + */ + /** + * Completes a drawing operation. + * + * @method end + */ + /** + * Clears the path. + * + * @method clear + */ +/** + *

Base class for creating shapes.

+ *

`Shape` is an abstract class and is not meant to be used directly. The following classes extend + * `Shape`. + * + *

+ * + * `Shape` can also be extended to create custom shape classes.

+ * + * `Shape` has the following implementations based on browser capability. + * + * + * It is not necessary to interact with these classes directly. `Shape` will point to the appropriate implemention.

+ * + * @class Shape + * @constructor + * @param {Object} cfg (optional) Attribute configs + */ + /** + * Init method, invoked during construction. + * Calls `initializer` method. + * + * @method init + * @protected + */ + /** + * Initializes the shape + * + * @private + * @method initializer + */ + /** + * Add a class name to each node. + * + * @method addClass + * @param {String} className the class name to add to the node's class attribute + */ + /** + * Removes a class name from each node. + * + * @method removeClass + * @param {String} className the class name to remove from the node's class attribute + */ + /** + * Gets the current position of the node in page coordinates. + * + * @method getXY + * @return Array The XY position of the shape. + */ + /** + * Set the position of the shape in page coordinates, regardless of how the node is positioned. + * + * @method setXY + * @param {Array} Contains x & y values for new position (coordinates are page-based) + */ + /** + * Determines whether the node is an ancestor of another HTML element in the DOM hierarchy. + * + * @method contains + * @param {Shape | HTMLElement} needle The possible node or descendent + * @return Boolean Whether or not this shape is the needle or its ancestor. + */ + /** + * Compares nodes to determine if they match. + * Node instances can be compared to each other and/or HTMLElements. + * @method compareTo + * @param {HTMLElement | Node} refNode The reference node to compare to the node. + * @return {Boolean} True if the nodes match, false if they do not. + */ + /** + * Test if the supplied node matches the supplied selector. + * + * @method test + * @param {String} selector The CSS selector to test against. + * @return Boolean Wheter or not the shape matches the selector. + */ + /** + * Sets the value of an attribute. + * + * @method set + * @param {String|Object} name The name of the attribute. Alternatively, an object of key value pairs can + * be passed in to set multiple attributes at once. + * @param {Any} value The value to set the attribute to. This value is ignored if an object is received as + * the name param. + */ + /** + * Specifies a 2d translation. + * + * @method translate + * @param {Number} x The value to transate on the x-axis. + * @param {Number} y The value to translate on the y-axis. + */ + /** + * Translates the shape along the x-axis. When translating x and y coordinates, + * use the `translate` method. + * + * @method translateX + * @param {Number} x The value to translate. + */ + /** + * Translates the shape along the y-axis. When translating x and y coordinates, + * use the `translate` method. + * + * @method translateY + * @param {Number} y The value to translate. + */ + /** + * Skews the shape around the x-axis and y-axis. + * + * @method skew + * @param {Number} x The value to skew on the x-axis. + * @param {Number} y The value to skew on the y-axis. + */ + /** + * Skews the shape around the x-axis. + * + * @method skewX + * @param {Number} x x-coordinate + */ + /** + * Skews the shape around the y-axis. + * + * @method skewY + * @param {Number} y y-coordinate + */ + /** + * Rotates the shape clockwise around it transformOrigin. + * + * @method rotate + * @param {Number} deg The degree of the rotation. + */ + /** + * Specifies a 2d scaling operation. + * + * @method scale + * @param {Number} val + */ + /** + * Returns the bounds for a shape. + * + * Calculates the a new bounding box from the original corner coordinates (base on size and position) and the transform matrix. + * The calculated bounding box is used by the graphic instance to calculate its viewBox. + * + * @method getBounds + * @return Object + */ + /** + * Destroys the instance. + * + * @method destroy + */ + /** + * 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 + * fraction of the shape's corresponding bounding box dimension. The default value is [0.5, 0.5]. + * + * @config transformOrigin + * @type Array + */ + /** + *

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

+ *
rotate
Rotates the shape clockwise around it transformOrigin.
+ *
translate
Specifies a 2d translation.
+ *
skew
Skews the shape around the x-axis and y-axis.
+ *
scale
Specifies a 2d scaling operation.
+ *
translateX
Translates the shape along the x-axis.
+ *
translateY
Translates the shape along the y-axis.
+ *
skewX
Skews the shape around the x-axis.
+ *
skewY
Skews the shape around the y-axis.
+ *
matrix
Specifies a 2D transformation matrix comprised of the specified six values.
+ *
+ *

+ *

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 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.

+ var myRect = new Y.Rect({ + type:"rect", + width: 50, + height: 40, + transform: "rotate(45)" + }; + *

The code below would apply `translate` and `rotate` to an existing shape.

+ + myRect.set("transform", "translate(40, 50) rotate(45)"); + * @config transform + * @type String + */ + /** + * Unique id for class instance. + * + * @config id + * @type String + */ + /** + * Indicates the x position of shape. + * + * @config x + * @type Number + */ + /** + * Indicates the y position of shape. + * + * @config y + * @type Number + */ + /** + * Indicates the width of the shape + * + * @config width + * @type Number + */ + /** + * Indicates the height of the shape + * + * @config height + * @type Number + */ + /** + * Indicates whether the shape is visible. + * + * @config visible + * @type Boolean + */ + /** + * Contains information about the fill of the shape. + *
+ *
color
The color of the fill.
+ *
opacity
Number between 0 and 1 that indicates the opacity of the fill. The default value is 1.
+ *
type
Type of fill. + *
+ *
solid
Solid single color fill. (default)
+ *
linear
Linear gradient fill.
+ *
radial
Radial gradient fill.
+ *
+ *
+ *
+ *

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

+ *
stops
An array of objects containing the following properties: + *
+ *
color
The color of the stop.
+ *
opacity
Number between 0 and 1 that indicates the opacity of the stop. The default value is 1. + * Note: No effect for IE 6 - 8
+ *
offset
Number between 0 and 1 indicating where the color stop is positioned.
+ *
+ *
+ *

Linear gradients also have the following property:

+ *
rotation
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.)
+ *

Radial gradients have the following additional properties:

+ *
r
Radius of the gradient circle.
+ *
fx
Focal point x-coordinate of the gradient.
+ *
fy
Focal point y-coordinate of the gradient.
+ *
cx
+ *

The x-coordinate of the center of the gradient circle. Determines where the color stop begins. The default value 0.5.

+ *

Note: Currently, this property is not implemented for corresponding `CanvasShape` and + * `VMLShape` classes which are used on Android or IE 6 - 8.

+ *
+ *
cy
+ *

The y-coordinate of the center of the gradient circle. Determines where the color stop begins. The default value 0.5.

+ *

Note: Currently, this property is not implemented for corresponding `CanvasShape` and `VMLShape` + * classes which are used on Android or IE 6 - 8.

+ *
+ *
+ * + * @config fill + * @type Object + */ + /** + * Contains information about the stroke of the shape. + *
+ *
color
The color of the stroke.
+ *
weight
Number that indicates the width of the stroke.
+ *
opacity
Number between 0 and 1 that indicates the opacity of the stroke. The default value is 1.
+ *
dashstyle
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 length of the dash. The second index indicates the length of gap. + *
linecap
Specifies the linecap for the stroke. The following values can be specified: + *
+ *
butt (default)
Specifies a butt linecap.
+ *
square
Specifies a sqare linecap.
+ *
round
Specifies a round linecap.
+ *
+ *
+ *
linejoin
Specifies a linejoin for the stroke. The following values can be specified: + *
+ *
round (default)
Specifies that the linejoin will be round.
+ *
bevel
Specifies a bevel for the linejoin.
+ *
miter limit
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 separate miter and miter limit values.
+ *
+ *
+ *
+ * + * @config stroke + * @type Object + */ + /** + * Dom node for the shape. + * + * @config node + * @type HTMLElement + * @readOnly + */ + /** + * Represents an SVG Path string. This will be parsed and added to shape's API to represent the SVG data across all + * implementations. Note that when using VML or SVG implementations, part of this content will be added to the DOM using + * respective VML/SVG attributes. If your content comes from an untrusted source, you will need to ensure that no + * malicious code is included in that content. + * + * @config data + * @type String + */ + /** + * Reference to the parent graphic instance + * + * @config graphic + * @type Graphic + * @readOnly + */ + +/** + *

Creates circle shape with editable attributes.

+ *

`Circle` instances can be created using the `addShape` method of the + * `Graphic` class. The method's `cfg` argument contains a `type` attribute. Assigning "circle" + * or `Y.Circle` to this attribute will create a `Circle` instance. Required attributes for instantiating a `Circle` are + * `type` and `radius`. Optional attributes include: + *

+ * + * The below code creates a circle by defining the `type` attribute as "circle":

+ + var myCircle = myGraphic.addShape({ + type: "circle", + radius: 10, + fill: { + color: "#9aa" + }, + stroke: { + weight: 1, + color: "#000" + } + }); + + * Below, this same circle is created by defining the `type` attribute with a class reference: + * + var myCircle = myGraphic.addShape({ + type: Y.Circle, + radius: 10, + fill: { + color: "#9aa" + }, + stroke: { + weight: 1, + color: "#000" + } + }); + * + *

`Circle` has the following implementations based on browser capability. + *

+ * + * It is not necessary to interact with these classes directly. `Circle` will point to the appropriate implemention.

+ * + * @class Circle + * @extends Shape + * @constructor + */ + /** + * Radius of the circle + * + * @config radius + * @type Number + */ +/** + *

Creates an ellipse shape with editable attributes.

+ *

`Ellipse` instances can be created using the `addShape` method of the + * `Graphic` class. The method's `cfg` argument contains a `type` attribute. Assigning "ellipse" + * or `Y.Ellipse` to this attribute will create a `Ellipse` instance. Required attributes for instantiating a `Ellipse` are + * `type`, `width` and `height`. Optional attributes include: + *

+ * + * The below code creates an ellipse by defining the `type` attribute as "ellipse":

+ + var myEllipse = myGraphic.addShape({ + type: "ellipse", + width: 20, + height: 10, + fill: { + color: "#9aa" + }, + stroke: { + weight: 1, + color: "#000" + } + }); + + * Below, the same ellipse is created by defining the `type` attribute with a class reference: + * + var myEllipse = myGraphic.addShape({ + type: Y.Ellipse, + width: 20, + height: 10, + fill: { + color: "#9aa" + }, + stroke: { + weight: 1, + color: "#000" + } + }); + * + *

`Ellipse` has the following implementations based on browser capability. + *

+ * + * It is not necessary to interact with these classes directly. `Ellipse` will point to the appropriate implemention.

+ * + * @class Ellipse + * @extends Shape + * @constructor + */ +/** + *

Creates an rectangle shape with editable attributes.

+ *

`Rect` instances can be created using the `addShape` method of the + * `Graphic` class. The method's `cfg` argument contains a `type` attribute. Assigning "rect" + * or `Y.Rect` to this attribute will create a `Rect` instance. Required attributes for instantiating a `Rect` are `type`, + * `width` and `height`. Optional attributes include: + *

+ * + * The below code creates a rectangle by defining the `type` attribute as "rect":

+ + var myRect = myGraphic.addShape({ + type: "rect", + width: 20, + height: 10, + fill: { + color: "#9aa" + }, + stroke: { + weight: 1, + color: "#000" + } + }); + + * Below, the same rectangle is created by defining the `type` attribute with a class reference: + * + var myRect = myGraphic.addShape({ + type: Y.Rect, + width: 20, + height: 10, + fill: { + color: "#9aa" + }, + stroke: { + weight: 1, + color: "#000" + } + }); + * + *

`Rect` has the following implementations based on browser capability. + *

+ * + * It is not necessary to interact with these classes directly. `Rect` will point to the appropriate implemention.

+ * + * @class Rect + * @extends Shape + * @constructor + */ +/** + *

The `Path` class creates a shape through the use of drawing methods. The `Path` class has the following drawing methods available:

+ * + * + *

Like other shapes, `Path` elements are created using the `addShape` + * method of the `Graphic` class. The method's `cfg` argument contains a `type` attribute. + * Assigning "path" or `Y.Path` to this attribute will create a `Path` instance. 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` attribute as "path":

+ + var myPath = myGraphic.addShape({ + type: "path", + fill: { + color: "#9aa" + }, + stroke: { + weight: 1, + color: "#000" + } + }); + + * Below a `Path` element with the same properties is instantiated by defining the `type` attribute with a class reference: + * + var myPath = myGraphic.addShape({ + type: Y.Path, + fill: { + color: "#9aa" + }, + stroke: { + weight: 1, + color: "#000" + } + }); + + * After instantiation, a shape or segment needs to be drawn for an element to render. After all draw operations are performed, + * the `end` method will render the shape. The code below will draw a triangle: + + myPath.moveTo(35, 5); + myPath.lineTo(65, 65); + myPath.lineTo(5, 65); + myPath.lineTo(35, 5); + myPath.end(); + * + *

`Path` has the following implementations based on browser capability. + *

+ * It is not necessary to interact with these classes directly. `Path` will point to the appropriate implemention.

+ * + * @class Path + * @extends Shape + * @uses Drawing + * @constructor + */ + /** + * Indicates the path used for the node. + * + * @config path + * @type String + * @readOnly + */ +/** + * `Graphic` acts a factory and container for shapes. You need at least one `Graphic` instance to create shapes for your application. + *

The code block below creates a `Graphic` instance and appends it to an HTMLElement with the id 'mygraphiccontainer'.

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

Alternatively, you can add a `Graphic` instance to the DOM using the `render` method.

+ var myGraphic = new Y.Graphic(); + myGraphic.render("#mygraphiccontainer"); + + * `Graphic` has the following implementations based on browser capability. + * + * + * It is not necessary to interact with these classes directly. `Graphic` will point to the appropriate implemention.

+ * + * @class Graphic + * @constructor + */ + /** + * 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. + * + * @config render + * @type Node | String + */ + /** + * Unique id for class instance. + * + * @config id + * @type String + */ + /** + * Key value pairs in which a shape instance is associated with its id. + * + * @config shapes + * @type Object + * @readOnly + */ + /** + * Object containing size and coordinate data for the content of a Graphic in relation to the coordSpace node. + * + * @config contentBounds + * @type Object + * @readOnly + */ + /** + * The html element that represents to coordinate system of the Graphic instance. + * + * @config node + * @type HTMLElement + * @readOnly + */ + /** + * Indicates the width of the `Graphic`. + * + * @config width + * @type Number + */ + /** + * Indicates the height of the `Graphic`. + * + * @config height + * @type Number + */ + /** + * Determines the sizing of the Graphic. + * + *
+ *
sizeContentToGraphic
The Graphic's width and height attributes are, either explicitly set through the + * width and height attributes or are determined by the dimensions of the parent element. The + * content contained in the Graphic will be sized to fit with in the Graphic instance's dimensions. When using this + * setting, the preserveAspectRatio attribute will determine how the contents are sized.
+ *
sizeGraphicToContent
(Also accepts a value of true) The Graphic's width and height are determined by the + * size and positioning of the content.
+ *
false
The Graphic's width and height attributes are, either explicitly set through the width + * and height attributes or are determined by the dimensions of the parent element. The contents of the + * Graphic instance are not affected by this setting.
+ *
+ * + * + * @config autoSize + * @type Boolean | String + * @default false + */ + /** + * Determines how content is sized when autoSize is set to sizeContentToGraphic. + * + *
+ *
none
Do not force uniform scaling. Scale the graphic content of the given element non-uniformly if necessary + * such that the element's bounding box exactly matches the viewport rectangle.
+ *
xMinYMin
Force uniform scaling position along the top left of the Graphic's node.
+ *
xMidYMin
Force uniform scaling horizontally centered and positioned at the top of the Graphic's node.
+ *
xMaxYMin
Force uniform scaling positioned horizontally from the right and vertically from the top.
+ *
xMinYMid
Force uniform scaling positioned horizontally from the left and vertically centered. + *
xMidYMid (the default)
Force uniform scaling with the content centered.
+ *
xMaxYMid
Force uniform scaling positioned horizontally from the right and vertically centered.
+ *
xMinYMax
Force uniform scaling positioned horizontally from the left and vertically from the bottom.
+ *
xMidYMax
Force uniform scaling horizontally centered and position vertically from the bottom.
+ *
xMaxYMax
Force uniform scaling positioned horizontally from the right and vertically from the bottom.
+ *
+ * + * @config preserveAspectRatio + * @type String + * @default xMidYMid + */ + /** + * The contentBounds will resize to greater values but not to smaller values. (for performance) + * When resizing the contentBounds down is desirable, set the resizeDown value to true. + * + * @config resizeDown + * @type Boolean + */ + /** + * Indicates the x-coordinate for the instance. + * + * @config x + * @type Number + */ + /** + * Indicates the y-coordinate for the instance. + * + * @config y + * @type Number + */ + /** + * Indicates whether or not the instance will automatically redraw after a change is made to a shape. + * This property will get set to false when batching operations. + * + * @config autoDraw + * @type Boolean + * @default true + * @private + */ + /** + * Indicates whether the `Graphic` and its children are visible. + * + * @config visible + * @type Boolean + */ + /** + * Gets the current position of the graphic instance in page coordinates. + * + * @method getXY + * @return Array The XY position of the shape. + */ + /** + * Adds the graphics node to the dom. + * + * @method render + * @param {Node|String} parentNode node in which to render the graphics node into. + */ + /** + * Removes all nodes. + * + * @method destroy + */ + /** + *

Generates a shape instance by type. The method accepts an object that contain's the shape's + * type and attributes to be customized. For example, the code below would create a rectangle:

+ * + var myRect = myGraphic.addShape({ + type: "rect", + width: 40, + height: 30, + fill: { + color: "#9aa" + }, + stroke: { + weight: 1, + color: "#000" + } + }); + * + *

The `Graphics` module includes a few basic shapes. More information on their creation + * can be found in each shape's documentation: + * + *

+ * + * The `Graphics` module also allows for the creation of custom shapes. If a custom shape + * has been created, it can be instantiated with the `addShape` method as well. The attributes, + * required and optional, would need to be defined in the custom shape. + * + var myCustomShape = myGraphic.addShape({ + type: Y.MyCustomShape, + width: 50, + height: 50, + fill: { + color: "#9aa" + }, + stroke: { + weight: 1, + color: "#000" + } + }); + * + * @method addShape + * @param {Object} cfg Object containing the shape's type and attributes. + * @return Shape + */ + /** + * Removes a shape instance from from the graphic instance. + * + * @method removeShape + * @param {Shape|String} shape The instance or id of the shape to be removed. + */ + /** + * Removes all shape instances from the dom. + * + * @method removeAllShapes + */ + /** + * Returns a shape based on the id of its dom node. + * + * @method getShapeById + * @param {String} id Dom id of the shape's node attribute. + * @return Shape + */ + /** + * Allows for creating multiple shapes in order to batch appending and redraw operations. + * + * @method batch + * @param {Function} method Method to execute. + */ + + +}, '3.10.3', {"requires": ["node", "event-custom", "pluginhost", "matrix", "classnamemanager"]});