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   if (regionWidth >= 10 && context.dragDirection == Dygraph.HORIZONTAL) {
 346     g.doZoomX_(Math.min(context.dragStartX, context.dragEndX),
 347                Math.max(context.dragStartX, context.dragEndX));
 348     context.cancelNextDblclick = true;
 349   } else if (regionHeight >= 10 && context.dragDirection == Dygraph.VERTICAL) {
 350     g.doZoomY_(Math.min(context.dragStartY, context.dragEndY),
 351                Math.max(context.dragStartY, context.dragEndY));
 352     context.cancelNextDblclick = true;
 353   } else {
 354     if (context.zoomMoved) g.clearZoomRect_();
 355   }
 356   context.dragStartX = null;
 357   context.dragStartY = null;
 358 };
 359
 360 /**
 361  * @private
 362  */
 363 Dygraph.Interaction.startTouch = function(event, g, context) {
 364   event.preventDefault();  // touch browsers are all nice.
 365   if (event.touches.length > 1) {
 366     // If the user ever puts two fingers down, it's not a double tap.
 367     context.startTimeForDoubleTapMs = null;
 368   }
 369
 370   var touches = [];
 371   for (var i = 0; i < event.touches.length; i++) {
 372     var t = event.touches[i];
 373     // we dispense with 'dragGetX_' because all touchBrowsers support pageX
 374     touches.push({
 375       pageX: t.pageX,
 376       pageY: t.pageY,
 377       dataX: g.toDataXCoord(t.pageX),
 378       dataY: g.toDataYCoord(t.pageY)
 379       // identifier: t.identifier
 380     });
 381   }
 382   context.initialTouches = touches;
 383
 384   if (touches.length == 1) {
 385     // This is just a swipe.
 386     context.initialPinchCenter = touches[0];
 387     context.touchDirections = { x: true, y: true };
 388   } else if (touches.length >= 2) {
 389     // It's become a pinch!
 390     // In case there are 3+ touches, we ignore all but the "first" two.
 391
 392     // only screen coordinates can be averaged (data coords could be log scale).
 393     context.initialPinchCenter = {
 394       pageX: 0.5 * (touches[0].pageX + touches[1].pageX),
 395       pageY: 0.5 * (touches[0].pageY + touches[1].pageY),
 396
 397       // TODO(danvk): remove
 398       dataX: 0.5 * (touches[0].dataX + touches[1].dataX),
 399       dataY: 0.5 * (touches[0].dataY + touches[1].dataY)
 400     };
 401
 402     // Make pinches in a 45-degree swath around either axis 1-dimensional zooms.
 403     var initialAngle = 180 / Math.PI * Math.atan2(
 404         context.initialPinchCenter.pageY - touches[0].pageY,
 405         touches[0].pageX - context.initialPinchCenter.pageX);
 406
 407     // use symmetry to get it into the first quadrant.
 408     initialAngle = Math.abs(initialAngle);
 409     if (initialAngle > 90) initialAngle = 90 - initialAngle;
 410
 411     context.touchDirections = {
 412       x: (initialAngle < (90 - 45/2)),
 413       y: (initialAngle > 45/2)
 414     };
 415   }
 416
 417   // save the full x & y ranges.
 418   context.initialRange = {
 419     x: g.xAxisRange(),
 420     y: g.yAxisRange()
 421   };
 422 };
 423
 424 /**
 425  * @private
 426  */
 427 Dygraph.Interaction.moveTouch = function(event, g, context) {
 428   // If the tap moves, then it's definitely not part of a double-tap.
 429   context.startTimeForDoubleTapMs = null;
 430
 431   var i, touches = [];
 432   for (i = 0; i < event.touches.length; i++) {
 433     var t = event.touches[i];
 434     touches.push({
 435       pageX: t.pageX,
 436       pageY: t.pageY
 437     });
 438   }
 439   var initialTouches = context.initialTouches;
 440
 441   var c_now;
 442
 443   // old and new centers.
 444   var c_init = context.initialPinchCenter;
 445   if (touches.length == 1) {
 446     c_now = touches[0];
 447   } else {
 448     c_now = {
 449       pageX: 0.5 * (touches[0].pageX + touches[1].pageX),
 450       pageY: 0.5 * (touches[0].pageY + touches[1].pageY)
 451     };
 452   }
 453
 454   // this is the "swipe" component
 455   // we toss it out for now, but could use it in the future.
 456   var swipe = {
 457     pageX: c_now.pageX - c_init.pageX,
 458     pageY: c_now.pageY - c_init.pageY
 459   };
 460   var dataWidth = context.initialRange.x[1] - context.initialRange.x[0];
 461   var dataHeight = context.initialRange.y[0] - context.initialRange.y[1];
 462   swipe.dataX = (swipe.pageX / g.plotter_.area.w) * dataWidth;
 463   swipe.dataY = (swipe.pageY / g.plotter_.area.h) * dataHeight;
 464   var xScale, yScale;
 465
 466   // The residual bits are usually split into scale & rotate bits, but we split
 467   // them into x-scale and y-scale bits.
 468   if (touches.length == 1) {
 469     xScale = 1.0;
 470     yScale = 1.0;
 471   } else if (touches.length >= 2) {
 472     var initHalfWidth = (initialTouches[1].pageX - c_init.pageX);
 473     xScale = (touches[1].pageX - c_now.pageX) / initHalfWidth;
 474
 475     var initHalfHeight = (initialTouches[1].pageY - c_init.pageY);
 476     yScale = (touches[1].pageY - c_now.pageY) / initHalfHeight;
 477   }
 478
 479   // Clip scaling to [1/8, 8] to prevent too much blowup.
 480   xScale = Math.min(8, Math.max(0.125, xScale));
 481   yScale = Math.min(8, Math.max(0.125, yScale));
 482
 483   var didZoom = false;
 484   if (context.touchDirections.x) {
 485     g.dateWindow_ = [
 486       c_init.dataX - swipe.dataX + (context.initialRange.x[0] - c_init.dataX) / xScale,
 487       c_init.dataX - swipe.dataX + (context.initialRange.x[1] - c_init.dataX) / xScale
 488     ];
 489     didZoom = true;
 490   }
 491
 492   if (context.touchDirections.y) {
 493     for (i = 0; i < 1  /*g.axes_.length*/; i++) {
 494       var axis = g.axes_[i];
 495       var logscale = g.attributes_.getForAxis("logscale", i);
 496       if (logscale) {
 497         // TODO(danvk): implement
 498       } else {
 499         axis.valueWindow = [
 500           c_init.dataY - swipe.dataY + (context.initialRange.y[0] - c_init.dataY) / yScale,
 501           c_init.dataY - swipe.dataY + (context.initialRange.y[1] - c_init.dataY) / yScale
 502         ];
 503         didZoom = true;
 504       }
 505     }
 506   }
 507
 508   g.drawGraph_(false);
 509
 510   // We only call zoomCallback on zooms, not pans, to mirror desktop behavior.
 511   if (didZoom && touches.length > 1 && g.attr_('zoomCallback')) {
 512     var viewWindow = g.xAxisRange();
 513     g.attr_("zoomCallback")(viewWindow[0], viewWindow[1], g.yAxisRanges());
 514   }
 515 };
 516
 517 /**
 518  * @private
 519  */
 520 Dygraph.Interaction.endTouch = function(event, g, context) {
 521   if (event.touches.length !== 0) {
 522     // this is effectively a "reset"
 523     Dygraph.Interaction.startTouch(event, g, context);
 524   } else if (event.changedTouches.length == 1) {
 525     // Could be part of a "double tap"
 526     // The heuristic here is that it's a double-tap if the two touchend events
 527     // occur within 500ms and within a 50x50 pixel box.
 528     var now = new Date().getTime();
 529     var t = event.changedTouches[0];
 530     if (context.startTimeForDoubleTapMs &&
 531         now - context.startTimeForDoubleTapMs < 500 &&
 532         context.doubleTapX && Math.abs(context.doubleTapX - t.screenX) < 50 &&
 533         context.doubleTapY && Math.abs(context.doubleTapY - t.screenY) < 50) {
 534       g.resetZoom();
 535     } else {
 536       context.startTimeForDoubleTapMs = now;
 537       context.doubleTapX = t.screenX;
 538       context.doubleTapY = t.screenY;
 539     }
 540   }
 541 };
 542
 543 /**
 544  * Default interation model for dygraphs. You can refer to specific elements of
 545  * this when constructing your own interaction model, e.g.:
 546  * g.updateOptions( {
 547  *   interactionModel: {
 548  *     mousedown: Dygraph.defaultInteractionModel.mousedown
 549  *   }
 550  * } );
 551  */
 552 Dygraph.Interaction.defaultModel = {
 553   // Track the beginning of drag events
 554   mousedown: function(event, g, context) {
 555     // Right-click should not initiate a zoom.
 556     if (event.button && event.button == 2) return;
 557
 558     context.initializeMouseDown(event, g, context);
 559
 560     if (event.altKey || event.shiftKey) {
 561       Dygraph.startPan(event, g, context);
 562     } else {
 563       Dygraph.startZoom(event, g, context);
 564     }
 565   },
 566
 567   // Draw zoom rectangles when the mouse is down and the user moves around
 568   mousemove: function(event, g, context) {
 569     if (context.isZooming) {
 570       Dygraph.moveZoom(event, g, context);
 571     } else if (context.isPanning) {
 572       Dygraph.movePan(event, g, context);
 573     }
 574   },
 575
 576   mouseup: function(event, g, context) {
 577     if (context.isZooming) {
 578       Dygraph.endZoom(event, g, context);
 579     } else if (context.isPanning) {
 580       Dygraph.endPan(event, g, context);
 581     }
 582   },
 583
 584   touchstart: function(event, g, context) {
 585     Dygraph.Interaction.startTouch(event, g, context);
 586   },
 587   touchmove: function(event, g, context) {
 588     Dygraph.Interaction.moveTouch(event, g, context);
 589   },
 590   touchend: function(event, g, context) {
 591     Dygraph.Interaction.endTouch(event, g, context);
 592   },
 593
 594   // Temporarily cancel the dragging event when the mouse leaves the graph
 595   mouseout: function(event, g, context) {
 596     if (context.isZooming) {
 597       context.dragEndX = null;
 598       context.dragEndY = null;
 599     }
 600   },
 601
 602   // Disable zooming out if panning.
 603   dblclick: function(event, g, context) {
 604     if (context.cancelNextDblclick) {
 605       context.cancelNextDblclick = false;
 606       return;
 607     }
 608     if (event.altKey || event.shiftKey) {
 609       return;
 610     }
 611     g.resetZoom();
 612   }
 613 };
 614
 615 Dygraph.DEFAULT_ATTRS.interactionModel = Dygraph.Interaction.defaultModel;
 616
 617 // old ways of accessing these methods/properties
 618 Dygraph.defaultInteractionModel = Dygraph.Interaction.defaultModel;
 619 Dygraph.endZoom = Dygraph.Interaction.endZoom;
 620 Dygraph.moveZoom = Dygraph.Interaction.moveZoom;
 621 Dygraph.startZoom = Dygraph.Interaction.startZoom;
 622 Dygraph.endPan = Dygraph.Interaction.endPan;
 623 Dygraph.movePan = Dygraph.Interaction.movePan;
 624 Dygraph.startPan = Dygraph.Interaction.startPan;
 625
 626 Dygraph.Interaction.nonInteractiveModel_ = {
 627   mousedown: function(event, g, context) {
 628     context.initializeMouseDown(event, g, context);
 629   },
 630   mouseup: function(event, g, context) {
 631     // TODO(danvk): this logic is repeated in Dygraph.Interaction.endZoom
 632     context.dragEndX = g.dragGetX_(event, context);
 633     context.dragEndY = g.dragGetY_(event, context);
 634     var regionWidth = Math.abs(context.dragEndX - context.dragStartX);
 635     var regionHeight = Math.abs(context.dragEndY - context.dragStartY);
 636
 637     if (regionWidth < 2 && regionHeight < 2 &&
 638         g.lastx_ !== undefined && g.lastx_ != -1) {
 639       Dygraph.Interaction.treatMouseOpAsClick(g, event, context);
 640     }
 641   }
 642 };
 643
 644 // Default interaction model when using the range selector.
 645 Dygraph.Interaction.dragIsPanInteractionModel = {
 646   mousedown: function(event, g, context) {
 647     context.initializeMouseDown(event, g, context);
 648     Dygraph.startPan(event, g, context);
 649   },
 650   mousemove: function(event, g, context) {
 651     if (context.isPanning) {
 652       Dygraph.movePan(event, g, context);
 653     }
 654   },
 655   mouseup: function(event, g, context) {
 656     if (context.isPanning) {
 657       Dygraph.endPan(event, g, context);
 658     }
 659   }
 660 };