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