X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=dygraph-canvas.js;h=b184717d24df57f162cfed0a5f69522ceef7ba61;hb=47927039a011d5cd57704bb08f64f02eca166a82;hp=d4b088eca7f149440d7122e4770cd3989d5f23c0;hpb=70be5ed17a59b006aa1ee34cec86c1623dd2bd61;p=dygraphs.git

diff --git a/dygraph-canvas.js b/dygraph-canvas.js
index d4b088e..b184717 100644
--- a/dygraph-canvas.js
+++ b/dygraph-canvas.js
@@ -23,7 +23,10 @@
  * @param {Layout} layout The DygraphLayout object for this graph.
  * @constructor
  */
-DygraphCanvasRenderer = function(dygraph, element, elementContext, layout) {
+
+"use strict";
+
+var DygraphCanvasRenderer = function(dygraph, element, elementContext, layout) {
   this.dygraph_ = dygraph;
 
   this.layout = layout;
@@ -50,15 +53,19 @@ DygraphCanvasRenderer = function(dygraph, element, elementContext, layout) {
 
   // Set up a clipping area for the canvas (and the interaction canvas).
   // This ensures that we don't overdraw.
-  var ctx = this.dygraph_.canvas_ctx_;
-  ctx.beginPath();
-  ctx.rect(this.area.x, this.area.y, this.area.w, this.area.h);
-  ctx.clip();
-
-  ctx = this.dygraph_.hidden_ctx_;
-  ctx.beginPath();
-  ctx.rect(this.area.x, this.area.y, this.area.w, this.area.h);
-  ctx.clip();
+  if (this.dygraph_.isUsingExcanvas_) {
+    this._createIEClipArea();
+  } else {
+    var ctx = this.dygraph_.canvas_ctx_;
+    ctx.beginPath();
+    ctx.rect(this.area.x, this.area.y, this.area.w, this.area.h);
+    ctx.clip();
+
+    ctx = this.dygraph_.hidden_ctx_;
+    ctx.beginPath();
+    ctx.rect(this.area.x, this.area.y, this.area.w, this.area.h);
+    ctx.clip();
+  }
 };
 
 DygraphCanvasRenderer.prototype.attr_ = function(x) {
@@ -155,6 +162,7 @@ DygraphCanvasRenderer.prototype.render = function() {
 
   if (this.attr_('drawYGrid')) {
     var ticks = this.layout.yticks;
+    // TODO(konigsberg): I don't think these calls to save() have a corresponding restore().
     ctx.save();
     ctx.strokeStyle = this.attr_('gridLineColor');
     ctx.lineWidth = this.attr_('gridLineWidth');
@@ -194,6 +202,54 @@ DygraphCanvasRenderer.prototype.render = function() {
   this._renderAnnotations();
 };
 
+DygraphCanvasRenderer.prototype._createIEClipArea = function() {
+  var className = 'dygraph-clip-div';
+  var graphDiv = this.dygraph_.graphDiv;
+
+  // Remove old clip divs.
+  for (var i = graphDiv.childNodes.length-1; i >= 0; i--) {
+    if (graphDiv.childNodes[i].className == className) {
+      graphDiv.removeChild(graphDiv.childNodes[i]);
+    }
+  }
+
+  // Determine background color to give clip divs.
+  var backgroundColor = document.bgColor;
+  var element = this.dygraph_.graphDiv;
+  while (element != document) {
+    var bgcolor = element.currentStyle.backgroundColor;
+    if (bgcolor && bgcolor != 'transparent') {
+      backgroundColor = bgcolor;
+      break;
+    }
+    element = element.parentNode;
+  }
+
+  function createClipDiv(area) {
+    if (area.w == 0 || area.h == 0) {
+      return;
+    }
+    var elem = document.createElement('div');
+    elem.className = className;
+    elem.style.backgroundColor = backgroundColor;
+    elem.style.position = 'absolute';
+    elem.style.left = area.x + 'px';
+    elem.style.top = area.y + 'px';
+    elem.style.width = area.w + 'px';
+    elem.style.height = area.h + 'px';
+    graphDiv.appendChild(elem);
+  }
+
+  var plotArea = this.area;
+  // Left side
+  createClipDiv({x:0, y:0, w:plotArea.x, h:this.height});
+  // Top
+  createClipDiv({x:plotArea.x, y:0, w:this.width-plotArea.x, h:plotArea.y});
+  // Right side
+  createClipDiv({x:plotArea.x+plotArea.w, y:0, w:this.width-plotArea.x-plotArea.w, h:this.height});
+  // Bottom
+  createClipDiv({x:plotArea.x, y:plotArea.y+plotArea.h, w:this.width-plotArea.x, h:this.height-plotArea.h-plotArea.y});
+}
 
 DygraphCanvasRenderer.prototype._renderAxis = function() {
   if (!this.attr_('drawXAxis') && !this.attr_('drawYAxis')) return;
@@ -250,11 +306,14 @@ DygraphCanvasRenderer.prototype._renderAxis = function() {
           prec_axis = 'y2';
         }
         var y = this.area.y + tick[1] * this.area.h;
+
+        /* Tick marks are currently clipped, so don't bother drawing them.
         context.beginPath();
         context.moveTo(halfUp(x), halfDown(y));
         context.lineTo(halfUp(x - sgn * this.attr_('axisTickSize')), halfDown(y));
         context.closePath();
         context.stroke();
+        */
 
         var label = makeDiv(tick[2], 'y', num_axes == 2 ? prec_axis : null);
         var top = (y - this.attr_('axisLabelFontSize') / 2);
@@ -315,11 +374,14 @@ DygraphCanvasRenderer.prototype._renderAxis = function() {
 
         var x = this.area.x + tick[0] * this.area.w;
         var y = this.area.y + this.area.h;
+
+        /* Tick marks are currently clipped, so don't bother drawing them.
         context.beginPath();
         context.moveTo(halfUp(x), halfDown(y));
         context.lineTo(halfUp(x), halfDown(y + this.attr_('axisTickSize')));
         context.closePath();
         context.stroke();
+        */
 
         var label = makeDiv(tick[1], 'x');
         label.style.textAlign = "center";
@@ -681,7 +743,7 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() {
           }
           var newYs;
           if (stackedGraph) {
-            lastY = baseline[point.canvasx];
+            var lastY = baseline[point.canvasx];
             if (lastY === undefined) lastY = axisY;
             baseline[point.canvasx] = point.canvasy;
             newYs = [ point.canvasy, lastY ];