Merge pull request #232 from kberg/i382

Fix bug 382. Simplify resizing by not recreating everything from scratch...

diff --git a/auto_tests/tests/error_bars.js b/auto_tests/tests/error_bars.js
index 7e50e42..1e9d0f4 100644 (file)
--- a/auto_tests/tests/error_bars.js
+++ b/auto_tests/tests/error_bars.js
@@ -86,6 +86,7 @@ errorBarsTestCase.prototype.testErrorBarsDrawn = function() {
     xy2 = g.toDomCoords(data[i + 1][0], data[i + 1][1][1]);
     CanvasAssertions.assertLineDrawn(htx, xy1, xy2, attrs);
   }
+  g.destroy(); // Restore balanced saves and restores.
   CanvasAssertions.assertBalancedSaveRestore(htx);
 };
 

diff --git a/auto_tests/tests/simple_drawing.js b/auto_tests/tests/simple_drawing.js
index 75a6e87..27e9a1a 100644 (file)
--- a/auto_tests/tests/simple_drawing.js
+++ b/auto_tests/tests/simple_drawing.js
@@ -55,6 +55,7 @@ SimpleDrawingTestCase.prototype.testDrawSimpleRangePlusOne = function() {
     strokeStyle: "#008080",
     lineWidth: 1
   });
+  g.destroy(); // to balance context saves and destroys.
   CanvasAssertions.assertBalancedSaveRestore(htx);
 };
 
@@ -76,6 +77,7 @@ SimpleDrawingTestCase.prototype.testDrawSimpleRangeZeroToFifty = function() {
     lineWidth: 1
   });
   assertEquals(1, lines.length);
+  g.destroy(); // to balance context saves and destroys.
   CanvasAssertions.assertBalancedSaveRestore(htx);
 };
 
@@ -84,6 +86,7 @@ SimpleDrawingTestCase.prototype.testDrawWithAxis = function() {
   var g = new Dygraph(graph, ZERO_TO_FIFTY);
 
   var htx = g.hidden_ctx_;
+  g.destroy(); // to balance context saves and destroys.
   CanvasAssertions.assertBalancedSaveRestore(htx);
 };
 
@@ -110,6 +113,7 @@ SimpleDrawingTestCase.prototype.testDrawSimpleDash = function() {
 
   // TODO(danvk): figure out a good way to restore this test.
   // assertEquals(29, CanvasAssertions.numLinesDrawn(htx, "#ff0000"));
+  g.destroy(); // to balance context saves and destroys.
   CanvasAssertions.assertBalancedSaveRestore(htx);
 };
 
@@ -146,5 +150,6 @@ SimpleDrawingTestCase.prototype.testDrawThickLine = function() {
 
   // TODO(danvk): figure out a good way to restore this test.
   // assertEquals(29, CanvasAssertions.numLinesDrawn(htx, "#ff0000"));
+  g.destroy(); // to balance context saves and destroys.
   CanvasAssertions.assertBalancedSaveRestore(htx);
 };

