From 2ebe57b26e070070dacbe6e2b3351d5cefaee874 Mon Sep 17 00:00:00 2001 From: Tripp Date: Wed, 27 Jul 2011 03:27:52 -0700 Subject: [PATCH 1/3] Graphic shapes replaced rotation attribute with transform attribute. Code cleanup. --- src/graphics/js/BaseGraphic.js | 38 ++++++++++++++---- src/graphics/js/CanvasDrawing.js | 9 ----- src/graphics/js/CanvasShape.js | 59 ++++++++++++++------------- src/graphics/js/SVGShape.js | 65 ++++++++++++++---------------- src/graphics/js/VMLShape.js | 68 ++++++++++++++++++++------------ 5 files changed, 133 insertions(+), 106 deletions(-) diff --git a/src/graphics/js/BaseGraphic.js b/src/graphics/js/BaseGraphic.js index 7f9d1c85d39..e5fbbb708ef 100755 --- a/src/graphics/js/BaseGraphic.js +++ b/src/graphics/js/BaseGraphic.js @@ -72,8 +72,6 @@ var SETTER = "setter", */ applyCSSText: function(val) { var re = /\s*([a-z]*)\(([\w,\s]*)\)/gi, - transforms = [], - i = 0, args, m; @@ -86,6 +84,29 @@ var SETTER = "setter", } }, + /** + * Parses a string and returns an array of transform arrays. + * + * @method applyCSSText + * @param {String} val A css transform string + * @return Array + */ + getTransformArray: function(val) { + var re = /\s*([a-z]*)\(([\w,\s]*)\)/gi, + transforms = [], + args, + m; + + while ((m = re.exec(val))) { + if (typeof this[m[1]] === 'function') { + args = m[2].split(','); + args.unshift(m[1]); + transforms.push(args); + } + } + return transforms; + }, + /** * Default values for the matrix * @@ -123,10 +144,13 @@ var SETTER = "setter", var defaults = this._defaults, prop; - config || (config = {}); + config = config || {}; for (prop in defaults) { - this[prop] = (prop in config) ? config[prop] : defaults[prop]; + if(defaults.hasOwnProperty(prop)) + { + this[prop] = (prop in config) ? config[prop] : defaults[prop]; + } } this._config = config; @@ -154,12 +178,12 @@ var SETTER = "setter", x = x || 0; y = y || 0; - if (x != undefined) { // null or undef + if (x !== undefined) { // null or undef x = this._round(Math.tan(this.angle2rad(x))); } - if (y != undefined) { // null or undef + if (y !== undefined) { // null or undef y = this._round(Math.tan(this.angle2rad(y))); } @@ -231,8 +255,6 @@ var SETTER = "setter", */ toFilterText: function() { var matrix = this, - dx = matrix.dx, - dy = matrix.dy, text = 'progid:DXImageTransform.Microsoft.Matrix('; text += 'M11=' + matrix.a + ',' + 'M21=' + matrix.b + ',' + diff --git a/src/graphics/js/CanvasDrawing.js b/src/graphics/js/CanvasDrawing.js index 01d986e9c1c..15fa6ec60ac 100755 --- a/src/graphics/js/CanvasDrawing.js +++ b/src/graphics/js/CanvasDrawing.js @@ -128,15 +128,6 @@ CanvasDrawing.prototype = { node.style.left = (x + this._left) + "px"; node.style.top = (y + this._top) + "px"; }, - - /** - * Holds queue of properties for the target canvas. - * - * @property _properties - * @type Object - * @private - */ - _properties: null, /** * Queues up a method to be executed when a shape redraws. diff --git a/src/graphics/js/CanvasShape.js b/src/graphics/js/CanvasShape.js index 395cf3fb59a..40a64e4c72d 100755 --- a/src/graphics/js/CanvasShape.js +++ b/src/graphics/js/CanvasShape.js @@ -451,22 +451,6 @@ Y.extend(CanvasShape, Y.BaseGraphic, Y.mix({ { this._addTransform("scale", arguments); }, - - /** - * Applies a matrix transformation - * - * @method matrix - * @param {Number} a - * @param {Number} b - * @param {Number} c - * @param {Number} d - * @param {Number} dx - * @param {Number} dy - */ - matrix: function(a, b, c, d, dx, dy) - { - this._addTransform("matrix", arguments); - }, /** * Storage for `rotation` atribute. @@ -476,6 +460,15 @@ Y.extend(CanvasShape, Y.BaseGraphic, Y.mix({ * @private */ _rotation: 0, + + /** + * Storage for the transform attribute. + * + * @property _transform + * @type String + * @private + */ + _transform: "", /** * Adds a transform to the shape. @@ -488,9 +481,10 @@ Y.extend(CanvasShape, Y.BaseGraphic, Y.mix({ _addTransform: function(type, args) { args = Y.Array(args); + this._transform = Y_LANG.trim(this._transform + " " + type + "(" + args.join(", ") + ")"); args.unshift(type); this._transforms.push(args); - if(this.initialized) + if(this.initialized) { this._updateTransform(); } @@ -883,23 +877,32 @@ CanvasShape.ATTRS = { return [0.5, 0.5]; } }, - - /** - * The rotation (in degrees) of the shape. + + /** + * A css transform string. * - * @config rotation - * @type Number + * @config transform + * @type String + * + * @writeOnly */ - rotation: { + transform: { setter: function(val) { - this.rotate(val); + this.matrix.init(); + this._transforms = this.matrix.getTransformArray(val); + this._transform = val; + if(this.initialized) + { + this._updateTransform(); + } + return val; }, - getter: function() - { - return this._rotation; - } + getter: function() + { + return this._transform; + } }, /** diff --git a/src/graphics/js/SVGShape.js b/src/graphics/js/SVGShape.js index 0fb4a6645c9..505e541400f 100755 --- a/src/graphics/js/SVGShape.js +++ b/src/graphics/js/SVGShape.js @@ -321,15 +321,11 @@ Y.extend(SVGShape, Y.BaseGraphic, Y.mix({ h = this.get("height"), rotation = fill.rotation, radCon = Math.PI/180, - sinRadians = parseFloat(parseFloat(Math.sin(rotation * radCon)).toFixed(8)), - cosRadians = parseFloat(parseFloat(Math.cos(rotation * radCon)).toFixed(8)), tanRadians = parseFloat(parseFloat(Math.tan(rotation * radCon)).toFixed(8)), i, len, def, stop, - x = this.get("x"), - y = this.get("y"), x1 = "0%", x2 = "100%", y1 = "0%", @@ -535,22 +531,6 @@ Y.extend(SVGShape, Y.BaseGraphic, Y.mix({ this._addTransform("scale", arguments); }, - /** - * Applies a matrix transformation - * - * @method matrix - * @param {Number} a - * @param {Number} b - * @param {Number} c - * @param {Number} d - * @param {Number} dx - * @param {Number} dy - */ - matrix: function(a, b, c, d, dx, dy) - { - this._addTransform("matrix", arguments); - }, - /** * Adds a transform to the shape. * @@ -562,6 +542,7 @@ Y.extend(SVGShape, Y.BaseGraphic, Y.mix({ _addTransform: function(type, args) { args = Y.Array(args); + this._transform = Y_LANG.trim(this._transform + " " + type + "(" + args.join(", ") + ")"); args.unshift(type); this._transforms.push(args); if(this.initialized) @@ -581,10 +562,7 @@ Y.extend(SVGShape, Y.BaseGraphic, Y.mix({ var isPath = this._type == "path", node = this.node, key, - args, - val, transform, - test, transformOrigin, x, y, @@ -697,6 +675,15 @@ Y.extend(SVGShape, Y.BaseGraphic, Y.mix({ * @private */ _translateY: 0, + + /** + * Storage for the transform attribute. + * + * @property _transform + * @type String + * @private + */ + _transform: "", /** * Returns the bounds for a shape. @@ -724,7 +711,6 @@ Y.extend(SVGShape, Y.BaseGraphic, Y.mix({ d = matrix.d, dx = matrix.dx, dy = matrix.dy, - transformOrigin = this.get("transformOrigin"), w = this.get("width"), h = this.get("height"), //The svg path element does not have x and y coordinates. Shapes based on path use translate to "fake" x and y. As a @@ -826,23 +812,32 @@ SVGShape.ATTRS = { return [0.5, 0.5]; } }, - - /** - * The rotation (in degrees) of the shape. + + /** + * A css transform string. * - * @config rotation - * @type Number + * @config transform + * @type String + * + * @writeOnly */ - rotation: { + transform: { setter: function(val) { - this.rotate(val); + this.matrix.init(); + this._transforms = this.matrix.getTransformArray(val); + this._transform = val; + if(this.initialized) + { + this._updateTransform(); + } + return val; }, - getter: function() - { - return this._rotation; - } + getter: function() + { + return this._transform; + } }, /** diff --git a/src/graphics/js/VMLShape.js b/src/graphics/js/VMLShape.js index 8b6372e54fa..9f16189fed7 100755 --- a/src/graphics/js/VMLShape.js +++ b/src/graphics/js/VMLShape.js @@ -11,7 +11,6 @@ VMLShape = function() this._transforms = []; this.matrix = new Y.Matrix(); this.rotationMatrix = new Y.Matrix(); - this.scaleMatrix = new Y.Matrix(); VMLShape.superclass.constructor.apply(this, arguments); }; @@ -627,9 +626,10 @@ Y.extend(VMLShape, Y.BaseGraphic, Y.mix({ _addTransform: function(type, args) { args = Y.Array(args); + this._transform = Y_LANG.trim(this._transform + " " + type + "(" + args.join(", ") + ")"); args.unshift(type); this._transforms.push(args); - if(this.initialized) + if(this.initialized) { this._updateTransform(); } @@ -641,10 +641,7 @@ Y.extend(VMLShape, Y.BaseGraphic, Y.mix({ _updateTransform: function() { var node = this.node, - coordSize, key, - args, - val, transform, transformOrigin, x = this.get("x"), @@ -666,7 +663,6 @@ Y.extend(VMLShape, Y.BaseGraphic, Y.mix({ keys = [], matrix = this.matrix, rotationMatrix = this.rotationMatrix, - scaleMatrix = this.scaleMatrix, i = 0, len = this._transforms.length; @@ -721,6 +717,7 @@ Y.extend(VMLShape, Y.BaseGraphic, Y.mix({ dx = matrix.dx; dy = matrix.dy; this._graphic.addToRedrawQueue(this); + //only apply the filter if necessary as it degrades image quality if(Y.Array.indexOf(keys, "skew") > -1 || Y.Array.indexOf(keys, "scale") > -1) { node.style.filter = transform; @@ -751,7 +748,17 @@ Y.extend(VMLShape, Y.BaseGraphic, Y.mix({ * @private */ _translateY: 0, - /** + + /** + * Storage for the transform attribute. + * + * @property _transform + * @type String + * @private + */ + _transform: "", + + /** * Applies translate transformation. * * @method translate @@ -858,22 +865,6 @@ Y.extend(VMLShape, Y.BaseGraphic, Y.mix({ this._addTransform("scale", arguments); }, - /** - * Applies a matrix transformation - * - * @method matrix - * @param {Number} a - * @param {Number} b - * @param {Number} c - * @param {Number} d - * @param {Number} dx - * @param {Number} dy - */ - matrix: function(a, b, c, d, dx, dy) - { - this._addTransform("matrix", arguments); - }, - /** * @private */ @@ -982,8 +973,7 @@ Y.extend(VMLShape, Y.BaseGraphic, Y.mix({ */ getBounds: function(cfg) { - var type = this._type, - wt, + var wt, bounds = {}, matrix = cfg || this.matrix, a = matrix.a, @@ -992,7 +982,6 @@ Y.extend(VMLShape, Y.BaseGraphic, Y.mix({ d = matrix.d, dx = matrix.dx, dy = matrix.dy, - transformOrigin = this.get("transformOrigin"), w = this.get("width"), h = this.get("height"), left = this.get("x"), @@ -1071,6 +1060,33 @@ VMLShape.ATTRS = { return [0.5, 0.5]; } }, + + /** + * A css transform string. + * + * @config transform + * @type String + * + * @writeOnly + */ + transform: { + setter: function(val) + { + this.matrix.init(); + this._transforms = this.matrix.getTransformArray(val); + this._transform = val; + if(this.initialized) + { + this._updateTransform(); + } + return val; + }, + + getter: function() + { + return this._transform; + } + }, /** * Indicates the x position of shape. From f49cd0540857456c2f91f0b5c08649f0f8ae39e8 Mon Sep 17 00:00:00 2001 From: Tripp Date: Wed, 27 Jul 2011 03:29:34 -0700 Subject: [PATCH 2/3] Graphic build files. --- .../graphics-canvas/graphics-canvas-debug.js | 68 +++++++++---------- build/graphics-canvas/graphics-canvas-min.js | 8 +-- build/graphics-canvas/graphics-canvas.js | 68 +++++++++---------- build/graphics-svg/graphics-svg-debug.js | 65 ++++++++---------- build/graphics-svg/graphics-svg-min.js | 6 +- build/graphics-svg/graphics-svg.js | 65 ++++++++---------- build/graphics-vml/graphics-vml-debug.js | 68 ++++++++++++------- build/graphics-vml/graphics-vml-min.js | 8 +-- build/graphics-vml/graphics-vml.js | 68 ++++++++++++------- build/graphics/graphics-debug.js | 38 ++++++++--- build/graphics/graphics-min.js | 2 +- build/graphics/graphics.js | 38 ++++++++--- 12 files changed, 278 insertions(+), 224 deletions(-) diff --git a/build/graphics-canvas/graphics-canvas-debug.js b/build/graphics-canvas/graphics-canvas-debug.js index c68b4140d7d..d2d57f132b9 100644 --- a/build/graphics-canvas/graphics-canvas-debug.js +++ b/build/graphics-canvas/graphics-canvas-debug.js @@ -130,15 +130,6 @@ CanvasDrawing.prototype = { node.style.left = (x + this._left) + "px"; node.style.top = (y + this._top) + "px"; }, - - /** - * Holds queue of properties for the target canvas. - * - * @property _properties - * @type Object - * @private - */ - _properties: null, /** * Queues up a method to be executed when a shape redraws. @@ -1164,22 +1155,6 @@ Y.extend(CanvasShape, Y.BaseGraphic, Y.mix({ { this._addTransform("scale", arguments); }, - - /** - * Applies a matrix transformation - * - * @method matrix - * @param {Number} a - * @param {Number} b - * @param {Number} c - * @param {Number} d - * @param {Number} dx - * @param {Number} dy - */ - matrix: function(a, b, c, d, dx, dy) - { - this._addTransform("matrix", arguments); - }, /** * Storage for `rotation` atribute. @@ -1189,6 +1164,15 @@ Y.extend(CanvasShape, Y.BaseGraphic, Y.mix({ * @private */ _rotation: 0, + + /** + * Storage for the transform attribute. + * + * @property _transform + * @type String + * @private + */ + _transform: "", /** * Adds a transform to the shape. @@ -1201,9 +1185,10 @@ Y.extend(CanvasShape, Y.BaseGraphic, Y.mix({ _addTransform: function(type, args) { args = Y.Array(args); + this._transform = Y_LANG.trim(this._transform + " " + type + "(" + args.join(", ") + ")"); args.unshift(type); this._transforms.push(args); - if(this.initialized) + if(this.initialized) { this._updateTransform(); } @@ -1596,23 +1581,32 @@ CanvasShape.ATTRS = { return [0.5, 0.5]; } }, - - /** - * The rotation (in degrees) of the shape. + + /** + * A css transform string. * - * @config rotation - * @type Number + * @config transform + * @type String + * + * @writeOnly */ - rotation: { + transform: { setter: function(val) { - this.rotate(val); + this.matrix.init(); + this._transforms = this.matrix.getTransformArray(val); + this._transform = val; + if(this.initialized) + { + this._updateTransform(); + } + return val; }, - getter: function() - { - return this._rotation; - } + getter: function() + { + return this._transform; + } }, /** diff --git a/build/graphics-canvas/graphics-canvas-min.js b/build/graphics-canvas/graphics-canvas-min.js index a7833386464..7d4ddaad206 100644 --- a/build/graphics-canvas/graphics-canvas-min.js +++ b/build/graphics-canvas/graphics-canvas-min.js @@ -1,4 +1,4 @@ -YUI.add("graphics-canvas",function(c){var q="canvasShape",e=c.config.doc,s=c.Lang,k=c.AttributeLite,l,n,t,o,i,f,h=c.Color,p=parseInt,g=parseFloat,m=s.isNumber,j=RegExp,r=h.toRGB,a=h.toHex;function b(){}b.prototype={_toRGBA:function(v,u){u=(u!==undefined)?u:1;if(!h.re_RGB.test(v)){v=a(v);}if(h.re_hex.exec(v)){v="rgba("+[p(j.$1,16),p(j.$2,16),p(j.$3,16)].join(",")+","+u+")";}return v;},_toRGB:function(u){return r(u);},setSize:function(u,v){if(this.get("autoSize")){if(u>this.node.getAttribute("width")){this.node.style.width=u+"px";this.node.setAttribute("width",u);}if(v>this.node.getAttribute("height")){this.node.style.height=v+"px";this.node.setAttribute("height",v);}}},_updateCoords:function(u,v){this._xcoords.push(u);this._ycoords.push(v);},_clearAndUpdateCoords:function(){var u=this._xcoords.pop()||0,v=this._ycoords.pop()||0;this._updateCoords(u,v);},_updateNodePosition:function(){var v=this.get("node"),u=this.get("x"),w=this.get("y");v.style.position="absolute";v.style.left=(u+this._left)+"px";v.style.top=(w+this._top)+"px";},_properties:null,_updateDrawingQueue:function(u){this._methods.push(u);},lineTo:function(D,B,u){var A=arguments,v=0,z,E,C,w=this._stroke&&this._strokeWeight?this._strokeWeight:0;if(!this._lineToMethods){this._lineToMethods=[];}if(typeof D==="string"||typeof D==="number"){A=[[D,B]];}z=A.length;for(;v360){C=360;}I=Math.ceil(Math.abs(C)/45);H=C/I;B=-(H/180)*Math.PI;N=(J/180)*Math.PI;if(I>0){G=F+Math.cos(J/180*Math.PI)*w;E=D+Math.sin(J/180*Math.PI)*z;this.lineTo(G,E);for(;K=R/2){if(L<180){B=G;z=G+R;}else{B=G+R;z=G;}T=A-((v-B)/K);S=A-((v-z)/K);}else{if(L>90&&L<270){T=H+I;S=H;}else{T=H;S=H+I;}B=((K*(A-T))-v)*-1;z=((K*(A-S))-v)*-1;}u=this._context.createLinearGradient(T,B,S,z);for(;P=R){H=Z/R;if(H===1){H=1.01;}L=(X-Q)/H;Y=(B-u)/H;L=L>0?Math.floor(L):Math.ceil(L);Y=Y>0?Math.floor(Y):Math.ceil(Y);X=Q+L;B=u+Y;}if(N>=0.5){v=this._context.createRadialGradient(X,B,N,U,A,N*K);z=1;}else{v=this._context.createRadialGradient(X,B,N,U,A,K/2);z=N*2;}for(;Tthis._right){this._right=u;}if(uthis._bottom){this._bottom=v;}this._width=this._right-this._left;this._height=this._bottom-this._top;}};c.CanvasDrawing=b;l=function(u){this._transforms=[];this.matrix=new c.Matrix();l.superclass.constructor.apply(this,arguments);};l.NAME="canvasShape";c.extend(l,c.BaseGraphic,c.mix({init:function(){this.initializer.apply(this,arguments);},initializer:function(u){var v=this;v._initProps();v.createNode();v._graphic=u.graphic;v._xcoords=[0];v._ycoords=[0];v._updateHandler();},addClass:function(u){var v=c.one(this.get("node"));v.addClass(u);},removeClass:function(u){var v=c.one(this.get("node"));v.removeClass(u);},getXY:function(){var z=this.get("graphic"),v=z.getXY(),u=this.get("x"),w=this.get("y");return[v[0]+u,v[1]+w];},setXY:function(w){var A=this.get("graphic"),v=A.getXY(),u=w[0]-v[0],z=w[1]-v[1];this._set("x",u);this._set("y",z);this._updateNodePosition(u,z);},contains:function(u){return u===c.one(this.node);},test:function(u){return c.one(this.get("node")).test(u);},compareTo:function(u){var v=this.node;return v===u;},_getDefaultFill:function(){return{type:"solid",cx:0.5,cy:0.5,fx:0.5,fy:0.5,r:0.5};},_getDefaultStroke:function(){return{weight:1,dashstyle:"none",color:"#000",opacity:1};},_left:0,_right:0,_top:0,_bottom:0,createNode:function(){var u=c.config.doc.createElement("canvas"),v=this.get("id");this._context=u.getContext("2d");u.setAttribute("overflow","visible");u.style.overflow="visible";u.setAttribute("id",v);v="#"+v;this.node=u;this.addClass("yui3-"+q+" yui3-"+this.name);},on:function(v,u){if(c.Node.DOM_EVENTS[v]){return c.one("#"+this.get("id")).on(v,u);}return c.on.apply(this,arguments);},_setStrokeProps:function(A){var v=A.color,z=g(A.weight),y=g(A.opacity),x=A.linejoin||"round",w=A.linecap||"butt",u=A.dashstyle;this._miterlimit=null;this._dashstyle=(u&&c.Lang.isArray(u)&&u.length>1)?u:null;this._strokeWeight=z;if(m(z)&&z>0){this._stroke=1;}else{this._stroke=0;}if(m(y)){this._strokeStyle=this._toRGBA(v,y);}else{this._strokeStyle=v;}this._linecap=w;if(x=="round"||x=="square"){this._linejoin=x;}else{x=parseInt(x,10);if(m(x)){this._miterlimit=Math.max(x,1);this._linejoin="miter";}}},set:function(){var u=this,v=arguments[0];k.prototype.set.apply(u,arguments);if(u.initialized){u._updateHandler();}},_setFillProps:function(y){var w=m,u=y.color,v,x=y.type;if(x=="linear"||x=="radial"){this._fillType=x;}else{if(u){v=y.opacity;if(w(v)){v=Math.max(0,Math.min(1,v));u=this._toRGBA(u,v);}else{u=r(u);}this._fillColor=u;this._fillType="solid";}else{this._fillColor=null;}}},translate:function(u,v){this._translateX+=u;this._translateY+=v;this._addTransform("translate",arguments);},translateX:function(u){this._translateX+=u;this._addTransform("translateX",arguments);},translateY:function(u){this._translateY+=u;this._addTransform("translateY",arguments);},skew:function(u,v){this._addTransform("skew",arguments);},skewX:function(u){this._addTransform("skewX",arguments);},skewY:function(u){this._addTransform("skewY",arguments);},rotate:function(u){this._rotation=u;this._addTransform("rotate",arguments);},scale:function(u,v){this._addTransform("scale",arguments);},matrix:function(w,u,z,y,x,v){this._addTransform("matrix",arguments);},_rotation:0,_addTransform:function(v,u){u=c.Array(u);u.unshift(v);this._transforms.push(u);if(this.initialized){this._updateTransform();}},_updateTransform:function(){var A=this.node,z,x,w=this.get("transformOrigin"),v=this.matrix,y=0,u=this._transforms.length;if(this._transforms&&this._transforms.length>0){for(;y0){u=F.shift();if(u){if(u&&u=="lineTo"&&this._dashstyle){F.unshift(this._xcoords[C]-this._left,this._ycoords[C]-this._top);this._drawDashedLine.apply(this,F);}else{v[u].apply(v,F);}}}}if(this._fillType){if(this._fillType=="linear"){v.fillStyle=this._getLinearGradient();}else{if(this._fillType=="radial"){v.fillStyle=this._getRadialGradient();}else{v.fillStyle=this._fillColor;}}v.closePath();v.fill();}if(this._stroke){if(this._strokeWeight){v.lineWidth=this._strokeWeight;}v.lineCap=this._linecap; -v.lineJoin=this._linejoin;if(this._miterlimit){v.miterLimit=this._miterlimit;}v.strokeStyle=this._strokeStyle;v.stroke();}this._drawingComplete=true;this._clearAndUpdateCoords();this._updateNodePosition();this._methods=x;}},_drawDashedLine:function(D,J,u,G){var v=this._context,H=this._dashstyle[0],F=this._dashstyle[1],x=H+F,A=u-D,E=G-J,I=Math.sqrt(Math.pow(A,2)+Math.pow(E,2)),y=Math.floor(Math.abs(I/x)),w=Math.atan2(E,A),C=D,B=J,z;A=Math.cos(w)*x;E=Math.sin(w)*x;for(z=0;zH){v.lineTo(C+Math.cos(w)*H,B+Math.sin(w)*H);}else{if(I>0){v.lineTo(C+Math.cos(w)*I,B+Math.sin(w)*I);}}v.moveTo(u,G);},clear:function(){this._initProps();if(this.node){this._context.clearRect(0,0,this.node.width,this.node.height);}return this;},getBounds:function(){var S=this.get("rotation"),z=Math.PI/180,R=g(g(Math.sin(S*z)).toFixed(8)),B=g(g(Math.cos(S*z)).toFixed(8)),O=this.get("width"),T=this.get("height"),C=this.get("stroke"),M=this.get("x"),K=this.get("y"),U=M+O,E=K+T,G,D,L,I,P,N,J,v,u=0,W=this.get("translateX"),V=this.get("translateY"),A={},Q=this.get("transformOrigin"),H=Q[0],F=Q[1];if(C&&C.weight){u=C.weight;}if(S!==0){H=M+(H*O);F=K+(F*T);G=this._getRotatedCornerX(M,K,H,F,B,R);D=this._getRotatedCornerY(M,K,H,F,B,R);L=this._getRotatedCornerX(M,E,H,F,B,R);I=this._getRotatedCornerY(M,E,H,F,B,R);P=this._getRotatedCornerX(U,E,H,F,B,R);N=this._getRotatedCornerY(U,E,H,F,B,R);J=this._getRotatedCornerX(U,K,H,F,B,R);v=this._getRotatedCornerY(U,K,H,F,B,R);A.left=Math.min(G,Math.min(L,Math.min(P,J)));A.right=Math.max(G,Math.max(L,Math.max(P,J)));A.top=Math.min(D,Math.min(I,Math.min(N,v)));A.bottom=Math.max(D,Math.max(I,Math.max(N,v)));}else{A.left=M-u+W;A.top=K-u+V;A.right=M+O+u+W;A.bottom=K+T+u+V;}return A;},_getRotatedCornerX:function(v,B,u,A,w,z){return(u+(v-u)*w+(B-A)*z);},_getRotatedCornerY:function(v,B,u,A,w,z){return(A-(v-u)*z+(B-A)*w);},destroy:function(){var v=this.node,u=this._context;if(v){if(u){u.clearRect(0,0,v.width,v.height);}if(this._graphic&&this._graphic._node){this._graphic._node.removeChild(this.node);}}}},c.CanvasDrawing.prototype));l.ATTRS={transformOrigin:{valueFn:function(){return[0.5,0.5];}},rotation:{setter:function(u){this.rotate(u);},getter:function(){return this._rotation;}},node:{readOnly:true,getter:function(){return this.node;}},id:{valueFn:function(){return c.guid();},setter:function(v){var u=this.node;if(u){u.setAttribute("id",v);}return v;}},width:{value:0},height:{value:0},x:{value:0},y:{value:0},visible:{value:true,setter:function(v){var u=v?"visible":"hidden";this.get("node").style.visibility=u;return v;}},fill:{valueFn:"_getDefaultFill",setter:function(w){var v,u=this.get("fill")||this._getDefaultFill();v=(w)?c.merge(u,w):null;if(v&&v.color){if(v.color===undefined||v.color=="none"){v.color=null;}}this._setFillProps(v);return v;}},stroke:{valueFn:"_getDefaultStroke",setter:function(v){var u=this.get("stroke")||this._getDefaultStroke();v=(v)?c.merge(u,v):null;this._setStrokeProps(v);return v;}},autoSize:{value:false},pointerEvents:{value:"visiblePainted"},graphic:{readOnly:true,getter:function(){return this._graphic;}}};c.CanvasShape=l;n=function(u){n.superclass.constructor.apply(this,arguments);};n.NAME="canvasPath";c.extend(n,c.CanvasShape,{_type:"path",_draw:function(){this._paint();},createNode:function(){var u=c.config.doc.createElement("canvas"),v=this.get("id");this._context=u.getContext("2d");u.setAttribute("overflow","visible");u.setAttribute("pointer-events","none");u.style.pointerEvents="none";u.style.overflow="visible";u.setAttribute("id",v);v="#"+v;this.node=u;this.addClass("yui3-"+q+" yui3-"+this.name);},end:function(){this._draw();}});n.ATTRS=c.merge(c.CanvasShape.ATTRS,{width:{getter:function(){var u=this._stroke&&this._strokeWeight?(this._strokeWeight*2):0;return this._width-u;},setter:function(u){this._width=u;return u;}},height:{getter:function(){var u=this._stroke&&this._strokeWeight?(this._strokeWeight*2):0;return this._height-u;},setter:function(u){this._height=u;return u;}},path:{readOnly:true,getter:function(){return this._path;}}});c.CanvasPath=n;t=function(){t.superclass.constructor.apply(this,arguments);};t.NAME="canvasRect";c.extend(t,c.CanvasShape,{_type:"rect",_draw:function(){var u=this.get("width"),v=this.get("height");this.clear();this.drawRect(0,0,u,v);this._paint();}});t.ATTRS=c.CanvasShape.ATTRS;c.CanvasRect=t;o=function(u){o.superclass.constructor.apply(this,arguments);};o.NAME="canvasEllipse";c.extend(o,l,{_type:"ellipse",_draw:function(){var u=this.get("width"),v=this.get("height");this.clear();this.drawEllipse(0,0,u,v);this._paint();}});o.ATTRS=l.ATTRS;c.CanvasEllipse=o;i=function(u){i.superclass.constructor.apply(this,arguments);};i.NAME="canvasCircle";c.extend(i,c.CanvasShape,{_type:"circle",_draw:function(){var u=this.get("radius");if(u){this.clear();this.drawCircle(0,0,u);this._paint();}}});i.ATTRS=c.merge(c.CanvasShape.ATTRS,{width:{setter:function(u){this.set("radius",u/2);return u;},getter:function(){return this.get("radius")*2;}},height:{setter:function(u){this.set("radius",u/2);return u;},getter:function(){return this.get("radius")*2;}},radius:{lazyAdd:false}});c.CanvasCircle=i;f=function(){f.superclass.constructor.apply(this,arguments);};f.NAME="canvasPieSlice";c.extend(f,c.CanvasShape,{_type:"path",_draw:function(A){var v=this.get("cx"),B=this.get("cy"),z=this.get("startAngle"),w=this.get("arc"),u=this.get("radius");this.clear();this._left=v;this._right=u;this._top=B;this._bottom=u;this.drawWedge(v,B,z,w,u);this.end();}});f.ATTRS=c.mix({cx:{value:0},cy:{value:0},startAngle:{value:0},arc:{value:0},radius:{value:0}},c.CanvasShape.ATTRS);c.CanvasPieSlice=f;function d(u){d.superclass.constructor.apply(this,arguments);}d.NAME="canvasGraphic";d.ATTRS={render:{},id:{valueFn:function(){return c.guid();},setter:function(v){var u=this._node;if(u){u.setAttribute("id",v);}return v;}},shapes:{readOnly:true,getter:function(){return this._shapes; -}},contentBounds:{readOnly:true,getter:function(){return this._contentBounds;}},node:{readOnly:true,getter:function(){return this._node;}},width:{setter:function(u){if(this._node){this._node.style.width=u+"px";}return u;}},height:{setter:function(u){if(this._node){this._node.style.height=u+"px";}return u;}},autoSize:{value:false},resizeDown:{getter:function(){return this._resizeDown;},setter:function(u){this._resizeDown=u;this._redraw();return u;}},x:{getter:function(){return this._x;},setter:function(u){this._x=u;if(this._node){this._node.style.left=u+"px";}return u;}},y:{getter:function(){return this._y;},setter:function(u){this._y=u;if(this._node){this._node.style.top=u+"px";}return u;}},autoDraw:{value:true},visible:{value:true,setter:function(u){this._toggleVisible(u);return u;}}};c.extend(d,c.BaseGraphic,{_x:0,_y:0,getXY:function(){var u=c.one(this._node),v;if(u){v=u.getXY();}return v;},_resizeDown:false,initializer:function(v){var y=this.get("render"),u=this.get("width")||0,x=this.get("height")||0;this._shapes={};this._redrawQueue={};this._contentBounds={left:0,top:0,right:0,bottom:0};this._node=e.createElement("div");this._node.style.position="absolute";this.set("width",u);this.set("height",x);if(y){this.render(y);}},render:function(y){var u=c.one(y),z=this._node,v=this.get("width")||parseInt(u.getComputedStyle("width"),10),x=this.get("height")||parseInt(u.getComputedStyle("height"),10);u=u||e.body;u.appendChild(z);z.style.display="block";z.style.position="absolute";z.style.left="0px";z.style.top="0px";this.set("width",v);this.set("height",x);this.parentNode=u;return this;},destroy:function(){this._removeAllShapes();this._removeChildren(this._node);if(this._node&&this._node.parentNode){this._node.parentNode.removeChild(this._node);}},addShape:function(u){u.graphic=this;var w=this._getShapeClass(u.type),v=new w(u);this._appendShape(v);return v;},_appendShape:function(v){var w=v.node,u=this._frag||this._node;if(this.get("autoDraw")){u.appendChild(w);}else{this._getDocFrag().appendChild(w);}},removeShape:function(u){if(!(u instanceof l)){if(s.isString(u)){u=this._shapes[u];}}if(u&&u instanceof l){u.destroy();delete this._shapes[u.get("id")];}if(this.get("autoDraw")){this._redraw();}return u;},removeAllShapes:function(){var u=this._shapes,v;for(v in u){if(u.hasOwnProperty(v)){u[v].destroy();}}this._shapes={};},_removeChildren:function(u){if(u.hasChildNodes()){var v;while(u.firstChild){v=u.firstChild;this._removeChildren(v);u.removeChild(v);}}},_toggleVisible:function(x){var w,v=this._shapes,u=x?"visible":"hidden";if(v){for(w in v){if(v.hasOwnProperty(w)){v[w].set("visible",x);}}}this._node.style.visibility=u;},_getShapeClass:function(v){var u=this._shapeClass[v];if(u){return u;}return v;},_shapeClass:{circle:c.CanvasCircle,rect:c.CanvasRect,path:c.CanvasPath,ellipse:c.CanvasEllipse,pieslice:c.CanvasPieSlice},getShapeById:function(v){var u=this._shapes[v];return u;},batch:function(v){var u=this.get("autoDraw");this.set("autoDraw",false);v();this._redraw();this.set("autoDraw",u);},_getDocFrag:function(){if(!this._frag){this._frag=e.createDocumentFragment();}return this._frag;},_redraw:function(){var u=this.get("resizeDown")?this._getUpdatedContentBounds():this._contentBounds;if(this.get("autoSize")){this.set("width",u.right);this.set("height",u.bottom);}if(this._frag){this._node.appendChild(this._frag);this._frag=null;}},addToRedrawQueue:function(u){var w,v;this._shapes[u.get("id")]=u;if(!this.get("resizeDown")){w=u.getBounds();v=this._contentBounds;v.left=v.leftw.right?v.right:w.right;v.bottom=v.bottom>w.bottom?v.bottom:w.bottom;v.width=v.right-v.left;v.height=v.bottom-v.top;this._contentBounds=v;}if(this.get("autoDraw")){this._redraw();}},_getUpdatedContentBounds:function(){var y,w,v,u=this._shapes,x={left:0,top:0,right:0,bottom:0};for(w in u){if(u.hasOwnProperty(w)){v=u[w];y=v.getBounds();x.left=Math.min(x.left,y.left);x.top=Math.min(x.top,y.top);x.right=Math.max(x.right,y.right);x.bottom=Math.max(x.bottom,y.bottom);}}x.width=x.right-x.left;x.height=x.bottom-x.top;this._contentBounds=x;return x;}});c.CanvasGraphic=d;},"@VERSION@",{requires:["graphics"],skinnable:false}); \ No newline at end of file +YUI.add("graphics-canvas",function(c){var q="canvasShape",e=c.config.doc,s=c.Lang,k=c.AttributeLite,l,n,t,o,i,f,h=c.Color,p=parseInt,g=parseFloat,m=s.isNumber,j=RegExp,r=h.toRGB,a=h.toHex;function b(){}b.prototype={_toRGBA:function(v,u){u=(u!==undefined)?u:1;if(!h.re_RGB.test(v)){v=a(v);}if(h.re_hex.exec(v)){v="rgba("+[p(j.$1,16),p(j.$2,16),p(j.$3,16)].join(",")+","+u+")";}return v;},_toRGB:function(u){return r(u);},setSize:function(u,v){if(this.get("autoSize")){if(u>this.node.getAttribute("width")){this.node.style.width=u+"px";this.node.setAttribute("width",u);}if(v>this.node.getAttribute("height")){this.node.style.height=v+"px";this.node.setAttribute("height",v);}}},_updateCoords:function(u,v){this._xcoords.push(u);this._ycoords.push(v);},_clearAndUpdateCoords:function(){var u=this._xcoords.pop()||0,v=this._ycoords.pop()||0;this._updateCoords(u,v);},_updateNodePosition:function(){var v=this.get("node"),u=this.get("x"),w=this.get("y");v.style.position="absolute";v.style.left=(u+this._left)+"px";v.style.top=(w+this._top)+"px";},_updateDrawingQueue:function(u){this._methods.push(u);},lineTo:function(D,B,u){var A=arguments,v=0,z,E,C,w=this._stroke&&this._strokeWeight?this._strokeWeight:0;if(!this._lineToMethods){this._lineToMethods=[];}if(typeof D==="string"||typeof D==="number"){A=[[D,B]];}z=A.length;for(;v360){C=360;}I=Math.ceil(Math.abs(C)/45);H=C/I;B=-(H/180)*Math.PI;N=(J/180)*Math.PI;if(I>0){G=F+Math.cos(J/180*Math.PI)*w;E=D+Math.sin(J/180*Math.PI)*z;this.lineTo(G,E);for(;K=R/2){if(L<180){B=G;z=G+R;}else{B=G+R;z=G;}T=A-((v-B)/K);S=A-((v-z)/K);}else{if(L>90&&L<270){T=H+I;S=H;}else{T=H;S=H+I;}B=((K*(A-T))-v)*-1;z=((K*(A-S))-v)*-1;}u=this._context.createLinearGradient(T,B,S,z);for(;P=R){H=Z/R; +if(H===1){H=1.01;}L=(X-Q)/H;Y=(B-u)/H;L=L>0?Math.floor(L):Math.ceil(L);Y=Y>0?Math.floor(Y):Math.ceil(Y);X=Q+L;B=u+Y;}if(N>=0.5){v=this._context.createRadialGradient(X,B,N,U,A,N*K);z=1;}else{v=this._context.createRadialGradient(X,B,N,U,A,K/2);z=N*2;}for(;Tthis._right){this._right=u;}if(uthis._bottom){this._bottom=v;}this._width=this._right-this._left;this._height=this._bottom-this._top;}};c.CanvasDrawing=b;l=function(u){this._transforms=[];this.matrix=new c.Matrix();l.superclass.constructor.apply(this,arguments);};l.NAME="canvasShape";c.extend(l,c.BaseGraphic,c.mix({init:function(){this.initializer.apply(this,arguments);},initializer:function(u){var v=this;v._initProps();v.createNode();v._graphic=u.graphic;v._xcoords=[0];v._ycoords=[0];v._updateHandler();},addClass:function(u){var v=c.one(this.get("node"));v.addClass(u);},removeClass:function(u){var v=c.one(this.get("node"));v.removeClass(u);},getXY:function(){var z=this.get("graphic"),v=z.getXY(),u=this.get("x"),w=this.get("y");return[v[0]+u,v[1]+w];},setXY:function(w){var A=this.get("graphic"),v=A.getXY(),u=w[0]-v[0],z=w[1]-v[1];this._set("x",u);this._set("y",z);this._updateNodePosition(u,z);},contains:function(u){return u===c.one(this.node);},test:function(u){return c.one(this.get("node")).test(u);},compareTo:function(u){var v=this.node;return v===u;},_getDefaultFill:function(){return{type:"solid",cx:0.5,cy:0.5,fx:0.5,fy:0.5,r:0.5};},_getDefaultStroke:function(){return{weight:1,dashstyle:"none",color:"#000",opacity:1};},_left:0,_right:0,_top:0,_bottom:0,createNode:function(){var u=c.config.doc.createElement("canvas"),v=this.get("id");this._context=u.getContext("2d");u.setAttribute("overflow","visible");u.style.overflow="visible";u.setAttribute("id",v);v="#"+v;this.node=u;this.addClass("yui3-"+q+" yui3-"+this.name);},on:function(v,u){if(c.Node.DOM_EVENTS[v]){return c.one("#"+this.get("id")).on(v,u);}return c.on.apply(this,arguments);},_setStrokeProps:function(A){var v=A.color,z=g(A.weight),y=g(A.opacity),x=A.linejoin||"round",w=A.linecap||"butt",u=A.dashstyle;this._miterlimit=null;this._dashstyle=(u&&c.Lang.isArray(u)&&u.length>1)?u:null;this._strokeWeight=z;if(m(z)&&z>0){this._stroke=1;}else{this._stroke=0;}if(m(y)){this._strokeStyle=this._toRGBA(v,y);}else{this._strokeStyle=v;}this._linecap=w;if(x=="round"||x=="square"){this._linejoin=x;}else{x=parseInt(x,10);if(m(x)){this._miterlimit=Math.max(x,1);this._linejoin="miter";}}},set:function(){var u=this,v=arguments[0];k.prototype.set.apply(u,arguments);if(u.initialized){u._updateHandler();}},_setFillProps:function(y){var w=m,u=y.color,v,x=y.type;if(x=="linear"||x=="radial"){this._fillType=x;}else{if(u){v=y.opacity;if(w(v)){v=Math.max(0,Math.min(1,v));u=this._toRGBA(u,v);}else{u=r(u);}this._fillColor=u;this._fillType="solid";}else{this._fillColor=null;}}},translate:function(u,v){this._translateX+=u;this._translateY+=v;this._addTransform("translate",arguments);},translateX:function(u){this._translateX+=u;this._addTransform("translateX",arguments);},translateY:function(u){this._translateY+=u;this._addTransform("translateY",arguments);},skew:function(u,v){this._addTransform("skew",arguments);},skewX:function(u){this._addTransform("skewX",arguments);},skewY:function(u){this._addTransform("skewY",arguments);},rotate:function(u){this._rotation=u;this._addTransform("rotate",arguments);},scale:function(u,v){this._addTransform("scale",arguments);},_rotation:0,_transform:"",_addTransform:function(v,u){u=c.Array(u);this._transform=s.trim(this._transform+" "+v+"("+u.join(", ")+")");u.unshift(v);this._transforms.push(u);if(this.initialized){this._updateTransform();}},_updateTransform:function(){var A=this.node,z,x,w=this.get("transformOrigin"),v=this.matrix,y=0,u=this._transforms.length;if(this._transforms&&this._transforms.length>0){for(;y0){u=F.shift();if(u){if(u&&u=="lineTo"&&this._dashstyle){F.unshift(this._xcoords[C]-this._left,this._ycoords[C]-this._top);this._drawDashedLine.apply(this,F);}else{v[u].apply(v,F);}}}}if(this._fillType){if(this._fillType=="linear"){v.fillStyle=this._getLinearGradient();}else{if(this._fillType=="radial"){v.fillStyle=this._getRadialGradient();}else{v.fillStyle=this._fillColor;}}v.closePath();v.fill();}if(this._stroke){if(this._strokeWeight){v.lineWidth=this._strokeWeight;}v.lineCap=this._linecap;v.lineJoin=this._linejoin; +if(this._miterlimit){v.miterLimit=this._miterlimit;}v.strokeStyle=this._strokeStyle;v.stroke();}this._drawingComplete=true;this._clearAndUpdateCoords();this._updateNodePosition();this._methods=x;}},_drawDashedLine:function(D,J,u,G){var v=this._context,H=this._dashstyle[0],F=this._dashstyle[1],x=H+F,A=u-D,E=G-J,I=Math.sqrt(Math.pow(A,2)+Math.pow(E,2)),y=Math.floor(Math.abs(I/x)),w=Math.atan2(E,A),C=D,B=J,z;A=Math.cos(w)*x;E=Math.sin(w)*x;for(z=0;zH){v.lineTo(C+Math.cos(w)*H,B+Math.sin(w)*H);}else{if(I>0){v.lineTo(C+Math.cos(w)*I,B+Math.sin(w)*I);}}v.moveTo(u,G);},clear:function(){this._initProps();if(this.node){this._context.clearRect(0,0,this.node.width,this.node.height);}return this;},getBounds:function(){var S=this.get("rotation"),z=Math.PI/180,R=g(g(Math.sin(S*z)).toFixed(8)),B=g(g(Math.cos(S*z)).toFixed(8)),O=this.get("width"),T=this.get("height"),C=this.get("stroke"),M=this.get("x"),K=this.get("y"),U=M+O,E=K+T,G,D,L,I,P,N,J,v,u=0,W=this.get("translateX"),V=this.get("translateY"),A={},Q=this.get("transformOrigin"),H=Q[0],F=Q[1];if(C&&C.weight){u=C.weight;}if(S!==0){H=M+(H*O);F=K+(F*T);G=this._getRotatedCornerX(M,K,H,F,B,R);D=this._getRotatedCornerY(M,K,H,F,B,R);L=this._getRotatedCornerX(M,E,H,F,B,R);I=this._getRotatedCornerY(M,E,H,F,B,R);P=this._getRotatedCornerX(U,E,H,F,B,R);N=this._getRotatedCornerY(U,E,H,F,B,R);J=this._getRotatedCornerX(U,K,H,F,B,R);v=this._getRotatedCornerY(U,K,H,F,B,R);A.left=Math.min(G,Math.min(L,Math.min(P,J)));A.right=Math.max(G,Math.max(L,Math.max(P,J)));A.top=Math.min(D,Math.min(I,Math.min(N,v)));A.bottom=Math.max(D,Math.max(I,Math.max(N,v)));}else{A.left=M-u+W;A.top=K-u+V;A.right=M+O+u+W;A.bottom=K+T+u+V;}return A;},_getRotatedCornerX:function(v,B,u,A,w,z){return(u+(v-u)*w+(B-A)*z);},_getRotatedCornerY:function(v,B,u,A,w,z){return(A-(v-u)*z+(B-A)*w);},destroy:function(){var v=this.node,u=this._context;if(v){if(u){u.clearRect(0,0,v.width,v.height);}if(this._graphic&&this._graphic._node){this._graphic._node.removeChild(this.node);}}}},c.CanvasDrawing.prototype));l.ATTRS={transformOrigin:{valueFn:function(){return[0.5,0.5];}},transform:{setter:function(u){this.matrix.init();this._transforms=this.matrix.getTransformArray(u);this._transform=u;if(this.initialized){this._updateTransform();}return u;},getter:function(){return this._transform;}},node:{readOnly:true,getter:function(){return this.node;}},id:{valueFn:function(){return c.guid();},setter:function(v){var u=this.node;if(u){u.setAttribute("id",v);}return v;}},width:{value:0},height:{value:0},x:{value:0},y:{value:0},visible:{value:true,setter:function(v){var u=v?"visible":"hidden";this.get("node").style.visibility=u;return v;}},fill:{valueFn:"_getDefaultFill",setter:function(w){var v,u=this.get("fill")||this._getDefaultFill();v=(w)?c.merge(u,w):null;if(v&&v.color){if(v.color===undefined||v.color=="none"){v.color=null;}}this._setFillProps(v);return v;}},stroke:{valueFn:"_getDefaultStroke",setter:function(v){var u=this.get("stroke")||this._getDefaultStroke();v=(v)?c.merge(u,v):null;this._setStrokeProps(v);return v;}},autoSize:{value:false},pointerEvents:{value:"visiblePainted"},graphic:{readOnly:true,getter:function(){return this._graphic;}}};c.CanvasShape=l;n=function(u){n.superclass.constructor.apply(this,arguments);};n.NAME="canvasPath";c.extend(n,c.CanvasShape,{_type:"path",_draw:function(){this._paint();},createNode:function(){var u=c.config.doc.createElement("canvas"),v=this.get("id");this._context=u.getContext("2d");u.setAttribute("overflow","visible");u.setAttribute("pointer-events","none");u.style.pointerEvents="none";u.style.overflow="visible";u.setAttribute("id",v);v="#"+v;this.node=u;this.addClass("yui3-"+q+" yui3-"+this.name);},end:function(){this._draw();}});n.ATTRS=c.merge(c.CanvasShape.ATTRS,{width:{getter:function(){var u=this._stroke&&this._strokeWeight?(this._strokeWeight*2):0;return this._width-u;},setter:function(u){this._width=u;return u;}},height:{getter:function(){var u=this._stroke&&this._strokeWeight?(this._strokeWeight*2):0;return this._height-u;},setter:function(u){this._height=u;return u;}},path:{readOnly:true,getter:function(){return this._path;}}});c.CanvasPath=n;t=function(){t.superclass.constructor.apply(this,arguments);};t.NAME="canvasRect";c.extend(t,c.CanvasShape,{_type:"rect",_draw:function(){var u=this.get("width"),v=this.get("height");this.clear();this.drawRect(0,0,u,v);this._paint();}});t.ATTRS=c.CanvasShape.ATTRS;c.CanvasRect=t;o=function(u){o.superclass.constructor.apply(this,arguments);};o.NAME="canvasEllipse";c.extend(o,l,{_type:"ellipse",_draw:function(){var u=this.get("width"),v=this.get("height");this.clear();this.drawEllipse(0,0,u,v);this._paint();}});o.ATTRS=l.ATTRS;c.CanvasEllipse=o;i=function(u){i.superclass.constructor.apply(this,arguments);};i.NAME="canvasCircle";c.extend(i,c.CanvasShape,{_type:"circle",_draw:function(){var u=this.get("radius");if(u){this.clear();this.drawCircle(0,0,u);this._paint();}}});i.ATTRS=c.merge(c.CanvasShape.ATTRS,{width:{setter:function(u){this.set("radius",u/2);return u;},getter:function(){return this.get("radius")*2;}},height:{setter:function(u){this.set("radius",u/2);return u;},getter:function(){return this.get("radius")*2;}},radius:{lazyAdd:false}});c.CanvasCircle=i;f=function(){f.superclass.constructor.apply(this,arguments);};f.NAME="canvasPieSlice";c.extend(f,c.CanvasShape,{_type:"path",_draw:function(A){var v=this.get("cx"),B=this.get("cy"),z=this.get("startAngle"),w=this.get("arc"),u=this.get("radius");this.clear();this._left=v;this._right=u;this._top=B;this._bottom=u;this.drawWedge(v,B,z,w,u);this.end();}});f.ATTRS=c.mix({cx:{value:0},cy:{value:0},startAngle:{value:0},arc:{value:0},radius:{value:0}},c.CanvasShape.ATTRS);c.CanvasPieSlice=f;function d(u){d.superclass.constructor.apply(this,arguments);}d.NAME="canvasGraphic";d.ATTRS={render:{},id:{valueFn:function(){return c.guid();},setter:function(v){var u=this._node; +if(u){u.setAttribute("id",v);}return v;}},shapes:{readOnly:true,getter:function(){return this._shapes;}},contentBounds:{readOnly:true,getter:function(){return this._contentBounds;}},node:{readOnly:true,getter:function(){return this._node;}},width:{setter:function(u){if(this._node){this._node.style.width=u+"px";}return u;}},height:{setter:function(u){if(this._node){this._node.style.height=u+"px";}return u;}},autoSize:{value:false},resizeDown:{getter:function(){return this._resizeDown;},setter:function(u){this._resizeDown=u;this._redraw();return u;}},x:{getter:function(){return this._x;},setter:function(u){this._x=u;if(this._node){this._node.style.left=u+"px";}return u;}},y:{getter:function(){return this._y;},setter:function(u){this._y=u;if(this._node){this._node.style.top=u+"px";}return u;}},autoDraw:{value:true},visible:{value:true,setter:function(u){this._toggleVisible(u);return u;}}};c.extend(d,c.BaseGraphic,{_x:0,_y:0,getXY:function(){var u=c.one(this._node),v;if(u){v=u.getXY();}return v;},_resizeDown:false,initializer:function(v){var y=this.get("render"),u=this.get("width")||0,x=this.get("height")||0;this._shapes={};this._redrawQueue={};this._contentBounds={left:0,top:0,right:0,bottom:0};this._node=e.createElement("div");this._node.style.position="absolute";this.set("width",u);this.set("height",x);if(y){this.render(y);}},render:function(y){var u=c.one(y),z=this._node,v=this.get("width")||parseInt(u.getComputedStyle("width"),10),x=this.get("height")||parseInt(u.getComputedStyle("height"),10);u=u||e.body;u.appendChild(z);z.style.display="block";z.style.position="absolute";z.style.left="0px";z.style.top="0px";this.set("width",v);this.set("height",x);this.parentNode=u;return this;},destroy:function(){this._removeAllShapes();this._removeChildren(this._node);if(this._node&&this._node.parentNode){this._node.parentNode.removeChild(this._node);}},addShape:function(u){u.graphic=this;var w=this._getShapeClass(u.type),v=new w(u);this._appendShape(v);return v;},_appendShape:function(v){var w=v.node,u=this._frag||this._node;if(this.get("autoDraw")){u.appendChild(w);}else{this._getDocFrag().appendChild(w);}},removeShape:function(u){if(!(u instanceof l)){if(s.isString(u)){u=this._shapes[u];}}if(u&&u instanceof l){u.destroy();delete this._shapes[u.get("id")];}if(this.get("autoDraw")){this._redraw();}return u;},removeAllShapes:function(){var u=this._shapes,v;for(v in u){if(u.hasOwnProperty(v)){u[v].destroy();}}this._shapes={};},_removeChildren:function(u){if(u.hasChildNodes()){var v;while(u.firstChild){v=u.firstChild;this._removeChildren(v);u.removeChild(v);}}},_toggleVisible:function(x){var w,v=this._shapes,u=x?"visible":"hidden";if(v){for(w in v){if(v.hasOwnProperty(w)){v[w].set("visible",x);}}}this._node.style.visibility=u;},_getShapeClass:function(v){var u=this._shapeClass[v];if(u){return u;}return v;},_shapeClass:{circle:c.CanvasCircle,rect:c.CanvasRect,path:c.CanvasPath,ellipse:c.CanvasEllipse,pieslice:c.CanvasPieSlice},getShapeById:function(v){var u=this._shapes[v];return u;},batch:function(v){var u=this.get("autoDraw");this.set("autoDraw",false);v();this._redraw();this.set("autoDraw",u);},_getDocFrag:function(){if(!this._frag){this._frag=e.createDocumentFragment();}return this._frag;},_redraw:function(){var u=this.get("resizeDown")?this._getUpdatedContentBounds():this._contentBounds;if(this.get("autoSize")){this.set("width",u.right);this.set("height",u.bottom);}if(this._frag){this._node.appendChild(this._frag);this._frag=null;}},addToRedrawQueue:function(u){var w,v;this._shapes[u.get("id")]=u;if(!this.get("resizeDown")){w=u.getBounds();v=this._contentBounds;v.left=v.leftw.right?v.right:w.right;v.bottom=v.bottom>w.bottom?v.bottom:w.bottom;v.width=v.right-v.left;v.height=v.bottom-v.top;this._contentBounds=v;}if(this.get("autoDraw")){this._redraw();}},_getUpdatedContentBounds:function(){var y,w,v,u=this._shapes,x={left:0,top:0,right:0,bottom:0};for(w in u){if(u.hasOwnProperty(w)){v=u[w];y=v.getBounds();x.left=Math.min(x.left,y.left);x.top=Math.min(x.top,y.top);x.right=Math.max(x.right,y.right);x.bottom=Math.max(x.bottom,y.bottom);}}x.width=x.right-x.left;x.height=x.bottom-x.top;this._contentBounds=x;return x;}});c.CanvasGraphic=d;},"@VERSION@",{requires:["graphics"],skinnable:false}); \ No newline at end of file diff --git a/build/graphics-canvas/graphics-canvas.js b/build/graphics-canvas/graphics-canvas.js index c68b4140d7d..d2d57f132b9 100644 --- a/build/graphics-canvas/graphics-canvas.js +++ b/build/graphics-canvas/graphics-canvas.js @@ -130,15 +130,6 @@ CanvasDrawing.prototype = { node.style.left = (x + this._left) + "px"; node.style.top = (y + this._top) + "px"; }, - - /** - * Holds queue of properties for the target canvas. - * - * @property _properties - * @type Object - * @private - */ - _properties: null, /** * Queues up a method to be executed when a shape redraws. @@ -1164,22 +1155,6 @@ Y.extend(CanvasShape, Y.BaseGraphic, Y.mix({ { this._addTransform("scale", arguments); }, - - /** - * Applies a matrix transformation - * - * @method matrix - * @param {Number} a - * @param {Number} b - * @param {Number} c - * @param {Number} d - * @param {Number} dx - * @param {Number} dy - */ - matrix: function(a, b, c, d, dx, dy) - { - this._addTransform("matrix", arguments); - }, /** * Storage for `rotation` atribute. @@ -1189,6 +1164,15 @@ Y.extend(CanvasShape, Y.BaseGraphic, Y.mix({ * @private */ _rotation: 0, + + /** + * Storage for the transform attribute. + * + * @property _transform + * @type String + * @private + */ + _transform: "", /** * Adds a transform to the shape. @@ -1201,9 +1185,10 @@ Y.extend(CanvasShape, Y.BaseGraphic, Y.mix({ _addTransform: function(type, args) { args = Y.Array(args); + this._transform = Y_LANG.trim(this._transform + " " + type + "(" + args.join(", ") + ")"); args.unshift(type); this._transforms.push(args); - if(this.initialized) + if(this.initialized) { this._updateTransform(); } @@ -1596,23 +1581,32 @@ CanvasShape.ATTRS = { return [0.5, 0.5]; } }, - - /** - * The rotation (in degrees) of the shape. + + /** + * A css transform string. * - * @config rotation - * @type Number + * @config transform + * @type String + * + * @writeOnly */ - rotation: { + transform: { setter: function(val) { - this.rotate(val); + this.matrix.init(); + this._transforms = this.matrix.getTransformArray(val); + this._transform = val; + if(this.initialized) + { + this._updateTransform(); + } + return val; }, - getter: function() - { - return this._rotation; - } + getter: function() + { + return this._transform; + } }, /** diff --git a/build/graphics-svg/graphics-svg-debug.js b/build/graphics-svg/graphics-svg-debug.js index b496c467cd7..35b49d016bd 100644 --- a/build/graphics-svg/graphics-svg-debug.js +++ b/build/graphics-svg/graphics-svg-debug.js @@ -769,15 +769,11 @@ Y.extend(SVGShape, Y.BaseGraphic, Y.mix({ h = this.get("height"), rotation = fill.rotation, radCon = Math.PI/180, - sinRadians = parseFloat(parseFloat(Math.sin(rotation * radCon)).toFixed(8)), - cosRadians = parseFloat(parseFloat(Math.cos(rotation * radCon)).toFixed(8)), tanRadians = parseFloat(parseFloat(Math.tan(rotation * radCon)).toFixed(8)), i, len, def, stop, - x = this.get("x"), - y = this.get("y"), x1 = "0%", x2 = "100%", y1 = "0%", @@ -983,22 +979,6 @@ Y.extend(SVGShape, Y.BaseGraphic, Y.mix({ this._addTransform("scale", arguments); }, - /** - * Applies a matrix transformation - * - * @method matrix - * @param {Number} a - * @param {Number} b - * @param {Number} c - * @param {Number} d - * @param {Number} dx - * @param {Number} dy - */ - matrix: function(a, b, c, d, dx, dy) - { - this._addTransform("matrix", arguments); - }, - /** * Adds a transform to the shape. * @@ -1010,6 +990,7 @@ Y.extend(SVGShape, Y.BaseGraphic, Y.mix({ _addTransform: function(type, args) { args = Y.Array(args); + this._transform = Y_LANG.trim(this._transform + " " + type + "(" + args.join(", ") + ")"); args.unshift(type); this._transforms.push(args); if(this.initialized) @@ -1029,10 +1010,7 @@ Y.extend(SVGShape, Y.BaseGraphic, Y.mix({ var isPath = this._type == "path", node = this.node, key, - args, - val, transform, - test, transformOrigin, x, y, @@ -1145,6 +1123,15 @@ Y.extend(SVGShape, Y.BaseGraphic, Y.mix({ * @private */ _translateY: 0, + + /** + * Storage for the transform attribute. + * + * @property _transform + * @type String + * @private + */ + _transform: "", /** * Returns the bounds for a shape. @@ -1172,7 +1159,6 @@ Y.extend(SVGShape, Y.BaseGraphic, Y.mix({ d = matrix.d, dx = matrix.dx, dy = matrix.dy, - transformOrigin = this.get("transformOrigin"), w = this.get("width"), h = this.get("height"), //The svg path element does not have x and y coordinates. Shapes based on path use translate to "fake" x and y. As a @@ -1274,23 +1260,32 @@ SVGShape.ATTRS = { return [0.5, 0.5]; } }, - - /** - * The rotation (in degrees) of the shape. + + /** + * A css transform string. * - * @config rotation - * @type Number + * @config transform + * @type String + * + * @writeOnly */ - rotation: { + transform: { setter: function(val) { - this.rotate(val); + this.matrix.init(); + this._transforms = this.matrix.getTransformArray(val); + this._transform = val; + if(this.initialized) + { + this._updateTransform(); + } + return val; }, - getter: function() - { - return this._rotation; - } + getter: function() + { + return this._transform; + } }, /** diff --git a/build/graphics-svg/graphics-svg-min.js b/build/graphics-svg/graphics-svg-min.js index 50536babe17..e809e4dab51 100644 --- a/build/graphics-svg/graphics-svg-min.js +++ b/build/graphics-svg/graphics-svg-min.js @@ -1,4 +1,4 @@ YUI.add("graphics-svg",function(b){var i="svgShape",c=b.Lang,g=b.AttributeLite,d,l,f,h,k,e,j,m=b.config.doc;function a(){}a.prototype={_type:"path",curveTo:function(s,q,z,w,v,u){var o,t,r,n,p,A;if(this._pathType!=="C"){this._pathType="C";t=["C"];this._pathArray.push(t);}else{t=this._pathArray[Math.max(0,this._pathArray.length-1)];if(!t){t=[];this._pathArray.push(t);}}o=this._pathArray.length-1;this._pathArray[o]=this._pathArray[o].concat([Math.round(s),Math.round(q),Math.round(z),Math.round(w),v,u]);r=Math.max(v,Math.max(s,z));p=Math.max(u,Math.max(q,w));n=Math.min(v,Math.min(s,z));A=Math.min(u,Math.min(q,w));this._trackSize(r,p);this._trackSize(n,A);},quadraticCurveTo:function(s,r,v,u){var o,t,q,n,p,w;if(this._pathType!=="Q"){this._pathType="Q";t=["Q"];this._pathArray.push(t);}else{t=this._pathArray[Math.max(0,this._pathArray.length-1)];if(!t){t=[];this._pathArray.push(t);}}o=this._pathArray.length-1;this._pathArray[o]=this._pathArray[o].concat([Math.round(s),Math.round(r),Math.round(v),Math.round(u)]);q=Math.max(v,s);p=Math.max(u,r);n=Math.min(v,s);w=Math.min(u,r);this._trackSize(q,p);this._trackSize(n,w);},drawRect:function(n,q,o,p){this.moveTo(n,q);this.lineTo(n+o,q);this.lineTo(n+o,q+p);this.lineTo(n,q+p);this.lineTo(n,q);},drawRoundRect:function(n,s,o,q,p,r){this.moveTo(n,s+r);this.lineTo(n,s+q-r);this.quadraticCurveTo(n,s+q,n+p,s+q);this.lineTo(n+o-p,s+q);this.quadraticCurveTo(n+o,s+q,n+o,s+q-r);this.lineTo(n+o,s+r);this.quadraticCurveTo(n+o,s,n+o-p,s);this.lineTo(n+p,s);this.quadraticCurveTo(n,s,n,s+r);},drawWedge:function(A,v,F,u,q,r){var E,D,t,J,s,B,z,I,H,p,o,G=0,w=q*2,n,C;r=r||q;if(this._pathType!="M"){this._pathType="M";n=["M"];this._pathArray.push(n);}else{n=this._getCurrentArray();}C=this._pathArray.length-1;this._pathArray[C].push(A);this._pathArray[C].push(A);if(Math.abs(u)>360){u=360;}E=Math.ceil(Math.abs(u)/45);D=u/E;t=-(D/180)*Math.PI;J=(F/180)*Math.PI;if(E>0){B=A+Math.cos(F/180*Math.PI)*q;z=v+Math.sin(F/180*Math.PI)*r;this._pathType="L";C++;this._pathArray[C]=["L"];this._pathArray[C].push(Math.round(B));this._pathArray[C].push(Math.round(z));C++;this._pathType="Q";this._pathArray[C]=["Q"];for(;G0){s=o.shift();v=s.length;n=s[0];y+=" "+n+(s[1]-q);switch(n){case"L":case"M":case"Q":for(t=2;tthis._right){this._right=n;}if(nthis._bottom){this._bottom=o;}this._width=this._right-this._left;this._height=this._bottom-this._top;}};b.SVGDrawing=a;l=function(n){this._transforms=[];this.matrix=new b.Matrix();l.superclass.constructor.apply(this,arguments);};l.NAME="svgShape";b.extend(l,b.BaseGraphic,b.mix({init:function(){this.initializer.apply(this,arguments);},initializer:function(n){var o=this;o.createNode();o._graphic=n.graphic;o._updateHandler();},addClass:function(n){var o=this.node;o.className.baseVal=c.trim([o.className.baseVal,n].join(" "));},removeClass:function(n){var o=this.node,p=o.className.baseVal;p=p.replace(new RegExp(n+" "),n).replace(new RegExp(n),"");o.className.baseVal=p;},getXY:function(){var q=this._graphic,o=q.getXY(),n=this.get("x"),p=this.get("y");return[o[0]+n,o[1]+p];},setXY:function(o){var p=this._graphic,n=p.getXY();this.set("x",o[0]-n[0]);this.set("y",o[1]-n[1]);},contains:function(n){return n===b.one(this.node);},compareTo:function(n){var o=this.node;return o===n;},test:function(n){return b.Selector.test(this.node,n);},_getDefaultFill:function(){return{type:"solid",opacity:1,cx:0.5,cy:0.5,fx:0.5,fy:0.5,r:0.5};},_getDefaultStroke:function(){return{weight:1,dashstyle:"none",color:"#000",opacity:1};},createNode:function(){var n=m.createElementNS("http://www.w3.org/2000/svg","svg:"+this._type),p=this.get("id"),o=this.get("pointerEvents");this.node=n;this.addClass("yui3-"+i+" yui3-"+this.name);if(p){n.setAttribute("id",p);}if(o){n.setAttribute("pointer-events",o);}},on:function(o,n){if(b.Node.DOM_EVENTS[o]){return b.one("#"+this.get("id")).on(o,n);}return b.on.apply(this,arguments);},_strokeChangeHandler:function(s){var q=this.node,r=this.get("stroke"),p,n,t,o;if(r&&r.weight&&r.weight>0){o=r.linejoin||"round";p=parseFloat(r.opacity);n=r.dashstyle||"none";t=c.isArray(n)?n.toString():n;r.color=r.color||"#000000";r.weight=r.weight||1;r.opacity=c.isNumber(p)?p:1; -r.linecap=r.linecap||"butt";q.setAttribute("stroke-dasharray",t);q.setAttribute("stroke",r.color);q.setAttribute("stroke-linecap",r.linecap);q.setAttribute("stroke-width",r.weight);q.setAttribute("stroke-opacity",r.opacity);if(o=="round"||o=="bevel"){q.setAttribute("stroke-linejoin",o);}else{o=parseInt(o,10);if(c.isNumber(o)){q.setAttribute("stroke-miterlimit",Math.max(o,1));q.setAttribute("stroke-linejoin","miter");}}}else{q.setAttribute("stroke","none");}},_fillChangeHandler:function(r){var p=this.node,q=this.get("fill"),n,o;if(q){o=q.type;if(o=="linear"||o=="radial"){this._setGradientFill(q);p.setAttribute("fill","url(#grad"+this.get("id")+")");}else{if(!q.color){p.setAttribute("fill","none");}else{n=parseFloat(q.opacity);n=c.isNumber(n)?n:1;p.setAttribute("fill",q.color);p.setAttribute("fill-opacity",n);}}}else{p.setAttribute("fill","none");}},_setGradientFill:function(R){var A,u,Q,M,J=c.isNumber,I=this._graphic,v=R.type,P=I.getGradientNode("grad"+this.get("id"),v),B=R.stops,F=this.get("width"),V=this.get("height"),O=R.rotation,z=Math.PI/180,H=parseFloat(parseFloat(Math.sin(O*z)).toFixed(8)),C=parseFloat(parseFloat(Math.cos(O*z)).toFixed(8)),L=parseFloat(parseFloat(Math.tan(O*z)).toFixed(8)),S,U,G,N,E=this.get("x"),D=this.get("y"),W="0%",T="100%",s="0%",o="0%",q=R.cx,n=R.cy,t=R.fx,p=R.fy,K=R.r;if(v=="linear"){q=F/2;n=V/2;if(Math.abs(L)*F/2>=V/2){if(O<180){s=0;o=V;}else{s=V;o=0;}W=q-((n-s)/L);T=q-((n-o)/L);}else{if(O>90&&O<270){W=F;T=0;}else{W=0;T=F;}s=((L*(q-W))-n)*-1;o=((L*(q-T))-n)*-1;}P.setAttribute("spreadMethod","pad");P.setAttribute("width",F);P.setAttribute("height",V);P.setAttribute("x1",Math.round(100*W/F)+"%");P.setAttribute("y1",Math.round(100*s/V)+"%");P.setAttribute("x2",Math.round(100*T/F)+"%");P.setAttribute("y2",Math.round(100*o/V)+"%");}else{P.setAttribute("cx",(q*100)+"%");P.setAttribute("cy",(n*100)+"%");P.setAttribute("fx",(t*100)+"%");P.setAttribute("fy",(p*100)+"%");P.setAttribute("r",(K*100)+"%");}U=B.length;G=0;for(S=0;S0)){C=this.get("x");A=this.get("y");if(v){C+=this._left;A+=this._top;B.init({dx:C,dy:A});C=0;A=0;}for(;sp.right?o.right:p.right;o.bottom=o.bottom>p.bottom?o.bottom:p.bottom;o.width=o.right-o.left;o.height=o.bottom-o.top;this._contentBounds=o;}if(this.get("autoDraw")){this._redraw();}},_getUpdatedContentBounds:function(){var r,p,o,n=this._shapes,q={left:0,top:0,right:0,bottom:0};for(p in n){if(n.hasOwnProperty(p)){o=n[p];r=o.getBounds();q.left=Math.min(q.left,r.left);q.top=Math.min(q.top,r.top);q.right=Math.max(q.right,r.right);q.bottom=Math.max(q.bottom,r.bottom);}}q.width=q.right-q.left;q.height=q.bottom-q.top;this._contentBounds=q;return q;},_createGraphics:function(){var n=this._createGraphicNode("svg"),o=this.get("pointerEvents");n.style.position="absolute";n.style.top="px";n.style.left="0px";n.style.overflow="auto";n.setAttribute("overflow","auto");n.setAttribute("pointer-events",o);return n;},_createGraphicNode:function(p,n){var q=m.createElementNS("http://www.w3.org/2000/svg","svg:"+p),o=n||"none";if(p!=="defs"&&p!=="stop"&&p!=="linearGradient"&&p!="radialGradient"){q.setAttribute("pointer-events",o);}return q;},getGradientNode:function(p,q){var n=this._gradients,r,o=q+"Gradient";if(n.hasOwnProperty(p)&&n[p].tagName.indexOf(q)>-1){r=this._gradients[p];}else{r=this._createGraphicNode(o);if(!this._defs){this._defs=this._createGraphicNode("defs");this._contentNode.appendChild(this._defs);}this._defs.appendChild(r);p=p||"gradient"+Math.round(100000*Math.random());r.setAttribute("id",p);if(n.hasOwnProperty(p)){this._defs.removeChild(n[p]);}n[p]=r;}return r;}});b.SVGGraphic=d;},"@VERSION@",{requires:["graphics"],skinnable:false}); \ No newline at end of file +r.linecap=r.linecap||"butt";q.setAttribute("stroke-dasharray",t);q.setAttribute("stroke",r.color);q.setAttribute("stroke-linecap",r.linecap);q.setAttribute("stroke-width",r.weight);q.setAttribute("stroke-opacity",r.opacity);if(o=="round"||o=="bevel"){q.setAttribute("stroke-linejoin",o);}else{o=parseInt(o,10);if(c.isNumber(o)){q.setAttribute("stroke-miterlimit",Math.max(o,1));q.setAttribute("stroke-linejoin","miter");}}}else{q.setAttribute("stroke","none");}},_fillChangeHandler:function(r){var p=this.node,q=this.get("fill"),n,o;if(q){o=q.type;if(o=="linear"||o=="radial"){this._setGradientFill(q);p.setAttribute("fill","url(#grad"+this.get("id")+")");}else{if(!q.color){p.setAttribute("fill","none");}else{n=parseFloat(q.opacity);n=c.isNumber(n)?n:1;p.setAttribute("fill",q.color);p.setAttribute("fill-opacity",n);}}}else{p.setAttribute("fill","none");}},_setGradientFill:function(L){var y,u,K,G,D=c.isNumber,C=this._graphic,v=L.type,J=C.getGradientNode("grad"+this.get("id"),v),z=L.stops,A=this.get("width"),P=this.get("height"),I=L.rotation,x=Math.PI/180,F=parseFloat(parseFloat(Math.tan(I*x)).toFixed(8)),M,O,B,H,Q="0%",N="100%",s="0%",o="0%",q=L.cx,n=L.cy,t=L.fx,p=L.fy,E=L.r;if(v=="linear"){q=A/2;n=P/2;if(Math.abs(F)*A/2>=P/2){if(I<180){s=0;o=P;}else{s=P;o=0;}Q=q-((n-s)/F);N=q-((n-o)/F);}else{if(I>90&&I<270){Q=A;N=0;}else{Q=0;N=A;}s=((F*(q-Q))-n)*-1;o=((F*(q-N))-n)*-1;}J.setAttribute("spreadMethod","pad");J.setAttribute("width",A);J.setAttribute("height",P);J.setAttribute("x1",Math.round(100*Q/A)+"%");J.setAttribute("y1",Math.round(100*s/P)+"%");J.setAttribute("x2",Math.round(100*N/A)+"%");J.setAttribute("y2",Math.round(100*o/P)+"%");}else{J.setAttribute("cx",(q*100)+"%");J.setAttribute("cy",(n*100)+"%");J.setAttribute("fx",(t*100)+"%");J.setAttribute("fy",(p*100)+"%");J.setAttribute("r",(E*100)+"%");}O=z.length;B=0;for(M=0;M0)){z=this.get("x");v=this.get("y");if(u){z+=this._left;v+=this._top;w.init({dx:z,dy:v});z=0;v=0;}for(;rp.right?o.right:p.right;o.bottom=o.bottom>p.bottom?o.bottom:p.bottom;o.width=o.right-o.left;o.height=o.bottom-o.top;this._contentBounds=o;}if(this.get("autoDraw")){this._redraw();}},_getUpdatedContentBounds:function(){var r,p,o,n=this._shapes,q={left:0,top:0,right:0,bottom:0};for(p in n){if(n.hasOwnProperty(p)){o=n[p];r=o.getBounds();q.left=Math.min(q.left,r.left);q.top=Math.min(q.top,r.top);q.right=Math.max(q.right,r.right);q.bottom=Math.max(q.bottom,r.bottom);}}q.width=q.right-q.left;q.height=q.bottom-q.top;this._contentBounds=q;return q;},_createGraphics:function(){var n=this._createGraphicNode("svg"),o=this.get("pointerEvents");n.style.position="absolute";n.style.top="px";n.style.left="0px";n.style.overflow="auto";n.setAttribute("overflow","auto");n.setAttribute("pointer-events",o);return n;},_createGraphicNode:function(p,n){var q=m.createElementNS("http://www.w3.org/2000/svg","svg:"+p),o=n||"none";if(p!=="defs"&&p!=="stop"&&p!=="linearGradient"&&p!="radialGradient"){q.setAttribute("pointer-events",o);}return q;},getGradientNode:function(p,q){var n=this._gradients,r,o=q+"Gradient";if(n.hasOwnProperty(p)&&n[p].tagName.indexOf(q)>-1){r=this._gradients[p];}else{r=this._createGraphicNode(o);if(!this._defs){this._defs=this._createGraphicNode("defs");this._contentNode.appendChild(this._defs);}this._defs.appendChild(r);p=p||"gradient"+Math.round(100000*Math.random());r.setAttribute("id",p);if(n.hasOwnProperty(p)){this._defs.removeChild(n[p]);}n[p]=r;}return r;}});b.SVGGraphic=d;},"@VERSION@",{requires:["graphics"],skinnable:false}); \ No newline at end of file diff --git a/build/graphics-svg/graphics-svg.js b/build/graphics-svg/graphics-svg.js index b496c467cd7..35b49d016bd 100644 --- a/build/graphics-svg/graphics-svg.js +++ b/build/graphics-svg/graphics-svg.js @@ -769,15 +769,11 @@ Y.extend(SVGShape, Y.BaseGraphic, Y.mix({ h = this.get("height"), rotation = fill.rotation, radCon = Math.PI/180, - sinRadians = parseFloat(parseFloat(Math.sin(rotation * radCon)).toFixed(8)), - cosRadians = parseFloat(parseFloat(Math.cos(rotation * radCon)).toFixed(8)), tanRadians = parseFloat(parseFloat(Math.tan(rotation * radCon)).toFixed(8)), i, len, def, stop, - x = this.get("x"), - y = this.get("y"), x1 = "0%", x2 = "100%", y1 = "0%", @@ -983,22 +979,6 @@ Y.extend(SVGShape, Y.BaseGraphic, Y.mix({ this._addTransform("scale", arguments); }, - /** - * Applies a matrix transformation - * - * @method matrix - * @param {Number} a - * @param {Number} b - * @param {Number} c - * @param {Number} d - * @param {Number} dx - * @param {Number} dy - */ - matrix: function(a, b, c, d, dx, dy) - { - this._addTransform("matrix", arguments); - }, - /** * Adds a transform to the shape. * @@ -1010,6 +990,7 @@ Y.extend(SVGShape, Y.BaseGraphic, Y.mix({ _addTransform: function(type, args) { args = Y.Array(args); + this._transform = Y_LANG.trim(this._transform + " " + type + "(" + args.join(", ") + ")"); args.unshift(type); this._transforms.push(args); if(this.initialized) @@ -1029,10 +1010,7 @@ Y.extend(SVGShape, Y.BaseGraphic, Y.mix({ var isPath = this._type == "path", node = this.node, key, - args, - val, transform, - test, transformOrigin, x, y, @@ -1145,6 +1123,15 @@ Y.extend(SVGShape, Y.BaseGraphic, Y.mix({ * @private */ _translateY: 0, + + /** + * Storage for the transform attribute. + * + * @property _transform + * @type String + * @private + */ + _transform: "", /** * Returns the bounds for a shape. @@ -1172,7 +1159,6 @@ Y.extend(SVGShape, Y.BaseGraphic, Y.mix({ d = matrix.d, dx = matrix.dx, dy = matrix.dy, - transformOrigin = this.get("transformOrigin"), w = this.get("width"), h = this.get("height"), //The svg path element does not have x and y coordinates. Shapes based on path use translate to "fake" x and y. As a @@ -1274,23 +1260,32 @@ SVGShape.ATTRS = { return [0.5, 0.5]; } }, - - /** - * The rotation (in degrees) of the shape. + + /** + * A css transform string. * - * @config rotation - * @type Number + * @config transform + * @type String + * + * @writeOnly */ - rotation: { + transform: { setter: function(val) { - this.rotate(val); + this.matrix.init(); + this._transforms = this.matrix.getTransformArray(val); + this._transform = val; + if(this.initialized) + { + this._updateTransform(); + } + return val; }, - getter: function() - { - return this._rotation; - } + getter: function() + { + return this._transform; + } }, /** diff --git a/build/graphics-vml/graphics-vml-debug.js b/build/graphics-vml/graphics-vml-debug.js index 27d1fe176c8..328faefd412 100644 --- a/build/graphics-vml/graphics-vml-debug.js +++ b/build/graphics-vml/graphics-vml-debug.js @@ -321,7 +321,6 @@ VMLShape = function() this._transforms = []; this.matrix = new Y.Matrix(); this.rotationMatrix = new Y.Matrix(); - this.scaleMatrix = new Y.Matrix(); VMLShape.superclass.constructor.apply(this, arguments); }; @@ -937,9 +936,10 @@ Y.extend(VMLShape, Y.BaseGraphic, Y.mix({ _addTransform: function(type, args) { args = Y.Array(args); + this._transform = Y_LANG.trim(this._transform + " " + type + "(" + args.join(", ") + ")"); args.unshift(type); this._transforms.push(args); - if(this.initialized) + if(this.initialized) { this._updateTransform(); } @@ -951,10 +951,7 @@ Y.extend(VMLShape, Y.BaseGraphic, Y.mix({ _updateTransform: function() { var node = this.node, - coordSize, key, - args, - val, transform, transformOrigin, x = this.get("x"), @@ -976,7 +973,6 @@ Y.extend(VMLShape, Y.BaseGraphic, Y.mix({ keys = [], matrix = this.matrix, rotationMatrix = this.rotationMatrix, - scaleMatrix = this.scaleMatrix, i = 0, len = this._transforms.length; @@ -1031,6 +1027,7 @@ Y.extend(VMLShape, Y.BaseGraphic, Y.mix({ dx = matrix.dx; dy = matrix.dy; this._graphic.addToRedrawQueue(this); + //only apply the filter if necessary as it degrades image quality if(Y.Array.indexOf(keys, "skew") > -1 || Y.Array.indexOf(keys, "scale") > -1) { node.style.filter = transform; @@ -1061,7 +1058,17 @@ Y.extend(VMLShape, Y.BaseGraphic, Y.mix({ * @private */ _translateY: 0, - /** + + /** + * Storage for the transform attribute. + * + * @property _transform + * @type String + * @private + */ + _transform: "", + + /** * Applies translate transformation. * * @method translate @@ -1168,22 +1175,6 @@ Y.extend(VMLShape, Y.BaseGraphic, Y.mix({ this._addTransform("scale", arguments); }, - /** - * Applies a matrix transformation - * - * @method matrix - * @param {Number} a - * @param {Number} b - * @param {Number} c - * @param {Number} d - * @param {Number} dx - * @param {Number} dy - */ - matrix: function(a, b, c, d, dx, dy) - { - this._addTransform("matrix", arguments); - }, - /** * @private */ @@ -1292,8 +1283,7 @@ Y.extend(VMLShape, Y.BaseGraphic, Y.mix({ */ getBounds: function(cfg) { - var type = this._type, - wt, + var wt, bounds = {}, matrix = cfg || this.matrix, a = matrix.a, @@ -1302,7 +1292,6 @@ Y.extend(VMLShape, Y.BaseGraphic, Y.mix({ d = matrix.d, dx = matrix.dx, dy = matrix.dy, - transformOrigin = this.get("transformOrigin"), w = this.get("width"), h = this.get("height"), left = this.get("x"), @@ -1381,6 +1370,33 @@ VMLShape.ATTRS = { return [0.5, 0.5]; } }, + + /** + * A css transform string. + * + * @config transform + * @type String + * + * @writeOnly + */ + transform: { + setter: function(val) + { + this.matrix.init(); + this._transforms = this.matrix.getTransformArray(val); + this._transform = val; + if(this.initialized) + { + this._updateTransform(); + } + return val; + }, + + getter: function() + { + return this._transform; + } + }, /** * Indicates the x position of shape. diff --git a/build/graphics-vml/graphics-vml-min.js b/build/graphics-vml/graphics-vml-min.js index e9e2e5c87b7..a6d41bc1e19 100644 --- a/build/graphics-vml/graphics-vml-min.js +++ b/build/graphics-vml/graphics-vml-min.js @@ -1,4 +1,4 @@ -YUI.add("graphics-vml",function(b){var d=b.Lang,j=d.isNumber,f=d.isArray,h=b.DOM,c=b.Selector,m=b.config.doc,e=b.AttributeLite,p,l,o,k,n,i,a;function g(){}g.prototype={_currentX:0,_currentY:0,curveTo:function(t,s,A,z,w,v){var u,q,r,B;w=Math.round(w);v=Math.round(v);this._path+=" c "+Math.round(t)+", "+Math.round(s)+", "+Math.round(A)+", "+Math.round(z)+", "+w+", "+v;this._currentX=w;this._currentY=v;u=Math.max(w,Math.max(t,A));r=Math.max(v,Math.max(s,z));q=Math.min(w,Math.min(t,A));B=Math.min(v,Math.min(s,z));this._trackSize(u,r);this._trackSize(q,B);},quadraticCurveTo:function(v,u,z,w){var r=this._currentX,q=this._currentY,t=r+0.67*(v-r),s=q+0.67*(u-q),B=t+(z-r)*0.34,A=s+(w-q)*0.34;this.curveTo(t,s,B,A,z,w);},drawRect:function(q,t,r,s){this.moveTo(q,t);this.lineTo(q+r,t);this.lineTo(q+r,t+s);this.lineTo(q,t+s);this.lineTo(q,t);this._currentX=q;this._currentY=t;return this;},drawRoundRect:function(q,v,r,t,s,u){this.moveTo(q,v+u);this.lineTo(q,v+t-u);this.quadraticCurveTo(q,v+t,q+s,v+t);this.lineTo(q+r-s,v+t);this.quadraticCurveTo(q+r,v+t,q+r,v+t-u);this.lineTo(q+r,v+u);this.quadraticCurveTo(q+r,v,q+r-s,v);this.lineTo(q+s,v);this.quadraticCurveTo(q,v,q,v+u);return this;},drawWedge:function(s,w,u,t,r,q){var v=r*2;q=q||r;if(Math.abs(t)>360){t=360;}u*=-65535;t*=65536;this._path+=" m "+s+" "+w+" ae "+s+" "+w+" "+r+" "+q+" "+u+" "+t;this._trackSize(v,v);this._currentX=s;this._currentY=w;return this;},lineTo:function(v,u,s){var r=arguments,t,q;if(typeof v==="string"||typeof v==="number"){r=[[v,u]];}q=r.length;if(!this._path){this._path="";}this._path+=" l ";for(t=0;tthis._right){this._right=q;}if(qthis._bottom){this._bottom=r;}this._width=this._right-this._left;this._height=this._bottom-this._top;},_left:0,_right:0,_top:0,_bottom:0,_width:0,_height:0};b.VMLDrawing=g;p=function(){this._transforms=[];this.matrix=new b.Matrix();this.rotationMatrix=new b.Matrix();this.scaleMatrix=new b.Matrix();p.superclass.constructor.apply(this,arguments);};p.NAME="vmlShape";b.extend(p,b.BaseGraphic,b.mix({_type:"shape",init:function(){this.initializer.apply(this,arguments);},initializer:function(q){var r=this,s=q.graphic;r._graphic=s;r.createNode();this._updateHandler();},createNode:function(){var F,B=this.get("x"),z=this.get("y"),C=this.get("width"),H=this.get("height"),E,t,K,J,v,u,D,r,A,I,q,G,s;E=this.get("id");t=this._type;v="vml"+t+" yui3-vmlShape yui3-"+this.constructor.NAME;u=this._getStrokeProps();G=this._getFillProps();K="<"+t+' xmlns="urn:schemas-microsft.com:vml" id="'+E+'" class="'+v+'" style="behavior:url(#default#VML);display:inline-block;position:absolute;left:'+B+"px;top:"+z+"px;width:"+C+"px;height:"+H+'px;"';if(u&&u.weight&&u.weight>0){D=u.endcap;r=parseFloat(u.opacity);A=u.joinstyle;I=u.miterlimit;q=u.dashstyle;K+=' stroked="t" strokecolor="'+u.color+'" strokeWeight="'+u.weight+'px"';J='";F=m.createElement(K);if(this._strokeNode){F.appendChild(this._strokeNode);}if(this._fillNode){F.appendChild(this._fillNode);}this.node=F;this._strokeFlag=false;this._fillFlag=false;},addClass:function(q){var r=this.node;h.addClass(r,q);},removeClass:function(q){var r=this.node;h.removeClass(r,q);},getXY:function(){var t=this._graphic,r=t.getXY(),q=this.get("x"),s=this.get("y");return[r[0]+q,r[1]+s];},setXY:function(r){var s=this._graphic,q=s.getXY();this.set("x",r[0]-q[0]);this.set("y",r[1]-q[1]);},contains:function(q){return q===b.one(this.node);},compareTo:function(q){var r=this.node;return r===q;},test:function(q){return c.test(this.node,q);},_getStrokeProps:function(){var x,z=this.get("stroke"),v,r,t="",q,s=0,u,y,w;if(z&&z.weight&&z.weight>0){x={};y=z.linecap||"flat";w=z.linejoin||"round";if(y!="round"&&y!="square"){y="flat";}v=parseFloat(z.opacity);r=z.dashstyle||"none";z.color=z.color||"#000000";z.weight=z.weight||1;z.opacity=j(v)?v:1;x.stroked=true;x.color=z.color;x.weight=z.weight;x.endcap=y;x.opacity=z.opacity;if(f(r)){t=[];u=r.length;for(s=0;s0){z=A.linecap||"flat";y=A.linejoin||"round";if(z!="round"&&z!="square"){z="flat";}x=parseFloat(A.opacity);r=A.dashstyle||"none";A.color=A.color||"#000000";A.weight=A.weight||1;A.opacity=j(x)?x:1;s.stroked=true;s.strokeColor=A.color;s.strokeWeight=A.weight+"px";if(!this._strokeNode){this._strokeNode=this._createGraphicNode("stroke"); -s.appendChild(this._strokeNode);}this._strokeNode.endcap=z;this._strokeNode.opacity=A.opacity;if(f(r)){u=[];v=r.length;for(t=0;t';}}}}t.filled=u;}return t;},_fillChangeHandler:function(x){if(!this._fillFlag){return;}var t=this.node,w=this.get("fill"),q,s,u=false,r,v;if(w){if(w.type=="radial"||w.type=="linear"){u=true;v=this._getGradientFill(w);if(this._fillNode){for(r in v){if(v.hasOwnProperty(r)){this._fillNode.setAttribute(r,v[r]);}}}else{s='';this._fillNode=m.createElement(s);t.appendChild(this._fillNode);}}else{if(this._fillNode){this._fillNode.opacity=1;this._fillNode.type="solid";}}}}}t.filled=u;this._fillFlag=false;},_updateFillNode:function(q){if(!this._fillNode){this._fillNode=this._createGraphicNode("fill");q.appendChild(this._fillNode);}},_getGradientFill:function(K){var O={},C,A,z=K.type,D=this.get("width"),N=this.get("height"),E=j,I,B=K.stops,M=B.length,x,J,L=0,F,q="",u=K.cx,s=K.cy,v=K.fx,t=K.fy,G=K.r,y,H=K.rotation||0;if(z==="linear"){if(H<=270){H=Math.abs(H-270);}else{if(H<360){H=270+(360-H);}else{H=270;}}O.type="gradient";O.angle=H;}else{if(z==="radial"){C=D*(G*2);A=N*(G*2);v=G*2*(v-0.5);t=G*2*(t-0.5);v+=u;t+=s;O.focussize=(C/D)/10+"% "+(A/N)/10+"%";O.alignshape=false;O.type="gradientradial";O.focus="100%";O.focusposition=Math.round(v*100)+"% "+Math.round(t*100)+"%";}}for(;L0?L+1:"";O["opacity"+F]=x+"";q+=", "+y+" "+J;}}y=B[1].offset||0;y*=100;if(parseInt(y,10)<100){q+=", 100% "+J;}O.colors=q.substr(2);return O;},_addTransform:function(r,q){q=b.Array(q);q.unshift(r);this._transforms.push(q);if(this.initialized){this._updateTransform();}},_updateTransform:function(){var L=this.node,Q,U,s,V,G,H,B=this.get("x"),A=this.get("y"),D=this.get("width"),P=this.get("height"),u,t,F,C,K,J,q,T,r,z,S,R,I=[],M=this.matrix,E=this.rotationMatrix,v=this.scaleMatrix,N=0,O=this._transforms.length;if(this._transforms&&this._transforms.length>0){H=this.get("transformOrigin");for(;N-1||b.Array.indexOf(I,"scale")>-1){L.style.filter=G;}else{if(b.Array.indexOf(I,"rotate")>-1){L.style.rotation=this._rotation;F=E.dx;C=E.dy;}}this._transforms=[];B+=F;A+=C;L.style.left=B+"px";L.style.top=A+"px";},_translateX:0,_translateY:0,translate:function(q,r){this._translateX+=q;this._translateY+=r;this._addTransform("translate",arguments);},translateX:function(q){this._translateX+=q;this._addTransform("translateX",arguments);},translateY:function(q){this._translateY+=q;this._addTransform("translateY",arguments);},skew:function(q,r){this._addTransform("skew",arguments);},skewX:function(q){this._addTransform("skewX",arguments);},skewY:function(q){this._addTransform("skewY",arguments);},_rotation:0,rotate:function(q){this._rotation+=q;this._addTransform("rotate",arguments);},scale:function(q,r){this._addTransform("scale",arguments);},matrix:function(s,q,v,u,t,r){this._addTransform("matrix",arguments);},on:function(r,q){if(b.Node.DOM_EVENTS[r]){return b.one("#"+this.get("id")).on(r,q);}return b.on.apply(this,arguments);},_draw:function(){},_updateHandler:function(s){var r=this,q=r.node;r._fillChangeHandler();r._strokeChangeHandler();q.style.width=this.get("width")+"px";q.style.height=this.get("height")+"px";this._draw();r._updateTransform();},_createGraphicNode:function(q){q=q||this._type;return m.createElement("<"+q+' xmlns="urn:schemas-microsft.com:vml" style="behavior:url(#default#VML);display:inline-block;" class="vml'+q+'"/>');},_getDefaultFill:function(){return{type:"solid",cx:0.5,cy:0.5,fx:0.5,fy:0.5,r:0.5};},_getDefaultStroke:function(){return{weight:1,dashstyle:"none",color:"#000",opacity:1};},set:function(){var q=this; -e.prototype.set.apply(q,arguments);if(q.initialized){q._updateHandler();}},getBounds:function(y){var v=this._type,q,z={},I=y||this.matrix,R=I.a,Q=I.b,P=I.c,N=I.d,E=I.dx,C=I.dy,F=this.get("transformOrigin"),D=this.get("width"),L=this.get("height"),x=this.get("x"),G=this.get("y"),O=x+D,B=G+L,A=this.get("stroke"),M=(R*x+P*G+E),u=(Q*x+N*G+C),K=(R*O+P*G+E),t=(Q*O+N*G+C),J=(R*x+P*B+E),s=(Q*x+N*B+C),H=(R*O+P*B+E),r=(Q*O+N*B+C);z.left=Math.min(J,Math.min(M,Math.min(K,H)));z.right=Math.max(J,Math.max(M,Math.max(K,H)));z.top=Math.min(t,Math.min(r,Math.min(s,u)));z.bottom=Math.max(t,Math.max(r,Math.max(s,u)));if(A&&A.weight){q=A.weight;z.left-=q;z.right+=q;z.top-=q;z.bottom+=q;}z.width=z.right-z.left;z.height=z.bottom-z.top;return z;},destroy:function(){var q=this._graphic&&this._graphic._node?this._graphic._node:null,r=this.node;if(this.node){if(this._fillNode){r.removeChild(this._fillNode);}if(this._strokeNode){r.removeChild(this._strokeNode);}if(q){q.removeChild(r);}}}},b.VMLDrawing.prototype));p.ATTRS={transformOrigin:{valueFn:function(){return[0.5,0.5];}},x:{value:0},y:{value:0},id:{valueFn:function(){return b.guid();},setter:function(r){var q=this.node;if(q){q.setAttribute("id",r);}return r;}},width:{value:0},height:{value:0},visible:{value:true,setter:function(s){var r=this.node,q=s?"visible":"hidden";if(r){r.style.visibility=q;}return s;}},fill:{valueFn:"_getDefaultFill",setter:function(t){var r,s,q=this.get("fill")||this._getDefaultFill();if(t){if(t.hasOwnProperty("color")){t.type="solid";}for(r in t){if(t.hasOwnProperty(r)){q[r]=t[r];}}}s=q;if(s&&s.color){if(s.color===undefined||s.color=="none"){s.color=null;}}this._fillFlag=true;return s;}},stroke:{valueFn:"_getDefaultStroke",setter:function(t){var r,s,q=this.get("stroke")||this._getDefaultStroke();if(t){for(r in t){if(t.hasOwnProperty(r)){q[r]=t[r];}}}s=q;this._strokeFlag=true;return s;}},autoSize:{value:false},pointerEvents:{value:"visiblePainted"},node:{readOnly:true,getter:function(){return this.node;}},graphic:{readOnly:true,getter:function(){return this._graphic;}}};b.VMLShape=p;o=function(){o.superclass.constructor.apply(this,arguments);};o.NAME="vmlPath";b.extend(o,b.VMLShape,{_updateHandler:function(){var q=this;q._fillChangeHandler();q._strokeChangeHandler();q._updateTransform();}});o.ATTRS=b.merge(b.VMLShape.ATTRS,{width:{getter:function(){return this._width;},setter:function(q){this._width=q;return q;}},height:{getter:function(){return this._height;},setter:function(q){this._height=q;return q;}},path:{readOnly:true,getter:function(){return this._path;}}});b.VMLPath=o;k=function(){k.superclass.constructor.apply(this,arguments);};k.NAME="vmlRect";b.extend(k,b.VMLShape,{_type:"rect"});k.ATTRS=b.VMLShape.ATTRS;b.VMLRect=k;n=function(){n.superclass.constructor.apply(this,arguments);};n.NAME="vmlEllipse";b.extend(n,b.VMLShape,{_type:"oval"});n.ATTRS=b.merge(b.VMLShape.ATTRS,{xRadius:{lazyAdd:false,getter:function(){var q=this.get("width");q=Math.round((q/2)*100)/100;return q;},setter:function(r){var q=r*2;this.set("width",q);return r;}},yRadius:{lazyAdd:false,getter:function(){var q=this.get("height");q=Math.round((q/2)*100)/100;return q;},setter:function(r){var q=r*2;this.set("height",q);return r;}}});b.VMLEllipse=n;l=function(q){l.superclass.constructor.apply(this,arguments);};l.NAME="vmlCircle";b.extend(l,p,{_type:"oval"});l.ATTRS=b.merge(p.ATTRS,{radius:{lazyAdd:false,value:0},width:{setter:function(q){this.set("radius",q/2);return q;},getter:function(){var q=this.get("radius"),r=q&&q>0?q*2:0;return r;}},height:{setter:function(q){this.set("radius",q/2);return q;},getter:function(){var q=this.get("radius"),r=q&&q>0?q*2:0;return r;}}});b.VMLCircle=l;a=function(){a.superclass.constructor.apply(this,arguments);};a.NAME="vmlPieSlice";b.extend(a,b.VMLShape,b.mix({_type:"shape",_draw:function(u){var r=this.get("cx"),v=this.get("cy"),t=this.get("startAngle"),s=this.get("arc"),q=this.get("radius");this.clear();this.drawWedge(r,v,t,s,q);this.end();}},b.VMLDrawing.prototype));a.ATTRS=b.mix({cx:{value:0},cy:{value:0},startAngle:{value:0},arc:{value:0},radius:{value:0}},b.VMLShape.ATTRS);b.VMLPieSlice=a;i=function(){i.superclass.constructor.apply(this,arguments);};i.NAME="vmlGraphic";i.ATTRS={render:{},id:{valueFn:function(){return b.guid();},setter:function(r){var q=this._node;if(q){q.setAttribute("id",r);}return r;}},shapes:{readOnly:true,getter:function(){return this._shapes;}},contentBounds:{readOnly:true,getter:function(){return this._contentBounds;}},node:{readOnly:true,getter:function(){return this._node;}},width:{setter:function(q){if(this._node){this._node.style.width=q+"px";}return q;}},height:{setter:function(q){if(this._node){this._node.style.height=q+"px";}return q;}},autoSize:{value:false},resizeDown:{getter:function(){return this._resizeDown;},setter:function(q){this._resizeDown=q;this._redraw();return q;}},x:{getter:function(){return this._x;},setter:function(q){this._x=q;if(this._node){this._node.style.left=q+"px";}return q;}},y:{getter:function(){return this._y;},setter:function(q){this._y=q;if(this._node){this._node.style.top=q+"px";}return q;}},autoDraw:{value:true},visible:{value:true,setter:function(q){this._toggleVisible(q);return q;}}};b.extend(i,b.BaseGraphic,{_x:0,_y:0,getXY:function(){var q=b.one(this._node),r;if(q){r=q.getXY();}return r;},_resizeDown:false,initializer:function(q){var r=this.get("render");this._shapes={};this._contentBounds={left:0,top:0,right:0,bottom:0};this._node=this._createGraphic();this._node.setAttribute("id",this.get("id"));if(r){this.render(r);}},render:function(t){var q=b.one(t),r=this.get("width")||parseInt(q.getComputedStyle("width"),10),s=this.get("height")||parseInt(q.getComputedStyle("height"),10);q=q||m.body;q.appendChild(this._node);this.setSize(r,s);this.parentNode=q;this.set("width",r);this.set("height",s);return this;},destroy:function(){this.clear();this._node.parentNode.removeChild(this._node);},addShape:function(q){q.graphic=this;var s=this._getShapeClass(q.type),r=new s(q); -this._appendShape(r);return r;},_appendShape:function(r){var s=r.node,q=this._frag||this._node;if(this.get("autoDraw")){q.appendChild(s);}else{this._getDocFrag().appendChild(s);}},removeShape:function(q){if(!q instanceof p){if(d.isString(q)){q=this._shapes[q];}}if(q&&q instanceof p){q.destroy();delete this._shapes[q.get("id")];}if(this.get("autoDraw")){this._redraw();}},removeAllShapes:function(){var q=this._shapes,r;for(r in q){if(q.hasOwnProperty(r)){q[r].destroy();}}this._shapes={};},_removeChildren:function(q){if(q.hasChildNodes()){var r;while(q.firstChild){r=q.firstChild;this._removeChildren(r);q.removeChild(r);}}},clear:function(){this._removeAllShapes();this._removeChildren(this._node);},_toggleVisible:function(t){var s,r=this._shapes,q=t?"visible":"hidden";if(r){for(s in r){if(r.hasOwnProperty(s)){r[s].set("visible",t);}}}this._node.style.visibility=q;},setSize:function(q,r){q=Math.round(q);r=Math.round(r);this._node.style.width=q+"px";this._node.style.height=r+"px";this._node.coordSize=q+" "+r;},setPosition:function(q,r){q=Math.round(q);r=Math.round(r);this._node.style.left=q+"px";this._node.style.top=r+"px";},_createGraphic:function(){var q=m.createElement('');q.style.display="block";q.style.position="absolute";return q;},_createGraphicNode:function(q){return m.createElement("<"+q+' xmlns="urn:schemas-microsft.com:vml" style="behavior:url(#default#VML);display:inline-block;zoom:1;" />');},getShapeById:function(q){return this._shapes[q];},_getShapeClass:function(r){var q=this._shapeClass[r];if(q){return q;}return r;},_shapeClass:{circle:b.VMLCircle,rect:b.VMLRect,path:b.VMLPath,ellipse:b.VMLEllipse,pieslice:b.VMLPieSlice},batch:function(r){var q=this.get("autoDraw");this.set("autoDraw",false);r.apply();this._redraw();this.set("autoDraw",q);},_getDocFrag:function(){if(!this._frag){this._frag=m.createDocumentFragment();}return this._frag;},addToRedrawQueue:function(q){var s,r;this._shapes[q.get("id")]=q;if(!this.get("resizeDown")){s=q.getBounds();r=this._contentBounds;r.left=r.lefts.right?r.right:s.right;r.bottom=r.bottom>s.bottom?r.bottom:s.bottom;r.width=r.right-r.left;r.height=r.bottom-r.top;this._contentBounds=r;}if(this.get("autoDraw")){this._redraw();}},_redraw:function(){var q=this.get("resizeDown")?this._getUpdatedContentBounds():this._contentBounds;if(this.get("autoSize")){this.setSize(q.right,q.bottom);}if(this._frag){this._node.appendChild(this._frag);this._frag=null;}},_getUpdatedContentBounds:function(){var u,s,r,q=this._shapes,t={left:0,top:0,right:0,bottom:0};for(s in q){if(q.hasOwnProperty(s)){r=q[s];u=r.getBounds();t.left=Math.min(t.left,u.left);t.top=Math.min(t.top,u.top);t.right=Math.max(t.right,u.right);t.bottom=Math.max(t.bottom,u.bottom);}}t.width=t.right-t.left;t.height=t.bottom-t.top;this._contentBounds=t;return t;}});b.VMLGraphic=i;},"@VERSION@",{requires:["graphics"],skinnable:false}); \ No newline at end of file +YUI.add("graphics-vml",function(b){var d=b.Lang,j=d.isNumber,f=d.isArray,h=b.DOM,c=b.Selector,m=b.config.doc,e=b.AttributeLite,p,l,o,k,n,i,a;function g(){}g.prototype={_currentX:0,_currentY:0,curveTo:function(t,s,A,z,w,v){var u,q,r,B;w=Math.round(w);v=Math.round(v);this._path+=" c "+Math.round(t)+", "+Math.round(s)+", "+Math.round(A)+", "+Math.round(z)+", "+w+", "+v;this._currentX=w;this._currentY=v;u=Math.max(w,Math.max(t,A));r=Math.max(v,Math.max(s,z));q=Math.min(w,Math.min(t,A));B=Math.min(v,Math.min(s,z));this._trackSize(u,r);this._trackSize(q,B);},quadraticCurveTo:function(v,u,z,w){var r=this._currentX,q=this._currentY,t=r+0.67*(v-r),s=q+0.67*(u-q),B=t+(z-r)*0.34,A=s+(w-q)*0.34;this.curveTo(t,s,B,A,z,w);},drawRect:function(q,t,r,s){this.moveTo(q,t);this.lineTo(q+r,t);this.lineTo(q+r,t+s);this.lineTo(q,t+s);this.lineTo(q,t);this._currentX=q;this._currentY=t;return this;},drawRoundRect:function(q,v,r,t,s,u){this.moveTo(q,v+u);this.lineTo(q,v+t-u);this.quadraticCurveTo(q,v+t,q+s,v+t);this.lineTo(q+r-s,v+t);this.quadraticCurveTo(q+r,v+t,q+r,v+t-u);this.lineTo(q+r,v+u);this.quadraticCurveTo(q+r,v,q+r-s,v);this.lineTo(q+s,v);this.quadraticCurveTo(q,v,q,v+u);return this;},drawWedge:function(s,w,u,t,r,q){var v=r*2;q=q||r;if(Math.abs(t)>360){t=360;}u*=-65535;t*=65536;this._path+=" m "+s+" "+w+" ae "+s+" "+w+" "+r+" "+q+" "+u+" "+t;this._trackSize(v,v);this._currentX=s;this._currentY=w;return this;},lineTo:function(v,u,s){var r=arguments,t,q;if(typeof v==="string"||typeof v==="number"){r=[[v,u]];}q=r.length;if(!this._path){this._path="";}this._path+=" l ";for(t=0;tthis._right){this._right=q;}if(qthis._bottom){this._bottom=r;}this._width=this._right-this._left;this._height=this._bottom-this._top;},_left:0,_right:0,_top:0,_bottom:0,_width:0,_height:0};b.VMLDrawing=g;p=function(){this._transforms=[];this.matrix=new b.Matrix();this.rotationMatrix=new b.Matrix();p.superclass.constructor.apply(this,arguments);};p.NAME="vmlShape";b.extend(p,b.BaseGraphic,b.mix({_type:"shape",init:function(){this.initializer.apply(this,arguments);},initializer:function(q){var r=this,s=q.graphic;r._graphic=s;r.createNode();this._updateHandler();},createNode:function(){var F,B=this.get("x"),z=this.get("y"),C=this.get("width"),H=this.get("height"),E,t,K,J,v,u,D,r,A,I,q,G,s;E=this.get("id");t=this._type;v="vml"+t+" yui3-vmlShape yui3-"+this.constructor.NAME;u=this._getStrokeProps();G=this._getFillProps();K="<"+t+' xmlns="urn:schemas-microsft.com:vml" id="'+E+'" class="'+v+'" style="behavior:url(#default#VML);display:inline-block;position:absolute;left:'+B+"px;top:"+z+"px;width:"+C+"px;height:"+H+'px;"';if(u&&u.weight&&u.weight>0){D=u.endcap;r=parseFloat(u.opacity);A=u.joinstyle;I=u.miterlimit;q=u.dashstyle;K+=' stroked="t" strokecolor="'+u.color+'" strokeWeight="'+u.weight+'px"';J='";F=m.createElement(K);if(this._strokeNode){F.appendChild(this._strokeNode);}if(this._fillNode){F.appendChild(this._fillNode);}this.node=F;this._strokeFlag=false;this._fillFlag=false;},addClass:function(q){var r=this.node;h.addClass(r,q);},removeClass:function(q){var r=this.node;h.removeClass(r,q);},getXY:function(){var t=this._graphic,r=t.getXY(),q=this.get("x"),s=this.get("y");return[r[0]+q,r[1]+s];},setXY:function(r){var s=this._graphic,q=s.getXY();this.set("x",r[0]-q[0]);this.set("y",r[1]-q[1]);},contains:function(q){return q===b.one(this.node);},compareTo:function(q){var r=this.node;return r===q;},test:function(q){return c.test(this.node,q);},_getStrokeProps:function(){var x,z=this.get("stroke"),v,r,t="",q,s=0,u,y,w;if(z&&z.weight&&z.weight>0){x={};y=z.linecap||"flat";w=z.linejoin||"round";if(y!="round"&&y!="square"){y="flat";}v=parseFloat(z.opacity);r=z.dashstyle||"none";z.color=z.color||"#000000";z.weight=z.weight||1;z.opacity=j(v)?v:1;x.stroked=true;x.color=z.color;x.weight=z.weight;x.endcap=y;x.opacity=z.opacity;if(f(r)){t=[];u=r.length;for(s=0;s0){z=A.linecap||"flat";y=A.linejoin||"round";if(z!="round"&&z!="square"){z="flat";}x=parseFloat(A.opacity);r=A.dashstyle||"none";A.color=A.color||"#000000";A.weight=A.weight||1;A.opacity=j(x)?x:1;s.stroked=true;s.strokeColor=A.color;s.strokeWeight=A.weight+"px";if(!this._strokeNode){this._strokeNode=this._createGraphicNode("stroke");s.appendChild(this._strokeNode); +}this._strokeNode.endcap=z;this._strokeNode.opacity=A.opacity;if(f(r)){u=[];v=r.length;for(t=0;t';}}}}t.filled=u;}return t;},_fillChangeHandler:function(x){if(!this._fillFlag){return;}var t=this.node,w=this.get("fill"),q,s,u=false,r,v;if(w){if(w.type=="radial"||w.type=="linear"){u=true;v=this._getGradientFill(w);if(this._fillNode){for(r in v){if(v.hasOwnProperty(r)){this._fillNode.setAttribute(r,v[r]);}}}else{s='';this._fillNode=m.createElement(s);t.appendChild(this._fillNode);}}else{if(this._fillNode){this._fillNode.opacity=1;this._fillNode.type="solid";}}}}}t.filled=u;this._fillFlag=false;},_updateFillNode:function(q){if(!this._fillNode){this._fillNode=this._createGraphicNode("fill");q.appendChild(this._fillNode);}},_getGradientFill:function(K){var O={},C,A,z=K.type,D=this.get("width"),N=this.get("height"),E=j,I,B=K.stops,M=B.length,x,J,L=0,F,q="",u=K.cx,s=K.cy,v=K.fx,t=K.fy,G=K.r,y,H=K.rotation||0;if(z==="linear"){if(H<=270){H=Math.abs(H-270);}else{if(H<360){H=270+(360-H);}else{H=270;}}O.type="gradient";O.angle=H;}else{if(z==="radial"){C=D*(G*2);A=N*(G*2);v=G*2*(v-0.5);t=G*2*(t-0.5);v+=u;t+=s;O.focussize=(C/D)/10+"% "+(A/N)/10+"%";O.alignshape=false;O.type="gradientradial";O.focus="100%";O.focusposition=Math.round(v*100)+"% "+Math.round(t*100)+"%";}}for(;L0?L+1:"";O["opacity"+F]=x+"";q+=", "+y+" "+J;}}y=B[1].offset||0;y*=100;if(parseInt(y,10)<100){q+=", 100% "+J;}O.colors=q.substr(2);return O;},_addTransform:function(r,q){q=b.Array(q);this._transform=d.trim(this._transform+" "+r+"("+q.join(", ")+")");q.unshift(r);this._transforms.push(q);if(this.initialized){this._updateTransform();}},_updateTransform:function(){var J=this.node,Q,E,F,z=this.get("x"),v=this.get("y"),B=this.get("width"),N=this.get("height"),t,r,D,A,I,H,q,R,s,u,P,O,G=[],K=this.matrix,C=this.rotationMatrix,L=0,M=this._transforms.length;if(this._transforms&&this._transforms.length>0){F=this.get("transformOrigin");for(;L-1||b.Array.indexOf(G,"scale")>-1){J.style.filter=E;}else{if(b.Array.indexOf(G,"rotate")>-1){J.style.rotation=this._rotation;D=C.dx;A=C.dy;}}this._transforms=[];z+=D;v+=A;J.style.left=z+"px";J.style.top=v+"px";},_translateX:0,_translateY:0,_transform:"",translate:function(q,r){this._translateX+=q;this._translateY+=r;this._addTransform("translate",arguments);},translateX:function(q){this._translateX+=q;this._addTransform("translateX",arguments);},translateY:function(q){this._translateY+=q;this._addTransform("translateY",arguments);},skew:function(q,r){this._addTransform("skew",arguments);},skewX:function(q){this._addTransform("skewX",arguments);},skewY:function(q){this._addTransform("skewY",arguments);},_rotation:0,rotate:function(q){this._rotation+=q;this._addTransform("rotate",arguments);},scale:function(q,r){this._addTransform("scale",arguments);},on:function(r,q){if(b.Node.DOM_EVENTS[r]){return b.one("#"+this.get("id")).on(r,q);}return b.on.apply(this,arguments);},_draw:function(){},_updateHandler:function(s){var r=this,q=r.node;r._fillChangeHandler();r._strokeChangeHandler();q.style.width=this.get("width")+"px";q.style.height=this.get("height")+"px";this._draw();r._updateTransform();},_createGraphicNode:function(q){q=q||this._type;return m.createElement("<"+q+' xmlns="urn:schemas-microsft.com:vml" style="behavior:url(#default#VML);display:inline-block;" class="vml'+q+'"/>');},_getDefaultFill:function(){return{type:"solid",cx:0.5,cy:0.5,fx:0.5,fy:0.5,r:0.5};},_getDefaultStroke:function(){return{weight:1,dashstyle:"none",color:"#000",opacity:1};},set:function(){var q=this;e.prototype.set.apply(q,arguments); +if(q.initialized){q._updateHandler();}},getBounds:function(x){var q,y={},G=x||this.matrix,P=G.a,O=G.b,N=G.c,L=G.d,D=G.dx,B=G.dy,C=this.get("width"),J=this.get("height"),v=this.get("x"),E=this.get("y"),M=v+C,A=E+J,z=this.get("stroke"),K=(P*v+N*E+D),u=(O*v+L*E+B),I=(P*M+N*E+D),t=(O*M+L*E+B),H=(P*v+N*A+D),s=(O*v+L*A+B),F=(P*M+N*A+D),r=(O*M+L*A+B);y.left=Math.min(H,Math.min(K,Math.min(I,F)));y.right=Math.max(H,Math.max(K,Math.max(I,F)));y.top=Math.min(t,Math.min(r,Math.min(s,u)));y.bottom=Math.max(t,Math.max(r,Math.max(s,u)));if(z&&z.weight){q=z.weight;y.left-=q;y.right+=q;y.top-=q;y.bottom+=q;}y.width=y.right-y.left;y.height=y.bottom-y.top;return y;},destroy:function(){var q=this._graphic&&this._graphic._node?this._graphic._node:null,r=this.node;if(this.node){if(this._fillNode){r.removeChild(this._fillNode);}if(this._strokeNode){r.removeChild(this._strokeNode);}if(q){q.removeChild(r);}}}},b.VMLDrawing.prototype));p.ATTRS={transformOrigin:{valueFn:function(){return[0.5,0.5];}},transform:{setter:function(q){this.matrix.init();this._transforms=this.matrix.getTransformArray(q);this._transform=q;if(this.initialized){this._updateTransform();}return q;},getter:function(){return this._transform;}},x:{value:0},y:{value:0},id:{valueFn:function(){return b.guid();},setter:function(r){var q=this.node;if(q){q.setAttribute("id",r);}return r;}},width:{value:0},height:{value:0},visible:{value:true,setter:function(s){var r=this.node,q=s?"visible":"hidden";if(r){r.style.visibility=q;}return s;}},fill:{valueFn:"_getDefaultFill",setter:function(t){var r,s,q=this.get("fill")||this._getDefaultFill();if(t){if(t.hasOwnProperty("color")){t.type="solid";}for(r in t){if(t.hasOwnProperty(r)){q[r]=t[r];}}}s=q;if(s&&s.color){if(s.color===undefined||s.color=="none"){s.color=null;}}this._fillFlag=true;return s;}},stroke:{valueFn:"_getDefaultStroke",setter:function(t){var r,s,q=this.get("stroke")||this._getDefaultStroke();if(t){for(r in t){if(t.hasOwnProperty(r)){q[r]=t[r];}}}s=q;this._strokeFlag=true;return s;}},autoSize:{value:false},pointerEvents:{value:"visiblePainted"},node:{readOnly:true,getter:function(){return this.node;}},graphic:{readOnly:true,getter:function(){return this._graphic;}}};b.VMLShape=p;o=function(){o.superclass.constructor.apply(this,arguments);};o.NAME="vmlPath";b.extend(o,b.VMLShape,{_updateHandler:function(){var q=this;q._fillChangeHandler();q._strokeChangeHandler();q._updateTransform();}});o.ATTRS=b.merge(b.VMLShape.ATTRS,{width:{getter:function(){return this._width;},setter:function(q){this._width=q;return q;}},height:{getter:function(){return this._height;},setter:function(q){this._height=q;return q;}},path:{readOnly:true,getter:function(){return this._path;}}});b.VMLPath=o;k=function(){k.superclass.constructor.apply(this,arguments);};k.NAME="vmlRect";b.extend(k,b.VMLShape,{_type:"rect"});k.ATTRS=b.VMLShape.ATTRS;b.VMLRect=k;n=function(){n.superclass.constructor.apply(this,arguments);};n.NAME="vmlEllipse";b.extend(n,b.VMLShape,{_type:"oval"});n.ATTRS=b.merge(b.VMLShape.ATTRS,{xRadius:{lazyAdd:false,getter:function(){var q=this.get("width");q=Math.round((q/2)*100)/100;return q;},setter:function(r){var q=r*2;this.set("width",q);return r;}},yRadius:{lazyAdd:false,getter:function(){var q=this.get("height");q=Math.round((q/2)*100)/100;return q;},setter:function(r){var q=r*2;this.set("height",q);return r;}}});b.VMLEllipse=n;l=function(q){l.superclass.constructor.apply(this,arguments);};l.NAME="vmlCircle";b.extend(l,p,{_type:"oval"});l.ATTRS=b.merge(p.ATTRS,{radius:{lazyAdd:false,value:0},width:{setter:function(q){this.set("radius",q/2);return q;},getter:function(){var q=this.get("radius"),r=q&&q>0?q*2:0;return r;}},height:{setter:function(q){this.set("radius",q/2);return q;},getter:function(){var q=this.get("radius"),r=q&&q>0?q*2:0;return r;}}});b.VMLCircle=l;a=function(){a.superclass.constructor.apply(this,arguments);};a.NAME="vmlPieSlice";b.extend(a,b.VMLShape,b.mix({_type:"shape",_draw:function(u){var r=this.get("cx"),v=this.get("cy"),t=this.get("startAngle"),s=this.get("arc"),q=this.get("radius");this.clear();this.drawWedge(r,v,t,s,q);this.end();}},b.VMLDrawing.prototype));a.ATTRS=b.mix({cx:{value:0},cy:{value:0},startAngle:{value:0},arc:{value:0},radius:{value:0}},b.VMLShape.ATTRS);b.VMLPieSlice=a;i=function(){i.superclass.constructor.apply(this,arguments);};i.NAME="vmlGraphic";i.ATTRS={render:{},id:{valueFn:function(){return b.guid();},setter:function(r){var q=this._node;if(q){q.setAttribute("id",r);}return r;}},shapes:{readOnly:true,getter:function(){return this._shapes;}},contentBounds:{readOnly:true,getter:function(){return this._contentBounds;}},node:{readOnly:true,getter:function(){return this._node;}},width:{setter:function(q){if(this._node){this._node.style.width=q+"px";}return q;}},height:{setter:function(q){if(this._node){this._node.style.height=q+"px";}return q;}},autoSize:{value:false},resizeDown:{getter:function(){return this._resizeDown;},setter:function(q){this._resizeDown=q;this._redraw();return q;}},x:{getter:function(){return this._x;},setter:function(q){this._x=q;if(this._node){this._node.style.left=q+"px";}return q;}},y:{getter:function(){return this._y;},setter:function(q){this._y=q;if(this._node){this._node.style.top=q+"px";}return q;}},autoDraw:{value:true},visible:{value:true,setter:function(q){this._toggleVisible(q);return q;}}};b.extend(i,b.BaseGraphic,{_x:0,_y:0,getXY:function(){var q=b.one(this._node),r;if(q){r=q.getXY();}return r;},_resizeDown:false,initializer:function(q){var r=this.get("render");this._shapes={};this._contentBounds={left:0,top:0,right:0,bottom:0};this._node=this._createGraphic();this._node.setAttribute("id",this.get("id"));if(r){this.render(r);}},render:function(t){var q=b.one(t),r=this.get("width")||parseInt(q.getComputedStyle("width"),10),s=this.get("height")||parseInt(q.getComputedStyle("height"),10);q=q||m.body;q.appendChild(this._node);this.setSize(r,s);this.parentNode=q;this.set("width",r);this.set("height",s);return this;},destroy:function(){this.clear(); +this._node.parentNode.removeChild(this._node);},addShape:function(q){q.graphic=this;var s=this._getShapeClass(q.type),r=new s(q);this._appendShape(r);return r;},_appendShape:function(r){var s=r.node,q=this._frag||this._node;if(this.get("autoDraw")){q.appendChild(s);}else{this._getDocFrag().appendChild(s);}},removeShape:function(q){if(!q instanceof p){if(d.isString(q)){q=this._shapes[q];}}if(q&&q instanceof p){q.destroy();delete this._shapes[q.get("id")];}if(this.get("autoDraw")){this._redraw();}},removeAllShapes:function(){var q=this._shapes,r;for(r in q){if(q.hasOwnProperty(r)){q[r].destroy();}}this._shapes={};},_removeChildren:function(q){if(q.hasChildNodes()){var r;while(q.firstChild){r=q.firstChild;this._removeChildren(r);q.removeChild(r);}}},clear:function(){this._removeAllShapes();this._removeChildren(this._node);},_toggleVisible:function(t){var s,r=this._shapes,q=t?"visible":"hidden";if(r){for(s in r){if(r.hasOwnProperty(s)){r[s].set("visible",t);}}}this._node.style.visibility=q;},setSize:function(q,r){q=Math.round(q);r=Math.round(r);this._node.style.width=q+"px";this._node.style.height=r+"px";this._node.coordSize=q+" "+r;},setPosition:function(q,r){q=Math.round(q);r=Math.round(r);this._node.style.left=q+"px";this._node.style.top=r+"px";},_createGraphic:function(){var q=m.createElement('');q.style.display="block";q.style.position="absolute";return q;},_createGraphicNode:function(q){return m.createElement("<"+q+' xmlns="urn:schemas-microsft.com:vml" style="behavior:url(#default#VML);display:inline-block;zoom:1;" />');},getShapeById:function(q){return this._shapes[q];},_getShapeClass:function(r){var q=this._shapeClass[r];if(q){return q;}return r;},_shapeClass:{circle:b.VMLCircle,rect:b.VMLRect,path:b.VMLPath,ellipse:b.VMLEllipse,pieslice:b.VMLPieSlice},batch:function(r){var q=this.get("autoDraw");this.set("autoDraw",false);r.apply();this._redraw();this.set("autoDraw",q);},_getDocFrag:function(){if(!this._frag){this._frag=m.createDocumentFragment();}return this._frag;},addToRedrawQueue:function(q){var s,r;this._shapes[q.get("id")]=q;if(!this.get("resizeDown")){s=q.getBounds();r=this._contentBounds;r.left=r.lefts.right?r.right:s.right;r.bottom=r.bottom>s.bottom?r.bottom:s.bottom;r.width=r.right-r.left;r.height=r.bottom-r.top;this._contentBounds=r;}if(this.get("autoDraw")){this._redraw();}},_redraw:function(){var q=this.get("resizeDown")?this._getUpdatedContentBounds():this._contentBounds;if(this.get("autoSize")){this.setSize(q.right,q.bottom);}if(this._frag){this._node.appendChild(this._frag);this._frag=null;}},_getUpdatedContentBounds:function(){var u,s,r,q=this._shapes,t={left:0,top:0,right:0,bottom:0};for(s in q){if(q.hasOwnProperty(s)){r=q[s];u=r.getBounds();t.left=Math.min(t.left,u.left);t.top=Math.min(t.top,u.top);t.right=Math.max(t.right,u.right);t.bottom=Math.max(t.bottom,u.bottom);}}t.width=t.right-t.left;t.height=t.bottom-t.top;this._contentBounds=t;return t;}});b.VMLGraphic=i;},"@VERSION@",{requires:["graphics"],skinnable:false}); \ No newline at end of file diff --git a/build/graphics-vml/graphics-vml.js b/build/graphics-vml/graphics-vml.js index 0f04a981565..5ae70dc871e 100644 --- a/build/graphics-vml/graphics-vml.js +++ b/build/graphics-vml/graphics-vml.js @@ -320,7 +320,6 @@ VMLShape = function() this._transforms = []; this.matrix = new Y.Matrix(); this.rotationMatrix = new Y.Matrix(); - this.scaleMatrix = new Y.Matrix(); VMLShape.superclass.constructor.apply(this, arguments); }; @@ -936,9 +935,10 @@ Y.extend(VMLShape, Y.BaseGraphic, Y.mix({ _addTransform: function(type, args) { args = Y.Array(args); + this._transform = Y_LANG.trim(this._transform + " " + type + "(" + args.join(", ") + ")"); args.unshift(type); this._transforms.push(args); - if(this.initialized) + if(this.initialized) { this._updateTransform(); } @@ -950,10 +950,7 @@ Y.extend(VMLShape, Y.BaseGraphic, Y.mix({ _updateTransform: function() { var node = this.node, - coordSize, key, - args, - val, transform, transformOrigin, x = this.get("x"), @@ -975,7 +972,6 @@ Y.extend(VMLShape, Y.BaseGraphic, Y.mix({ keys = [], matrix = this.matrix, rotationMatrix = this.rotationMatrix, - scaleMatrix = this.scaleMatrix, i = 0, len = this._transforms.length; @@ -1030,6 +1026,7 @@ Y.extend(VMLShape, Y.BaseGraphic, Y.mix({ dx = matrix.dx; dy = matrix.dy; this._graphic.addToRedrawQueue(this); + //only apply the filter if necessary as it degrades image quality if(Y.Array.indexOf(keys, "skew") > -1 || Y.Array.indexOf(keys, "scale") > -1) { node.style.filter = transform; @@ -1060,7 +1057,17 @@ Y.extend(VMLShape, Y.BaseGraphic, Y.mix({ * @private */ _translateY: 0, - /** + + /** + * Storage for the transform attribute. + * + * @property _transform + * @type String + * @private + */ + _transform: "", + + /** * Applies translate transformation. * * @method translate @@ -1167,22 +1174,6 @@ Y.extend(VMLShape, Y.BaseGraphic, Y.mix({ this._addTransform("scale", arguments); }, - /** - * Applies a matrix transformation - * - * @method matrix - * @param {Number} a - * @param {Number} b - * @param {Number} c - * @param {Number} d - * @param {Number} dx - * @param {Number} dy - */ - matrix: function(a, b, c, d, dx, dy) - { - this._addTransform("matrix", arguments); - }, - /** * @private */ @@ -1291,8 +1282,7 @@ Y.extend(VMLShape, Y.BaseGraphic, Y.mix({ */ getBounds: function(cfg) { - var type = this._type, - wt, + var wt, bounds = {}, matrix = cfg || this.matrix, a = matrix.a, @@ -1301,7 +1291,6 @@ Y.extend(VMLShape, Y.BaseGraphic, Y.mix({ d = matrix.d, dx = matrix.dx, dy = matrix.dy, - transformOrigin = this.get("transformOrigin"), w = this.get("width"), h = this.get("height"), left = this.get("x"), @@ -1380,6 +1369,33 @@ VMLShape.ATTRS = { return [0.5, 0.5]; } }, + + /** + * A css transform string. + * + * @config transform + * @type String + * + * @writeOnly + */ + transform: { + setter: function(val) + { + this.matrix.init(); + this._transforms = this.matrix.getTransformArray(val); + this._transform = val; + if(this.initialized) + { + this._updateTransform(); + } + return val; + }, + + getter: function() + { + return this._transform; + } + }, /** * Indicates the x position of shape. diff --git a/build/graphics/graphics-debug.js b/build/graphics/graphics-debug.js index 883f8f87870..9f71392c6db 100644 --- a/build/graphics/graphics-debug.js +++ b/build/graphics/graphics-debug.js @@ -74,8 +74,6 @@ var SETTER = "setter", */ applyCSSText: function(val) { var re = /\s*([a-z]*)\(([\w,\s]*)\)/gi, - transforms = [], - i = 0, args, m; @@ -88,6 +86,29 @@ var SETTER = "setter", } }, + /** + * Parses a string and returns an array of transform arrays. + * + * @method applyCSSText + * @param {String} val A css transform string + * @return Array + */ + getTransformArray: function(val) { + var re = /\s*([a-z]*)\(([\w,\s]*)\)/gi, + transforms = [], + args, + m; + + while ((m = re.exec(val))) { + if (typeof this[m[1]] === 'function') { + args = m[2].split(','); + args.unshift(m[1]); + transforms.push(args); + } + } + return transforms; + }, + /** * Default values for the matrix * @@ -125,10 +146,13 @@ var SETTER = "setter", var defaults = this._defaults, prop; - config || (config = {}); + config = config || {}; for (prop in defaults) { - this[prop] = (prop in config) ? config[prop] : defaults[prop]; + if(defaults.hasOwnProperty(prop)) + { + this[prop] = (prop in config) ? config[prop] : defaults[prop]; + } } this._config = config; @@ -156,12 +180,12 @@ var SETTER = "setter", x = x || 0; y = y || 0; - if (x != undefined) { // null or undef + if (x !== undefined) { // null or undef x = this._round(Math.tan(this.angle2rad(x))); } - if (y != undefined) { // null or undef + if (y !== undefined) { // null or undef y = this._round(Math.tan(this.angle2rad(y))); } @@ -233,8 +257,6 @@ var SETTER = "setter", */ toFilterText: function() { var matrix = this, - dx = matrix.dx, - dy = matrix.dy, text = 'progid:DXImageTransform.Microsoft.Matrix('; text += 'M11=' + matrix.a + ',' + 'M21=' + matrix.b + ',' + diff --git a/build/graphics/graphics-min.js b/build/graphics/graphics-min.js index cec37541f85..aa42a32be1d 100644 --- a/build/graphics/graphics-min.js +++ b/build/graphics/graphics-min.js @@ -1 +1 @@ -YUI.add("graphics",function(c){var g="setter",h=c.Plugin.Host,j="value",b="valueFn",k="readOnly",d=c.Lang,f="string",i="writeOnce",l,e,a;a=function(m){this.init(m);};a.prototype={_rounder:100000,multiply:function(u,s,r,q,y,x){var t=this,p=t.a*u+t.c*s,o=t.b*u+t.d*s,n=t.a*r+t.c*q,m=t.b*r+t.d*q,w=t.a*y+t.c*x+t.dx,v=t.b*y+t.d*x+t.dy;t.a=p;t.b=o;t.c=n;t.d=m;t.dx=w;t.dy=v;return this;},applyCSSText:function(s){var r=/\s*([a-z]*)\(([\w,\s]*)\)/gi,q=[],p=0,o,n;while((n=r.exec(s))){if(typeof this[n[1]]==="function"){o=n[2].split(",");console.log(o);this[n[1]].apply(this,o);}}},_defaults:{a:1,b:0,c:0,d:1,dx:0,dy:0},_round:function(m){m=Math.round(m*this._rounder)/this._rounder;return m;},init:function(m){var n=this._defaults,o;m||(m={});for(o in n){this[o]=(o in m)?m[o]:n[o];}this._config=m;},scale:function(m,n){this.multiply(m,0,0,n,0,0);return this;},skew:function(m,n){m=m||0;n=n||0;if(m!=undefined){m=this._round(Math.tan(this.angle2rad(m)));}if(n!=undefined){n=this._round(Math.tan(this.angle2rad(n)));}this.multiply(1,n,m,1,0,0);return this;},skewX:function(m){this.skew(m);return this;},skewY:function(m){this.skew(null,m);return this;},toCSSText:function(){var o=this,n=o.dx,m=o.dy,p="matrix(";if(c.UA.gecko){if(!isNaN(n)){n+="px";}if(!isNaN(m)){m+="px";}}p+=o.a+","+o.b+","+o.c+","+o.d+","+n+","+m;p+=")";return p;},toFilterText:function(){var o=this,n=o.dx,m=o.dy,p="progid:DXImageTransform.Microsoft.Matrix(";p+="M11="+o.a+","+"M21="+o.b+","+"M12="+o.c+","+"M22="+o.d+","+'sizingMethod="auto expand")';p+="";return p;},rad2deg:function(m){var n=m*(180/Math.PI);return n;},deg2rad:function(n){var m=n*(Math.PI/180);return m;},angle2rad:function(m){if(typeof m==="string"&&m.indexOf("rad")>-1){m=parseFloat(m);}else{m=this.deg2rad(parseFloat(m));}return m;},rotate:function(q,n,s){var p=[],m=this.angle2rad(q),o=this._round(Math.sin(m)),r=this._round(Math.cos(m));this.multiply(r,o,0-o,r,0,0);return this;},translate:function(m,n){this.multiply(1,0,0,1,parseFloat(m),parseFloat(n));return this;}};c.Matrix=a;e=function(){var m=this;m._ATTR_E_FACADE={};c.EventTarget.call(this,{emitFacade:true});m._state={};m.prototype=c.mix(e.prototype,m.prototype);};e.prototype={addAttrs:function(n){var r=this,p=this.constructor.ATTRS,m,o,q,s=r._state;for(o in p){if(p.hasOwnProperty(o)){m=p[o];if(m.hasOwnProperty(j)){s[o]=m.value;}else{if(m.hasOwnProperty(b)){q=m.valueFn;if(d.isString(q)){s[o]=r[q].apply(r);}else{s[o]=q.apply(r);}}}}}r._state=s;for(o in p){if(p.hasOwnProperty(o)){m=p[o];if(m.hasOwnProperty(k)&&m.readOnly){continue;}if(m.hasOwnProperty(i)&&m.writeOnce){m.readOnly=true;}if(n&&n.hasOwnProperty(o)){if(m.hasOwnProperty(g)){r._state[o]=m.setter.apply(r,[n[o]]);}else{r._state[o]=n[o];}}}}},get:function(n){var p=this,m,o=p.constructor.ATTRS;if(o&&o[n]){m=o[n].getter;if(m){if(typeof m==f){return p[m].apply(p);}return o[n].getter.apply(p);}return p._state[n];}return null;},set:function(m,o){var n;if(d.isObject(m)){for(n in m){if(m.hasOwnProperty(n)){this._set(n,m[n]);}}}else{this._set.apply(this,arguments);}},_set:function(m,q){var p=this,r,n,o=p.constructor.ATTRS;if(o&&o.hasOwnProperty(m)){r=o[m].setter;if(r){n=[q];if(typeof r==f){q=p[r].apply(p,n);}else{q=o[m].setter.apply(p,n);}}p._state[m]=q;}}};c.mix(e,c.EventTarget,false,null,1);c.AttributeLite=e;l=function(m){var o=this,n=c.Plugin&&c.Plugin.Host;if(o._initPlugins&&n){n.call(o);}o.name=o.constructor.NAME;o._eventPrefix=o.constructor.EVENT_PREFIX||o.constructor.NAME;e.call(o);o.addAttrs(m);o.init.apply(this,arguments);if(o._initPlugins){o._initPlugins(m);}o.initialized=true;};l.NAME="baseGraphic";l.prototype={init:function(){this.publish("init",{fireOnce:true});this.initializer.apply(this,arguments);this.fire("init",{cfg:arguments[0]});}};c.mix(l,c.AttributeLite,false,null,1);c.mix(l,h,false,null,1);l.prototype.constructor=l;l.plug=h.plug;l.unplug=h.unplug;c.BaseGraphic=l;},"@VERSION@",{requires:["event-custom","node","pluginhost"]}); \ No newline at end of file +YUI.add("graphics",function(c){var g="setter",h=c.Plugin.Host,j="value",b="valueFn",k="readOnly",d=c.Lang,f="string",i="writeOnce",l,e,a;a=function(m){this.init(m);};a.prototype={_rounder:100000,multiply:function(u,s,r,q,y,x){var t=this,p=t.a*u+t.c*s,o=t.b*u+t.d*s,n=t.a*r+t.c*q,m=t.b*r+t.d*q,w=t.a*y+t.c*x+t.dx,v=t.b*y+t.d*x+t.dy;t.a=p;t.b=o;t.c=n;t.d=m;t.dx=w;t.dy=v;return this;},applyCSSText:function(q){var p=/\s*([a-z]*)\(([\w,\s]*)\)/gi,o,n;while((n=p.exec(q))){if(typeof this[n[1]]==="function"){o=n[2].split(",");console.log(o);this[n[1]].apply(this,o);}}},getTransformArray:function(r){var q=/\s*([a-z]*)\(([\w,\s]*)\)/gi,p=[],o,n;while((n=q.exec(r))){if(typeof this[n[1]]==="function"){o=n[2].split(",");o.unshift(n[1]);p.push(o);}}return p;},_defaults:{a:1,b:0,c:0,d:1,dx:0,dy:0},_round:function(m){m=Math.round(m*this._rounder)/this._rounder;return m;},init:function(m){var n=this._defaults,o;m=m||{};for(o in n){if(n.hasOwnProperty(o)){this[o]=(o in m)?m[o]:n[o];}}this._config=m;},scale:function(m,n){this.multiply(m,0,0,n,0,0);return this;},skew:function(m,n){m=m||0;n=n||0;if(m!==undefined){m=this._round(Math.tan(this.angle2rad(m)));}if(n!==undefined){n=this._round(Math.tan(this.angle2rad(n)));}this.multiply(1,n,m,1,0,0);return this;},skewX:function(m){this.skew(m);return this;},skewY:function(m){this.skew(null,m);return this;},toCSSText:function(){var o=this,n=o.dx,m=o.dy,p="matrix(";if(c.UA.gecko){if(!isNaN(n)){n+="px";}if(!isNaN(m)){m+="px";}}p+=o.a+","+o.b+","+o.c+","+o.d+","+n+","+m;p+=")";return p;},toFilterText:function(){var m=this,n="progid:DXImageTransform.Microsoft.Matrix(";n+="M11="+m.a+","+"M21="+m.b+","+"M12="+m.c+","+"M22="+m.d+","+'sizingMethod="auto expand")';n+="";return n;},rad2deg:function(m){var n=m*(180/Math.PI);return n;},deg2rad:function(n){var m=n*(Math.PI/180);return m;},angle2rad:function(m){if(typeof m==="string"&&m.indexOf("rad")>-1){m=parseFloat(m);}else{m=this.deg2rad(parseFloat(m));}return m;},rotate:function(q,n,s){var p=[],m=this.angle2rad(q),o=this._round(Math.sin(m)),r=this._round(Math.cos(m));this.multiply(r,o,0-o,r,0,0);return this;},translate:function(m,n){this.multiply(1,0,0,1,parseFloat(m),parseFloat(n));return this;}};c.Matrix=a;e=function(){var m=this;m._ATTR_E_FACADE={};c.EventTarget.call(this,{emitFacade:true});m._state={};m.prototype=c.mix(e.prototype,m.prototype);};e.prototype={addAttrs:function(n){var r=this,p=this.constructor.ATTRS,m,o,q,s=r._state;for(o in p){if(p.hasOwnProperty(o)){m=p[o];if(m.hasOwnProperty(j)){s[o]=m.value;}else{if(m.hasOwnProperty(b)){q=m.valueFn;if(d.isString(q)){s[o]=r[q].apply(r);}else{s[o]=q.apply(r);}}}}}r._state=s;for(o in p){if(p.hasOwnProperty(o)){m=p[o];if(m.hasOwnProperty(k)&&m.readOnly){continue;}if(m.hasOwnProperty(i)&&m.writeOnce){m.readOnly=true;}if(n&&n.hasOwnProperty(o)){if(m.hasOwnProperty(g)){r._state[o]=m.setter.apply(r,[n[o]]);}else{r._state[o]=n[o];}}}}},get:function(n){var p=this,m,o=p.constructor.ATTRS;if(o&&o[n]){m=o[n].getter;if(m){if(typeof m==f){return p[m].apply(p);}return o[n].getter.apply(p);}return p._state[n];}return null;},set:function(m,o){var n;if(d.isObject(m)){for(n in m){if(m.hasOwnProperty(n)){this._set(n,m[n]);}}}else{this._set.apply(this,arguments);}},_set:function(m,q){var p=this,r,n,o=p.constructor.ATTRS;if(o&&o.hasOwnProperty(m)){r=o[m].setter;if(r){n=[q];if(typeof r==f){q=p[r].apply(p,n);}else{q=o[m].setter.apply(p,n);}}p._state[m]=q;}}};c.mix(e,c.EventTarget,false,null,1);c.AttributeLite=e;l=function(m){var o=this,n=c.Plugin&&c.Plugin.Host;if(o._initPlugins&&n){n.call(o);}o.name=o.constructor.NAME;o._eventPrefix=o.constructor.EVENT_PREFIX||o.constructor.NAME;e.call(o);o.addAttrs(m);o.init.apply(this,arguments);if(o._initPlugins){o._initPlugins(m);}o.initialized=true;};l.NAME="baseGraphic";l.prototype={init:function(){this.publish("init",{fireOnce:true});this.initializer.apply(this,arguments);this.fire("init",{cfg:arguments[0]});}};c.mix(l,c.AttributeLite,false,null,1);c.mix(l,h,false,null,1);l.prototype.constructor=l;l.plug=h.plug;l.unplug=h.unplug;c.BaseGraphic=l;},"@VERSION@",{requires:["event-custom","node","pluginhost"]}); \ No newline at end of file diff --git a/build/graphics/graphics.js b/build/graphics/graphics.js index 883f8f87870..9f71392c6db 100644 --- a/build/graphics/graphics.js +++ b/build/graphics/graphics.js @@ -74,8 +74,6 @@ var SETTER = "setter", */ applyCSSText: function(val) { var re = /\s*([a-z]*)\(([\w,\s]*)\)/gi, - transforms = [], - i = 0, args, m; @@ -88,6 +86,29 @@ var SETTER = "setter", } }, + /** + * Parses a string and returns an array of transform arrays. + * + * @method applyCSSText + * @param {String} val A css transform string + * @return Array + */ + getTransformArray: function(val) { + var re = /\s*([a-z]*)\(([\w,\s]*)\)/gi, + transforms = [], + args, + m; + + while ((m = re.exec(val))) { + if (typeof this[m[1]] === 'function') { + args = m[2].split(','); + args.unshift(m[1]); + transforms.push(args); + } + } + return transforms; + }, + /** * Default values for the matrix * @@ -125,10 +146,13 @@ var SETTER = "setter", var defaults = this._defaults, prop; - config || (config = {}); + config = config || {}; for (prop in defaults) { - this[prop] = (prop in config) ? config[prop] : defaults[prop]; + if(defaults.hasOwnProperty(prop)) + { + this[prop] = (prop in config) ? config[prop] : defaults[prop]; + } } this._config = config; @@ -156,12 +180,12 @@ var SETTER = "setter", x = x || 0; y = y || 0; - if (x != undefined) { // null or undef + if (x !== undefined) { // null or undef x = this._round(Math.tan(this.angle2rad(x))); } - if (y != undefined) { // null or undef + if (y !== undefined) { // null or undef y = this._round(Math.tan(this.angle2rad(y))); } @@ -233,8 +257,6 @@ var SETTER = "setter", */ toFilterText: function() { var matrix = this, - dx = matrix.dx, - dy = matrix.dy, text = 'progid:DXImageTransform.Microsoft.Matrix('; text += 'M11=' + matrix.a + ',' + 'M21=' + matrix.b + ',' + From 7b4c159c66b840798b3abe52748239a21c614451 Mon Sep 17 00:00:00 2001 From: Tripp Date: Wed, 27 Jul 2011 03:30:40 -0700 Subject: [PATCH 3/3] More graphic unit tests. --- src/graphics/tests/graphics-tests.js | 1491 ++++++++++++++------------ 1 file changed, 783 insertions(+), 708 deletions(-) diff --git a/src/graphics/tests/graphics-tests.js b/src/graphics/tests/graphics-tests.js index 4f8cc7247be..29d20fd50b8 100644 --- a/src/graphics/tests/graphics-tests.js +++ b/src/graphics/tests/graphics-tests.js @@ -4,6 +4,7 @@ var suite = new Y.Test.Suite("Y.Graphic"), ENGINE = "vml", DOCUMENT = Y.config.doc, canvas = DOCUMENT && DOCUMENT.createElement("canvas"), + graphicTests, svgTests, canvasTests, vmlTests; @@ -17,9 +18,8 @@ else if(canvas && canvas.getContext && canvas.getContext("2d")) ENGINE = "canvas"; } -//suite of svg specific tests -svgTests = new Y.Test.Case({ - name: "SVGGraphicsTests", +graphicTests = new Y.Test.Case({ + name: "GraphicsTests", graphic: null, @@ -47,362 +47,529 @@ svgTests = new Y.Test.Case({ Y.one("#testbed").remove(true); }, - "testSVGGraphic()" : function() - { + "test default construction": function () { + Y.Assert.isInstanceOf( Y.Graphic, new Y.Graphic() ); + }, + + "test render()": function () { Y.one("#testbed").setContent('
'); - var graphic = new Y.Graphic({render: "#graphiccontainer"}); + + var div = Y.one("#graphiccontainer"), + node, + contentBounds, + nodewidth, + nodeheight + graphic = new Y.Graphic({render: "#graphiccontainer"}); graphic.on("init", function(e) { - Y.Assert.isInstanceOf(SVGElement, graphic._contentNode); + Y.Assert.isInstanceOf(Y.Graphic, graphic); }); - this.graphic = graphic; }, - "testSVGRectNode()" : function() + "test addShape(circle)": function() { - var myrect = this.graphic.addShape({ - type: "rect", - width: 300, - height: 200, + var mycircle = graphic.addShape({ + type: "circle", + stroke: { + color: this.initialStrokeColor, + weight: 1 + }, fill: { color: this.initialFillColor }, - stroke: { - color: this.initialStrokeColor - } + radius: 12, + x: -5, + y: -5 }); - this.myrect = myrect; - Y.Assert.isInstanceOf(SVGRectElement, myrect.get("node")); + Y.assert(mycircle instanceof Y.Circle); + this.mycircle = mycircle; }, - - "testSVGRectNodeDimensions()" : function() + + "test mycircle.get(radius)": function() { - var node = this.myrect.get("node"); - Y.assert(node.getAttribute("width") == "300"); - Y.assert(node.getAttribute("height") == "200"); + Y.assert(this.mycircle.get("radius") === 12); }, - "testSVGRectNodeFillColor()" : function() + "test mycircle.get(width)": function() { - var node = this.myrect.get("node"); - Y.assert(node.getAttribute("fill") == this.initialFillColor); + Y.assert(this.mycircle.get("width") === 24); }, - "testSVGRectNodeFillOpacity()" : function() + "test mycircle.get(height)" : function() { - var node = this.myrect.get("node"); - Y.assert(node.getAttribute("fill-opacity") == "1"); + Y.assert(this.mycircle.get("height") === 24); }, - "testSVGRectNodeStrokeColor" : function() + "test mycircle.get(stroke)" : function() { - var node = this.myrect.get("node"); - Y.assert(node.getAttribute("stroke") == this.initialStrokeColor); + var stroke = this.mycircle.get("stroke"); + Y.assert(stroke.color === this.initialStrokeColor); }, - "testSVGRectNodeStrokeWidth" : function() + "test mycircle.get(fill)" : function() { - var node = this.myrect.get("node"); - Y.assert(node.getAttribute("stroke-width") == "1"); + var fill = this.mycircle.get("fill"); + Y.assert(fill.color === this.initialFillColor); }, - "testSVGRectNodeStroke" : function() + "test mycircle.get(x)" : function() { - var node = this.myrect.get("node"); - Y.assert(node.getAttribute("stroke-opacity") == "1"); + Y.assert(this.mycircle.get("x") === -5); }, - "testSVGRectNodeStrokeDashArray" : function() + "test mycircle.get(y)" : function() { - var node = this.myrect.get("node"); - Y.assert(node.getAttribute("stroke-dasharray") == "none"); + Y.assert(this.mycircle.get("y") === -5); }, - "testSVGRectNodeStrokeLineCap" : function() + "test mycircle.set(stroke)" : function() { - var node = this.myrect.get("node"); - Y.assert(node.getAttribute("stroke-linecap") == "butt"); - }, + var mycircle = this.mycircle; + mycircle.set("stroke", { + color: this.updatedStrokeColor + }); - "testSVGRectNodeStrokeLineJoin" : function() + Y.assert(this.updatedStrokeColor === mycircle.get("stroke").color); + }, + + "test mycircle.set(fill)" : function() { - var node = this.myrect.get("node"); - Y.assert(node.getAttribute("stroke-linejoin") == "round"); + var mycircle = this.mycircle; + mycircle.set("fill", { + color: this.updatedFillColor + }); + + Y.assert(this.updatedFillColor === mycircle.get("fill").color); }, - "testSVGRectNodeWidthAgainstShapeAttr" : function() + "testRemoveShape(circle)": function() { - var node = this.myrect.get("node"); - Y.assert(node.getAttribute("width") == this.myrect.get("width")); + var id, + shapes = graphic.get("shapes"), + hasShape; + graphic.removeShape(this.mycircle); + hasShape = (shapes.hasOwnProperty(id) && shapes[id] instanceof Y.Circle); + Y.Assert.isFalse(hasShape); }, - "testSVGRectNodeHeightAgainstShapeAttr" : function() + "test addShape(rect)": function() { - var node = this.myrect.get("node"); - Y.assert(node.getAttribute("height") == this.myrect.get("height")); + var myrect = graphic.addShape({ + type: "rect", + stroke: { + weight: 2, + color: this.initialStrokeColor + }, + fill: { + color: this.initialFillColor + }, + x: 5, + y: 5, + width:300, + height: 200 + }); + Y.assert(myrect instanceof Y.Rect); + this.myrect = myrect; }, - "testSVGRectNodeFillAgainstShapeAttr" : function() + "test myrect.get(width)": function() { - var node = this.myrect.get("node"), - fill = this.myrect.get("fill"), - opacity = parseFloat(fill.opacity); - opacity = isNaN(opacity) ? 1 : opacity; - Y.assert(fill.color == node.getAttribute("fill")); - Y.assert(opacity == node.getAttribute("fill-opacity")); + Y.assert(this.myrect.get("width") === 300); }, - "testSVGRectNodeStrokeAgainstShapeAttr" : function() + "test myrect.get(height)" : function() { - var node = this.myrect.get("node"), - stroke = this.myrect.get("stroke"), - opacity = stroke.opacity, - linejoin = stroke.linejoin == undefined ? "round" : stroke.linejoin; - opacity = isNaN(opacity) ? 1 : opacity; - Y.assert(stroke.color == node.getAttribute("stroke")); - Y.assert(linejoin == node.getAttribute("stroke-linejoin")); - Y.assert(opacity == node.getAttribute("stroke-opacity")); - Y.assert(stroke.linecap == node.getAttribute("stroke-linecap")); - Y.assert(stroke.dashstyle == node.getAttribute("stroke-dasharray")); - } -}); - -//suite of vml specific tests -vmlTests = new Y.Test.Case({ - name: "VMLGraphicsTests", - - graphic: null, - - mycircle: null, - - myrect: null, - - myellipse: null, - - mypath: null, - - initialFillColor: "#f00", - - initialStrokeColor: "#00f", - - updatedFillColor: "#9aa", - - updatedStrokeColor: "#99a", - - dashstyle: "4 2", + Y.assert(this.myrect.get("height") === 200); + }, - linejoin: "round", + "test myrect.get(stroke)" : function() + { + var stroke = this.myrect.get("stroke"); + Y.assert(stroke.color === this.initialStrokeColor); + }, - linecap: "butt", + "test myrect.get(fill)" : function() + { + var fill = this.myrect.get("fill"); + Y.assert(fill.color === this.initialFillColor); + }, - setUp: function () { - Y.one("body").append('
'); + "test myrect.get(x)" : function() + { + Y.assert(this.myrect.get("x") === 5); }, - tearDown: function () { - Y.one("#testbed").remove(true); + "test myrect.get(y)" : function() + { + Y.assert(this.myrect.get("y") === 5); }, - "testVMLGraphic()" : function() + "test myrect.set(stroke)" : function() { - Y.one("#testbed").setContent('
'); - var graphic = new Y.Graphic({render: "#graphiccontainer"}); - graphic.on("init", function(e) { - Y.assert(graphic.get("node").nodeName == "group"); + var myrect = this.myrect; + myrect.set("stroke", { + color: this.updatedStrokeColor }); - this.graphic = graphic; - }, - "testVMLRectNode()" : function() + Y.assert(this.updatedStrokeColor === myrect.get("stroke").color); + }, + + "test myrect.set(fill)" : function() { - var myrect = this.graphic.addShape({ - type: "rect", - width: 300, - height: 200, - fill: { - color: this.initialFillColor - }, - stroke: { - color: this.initialStrokeColor, - opacity: 1, - dashstyle: this.dashstyle.split(' '), - linejoin: this.linejoin, - linecap: this.linecap - } + var myrect = this.myrect; + myrect.set("fill", { + color: this.updatedFillColor }); - this.myrect = myrect; - Y.assert(myrect.get("node").nodeName == "rect"); + + Y.assert(this.updatedFillColor === myrect.get("fill").color); }, - "testVMLRectNodeDimensions()" : function() + "test removeShape(rect)" : function() { - var node = this.myrect.get("node"); - Y.assert(Y.one(node).getComputedStyle("width") == "300px"); - Y.assert(Y.one(node).getComputedStyle("height") == "200px"); + var id, + shapes = graphic.get("shapes"), + hasShape; + graphic.removeShape(this.myrect); + hasShape = (shapes.hasOwnProperty(id) && shapes[id] instanceof Y.Rect); + Y.Assert.isFalse(hasShape); }, - "testVMLRectNodeFillColor()" : function() + "test addShape(ellipse)": function() { - var node = this.myrect.get("node"), - toHex = Y.Color.toHex, - fillMatches = false, - childNodes = node.childNodes, - i = 0, - len = childNodes ? childNodes.length : 0; - for(; i < len; ++i) - { - if(childNodes[i] && childNodes[i].nodeName == "fill" && childNodes[i].color == this.initialFillColor) - { - fillMatches = true; - } - } - if(!fillMatches) - { - fillMatches = toHex(node.fillcolor) == toHex(this.initialFillColor) || toHex(node.fillcolor.value) == toHex(this.initialFillColor); - - } - Y.assert(fillMatches); + var myellipse = graphic.addShape({ + type: "ellipse", + stroke: { + color: this.initialStrokeColor, + weight: 2 + }, + fill: { + color: this.initialFillColor + }, + width: 100, + height: 30, + x:100, + y:50 + }); + Y.assert(myellipse instanceof Y.Ellipse); + this.myellipse = myellipse; + }, + + "test myellipse.get(width)": function() + { + Y.assert(this.myellipse.get("width") === 100); + }, + + "test myellipse.get(height)" : function() + { + Y.assert(this.myellipse.get("height") === 30); + }, + + "test myellipse.get(stroke)" : function() + { + var stroke = this.myellipse.get("stroke"); + Y.assert(stroke.color === this.initialStrokeColor); + }, + + "test myellipse.get(fill)" : function() + { + var fill = this.myellipse.get("fill"); + Y.assert(fill.color === this.initialFillColor); + }, + + "test myellipse.get(x)" : function() + { + Y.assert(this.myellipse.get("x") === 100); + }, + + "test myellipse.get(y)" : function() + { + Y.assert(this.myellipse.get("y") === 50); + }, + + "test myellipse.set(stroke)" : function() + { + var myellipse = this.myellipse; + myellipse.set("stroke", { + color: this.updatedStrokeColor + }); + + Y.assert(this.updatedStrokeColor === myellipse.get("stroke").color); }, - "testVMLRectNodeStrokeColor" : function() + "test myellipse.set(fill)" : function() { - var node = this.myrect.get("node"), - toHex = Y.Color.toHex, - strokeMatches = false, - childNodes = node.childNodes, - i = 0, - len = childNodes ? childNodes.length : 0; - for(; i < len; ++i) - { - if(childNodes[i] && childNodes[i].nodeName == "stroke" && ( toHex(childNodes[i].color) == toHex(this.initialStrokeColor) || toHex(childNodes[i].color.value) == toHex(this.initialStrokeColor))) - { - strokeMatches = true; - } - } - if(!strokeMatches) - { - strokeMatches = toHex(node.strokecolor) == toHex(this.initialStrokeColor) || toHex(node.strokecolor.value) == toHex(this.initialStrokeColor); - } - Y.assert(strokeMatches); + var myellipse = this.myellipse; + myellipse.set("fill", { + color: this.updatedFillColor + }); + + Y.assert(this.updatedFillColor === myellipse.get("fill").color); }, - "testVMLRectNodeStrokeWidth" : function() + "test removeShape(ellipse)" : function() { - var node = this.myrect.get("node"), - toHex = Y.Color.toHex, - strokeMatches = false, - childNodes = node.childNodes, - i = 0, - len = childNodes ? childNodes.length : 0; - for(; i < len; ++i) - { - if(childNodes[i] && childNodes[i].nodeName == "stroke" && childNodes[i].weight == "1") - { - strokeMatches = true; - } - } - if(!strokeMatches) - { - strokeMatches = node.strokeWeight; - } - Y.assert(strokeMatches); + var id, + shapes = graphic.get("shapes"), + hasShape; + graphic.removeShape(this.myellipse); + hasShape = (shapes.hasOwnProperty(id) && shapes[id] instanceof Y.Ellipse); + Y.Assert.isFalse(hasShape); }, - "testVMLRectNodeStrokeOpacity" : function() + "test addShape(path)": function() { - var node = this.myrect.get("node"), - strokeMatches = false, - childNodes = node.childNodes, - i = 0, - len = childNodes ? childNodes.length : 0; - for(; i < len; ++i) - { - if(childNodes[i] && childNodes[i].nodeName == "stroke" && childNodes[i].opacity == "1") - { - strokeMatches = true; + var mypath = graphic.addShape({ + type: "path", + stroke: { + color: this.initialStrokeColor + }, + fill: { + color: this.initialFillColor } - } - if(!strokeMatches) - { - strokeMatches = node.strokeOpacity; - } - Y.assert(strokeMatches); + }); + mypath.moveTo(-20, -20); + mypath.lineTo(80, 120); + mypath.lineTo(100, 80); + mypath.lineTo(-20, -20); + mypath.end(); + Y.assert(mypath instanceof Y.Path); + this.mypath = mypath; }, - "testVMLRectNodeStrokeDashArray" : function() + "test mypath.get(width)": function() { - var node = this.myrect.get("node"), - strokeMatches = false, - childNodes = node.childNodes, - i = 0, - len = childNodes ? childNodes.length : 0; - for(; i < len; ++i) - { - if(childNodes[i] && childNodes[i].nodeName == "stroke" && childNodes[i].dashstyle && childNodes[i].dashstyle == this.dashstyle) - { - strokeMatches = true; - } - } - Y.assert(strokeMatches); + Y.assert(this.mypath.get("width") === 120); }, - "testVMLRectNodeStrokeLineCap" : function() + "test mypath.get(height)" : function() { - var node = this.myrect.get("node"), - strokeMatches = false, - childNodes = node.childNodes, - i = 0, - len = childNodes ? childNodes.length : 0; - for(; i < len; ++i) - { - if(childNodes[i] && childNodes[i].nodeName == "stroke" && childNodes[i].endcap && childNodes[i].endcap == "flat") - { - strokeMatches = true; - } - } - Y.assert(strokeMatches); + Y.assert(this.mypath.get("height") === 140); }, - "testVMLRectNodeStrokeLineJoin" : function() + "test mypath.get(stroke)" : function() { - var node = this.myrect.get("node"), - strokeMatches = false, - childNodes = node.childNodes, - i = 0, - len = childNodes ? childNodes.length : 0; - for(; i < len; ++i) - { - if(childNodes[i] && childNodes[i].nodeName == "stroke" && childNodes[i].joinstyle && childNodes[i].joinstyle == this.linejoin) - { - strokeMatches = true; + var stroke = this.mypath.get("stroke"); + Y.assert(stroke.color === this.initialStrokeColor); + }, + + "test mypath.get(fill)" : function() + { + var fill = this.mypath.get("fill"); + Y.assert(fill.color === this.initialFillColor); + }, + + "test mypath.get(x)" : function() + { + Y.assert(this.mypath.get("x") === 0); + }, + + "test mypath.get(y)" : function() + { + Y.assert(this.mypath.get("y") === 0); + }, + + "test mypath.set(stroke)" : function() + { + var mypath = this.mypath; + mypath.set("stroke", { + color: this.updatedStrokeColor + }); + + Y.assert(this.updatedStrokeColor === mypath.get("stroke").color); + }, + + "test mypath.set(fill)" : function() + { + var mypath = this.mypath; + mypath.set("fill", { + color: this.updatedFillColor + }); + + Y.assert(this.updatedFillColor === mypath.get("fill").color); + }, + + "test removeShape(path)" : function() + { + var id, + shapes = graphic.get("shapes"), + hasShape; + graphic.removeShape(this.mypath); + hasShape = (shapes.hasOwnProperty(id) && shapes[id] instanceof Y.Path); + Y.Assert.isFalse(hasShape); + }, + + "test passRotation(rect)" : function() + { + var myrect = graphic.addShape({ + type: "rect", + stroke: { + weight: 2, + color: this.initialStrokeColor + }, + fill: { + color: this.initialFillColor + }, + x: 5, + y: 5, + width:300, + height: 200, + rotation: 45 + }); + Y.assert(myrect instanceof Y.Rect); + } +}); + +//suite of svg specific tests +svgTests = new Y.Test.Case({ + name: "SVGGraphicsTests", + + graphic: null, + + mycircle: null, + + myrect: null, + + myellipse: null, + + mypath: null, + + initialFillColor: "#f00", + + initialStrokeColor: "#00f", + + updatedFillColor: "#9aa", + + updatedStrokeColor: "#99a", + + setUp: function () { + Y.one("body").append('
'); + }, + + tearDown: function () { + Y.one("#testbed").remove(true); + }, + + "testSVGGraphic()" : function() + { + Y.one("#testbed").setContent('
'); + var graphic = new Y.Graphic({render: "#graphiccontainer"}); + graphic.on("init", function(e) { + Y.Assert.isInstanceOf(SVGElement, graphic._contentNode); + }); + this.graphic = graphic; + }, + + "testSVGRectNode()" : function() + { + var myrect = this.graphic.addShape({ + type: "rect", + width: 300, + height: 200, + fill: { + color: this.initialFillColor + }, + stroke: { + color: this.initialStrokeColor } - } - Y.assert(strokeMatches); + }); + this.myrect = myrect; + Y.Assert.isInstanceOf(SVGRectElement, myrect.get("node")); }, - "testVMLRectNodeWidthAgainstShapeAttr" : function() + "testSVGRectNodeDimensions()" : function() { var node = this.myrect.get("node"); - Y.assert(Y.one(node).getComputedStyle("width") == this.myrect.get("width") + "px"); + Y.assert(node.getAttribute("width") == "300"); + Y.assert(node.getAttribute("height") == "200"); + }, + + "testSVGRectNodeFillColor()" : function() + { + var node = this.myrect.get("node"); + Y.assert(node.getAttribute("fill") == this.initialFillColor); + }, + + "testSVGRectNodeFillOpacity()" : function() + { + var node = this.myrect.get("node"); + Y.assert(node.getAttribute("fill-opacity") == "1"); + }, + + "testSVGRectNodeStrokeColor" : function() + { + var node = this.myrect.get("node"); + Y.assert(node.getAttribute("stroke") == this.initialStrokeColor); + }, + + "testSVGRectNodeStrokeWidth" : function() + { + var node = this.myrect.get("node"); + Y.assert(node.getAttribute("stroke-width") == "1"); + }, + + "testSVGRectNodeStroke" : function() + { + var node = this.myrect.get("node"); + Y.assert(node.getAttribute("stroke-opacity") == "1"); + }, + + "testSVGRectNodeStrokeDashArray" : function() + { + var node = this.myrect.get("node"); + Y.assert(node.getAttribute("stroke-dasharray") == "none"); + }, + + "testSVGRectNodeStrokeLineCap" : function() + { + var node = this.myrect.get("node"); + Y.assert(node.getAttribute("stroke-linecap") == "butt"); + }, + + "testSVGRectNodeStrokeLineJoin" : function() + { + var node = this.myrect.get("node"); + Y.assert(node.getAttribute("stroke-linejoin") == "round"); + }, + + "testSVGRectNodeWidthAgainstShapeAttr" : function() + { + var node = this.myrect.get("node"); + Y.assert(node.getAttribute("width") == this.myrect.get("width")); }, - "testVMLRectNodeHeightAgainstShapeAttr" : function() + "testSVGRectNodeHeightAgainstShapeAttr" : function() { var node = this.myrect.get("node"); - Y.assert(Y.one(node).getComputedStyle("height") == this.myrect.get("height") + "px"); + Y.assert(node.getAttribute("height") == this.myrect.get("height")); }, - "testVMLRectNodeFillAgainstShapeAttr" : function() + "testSVGRectNodeFillAgainstShapeAttr" : function() { var node = this.myrect.get("node"), fill = this.myrect.get("fill"), - toHex = Y.Color.toHex; - Y.assert(toHex(fill.color) == toHex(node.fillcolor)); + opacity = parseFloat(fill.opacity); + opacity = isNaN(opacity) ? 1 : opacity; + Y.assert(fill.color == node.getAttribute("fill")); + Y.assert(opacity == node.getAttribute("fill-opacity")); + }, + + "testSVGRectNodeStrokeAgainstShapeAttr" : function() + { + var node = this.myrect.get("node"), + stroke = this.myrect.get("stroke"), + opacity = stroke.opacity, + linejoin = stroke.linejoin == undefined ? "round" : stroke.linejoin; + opacity = isNaN(opacity) ? 1 : opacity; + Y.assert(stroke.color == node.getAttribute("stroke")); + Y.assert(linejoin == node.getAttribute("stroke-linejoin")); + Y.assert(opacity == node.getAttribute("stroke-opacity")); + Y.assert(stroke.linecap == node.getAttribute("stroke-linecap")); + Y.assert(stroke.dashstyle == node.getAttribute("stroke-dasharray")); } }); -//suite of canvas specific tests -canvasTests = new Y.Test.Case({ - name: "CanvasGraphicsTests", +//suite of vml specific tests +vmlTests = new Y.Test.Case({ + name: "VMLGraphicsTests", graphic: null, @@ -416,43 +583,17 @@ canvasTests = new Y.Test.Case({ initialFillColor: "#f00", - initialFillOpacity: 0.5, - initialStrokeColor: "#00f", - initialStrokeWeight: 2, - updatedFillColor: "#9aa", updatedStrokeColor: "#99a", - width: 300, - - height: 200, - - context: null, - - linecap: "butt", - - TORGB: Y.Color.toRGB, - - TOHEX: Y.Color.toHex, + dashstyle: "4 2", - toRGBA: function(val, alpha) { - alpha = (alpha !== undefined) ? alpha : 1; - if (!Y.Color.re_RGB.test(val)) { - val = this.TOHEX(val); - } + linejoin: "round", - if(Y.Color.re_hex.exec(val)) { - val = 'rgba(' + [ - parseInt(RegExp.$1, 16), - parseInt(RegExp.$2, 16), - parseInt(RegExp.$3, 16) - ].join(',') + ',' + alpha + ')'; - } - return val; - }, + linecap: "butt", setUp: function () { Y.one("body").append('
'); @@ -462,193 +603,207 @@ canvasTests = new Y.Test.Case({ Y.one("#testbed").remove(true); }, - "testCanvasGraphic()" : function() + "testVMLGraphic()" : function() { Y.one("#testbed").setContent('
'); var graphic = new Y.Graphic({render: "#graphiccontainer"}); graphic.on("init", function(e) { - Y.Assert.isInstanceOf(HTMLElement, graphic.get("node")); + Y.assert(graphic.get("node").nodeName == "group"); }); this.graphic = graphic; }, - "testCanvasRectNode()" : function() + "testVMLRectNode()" : function() { - var node, - myrect = this.graphic.addShape({ + var myrect = this.graphic.addShape({ type: "rect", - width: this.width, - height: this.height, + width: 300, + height: 200, fill: { - color: this.initialFillColor, - opacity: this.initialFillOpacity + color: this.initialFillColor }, stroke: { color: this.initialStrokeColor, - weight: this.initialStrokeWeight + opacity: 1, + dashstyle: this.dashstyle.split(' '), + linejoin: this.linejoin, + linecap: this.linecap } }); - node = myrect.get("node"); this.myrect = myrect; - this.context = node.getContext("2d"); - Y.Assert.isInstanceOf(HTMLCanvasElement, node); + Y.assert(myrect.get("node").nodeName == "rect"); }, - "testCanvasRectNodeDimensions()" : function() + "testVMLRectNodeDimensions()" : function() { - var node = this.myrect.get("node"), - stroke = this.myrect.get("stroke"), - weight = stroke.weight; - weight *= 2; - Y.assert(node.getAttribute("width") == this.width + weight); - Y.assert(node.getAttribute("height") == this.height + weight); + var node = this.myrect.get("node"); + Y.assert(Y.one(node).getComputedStyle("width") == "300px"); + Y.assert(Y.one(node).getComputedStyle("height") == "200px"); }, - "testCanvasRectNodeFillColor()" : function() + "testVMLRectNodeFillColor()" : function() { var node = this.myrect.get("node"), - opacity = parseFloat(this.initialFillOpacity), - fillColor = this.initialFillColor, - shapeFillColor = this.context.fillStyle; - opacity = Y.Lang.isNumber(opacity) && opacity < 1 ? opacity : 1; - if(shapeFillColor.indexOf("RGBA") > -1 || shapeFillColor.indexOf("rgba") > -1) + toHex = Y.Color.toHex, + fillMatches = false, + childNodes = node.childNodes, + i = 0, + len = childNodes ? childNodes.length : 0; + for(; i < len; ++i) { - shapeFillColor = shapeFillColor.toLowerCase(); - shapeFillColor = shapeFillColor.replace(/, /g, ","); - fillColor = this.toRGBA(this.TOHEX(fillColor), opacity) + if(childNodes[i] && childNodes[i].nodeName == "fill" && childNodes[i].color == this.initialFillColor) + { + fillMatches = true; + } } - else + if(!fillMatches) { - shapeFillColor = this.TOHEX(shapeFillColor); - fillColor = this.TOHEX(fillColor); + fillMatches = toHex(node.fillcolor) == toHex(this.initialFillColor) || toHex(node.fillcolor.value) == toHex(this.initialFillColor); + } - Y.assert(shapeFillColor == fillColor); + Y.assert(fillMatches); }, - - "testCanvasRectNodeFillColorAgainstAttr()" : function() + + "testVMLRectNodeStrokeColor" : function() { var node = this.myrect.get("node"), - fill = this.myrect.get("fill"), - opacity = parseFloat(fill.opacity), - fillColor = fill.color, - shapeFillColor = this.context.fillStyle; - opacity = Y.Lang.isNumber(opacity) && opacity < 1 ? opacity : 1; - if(shapeFillColor.indexOf("RGBA") > -1 || shapeFillColor.indexOf("rgba") > -1) + toHex = Y.Color.toHex, + strokeMatches = false, + childNodes = node.childNodes, + i = 0, + len = childNodes ? childNodes.length : 0; + for(; i < len; ++i) { - shapeFillColor = shapeFillColor.toLowerCase(); - shapeFillColor = shapeFillColor.replace(/, /g, ","); - fillColor = this.toRGBA(this.TOHEX(fillColor), opacity) + if(childNodes[i] && childNodes[i].nodeName == "stroke" && ( toHex(childNodes[i].color) == toHex(this.initialStrokeColor) || toHex(childNodes[i].color.value) == toHex(this.initialStrokeColor))) + { + strokeMatches = true; + } } - else + if(!strokeMatches) { - shapeFillColor = this.TOHEX(shapeFillColor); - fillColor = this.TOHEX(fillColor); + strokeMatches = toHex(node.strokecolor) == toHex(this.initialStrokeColor) || toHex(node.strokecolor.value) == toHex(this.initialStrokeColor); } - Y.assert(shapeFillColor == fillColor); + Y.assert(strokeMatches); }, - "testCanvasRectNodeStrokeColor" : function() + "testVMLRectNodeStrokeWidth" : function() { var node = this.myrect.get("node"), - opacity = parseFloat(this.initialStrokeOpacity), - strokeColor = this.TOHEX(this.initialStrokeColor), - shapeStrokeColor = this.context.strokeStyle; - opacity = Y.Lang.isNumber(opacity) && opacity < 1 ? opacity : 1 - if(shapeStrokeColor.indexOf("RGBA") > -1 || shapeStrokeColor.indexOf("rgba") > -1) + toHex = Y.Color.toHex, + strokeMatches = false, + childNodes = node.childNodes, + i = 0, + len = childNodes ? childNodes.length : 0; + for(; i < len; ++i) { - shapeStrokeColor = shapeStrokeColor.toLowerCase(); - shapeStrokeColor = shapeStrokeColor.replace(/, /g, ","); - strokeColor = this.toRGBA(this.TOHEX(strokeColor), opacity) + if(childNodes[i] && childNodes[i].nodeName == "stroke" && childNodes[i].weight == "1") + { + strokeMatches = true; + } } - else + if(!strokeMatches) { - shapeStrokeColor = this.TOHEX(shapeStrokeColor); - strokeColor = this.TOHEX(strokeColor); + strokeMatches = node.strokeWeight; } - Y.assert(shapeStrokeColor == strokeColor); + Y.assert(strokeMatches); }, - "testCanvasRectNodeStrokeColorAgainstAttr()" : function() + "testVMLRectNodeStrokeOpacity" : function() { var node = this.myrect.get("node"), - stroke = this.myrect.get("stroke"), - opacity = parseFloat(stroke.opacity), - strokeColor = this.TOHEX(stroke.color), - shapeStrokeColor = this.context.strokeStyle; - opacity = Y.Lang.isNumber(opacity) && opacity < 1 ? opacity : 1; - if(shapeStrokeColor.indexOf("RGBA") > -1 || shapeStrokeColor.indexOf("rgba") > -1) + strokeMatches = false, + childNodes = node.childNodes, + i = 0, + len = childNodes ? childNodes.length : 0; + for(; i < len; ++i) { - shapeStrokeColor = shapeStrokeColor.toLowerCase(); - shapeStrokeColor = shapeStrokeColor.replace(/, /g, ","); - strokeColor = this.toRGBA(this.TOHEX(strokeColor), opacity) + if(childNodes[i] && childNodes[i].nodeName == "stroke" && childNodes[i].opacity == "1") + { + strokeMatches = true; + } } - else + if(!strokeMatches) { - shapeStrokeColor = this.TOHEX(shapeStrokeColor); - strokeColor = this.TOHEX(strokeColor); + strokeMatches = node.strokeOpacity; } - Y.assert(shapeStrokeColor == strokeColor); - }, - - "testCanvasRectNodeStrokeWidth" : function() - { - var weight = this.initialStrokeWeight, - shapeWeight = this.context.lineWidth; - Y.assert(weight == shapeWeight); + Y.assert(strokeMatches); }, - "testCanvasRectNodeStrokeWidthAgainstAttr()" : function() + "testVMLRectNodeStrokeDashArray" : function() { - var stroke = this.myrect.get("stroke"), - weight = stroke.weight; - Y.assert(weight == this.context.lineWidth); + var node = this.myrect.get("node"), + strokeMatches = false, + childNodes = node.childNodes, + i = 0, + len = childNodes ? childNodes.length : 0; + for(; i < len; ++i) + { + if(childNodes[i] && childNodes[i].nodeName == "stroke" && childNodes[i].dashstyle && childNodes[i].dashstyle == this.dashstyle) + { + strokeMatches = true; + } + } + Y.assert(strokeMatches); }, - "testCanvasRectNodeStrokeLineCap" : function() + "testVMLRectNodeStrokeLineCap" : function() { - Y.assert(this.context.lineCap == this.linecap); + var node = this.myrect.get("node"), + strokeMatches = false, + childNodes = node.childNodes, + i = 0, + len = childNodes ? childNodes.length : 0; + for(; i < len; ++i) + { + if(childNodes[i] && childNodes[i].nodeName == "stroke" && childNodes[i].endcap && childNodes[i].endcap == "flat") + { + strokeMatches = true; + } + } + Y.assert(strokeMatches); }, - "testCanvasRectNodeStrokeLineJoin" : function() + "testVMLRectNodeStrokeLineJoin" : function() { - Y.assert(this.context.lineJoin == "round"); + var node = this.myrect.get("node"), + strokeMatches = false, + childNodes = node.childNodes, + i = 0, + len = childNodes ? childNodes.length : 0; + for(; i < len; ++i) + { + if(childNodes[i] && childNodes[i].nodeName == "stroke" && childNodes[i].joinstyle && childNodes[i].joinstyle == this.linejoin) + { + strokeMatches = true; + } + } + Y.assert(strokeMatches); }, - "testCanvasRectNodeWidthAgainstShapeAttr" : function() + "testVMLRectNodeWidthAgainstShapeAttr" : function() { - var node = this.myrect.get("node"), - stroke = this.myrect.get("stroke"), - weight = stroke.weight || 0, - width = this.myrect.get("width"); - width += weight * 2; - Y.assert(node.getAttribute("width") == width); + var node = this.myrect.get("node"); + Y.assert(Y.one(node).getComputedStyle("width") == this.myrect.get("width") + "px"); }, - "testCanvasRectNodeHeightAgainstShapeAttr" : function() + "testVMLRectNodeHeightAgainstShapeAttr" : function() { - var node = this.myrect.get("node"), - stroke = this.myrect.get("stroke"), - weight = stroke.weight || 0, - height = this.myrect.get("height"); - height += weight * 2; - Y.assert(node.getAttribute("height") == height); - } -}); - -if(ENGINE == "svg") -{ - suite.add(svgTests); -} -if(ENGINE == "vml") -{ - suite.add(vmlTests); -} -if(ENGINE == "canvas") -{ - suite.add(canvasTests); -} -suite.add( new Y.Test.Case({ - name: "GraphicsTests", + var node = this.myrect.get("node"); + Y.assert(Y.one(node).getComputedStyle("height") == this.myrect.get("height") + "px"); + }, + + "testVMLRectNodeFillAgainstShapeAttr" : function() + { + var node = this.myrect.get("node"), + fill = this.myrect.get("fill"), + toHex = Y.Color.toHex; + Y.assert(toHex(fill.color) == toHex(node.fillcolor)); + } +}); + +//suite of canvas specific tests +canvasTests = new Y.Test.Case({ + name: "CanvasGraphicsTests", graphic: null, @@ -662,393 +817,313 @@ suite.add( new Y.Test.Case({ initialFillColor: "#f00", + initialFillOpacity: 0.5, + initialStrokeColor: "#00f", + initialStrokeWeight: 2, + updatedFillColor: "#9aa", updatedStrokeColor: "#99a", - setUp: function () { - Y.one("body").append('
'); - }, - - tearDown: function () { - Y.one("#testbed").remove(true); - }, - - "test default construction": function () { - Y.Assert.isInstanceOf( Y.Graphic, new Y.Graphic() ); - }, - - "test render()": function () { - Y.one("#testbed").setContent('
'); - - var div = Y.one("#graphiccontainer"), - node, - contentBounds, - nodewidth, - nodeheight - graphic = new Y.Graphic({render: "#graphiccontainer"}); - graphic.on("init", function(e) { - Y.Assert.isInstanceOf(Y.Graphic, graphic); - }); - }, - - "test addShape(circle)": function() - { - var mycircle = graphic.addShape({ - type: "circle", - stroke: { - color: this.initialStrokeColor, - weight: 1 - }, - fill: { - color: this.initialFillColor - }, - radius: 12, - x: -5, - y: -5 - }); - Y.assert(mycircle instanceof Y.Circle); - this.mycircle = mycircle; - }, - - "test mycircle.get(radius)": function() - { - Y.assert(this.mycircle.get("radius") === 12); - }, + width: 300, - "test mycircle.get(width)": function() - { - Y.assert(this.mycircle.get("width") === 24); - }, + height: 200, - "test mycircle.get(height)" : function() - { - Y.assert(this.mycircle.get("height") === 24); - }, + context: null, + + linecap: "butt", + + TORGB: Y.Color.toRGB, + + TOHEX: Y.Color.toHex, - "test mycircle.get(stroke)" : function() - { - var stroke = this.mycircle.get("stroke"); - Y.assert(stroke.color === this.initialStrokeColor); - }, + toRGBA: function(val, alpha) { + alpha = (alpha !== undefined) ? alpha : 1; + if (!Y.Color.re_RGB.test(val)) { + val = this.TOHEX(val); + } - "test mycircle.get(fill)" : function() - { - var fill = this.mycircle.get("fill"); - Y.assert(fill.color === this.initialFillColor); + if(Y.Color.re_hex.exec(val)) { + val = 'rgba(' + [ + parseInt(RegExp.$1, 16), + parseInt(RegExp.$2, 16), + parseInt(RegExp.$3, 16) + ].join(',') + ',' + alpha + ')'; + } + return val; }, - "test mycircle.get(x)" : function() - { - Y.assert(this.mycircle.get("x") === -5); + setUp: function () { + Y.one("body").append('
'); }, - "test mycircle.get(y)" : function() - { - Y.assert(this.mycircle.get("y") === -5); + tearDown: function () { + Y.one("#testbed").remove(true); }, - "test mycircle.set(stroke)" : function() - { - var mycircle = this.mycircle; - mycircle.set("stroke", { - color: this.updatedStrokeColor - }); - - Y.assert(this.updatedStrokeColor === mycircle.get("stroke").color); - }, - - "test mycircle.set(fill)" : function() + "testCanvasGraphic()" : function() { - var mycircle = this.mycircle; - mycircle.set("fill", { - color: this.updatedFillColor + Y.one("#testbed").setContent('
'); + var graphic = new Y.Graphic({render: "#graphiccontainer"}); + graphic.on("init", function(e) { + Y.Assert.isInstanceOf(HTMLElement, graphic.get("node")); }); - - Y.assert(this.updatedFillColor === mycircle.get("fill").color); + this.graphic = graphic; }, - "testRemoveShape(circle)": function() - { - var id, - shapes = graphic.get("shapes"), - hasShape; - graphic.removeShape(this.mycircle); - hasShape = (shapes.hasOwnProperty(id) && shapes[id] instanceof Y.Circle); - Y.Assert.isFalse(hasShape); - }, - - "test addShape(rect)": function() + "testCanvasRectNode()" : function() { - var myrect = graphic.addShape({ + var node, + myrect = this.graphic.addShape({ type: "rect", - stroke: { - weight: 2, - color: this.initialStrokeColor - }, + width: this.width, + height: this.height, fill: { - color: this.initialFillColor + color: this.initialFillColor, + opacity: this.initialFillOpacity }, - x: 5, - y: 5, - width:300, - height: 200 + stroke: { + color: this.initialStrokeColor, + weight: this.initialStrokeWeight + } }); - Y.assert(myrect instanceof Y.Rect); + node = myrect.get("node"); this.myrect = myrect; + this.context = node.getContext("2d"); + Y.Assert.isInstanceOf(HTMLCanvasElement, node); }, - "test myrect.get(width)": function() - { - Y.assert(this.myrect.get("width") === 300); - }, - - "test myrect.get(height)" : function() - { - Y.assert(this.myrect.get("height") === 200); - }, - - "test myrect.get(stroke)" : function() - { - var stroke = this.myrect.get("stroke"); - Y.assert(stroke.color === this.initialStrokeColor); - }, - - "test myrect.get(fill)" : function() - { - var fill = this.myrect.get("fill"); - Y.assert(fill.color === this.initialFillColor); - }, - - "test myrect.get(x)" : function() - { - Y.assert(this.myrect.get("x") === 5); - }, - - "test myrect.get(y)" : function() - { - Y.assert(this.myrect.get("y") === 5); - }, - - "test myrect.set(stroke)" : function() - { - var myrect = this.myrect; - myrect.set("stroke", { - color: this.updatedStrokeColor - }); - - Y.assert(this.updatedStrokeColor === myrect.get("stroke").color); - }, - - "test myrect.set(fill)" : function() + "testCanvasRectNodeDimensions()" : function() { - var myrect = this.myrect; - myrect.set("fill", { - color: this.updatedFillColor - }); - - Y.assert(this.updatedFillColor === myrect.get("fill").color); + var node = this.myrect.get("node"), + stroke = this.myrect.get("stroke"), + weight = stroke.weight; + weight *= 2; + Y.assert(node.getAttribute("width") == this.width + weight); + Y.assert(node.getAttribute("height") == this.height + weight); }, - "test removeShape(rect)" : function() + "testCanvasRectNodeFillColor()" : function() { - var id, - shapes = graphic.get("shapes"), - hasShape; - graphic.removeShape(this.myrect); - hasShape = (shapes.hasOwnProperty(id) && shapes[id] instanceof Y.Rect); - Y.Assert.isFalse(hasShape); + var node = this.myrect.get("node"), + opacity = parseFloat(this.initialFillOpacity), + fillColor = this.initialFillColor, + shapeFillColor = this.context.fillStyle; + opacity = Y.Lang.isNumber(opacity) && opacity < 1 ? opacity : 1; + if(shapeFillColor.indexOf("RGBA") > -1 || shapeFillColor.indexOf("rgba") > -1) + { + shapeFillColor = shapeFillColor.toLowerCase(); + shapeFillColor = shapeFillColor.replace(/, /g, ","); + fillColor = this.toRGBA(this.TOHEX(fillColor), opacity) + } + else + { + shapeFillColor = this.TOHEX(shapeFillColor); + fillColor = this.TOHEX(fillColor); + } + Y.assert(shapeFillColor == fillColor); }, - "test addShape(ellipse)": function() + "testCanvasRectNodeFillColorAgainstAttr()" : function() { - var myellipse = graphic.addShape({ - type: "ellipse", - stroke: { - color: this.initialStrokeColor, - weight: 2 - }, - fill: { - color: this.initialFillColor - }, - width: 100, - height: 30, - x:100, - y:50 - }); - Y.assert(myellipse instanceof Y.Ellipse); - this.myellipse = myellipse; + var node = this.myrect.get("node"), + fill = this.myrect.get("fill"), + opacity = parseFloat(fill.opacity), + fillColor = fill.color, + shapeFillColor = this.context.fillStyle; + opacity = Y.Lang.isNumber(opacity) && opacity < 1 ? opacity : 1; + if(shapeFillColor.indexOf("RGBA") > -1 || shapeFillColor.indexOf("rgba") > -1) + { + shapeFillColor = shapeFillColor.toLowerCase(); + shapeFillColor = shapeFillColor.replace(/, /g, ","); + fillColor = this.toRGBA(this.TOHEX(fillColor), opacity) + } + else + { + shapeFillColor = this.TOHEX(shapeFillColor); + fillColor = this.TOHEX(fillColor); + } + Y.assert(shapeFillColor == fillColor); }, - "test myellipse.get(width)": function() + "testCanvasRectNodeStrokeColor" : function() { - Y.assert(this.myellipse.get("width") === 100); + var node = this.myrect.get("node"), + opacity = parseFloat(this.initialStrokeOpacity), + strokeColor = this.TOHEX(this.initialStrokeColor), + shapeStrokeColor = this.context.strokeStyle; + opacity = Y.Lang.isNumber(opacity) && opacity < 1 ? opacity : 1 + if(shapeStrokeColor.indexOf("RGBA") > -1 || shapeStrokeColor.indexOf("rgba") > -1) + { + shapeStrokeColor = shapeStrokeColor.toLowerCase(); + shapeStrokeColor = shapeStrokeColor.replace(/, /g, ","); + strokeColor = this.toRGBA(this.TOHEX(strokeColor), opacity) + } + else + { + shapeStrokeColor = this.TOHEX(shapeStrokeColor); + strokeColor = this.TOHEX(strokeColor); + } + Y.assert(shapeStrokeColor == strokeColor); }, - "test myellipse.get(height)" : function() + "testCanvasRectNodeStrokeColorAgainstAttr()" : function() { - Y.assert(this.myellipse.get("height") === 30); + var node = this.myrect.get("node"), + stroke = this.myrect.get("stroke"), + opacity = parseFloat(stroke.opacity), + strokeColor = this.TOHEX(stroke.color), + shapeStrokeColor = this.context.strokeStyle; + opacity = Y.Lang.isNumber(opacity) && opacity < 1 ? opacity : 1; + if(shapeStrokeColor.indexOf("RGBA") > -1 || shapeStrokeColor.indexOf("rgba") > -1) + { + shapeStrokeColor = shapeStrokeColor.toLowerCase(); + shapeStrokeColor = shapeStrokeColor.replace(/, /g, ","); + strokeColor = this.toRGBA(this.TOHEX(strokeColor), opacity) + } + else + { + shapeStrokeColor = this.TOHEX(shapeStrokeColor); + strokeColor = this.TOHEX(strokeColor); + } + Y.assert(shapeStrokeColor == strokeColor); }, - "test myellipse.get(stroke)" : function() + "testCanvasRectNodeStrokeWidth" : function() { - var stroke = this.myellipse.get("stroke"); - Y.assert(stroke.color === this.initialStrokeColor); + var weight = this.initialStrokeWeight, + shapeWeight = this.context.lineWidth; + Y.assert(weight == shapeWeight); }, - "test myellipse.get(fill)" : function() + "testCanvasRectNodeStrokeWidthAgainstAttr()" : function() { - var fill = this.myellipse.get("fill"); - Y.assert(fill.color === this.initialFillColor); + var stroke = this.myrect.get("stroke"), + weight = stroke.weight; + Y.assert(weight == this.context.lineWidth); }, - "test myellipse.get(x)" : function() + "testCanvasRectNodeStrokeLineCap" : function() { - Y.assert(this.myellipse.get("x") === 100); + Y.assert(this.context.lineCap == this.linecap); }, - "test myellipse.get(y)" : function() + "testCanvasRectNodeStrokeLineJoin" : function() { - Y.assert(this.myellipse.get("y") === 50); + Y.assert(this.context.lineJoin == "round"); }, - "test myellipse.set(stroke)" : function() + "testCanvasRectNodeWidthAgainstShapeAttr" : function() { - var myellipse = this.myellipse; - myellipse.set("stroke", { - color: this.updatedStrokeColor - }); - - Y.assert(this.updatedStrokeColor === myellipse.get("stroke").color); + var node = this.myrect.get("node"), + stroke = this.myrect.get("stroke"), + weight = stroke.weight || 0, + width = this.myrect.get("width"); + width += weight * 2; + Y.assert(node.getAttribute("width") == width); }, - "test myellipse.set(fill)" : function() - { - var myellipse = this.myellipse; - myellipse.set("fill", { - color: this.updatedFillColor - }); - - Y.assert(this.updatedFillColor === myellipse.get("fill").color); - }, - - "test removeShape(ellipse)" : function() + "testCanvasRectNodeHeightAgainstShapeAttr" : function() { - var id, - shapes = graphic.get("shapes"), - hasShape; - graphic.removeShape(this.myellipse); - hasShape = (shapes.hasOwnProperty(id) && shapes[id] instanceof Y.Ellipse); - Y.Assert.isFalse(hasShape); - }, + var node = this.myrect.get("node"), + stroke = this.myrect.get("stroke"), + weight = stroke.weight || 0, + height = this.myrect.get("height"); + height += weight * 2; + Y.assert(node.getAttribute("height") == height); + } +}); - "test addShape(path)": function() - { - var mypath = graphic.addShape({ - type: "path", - stroke: { - color: this.initialStrokeColor - }, - fill: { - color: this.initialFillColor - } - }); - mypath.moveTo(-20, -20); - mypath.lineTo(80, 120); - mypath.lineTo(100, 80); - mypath.lineTo(-20, -20); - mypath.end(); - Y.assert(mypath instanceof Y.Path); - this.mypath = mypath; - }, +transformTests = new Y.Test.Case({ + name: "GraphicsTransformTests", - "test mypath.get(width)": function() - { - Y.assert(this.mypath.get("width") === 120); - }, + graphic: null, - "test mypath.get(height)" : function() - { - Y.assert(this.mypath.get("height") === 140); - }, + myrect: null, - "test mypath.get(stroke)" : function() - { - var stroke = this.mypath.get("stroke"); - Y.assert(stroke.color === this.initialStrokeColor); - }, + initialFillColor: "#f00", - "test mypath.get(fill)" : function() - { - var fill = this.mypath.get("fill"); - Y.assert(fill.color === this.initialFillColor); - }, + initialStrokeColor: "#00f", - "test mypath.get(x)" : function() - { - Y.assert(this.mypath.get("x") === 0); - }, + defaultTransformString: "rotate(40) translate(45, 55) skew(30, 30)", - "test mypath.get(y)" : function() - { - Y.assert(this.mypath.get("y") === 0); - }, + width: 300, - "test mypath.set(stroke)" : function() - { - var mypath = this.mypath; - mypath.set("stroke", { - color: this.updatedStrokeColor - }); + height: 200, - Y.assert(this.updatedStrokeColor === mypath.get("stroke").color); + setUp: function () { + Y.one("body").append('
'); }, - - "test mypath.set(fill)" : function() - { - var mypath = this.mypath; - mypath.set("fill", { - color: this.updatedFillColor - }); - Y.assert(this.updatedFillColor === mypath.get("fill").color); + tearDown: function () { + Y.one("#testbed").remove(true); }, - "test removeShape(path)" : function() + "testGraphicInstantiation()" : function() { - var id, - shapes = graphic.get("shapes"), - hasShape; - graphic.removeShape(this.mypath); - hasShape = (shapes.hasOwnProperty(id) && shapes[id] instanceof Y.Path); - Y.Assert.isFalse(hasShape); + Y.one("#testbed").setContent('
'); + var graphic = new Y.Graphic({render: "#graphiccontainer"}); + graphic.on("init", function(e) { + Y.Assert.isInstanceOf(Y.Graphic, graphic); + }); + this.graphic = graphic; }, - "test passRotation(rect)" : function() + "testTransformAttributeIntantiation()" : function() { - var myrect = graphic.addShape({ + var rect = this.graphic.addShape({ type: "rect", + width: this.width, + height: this.height, stroke: { - weight: 2, color: this.initialStrokeColor }, fill: { color: this.initialFillColor }, - x: 5, - y: 5, - width:300, - height: 200, - rotation: 45 + transform: this.defaultTransformString }); - Y.assert(myrect instanceof Y.Rect); + this.rect = rect; + Y.assert(this.rect.get("transform") == this.defaultTransformString); + }, + + "testAddTransformStringAppend()" : function() + { + var scaleString = this.defaultTransformString + " scale(2, 2)"; + this.rect.scale(2, 2); + Y.assert(scaleString == this.rect.get("transform")); + }, + + "testAddTransformsAndCompareToString()": function() + { + this.rect.set("transform", ""); + Y.assert(this.rect.get("transform") == ""); + this.rect.translate(30, 10); + this.rect.rotate(90); + this.rect.skewX(10); + Y.assert(this.rect.get("transform") == "translate(30, 10) rotate(90) skewX(10)"); } -})); +}); +suite.add(graphicTests); -Y.Test.Runner.add( suite ); +if(ENGINE == "svg") +{ + suite.add(svgTests); +} +if(ENGINE == "vml") +{ + suite.add(vmlTests); +} +if(ENGINE == "canvas") +{ + suite.add(canvasTests); +} +suite.add(transformTests); + +Y.Test.Runner.add( suite ); }, '@VERSION@' ,{requires:['graphics', 'test']});