"

From 2013.igem.org

// Copyright 2006 Google Inc. // // Licensed under the Apache License, Version 2.0 (the "License"); // you may not use this file except in compliance with the License. // You may obtain a copy of the License at // // http://www.apache.org/licenses/LICENSE-2.0 // // Unless required by applicable law or agreed to in writing, software // distributed under the License is distributed on an "AS IS" BASIS, // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. // See the License for the specific language governing permissions and // limitations under the License.

// Known Issues: (From VML version) // // * Patterns are not implemented. // * Radial gradient are not implemented. The VML version of these look very // different from the canvas one. // * Clipping paths are not implemented. // * Coordsize. The width and height attribute have higher priority than the // width and height style values which isn't correct. // * Painting mode isn't implemented. // * Canvas width/height should is using content-box by default. IE in // Quirks mode will draw the canvas using border-box. Either change your // doctype to HTML5 // (http://www.whatwg.org/specs/web-apps/current-work/#the-doctype) // or use Box Sizing Behavior from WebFX // (http://webfx.eae.net/dhtml/boxsizing/boxsizing.html) // * Optimize. There is always room for speed improvements.

//Known Issues: Silverlight version // // * Doing a transformation during a path (ie lineTo, transform, lineTo) will // not work corerctly because the transform is done to the whole path (ie // transform, lineTo, lineTo) // * Patterns are not yet implemented.

// only add this code if we do not already have a canvas implementation if (!window.CanvasRenderingContext2D) {

