dygraph-interaction-model.js

   1 /**
   2  * @license
   3  * Copyright 2011 Robert Konigsberg (konigsberg@google.com)
   4  * MIT-licensed (http://opensource.org/licenses/MIT)
   5  */
   6
   7 /**
   8  * @fileoverview The default interaction model for Dygraphs. This is kept out
   9  * of dygraph.js for better navigability.
  10  * @author Robert Konigsberg (konigsberg@google.com)
  11  */
  12
  13 /*jshint globalstrict: true */
  14 /*global Dygraph:false */
  15 "use strict";
  16
  17 /**
  18  * A collection of functions to facilitate build custom interaction models.
  19  * @class
  20  */
  21 Dygraph.Interaction = {};
  22
  23 /**
  24  * Called in response to an interaction model operation that
  25  * should start the default panning behavior.
  26  *
  27  * It's used in the default callback for "mousedown" operations.
  28  * Custom interaction model builders can use it to provide the default
  29  * panning behavior.
  30  *
  31  * @param {Event} event the event object which led to the startPan call.
  32  * @param {Dygraph} g The dygraph on which to act.
  33  * @param {Object} context The dragging context object (with
  34  *     dragStartX/dragStartY/etc. properties). This function modifies the
  35  *     context.
  36  */
  37 Dygraph.Interaction.startPan = function(event, g, context) {
  38   var i, axis;
  39   context.isPanning = true;
  40   var xRange = g.xAxisRange();
  41   context.dateRange = xRange[1] - xRange[0];
  42   context.initialLeftmostDate = xRange[0];
  43   context.xUnitsPerPixel = context.dateRange / (g.plotter_.area.w - 1);
  44
  45   if (g.attr_("panEdgeFraction")) {
  46     var maxXPixelsToDraw = g.width_ * g.attr_("panEdgeFraction");
  47     var xExtremes = g.xAxisExtremes(); // I REALLY WANT TO CALL THIS xTremes!
  48
  49     var boundedLeftX = g.toDomXCoord(xExtremes[0]) - maxXPixelsToDraw;
  50     var boundedRightX = g.toDomXCoord(xExtremes[1]) + maxXPixelsToDraw;
  51
  52     var boundedLeftDate = g.toDataXCoord(boundedLeftX);
  53     var boundedRightDate = g.toDataXCoord(boundedRightX);
  54     context.boundedDates = [boundedLeftDate, boundedRightDate];
  55
  56     var boundedValues = [];
  57     var maxYPixelsToDraw = g.height_ * g.attr_("panEdgeFraction");
  58
  59     for (i = 0; i < g.axes_.length; i++) {
  60       axis = g.axes_[i];
  61       var yExtremes = axis.extremeRange;
  62
  63       var boundedTopY = g.toDomYCoord(yExtremes[0], i) + maxYPixelsToDraw;
  64       var boundedBottomY = g.toDomYCoord(yExtremes[1], i) - maxYPixelsToDraw;
  65
  66       var boundedTopValue = g.toDataYCoord(boundedTopY);
  67       var boundedBottomValue = g.toDataYCoord(boundedBottomY);
  68
  69       boundedValues[i] = [boundedTopValue, boundedBottomValue];
  70     }
  71     context.boundedValues = boundedValues;
  72   }
  73
  74   // Record the range of each y-axis at the start of the drag.
  75   // If any axis has a valueRange or valueWindow, then we want a 2D pan.
  76   // We can't store data directly in g.axes_, because it does not belong to us
  77   // and could change out from under us during a pan (say if there's a data
  78   // update).
  79   context.is2DPan = false;
  80   context.axes = [];
  81   for (i = 0; i < g.axes_.length; i++) {
  82     axis = g.axes_[i];
  83     var axis_data = {};
  84     var yRange = g.yAxisRange(i);
  85     // TODO(konigsberg): These values should be in |context|.
  86     // In log scale, initialTopValue, dragValueRange and unitsPerPixel are log scale.
  87     var logscale = g.attributes_.getForAxis("logscale", i);
  88     if (logscale) {
  89       axis_data.initialTopValue = Dygraph.log10(yRange[1]);
  90       axis_data.dragValueRange = Dygraph.log10(yRange[1]) - Dygraph.log10(yRange[0]);
  91     } else {
  92       axis_data.initialTopValue = yRange[1];
  93       axis_data.dragValueRange = yRange[1] - yRange[0];
  94     }
  95     axis_data.unitsPerPixel = axis_data.dragValueRange / (g.plotter_.area.h - 1);
  96     context.axes.push(axis_data);
  97
  98     // While calculating axes, set 2dpan.
  99     if (axis.valueWindow || axis.valueRange) context.is2DPan = true;
 100   }
 101 };
 102
 103 /**
 104  * Called in response to an interaction model operation that
 105  * responds to an event that pans the view.
 106  *
 107  * It's used in the default callback for "mousemove" operations.
 108  * Custom interaction model builders can use it to provide the default
 109  * panning behavior.
 110  *
 111  * @param {Event} event the event object which led to the movePan call.
 112  * @param {Dygraph} g The dygraph on which to act.
 113  * @param {Object} context The dragging context object (with
 114  *     dragStartX/dragStartY/etc. properties). This function modifies the
 115  *     context.
 116  */
 117 Dygraph.Interaction.movePan = function(event, g, context) {
 118   context.dragEndX = g.dragGetX_(event, context);
 119   context.dragEndY = g.dragGetY_(event, context);
 120
 121   var minDate = context.initialLeftmostDate -
 122     (context.dragEndX - context.dragStartX) * context.xUnitsPerPixel;
 123   if (context.boundedDates) {
 124     minDate = Math.max(minDate, context.boundedDates[0]);
 125   }
 126   var maxDate = minDate + context.dateRange;
 127   if (context.boundedDates) {
 128     if (maxDate > context.boundedDates[1]) {
 129       // Adjust minDate, and recompute maxDate.
 130       minDate = minDate - (maxDate - context.boundedDates[1]);
 131       maxDate = minDate + context.dateRange;
 132     }
 133   }
 134
 135   g.dateWindow_ = [minDate, maxDate];
 136
 137   // y-axis scaling is automatic unless this is a full 2D pan.
 138   if (context.is2DPan) {
 139     // Adjust each axis appropriately.
 140     for (var i = 0; i < g.axes_.length; i++) {
 141       var axis = g.axes_[i];
 142       var axis_data = context.axes[i];
 143
 144       var pixelsDragged = context.dragEndY - context.dragStartY;
 145       var unitsDragged = pixelsDragged * axis_data.unitsPerPixel;
 146
 147       var boundedValue = context.boundedValues ? context.boundedValues[i] : null;
 148
 149       // In log scale, maxValue and minValue are the logs of those values.
 150       var maxValue = axis_data.initialTopValue + unitsDragged;
 151       if (boundedValue) {
 152         maxValue = Math.min(maxValue, boundedValue[1]);
 153       }
 154       var minValue = maxValue - axis_data.dragValueRange;
 155       if (boundedValue) {
 156         if (minValue < boundedValue[0]) {
 157           // Adjust maxValue, and recompute minValue.
 158           maxValue = maxValue - (minValue - boundedValue[0]);
 159           minValue = maxValue - axis_data.dragValueRange;
 160         }
 161       }
 162       var logscale = g.attributes_.getForAxis("logscale", i);
 163       if (logscale) {
 164         axis.valueWindow = [ Math.pow(Dygraph.LOG_SCALE, minValue),
 165                              Math.pow(Dygraph.LOG_SCALE, maxValue) ];
 166       } else {
 167         axis.valueWindow = [ minValue, maxValue ];
 168       }
 169     }
 170   }
 171
 172   g.drawGraph_(false);
 173 };
 174
 175 /**
 176  * Called in response to an interaction model operation that
 177  * responds to an event that ends panning.
 178  *
 179  * It's used in the default callback for "mouseup" operations.
 180  * Custom interaction model builders can use it to provide the default
 181  * panning behavior.
 182  *
 183  * @param {Event} event the event object which led to the endPan call.
 184  * @param {Dygraph} g The dygraph on which to act.
 185  * @param {Object} context The dragging context object (with
 186  *     dragStartX/dragStartY/etc. properties). This function modifies the
 187  *     context.
 188  */
 189 Dygraph.Interaction.endPan = function(event, g, context) {
 190   context.dragEndX = g.dragGetX_(event, context);
 191   context.dragEndY = g.dragGetY_(event, context);
 192
 193   var regionWidth = Math.abs(context.dragEndX - context.dragStartX);
 194   var regionHeight = Math.abs(context.dragEndY - context.dragStartY);
 195
 196   if (regionWidth < 2 && regionHeight < 2 &&
 197       g.lastx_ !== undefined && g.lastx_ != -1) {
 198     Dygraph.Interaction.treatMouseOpAsClick(g, event, context);
 199   }
 200
 201   // TODO(konigsberg): mouseup should just delete the
 202   // context object, and mousedown should create a new one.
 203   context.isPanning = false;
 204   context.is2DPan = false;
 205   context.initialLeftmostDate = null;
 206   context.dateRange = null;
 207   context.valueRange = null;
 208   context.boundedDates = null;
 209   context.boundedValues = null;
 210   context.axes = null;
 211 };
 212
 213 /**
 214  * Called in response to an interaction model operation that
 215  * responds to an event that starts zooming.
 216  *
 217  * It's used in the default callback for "mousedown" operations.
 218  * Custom interaction model builders can use it to provide the default
 219  * zooming behavior.
 220  *
 221  * @param {Event} event the event object which led to the startZoom call.
 222  * @param {Dygraph} g The dygraph on which to act.
 223  * @param {Object} context The dragging context object (with
 224  *     dragStartX/dragStartY/etc. properties). This function modifies the
 225  *     context.
 226  */
 227 Dygraph.Interaction.startZoom = function(event, g, context) {
 228   context.isZooming = true;
 229   context.zoomMoved = false;
 230 };
 231
 232 /**
 233  * Called in response to an interaction model operation that
 234  * responds to an event that defines zoom boundaries.
 235  *
 236  * It's used in the default callback for "mousemove" operations.
 237  * Custom interaction model builders can use it to provide the default
 238  * zooming behavior.
 239  *
 240  * @param {Event} event the event object which led to the moveZoom call.
 241  * @param {Dygraph} g The dygraph on which to act.
 242  * @param {Object} context The dragging context object (with
 243  *     dragStartX/dragStartY/etc. properties). This function modifies the
 244  *     context.
 245  */
 246 Dygraph.Interaction.moveZoom = function(event, g, context) {
 247   context.zoomMoved = true;
 248   context.dragEndX = g.dragGetX_(event, context);
 249   context.dragEndY = g.dragGetY_(event, context);
 250
 251   var xDelta = Math.abs(context.dragStartX - context.dragEndX);
 252   var yDelta = Math.abs(context.dragStartY - context.dragEndY);
 253
 254   // drag direction threshold for y axis is twice as large as x axis
 255   context.dragDirection = (xDelta < yDelta / 2) ? Dygraph.VERTICAL : Dygraph.HORIZONTAL;
 256
 257   g.drawZoomRect_(
 258       context.dragDirection,
 259       context.dragStartX,
 260       context.dragEndX,
 261       context.dragStartY,
 262       context.dragEndY,
 263       context.prevDragDirection,
 264       context.prevEndX,
 265       context.prevEndY);
 266
 267   context.prevEndX = context.dragEndX;
 268   context.prevEndY = context.dragEndY;
 269   context.prevDragDirection = context.dragDirection;
 270 };
 271
 272 /**
 273  * @param {Dygraph} g
 274  * @param {Event} event
 275  * @param {Object} context
 276  */
 277 Dygraph.Interaction.treatMouseOpAsClick = function(g, event, context) {
 278   var clickCallback = g.attr_('clickCallback');
 279   var pointClickCallback = g.attr_('pointClickCallback');
 280
 281   var selectedPoint = null;
 282
 283   // Find out if the click occurs on a point. This only matters if there's a
 284   // pointClickCallback.
 285   if (pointClickCallback) {
 286     var closestIdx = -1;
 287     var closestDistance = Number.MAX_VALUE;
 288
 289     // check if the click was on a particular point.
 290     for (var i = 0; i < g.selPoints_.length; i++) {
 291       var p = g.selPoints_[i];
 292       var distance = Math.pow(p.canvasx - context.dragEndX, 2) +
 293                      Math.pow(p.canvasy - context.dragEndY, 2);
 294       if (!isNaN(distance) &&
 295           (closestIdx == -1 || distance < closestDistance)) {
 296         closestDistance = distance;
 297         closestIdx = i;
 298       }
 299     }
 300
 301     // Allow any click within two pixels of the dot.
 302     var radius = g.attr_('highlightCircleSize') + 2;
 303     if (closestDistance <= radius * radius) {
 304       selectedPoint = g.selPoints_[closestIdx];
 305     }
 306   }
 307
 308   if (selectedPoint) {
 309     pointClickCallback(event, selectedPoint);
 310   }
 311
 312   // TODO(danvk): pass along more info about the points, e.g. 'x'
 313   if (clickCallback) {
 314     clickCallback(event, g.lastx_, g.selPoints_);
 315   }
 316 };
 317
 318 /**
 319  * Called in response to an interaction model operation that
 320  * responds to an event that performs a zoom based on previously defined
 321  * bounds..
 322  *
 323  * It's used in the default callback for "mouseup" operations.
 324  * Custom interaction model builders can use it to provide the default
 325  * zooming behavior.
 326  *
 327  * @param {Event} event the event object which led to the endZoom call.
 328  * @param {Dygraph} g The dygraph on which to end the zoom.
 329  * @param {Object} context The dragging context object (with
 330  *     dragStartX/dragStartY/etc. properties). This function modifies the
 331  *     context.
 332  */
 333 Dygraph.Interaction.endZoom = function(event, g, context) {
 334   context.isZooming = false;
 335   context.dragEndX = g.dragGetX_(event, context);
 336   context.dragEndY = g.dragGetY_(event, context);
 337   var regionWidth = Math.abs(context.dragEndX - context.dragStartX);
 338   var regionHeight = Math.abs(context.dragEndY - context.dragStartY);
 339
 340   if (regionWidth < 2 && regionHeight < 2 &&
 341       g.lastx_ !== undefined && g.lastx_ != -1) {
 342     Dygraph.Interaction.treatMouseOpAsClick(g, event, context);
 343   }
 344
 345   // The zoom rectangle is visibly clipped to the plot area, so its behavior
 346   // should be as well.
 347   // See http://code.google.com/p/dygraphs/issues/detail?id=280
 348   var plotArea = g.getArea();
 349   if (regionWidth >= 10 && context.dragDirection == Dygraph.HORIZONTAL) {
 350     var left = Math.min(context.dragStartX, context.dragEndX),
 351         right = Math.max(context.dragStartX, context.dragEndX);
 352     left = Math.max(left, plotArea.x);
 353     right = Math.min(right, plotArea.x + plotArea.w);
 354     if (left < right) {
 355       g.doZoomX_(left, right);
 356     }
 357     context.cancelNextDblclick = true;
 358   } else if (regionHeight >= 10 && context.dragDirection == Dygraph.VERTICAL) {
 359     var top = Math.min(context.dragStartY, context.dragEndY),
 360         bottom = Math.max(context.dragStartY, context.dragEndY);
 361     top = Math.max(top, plotArea.y);
 362     bottom = Math.min(bottom, plotArea.y + plotArea.h);
 363     if (top < bottom) {
 364       g.doZoomY_(top, bottom);
 365     }
 366     context.cancelNextDblclick = true;
 367   } else {
 368     if (context.zoomMoved) g.clearZoomRect_();
 369   }
 370   context.dragStartX = null;
 371   context.dragStartY = null;
 372 };
 373
 374 /**
 375  * @private
 376  */
 377 Dygraph.Interaction.startTouch = function(event, g, context) {
 378   event.preventDefault();  // touch browsers are all nice.
 379   if (event.touches.length > 1) {
 380     // If the user ever puts two fingers down, it's not a double tap.
 381     context.startTimeForDoubleTapMs = null;
 382   }
 383
 384   var touches = [];
 385   for (var i = 0; i < event.touches.length; i++) {
 386     var t = event.touches[i];
 387     // we dispense with 'dragGetX_' because all touchBrowsers support pageX
 388     touches.push({
 389       pageX: t.pageX,
 390       pageY: t.pageY,
 391       dataX: g.toDataXCoord(t.pageX),
 392       dataY: g.toDataYCoord(t.pageY)
 393       // identifier: t.identifier
 394     });
 395   }
 396   context.initialTouches = touches;
 397
 398   if (touches.length == 1) {
 399     // This is just a swipe.
 400     context.initialPinchCenter = touches[0];
 401     context.touchDirections = { x: true, y: true };
 402   } else if (touches.length >= 2) {
 403     // It's become a pinch!
 404     // In case there are 3+ touches, we ignore all but the "first" two.
 405
 406     // only screen coordinates can be averaged (data coords could be log scale).
 407     context.initialPinchCenter = {
 408       pageX: 0.5 * (touches[0].pageX + touches[1].pageX),
 409       pageY: 0.5 * (touches[0].pageY + touches[1].pageY),
 410
 411       // TODO(danvk): remove
 412       dataX: 0.5 * (touches[0].dataX + touches[1].dataX),
 413       dataY: 0.5 * (touches[0].dataY + touches[1].dataY)
 414     };
 415
 416     // Make pinches in a 45-degree swath around either axis 1-dimensional zooms.
 417     var initialAngle = 180 / Math.PI * Math.atan2(
 418         context.initialPinchCenter.pageY - touches[0].pageY,
 419         touches[0].pageX - context.initialPinchCenter.pageX);
 420
 421     // use symmetry to get it into the first quadrant.
 422     initialAngle = Math.abs(initialAngle);
 423     if (initialAngle > 90) initialAngle = 90 - initialAngle;
 424
 425     context.touchDirections = {
 426       x: (initialAngle < (90 - 45/2)),
 427       y: (initialAngle > 45/2)
 428     };
 429   }
 430
 431   // save the full x & y ranges.
 432   context.initialRange = {
 433     x: g.xAxisRange(),
 434     y: g.yAxisRange()
 435   };
 436 };
 437
 438 /**
 439  * @private
 440  */
 441 Dygraph.Interaction.moveTouch = function(event, g, context) {
 442   // If the tap moves, then it's definitely not part of a double-tap.
 443   context.startTimeForDoubleTapMs = null;
 444
 445   var i, touches = [];
 446   for (i = 0; i < event.touches.length; i++) {
 447     var t = event.touches[i];
 448     touches.push({
 449       pageX: t.pageX,
 450       pageY: t.pageY
 451     });
 452   }
 453   var initialTouches = context.initialTouches;
 454
 455   var c_now;
 456
 457   // old and new centers.
 458   var c_init = context.initialPinchCenter;
 459   if (touches.length == 1) {
 460     c_now = touches[0];
 461   } else {
 462     c_now = {
 463       pageX: 0.5 * (touches[0].pageX + touches[1].pageX),
 464       pageY: 0.5 * (touches[0].pageY + touches[1].pageY)
 465     };
 466   }
 467
 468   // this is the "swipe" component
 469   // we toss it out for now, but could use it in the future.
 470   var swipe = {
 471     pageX: c_now.pageX - c_init.pageX,
 472     pageY: c_now.pageY - c_init.pageY
 473   };
 474   var dataWidth = context.initialRange.x[1] - context.initialRange.x[0];
 475   var dataHeight = context.initialRange.y[0] - context.initialRange.y[1];
 476   swipe.dataX = (swipe.pageX / g.plotter_.area.w) * dataWidth;
 477   swipe.dataY = (swipe.pageY / g.plotter_.area.h) * dataHeight;
 478   var xScale, yScale;
 479
 480   // The residual bits are usually split into scale & rotate bits, but we split
 481   // them into x-scale and y-scale bits.
 482   if (touches.length == 1) {
 483     xScale = 1.0;
 484     yScale = 1.0;
 485   } else if (touches.length >= 2) {
 486     var initHalfWidth = (initialTouches[1].pageX - c_init.pageX);
 487     xScale = (touches[1].pageX - c_now.pageX) / initHalfWidth;
 488
 489     var initHalfHeight = (initialTouches[1].pageY - c_init.pageY);
 490     yScale = (touches[1].pageY - c_now.pageY) / initHalfHeight;
 491   }
 492
 493   // Clip scaling to [1/8, 8] to prevent too much blowup.
 494   xScale = Math.min(8, Math.max(0.125, xScale));
 495   yScale = Math.min(8, Math.max(0.125, yScale));
 496
 497   var didZoom = false;
 498   if (context.touchDirections.x) {
 499     g.dateWindow_ = [
 500       c_init.dataX - swipe.dataX + (context.initialRange.x[0] - c_init.dataX) / xScale,
 501       c_init.dataX - swipe.dataX + (context.initialRange.x[1] - c_init.dataX) / xScale
 502     ];
 503     didZoom = true;
 504   }
 505
 506   if (context.touchDirections.y) {
 507     for (i = 0; i < 1  /*g.axes_.length*/; i++) {
 508       var axis = g.axes_[i];
 509       var logscale = g.attributes_.getForAxis("logscale", i);
 510       if (logscale) {
 511         // TODO(danvk): implement
 512       } else {
 513         axis.valueWindow = [
 514           c_init.dataY - swipe.dataY + (context.initialRange.y[0] - c_init.dataY) / yScale,
 515           c_init.dataY - swipe.dataY + (context.initialRange.y[1] - c_init.dataY) / yScale
 516         ];
 517         didZoom = true;
 518       }
 519     }
 520   }
 521
 522   g.drawGraph_(false);
 523
 524   // We only call zoomCallback on zooms, not pans, to mirror desktop behavior.
 525   if (didZoom && touches.length > 1 && g.attr_('zoomCallback')) {
 526     var viewWindow = g.xAxisRange();
 527     g.attr_("zoomCallback")(viewWindow[0], viewWindow[1], g.yAxisRanges());
 528   }
 529 };
 530
 531 /**
 532  * @private
 533  */
 534 Dygraph.Interaction.endTouch = function(event, g, context) {
 535   if (event.touches.length !== 0) {
 536     // this is effectively a "reset"
 537     Dygraph.Interaction.startTouch(event, g, context);
 538   } else if (event.changedTouches.length == 1) {
 539     // Could be part of a "double tap"
 540     // The heuristic here is that it's a double-tap if the two touchend events
 541     // occur within 500ms and within a 50x50 pixel box.
 542     var now = new Date().getTime();
 543     var t = event.changedTouches[0];
 544     if (context.startTimeForDoubleTapMs &&
 545         now - context.startTimeForDoubleTapMs < 500 &&
 546         context.doubleTapX && Math.abs(context.doubleTapX - t.screenX) < 50 &&
 547         context.doubleTapY && Math.abs(context.doubleTapY - t.screenY) < 50) {
 548       g.resetZoom();
 549     } else {
 550       context.startTimeForDoubleTapMs = now;
 551       context.doubleTapX = t.screenX;
 552       context.doubleTapY = t.screenY;
 553     }
 554   }
 555 };
 556
 557 /**
 558  * Default interation model for dygraphs. You can refer to specific elements of
 559  * this when constructing your own interaction model, e.g.:
 560  * g.updateOptions( {
 561  *   interactionModel: {
 562  *     mousedown: Dygraph.defaultInteractionModel.mousedown
 563  *   }
 564  * } );
 565  */
 566 Dygraph.Interaction.defaultModel = {
 567   // Track the beginning of drag events
 568   mousedown: function(event, g, context) {
 569     // Right-click should not initiate a zoom.
 570     if (event.button && event.button == 2) return;
 571
 572     context.initializeMouseDown(event, g, context);
 573
 574     if (event.altKey || event.shiftKey) {
 575       Dygraph.startPan(event, g, context);
 576     } else {
 577       Dygraph.startZoom(event, g, context);
 578     }
 579   },
 580
 581   // Draw zoom rectangles when the mouse is down and the user moves around
 582   mousemove: function(event, g, context) {
 583     if (context.isZooming) {
 584       Dygraph.moveZoom(event, g, context);
 585     } else if (context.isPanning) {
 586       Dygraph.movePan(event, g, context);
 587     }
 588   },
 589
 590   mouseup: function(event, g, context) {
 591     if (context.isZooming) {
 592       Dygraph.endZoom(event, g, context);
 593     } else if (context.isPanning) {
 594       Dygraph.endPan(event, g, context);
 595     }
 596   },
 597
 598   touchstart: function(event, g, context) {
 599     Dygraph.Interaction.startTouch(event, g, context);
 600   },
 601   touchmove: function(event, g, context) {
 602     Dygraph.Interaction.moveTouch(event, g, context);
 603   },
 604   touchend: function(event, g, context) {
 605     Dygraph.Interaction.endTouch(event, g, context);
 606   },
 607
 608   // Temporarily cancel the dragging event when the mouse leaves the graph
 609   mouseout: function(event, g, context) {
 610     if (context.isZooming) {
 611       context.dragEndX = null;
 612       context.dragEndY = null;
 613       g.clearZoomRect_();
 614     }
 615   },
 616
 617   // Disable zooming out if panning.
 618   dblclick: function(event, g, context) {
 619     if (context.cancelNextDblclick) {
 620       context.cancelNextDblclick = false;
 621       return;
 622     }
 623     if (event.altKey || event.shiftKey) {
 624       return;
 625     }
 626     g.resetZoom();
 627   }
 628 };
 629
 630 Dygraph.DEFAULT_ATTRS.interactionModel = Dygraph.Interaction.defaultModel;
 631
 632 // old ways of accessing these methods/properties
 633 Dygraph.defaultInteractionModel = Dygraph.Interaction.defaultModel;
 634 Dygraph.endZoom = Dygraph.Interaction.endZoom;
 635 Dygraph.moveZoom = Dygraph.Interaction.moveZoom;
 636 Dygraph.startZoom = Dygraph.Interaction.startZoom;
 637 Dygraph.endPan = Dygraph.Interaction.endPan;
 638 Dygraph.movePan = Dygraph.Interaction.movePan;
 639 Dygraph.startPan = Dygraph.Interaction.startPan;
 640
 641 Dygraph.Interaction.nonInteractiveModel_ = {
 642   mousedown: function(event, g, context) {
 643     context.initializeMouseDown(event, g, context);
 644   },
 645   mouseup: function(event, g, context) {
 646     // TODO(danvk): this logic is repeated in Dygraph.Interaction.endZoom
 647     context.dragEndX = g.dragGetX_(event, context);
 648     context.dragEndY = g.dragGetY_(event, context);
 649     var regionWidth = Math.abs(context.dragEndX - context.dragStartX);
 650     var regionHeight = Math.abs(context.dragEndY - context.dragStartY);
 651
 652     if (regionWidth < 2 && regionHeight < 2 &&
 653         g.lastx_ !== undefined && g.lastx_ != -1) {
 654       Dygraph.Interaction.treatMouseOpAsClick(g, event, context);
 655     }
 656   }
 657 };
 658
 659 // Default interaction model when using the range selector.
 660 Dygraph.Interaction.dragIsPanInteractionModel = {
 661   mousedown: function(event, g, context) {
 662     context.initializeMouseDown(event, g, context);
 663     Dygraph.startPan(event, g, context);
 664   },
 665   mousemove: function(event, g, context) {
 666     if (context.isPanning) {
 667       Dygraph.movePan(event, g, context);
 668     }
 669   },
 670   mouseup: function(event, g, context) {
 671     if (context.isPanning) {
 672       Dygraph.endPan(event, g, context);
 673     }
 674   }
 675 };