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