(function () {

 var xamlId;

 var G_vmlCanvasManager_ = {
   init: function (opt_doc) {
     var doc = opt_doc || document;
     // Create a dummy element so that IE will allow canvas elements to be
     // recognized.
     doc.createElement('canvas');
     if (/MSIE/.test(navigator.userAgent) && !window.opera) {
       var self = this;

       createXamlScriptTag();

       doc.attachEvent('onreadystatechange', function () {
         self.init_(doc);
       });
     }
   },

   init_: function (doc) {
     // setup default css
     var ss = doc.createStyleSheet();
     ss.cssText = 'canvas{display:inline-block;overflow:hidden;' +
         // default size is 300x150 in Gecko and Opera
         'text-align:left;width:300px;height:150px}' +
         'canvas object{width:100%;height:100%;border:0;' +
         'background:transparen;margin:0}';

     // find all canvas elements
     var els = doc.getElementsByTagName('canvas');
     for (var i = 0; i < els.length; i++) {
       if (!els[i].getContext) {
         this.initElement(els[i]);
       }
     }
   },

   /**
    * Public initializes a canvas element so that it can be used as canvas
    * element from now on. This is called automatically before the page is
    * loaded but if you are creating elements using createElement you need to
    * make sure this is called on the element.
    * @param {HTMLElement} el The canvas element to initialize.
    * @return {HTMLElement} the element that was created.
    */
   initElement: function (el) {
     el.getContext = function () {
       if (this.context_) {
         return this.context_;
       }
       return this.context_ = new CanvasRenderingContext2D_(this);
     };

     var attrs = el.attributes;
     if (attrs.width && attrs.width.specified) {
       // TODO: use runtimeStyle and coordsize
       // el.getContext().setWidth_(attrs.width.nodeValue);
       el.style.width = attrs.width.nodeValue + 'px';
     } else {
       el.width = el.clientWidth;
     }
     if (attrs.height && attrs.height.specified) {
       // TODO: use runtimeStyle and coordsize
       // el.getContext().setHeight_(attrs.height.nodeValue);
       el.style.height = attrs.height.nodeValue + 'px';
     } else {
       el.height = el.clientHeight;
     }

     // insert object tag
     el.innerHTML = getObjectHtml();

     // do not use inline function because that will leak memory
     el.attachEvent('onpropertychange', onPropertyChange);
     return el;
   }
 };

 function onPropertyChange(e) {
   var el = e.srcElement;

   switch (e.propertyName) {
     case 'width':
       el.style.width = el.attributes.width.nodeValue + 'px';
       el.getContext().clearRect();
       break;
     case 'height':
       el.style.height = el.attributes.height.nodeValue + 'px';
       el.getContext().clearRect();
       break;
   }
 }

 G_vmlCanvasManager_.init();

 function createXamlScriptTag() {
   // This script tag contains the boilerplate XAML.
   document.write('<script type=text/xaml>' +
       '<Canvas x:Name="root" ' +
       'xmlns="http://schemas.microsoft.com/client/2007" ' +
       'xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" ' +
       'Width="300" ' +
       'Height="150" ' +
       'Background="Transparent"> ' +
       '</Canvas>' +
       '</script>');
   // Find the id of the writtenscript file.
   var scripts = document.scripts;
   var script = scripts[scripts.length - 1];
   xamlId = script.uniqueID;
   script.id = xamlId;
 }

 function getObjectHtml(fn) {
   return '<object type="application/x-silverlight" >' +
       '<param name="windowless" value="true">' +
       '<param name="background" value="transparent">' +
       '<param name="source" value="#' + xamlId + '">' +
       '</object>';
 }

 function hasSilverlight() {
   try {
     new ActiveXObject('AgControl.AgControl');
     return true;
   } catch(_) {
     return false;
   }
 }

 // precompute "00" to "FF"
 var dec2hex = [];
 for (var i = 0; i < 16; i++) {
   for (var j = 0; j < 16; j++) {
     dec2hex[i * 16 + j] = i.toString(16) + j.toString(16);
   }
 }

 function createMatrixIdentity() {
   return [
     [1, 0, 0],
     [0, 1, 0],
     [0, 0, 1]
   ];
 }

 function matrixMultiply(m1, m2) {
   var result = createMatrixIdentity();

   for (var x = 0; x < 3; x++) {
     for (var y = 0; y < 3; y++) {
       var sum = 0;

       for (var z = 0; z < 3; z++) {
         sum += m1[x][z] * m2[z][y];
       }

       result[x][y] = sum;
     }
   }
   return result;
 }

 function doTransform(ctx) {
   transformObject(ctx, getRoot(ctx), ctx.m_);
 }

 function transformObject(ctx, obj, m) {
   var transform = obj.renderTransform;
   var matrix;
   if (!transform) {
     transform = create(ctx, '<MatrixTransform/>');
     matrix = create(ctx, '<Matrix/>');
     transform.matrix = matrix;
     obj.renderTransform = transform;
   } else {
     matrix = transform.matrix;
   }

   matrix.m11 = m[0][0];
   matrix.m12 = m[0][1];
   matrix.m21 = m[1][0];
   matrix.m22 = m[1][1];
   matrix.offsetX = m[2][0];
   matrix.offsetY = m[2][1];
 }

 function copyState(o1, o2) {
   o2.fillStyle     = o1.fillStyle;
   o2.lineCap       = o1.lineCap;
   o2.lineJoin      = o1.lineJoin;
   o2.lineWidth     = o1.lineWidth;
   o2.miterLimit    = o1.miterLimit;
   o2.shadowBlur    = o1.shadowBlur;
   o2.shadowColor   = o1.shadowColor;
   o2.shadowOffsetX = o1.shadowOffsetX;
   o2.shadowOffsetY = o1.shadowOffsetY;
   o2.strokeStyle   = o1.strokeStyle;
   o2.globalAlpha   = o1.globalAlpha;
   o2.arcScaleX_    = o1.arcScaleX_;
   o2.arcScaleY_    = o1.arcScaleY_;
 }

 function translateColor(s) {
   var rgbaMatch = /rgba\(([^)]+)\)/gi.exec(s);
   if (rgbaMatch) {
     var parts = rgbaMatch[1].split(',');
     return '#' + dec2hex[Math.floor(Number(parts[3]) * 255)] +
         dec2hex[Number(parts[0])] +
         dec2hex[Number(parts[1])] +
         dec2hex[Number(parts[2])];
   }

   var rgbMatch  = /rgb\(([^)]+)\)/gi.exec(s);
   if (rgbMatch) {
     var parts = rgbMatch[1].split(',');
     return '#FF' + dec2hex[Number(parts[0])] +
         dec2hex[Number(parts[1])] +
         dec2hex[Number(parts[2])];
   }

   return s;
 }

 function processLineCap(lineCap) {
   switch (lineCap) {
     case 'butt':
       return 'flat';
     case 'round':
       return 'round';
     case 'square':
     default:
       return 'square';
   }
 }

 function getRoot(ctx) {
   return ctx.canvas.firstChild.content.findName('root');
 }

 function create(ctx, s, opt_args) {
   if (opt_args) {
     s = s.replace(/\%(\d+)/g, function(match, index) {
       return opt_args[Number(index) - 1];
     });
   }

   try {
     return ctx.canvas.firstChild.content.createFromXaml(s);
   } catch (ex) {
     throw Error('Could not create XAML from: ' + s);
   }
 }

 function drawShape(ctx, s, opt_args) {
   var canvas = ctx.lastCanvas_ || create(ctx, '<Canvas/>');
   var shape = create(ctx, s, opt_args);
   canvas.children.add(shape);
   transformObject(ctx, canvas, ctx.m_);
   if (!ctx.lastCanvas_) {
     getRoot(ctx).children.add(canvas);
     ctx.lastCanvas_ = canvas;
   }
   return shape;
 }

 function createBrushObject(ctx, value) {
   if (value instanceof CanvasGradient_) {
     return value.createBrush_(ctx);
   } else if (value instanceof CanvasPattern_) {
     throw Error('Not implemented');
   } else {
     return create(ctx, '<SolidColorBrush Color="%1"/>',
                   [translateColor(value)]);
   }
 }

 /**
  * This class implements CanvasRenderingContext2D interface as described by
  * the WHATWG.
  * @param {HTMLElement} surfaceElement The element that the 2D context should
  *     be associated with
  */
  function CanvasRenderingContext2D_(surfaceElement) {
   this.m_ = createMatrixIdentity();
   this.lastCanvas_ = null;

   this.mStack_ = [];
   this.aStack_ = [];
   this.currentPath_ = [];

   // Canvas context properties
   this.strokeStyle = '#000';
   this.fillStyle = '#000';

   this.lineWidth = 1;
   this.lineJoin = 'miter';
   this.lineCap = 'butt';
   this.miterLimit = 10;
   this.globalAlpha = 1;
   this.canvas = surfaceElement;
 };

 var contextPrototype = CanvasRenderingContext2D_.prototype;

 contextPrototype.clearRect = function() {
   var root = getRoot(this);
   root.children.clear();

   // TODO: Implement
   this.currentPath_ = [];
   this.lastCanvas_ = null;

 };

 contextPrototype.beginPath = function() {
   // TODO: Branch current matrix so that save/restore has no effect
   //       as per safari docs.

   this.currentPath_ = [];
 };

 contextPrototype.moveTo = function(aX, aY) {
   this.currentPath_.push('M' + aX + ',' + aY);
 };

 contextPrototype.lineTo = function(aX, aY) {
   if (this.currentPath_.length == 0) return;
   this.currentPath_.push('L' + aX + ',' + aY);
 };

 contextPrototype.bezierCurveTo = function(aCP1x, aCP1y,
                                           aCP2x, aCP2y,
                                           aX, aY) {
   if (this.currentPath_.length == 0) return;
   this.currentPath_.push('C' + aCP1x + ',' + aCP1y + ' ' +
                          aCP2x + ',' + aCP2y + ' ' +
                          aX + ' ' + aY);
 };

 contextPrototype.quadraticCurveTo = function(aCPx, aCPy, aX, aY) {
   if (this.currentPath_.length == 0) return;
   this.currentPath_.push('Q' + aCPx + ',' + aCPy + ' ' +
                          aX + ',' + aY);
 };

 contextPrototype.arcTo = function(x1, y1, x2, y2, radius) {
   if (this.currentPath_.length == 0) return;
   // TODO: Implement
 };

 contextPrototype.arc = function(aX, aY, aRadius,
                                 aStartAngle, aEndAngle, aClockwise) {
   var deltaAngle = Math.abs(aStartAngle - aEndAngle);
   // If start and stop are the same WebKit and Moz does nothing
   if (aStartAngle == aEndAngle) {
     // different browsers behave differently here so we do the easiest thing
     return;
   }

   var endX = aX + aRadius * Math.cos(aEndAngle);
   var endY = aY + aRadius * Math.sin(aEndAngle);

   if (deltaAngle >= 2 * Math.PI) {
     // if larger than 2PI
     this.arc(aX, aY, aRadius, aStartAngle, aStartAngle + Math.PI, aClockwise);
     this.arc(aX, aY, aRadius, aStartAngle + Math.PI,
              aStartAngle + 2 * Math.PI, aClockwise);
     // now move to end point
     this.moveTo(endX, endY);
     return;
   }

   var startX = aX + aRadius * Math.cos(aStartAngle);
   var startY = aY + aRadius * Math.sin(aStartAngle);
   var rotationAngle = deltaAngle * 180 / Math.PI; // sign, abs?
   var sweepDirection = aClockwise ? 0 : 1;
   var isLargeArc = rotationAngle >= 180 == Boolean(aClockwise) ? 0 : 1;

   if (this.currentPath_.length != 0) {
     // add line to start point
     this.lineTo(startX, startY);
   } else {
     this.moveTo(startX, startY);
   }

   this.currentPath_.push('A' + aRadius + ',' + aRadius + ' ' +
                          rotationAngle + ' ' +
                          isLargeArc + ' ' +
                          sweepDirection + ' ' +
                          endX + ',' + endY);
 };

 contextPrototype.rect = function(aX, aY, aWidth, aHeight) {
   this.moveTo(aX, aY);
   this.lineTo(aX + aWidth, aY);
   this.lineTo(aX + aWidth, aY + aHeight);
   this.lineTo(aX, aY + aHeight);
   this.closePath();
 };

 contextPrototype.strokeRect = function(aX, aY, aWidth, aHeight) {
   // Will destroy any existing path (same as FF behaviour)
   this.beginPath();
   this.moveTo(aX, aY);
   this.lineTo(aX + aWidth, aY);
   this.lineTo(aX + aWidth, aY + aHeight);
   this.lineTo(aX, aY + aHeight);
   this.closePath();
   this.stroke();
   this.currentPath_ = [];
 };

 contextPrototype.fillRect = function(aX, aY, aWidth, aHeight) {
   // Will destroy any existing path (same as FF behaviour)
   this.beginPath();
   this.moveTo(aX, aY);
   this.lineTo(aX + aWidth, aY);
   this.lineTo(aX + aWidth, aY + aHeight);
   this.lineTo(aX, aY + aHeight);
   this.closePath();
   this.fill();
   this.currentPath_ = [];
 };

 contextPrototype.createLinearGradient = function(aX0, aY0, aX1, aY1) {
   return new LinearCanvasGradient_(aX0, aY0, aX1, aY1);
 };

 contextPrototype.createRadialGradient = function(x0, y0,
                                                  r0, x1,
                                                  y1, r1) {
   return new RadialCanvasGradient_(x0, y0, r0, x1, y1, r1);
 };

 contextPrototype.drawImage = function (image, var_args) {
   var dx, dy, dw, dh, sx, sy, sw, sh;

   // For Silverlight we don't need to get the size of the image since
   // Silverlight uses the image original dimension if not provided.

   if (arguments.length == 3) {
     dx = arguments[1];
     dy = arguments[2];
     // Keep sx, sy, sw, dw, sh and dh undefined
   } else if (arguments.length == 5) {
     dx = arguments[1];
     dy = arguments[2];
     dw = arguments[3];
     dh = arguments[4];
     // Keep sx, sy, sw and sh undefined
   } else if (arguments.length == 9) {
     sx = arguments[1];
     sy = arguments[2];
     sw = arguments[3];
     sh = arguments[4];
     dx = arguments[5];
     dy = arguments[6];
     dw = arguments[7];
     dh = arguments[8];
   } else {
     throw Error('Invalid number of arguments');
   }

   var slImage;

   // If we have a source rect we need to clip the image.
   if (arguments.length == 9) {
     slImage = drawShape(this, '<Image Source="%1"/>', [image.src]);

     var clipRect = create(this,
         '<RectangleGeometry Rect="%1,%2,%3,%4"/>', [sx, sy, sw, sh]);
     slImage.clip = clipRect;

     var m = createMatrixIdentity();

     // translate to 0,0
     m[2][0] = -sx;
     m[2][1] = -sy;

     // scale
     var m2 = createMatrixIdentity();
     m2[0][0] = dw / sw;
     m2[1][1] = dh / sh;

     m = matrixMultiply(m, m2);

     // translate to destination
     m[2][0] += dx;
     m[2][1] += dy;

     transformObject(this, slImage, m);

   } else {
     slImage = drawShape(this,
         '<Image Source="%1" Canvas.Left="%2" Canvas.Top="%3"/>',
         [image.src, dx, dy]);
     if (dw != undefined || dh != undefined) {
       slImage.width = dw;
       slImage.height = dh;
       slImage.stretch = 'fill';
     }
   }
 };

 contextPrototype.stroke = function() {
   if (this.currentPath_.length == 0) return;
   var path = drawShape(this, '<Path Data="%1"/>',
                        [this.currentPath_.join(' ')]);
   path.stroke = createBrushObject(this, this.strokeStyle);
   path.opacity = this.globalAlpha;
   path.strokeThickness = this.lineWidth;
   path.strokeMiterLimit = this.miterLimit;
   path.strokeLineJoin = this.lineJoin;
   // Canvas does not differentiate start from end
   path.strokeEndLineCap = path.strokeStartLineCap =
       processLineCap(this.lineCap);
 };

 contextPrototype.fill = function() {
   if (this.currentPath_.length == 0) return;
   var path = drawShape(this, '<Path Data="%1"/>',
                        [this.currentPath_.join(' ')]);
   // The spec says to use non zero but Silverlight uses EvenOdd by defaul
   path.data.fillRule = 'NonZero';
   path.fill = createBrushObject(this, this.fillStyle);
   // TODO: What about even-odd etc?
 };

 contextPrototype.closePath = function() {
   this.currentPath_.push('z');
 };

 /**
  * Sets the transformation matrix and marks things as dirty
  */
 function setM(self, m) {
   self.m_ = m;
   self.lastCanvas_ = null;
 };

 contextPrototype.save = function() {
   var o = {};
   copyState(this, o);
   this.aStack_.push(o);
   this.mStack_.push(this.m_);
   setM(this, matrixMultiply(createMatrixIdentity(), this.m_));
 };

 contextPrototype.restore = function() {
   copyState(this.aStack_.pop(), this);
   setM(this, this.mStack_.pop());
 };

 contextPrototype.translate = function(aX, aY) {
   var m1 = [
     [1,  0,  0],
     [0,  1,  0],
     [aX, aY, 1]
   ];

   setM(this, matrixMultiply(m1, this.m_));
 };

 contextPrototype.rotate = function(aRot) {
   var c = Math.cos(aRot);
   var s = Math.sin(aRot);

   var m1 = [
     [c,  s, 0],
     [-s, c, 0],
     [0,  0, 1]
   ];

   setM(this, matrixMultiply(m1, this.m_));
 };

 contextPrototype.scale = function(aX, aY) {
   var m1 = [
     [aX, 0,  0],
     [0,  aY, 0],
     [0,  0,  1]
   ];

   setM(this, matrixMultiply(m1, this.m_));
 };

 contextPrototype.transform = function(m11, m12, m21, m22, dx, dy) {
   var m1 = [
     [m11, m12, 0],
     [m21, m22, 0],
     [ dx,  dy, 1]
   ];

   setM(this, matrixMultiply(m1, this.m_));
 };

 contextPrototype.setTransform = function(m11, m12, m21, m22, dx, dy) {
   setM(this, [
     [m11, m12, 0],
     [m21, m22, 0],
     [ dx,  dy, 1],
   ]);
 };

 /******** STUBS ********/
 contextPrototype.clip = function() {
   // TODO: Implement
 };

 contextPrototype.createPattern = function() {
   return new CanvasPattern_;
 };

 // Gradient / Pattern Stubs
 function CanvasGradient_() {
   this.colors_ = [];
 }

 CanvasGradient_.prototype.addColorStop = function(aOffset, aColor) {
   aColor = translateColor(aColor);
   this.colors_.push({offset: aOffset, color: aColor});
 };

 CanvasGradient_.prototype.createStops_ = function(ctx, brushObj, colors) {
   var gradientStopCollection = brushObj.gradientStops;
   for (var i = 0, c; c = colors[i]; i++) {
     var color = translateColor(c.color);
     gradientStopCollection.add(create(ctx,
         '<GradientStop Color="%1" Offset="%2"/>', [color, c.offset]));
   }
 };

 function LinearCanvasGradient_(x0, y0, x1, y1) {
   CanvasGradient_.call(this);
   this.x0_ = x0;
   this.y0_ = y0;
   this.x1_ = x1;
   this.y1_ = y1;
 }
 LinearCanvasGradient_.prototype = new CanvasGradient_;

 LinearCanvasGradient_.prototype.createBrush_ = function(ctx) {
   var brushObj = create(ctx, '<LinearGradientBrush MappingMode="Absolute" ' +
                         'StartPoint="%1,%2" EndPoint="%3,%4"/>',
                         [this.x0_, this.y0_, this.x1_, this.y1_]);
   this.createStops_(ctx, brushObj, this.colors_);
   return brushObj;
 };

 function isNanOrInfinite(v) {
   return isNaN(v) || !isFinite(v);
 }

 function RadialCanvasGradient_(x0, y0, r0, x1, y1, r1) {
   if (r0 < 0 || r1 < 0 || isNanOrInfinite(x0) || isNanOrInfinite(y0) ||
       isNanOrInfinite(x1) || isNanOrInfinite(y1)) {
     // IE does not support DOMException so this is as close as we get.
     var error = Error('DOMException.INDEX_SIZE_ERR');
     error.code = 1;
     throw error;
   }

   CanvasGradient_.call(this);
   this.x0_ = x0;
   this.y0_ = y0;
   this.r0_ = r0;
   this.x1_ = x1;
   this.y1_ = y1;
   this.r1_ = r1;
 }
 RadialCanvasGradient_.prototype = new CanvasGradient_;

 CanvasGradient_.prototype.createBrush_ = function(ctx) {
   if (this.x0_ == this.x1_ && this.y0_ == this.y1_ && this.r0_ == this.r1_) {
     return null;
   }

   var radius = Math.max(this.r0_, this.r1_);
   var minRadius = Math.min(this.r0_, this.r1_);
   var brushObj = create(ctx, '<RadialGradientBrush MappingMode="Absolute" ' +
                         'GradientOrigin="%1,%2" Center="%3,%4" ' +
                         'RadiusX="%5" RadiusY="%5"/>',
                         [this.x0_, this.y0_, this.x1_, this.y1_, radius]);

   var colors = this.colors_.concat();

   if (this.r1_ < this.r0_) {
     // reverse color stop array
     colors.reverse();
     for (var i = 0, c; c = colors[i]; i++) {
       c.offset = 1 - c.offset;
     }
   }

   // sort the color stops
   colors.sort(function(c1, c2) {
     return c1.offset - c2.offset;
   });

   if (minRadius > 0) {
     // We need to adjust the color stops since SL always have the inner radius
     // at (0, 0) so we change the stops in case the min radius is not 0.
     for (var i = 0, c; c = colors[i]; i++) {
       c.offset = minRadius / radius + (radius - minRadius) / radius * c.offset;
     }
   }

   this.createStops_(ctx, brushObj, colors);
   return brushObj;
 };

 function CanvasPattern_() {}

 // set up externs
 G_vmlCanvasManager = G_vmlCanvasManager_;
 CanvasRenderingContext2D = CanvasRenderingContext2D_;
 CanvasGradient = CanvasGradient_;
 CanvasPattern = CanvasPattern_;

})();

} // if