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