* 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;
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 {
* 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);
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 {
* Custom interaction model builders can use it to provide the default
* panning behavior.
*
- * @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.
+ * @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);
* 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;
};
/**
* 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);
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;
* 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;
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;
*/
Dygraph.Interaction.startTouch = function(event, g, context) {
event.preventDefault(); // touch browsers are all nice.
+ if (event.touches.length > 1) {
+ // If the user ever puts two fingers down, it's not a double tap.
+ context.startTimeForDoubleTapMs = null;
+ }
+
var touches = [];
for (var i = 0; i < event.touches.length; i++) {
var t = event.touches[i];
// This is just a swipe.
context.initialPinchCenter = touches[0];
context.touchDirections = { x: true, y: true };
- } else if (touches.length == 2) {
+ } else if (touches.length >= 2) {
// It's become a pinch!
+ // In case there are 3+ touches, we ignore all but the "first" two.
// only screen coordinates can be averaged (data coords could be log scale).
context.initialPinchCenter = {
// TODO(danvk): remove
dataX: 0.5 * (touches[0].dataX + touches[1].dataX),
- dataY: 0.5 * (touches[0].dataY + touches[1].dataY),
+ dataY: 0.5 * (touches[0].dataY + touches[1].dataY)
};
// Make pinches in a 45-degree swath around either axis 1-dimensional zooms.
* @private
*/
Dygraph.Interaction.moveTouch = function(event, g, context) {
- var touches = [];
- for (var i = 0; i < event.touches.length; i++) {
+ // If the tap moves, then it's definitely not part of a double-tap.
+ context.startTimeForDoubleTapMs = null;
+
+ var i, touches = [];
+ for (i = 0; i < event.touches.length; i++) {
var t = event.touches[i];
touches.push({
pageX: t.pageX,
- pageY: t.pageY,
+ pageY: t.pageY
});
}
var initialTouches = context.initialTouches;
// 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,
+ 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];
if (touches.length == 1) {
xScale = 1.0;
yScale = 1.0;
- } else if (touches.length == 2) {
+ } else if (touches.length >= 2) {
var initHalfWidth = (initialTouches[1].pageX - c_init.pageX);
xScale = (touches[1].pageX - c_now.pageX) / initHalfWidth;
xScale = Math.min(8, Math.max(0.125, xScale));
yScale = Math.min(8, Math.max(0.125, yScale));
+ var didZoom = false;
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,
+ c_init.dataX - swipe.dataX + (context.initialRange.x[1] - c_init.dataX) / xScale
];
+ didZoom = true;
}
if (context.touchDirections.y) {
- for (var i = 0; i < 1 /*g.axes_.length*/; i++) {
+ for (i = 0; i < 1 /*g.axes_.length*/; i++) {
var axis = g.axes_[i];
- if (axis.logscale) {
+ 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,
+ c_init.dataY - swipe.dataY + (context.initialRange.y[1] - c_init.dataY) / yScale
];
+ didZoom = true;
}
}
}
g.drawGraph_(false);
+
+ // We only call zoomCallback on zooms, not pans, to mirror desktop behavior.
+ if (didZoom && touches.length > 1 && g.attr_('zoomCallback')) {
+ var viewWindow = g.xAxisRange();
+ g.attr_("zoomCallback")(viewWindow[0], viewWindow[1], g.yAxisRanges());
+ }
};
/**
* @private
*/
Dygraph.Interaction.endTouch = function(event, g, context) {
- if (event.touches.length != 0) {
+ if (event.touches.length !== 0) {
// this is effectively a "reset"
Dygraph.Interaction.startTouch(event, g, context);
+ } else if (event.changedTouches.length == 1) {
+ // Could be part of a "double tap"
+ // The heuristic here is that it's a double-tap if the two touchend events
+ // occur within 500ms and within a 50x50 pixel box.
+ var now = new Date().getTime();
+ var t = event.changedTouches[0];
+ if (context.startTimeForDoubleTapMs &&
+ now - context.startTimeForDoubleTapMs < 500 &&
+ context.doubleTapX && Math.abs(context.doubleTapX - t.screenX) < 50 &&
+ context.doubleTapY && Math.abs(context.doubleTapY - t.screenY) < 50) {
+ g.resetZoom();
+ } else {
+ context.startTimeForDoubleTapMs = now;
+ context.doubleTapX = t.screenX;
+ context.doubleTapY = t.screenY;
+ }
}
};
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) {
// 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();
}
};