Merge pull request #477 from danvk/461-retina

Fixes for Retina & PixelRatio < 1

diff --git a/dygraph-canvas.js b/dygraph-canvas.js
index df8bfb5..4ebf5bc 100644 (file)
--- a/dygraph-canvas.js
+++ b/dygraph-canvas.js
@@ -53,8 +53,8 @@ var DygraphCanvasRenderer = function(dygraph, element, elementContext, layout) {
   this.element = element;
   this.elementContext = elementContext;
 
-  this.height = this.element.height;
-  this.width = this.element.width;
+  this.height = dygraph.height_;
+  this.width = dygraph.width_;
 
   // --- check whether everything is ok before we return
   // NOTE(konigsberg): isIE is never defined in this object. Bug of some sort.
@@ -185,7 +185,7 @@ DygraphCanvasRenderer.prototype._createIEClipArea = function() {
   // Right side
   createClipDiv({
     x: plotArea.x + plotArea.w, y: 0,
-    w: this.width-plotArea.x - plotArea.w,
+    w: this.width - plotArea.x - plotArea.w,
     h: this.height
   });
 

diff --git a/dygraph-interaction-model.js b/dygraph-interaction-model.js
index a2f17c6..c58f2a5 100644 (file)
--- a/dygraph-interaction-model.js
+++ b/dygraph-interaction-model.js
@@ -371,6 +371,7 @@ Dygraph.Interaction.treatMouseOpAsClick = function(g, event, context) {
  *     context.
  */
 Dygraph.Interaction.endZoom = function(event, g, context) {
+  g.clearZoomRect_();
   context.isZooming = false;
   Dygraph.Interaction.maybeTreatMouseOpAsClick(event, g, context);
 
@@ -398,8 +399,6 @@ Dygraph.Interaction.endZoom = function(event, g, context) {
       g.doZoomY_(top, bottom);
     }
     context.cancelNextDblclick = true;
-  } else {
-    if (context.zoomMoved) g.clearZoomRect_();
   }
   context.dragStartX = null;
   context.dragStartY = null;

diff --git a/dygraph-utils.js b/dygraph-utils.js
index f4bb2ff..4f90c65 100644 (file)
--- a/dygraph-utils.js
+++ b/dygraph-utils.js
@@ -735,13 +735,13 @@ Dygraph.getContextPixelRatio = function(context) {
                             context.mozBackingStorePixelRatio ||
                             context.msBackingStorePixelRatio ||
                             context.oBackingStorePixelRatio ||
-                            context.backingStorePixelRatio;
-    if (devicePixelRatio !== undefined &&
-        backingStorePixelRatio !== undefined) {
+                            context.backingStorePixelRatio || 1;
+    if (devicePixelRatio !== undefined) {
       return devicePixelRatio / backingStoreRatio;
     } else {
-      // If either value is undefined, the ratio is meaningless so we want to
-      // return 1.
+      // At least devicePixelRatio must be defined for this ratio to make sense.
+      // We default backingStoreRatio to 1: this does not exist on some browsers
+      // (i.e. desktop Chrome).
       return 1;
     }
   } catch (e) {

diff --git a/dygraph.js b/dygraph.js
index a87695a..c9130e4 100644 (file)
--- a/dygraph.js
+++ b/dygraph.js
@@ -1603,7 +1603,7 @@ Dygraph.prototype.drawZoomRect_ = function(direction, startX, endX, startY,
  */
 Dygraph.prototype.clearZoomRect_ = function() {
   this.currentZoomRectArgs_ = null;
-  this.canvas_ctx_.clearRect(0, 0, this.canvas_.width, this.canvas_.height);
+  this.canvas_ctx_.clearRect(0, 0, this.width_, this.height_);
 };
 
 /**
@@ -2725,8 +2725,7 @@ Dygraph.prototype.renderGraph_ = function(is_initial_draw) {
 
   // TODO(danvk): is this a performance bottleneck when panning?
   // The interaction canvas should already be empty in that situation.
-  this.canvas_.getContext('2d').clearRect(0, 0, this.canvas_.width,
-                                          this.canvas_.height);
+  this.canvas_.getContext('2d').clearRect(0, 0, this.width_, this.height_);
 
   if (this.getFunctionOption("drawCallback") !== null) {
     this.getFunctionOption("drawCallback")(this, is_initial_draw);

diff --git a/plugins/axes.js b/plugins/axes.js
index 6623a0b..239d36c 100644 (file)
--- a/plugins/axes.js
+++ b/plugins/axes.js
@@ -112,8 +112,8 @@ axes.prototype.willDrawChart = function(e) {
 
   var context = e.drawingContext;
   var containerDiv = e.canvas.parentNode;
-  var canvasWidth = e.canvas.width;
-  var canvasHeight = e.canvas.height;
+  var canvasWidth = g.width_;  // e.canvas.width is affected by pixel ratio.
+  var canvasHeight = g.height_;
 
   var label, x, y, tick, i;
 

diff --git a/plugins/range-selector.js b/plugins/range-selector.js
index 717f850..5b9444c 100644 (file)
--- a/plugins/range-selector.js
+++ b/plugins/range-selector.js
@@ -166,13 +166,19 @@ rangeSelector.prototype.updateVisibility_ = function() {
  * Resizes the range selector.
  */
 rangeSelector.prototype.resize_ = function() {
-  function setElementRect(canvas, rect) {
+  function setElementRect(canvas, context, rect) {
+    var canvasScale = Dygraph.getContextPixelRatio(context);
+
     canvas.style.top = rect.y + 'px';
     canvas.style.left = rect.x + 'px';
-    canvas.width = rect.w;
-    canvas.height = rect.h;
-    canvas.style.width = canvas.width + 'px';    // for IE
-    canvas.style.height = canvas.height + 'px';  // for IE
+    canvas.width = rect.w * canvasScale;
+    canvas.height = rect.h * canvasScale;
+    canvas.style.width = rect.w + 'px';
+    canvas.style.height = rect.h + 'px';
+
+    if(canvasScale != 1) {
+      context.scale(canvasScale, canvasScale);
+    }
   }
 
   var plotArea = this.dygraph_.layout_.getPlotArea();
@@ -188,8 +194,8 @@ rangeSelector.prototype.resize_ = function() {
     h: this.getOption_('rangeSelectorHeight')
   };
 
-  setElementRect(this.bgcanvas_, this.canvasRect_);
-  setElementRect(this.fgcanvas_, this.canvasRect_);
+  setElementRect(this.bgcanvas_, this.bgcanvas_ctx_, this.canvasRect_);
+  setElementRect(this.fgcanvas_, this.fgcanvas_ctx_, this.canvasRect_);
 };
 
 /**