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