X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=dygraph-interaction-model.js;h=9654f2826f78778615bebc393e455066ed38091c;hb=e4cee287656a7dc72c1883748c493b0db682ef16;hp=c57ad2556bb14f96393c1aea83677a267a2c0f5c;hpb=436943f9fee49b1f892480f04f0dc4d5abc5fca0;p=dygraphs.git

diff --git a/dygraph-interaction-model.js b/dygraph-interaction-model.js
index c57ad25..9654f28 100644
--- a/dygraph-interaction-model.js
+++ b/dygraph-interaction-model.js
@@ -28,10 +28,11 @@ Dygraph.Interaction = {};
  * Custom interaction model builders can use it to provide the default
  * panning behavior.
  *
- * @param { Event } event the event object which led to the startPan call.
- * @param { Dygraph} g The dygraph on which to act.
- * @param { Object} context The dragging context object (with
- * dragStartX/dragStartY/etc. properties). This function modifies the context.
+ * @param {Event} event the event object which led to the startPan call.
+ * @param {Dygraph} g The dygraph on which to act.
+ * @param {Object} context The dragging context object (with
+ *     dragStartX/dragStartY/etc. properties). This function modifies the
+ *     context.
  */
 Dygraph.Interaction.startPan = function(event, g, context) {
   var i, axis;
@@ -83,7 +84,8 @@ Dygraph.Interaction.startPan = function(event, g, context) {
     var yRange = g.yAxisRange(i);
     // TODO(konigsberg): These values should be in |context|.
     // In log scale, initialTopValue, dragValueRange and unitsPerPixel are log scale.
-    if (axis.logscale) {
+    var logscale = g.attributes_.getForAxis("logscale", i);
+    if (logscale) {
       axis_data.initialTopValue = Dygraph.log10(yRange[1]);
       axis_data.dragValueRange = Dygraph.log10(yRange[1]) - Dygraph.log10(yRange[0]);
     } else {
@@ -106,10 +108,11 @@ Dygraph.Interaction.startPan = function(event, g, context) {
  * Custom interaction model builders can use it to provide the default
  * panning behavior.
  *
- * @param { Event } event the event object which led to the movePan call.
- * @param { Dygraph} g The dygraph on which to act.
- * @param { Object} context The dragging context object (with
- * dragStartX/dragStartY/etc. properties). This function modifies the context.
+ * @param {Event} event the event object which led to the movePan call.
+ * @param {Dygraph} g The dygraph on which to act.
+ * @param {Object} context The dragging context object (with
+ *     dragStartX/dragStartY/etc. properties). This function modifies the
+ *     context.
  */
 Dygraph.Interaction.movePan = function(event, g, context) {
   context.dragEndX = g.dragGetX_(event, context);
@@ -156,7 +159,8 @@ Dygraph.Interaction.movePan = function(event, g, context) {
           minValue = maxValue - axis_data.dragValueRange;
         }
       }
-      if (axis.logscale) {
+      var logscale = g.attributes_.getForAxis("logscale", i);
+      if (logscale) {
         axis.valueWindow = [ Math.pow(Dygraph.LOG_SCALE, minValue),
                              Math.pow(Dygraph.LOG_SCALE, maxValue) ];
       } else {
@@ -176,10 +180,11 @@ Dygraph.Interaction.movePan = function(event, g, context) {
  * Custom interaction model builders can use it to provide the default
  * panning behavior.
  *
- * @param { Event } event the event object which led to the startZoom call.
- * @param { Dygraph} g The dygraph on which to act.
- * @param { Object} context The dragging context object (with
- * dragStartX/dragStartY/etc. properties). This function modifies the context.
+ * @param {Event} event the event object which led to the endPan call.
+ * @param {Dygraph} g The dygraph on which to act.
+ * @param {Object} context The dragging context object (with
+ *     dragStartX/dragStartY/etc. properties). This function modifies the
+ *     context.
  */
 Dygraph.Interaction.endPan = function(event, g, context) {
   context.dragEndX = g.dragGetX_(event, context);
@@ -213,13 +218,15 @@ Dygraph.Interaction.endPan = function(event, g, context) {
  * Custom interaction model builders can use it to provide the default
  * zooming behavior.
  *
- * @param { Event } event the event object which led to the startZoom call.
- * @param { Dygraph} g The dygraph on which to act.
- * @param { Object} context The dragging context object (with
- * dragStartX/dragStartY/etc. properties). This function modifies the context.
+ * @param {Event} event the event object which led to the startZoom call.
+ * @param {Dygraph} g The dygraph on which to act.
+ * @param {Object} context The dragging context object (with
+ *     dragStartX/dragStartY/etc. properties). This function modifies the
+ *     context.
  */
 Dygraph.Interaction.startZoom = function(event, g, context) {
   context.isZooming = true;
+  context.zoomMoved = false;
 };
 
 /**
@@ -230,12 +237,14 @@ Dygraph.Interaction.startZoom = function(event, g, context) {
  * Custom interaction model builders can use it to provide the default
  * zooming behavior.
  *
- * @param { Event } event the event object which led to the moveZoom call.
- * @param { Dygraph} g The dygraph on which to act.
- * @param { Object} context The dragging context object (with
- * dragStartX/dragStartY/etc. properties). This function modifies the context.
+ * @param {Event} event the event object which led to the moveZoom call.
+ * @param {Dygraph} g The dygraph on which to act.
+ * @param {Object} context The dragging context object (with
+ *     dragStartX/dragStartY/etc. properties). This function modifies the
+ *     context.
  */
 Dygraph.Interaction.moveZoom = function(event, g, context) {
+  context.zoomMoved = true;
   context.dragEndX = g.dragGetX_(event, context);
   context.dragEndY = g.dragGetY_(event, context);
 
@@ -260,13 +269,19 @@ Dygraph.Interaction.moveZoom = function(event, g, context) {
   context.prevDragDirection = context.dragDirection;
 };
 
+/**
+ * @param {Dygraph} g
+ * @param {Event} event
+ * @param {Object} context
+ */
 Dygraph.Interaction.treatMouseOpAsClick = function(g, event, context) {
   var clickCallback = g.attr_('clickCallback');
   var pointClickCallback = g.attr_('pointClickCallback');
 
   var selectedPoint = null;
 
-  // Find out if the click occurs on a point. This only matters if there's a pointClickCallback.
+  // Find out if the click occurs on a point. This only matters if there's a
+  // pointClickCallback.
   if (pointClickCallback) {
     var closestIdx = -1;
     var closestDistance = Number.MAX_VALUE;
@@ -309,10 +324,11 @@ Dygraph.Interaction.treatMouseOpAsClick = function(g, event, context) {
  * Custom interaction model builders can use it to provide the default
  * zooming behavior.
  *
- * @param { Event } event the event object which led to the endZoom call.
- * @param { Dygraph} g The dygraph on which to end the zoom.
- * @param { Object} context The dragging context object (with
- * dragStartX/dragStartY/etc. properties). This function modifies the context.
+ * @param {Event} event the event object which led to the endZoom call.
+ * @param {Dygraph} g The dygraph on which to end the zoom.
+ * @param {Object} context The dragging context object (with
+ *     dragStartX/dragStartY/etc. properties). This function modifies the
+ *     context.
  */
 Dygraph.Interaction.endZoom = function(event, g, context) {
   context.isZooming = false;
@@ -329,17 +345,168 @@ Dygraph.Interaction.endZoom = function(event, g, context) {
   if (regionWidth >= 10 && context.dragDirection == Dygraph.HORIZONTAL) {
     g.doZoomX_(Math.min(context.dragStartX, context.dragEndX),
                Math.max(context.dragStartX, context.dragEndX));
+    context.cancelNextDblclick = true;
   } else if (regionHeight >= 10 && context.dragDirection == Dygraph.VERTICAL) {
     g.doZoomY_(Math.min(context.dragStartY, context.dragEndY),
                Math.max(context.dragStartY, context.dragEndY));
+    context.cancelNextDblclick = true;
   } else {
-    g.clearZoomRect_();
+    if (context.zoomMoved) g.clearZoomRect_();
   }
   context.dragStartX = null;
   context.dragStartY = null;
 };
 
 /**
+ * @private
+ */
+Dygraph.Interaction.startTouch = function(event, g, context) {
+  event.preventDefault();  // touch browsers are all nice.
+  var touches = [];
+  for (var i = 0; i < event.touches.length; i++) {
+    var t = event.touches[i];
+    // we dispense with 'dragGetX_' because all touchBrowsers support pageX
+    touches.push({
+      pageX: t.pageX,
+      pageY: t.pageY,
+      dataX: g.toDataXCoord(t.pageX),
+      dataY: g.toDataYCoord(t.pageY)
+      // identifier: t.identifier
+    });
+  }
+  context.initialTouches = touches;
+
+  if (touches.length == 1) {
+    // This is just a swipe.
+    context.initialPinchCenter = touches[0];
+    context.touchDirections = { x: true, y: true };
+  } else if (touches.length == 2) {
+    // It's become a pinch!
+
+    // only screen coordinates can be averaged (data coords could be log scale).
+    context.initialPinchCenter = {
+      pageX: 0.5 * (touches[0].pageX + touches[1].pageX),
+      pageY: 0.5 * (touches[0].pageY + touches[1].pageY),
+
+      // TODO(danvk): remove
+      dataX: 0.5 * (touches[0].dataX + touches[1].dataX),
+      dataY: 0.5 * (touches[0].dataY + touches[1].dataY)
+    };
+
+    // Make pinches in a 45-degree swath around either axis 1-dimensional zooms.
+    var initialAngle = 180 / Math.PI * Math.atan2(
+        context.initialPinchCenter.pageY - touches[0].pageY,
+        touches[0].pageX - context.initialPinchCenter.pageX);
+
+    // use symmetry to get it into the first quadrant.
+    initialAngle = Math.abs(initialAngle);
+    if (initialAngle > 90) initialAngle = 90 - initialAngle;
+
+    context.touchDirections = {
+      x: (initialAngle < (90 - 45/2)),
+      y: (initialAngle > 45/2)
+    };
+  }
+
+  // save the full x & y ranges.
+  context.initialRange = {
+    x: g.xAxisRange(),
+    y: g.yAxisRange()
+  };
+};
+
+/**
+ * @private
+ */
+Dygraph.Interaction.moveTouch = function(event, g, context) {
+  var i, touches = [];
+  for (i = 0; i < event.touches.length; i++) {
+    var t = event.touches[i];
+    touches.push({
+      pageX: t.pageX,
+      pageY: t.pageY
+    });
+  }
+  var initialTouches = context.initialTouches;
+
+  var c_now;
+
+  // old and new centers.
+  var c_init = context.initialPinchCenter;
+  if (touches.length == 1) {
+    c_now = touches[0];
+  } else {
+    c_now = {
+      pageX: 0.5 * (touches[0].pageX + touches[1].pageX),
+      pageY: 0.5 * (touches[0].pageY + touches[1].pageY)
+    };
+  }
+
+  // this is the "swipe" component
+  // we toss it out for now, but could use it in the future.
+  var swipe = {
+    pageX: c_now.pageX - c_init.pageX,
+    pageY: c_now.pageY - c_init.pageY
+  };
+  var dataWidth = context.initialRange.x[1] - context.initialRange.x[0];
+  var dataHeight = context.initialRange.y[0] - context.initialRange.y[1];
+  swipe.dataX = (swipe.pageX / g.plotter_.area.w) * dataWidth;
+  swipe.dataY = (swipe.pageY / g.plotter_.area.h) * dataHeight;
+  var xScale, yScale;
+
+  // The residual bits are usually split into scale & rotate bits, but we split
+  // them into x-scale and y-scale bits.
+  if (touches.length == 1) {
+    xScale = 1.0;
+    yScale = 1.0;
+  } else if (touches.length == 2) {
+    var initHalfWidth = (initialTouches[1].pageX - c_init.pageX);
+    xScale = (touches[1].pageX - c_now.pageX) / initHalfWidth;
+
+    var initHalfHeight = (initialTouches[1].pageY - c_init.pageY);
+    yScale = (touches[1].pageY - c_now.pageY) / initHalfHeight;
+  }
+
+  // Clip scaling to [1/8, 8] to prevent too much blowup.
+  xScale = Math.min(8, Math.max(0.125, xScale));
+  yScale = Math.min(8, Math.max(0.125, yScale));
+
+  if (context.touchDirections.x) {
+    g.dateWindow_ = [
+      c_init.dataX - swipe.dataX + (context.initialRange.x[0] - c_init.dataX) / xScale,
+      c_init.dataX - swipe.dataX + (context.initialRange.x[1] - c_init.dataX) / xScale
+    ];
+  }
+  
+  if (context.touchDirections.y) {
+    for (i = 0; i < 1  /*g.axes_.length*/; i++) {
+      var axis = g.axes_[i];
+      var logscale = g.attributes_.getForAxis("logscale", i);
+      if (logscale) {
+        // TODO(danvk): implement
+      } else {
+        axis.valueWindow = [
+          c_init.dataY - swipe.dataY + (context.initialRange.y[0] - c_init.dataY) / yScale,
+          c_init.dataY - swipe.dataY + (context.initialRange.y[1] - c_init.dataY) / yScale
+        ];
+      }
+    }
+  }
+
+  g.drawGraph_(false);
+};
+
+/**
+ * @private
+ */
+Dygraph.Interaction.endTouch = function(event, g, context) {
+  if (event.touches.length !== 0) {
+    // this is effectively a "reset"
+    Dygraph.Interaction.startTouch(event, g, context);
+  }
+};
+
+/**
  * Default interation model for dygraphs. You can refer to specific elements of
  * this when constructing your own interaction model, e.g.:
  * g.updateOptions( {
@@ -351,6 +518,9 @@ Dygraph.Interaction.endZoom = function(event, g, context) {
 Dygraph.Interaction.defaultModel = {
   // Track the beginning of drag events
   mousedown: function(event, g, context) {
+    // Right-click should not initiate a zoom.
+    if (event.button && event.button == 2) return;
+
     context.initializeMouseDown(event, g, context);
 
     if (event.altKey || event.shiftKey) {
@@ -377,6 +547,16 @@ Dygraph.Interaction.defaultModel = {
     }
   },
 
+  touchstart: function(event, g, context) {
+    Dygraph.Interaction.startTouch(event, g, context);
+  },
+  touchmove: function(event, g, context) {
+    Dygraph.Interaction.moveTouch(event, g, context);
+  },
+  touchend: function(event, g, context) {
+    Dygraph.Interaction.endTouch(event, g, context);
+  },
+
   // Temporarily cancel the dragging event when the mouse leaves the graph
   mouseout: function(event, g, context) {
     if (context.isZooming) {
@@ -387,12 +567,14 @@ Dygraph.Interaction.defaultModel = {
 
   // Disable zooming out if panning.
   dblclick: function(event, g, context) {
+    if (context.cancelNextDblclick) {
+      context.cancelNextDblclick = false;
+      return;
+    }
     if (event.altKey || event.shiftKey) {
       return;
     }
-    // TODO(konigsberg): replace g.doUnzoom()_ with something that is
-    // friendlier to public use.
-    g.doUnzoom_();
+    g.resetZoom();
   }
 };