|
525
|
1 |
/* |
|
|
2 |
YUI 3.10.3 (build 2fb5187) |
|
|
3 |
Copyright 2013 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 line segment using the current line style from the current drawing position to the specified x and y coordinates. |
|
|
320 |
* |
|
|
321 |
* @method lineTo |
|
|
322 |
* @param {Number} point1 x-coordinate for the end point. |
|
|
323 |
* @param {Number} point2 y-coordinate for the end point. |
|
|
324 |
*/ |
|
|
325 |
/** |
|
|
326 |
* Moves the current drawing position to specified x and y coordinates. |
|
|
327 |
* |
|
|
328 |
* @method moveTo |
|
|
329 |
* @param {Number} x x-coordinate for the end point. |
|
|
330 |
* @param {Number} y y-coordinate for the end point. |
|
|
331 |
*/ |
|
|
332 |
/** |
|
|
333 |
* Draws a bezier curve. |
|
|
334 |
* |
|
|
335 |
* @method curveTo |
|
|
336 |
* @param {Number} cp1x x-coordinate for the first control point. |
|
|
337 |
* @param {Number} cp1y y-coordinate for the first control point. |
|
|
338 |
* @param {Number} cp2x x-coordinate for the second control point. |
|
|
339 |
* @param {Number} cp2y y-coordinate for the second control point. |
|
|
340 |
* @param {Number} x x-coordinate for the end point. |
|
|
341 |
* @param {Number} y y-coordinate for the end point. |
|
|
342 |
*/ |
|
|
343 |
/** |
|
|
344 |
* Draws a quadratic bezier curve. |
|
|
345 |
* |
|
|
346 |
* @method quadraticCurveTo |
|
|
347 |
* @param {Number} cpx x-coordinate for the control point. |
|
|
348 |
* @param {Number} cpy y-coordinate for the control point. |
|
|
349 |
* @param {Number} x x-coordinate for the end point. |
|
|
350 |
* @param {Number} y y-coordinate for the end point. |
|
|
351 |
*/ |
|
|
352 |
/** |
|
|
353 |
* Draws a rectangle. |
|
|
354 |
* |
|
|
355 |
* @method drawRect |
|
|
356 |
* @param {Number} x x-coordinate |
|
|
357 |
* @param {Number} y y-coordinate |
|
|
358 |
* @param {Number} w width |
|
|
359 |
* @param {Number} h height |
|
|
360 |
*/ |
|
|
361 |
/** |
|
|
362 |
* Draws a rectangle with rounded corners. |
|
|
363 |
* |
|
|
364 |
* @method drawRoundRect |
|
|
365 |
* @param {Number} x x-coordinate |
|
|
366 |
* @param {Number} y y-coordinate |
|
|
367 |
* @param {Number} w width |
|
|
368 |
* @param {Number} h height |
|
|
369 |
* @param {Number} ew width of the ellipse used to draw the rounded corners |
|
|
370 |
* @param {Number} eh height of the ellipse used to draw the rounded corners |
|
|
371 |
*/ |
|
|
372 |
/** |
|
|
373 |
* Completes a drawing operation. |
|
|
374 |
* |
|
|
375 |
* @method end |
|
|
376 |
*/ |
|
|
377 |
/** |
|
|
378 |
* Clears the path. |
|
|
379 |
* |
|
|
380 |
* @method clear |
|
|
381 |
*/ |
|
|
382 |
/** |
|
|
383 |
* <p>Base class for creating shapes.</p> |
|
|
384 |
* <p>`Shape` is an abstract class and is not meant to be used directly. The following classes extend |
|
|
385 |
* `Shape`. |
|
|
386 |
* |
|
|
387 |
* <ul> |
|
|
388 |
* <li><a href="Circle.html">`Circle`</a></li> |
|
|
389 |
* <li><a href="Ellipse.html">`Ellipse`</a></li> |
|
|
390 |
* <li><a href="Rect.html">`Rect`</a></li> |
|
|
391 |
* <li><a href="Path.html">`Path`</a></li> |
|
|
392 |
* </ul> |
|
|
393 |
* |
|
|
394 |
* `Shape` can also be extended to create custom shape classes.</p> |
|
|
395 |
* |
|
|
396 |
* `Shape` has the following implementations based on browser capability. |
|
|
397 |
* <ul> |
|
|
398 |
* <li><a href="SVGShape.html">`SVGShape`</a></li> |
|
|
399 |
* <li><a href="VMLShape.html">`VMLShape`</a></li> |
|
|
400 |
* <li><a href="CanvasShape.html">`CanvasShape`</a></li> |
|
|
401 |
* </ul> |
|
|
402 |
* |
|
|
403 |
* It is not necessary to interact with these classes directly. `Shape` will point to the appropriate implemention.</p> |
|
|
404 |
* |
|
|
405 |
* @class Shape |
|
|
406 |
* @constructor |
|
|
407 |
* @param {Object} cfg (optional) Attribute configs |
|
|
408 |
*/ |
|
|
409 |
/** |
|
|
410 |
* Init method, invoked during construction. |
|
|
411 |
* Calls `initializer` method. |
|
|
412 |
* |
|
|
413 |
* @method init |
|
|
414 |
* @protected |
|
|
415 |
*/ |
|
|
416 |
/** |
|
|
417 |
* Initializes the shape |
|
|
418 |
* |
|
|
419 |
* @private |
|
|
420 |
* @method initializer |
|
|
421 |
*/ |
|
|
422 |
/** |
|
|
423 |
* Add a class name to each node. |
|
|
424 |
* |
|
|
425 |
* @method addClass |
|
|
426 |
* @param {String} className the class name to add to the node's class attribute |
|
|
427 |
*/ |
|
|
428 |
/** |
|
|
429 |
* Removes a class name from each node. |
|
|
430 |
* |
|
|
431 |
* @method removeClass |
|
|
432 |
* @param {String} className the class name to remove from the node's class attribute |
|
|
433 |
*/ |
|
|
434 |
/** |
|
|
435 |
* Gets the current position of the node in page coordinates. |
|
|
436 |
* |
|
|
437 |
* @method getXY |
|
|
438 |
* @return Array The XY position of the shape. |
|
|
439 |
*/ |
|
|
440 |
/** |
|
|
441 |
* Set the position of the shape in page coordinates, regardless of how the node is positioned. |
|
|
442 |
* |
|
|
443 |
* @method setXY |
|
|
444 |
* @param {Array} Contains x & y values for new position (coordinates are page-based) |
|
|
445 |
*/ |
|
|
446 |
/** |
|
|
447 |
* Determines whether the node is an ancestor of another HTML element in the DOM hierarchy. |
|
|
448 |
* |
|
|
449 |
* @method contains |
|
|
450 |
* @param {Shape | HTMLElement} needle The possible node or descendent |
|
|
451 |
* @return Boolean Whether or not this shape is the needle or its ancestor. |
|
|
452 |
*/ |
|
|
453 |
/** |
|
|
454 |
* Compares nodes to determine if they match. |
|
|
455 |
* Node instances can be compared to each other and/or HTMLElements. |
|
|
456 |
* @method compareTo |
|
|
457 |
* @param {HTMLElement | Node} refNode The reference node to compare to the node. |
|
|
458 |
* @return {Boolean} True if the nodes match, false if they do not. |
|
|
459 |
*/ |
|
|
460 |
/** |
|
|
461 |
* Test if the supplied node matches the supplied selector. |
|
|
462 |
* |
|
|
463 |
* @method test |
|
|
464 |
* @param {String} selector The CSS selector to test against. |
|
|
465 |
* @return Boolean Wheter or not the shape matches the selector. |
|
|
466 |
*/ |
|
|
467 |
/** |
|
|
468 |
* Sets the value of an attribute. |
|
|
469 |
* |
|
|
470 |
* @method set |
|
|
471 |
* @param {String|Object} name The name of the attribute. Alternatively, an object of key value pairs can |
|
|
472 |
* be passed in to set multiple attributes at once. |
|
|
473 |
* @param {Any} value The value to set the attribute to. This value is ignored if an object is received as |
|
|
474 |
* the name param. |
|
|
475 |
*/ |
|
|
476 |
/** |
|
|
477 |
* Specifies a 2d translation. |
|
|
478 |
* |
|
|
479 |
* @method translate |
|
|
480 |
* @param {Number} x The value to transate on the x-axis. |
|
|
481 |
* @param {Number} y The value to translate on the y-axis. |
|
|
482 |
*/ |
|
|
483 |
/** |
|
|
484 |
* Translates the shape along the x-axis. When translating x and y coordinates, |
|
|
485 |
* use the `translate` method. |
|
|
486 |
* |
|
|
487 |
* @method translateX |
|
|
488 |
* @param {Number} x The value to translate. |
|
|
489 |
*/ |
|
|
490 |
/** |
|
|
491 |
* Translates the shape along the y-axis. When translating x and y coordinates, |
|
|
492 |
* use the `translate` method. |
|
|
493 |
* |
|
|
494 |
* @method translateY |
|
|
495 |
* @param {Number} y The value to translate. |
|
|
496 |
*/ |
|
|
497 |
/** |
|
|
498 |
* Skews the shape around the x-axis and y-axis. |
|
|
499 |
* |
|
|
500 |
* @method skew |
|
|
501 |
* @param {Number} x The value to skew on the x-axis. |
|
|
502 |
* @param {Number} y The value to skew on the y-axis. |
|
|
503 |
*/ |
|
|
504 |
/** |
|
|
505 |
* Skews the shape around the x-axis. |
|
|
506 |
* |
|
|
507 |
* @method skewX |
|
|
508 |
* @param {Number} x x-coordinate |
|
|
509 |
*/ |
|
|
510 |
/** |
|
|
511 |
* Skews the shape around the y-axis. |
|
|
512 |
* |
|
|
513 |
* @method skewY |
|
|
514 |
* @param {Number} y y-coordinate |
|
|
515 |
*/ |
|
|
516 |
/** |
|
|
517 |
* Rotates the shape clockwise around it transformOrigin. |
|
|
518 |
* |
|
|
519 |
* @method rotate |
|
|
520 |
* @param {Number} deg The degree of the rotation. |
|
|
521 |
*/ |
|
|
522 |
/** |
|
|
523 |
* Specifies a 2d scaling operation. |
|
|
524 |
* |
|
|
525 |
* @method scale |
|
|
526 |
* @param {Number} val |
|
|
527 |
*/ |
|
|
528 |
/** |
|
|
529 |
* Returns the bounds for a shape. |
|
|
530 |
* |
|
|
531 |
* Calculates the a new bounding box from the original corner coordinates (base on size and position) and the transform matrix. |
|
|
532 |
* The calculated bounding box is used by the graphic instance to calculate its viewBox. |
|
|
533 |
* |
|
|
534 |
* @method getBounds |
|
|
535 |
* @return Object |
|
|
536 |
*/ |
|
|
537 |
/** |
|
|
538 |
* Destroys the instance. |
|
|
539 |
* |
|
|
540 |
* @method destroy |
|
|
541 |
*/ |
|
|
542 |
/** |
|
|
543 |
* 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 |
|
|
544 |
* fraction of the shape's corresponding bounding box dimension. The default value is [0.5, 0.5]. |
|
|
545 |
* |
|
|
546 |
* @config transformOrigin |
|
|
547 |
* @type Array |
|
|
548 |
*/ |
|
|
549 |
/** |
|
|
550 |
* <p>A string containing, in order, transform operations applied to the shape instance. The `transform` string can contain the following values: |
|
|
551 |
* |
|
|
552 |
* <dl> |
|
|
553 |
* <dt>rotate</dt><dd>Rotates the shape clockwise around it transformOrigin.</dd> |
|
|
554 |
* <dt>translate</dt><dd>Specifies a 2d translation.</dd> |
|
|
555 |
* <dt>skew</dt><dd>Skews the shape around the x-axis and y-axis.</dd> |
|
|
556 |
* <dt>scale</dt><dd>Specifies a 2d scaling operation.</dd> |
|
|
557 |
* <dt>translateX</dt><dd>Translates the shape along the x-axis.</dd> |
|
|
558 |
* <dt>translateY</dt><dd>Translates the shape along the y-axis.</dd> |
|
|
559 |
* <dt>skewX</dt><dd>Skews the shape around the x-axis.</dd> |
|
|
560 |
* <dt>skewY</dt><dd>Skews the shape around the y-axis.</dd> |
|
|
561 |
* <dt>matrix</dt><dd>Specifies a 2D transformation matrix comprised of the specified six values.</dd> |
|
|
562 |
* </dl> |
|
|
563 |
* </p> |
|
|
564 |
* <p>Applying transforms through the transform attribute will reset the transform matrix and apply a new transform. The shape class also contains |
|
|
565 |
* corresponding methods for each transform that will apply the transform to the current matrix. The below code illustrates how you might use the |
|
|
566 |
* `transform` attribute to instantiate a recangle with a rotation of 45 degrees.</p> |
|
|
567 |
var myRect = new Y.Rect({ |
|
|
568 |
type:"rect", |
|
|
569 |
width: 50, |
|
|
570 |
height: 40, |
|
|
571 |
transform: "rotate(45)" |
|
|
572 |
}; |
|
|
573 |
* <p>The code below would apply `translate` and `rotate` to an existing shape.</p> |
|
|
574 |
|
|
|
575 |
myRect.set("transform", "translate(40, 50) rotate(45)"); |
|
|
576 |
* @config transform |
|
|
577 |
* @type String |
|
|
578 |
*/ |
|
|
579 |
/** |
|
|
580 |
* Unique id for class instance. |
|
|
581 |
* |
|
|
582 |
* @config id |
|
|
583 |
* @type String |
|
|
584 |
*/ |
|
|
585 |
/** |
|
|
586 |
* Indicates the x position of shape. |
|
|
587 |
* |
|
|
588 |
* @config x |
|
|
589 |
* @type Number |
|
|
590 |
*/ |
|
|
591 |
/** |
|
|
592 |
* Indicates the y position of shape. |
|
|
593 |
* |
|
|
594 |
* @config y |
|
|
595 |
* @type Number |
|
|
596 |
*/ |
|
|
597 |
/** |
|
|
598 |
* Indicates the width of the shape |
|
|
599 |
* |
|
|
600 |
* @config width |
|
|
601 |
* @type Number |
|
|
602 |
*/ |
|
|
603 |
/** |
|
|
604 |
* Indicates the height of the shape |
|
|
605 |
* |
|
|
606 |
* @config height |
|
|
607 |
* @type Number |
|
|
608 |
*/ |
|
|
609 |
/** |
|
|
610 |
* Indicates whether the shape is visible. |
|
|
611 |
* |
|
|
612 |
* @config visible |
|
|
613 |
* @type Boolean |
|
|
614 |
*/ |
|
|
615 |
/** |
|
|
616 |
* Contains information about the fill of the shape. |
|
|
617 |
* <dl> |
|
|
618 |
* <dt>color</dt><dd>The color of the fill.</dd> |
|
|
619 |
* <dt>opacity</dt><dd>Number between 0 and 1 that indicates the opacity of the fill. The default value is 1.</dd> |
|
|
620 |
* <dt>type</dt><dd>Type of fill. |
|
|
621 |
* <dl> |
|
|
622 |
* <dt>solid</dt><dd>Solid single color fill. (default)</dd> |
|
|
623 |
* <dt>linear</dt><dd>Linear gradient fill.</dd> |
|
|
624 |
* <dt>radial</dt><dd>Radial gradient fill.</dd> |
|
|
625 |
* </dl> |
|
|
626 |
* </dd> |
|
|
627 |
* </dl> |
|
|
628 |
* <p>If a `linear` or `radial` is specified as the fill type. The following additional property is used: |
|
|
629 |
* <dl> |
|
|
630 |
* <dt>stops</dt><dd>An array of objects containing the following properties: |
|
|
631 |
* <dl> |
|
|
632 |
* <dt>color</dt><dd>The color of the stop.</dd> |
|
|
633 |
* <dt>opacity</dt><dd>Number between 0 and 1 that indicates the opacity of the stop. The default value is 1. |
|
|
634 |
* Note: No effect for IE 6 - 8</dd> |
|
|
635 |
* <dt>offset</dt><dd>Number between 0 and 1 indicating where the color stop is positioned.</dd> |
|
|
636 |
* </dl> |
|
|
637 |
* </dd> |
|
|
638 |
* <p>Linear gradients also have the following property:</p> |
|
|
639 |
* <dt>rotation</dt><dd>Linear gradients flow left to right by default. The rotation property allows you to change the |
|
|
640 |
* flow by rotation. (e.g. A rotation of 180 would make the gradient pain from right to left.)</dd> |
|
|
641 |
* <p>Radial gradients have the following additional properties:</p> |
|
|
642 |
* <dt>r</dt><dd>Radius of the gradient circle.</dd> |
|
|
643 |
* <dt>fx</dt><dd>Focal point x-coordinate of the gradient.</dd> |
|
|
644 |
* <dt>fy</dt><dd>Focal point y-coordinate of the gradient.</dd> |
|
|
645 |
* <dt>cx</dt><dd> |
|
|
646 |
* <p>The x-coordinate of the center of the gradient circle. Determines where the color stop begins. The default value 0.5.</p> |
|
|
647 |
* <p><strong>Note: </strong>Currently, this property is not implemented for corresponding `CanvasShape` and |
|
|
648 |
* `VMLShape` classes which are used on Android or IE 6 - 8.</p> |
|
|
649 |
* </dd> |
|
|
650 |
* <dt>cy</dt><dd> |
|
|
651 |
* <p>The y-coordinate of the center of the gradient circle. Determines where the color stop begins. The default value 0.5.</p> |
|
|
652 |
* <p><strong>Note: </strong>Currently, this property is not implemented for corresponding `CanvasShape` and `VMLShape` |
|
|
653 |
* classes which are used on Android or IE 6 - 8.</p> |
|
|
654 |
* </dd> |
|
|
655 |
* </dl> |
|
|
656 |
* |
|
|
657 |
* @config fill |
|
|
658 |
* @type Object |
|
|
659 |
*/ |
|
|
660 |
/** |
|
|
661 |
* Contains information about the stroke of the shape. |
|
|
662 |
* <dl> |
|
|
663 |
* <dt>color</dt><dd>The color of the stroke.</dd> |
|
|
664 |
* <dt>weight</dt><dd>Number that indicates the width of the stroke.</dd> |
|
|
665 |
* <dt>opacity</dt><dd>Number between 0 and 1 that indicates the opacity of the stroke. The default value is 1.</dd> |
|
|
666 |
* <dt>dashstyle</dt>Indicates whether to draw a dashed stroke. When set to "none", a solid stroke is drawn. When set |
|
|
667 |
* to an array, the first index indicates the length of the dash. The second index indicates the length of gap. |
|
|
668 |
* <dt>linecap</dt><dd>Specifies the linecap for the stroke. The following values can be specified: |
|
|
669 |
* <dl> |
|
|
670 |
* <dt>butt (default)</dt><dd>Specifies a butt linecap.</dd> |
|
|
671 |
* <dt>square</dt><dd>Specifies a sqare linecap.</dd> |
|
|
672 |
* <dt>round</dt><dd>Specifies a round linecap.</dd> |
|
|
673 |
* </dl> |
|
|
674 |
* </dd> |
|
|
675 |
* <dt>linejoin</dt><dd>Specifies a linejoin for the stroke. The following values can be specified: |
|
|
676 |
* <dl> |
|
|
677 |
* <dt>round (default)</dt><dd>Specifies that the linejoin will be round.</dd> |
|
|
678 |
* <dt>bevel</dt><dd>Specifies a bevel for the linejoin.</dd> |
|
|
679 |
* <dt>miter limit</dt><dd>An integer specifying the miter limit of a miter linejoin. If you want to specify a linejoin |
|
|
680 |
* of miter, you simply specify the limit as opposed to having separate miter and miter limit values.</dd> |
|
|
681 |
* </dl> |
|
|
682 |
* </dd> |
|
|
683 |
* </dl> |
|
|
684 |
* |
|
|
685 |
* @config stroke |
|
|
686 |
* @type Object |
|
|
687 |
*/ |
|
|
688 |
/** |
|
|
689 |
* Dom node for the shape. |
|
|
690 |
* |
|
|
691 |
* @config node |
|
|
692 |
* @type HTMLElement |
|
|
693 |
* @readOnly |
|
|
694 |
*/ |
|
|
695 |
/** |
|
|
696 |
* Represents an SVG Path string. This will be parsed and added to shape's API to represent the SVG data across all |
|
|
697 |
* implementations. Note that when using VML or SVG implementations, part of this content will be added to the DOM using |
|
|
698 |
* respective VML/SVG attributes. If your content comes from an untrusted source, you will need to ensure that no |
|
|
699 |
* malicious code is included in that content. |
|
|
700 |
* |
|
|
701 |
* @config data |
|
|
702 |
* @type String |
|
|
703 |
*/ |
|
|
704 |
/** |
|
|
705 |
* Reference to the parent graphic instance |
|
|
706 |
* |
|
|
707 |
* @config graphic |
|
|
708 |
* @type Graphic |
|
|
709 |
* @readOnly |
|
|
710 |
*/ |
|
|
711 |
|
|
|
712 |
/** |
|
|
713 |
* <p>Creates circle shape with editable attributes.</p> |
|
|
714 |
* <p>`Circle` instances can be created using the <a href="Graphic.html#method_addShape">`addShape`</a> method of the |
|
|
715 |
* <a href="Graphic.html">`Graphic`</a> class. The method's `cfg` argument contains a `type` attribute. Assigning "circle" |
|
|
716 |
* or `Y.Circle` to this attribute will create a `Circle` instance. Required attributes for instantiating a `Circle` are |
|
|
717 |
* `type` and `radius`. Optional attributes include: |
|
|
718 |
* <ul> |
|
|
719 |
* <li><a href="#attr_fill">fill</a></li> |
|
|
720 |
* <li><a href="#attr_id">id</a></li> |
|
|
721 |
* <li><a href="#attr_stroke">stroke</a></li> |
|
|
722 |
* <li><a href="#attr_transform">transform</a></li> |
|
|
723 |
* <li><a href="#attr_transformOrigin">transformOrigin</a></li> |
|
|
724 |
* <li><a href="#attr_visible">visible</a></li> |
|
|
725 |
* <li><a href="#attr_x">x</a></li> |
|
|
726 |
* <li><a href="#attr_y">y</a></li> |
|
|
727 |
* </ul> |
|
|
728 |
* |
|
|
729 |
* The below code creates a circle by defining the `type` attribute as "circle":</p> |
|
|
730 |
|
|
|
731 |
var myCircle = myGraphic.addShape({ |
|
|
732 |
type: "circle", |
|
|
733 |
radius: 10, |
|
|
734 |
fill: { |
|
|
735 |
color: "#9aa" |
|
|
736 |
}, |
|
|
737 |
stroke: { |
|
|
738 |
weight: 1, |
|
|
739 |
color: "#000" |
|
|
740 |
} |
|
|
741 |
}); |
|
|
742 |
|
|
|
743 |
* Below, this same circle is created by defining the `type` attribute with a class reference: |
|
|
744 |
* |
|
|
745 |
var myCircle = myGraphic.addShape({ |
|
|
746 |
type: Y.Circle, |
|
|
747 |
radius: 10, |
|
|
748 |
fill: { |
|
|
749 |
color: "#9aa" |
|
|
750 |
}, |
|
|
751 |
stroke: { |
|
|
752 |
weight: 1, |
|
|
753 |
color: "#000" |
|
|
754 |
} |
|
|
755 |
}); |
|
|
756 |
* |
|
|
757 |
* <p>`Circle` has the following implementations based on browser capability. |
|
|
758 |
* <ul> |
|
|
759 |
* <li><a href="SVGCircle.html">`SVGCircle`</a></li> |
|
|
760 |
* <li><a href="VMLCircle.html">`VMLCircle`</a></li> |
|
|
761 |
* <li><a href="CanvasCircle.html">`CanvasCircle`</a></li> |
|
|
762 |
* </ul> |
|
|
763 |
* |
|
|
764 |
* It is not necessary to interact with these classes directly. `Circle` will point to the appropriate implemention.</p> |
|
|
765 |
* |
|
|
766 |
* @class Circle |
|
|
767 |
* @extends Shape |
|
|
768 |
* @constructor |
|
|
769 |
*/ |
|
|
770 |
/** |
|
|
771 |
* Radius of the circle |
|
|
772 |
* |
|
|
773 |
* @config radius |
|
|
774 |
* @type Number |
|
|
775 |
*/ |
|
|
776 |
/** |
|
|
777 |
* <p>Creates an ellipse shape with editable attributes.</p> |
|
|
778 |
* <p>`Ellipse` instances can be created using the <a href="Graphic.html#method_addShape">`addShape`</a> method of the |
|
|
779 |
* <a href="Graphic.html">`Graphic`</a> class. The method's `cfg` argument contains a `type` attribute. Assigning "ellipse" |
|
|
780 |
* or `Y.Ellipse` to this attribute will create a `Ellipse` instance. Required attributes for instantiating a `Ellipse` are |
|
|
781 |
* `type`, `width` and `height`. Optional attributes include: |
|
|
782 |
* <ul> |
|
|
783 |
* <li><a href="#attr_fill">fill</a></li> |
|
|
784 |
* <li><a href="#attr_id">id</a></li> |
|
|
785 |
* <li><a href="#attr_stroke">stroke</a></li> |
|
|
786 |
* <li><a href="#attr_transform">transform</a></li> |
|
|
787 |
* <li><a href="#attr_transformOrigin">transformOrigin</a></li> |
|
|
788 |
* <li><a href="#attr_visible">visible</a></li> |
|
|
789 |
* <li><a href="#attr_x">x</a></li> |
|
|
790 |
* <li><a href="#attr_y">y</a></li> |
|
|
791 |
* </ul> |
|
|
792 |
* |
|
|
793 |
* The below code creates an ellipse by defining the `type` attribute as "ellipse":</p> |
|
|
794 |
|
|
|
795 |
var myEllipse = myGraphic.addShape({ |
|
|
796 |
type: "ellipse", |
|
|
797 |
width: 20, |
|
|
798 |
height: 10, |
|
|
799 |
fill: { |
|
|
800 |
color: "#9aa" |
|
|
801 |
}, |
|
|
802 |
stroke: { |
|
|
803 |
weight: 1, |
|
|
804 |
color: "#000" |
|
|
805 |
} |
|
|
806 |
}); |
|
|
807 |
|
|
|
808 |
* Below, the same ellipse is created by defining the `type` attribute with a class reference: |
|
|
809 |
* |
|
|
810 |
var myEllipse = myGraphic.addShape({ |
|
|
811 |
type: Y.Ellipse, |
|
|
812 |
width: 20, |
|
|
813 |
height: 10, |
|
|
814 |
fill: { |
|
|
815 |
color: "#9aa" |
|
|
816 |
}, |
|
|
817 |
stroke: { |
|
|
818 |
weight: 1, |
|
|
819 |
color: "#000" |
|
|
820 |
} |
|
|
821 |
}); |
|
|
822 |
* |
|
|
823 |
* <p>`Ellipse` has the following implementations based on browser capability. |
|
|
824 |
* <ul> |
|
|
825 |
* <li><a href="SVGEllipse.html">`SVGEllipse`</a></li> |
|
|
826 |
* <li><a href="VMLEllipse.html">`VMLEllipse`</a></li> |
|
|
827 |
* <li><a href="CanvasEllipse.html">`CanvasEllipse`</a></li> |
|
|
828 |
* </ul> |
|
|
829 |
* |
|
|
830 |
* It is not necessary to interact with these classes directly. `Ellipse` will point to the appropriate implemention.</p> |
|
|
831 |
* |
|
|
832 |
* @class Ellipse |
|
|
833 |
* @extends Shape |
|
|
834 |
* @constructor |
|
|
835 |
*/ |
|
|
836 |
/** |
|
|
837 |
* <p>Creates an rectangle shape with editable attributes.</p> |
|
|
838 |
* <p>`Rect` instances can be created using the <a href="Graphic.html#method_addShape">`addShape`</a> method of the |
|
|
839 |
* <a href="Graphic.html">`Graphic`</a> class. The method's `cfg` argument contains a `type` attribute. Assigning "rect" |
|
|
840 |
* or `Y.Rect` to this attribute will create a `Rect` instance. Required attributes for instantiating a `Rect` are `type`, |
|
|
841 |
* `width` and `height`. Optional attributes include: |
|
|
842 |
* <ul> |
|
|
843 |
* <li><a href="#attr_fill">fill</a></li> |
|
|
844 |
* <li><a href="#attr_id">id</a></li> |
|
|
845 |
* <li><a href="#attr_stroke">stroke</a></li> |
|
|
846 |
* <li><a href="#attr_transform">transform</a></li> |
|
|
847 |
* <li><a href="#attr_transformOrigin">transformOrigin</a></li> |
|
|
848 |
* <li><a href="#attr_visible">visible</a></li> |
|
|
849 |
* <li><a href="#attr_x">x</a></li> |
|
|
850 |
* <li><a href="#attr_y">y</a></li> |
|
|
851 |
* </ul> |
|
|
852 |
* |
|
|
853 |
* The below code creates a rectangle by defining the `type` attribute as "rect":</p> |
|
|
854 |
|
|
|
855 |
var myRect = myGraphic.addShape({ |
|
|
856 |
type: "rect", |
|
|
857 |
width: 20, |
|
|
858 |
height: 10, |
|
|
859 |
fill: { |
|
|
860 |
color: "#9aa" |
|
|
861 |
}, |
|
|
862 |
stroke: { |
|
|
863 |
weight: 1, |
|
|
864 |
color: "#000" |
|
|
865 |
} |
|
|
866 |
}); |
|
|
867 |
|
|
|
868 |
* Below, the same rectangle is created by defining the `type` attribute with a class reference: |
|
|
869 |
* |
|
|
870 |
var myRect = myGraphic.addShape({ |
|
|
871 |
type: Y.Rect, |
|
|
872 |
width: 20, |
|
|
873 |
height: 10, |
|
|
874 |
fill: { |
|
|
875 |
color: "#9aa" |
|
|
876 |
}, |
|
|
877 |
stroke: { |
|
|
878 |
weight: 1, |
|
|
879 |
color: "#000" |
|
|
880 |
} |
|
|
881 |
}); |
|
|
882 |
* |
|
|
883 |
* <p>`Rect` has the following implementations based on browser capability. |
|
|
884 |
* <ul> |
|
|
885 |
* <li><a href="SVGRect.html">`SVGRect`</a></li> |
|
|
886 |
* <li><a href="VMLRect.html">`VMLRect`</a></li> |
|
|
887 |
* <li><a href="CanvasRect.html">`CanvasRect`</a></li> |
|
|
888 |
* </ul> |
|
|
889 |
* |
|
|
890 |
* It is not necessary to interact with these classes directly. `Rect` will point to the appropriate implemention.</p> |
|
|
891 |
* |
|
|
892 |
* @class Rect |
|
|
893 |
* @extends Shape |
|
|
894 |
* @constructor |
|
|
895 |
*/ |
|
|
896 |
/** |
|
|
897 |
* <p>The `Path` class creates a shape through the use of drawing methods. The `Path` class has the following drawing methods available:</p> |
|
|
898 |
* <ul> |
|
|
899 |
* <li><a href="#method_clear">`clear`</a></li> |
|
|
900 |
* <li><a href="#method_curveTo">`curveTo`</a></li> |
|
|
901 |
* <li><a href="#method_drawRect">`drawRect`</a></li> |
|
|
902 |
* <li><a href="#method_drawRoundRect">`drawRoundRect`</a></li> |
|
|
903 |
* <li><a href="#method_end">`end`</a></li> |
|
|
904 |
* <li><a href="#method_lineTo">`lineTo`</a></li> |
|
|
905 |
* <li><a href="#method_moveTo">`moveTo`</a></li> |
|
|
906 |
* <li><a href="#method_quadraticCurveTo">`quadraticCurveTo`</a></li> |
|
|
907 |
* </ul> |
|
|
908 |
* |
|
|
909 |
* <p>Like other shapes, `Path` elements are created using the <a href="Graphic.html#method_addShape">`addShape`</a> |
|
|
910 |
* method of the <a href="Graphic.html">`Graphic`</a> class. The method's `cfg` argument contains a `type` attribute. |
|
|
911 |
* Assigning "path" or `Y.Path` to this attribute will create a `Path` instance. After instantiation, a series of drawing |
|
|
912 |
* operations must be performed in order to render a shape. The below code instantiates a path element by defining the |
|
|
913 |
* `type` attribute as "path":</p> |
|
|
914 |
|
|
|
915 |
var myPath = myGraphic.addShape({ |
|
|
916 |
type: "path", |
|
|
917 |
fill: { |
|
|
918 |
color: "#9aa" |
|
|
919 |
}, |
|
|
920 |
stroke: { |
|
|
921 |
weight: 1, |
|
|
922 |
color: "#000" |
|
|
923 |
} |
|
|
924 |
}); |
|
|
925 |
|
|
|
926 |
* Below a `Path` element with the same properties is instantiated by defining the `type` attribute with a class reference: |
|
|
927 |
* |
|
|
928 |
var myPath = myGraphic.addShape({ |
|
|
929 |
type: Y.Path, |
|
|
930 |
fill: { |
|
|
931 |
color: "#9aa" |
|
|
932 |
}, |
|
|
933 |
stroke: { |
|
|
934 |
weight: 1, |
|
|
935 |
color: "#000" |
|
|
936 |
} |
|
|
937 |
}); |
|
|
938 |
|
|
|
939 |
* After instantiation, a shape or segment needs to be drawn for an element to render. After all draw operations are performed, |
|
|
940 |
* the <a href="#method_end">`end`</a> method will render the shape. The code below will draw a triangle: |
|
|
941 |
|
|
|
942 |
myPath.moveTo(35, 5); |
|
|
943 |
myPath.lineTo(65, 65); |
|
|
944 |
myPath.lineTo(5, 65); |
|
|
945 |
myPath.lineTo(35, 5); |
|
|
946 |
myPath.end(); |
|
|
947 |
* |
|
|
948 |
* <p>`Path` has the following implementations based on browser capability. |
|
|
949 |
* <ul> |
|
|
950 |
* <li><a href="SVGPath.html">`SVGPath`</a></li> |
|
|
951 |
* <li><a href="VMLPath.html">`VMLPath`</a></li> |
|
|
952 |
* <li><a href="CanvasPath.html">`CanvasPath`</a></li> |
|
|
953 |
* </ul> |
|
|
954 |
* It is not necessary to interact with these classes directly. `Path` will point to the appropriate implemention.</p> |
|
|
955 |
* |
|
|
956 |
* @class Path |
|
|
957 |
* @extends Shape |
|
|
958 |
* @uses Drawing |
|
|
959 |
* @constructor |
|
|
960 |
*/ |
|
|
961 |
/** |
|
|
962 |
* Indicates the path used for the node. |
|
|
963 |
* |
|
|
964 |
* @config path |
|
|
965 |
* @type String |
|
|
966 |
* @readOnly |
|
|
967 |
*/ |
|
|
968 |
/** |
|
|
969 |
* `Graphic` acts a factory and container for shapes. You need at least one `Graphic` instance to create shapes for your application. |
|
|
970 |
* <p>The code block below creates a `Graphic` instance and appends it to an HTMLElement with the id 'mygraphiccontainer'.</p> |
|
|
971 |
|
|
|
972 |
var myGraphic = new Y.Graphic({render:"#mygraphiccontainer"}); |
|
|
973 |
|
|
|
974 |
* <p>Alternatively, you can add a `Graphic` instance to the DOM using the <a href="#method_render">`render`</a> method.</p> |
|
|
975 |
var myGraphic = new Y.Graphic(); |
|
|
976 |
myGraphic.render("#mygraphiccontainer"); |
|
|
977 |
|
|
|
978 |
* `Graphic` has the following implementations based on browser capability. |
|
|
979 |
* <ul> |
|
|
980 |
* <li><a href="SVGGraphic.html">`SVGGraphic`</a></li> |
|
|
981 |
* <li><a href="VMLGraphic.html">`VMLGraphic`</a></li> |
|
|
982 |
* <li><a href="CanvasGraphic.html">`CanvasGraphic`</a></li> |
|
|
983 |
* </ul> |
|
|
984 |
* |
|
|
985 |
* It is not necessary to interact with these classes directly. `Graphic` will point to the appropriate implemention.</p> |
|
|
986 |
* |
|
|
987 |
* @class Graphic |
|
|
988 |
* @constructor |
|
|
989 |
*/ |
|
|
990 |
/** |
|
|
991 |
* Whether or not to render the `Graphic` automatically after to a specified parent node after init. This can be a Node |
|
|
992 |
* instance or a CSS selector string. |
|
|
993 |
* |
|
|
994 |
* @config render |
|
|
995 |
* @type Node | String |
|
|
996 |
*/ |
|
|
997 |
/** |
|
|
998 |
* Unique id for class instance. |
|
|
999 |
* |
|
|
1000 |
* @config id |
|
|
1001 |
* @type String |
|
|
1002 |
*/ |
|
|
1003 |
/** |
|
|
1004 |
* Key value pairs in which a shape instance is associated with its id. |
|
|
1005 |
* |
|
|
1006 |
* @config shapes |
|
|
1007 |
* @type Object |
|
|
1008 |
* @readOnly |
|
|
1009 |
*/ |
|
|
1010 |
/** |
|
|
1011 |
* Object containing size and coordinate data for the content of a Graphic in relation to the coordSpace node. |
|
|
1012 |
* |
|
|
1013 |
* @config contentBounds |
|
|
1014 |
* @type Object |
|
|
1015 |
* @readOnly |
|
|
1016 |
*/ |
|
|
1017 |
/** |
|
|
1018 |
* The html element that represents to coordinate system of the Graphic instance. |
|
|
1019 |
* |
|
|
1020 |
* @config node |
|
|
1021 |
* @type HTMLElement |
|
|
1022 |
* @readOnly |
|
|
1023 |
*/ |
|
|
1024 |
/** |
|
|
1025 |
* Indicates the width of the `Graphic`. |
|
|
1026 |
* |
|
|
1027 |
* @config width |
|
|
1028 |
* @type Number |
|
|
1029 |
*/ |
|
|
1030 |
/** |
|
|
1031 |
* Indicates the height of the `Graphic`. |
|
|
1032 |
* |
|
|
1033 |
* @config height |
|
|
1034 |
* @type Number |
|
|
1035 |
*/ |
|
|
1036 |
/** |
|
|
1037 |
* Determines the sizing of the Graphic. |
|
|
1038 |
* |
|
|
1039 |
* <dl> |
|
|
1040 |
* <dt>sizeContentToGraphic</dt><dd>The Graphic's width and height attributes are, either explicitly set through the |
|
|
1041 |
* <code>width</code> and <code>height</code> attributes or are determined by the dimensions of the parent element. The |
|
|
1042 |
* content contained in the Graphic will be sized to fit with in the Graphic instance's dimensions. When using this |
|
|
1043 |
* setting, the <code>preserveAspectRatio</code> attribute will determine how the contents are sized.</dd> |
|
|
1044 |
* <dt>sizeGraphicToContent</dt><dd>(Also accepts a value of true) The Graphic's width and height are determined by the |
|
|
1045 |
* size and positioning of the content.</dd> |
|
|
1046 |
* <dt>false</dt><dd>The Graphic's width and height attributes are, either explicitly set through the <code>width</code> |
|
|
1047 |
* and <code>height</code> attributes or are determined by the dimensions of the parent element. The contents of the |
|
|
1048 |
* Graphic instance are not affected by this setting.</dd> |
|
|
1049 |
* </dl> |
|
|
1050 |
* |
|
|
1051 |
* |
|
|
1052 |
* @config autoSize |
|
|
1053 |
* @type Boolean | String |
|
|
1054 |
* @default false |
|
|
1055 |
*/ |
|
|
1056 |
/** |
|
|
1057 |
* Determines how content is sized when <code>autoSize</code> is set to <code>sizeContentToGraphic</code>. |
|
|
1058 |
* |
|
|
1059 |
* <dl> |
|
|
1060 |
* <dt>none<dt><dd>Do not force uniform scaling. Scale the graphic content of the given element non-uniformly if necessary |
|
|
1061 |
* such that the element's bounding box exactly matches the viewport rectangle.</dd> |
|
|
1062 |
* <dt>xMinYMin</dt><dd>Force uniform scaling position along the top left of the Graphic's node.</dd> |
|
|
1063 |
* <dt>xMidYMin</dt><dd>Force uniform scaling horizontally centered and positioned at the top of the Graphic's node.<dd> |
|
|
1064 |
* <dt>xMaxYMin</dt><dd>Force uniform scaling positioned horizontally from the right and vertically from the top.</dd> |
|
|
1065 |
* <dt>xMinYMid</dt>Force uniform scaling positioned horizontally from the left and vertically centered.</dd> |
|
|
1066 |
* <dt>xMidYMid (the default)</dt><dd>Force uniform scaling with the content centered.</dd> |
|
|
1067 |
* <dt>xMaxYMid</dt><dd>Force uniform scaling positioned horizontally from the right and vertically centered.</dd> |
|
|
1068 |
* <dt>xMinYMax</dt><dd>Force uniform scaling positioned horizontally from the left and vertically from the bottom.</dd> |
|
|
1069 |
* <dt>xMidYMax</dt><dd>Force uniform scaling horizontally centered and position vertically from the bottom.</dd> |
|
|
1070 |
* <dt>xMaxYMax</dt><dd>Force uniform scaling positioned horizontally from the right and vertically from the bottom.</dd> |
|
|
1071 |
* </dl> |
|
|
1072 |
* |
|
|
1073 |
* @config preserveAspectRatio |
|
|
1074 |
* @type String |
|
|
1075 |
* @default xMidYMid |
|
|
1076 |
*/ |
|
|
1077 |
/** |
|
|
1078 |
* The contentBounds will resize to greater values but not to smaller values. (for performance) |
|
|
1079 |
* When resizing the contentBounds down is desirable, set the resizeDown value to true. |
|
|
1080 |
* |
|
|
1081 |
* @config resizeDown |
|
|
1082 |
* @type Boolean |
|
|
1083 |
*/ |
|
|
1084 |
/** |
|
|
1085 |
* Indicates the x-coordinate for the instance. |
|
|
1086 |
* |
|
|
1087 |
* @config x |
|
|
1088 |
* @type Number |
|
|
1089 |
*/ |
|
|
1090 |
/** |
|
|
1091 |
* Indicates the y-coordinate for the instance. |
|
|
1092 |
* |
|
|
1093 |
* @config y |
|
|
1094 |
* @type Number |
|
|
1095 |
*/ |
|
|
1096 |
/** |
|
|
1097 |
* Indicates whether or not the instance will automatically redraw after a change is made to a shape. |
|
|
1098 |
* This property will get set to false when batching operations. |
|
|
1099 |
* |
|
|
1100 |
* @config autoDraw |
|
|
1101 |
* @type Boolean |
|
|
1102 |
* @default true |
|
|
1103 |
* @private |
|
|
1104 |
*/ |
|
|
1105 |
/** |
|
|
1106 |
* Indicates whether the `Graphic` and its children are visible. |
|
|
1107 |
* |
|
|
1108 |
* @config visible |
|
|
1109 |
* @type Boolean |
|
|
1110 |
*/ |
|
|
1111 |
/** |
|
|
1112 |
* Gets the current position of the graphic instance in page coordinates. |
|
|
1113 |
* |
|
|
1114 |
* @method getXY |
|
|
1115 |
* @return Array The XY position of the shape. |
|
|
1116 |
*/ |
|
|
1117 |
/** |
|
|
1118 |
* Adds the graphics node to the dom. |
|
|
1119 |
* |
|
|
1120 |
* @method render |
|
|
1121 |
* @param {Node|String} parentNode node in which to render the graphics node into. |
|
|
1122 |
*/ |
|
|
1123 |
/** |
|
|
1124 |
* Removes all nodes. |
|
|
1125 |
* |
|
|
1126 |
* @method destroy |
|
|
1127 |
*/ |
|
|
1128 |
/** |
|
|
1129 |
* <p>Generates a shape instance by type. The method accepts an object that contain's the shape's |
|
|
1130 |
* type and attributes to be customized. For example, the code below would create a rectangle:</p> |
|
|
1131 |
* |
|
|
1132 |
var myRect = myGraphic.addShape({ |
|
|
1133 |
type: "rect", |
|
|
1134 |
width: 40, |
|
|
1135 |
height: 30, |
|
|
1136 |
fill: { |
|
|
1137 |
color: "#9aa" |
|
|
1138 |
}, |
|
|
1139 |
stroke: { |
|
|
1140 |
weight: 1, |
|
|
1141 |
color: "#000" |
|
|
1142 |
} |
|
|
1143 |
}); |
|
|
1144 |
* |
|
|
1145 |
* <p>The `Graphics` module includes a few basic shapes. More information on their creation |
|
|
1146 |
* can be found in each shape's documentation: |
|
|
1147 |
* |
|
|
1148 |
* <ul> |
|
|
1149 |
* <li><a href="Circle.html">`Circle`</a></li> |
|
|
1150 |
* <li><a href="Ellipse.html">`Ellipse`</a></li> |
|
|
1151 |
* <li><a href="Rect.html">`Rect`</a></li> |
|
|
1152 |
* <li><a href="Path.html">`Path`</a></li> |
|
|
1153 |
* </ul> |
|
|
1154 |
* |
|
|
1155 |
* The `Graphics` module also allows for the creation of custom shapes. If a custom shape |
|
|
1156 |
* has been created, it can be instantiated with the `addShape` method as well. The attributes, |
|
|
1157 |
* required and optional, would need to be defined in the custom shape. |
|
|
1158 |
* |
|
|
1159 |
var myCustomShape = myGraphic.addShape({ |
|
|
1160 |
type: Y.MyCustomShape, |
|
|
1161 |
width: 50, |
|
|
1162 |
height: 50, |
|
|
1163 |
fill: { |
|
|
1164 |
color: "#9aa" |
|
|
1165 |
}, |
|
|
1166 |
stroke: { |
|
|
1167 |
weight: 1, |
|
|
1168 |
color: "#000" |
|
|
1169 |
} |
|
|
1170 |
}); |
|
|
1171 |
* |
|
|
1172 |
* @method addShape |
|
|
1173 |
* @param {Object} cfg Object containing the shape's type and attributes. |
|
|
1174 |
* @return Shape |
|
|
1175 |
*/ |
|
|
1176 |
/** |
|
|
1177 |
* Removes a shape instance from from the graphic instance. |
|
|
1178 |
* |
|
|
1179 |
* @method removeShape |
|
|
1180 |
* @param {Shape|String} shape The instance or id of the shape to be removed. |
|
|
1181 |
*/ |
|
|
1182 |
/** |
|
|
1183 |
* Removes all shape instances from the dom. |
|
|
1184 |
* |
|
|
1185 |
* @method removeAllShapes |
|
|
1186 |
*/ |
|
|
1187 |
/** |
|
|
1188 |
* Returns a shape based on the id of its dom node. |
|
|
1189 |
* |
|
|
1190 |
* @method getShapeById |
|
|
1191 |
* @param {String} id Dom id of the shape's node attribute. |
|
|
1192 |
* @return Shape |
|
|
1193 |
*/ |
|
|
1194 |
/** |
|
|
1195 |
* Allows for creating multiple shapes in order to batch appending and redraw operations. |
|
|
1196 |
* |
|
|
1197 |
* @method batch |
|
|
1198 |
* @param {Function} method Method to execute. |
|
|
1199 |
*/ |
|
|
1200 |
|
|
|
1201 |
|
|
|
1202 |
}, '3.10.3', {"requires": ["node", "event-custom", "pluginhost", "matrix", "classnamemanager"]}); |