Index: trunk/extensions/Plotters/libs/excanvas.compiled.js |
— | — | @@ -0,0 +1,35 @@ |
| 2 | +// Copyright 2006 Google Inc. |
| 3 | +// |
| 4 | +// Licensed under the Apache License, Version 2.0 (the "License"); |
| 5 | +// you may not use this file except in compliance with the License. |
| 6 | +// You may obtain a copy of the License at |
| 7 | +// |
| 8 | +// http://www.apache.org/licenses/LICENSE-2.0 |
| 9 | +// |
| 10 | +// Unless required by applicable law or agreed to in writing, software |
| 11 | +// distributed under the License is distributed on an "AS IS" BASIS, |
| 12 | +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 13 | +// See the License for the specific language governing permissions and |
| 14 | +// limitations under the License. |
| 15 | +document.createElement("canvas").getContext||(function(){var s=Math,j=s.round,F=s.sin,G=s.cos,V=s.abs,W=s.sqrt,k=10,v=k/2;function X(){return this.context_||(this.context_=new H(this))}var L=Array.prototype.slice;function Y(b,a){var c=L.call(arguments,2);return function(){return b.apply(a,c.concat(L.call(arguments)))}}var M={init:function(b){if(/MSIE/.test(navigator.userAgent)&&!window.opera){var a=b||document;a.createElement("canvas");a.attachEvent("onreadystatechange",Y(this.init_,this,a))}},init_:function(b){b.namespaces.g_vml_|| |
| 16 | +b.namespaces.add("g_vml_","urn:schemas-microsoft-com:vml","#default#VML");b.namespaces.g_o_||b.namespaces.add("g_o_","urn:schemas-microsoft-com:office:office","#default#VML");if(!b.styleSheets.ex_canvas_){var a=b.createStyleSheet();a.owningElement.id="ex_canvas_";a.cssText="canvas{display:inline-block;overflow:hidden;text-align:left;width:300px;height:150px}g_vml_\\:*{behavior:url(#default#VML)}g_o_\\:*{behavior:url(#default#VML)}"}var c=b.getElementsByTagName("canvas"),d=0;for(;d<c.length;d++)this.initElement(c[d])}, |
| 17 | +initElement:function(b){if(!b.getContext){b.getContext=X;b.innerHTML="";b.attachEvent("onpropertychange",Z);b.attachEvent("onresize",$);var a=b.attributes;if(a.width&&a.width.specified)b.style.width=a.width.nodeValue+"px";else b.width=b.clientWidth;if(a.height&&a.height.specified)b.style.height=a.height.nodeValue+"px";else b.height=b.clientHeight}return b}};function Z(b){var a=b.srcElement;switch(b.propertyName){case "width":a.style.width=a.attributes.width.nodeValue+"px";a.getContext().clearRect(); |
| 18 | +break;case "height":a.style.height=a.attributes.height.nodeValue+"px";a.getContext().clearRect();break}}function $(b){var a=b.srcElement;if(a.firstChild){a.firstChild.style.width=a.clientWidth+"px";a.firstChild.style.height=a.clientHeight+"px"}}M.init();var N=[],B=0;for(;B<16;B++){var C=0;for(;C<16;C++)N[B*16+C]=B.toString(16)+C.toString(16)}function I(){return[[1,0,0],[0,1,0],[0,0,1]]}function y(b,a){var c=I(),d=0;for(;d<3;d++){var f=0;for(;f<3;f++){var h=0,g=0;for(;g<3;g++)h+=b[d][g]*a[g][f];c[d][f]= |
| 19 | +h}}return c}function O(b,a){a.fillStyle=b.fillStyle;a.lineCap=b.lineCap;a.lineJoin=b.lineJoin;a.lineWidth=b.lineWidth;a.miterLimit=b.miterLimit;a.shadowBlur=b.shadowBlur;a.shadowColor=b.shadowColor;a.shadowOffsetX=b.shadowOffsetX;a.shadowOffsetY=b.shadowOffsetY;a.strokeStyle=b.strokeStyle;a.globalAlpha=b.globalAlpha;a.arcScaleX_=b.arcScaleX_;a.arcScaleY_=b.arcScaleY_;a.lineScale_=b.lineScale_}function P(b){var a,c=1;b=String(b);if(b.substring(0,3)=="rgb"){var d=b.indexOf("(",3),f=b.indexOf(")",d+ |
| 20 | +1),h=b.substring(d+1,f).split(",");a="#";var g=0;for(;g<3;g++)a+=N[Number(h[g])];if(h.length==4&&b.substr(3,1)=="a")c=h[3]}else a=b;return{color:a,alpha:c}}function aa(b){switch(b){case "butt":return"flat";case "round":return"round";case "square":default:return"square"}}function H(b){this.m_=I();this.mStack_=[];this.aStack_=[];this.currentPath_=[];this.fillStyle=this.strokeStyle="#000";this.lineWidth=1;this.lineJoin="miter";this.lineCap="butt";this.miterLimit=k*1;this.globalAlpha=1;this.canvas=b; |
| 21 | +var a=b.ownerDocument.createElement("div");a.style.width=b.clientWidth+"px";a.style.height=b.clientHeight+"px";a.style.overflow="hidden";a.style.position="absolute";b.appendChild(a);this.element_=a;this.lineScale_=this.arcScaleY_=this.arcScaleX_=1}var i=H.prototype;i.clearRect=function(){this.element_.innerHTML=""};i.beginPath=function(){this.currentPath_=[]};i.moveTo=function(b,a){var c=this.getCoords_(b,a);this.currentPath_.push({type:"moveTo",x:c.x,y:c.y});this.currentX_=c.x;this.currentY_=c.y}; |
| 22 | +i.lineTo=function(b,a){var c=this.getCoords_(b,a);this.currentPath_.push({type:"lineTo",x:c.x,y:c.y});this.currentX_=c.x;this.currentY_=c.y};i.bezierCurveTo=function(b,a,c,d,f,h){var g=this.getCoords_(f,h),l=this.getCoords_(b,a),e=this.getCoords_(c,d);Q(this,l,e,g)};function Q(b,a,c,d){b.currentPath_.push({type:"bezierCurveTo",cp1x:a.x,cp1y:a.y,cp2x:c.x,cp2y:c.y,x:d.x,y:d.y});b.currentX_=d.x;b.currentY_=d.y}i.quadraticCurveTo=function(b,a,c,d){var f=this.getCoords_(b,a),h=this.getCoords_(c,d),g={x:this.currentX_+ |
| 23 | +0.6666666666666666*(f.x-this.currentX_),y:this.currentY_+0.6666666666666666*(f.y-this.currentY_)};Q(this,g,{x:g.x+(h.x-this.currentX_)/3,y:g.y+(h.y-this.currentY_)/3},h)};i.arc=function(b,a,c,d,f,h){c*=k;var g=h?"at":"wa",l=b+G(d)*c-v,e=a+F(d)*c-v,m=b+G(f)*c-v,r=a+F(f)*c-v;if(l==m&&!h)l+=0.125;var n=this.getCoords_(b,a),o=this.getCoords_(l,e),q=this.getCoords_(m,r);this.currentPath_.push({type:g,x:n.x,y:n.y,radius:c,xStart:o.x,yStart:o.y,xEnd:q.x,yEnd:q.y})};i.rect=function(b,a,c,d){this.moveTo(b, |
| 24 | +a);this.lineTo(b+c,a);this.lineTo(b+c,a+d);this.lineTo(b,a+d);this.closePath()};i.strokeRect=function(b,a,c,d){var f=this.currentPath_;this.beginPath();this.moveTo(b,a);this.lineTo(b+c,a);this.lineTo(b+c,a+d);this.lineTo(b,a+d);this.closePath();this.stroke();this.currentPath_=f};i.fillRect=function(b,a,c,d){var f=this.currentPath_;this.beginPath();this.moveTo(b,a);this.lineTo(b+c,a);this.lineTo(b+c,a+d);this.lineTo(b,a+d);this.closePath();this.fill();this.currentPath_=f};i.createLinearGradient=function(b, |
| 25 | +a,c,d){var f=new D("gradient");f.x0_=b;f.y0_=a;f.x1_=c;f.y1_=d;return f};i.createRadialGradient=function(b,a,c,d,f,h){var g=new D("gradientradial");g.x0_=b;g.y0_=a;g.r0_=c;g.x1_=d;g.y1_=f;g.r1_=h;return g};i.drawImage=function(b){var a,c,d,f,h,g,l,e,m=b.runtimeStyle.width,r=b.runtimeStyle.height;b.runtimeStyle.width="auto";b.runtimeStyle.height="auto";var n=b.width,o=b.height;b.runtimeStyle.width=m;b.runtimeStyle.height=r;if(arguments.length==3){a=arguments[1];c=arguments[2];h=g=0;l=d=n;e=f=o}else if(arguments.length== |
| 26 | +5){a=arguments[1];c=arguments[2];d=arguments[3];f=arguments[4];h=g=0;l=n;e=o}else if(arguments.length==9){h=arguments[1];g=arguments[2];l=arguments[3];e=arguments[4];a=arguments[5];c=arguments[6];d=arguments[7];f=arguments[8]}else throw Error("Invalid number of arguments");var q=this.getCoords_(a,c),t=[];t.push(" <g_vml_:group",' coordsize="',k*10,",",k*10,'"',' coordorigin="0,0"',' style="width:',10,"px;height:",10,"px;position:absolute;");if(this.m_[0][0]!=1||this.m_[0][1]){var E=[];E.push("M11=", |
| 27 | +this.m_[0][0],",","M12=",this.m_[1][0],",","M21=",this.m_[0][1],",","M22=",this.m_[1][1],",","Dx=",j(q.x/k),",","Dy=",j(q.y/k),"");var p=q,z=this.getCoords_(a+d,c),w=this.getCoords_(a,c+f),x=this.getCoords_(a+d,c+f);p.x=s.max(p.x,z.x,w.x,x.x);p.y=s.max(p.y,z.y,w.y,x.y);t.push("padding:0 ",j(p.x/k),"px ",j(p.y/k),"px 0;filter:progid:DXImageTransform.Microsoft.Matrix(",E.join(""),", sizingmethod='clip');")}else t.push("top:",j(q.y/k),"px;left:",j(q.x/k),"px;");t.push(' ">','<g_vml_:image src="',b.src, |
| 28 | +'"',' style="width:',k*d,"px;"," height:",k*f,'px;"',' cropleft="',h/n,'"',' croptop="',g/o,'"',' cropright="',(n-h-l)/n,'"',' cropbottom="',(o-g-e)/o,'"'," />","</g_vml_:group>");this.element_.insertAdjacentHTML("BeforeEnd",t.join(""))};i.stroke=function(b){var a=[],c=P(b?this.fillStyle:this.strokeStyle),d=c.color,f=c.alpha*this.globalAlpha;a.push("<g_vml_:shape",' filled="',!!b,'"',' style="position:absolute;width:',10,"px;height:",10,'px;"',' coordorigin="0 0" coordsize="',k*10," ",k*10,'"',' stroked="', |
| 29 | +!b,'"',' path="');var h={x:null,y:null},g={x:null,y:null},l=0;for(;l<this.currentPath_.length;l++){var e=this.currentPath_[l];switch(e.type){case "moveTo":a.push(" m ",j(e.x),",",j(e.y));break;case "lineTo":a.push(" l ",j(e.x),",",j(e.y));break;case "close":a.push(" x ");e=null;break;case "bezierCurveTo":a.push(" c ",j(e.cp1x),",",j(e.cp1y),",",j(e.cp2x),",",j(e.cp2y),",",j(e.x),",",j(e.y));break;case "at":case "wa":a.push(" ",e.type," ",j(e.x-this.arcScaleX_*e.radius),",",j(e.y-this.arcScaleY_*e.radius), |
| 30 | +" ",j(e.x+this.arcScaleX_*e.radius),",",j(e.y+this.arcScaleY_*e.radius)," ",j(e.xStart),",",j(e.yStart)," ",j(e.xEnd),",",j(e.yEnd));break}if(e){if(h.x==null||e.x<h.x)h.x=e.x;if(g.x==null||e.x>g.x)g.x=e.x;if(h.y==null||e.y<h.y)h.y=e.y;if(g.y==null||e.y>g.y)g.y=e.y}}a.push(' ">');if(b)if(typeof this.fillStyle=="object"){var m=this.fillStyle,r=0,n={x:0,y:0},o=0,q=1;if(m.type_=="gradient"){var t=m.x1_/this.arcScaleX_,E=m.y1_/this.arcScaleY_,p=this.getCoords_(m.x0_/this.arcScaleX_,m.y0_/this.arcScaleY_), |
| 31 | +z=this.getCoords_(t,E);r=Math.atan2(z.x-p.x,z.y-p.y)*180/Math.PI;if(r<0)r+=360;if(r<1.0E-6)r=0}else{var p=this.getCoords_(m.x0_,m.y0_),w=g.x-h.x,x=g.y-h.y;n={x:(p.x-h.x)/w,y:(p.y-h.y)/x};w/=this.arcScaleX_*k;x/=this.arcScaleY_*k;var R=s.max(w,x);o=2*m.r0_/R;q=2*m.r1_/R-o}var u=m.colors_;u.sort(function(ba,ca){return ba.offset-ca.offset});var J=u.length,da=u[0].color,ea=u[J-1].color,fa=u[0].alpha*this.globalAlpha,ga=u[J-1].alpha*this.globalAlpha,S=[],l=0;for(;l<J;l++){var T=u[l];S.push(T.offset*q+ |
| 32 | +o+" "+T.color)}a.push('<g_vml_:fill type="',m.type_,'"',' method="none" focus="100%"',' color="',da,'"',' color2="',ea,'"',' colors="',S.join(","),'"',' opacity="',ga,'"',' g_o_:opacity2="',fa,'"',' angle="',r,'"',' focusposition="',n.x,",",n.y,'" />')}else a.push('<g_vml_:fill color="',d,'" opacity="',f,'" />');else{var K=this.lineScale_*this.lineWidth;if(K<1)f*=K;a.push("<g_vml_:stroke",' opacity="',f,'"',' joinstyle="',this.lineJoin,'"',' miterlimit="',this.miterLimit,'"',' endcap="',aa(this.lineCap), |
| 33 | +'"',' weight="',K,'px"',' color="',d,'" />')}a.push("</g_vml_:shape>");this.element_.insertAdjacentHTML("beforeEnd",a.join(""))};i.fill=function(){this.stroke(true)};i.closePath=function(){this.currentPath_.push({type:"close"})};i.getCoords_=function(b,a){var c=this.m_;return{x:k*(b*c[0][0]+a*c[1][0]+c[2][0])-v,y:k*(b*c[0][1]+a*c[1][1]+c[2][1])-v}};i.save=function(){var b={};O(this,b);this.aStack_.push(b);this.mStack_.push(this.m_);this.m_=y(I(),this.m_)};i.restore=function(){O(this.aStack_.pop(), |
| 34 | +this);this.m_=this.mStack_.pop()};function ha(b){var a=0;for(;a<3;a++){var c=0;for(;c<2;c++)if(!isFinite(b[a][c])||isNaN(b[a][c]))return false}return true}function A(b,a,c){if(!!ha(a)){b.m_=a;if(c)b.lineScale_=W(V(a[0][0]*a[1][1]-a[0][1]*a[1][0]))}}i.translate=function(b,a){A(this,y([[1,0,0],[0,1,0],[b,a,1]],this.m_),false)};i.rotate=function(b){var a=G(b),c=F(b);A(this,y([[a,c,0],[-c,a,0],[0,0,1]],this.m_),false)};i.scale=function(b,a){this.arcScaleX_*=b;this.arcScaleY_*=a;A(this,y([[b,0,0],[0,a, |
| 35 | +0],[0,0,1]],this.m_),true)};i.transform=function(b,a,c,d,f,h){A(this,y([[b,a,0],[c,d,0],[f,h,1]],this.m_),true)};i.setTransform=function(b,a,c,d,f,h){A(this,[[b,a,0],[c,d,0],[f,h,1]],true)};i.clip=function(){};i.arcTo=function(){};i.createPattern=function(){return new U};function D(b){this.type_=b;this.r1_=this.y1_=this.x1_=this.r0_=this.y0_=this.x0_=0;this.colors_=[]}D.prototype.addColorStop=function(b,a){a=P(a);this.colors_.push({offset:b,color:a.color,alpha:a.alpha})};function U(){}G_vmlCanvasManager= |
| 36 | +M;CanvasRenderingContext2D=H;CanvasGradient=D;CanvasPattern=U})(); |
Property changes on: trunk/extensions/Plotters/libs/excanvas.compiled.js |
___________________________________________________________________ |
Added: svn:eol-style |
1 | 37 | + native |
Index: trunk/extensions/Plotters/libs/excanvas.js |
— | — | @@ -0,0 +1,924 @@ |
| 2 | +// Copyright 2006 Google Inc. |
| 3 | +// |
| 4 | +// Licensed under the Apache License, Version 2.0 (the "License"); |
| 5 | +// you may not use this file except in compliance with the License. |
| 6 | +// You may obtain a copy of the License at |
| 7 | +// |
| 8 | +// http://www.apache.org/licenses/LICENSE-2.0 |
| 9 | +// |
| 10 | +// Unless required by applicable law or agreed to in writing, software |
| 11 | +// distributed under the License is distributed on an "AS IS" BASIS, |
| 12 | +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 13 | +// See the License for the specific language governing permissions and |
| 14 | +// limitations under the License. |
| 15 | + |
| 16 | + |
| 17 | +// Known Issues: |
| 18 | +// |
| 19 | +// * Patterns are not implemented. |
| 20 | +// * Radial gradient are not implemented. The VML version of these look very |
| 21 | +// different from the canvas one. |
| 22 | +// * Clipping paths are not implemented. |
| 23 | +// * Coordsize. The width and height attribute have higher priority than the |
| 24 | +// width and height style values which isn't correct. |
| 25 | +// * Painting mode isn't implemented. |
| 26 | +// * Canvas width/height should is using content-box by default. IE in |
| 27 | +// Quirks mode will draw the canvas using border-box. Either change your |
| 28 | +// doctype to HTML5 |
| 29 | +// (http://www.whatwg.org/specs/web-apps/current-work/#the-doctype) |
| 30 | +// or use Box Sizing Behavior from WebFX |
| 31 | +// (http://webfx.eae.net/dhtml/boxsizing/boxsizing.html) |
| 32 | +// * Non uniform scaling does not correctly scale strokes. |
| 33 | +// * Optimize. There is always room for speed improvements. |
| 34 | + |
| 35 | +// Only add this code if we do not already have a canvas implementation |
| 36 | +if (!document.createElement('canvas').getContext) { |
| 37 | + |
| 38 | +(function() { |
| 39 | + |
| 40 | + // alias some functions to make (compiled) code shorter |
| 41 | + var m = Math; |
| 42 | + var mr = m.round; |
| 43 | + var ms = m.sin; |
| 44 | + var mc = m.cos; |
| 45 | + var abs = m.abs; |
| 46 | + var sqrt = m.sqrt; |
| 47 | + |
| 48 | + // this is used for sub pixel precision |
| 49 | + var Z = 10; |
| 50 | + var Z2 = Z / 2; |
| 51 | + |
| 52 | + /** |
| 53 | + * This funtion is assigned to the <canvas> elements as element.getContext(). |
| 54 | + * @this {HTMLElement} |
| 55 | + * @return {CanvasRenderingContext2D_} |
| 56 | + */ |
| 57 | + function getContext() { |
| 58 | + return this.context_ || |
| 59 | + (this.context_ = new CanvasRenderingContext2D_(this)); |
| 60 | + } |
| 61 | + |
| 62 | + var slice = Array.prototype.slice; |
| 63 | + |
| 64 | + /** |
| 65 | + * Binds a function to an object. The returned function will always use the |
| 66 | + * passed in {@code obj} as {@code this}. |
| 67 | + * |
| 68 | + * Example: |
| 69 | + * |
| 70 | + * g = bind(f, obj, a, b) |
| 71 | + * g(c, d) // will do f.call(obj, a, b, c, d) |
| 72 | + * |
| 73 | + * @param {Function} f The function to bind the object to |
| 74 | + * @param {Object} obj The object that should act as this when the function |
| 75 | + * is called |
| 76 | + * @param {*} var_args Rest arguments that will be used as the initial |
| 77 | + * arguments when the function is called |
| 78 | + * @return {Function} A new function that has bound this |
| 79 | + */ |
| 80 | + function bind(f, obj, var_args) { |
| 81 | + var a = slice.call(arguments, 2); |
| 82 | + return function() { |
| 83 | + return f.apply(obj, a.concat(slice.call(arguments))); |
| 84 | + }; |
| 85 | + } |
| 86 | + |
| 87 | + var G_vmlCanvasManager_ = { |
| 88 | + init: function(opt_doc) { |
| 89 | + if (/MSIE/.test(navigator.userAgent) && !window.opera) { |
| 90 | + var doc = opt_doc || document; |
| 91 | + // Create a dummy element so that IE will allow canvas elements to be |
| 92 | + // recognized. |
| 93 | + doc.createElement('canvas'); |
| 94 | + doc.attachEvent('onreadystatechange', bind(this.init_, this, doc)); |
| 95 | + } |
| 96 | + }, |
| 97 | + |
| 98 | + init_: function(doc) { |
| 99 | + // create xmlns |
| 100 | + if (!doc.namespaces['g_vml_']) { |
| 101 | + doc.namespaces.add('g_vml_', 'urn:schemas-microsoft-com:vml', |
| 102 | + '#default#VML'); |
| 103 | + |
| 104 | + } |
| 105 | + if (!doc.namespaces['g_o_']) { |
| 106 | + doc.namespaces.add('g_o_', 'urn:schemas-microsoft-com:office:office', |
| 107 | + '#default#VML'); |
| 108 | + } |
| 109 | + |
| 110 | + // Setup default CSS. Only add one style sheet per document |
| 111 | + if (!doc.styleSheets['ex_canvas_']) { |
| 112 | + var ss = doc.createStyleSheet(); |
| 113 | + ss.owningElement.id = 'ex_canvas_'; |
| 114 | + ss.cssText = 'canvas{display:inline-block;overflow:hidden;' + |
| 115 | + // default size is 300x150 in Gecko and Opera |
| 116 | + 'text-align:left;width:300px;height:150px}' + |
| 117 | + 'g_vml_\\:*{behavior:url(#default#VML)}' + |
| 118 | + 'g_o_\\:*{behavior:url(#default#VML)}'; |
| 119 | + |
| 120 | + } |
| 121 | + |
| 122 | + // find all canvas elements |
| 123 | + var els = doc.getElementsByTagName('canvas'); |
| 124 | + for (var i = 0; i < els.length; i++) { |
| 125 | + this.initElement(els[i]); |
| 126 | + } |
| 127 | + }, |
| 128 | + |
| 129 | + /** |
| 130 | + * Public initializes a canvas element so that it can be used as canvas |
| 131 | + * element from now on. This is called automatically before the page is |
| 132 | + * loaded but if you are creating elements using createElement you need to |
| 133 | + * make sure this is called on the element. |
| 134 | + * @param {HTMLElement} el The canvas element to initialize. |
| 135 | + * @return {HTMLElement} the element that was created. |
| 136 | + */ |
| 137 | + initElement: function(el) { |
| 138 | + if (!el.getContext) { |
| 139 | + |
| 140 | + el.getContext = getContext; |
| 141 | + |
| 142 | + // Remove fallback content. There is no way to hide text nodes so we |
| 143 | + // just remove all childNodes. We could hide all elements and remove |
| 144 | + // text nodes but who really cares about the fallback content. |
| 145 | + el.innerHTML = ''; |
| 146 | + |
| 147 | + // do not use inline function because that will leak memory |
| 148 | + el.attachEvent('onpropertychange', onPropertyChange); |
| 149 | + el.attachEvent('onresize', onResize); |
| 150 | + |
| 151 | + var attrs = el.attributes; |
| 152 | + if (attrs.width && attrs.width.specified) { |
| 153 | + // TODO: use runtimeStyle and coordsize |
| 154 | + // el.getContext().setWidth_(attrs.width.nodeValue); |
| 155 | + el.style.width = attrs.width.nodeValue + 'px'; |
| 156 | + } else { |
| 157 | + el.width = el.clientWidth; |
| 158 | + } |
| 159 | + if (attrs.height && attrs.height.specified) { |
| 160 | + // TODO: use runtimeStyle and coordsize |
| 161 | + // el.getContext().setHeight_(attrs.height.nodeValue); |
| 162 | + el.style.height = attrs.height.nodeValue + 'px'; |
| 163 | + } else { |
| 164 | + el.height = el.clientHeight; |
| 165 | + } |
| 166 | + //el.getContext().setCoordsize_() |
| 167 | + } |
| 168 | + return el; |
| 169 | + } |
| 170 | + }; |
| 171 | + |
| 172 | + function onPropertyChange(e) { |
| 173 | + var el = e.srcElement; |
| 174 | + |
| 175 | + switch (e.propertyName) { |
| 176 | + case 'width': |
| 177 | + el.style.width = el.attributes.width.nodeValue + 'px'; |
| 178 | + el.getContext().clearRect(); |
| 179 | + break; |
| 180 | + case 'height': |
| 181 | + el.style.height = el.attributes.height.nodeValue + 'px'; |
| 182 | + el.getContext().clearRect(); |
| 183 | + break; |
| 184 | + } |
| 185 | + } |
| 186 | + |
| 187 | + function onResize(e) { |
| 188 | + var el = e.srcElement; |
| 189 | + if (el.firstChild) { |
| 190 | + el.firstChild.style.width = el.clientWidth + 'px'; |
| 191 | + el.firstChild.style.height = el.clientHeight + 'px'; |
| 192 | + } |
| 193 | + } |
| 194 | + |
| 195 | + G_vmlCanvasManager_.init(); |
| 196 | + |
| 197 | + // precompute "00" to "FF" |
| 198 | + var dec2hex = []; |
| 199 | + for (var i = 0; i < 16; i++) { |
| 200 | + for (var j = 0; j < 16; j++) { |
| 201 | + dec2hex[i * 16 + j] = i.toString(16) + j.toString(16); |
| 202 | + } |
| 203 | + } |
| 204 | + |
| 205 | + function createMatrixIdentity() { |
| 206 | + return [ |
| 207 | + [1, 0, 0], |
| 208 | + [0, 1, 0], |
| 209 | + [0, 0, 1] |
| 210 | + ]; |
| 211 | + } |
| 212 | + |
| 213 | + function matrixMultiply(m1, m2) { |
| 214 | + var result = createMatrixIdentity(); |
| 215 | + |
| 216 | + for (var x = 0; x < 3; x++) { |
| 217 | + for (var y = 0; y < 3; y++) { |
| 218 | + var sum = 0; |
| 219 | + |
| 220 | + for (var z = 0; z < 3; z++) { |
| 221 | + sum += m1[x][z] * m2[z][y]; |
| 222 | + } |
| 223 | + |
| 224 | + result[x][y] = sum; |
| 225 | + } |
| 226 | + } |
| 227 | + return result; |
| 228 | + } |
| 229 | + |
| 230 | + function copyState(o1, o2) { |
| 231 | + o2.fillStyle = o1.fillStyle; |
| 232 | + o2.lineCap = o1.lineCap; |
| 233 | + o2.lineJoin = o1.lineJoin; |
| 234 | + o2.lineWidth = o1.lineWidth; |
| 235 | + o2.miterLimit = o1.miterLimit; |
| 236 | + o2.shadowBlur = o1.shadowBlur; |
| 237 | + o2.shadowColor = o1.shadowColor; |
| 238 | + o2.shadowOffsetX = o1.shadowOffsetX; |
| 239 | + o2.shadowOffsetY = o1.shadowOffsetY; |
| 240 | + o2.strokeStyle = o1.strokeStyle; |
| 241 | + o2.globalAlpha = o1.globalAlpha; |
| 242 | + o2.arcScaleX_ = o1.arcScaleX_; |
| 243 | + o2.arcScaleY_ = o1.arcScaleY_; |
| 244 | + o2.lineScale_ = o1.lineScale_; |
| 245 | + } |
| 246 | + |
| 247 | + function processStyle(styleString) { |
| 248 | + var str, alpha = 1; |
| 249 | + |
| 250 | + styleString = String(styleString); |
| 251 | + if (styleString.substring(0, 3) == 'rgb') { |
| 252 | + var start = styleString.indexOf('(', 3); |
| 253 | + var end = styleString.indexOf(')', start + 1); |
| 254 | + var guts = styleString.substring(start + 1, end).split(','); |
| 255 | + |
| 256 | + str = '#'; |
| 257 | + for (var i = 0; i < 3; i++) { |
| 258 | + str += dec2hex[Number(guts[i])]; |
| 259 | + } |
| 260 | + |
| 261 | + if (guts.length == 4 && styleString.substr(3, 1) == 'a') { |
| 262 | + alpha = guts[3]; |
| 263 | + } |
| 264 | + } else { |
| 265 | + str = styleString; |
| 266 | + } |
| 267 | + |
| 268 | + return {color: str, alpha: alpha}; |
| 269 | + } |
| 270 | + |
| 271 | + function processLineCap(lineCap) { |
| 272 | + switch (lineCap) { |
| 273 | + case 'butt': |
| 274 | + return 'flat'; |
| 275 | + case 'round': |
| 276 | + return 'round'; |
| 277 | + case 'square': |
| 278 | + default: |
| 279 | + return 'square'; |
| 280 | + } |
| 281 | + } |
| 282 | + |
| 283 | + /** |
| 284 | + * This class implements CanvasRenderingContext2D interface as described by |
| 285 | + * the WHATWG. |
| 286 | + * @param {HTMLElement} surfaceElement The element that the 2D context should |
| 287 | + * be associated with |
| 288 | + */ |
| 289 | + function CanvasRenderingContext2D_(surfaceElement) { |
| 290 | + this.m_ = createMatrixIdentity(); |
| 291 | + |
| 292 | + this.mStack_ = []; |
| 293 | + this.aStack_ = []; |
| 294 | + this.currentPath_ = []; |
| 295 | + |
| 296 | + // Canvas context properties |
| 297 | + this.strokeStyle = '#000'; |
| 298 | + this.fillStyle = '#000'; |
| 299 | + |
| 300 | + this.lineWidth = 1; |
| 301 | + this.lineJoin = 'miter'; |
| 302 | + this.lineCap = 'butt'; |
| 303 | + this.miterLimit = Z * 1; |
| 304 | + this.globalAlpha = 1; |
| 305 | + this.canvas = surfaceElement; |
| 306 | + |
| 307 | + var el = surfaceElement.ownerDocument.createElement('div'); |
| 308 | + el.style.width = surfaceElement.clientWidth + 'px'; |
| 309 | + el.style.height = surfaceElement.clientHeight + 'px'; |
| 310 | + el.style.overflow = 'hidden'; |
| 311 | + el.style.position = 'absolute'; |
| 312 | + surfaceElement.appendChild(el); |
| 313 | + |
| 314 | + this.element_ = el; |
| 315 | + this.arcScaleX_ = 1; |
| 316 | + this.arcScaleY_ = 1; |
| 317 | + this.lineScale_ = 1; |
| 318 | + } |
| 319 | + |
| 320 | + var contextPrototype = CanvasRenderingContext2D_.prototype; |
| 321 | + contextPrototype.clearRect = function() { |
| 322 | + this.element_.innerHTML = ''; |
| 323 | + }; |
| 324 | + |
| 325 | + contextPrototype.beginPath = function() { |
| 326 | + // TODO: Branch current matrix so that save/restore has no effect |
| 327 | + // as per safari docs. |
| 328 | + this.currentPath_ = []; |
| 329 | + }; |
| 330 | + |
| 331 | + contextPrototype.moveTo = function(aX, aY) { |
| 332 | + var p = this.getCoords_(aX, aY); |
| 333 | + this.currentPath_.push({type: 'moveTo', x: p.x, y: p.y}); |
| 334 | + this.currentX_ = p.x; |
| 335 | + this.currentY_ = p.y; |
| 336 | + }; |
| 337 | + |
| 338 | + contextPrototype.lineTo = function(aX, aY) { |
| 339 | + var p = this.getCoords_(aX, aY); |
| 340 | + this.currentPath_.push({type: 'lineTo', x: p.x, y: p.y}); |
| 341 | + |
| 342 | + this.currentX_ = p.x; |
| 343 | + this.currentY_ = p.y; |
| 344 | + }; |
| 345 | + |
| 346 | + contextPrototype.bezierCurveTo = function(aCP1x, aCP1y, |
| 347 | + aCP2x, aCP2y, |
| 348 | + aX, aY) { |
| 349 | + var p = this.getCoords_(aX, aY); |
| 350 | + var cp1 = this.getCoords_(aCP1x, aCP1y); |
| 351 | + var cp2 = this.getCoords_(aCP2x, aCP2y); |
| 352 | + bezierCurveTo(this, cp1, cp2, p); |
| 353 | + }; |
| 354 | + |
| 355 | + // Helper function that takes the already fixed cordinates. |
| 356 | + function bezierCurveTo(self, cp1, cp2, p) { |
| 357 | + self.currentPath_.push({ |
| 358 | + type: 'bezierCurveTo', |
| 359 | + cp1x: cp1.x, |
| 360 | + cp1y: cp1.y, |
| 361 | + cp2x: cp2.x, |
| 362 | + cp2y: cp2.y, |
| 363 | + x: p.x, |
| 364 | + y: p.y |
| 365 | + }); |
| 366 | + self.currentX_ = p.x; |
| 367 | + self.currentY_ = p.y; |
| 368 | + } |
| 369 | + |
| 370 | + contextPrototype.quadraticCurveTo = function(aCPx, aCPy, aX, aY) { |
| 371 | + // the following is lifted almost directly from |
| 372 | + // http://developer.mozilla.org/en/docs/Canvas_tutorial:Drawing_shapes |
| 373 | + |
| 374 | + var cp = this.getCoords_(aCPx, aCPy); |
| 375 | + var p = this.getCoords_(aX, aY); |
| 376 | + |
| 377 | + var cp1 = { |
| 378 | + x: this.currentX_ + 2.0 / 3.0 * (cp.x - this.currentX_), |
| 379 | + y: this.currentY_ + 2.0 / 3.0 * (cp.y - this.currentY_) |
| 380 | + }; |
| 381 | + var cp2 = { |
| 382 | + x: cp1.x + (p.x - this.currentX_) / 3.0, |
| 383 | + y: cp1.y + (p.y - this.currentY_) / 3.0 |
| 384 | + }; |
| 385 | + |
| 386 | + bezierCurveTo(this, cp1, cp2, p); |
| 387 | + }; |
| 388 | + |
| 389 | + contextPrototype.arc = function(aX, aY, aRadius, |
| 390 | + aStartAngle, aEndAngle, aClockwise) { |
| 391 | + aRadius *= Z; |
| 392 | + var arcType = aClockwise ? 'at' : 'wa'; |
| 393 | + |
| 394 | + var xStart = aX + mc(aStartAngle) * aRadius - Z2; |
| 395 | + var yStart = aY + ms(aStartAngle) * aRadius - Z2; |
| 396 | + |
| 397 | + var xEnd = aX + mc(aEndAngle) * aRadius - Z2; |
| 398 | + var yEnd = aY + ms(aEndAngle) * aRadius - Z2; |
| 399 | + |
| 400 | + // IE won't render arches drawn counter clockwise if xStart == xEnd. |
| 401 | + if (xStart == xEnd && !aClockwise) { |
| 402 | + xStart += 0.125; // Offset xStart by 1/80 of a pixel. Use something |
| 403 | + // that can be represented in binary |
| 404 | + } |
| 405 | + |
| 406 | + var p = this.getCoords_(aX, aY); |
| 407 | + var pStart = this.getCoords_(xStart, yStart); |
| 408 | + var pEnd = this.getCoords_(xEnd, yEnd); |
| 409 | + |
| 410 | + this.currentPath_.push({type: arcType, |
| 411 | + x: p.x, |
| 412 | + y: p.y, |
| 413 | + radius: aRadius, |
| 414 | + xStart: pStart.x, |
| 415 | + yStart: pStart.y, |
| 416 | + xEnd: pEnd.x, |
| 417 | + yEnd: pEnd.y}); |
| 418 | + |
| 419 | + }; |
| 420 | + |
| 421 | + contextPrototype.rect = function(aX, aY, aWidth, aHeight) { |
| 422 | + this.moveTo(aX, aY); |
| 423 | + this.lineTo(aX + aWidth, aY); |
| 424 | + this.lineTo(aX + aWidth, aY + aHeight); |
| 425 | + this.lineTo(aX, aY + aHeight); |
| 426 | + this.closePath(); |
| 427 | + }; |
| 428 | + |
| 429 | + contextPrototype.strokeRect = function(aX, aY, aWidth, aHeight) { |
| 430 | + var oldPath = this.currentPath_; |
| 431 | + this.beginPath(); |
| 432 | + |
| 433 | + this.moveTo(aX, aY); |
| 434 | + this.lineTo(aX + aWidth, aY); |
| 435 | + this.lineTo(aX + aWidth, aY + aHeight); |
| 436 | + this.lineTo(aX, aY + aHeight); |
| 437 | + this.closePath(); |
| 438 | + this.stroke(); |
| 439 | + |
| 440 | + this.currentPath_ = oldPath; |
| 441 | + }; |
| 442 | + |
| 443 | + contextPrototype.fillRect = function(aX, aY, aWidth, aHeight) { |
| 444 | + var oldPath = this.currentPath_; |
| 445 | + this.beginPath(); |
| 446 | + |
| 447 | + this.moveTo(aX, aY); |
| 448 | + this.lineTo(aX + aWidth, aY); |
| 449 | + this.lineTo(aX + aWidth, aY + aHeight); |
| 450 | + this.lineTo(aX, aY + aHeight); |
| 451 | + this.closePath(); |
| 452 | + this.fill(); |
| 453 | + |
| 454 | + this.currentPath_ = oldPath; |
| 455 | + }; |
| 456 | + |
| 457 | + contextPrototype.createLinearGradient = function(aX0, aY0, aX1, aY1) { |
| 458 | + var gradient = new CanvasGradient_('gradient'); |
| 459 | + gradient.x0_ = aX0; |
| 460 | + gradient.y0_ = aY0; |
| 461 | + gradient.x1_ = aX1; |
| 462 | + gradient.y1_ = aY1; |
| 463 | + return gradient; |
| 464 | + }; |
| 465 | + |
| 466 | + contextPrototype.createRadialGradient = function(aX0, aY0, aR0, |
| 467 | + aX1, aY1, aR1) { |
| 468 | + var gradient = new CanvasGradient_('gradientradial'); |
| 469 | + gradient.x0_ = aX0; |
| 470 | + gradient.y0_ = aY0; |
| 471 | + gradient.r0_ = aR0; |
| 472 | + gradient.x1_ = aX1; |
| 473 | + gradient.y1_ = aY1; |
| 474 | + gradient.r1_ = aR1; |
| 475 | + return gradient; |
| 476 | + }; |
| 477 | + |
| 478 | + contextPrototype.drawImage = function(image, var_args) { |
| 479 | + var dx, dy, dw, dh, sx, sy, sw, sh; |
| 480 | + |
| 481 | + // to find the original width we overide the width and height |
| 482 | + var oldRuntimeWidth = image.runtimeStyle.width; |
| 483 | + var oldRuntimeHeight = image.runtimeStyle.height; |
| 484 | + image.runtimeStyle.width = 'auto'; |
| 485 | + image.runtimeStyle.height = 'auto'; |
| 486 | + |
| 487 | + // get the original size |
| 488 | + var w = image.width; |
| 489 | + var h = image.height; |
| 490 | + |
| 491 | + // and remove overides |
| 492 | + image.runtimeStyle.width = oldRuntimeWidth; |
| 493 | + image.runtimeStyle.height = oldRuntimeHeight; |
| 494 | + |
| 495 | + if (arguments.length == 3) { |
| 496 | + dx = arguments[1]; |
| 497 | + dy = arguments[2]; |
| 498 | + sx = sy = 0; |
| 499 | + sw = dw = w; |
| 500 | + sh = dh = h; |
| 501 | + } else if (arguments.length == 5) { |
| 502 | + dx = arguments[1]; |
| 503 | + dy = arguments[2]; |
| 504 | + dw = arguments[3]; |
| 505 | + dh = arguments[4]; |
| 506 | + sx = sy = 0; |
| 507 | + sw = w; |
| 508 | + sh = h; |
| 509 | + } else if (arguments.length == 9) { |
| 510 | + sx = arguments[1]; |
| 511 | + sy = arguments[2]; |
| 512 | + sw = arguments[3]; |
| 513 | + sh = arguments[4]; |
| 514 | + dx = arguments[5]; |
| 515 | + dy = arguments[6]; |
| 516 | + dw = arguments[7]; |
| 517 | + dh = arguments[8]; |
| 518 | + } else { |
| 519 | + throw Error('Invalid number of arguments'); |
| 520 | + } |
| 521 | + |
| 522 | + var d = this.getCoords_(dx, dy); |
| 523 | + |
| 524 | + var w2 = sw / 2; |
| 525 | + var h2 = sh / 2; |
| 526 | + |
| 527 | + var vmlStr = []; |
| 528 | + |
| 529 | + var W = 10; |
| 530 | + var H = 10; |
| 531 | + |
| 532 | + // For some reason that I've now forgotten, using divs didn't work |
| 533 | + vmlStr.push(' <g_vml_:group', |
| 534 | + ' coordsize="', Z * W, ',', Z * H, '"', |
| 535 | + ' coordorigin="0,0"' , |
| 536 | + ' style="width:', W, 'px;height:', H, 'px;position:absolute;'); |
| 537 | + |
| 538 | + // If filters are necessary (rotation exists), create them |
| 539 | + // filters are bog-slow, so only create them if abbsolutely necessary |
| 540 | + // The following check doesn't account for skews (which don't exist |
| 541 | + // in the canvas spec (yet) anyway. |
| 542 | + |
| 543 | + if (this.m_[0][0] != 1 || this.m_[0][1]) { |
| 544 | + var filter = []; |
| 545 | + |
| 546 | + // Note the 12/21 reversal |
| 547 | + filter.push('M11=', this.m_[0][0], ',', |
| 548 | + 'M12=', this.m_[1][0], ',', |
| 549 | + 'M21=', this.m_[0][1], ',', |
| 550 | + 'M22=', this.m_[1][1], ',', |
| 551 | + 'Dx=', mr(d.x / Z), ',', |
| 552 | + 'Dy=', mr(d.y / Z), ''); |
| 553 | + |
| 554 | + // Bounding box calculation (need to minimize displayed area so that |
| 555 | + // filters don't waste time on unused pixels. |
| 556 | + var max = d; |
| 557 | + var c2 = this.getCoords_(dx + dw, dy); |
| 558 | + var c3 = this.getCoords_(dx, dy + dh); |
| 559 | + var c4 = this.getCoords_(dx + dw, dy + dh); |
| 560 | + |
| 561 | + max.x = m.max(max.x, c2.x, c3.x, c4.x); |
| 562 | + max.y = m.max(max.y, c2.y, c3.y, c4.y); |
| 563 | + |
| 564 | + vmlStr.push('padding:0 ', mr(max.x / Z), 'px ', mr(max.y / Z), |
| 565 | + 'px 0;filter:progid:DXImageTransform.Microsoft.Matrix(', |
| 566 | + filter.join(''), ", sizingmethod='clip');") |
| 567 | + } else { |
| 568 | + vmlStr.push('top:', mr(d.y / Z), 'px;left:', mr(d.x / Z), 'px;'); |
| 569 | + } |
| 570 | + |
| 571 | + vmlStr.push(' ">' , |
| 572 | + '<g_vml_:image src="', image.src, '"', |
| 573 | + ' style="width:', Z * dw, 'px;', |
| 574 | + ' height:', Z * dh, 'px;"', |
| 575 | + ' cropleft="', sx / w, '"', |
| 576 | + ' croptop="', sy / h, '"', |
| 577 | + ' cropright="', (w - sx - sw) / w, '"', |
| 578 | + ' cropbottom="', (h - sy - sh) / h, '"', |
| 579 | + ' />', |
| 580 | + '</g_vml_:group>'); |
| 581 | + |
| 582 | + this.element_.insertAdjacentHTML('BeforeEnd', |
| 583 | + vmlStr.join('')); |
| 584 | + }; |
| 585 | + |
| 586 | + contextPrototype.stroke = function(aFill) { |
| 587 | + var lineStr = []; |
| 588 | + var lineOpen = false; |
| 589 | + var a = processStyle(aFill ? this.fillStyle : this.strokeStyle); |
| 590 | + var color = a.color; |
| 591 | + var opacity = a.alpha * this.globalAlpha; |
| 592 | + |
| 593 | + var W = 10; |
| 594 | + var H = 10; |
| 595 | + |
| 596 | + lineStr.push('<g_vml_:shape', |
| 597 | + ' filled="', !!aFill, '"', |
| 598 | + ' style="position:absolute;width:', W, 'px;height:', H, 'px;"', |
| 599 | + ' coordorigin="0 0" coordsize="', Z * W, ' ', Z * H, '"', |
| 600 | + ' stroked="', !aFill, '"', |
| 601 | + ' path="'); |
| 602 | + |
| 603 | + var newSeq = false; |
| 604 | + var min = {x: null, y: null}; |
| 605 | + var max = {x: null, y: null}; |
| 606 | + |
| 607 | + for (var i = 0; i < this.currentPath_.length; i++) { |
| 608 | + var p = this.currentPath_[i]; |
| 609 | + var c; |
| 610 | + |
| 611 | + switch (p.type) { |
| 612 | + case 'moveTo': |
| 613 | + c = p; |
| 614 | + lineStr.push(' m ', mr(p.x), ',', mr(p.y)); |
| 615 | + break; |
| 616 | + case 'lineTo': |
| 617 | + lineStr.push(' l ', mr(p.x), ',', mr(p.y)); |
| 618 | + break; |
| 619 | + case 'close': |
| 620 | + lineStr.push(' x '); |
| 621 | + p = null; |
| 622 | + break; |
| 623 | + case 'bezierCurveTo': |
| 624 | + lineStr.push(' c ', |
| 625 | + mr(p.cp1x), ',', mr(p.cp1y), ',', |
| 626 | + mr(p.cp2x), ',', mr(p.cp2y), ',', |
| 627 | + mr(p.x), ',', mr(p.y)); |
| 628 | + break; |
| 629 | + case 'at': |
| 630 | + case 'wa': |
| 631 | + lineStr.push(' ', p.type, ' ', |
| 632 | + mr(p.x - this.arcScaleX_ * p.radius), ',', |
| 633 | + mr(p.y - this.arcScaleY_ * p.radius), ' ', |
| 634 | + mr(p.x + this.arcScaleX_ * p.radius), ',', |
| 635 | + mr(p.y + this.arcScaleY_ * p.radius), ' ', |
| 636 | + mr(p.xStart), ',', mr(p.yStart), ' ', |
| 637 | + mr(p.xEnd), ',', mr(p.yEnd)); |
| 638 | + break; |
| 639 | + } |
| 640 | + |
| 641 | + |
| 642 | + // TODO: Following is broken for curves due to |
| 643 | + // move to proper paths. |
| 644 | + |
| 645 | + // Figure out dimensions so we can do gradient fills |
| 646 | + // properly |
| 647 | + if (p) { |
| 648 | + if (min.x == null || p.x < min.x) { |
| 649 | + min.x = p.x; |
| 650 | + } |
| 651 | + if (max.x == null || p.x > max.x) { |
| 652 | + max.x = p.x; |
| 653 | + } |
| 654 | + if (min.y == null || p.y < min.y) { |
| 655 | + min.y = p.y; |
| 656 | + } |
| 657 | + if (max.y == null || p.y > max.y) { |
| 658 | + max.y = p.y; |
| 659 | + } |
| 660 | + } |
| 661 | + } |
| 662 | + lineStr.push(' ">'); |
| 663 | + |
| 664 | + if (!aFill) { |
| 665 | + var lineWidth = this.lineScale_ * this.lineWidth; |
| 666 | + |
| 667 | + // VML cannot correctly render a line if the width is less than 1px. |
| 668 | + // In that case, we dilute the color to make the line look thinner. |
| 669 | + if (lineWidth < 1) { |
| 670 | + opacity *= lineWidth; |
| 671 | + } |
| 672 | + |
| 673 | + lineStr.push( |
| 674 | + '<g_vml_:stroke', |
| 675 | + ' opacity="', opacity, '"', |
| 676 | + ' joinstyle="', this.lineJoin, '"', |
| 677 | + ' miterlimit="', this.miterLimit, '"', |
| 678 | + ' endcap="', processLineCap(this.lineCap), '"', |
| 679 | + ' weight="', lineWidth, 'px"', |
| 680 | + ' color="', color, '" />' |
| 681 | + ); |
| 682 | + } else if (typeof this.fillStyle == 'object') { |
| 683 | + var fillStyle = this.fillStyle; |
| 684 | + var angle = 0; |
| 685 | + var focus = {x: 0, y: 0}; |
| 686 | + |
| 687 | + // additional offset |
| 688 | + var shift = 0; |
| 689 | + // scale factor for offset |
| 690 | + var expansion = 1; |
| 691 | + |
| 692 | + if (fillStyle.type_ == 'gradient') { |
| 693 | + var x0 = fillStyle.x0_ / this.arcScaleX_; |
| 694 | + var y0 = fillStyle.y0_ / this.arcScaleY_; |
| 695 | + var x1 = fillStyle.x1_ / this.arcScaleX_; |
| 696 | + var y1 = fillStyle.y1_ / this.arcScaleY_; |
| 697 | + var p0 = this.getCoords_(x0, y0); |
| 698 | + var p1 = this.getCoords_(x1, y1); |
| 699 | + var dx = p1.x - p0.x; |
| 700 | + var dy = p1.y - p0.y; |
| 701 | + angle = Math.atan2(dx, dy) * 180 / Math.PI; |
| 702 | + |
| 703 | + // The angle should be a non-negative number. |
| 704 | + if (angle < 0) { |
| 705 | + angle += 360; |
| 706 | + } |
| 707 | + |
| 708 | + // Very small angles produce an unexpected result because they are |
| 709 | + // converted to a scientific notation string. |
| 710 | + if (angle < 1e-6) { |
| 711 | + angle = 0; |
| 712 | + } |
| 713 | + } else { |
| 714 | + var p0 = this.getCoords_(fillStyle.x0_, fillStyle.y0_); |
| 715 | + var width = max.x - min.x; |
| 716 | + var height = max.y - min.y; |
| 717 | + focus = { |
| 718 | + x: (p0.x - min.x) / width, |
| 719 | + y: (p0.y - min.y) / height |
| 720 | + }; |
| 721 | + |
| 722 | + width /= this.arcScaleX_ * Z; |
| 723 | + height /= this.arcScaleY_ * Z; |
| 724 | + var dimension = m.max(width, height); |
| 725 | + shift = 2 * fillStyle.r0_ / dimension; |
| 726 | + expansion = 2 * fillStyle.r1_ / dimension - shift; |
| 727 | + } |
| 728 | + |
| 729 | + // We need to sort the color stops in ascending order by offset, |
| 730 | + // otherwise IE won't interpret it correctly. |
| 731 | + var stops = fillStyle.colors_; |
| 732 | + stops.sort(function(cs1, cs2) { |
| 733 | + return cs1.offset - cs2.offset; |
| 734 | + }); |
| 735 | + |
| 736 | + var length = stops.length; |
| 737 | + var color1 = stops[0].color; |
| 738 | + var color2 = stops[length - 1].color; |
| 739 | + var opacity1 = stops[0].alpha * this.globalAlpha; |
| 740 | + var opacity2 = stops[length - 1].alpha * this.globalAlpha; |
| 741 | + |
| 742 | + var colors = []; |
| 743 | + for (var i = 0; i < length; i++) { |
| 744 | + var stop = stops[i]; |
| 745 | + colors.push(stop.offset * expansion + shift + ' ' + stop.color); |
| 746 | + } |
| 747 | + |
| 748 | + // When colors attribute is used, the meanings of opacity and o:opacity2 |
| 749 | + // are reversed. |
| 750 | + lineStr.push('<g_vml_:fill type="', fillStyle.type_, '"', |
| 751 | + ' method="none" focus="100%"', |
| 752 | + ' color="', color1, '"', |
| 753 | + ' color2="', color2, '"', |
| 754 | + ' colors="', colors.join(','), '"', |
| 755 | + ' opacity="', opacity2, '"', |
| 756 | + ' g_o_:opacity2="', opacity1, '"', |
| 757 | + ' angle="', angle, '"', |
| 758 | + ' focusposition="', focus.x, ',', focus.y, '" />'); |
| 759 | + } else { |
| 760 | + lineStr.push('<g_vml_:fill color="', color, '" opacity="', opacity, |
| 761 | + '" />'); |
| 762 | + } |
| 763 | + |
| 764 | + lineStr.push('</g_vml_:shape>'); |
| 765 | + |
| 766 | + this.element_.insertAdjacentHTML('beforeEnd', lineStr.join('')); |
| 767 | + }; |
| 768 | + |
| 769 | + contextPrototype.fill = function() { |
| 770 | + this.stroke(true); |
| 771 | + } |
| 772 | + |
| 773 | + contextPrototype.closePath = function() { |
| 774 | + this.currentPath_.push({type: 'close'}); |
| 775 | + }; |
| 776 | + |
| 777 | + /** |
| 778 | + * @private |
| 779 | + */ |
| 780 | + contextPrototype.getCoords_ = function(aX, aY) { |
| 781 | + var m = this.m_; |
| 782 | + return { |
| 783 | + x: Z * (aX * m[0][0] + aY * m[1][0] + m[2][0]) - Z2, |
| 784 | + y: Z * (aX * m[0][1] + aY * m[1][1] + m[2][1]) - Z2 |
| 785 | + } |
| 786 | + }; |
| 787 | + |
| 788 | + contextPrototype.save = function() { |
| 789 | + var o = {}; |
| 790 | + copyState(this, o); |
| 791 | + this.aStack_.push(o); |
| 792 | + this.mStack_.push(this.m_); |
| 793 | + this.m_ = matrixMultiply(createMatrixIdentity(), this.m_); |
| 794 | + }; |
| 795 | + |
| 796 | + contextPrototype.restore = function() { |
| 797 | + copyState(this.aStack_.pop(), this); |
| 798 | + this.m_ = this.mStack_.pop(); |
| 799 | + }; |
| 800 | + |
| 801 | + function matrixIsFinite(m) { |
| 802 | + for (var j = 0; j < 3; j++) { |
| 803 | + for (var k = 0; k < 2; k++) { |
| 804 | + if (!isFinite(m[j][k]) || isNaN(m[j][k])) { |
| 805 | + return false; |
| 806 | + } |
| 807 | + } |
| 808 | + } |
| 809 | + return true; |
| 810 | + } |
| 811 | + |
| 812 | + function setM(ctx, m, updateLineScale) { |
| 813 | + if (!matrixIsFinite(m)) { |
| 814 | + return; |
| 815 | + } |
| 816 | + ctx.m_ = m; |
| 817 | + |
| 818 | + if (updateLineScale) { |
| 819 | + // Get the line scale. |
| 820 | + // Determinant of this.m_ means how much the area is enlarged by the |
| 821 | + // transformation. So its square root can be used as a scale factor |
| 822 | + // for width. |
| 823 | + var det = m[0][0] * m[1][1] - m[0][1] * m[1][0]; |
| 824 | + ctx.lineScale_ = sqrt(abs(det)); |
| 825 | + } |
| 826 | + } |
| 827 | + |
| 828 | + contextPrototype.translate = function(aX, aY) { |
| 829 | + var m1 = [ |
| 830 | + [1, 0, 0], |
| 831 | + [0, 1, 0], |
| 832 | + [aX, aY, 1] |
| 833 | + ]; |
| 834 | + |
| 835 | + setM(this, matrixMultiply(m1, this.m_), false); |
| 836 | + }; |
| 837 | + |
| 838 | + contextPrototype.rotate = function(aRot) { |
| 839 | + var c = mc(aRot); |
| 840 | + var s = ms(aRot); |
| 841 | + |
| 842 | + var m1 = [ |
| 843 | + [c, s, 0], |
| 844 | + [-s, c, 0], |
| 845 | + [0, 0, 1] |
| 846 | + ]; |
| 847 | + |
| 848 | + setM(this, matrixMultiply(m1, this.m_), false); |
| 849 | + }; |
| 850 | + |
| 851 | + contextPrototype.scale = function(aX, aY) { |
| 852 | + this.arcScaleX_ *= aX; |
| 853 | + this.arcScaleY_ *= aY; |
| 854 | + var m1 = [ |
| 855 | + [aX, 0, 0], |
| 856 | + [0, aY, 0], |
| 857 | + [0, 0, 1] |
| 858 | + ]; |
| 859 | + |
| 860 | + setM(this, matrixMultiply(m1, this.m_), true); |
| 861 | + }; |
| 862 | + |
| 863 | + contextPrototype.transform = function(m11, m12, m21, m22, dx, dy) { |
| 864 | + var m1 = [ |
| 865 | + [m11, m12, 0], |
| 866 | + [m21, m22, 0], |
| 867 | + [dx, dy, 1] |
| 868 | + ]; |
| 869 | + |
| 870 | + setM(this, matrixMultiply(m1, this.m_), true); |
| 871 | + }; |
| 872 | + |
| 873 | + contextPrototype.setTransform = function(m11, m12, m21, m22, dx, dy) { |
| 874 | + var m = [ |
| 875 | + [m11, m12, 0], |
| 876 | + [m21, m22, 0], |
| 877 | + [dx, dy, 1] |
| 878 | + ]; |
| 879 | + |
| 880 | + setM(this, m, true); |
| 881 | + }; |
| 882 | + |
| 883 | + /******** STUBS ********/ |
| 884 | + contextPrototype.clip = function() { |
| 885 | + // TODO: Implement |
| 886 | + }; |
| 887 | + |
| 888 | + contextPrototype.arcTo = function() { |
| 889 | + // TODO: Implement |
| 890 | + }; |
| 891 | + |
| 892 | + contextPrototype.createPattern = function() { |
| 893 | + return new CanvasPattern_; |
| 894 | + }; |
| 895 | + |
| 896 | + // Gradient / Pattern Stubs |
| 897 | + function CanvasGradient_(aType) { |
| 898 | + this.type_ = aType; |
| 899 | + this.x0_ = 0; |
| 900 | + this.y0_ = 0; |
| 901 | + this.r0_ = 0; |
| 902 | + this.x1_ = 0; |
| 903 | + this.y1_ = 0; |
| 904 | + this.r1_ = 0; |
| 905 | + this.colors_ = []; |
| 906 | + } |
| 907 | + |
| 908 | + CanvasGradient_.prototype.addColorStop = function(aOffset, aColor) { |
| 909 | + aColor = processStyle(aColor); |
| 910 | + this.colors_.push({offset: aOffset, |
| 911 | + color: aColor.color, |
| 912 | + alpha: aColor.alpha}); |
| 913 | + }; |
| 914 | + |
| 915 | + function CanvasPattern_() {} |
| 916 | + |
| 917 | + // set up externs |
| 918 | + G_vmlCanvasManager = G_vmlCanvasManager_; |
| 919 | + CanvasRenderingContext2D = CanvasRenderingContext2D_; |
| 920 | + CanvasGradient = CanvasGradient_; |
| 921 | + CanvasPattern = CanvasPattern_; |
| 922 | + |
| 923 | +})(); |
| 924 | + |
| 925 | +} // if |
Property changes on: trunk/extensions/Plotters/libs/excanvas.js |
___________________________________________________________________ |
Added: svn:eol-style |
1 | 926 | + native |
Index: trunk/extensions/Plotters/libs/fixencoding.js |
— | — | @@ -230,3 +230,9 @@ |
231 | 231 | data_arr[i] = html_entity_decode( data_arr[i], 'ENT_QUOTES' ); |
232 | 232 | } |
233 | 233 | } |
| 234 | + |
| 235 | +function fix_encoding_array( arr ) { |
| 236 | + for ( var i = 0; i < arr.length; ++i ) { |
| 237 | + arr[i] = fix_encoding( arr[i] ); |
| 238 | + } |
| 239 | +} |
Index: trunk/extensions/Plotters/PlottersClass.php |
— | — | @@ -160,6 +160,7 @@ |
161 | 161 | $output .= "data[$i][$j] = '" . $dataline[$j] . "';"; |
162 | 162 | } |
163 | 163 | } |
| 164 | + $output .= "fix_encoding_array( data );"; |
164 | 165 | |
165 | 166 | // Prepare labels |
166 | 167 | $output .= "var labels = [];"; |
— | — | @@ -168,6 +169,13 @@ |
169 | 170 | } |
170 | 171 | $output .= "fix_encoding( labels );"; |
171 | 172 | |
| 173 | + // Prepare arguments |
| 174 | + $output .= "var arguments = [];"; |
| 175 | + for ( $i = 0; $i < count( $this->argumentArray["scriptarguments"] ); $i++ ) { |
| 176 | + $output .= "arguments[$i] = '" . $this->argumentArray["scriptarguments"][$i] . "';"; |
| 177 | + } |
| 178 | + $output .= "fix_encoding( arguments );"; |
| 179 | + |
172 | 180 | // Run preprocessors |
173 | 181 | foreach ( $this->argumentArray["preprocessors"] as $preprocessor ) { |
174 | 182 | $output .= 'plotter_' . $preprocessor . '_process( "' . $name . '", data, labels, '; |
— | — | @@ -180,12 +188,7 @@ |
181 | 189 | } |
182 | 190 | |
183 | 191 | // Run script |
184 | | - $output .= 'plotter_' . $this->argumentArray["script"] . '_draw( "' . $name . '", data, labels, '; |
185 | | - foreach ( $this->argumentArray["scriptarguments"] as $argument ) { |
186 | | - $output .= "'" . $argument . "'" . ", "; |
187 | | - } |
188 | | - $output = substr( $output, 0, -2 ); |
189 | | - $output .= " );"; |
| 192 | + $output .= 'plotter_' . $this->argumentArray["script"] . '_draw( "' . $name . '", data, labels, arguments );'; |
190 | 193 | |
191 | 194 | $output .= "}"; |
192 | 195 | |
— | — | @@ -200,20 +203,21 @@ |
201 | 204 | global $wgPlottersJavascriptPath; |
202 | 205 | global $wgPlottersExtensionPath; |
203 | 206 | |
204 | | - $extensionpath = $wgPlottersJavascriptPath; |
| 207 | + $javascriptpath = $wgPlottersJavascriptPath; |
205 | 208 | |
206 | 209 | // Add javascript to fix encoding |
207 | 210 | $outputPage->addScript( '<script src="' . $wgPlottersExtensionPath . '/libs/fixencoding.js" type="text/javascript"></script>' ); |
| 211 | + $outputPage->addScript( '<script src="' . $wgPlottersExtensionPath . '/libs/excanvas.js" type="text/javascript"></script>' ); |
208 | 212 | |
209 | 213 | if ( $renderer == "plotkit" ) { |
210 | 214 | // Add mochikit (required by PlotKit) |
211 | | - $outputPage->addScript( '<script src="' . $extensionpath . '/mochikit/MochiKit.js" type="text/javascript"></script>' ); |
| 215 | + $outputPage->addScript( '<script src="' . $javascriptpath . '/mochikit/MochiKit.js" type="text/javascript"></script>' ); |
212 | 216 | |
213 | 217 | // Add PlotKit javascript |
214 | | - $outputPage->addScript( '<script src="' . $extensionpath . '/plotkit/Base.js" type="text/javascript"></script>' ); |
215 | | - $outputPage->addScript( '<script src="' . $extensionpath . '/plotkit/Layout.js" type="text/javascript"></script>' ); |
216 | | - $outputPage->addScript( '<script src="' . $extensionpath . '/plotkit/Canvas.js" type="text/javascript"></script>' ); |
217 | | - $outputPage->addScript( '<script src="' . $extensionpath . '/plotkit/SweetCanvas.js" type="text/javascript"></script>' ); |
| 218 | + $outputPage->addScript( '<script src="' . $javascriptpath . '/plotkit/Base.js" type="text/javascript"></script>' ); |
| 219 | + $outputPage->addScript( '<script src="' . $javascriptpath . '/plotkit/Layout.js" type="text/javascript"></script>' ); |
| 220 | + $outputPage->addScript( '<script src="' . $javascriptpath . '/plotkit/Canvas.js" type="text/javascript"></script>' ); |
| 221 | + $outputPage->addScript( '<script src="' . $javascriptpath . '/plotkit/SweetCanvas.js" type="text/javascript"></script>' ); |
218 | 222 | } |
219 | 223 | |
220 | 224 | return true; |