diff --git a/dygraph-utils.js b/dygraph-utils.js
index 223360b..7282c9c 100644 (file)
--- a/dygraph-utils.js
+++ b/dygraph-utils.js
@@ -192,7 +192,7 @@ Dygraph.addEvent = function addEvent(elem, type, fn) {
  *     on the event. The function takes one parameter: the event object.
  * @private
  */
-Dygraph.prototype.addEvent = function(elem, type, fn) {
+Dygraph.prototype.addAndTrackEvent = function(elem, type, fn) {
   Dygraph.addEvent(elem, type, fn);
   this.registeredEvents_.push({ elem : elem, type : type, fn : fn });
 };
@@ -220,6 +220,17 @@ Dygraph.removeEvent = function(elem, type, fn) {
   }
 };
 
+Dygraph.prototype.removeTrackedEvents_ = function() {
+  if (this.registeredEvents_) {
+    for (var idx = 0; idx < this.registeredEvents_.length; idx++) {
+      var reg = this.registeredEvents_[idx];
+      Dygraph.removeEvent(reg.elem, reg.type, reg.fn);
+    }
+  }
+
+  this.registeredEvents_ = [];
+}
+
 /**
  * Cancels further processing of an event. This is useful to prevent default
  * browser actions, e.g. highlighting text on a double-click.

diff --git a/dygraph.js b/dygraph.js
index 5e4ba62..4ab7539 100644 (file)
--- a/dygraph.js
+++ b/dygraph.js
@@ -985,8 +985,7 @@ Dygraph.prototype.createInterface_ = function() {
   var enclosing = this.maindiv_;
 
   this.graphDiv = document.createElement("div");
-  this.graphDiv.style.width = this.width_ + "px";
-  this.graphDiv.style.height = this.height_ + "px";
+
   // TODO(danvk): any other styles that are useful to set here?
   this.graphDiv.style.textAlign = 'left';  // This is a CSS "reset"
   enclosing.appendChild(this.graphDiv);
@@ -994,10 +993,8 @@ Dygraph.prototype.createInterface_ = function() {
   // Create the canvas for interactive parts of the chart.
   this.canvas_ = Dygraph.createCanvas();
   this.canvas_.style.position = "absolute";
-  this.canvas_.width = this.width_;
-  this.canvas_.height = this.height_;
-  this.canvas_.style.width = this.width_ + "px";    // for IE
-  this.canvas_.style.height = this.height_ + "px";  // for IE
+
+  this.resizeElements_();
 
   this.canvas_ctx_ = Dygraph.getContext(this.canvas_);
 
@@ -1031,8 +1028,8 @@ Dygraph.prototype.createInterface_ = function() {
     }
   };
 
-  this.addEvent(window, 'mouseout', this.mouseOutHandler_);
-  this.addEvent(this.mouseEventElement_, 'mousemove', this.mouseMoveHandler_);
+  this.addAndTrackEvent(window, 'mouseout', this.mouseOutHandler_);
+  this.addAndTrackEvent(this.mouseEventElement_, 'mousemove', this.mouseMoveHandler_);
 
   // Don't recreate and register the resize handler on subsequent calls.
   // This happens when the graph is resized.
@@ -1043,16 +1040,28 @@ Dygraph.prototype.createInterface_ = function() {
 
     // Update when the window is resized.
     // TODO(danvk): drop frames depending on complexity of the chart.
-    this.addEvent(window, 'resize', this.resizeHandler_);
+    this.addAndTrackEvent(window, 'resize', this.resizeHandler_);
   }
 };
 
+Dygraph.prototype.resizeElements_ = function() {
+  this.graphDiv.style.width = this.width_ + "px";
+  this.graphDiv.style.height = this.height_ + "px";
+  this.canvas_.width = this.width_;
+  this.canvas_.height = this.height_;
+  this.canvas_.style.width = this.width_ + "px";    // for IE
+  this.canvas_.style.height = this.height_ + "px";  // for IE
+}
+
 /**
  * Detach DOM elements in the dygraph and null out all data references.
  * Calling this when you're done with a dygraph can dramatically reduce memory
  * usage. See, e.g., the tests/perf.html example.
  */
 Dygraph.prototype.destroy = function() {
+  this.canvas_ctx_.restore();
+  this.hidden_ctx_.restore();
+
   var removeRecursive = function(node) {
     while (node.hasChildNodes()) {
       removeRecursive(node.firstChild);
@@ -1060,19 +1069,11 @@ Dygraph.prototype.destroy = function() {
     }
   };
 
-  if (this.registeredEvents_) {
-    for (var idx = 0; idx < this.registeredEvents_.length; idx++) {
-      var reg = this.registeredEvents_[idx];
-      Dygraph.removeEvent(reg.elem, reg.type, reg.fn);
-    }
-  }
-
-  this.registeredEvents_ = [];
+  this.removeTrackedEvents_();
 
   // remove mouse event handlers (This may not be necessary anymore)
   Dygraph.removeEvent(window, 'mouseout', this.mouseOutHandler_);
   Dygraph.removeEvent(this.mouseEventElement_, 'mousemove', this.mouseMoveHandler_);
-  Dygraph.removeEvent(this.mouseEventElement_, 'mouseup', this.mouseUpHandler_);
 
   // remove window handlers
   Dygraph.removeEvent(window,'resize',this.resizeHandler_);
@@ -1344,19 +1345,13 @@ Dygraph.prototype.createDragInterface_ = function() {
 
   for (var eventName in interactionModel) {
     if (!interactionModel.hasOwnProperty(eventName)) continue;
-    this.addEvent(this.mouseEventElement_, eventName,
+    this.addAndTrackEvent(this.mouseEventElement_, eventName,
         bindHandler(interactionModel[eventName]));
   }
 
-  // unregister the handler on subsequent calls.
-  // This happens when the graph is resized.
-  if (this.mouseUpHandler_) {
-    Dygraph.removeEvent(document, 'mouseup', this.mouseUpHandler_);
-  }
-
   // If the user releases the mouse button during a drag, but not over the
   // canvas, then it doesn't count as a zooming action.
-  this.mouseUpHandler_ = function(event) {
+  var mouseUpHandler = function(event) {
     if (context.isZooming || context.isPanning) {
       context.isZooming = false;
       context.dragStartX = null;
@@ -1376,7 +1371,7 @@ Dygraph.prototype.createDragInterface_ = function() {
     context.tarp.uncover();
   };
 
-  this.addEvent(document, 'mouseup', this.mouseUpHandler_);
+  this.addAndTrackEvent(document, 'mouseup', this.mouseUpHandler);
 };
 
 /**
@@ -2236,6 +2231,15 @@ Dygraph.prototype.predraw_ = function() {
     this.cascadeEvents_('clearChart');
     this.plotter_.clear();
   }
+
+  if(!this.is_initial_draw_) {
+    this.canvas_ctx_.restore();
+    this.hidden_ctx_.restore();
+  }
+
+  this.canvas_ctx_.save();
+  this.hidden_ctx_.save();
+
   this.plotter_ = new DygraphCanvasRenderer(this,
                                             this.hidden_,
                                             this.hidden_ctx_,
@@ -3594,17 +3598,9 @@ Dygraph.prototype.resize = function(width, height) {
     this.height_ = this.maindiv_.clientHeight;
   }
 
+  this.resizeElements_();
+
   if (old_width != this.width_ || old_height != this.height_) {
-    // TODO(danvk): there should be a clear() method.
-    this.maindiv_.innerHTML = "";
-    this.roller_ = null;
-    this.attrs_.labelsDiv = null;
-    this.createInterface_();
-    if (this.annotations_.length) {
-      // createInterface_ reset the layout, so we need to do this.
-      this.layout_.setAnnotations(this.annotations_);
-    }
-    this.createDragInterface_();
     this.predraw_();
   }
 

diff --git a/extras/unzoom.js b/extras/unzoom.js
index 802c31b..fac1bbc 100644 (file)
--- a/extras/unzoom.js
+++ b/extras/unzoom.js
@@ -79,14 +79,14 @@ Dygraph.Plugins.Unzoom = (function() {
       g.resetZoom();
     };
 
-    g.addEvent(parent, 'mouseover', function() {
+    g.addAndTrackEvent(parent, 'mouseover', function() {
       if (g.isZoomed()) {
         self.show(true);
       }
       self.over_ = true;
     });
 
-    g.addEvent(parent, 'mouseout', function() {
+    g.addAndTrackEvent(parent, 'mouseout', function() {
       self.show(false);
       self.over_ = false;
     });

diff --git a/plugins/annotations.js b/plugins/annotations.js
index 04ebb8f..8576104 100644 (file)
--- a/plugins/annotations.js
+++ b/plugins/annotations.js
@@ -143,13 +143,13 @@ annotations.prototype.didDrawChart = function(e) {
     div.style.borderColor = g.colorsMap_[p.name];
     a.div = div;
 
-    g.addEvent(div, 'click',
+    g.addAndTrackEvent(div, 'click',
         bindEvt('clickHandler', 'annotationClickHandler', p, this));
-    g.addEvent(div, 'mouseover',
+    g.addAndTrackEvent(div, 'mouseover',
         bindEvt('mouseOverHandler', 'annotationMouseOverHandler', p, this));
-    g.addEvent(div, 'mouseout',
+    g.addAndTrackEvent(div, 'mouseout',
         bindEvt('mouseOutHandler', 'annotationMouseOutHandler', p, this));
-    g.addEvent(div, 'dblclick',
+    g.addAndTrackEvent(div, 'dblclick',
         bindEvt('dblClickHandler', 'annotationDblClickHandler', p, this));
 
     containerDiv.appendChild(div);

diff --git a/plugins/range-selector.js b/plugins/range-selector.js
index d45a29a..089e64a 100644 (file)
--- a/plugins/range-selector.js
+++ b/plugins/range-selector.js
@@ -508,7 +508,7 @@ rangeSelector.prototype.initInteraction_ = function() {
   addTouchEvents = function(elem, fn) {
     var types = ['touchstart', 'touchend', 'touchmove', 'touchcancel'];
     for (var i = 0; i < types.length; i++) {
-      self.dygraph_.addEvent(elem, types[i], fn);
+      self.dygraph_.addAndTrackEvent(elem, types[i], fn);
     }
   };
 
@@ -516,14 +516,14 @@ rangeSelector.prototype.initInteraction_ = function() {
   this.setDefaultOption_('panEdgeFraction', 0.0001);
 
   var dragStartEvent = window.opera ? 'mousedown' : 'dragstart';
-  this.dygraph_.addEvent(this.leftZoomHandle_, dragStartEvent, onZoomStart);
-  this.dygraph_.addEvent(this.rightZoomHandle_, dragStartEvent, onZoomStart);
+  this.dygraph_.addAndTrackEvent(this.leftZoomHandle_, dragStartEvent, onZoomStart);
+  this.dygraph_.addAndTrackEvent(this.rightZoomHandle_, dragStartEvent, onZoomStart);
 
   if (this.isUsingExcanvas_) {
-    this.dygraph_.addEvent(this.iePanOverlay_, 'mousedown', onPanStart);
+    this.dygraph_.addAndTrackEvent(this.iePanOverlay_, 'mousedown', onPanStart);
   } else {
-    this.dygraph_.addEvent(this.fgcanvas_, 'mousedown', onPanStart);
-    this.dygraph_.addEvent(this.fgcanvas_, 'mousemove', onCanvasHover);
+    this.dygraph_.addAndTrackEvent(this.fgcanvas_, 'mousedown', onPanStart);
+    this.dygraph_.addAndTrackEvent(this.fgcanvas_, 'mousemove', onCanvasHover);
   }
 
   // Touch events