Commit | Line | Data |
---|---|---|
88e95c46 DV |
1 | /** |
2 | * @license | |
3 | * Copyright 2011 Robert Konigsberg (konigsberg@google.com) | |
4 | * MIT-licensed (http://opensource.org/licenses/MIT) | |
5 | */ | |
846f3d2d | 6 | |
88e95c46 | 7 | /** |
846f3d2d DV |
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 | ||
3f50dabb | 13 | (function() { |
758a629f | 14 | /*global Dygraph:false */ |
c0f54d4f DV |
15 | "use strict"; |
16 | ||
846f3d2d | 17 | /** |
3f50dabb DV |
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 | */ | |
7a2b5176 | 22 | var DRAG_EDGE_MARGIN = 100; |
3f50dabb DV |
23 | |
24 | /** | |
846f3d2d DV |
25 | * A collection of functions to facilitate build custom interaction models. |
26 | * @class | |
27 | */ | |
28 | Dygraph.Interaction = {}; | |
29 | ||
30 | /** | |
3f50dabb DV |
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; | |
46fd9089 | 52 | }; |
3f50dabb DV |
53 | |
54 | /** | |
846f3d2d DV |
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 | * | |
d67a4279 DV |
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. | |
846f3d2d DV |
67 | */ |
68 | Dygraph.Interaction.startPan = function(event, g, context) { | |
758a629f | 69 | var i, axis; |
846f3d2d DV |
70 | context.isPanning = true; |
71 | var xRange = g.xAxisRange(); | |
5b9b2142 | 72 | |
5ec8b8ae | 73 | if (g.getOptionForAxis("logscale", "x")) { |
5b9b2142 RK |
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 | } | |
846f3d2d DV |
80 | context.xUnitsPerPixel = context.dateRange / (g.plotter_.area.w - 1); |
81 | ||
b0963cdb DV |
82 | if (g.getNumericOption("panEdgeFraction")) { |
83 | var maxXPixelsToDraw = g.width_ * g.getNumericOption("panEdgeFraction"); | |
846f3d2d DV |
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 = []; | |
b0963cdb | 94 | var maxYPixelsToDraw = g.height_ * g.getNumericOption("panEdgeFraction"); |
846f3d2d | 95 | |
758a629f DV |
96 | for (i = 0; i < g.axes_.length; i++) { |
97 | axis = g.axes_[i]; | |
846f3d2d DV |
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 | ||
f93af875 RK |
103 | var boundedTopValue = g.toDataYCoord(boundedTopY, i); |
104 | var boundedBottomValue = g.toDataYCoord(boundedBottomY, i); | |
846f3d2d DV |
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. | |
97583b90 DV |
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). | |
846f3d2d | 116 | context.is2DPan = false; |
97583b90 | 117 | context.axes = []; |
758a629f DV |
118 | for (i = 0; i < g.axes_.length; i++) { |
119 | axis = g.axes_[i]; | |
97583b90 | 120 | var axis_data = {}; |
846f3d2d DV |
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. | |
1ca77443 RK |
124 | var logscale = g.attributes_.getForAxis("logscale", i); |
125 | if (logscale) { | |
97583b90 DV |
126 | axis_data.initialTopValue = Dygraph.log10(yRange[1]); |
127 | axis_data.dragValueRange = Dygraph.log10(yRange[1]) - Dygraph.log10(yRange[0]); | |
846f3d2d | 128 | } else { |
97583b90 DV |
129 | axis_data.initialTopValue = yRange[1]; |
130 | axis_data.dragValueRange = yRange[1] - yRange[0]; | |
846f3d2d | 131 | } |
97583b90 DV |
132 | axis_data.unitsPerPixel = axis_data.dragValueRange / (g.plotter_.area.h - 1); |
133 | context.axes.push(axis_data); | |
846f3d2d DV |
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 | * | |
d67a4279 DV |
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. | |
846f3d2d DV |
153 | */ |
154 | Dygraph.Interaction.movePan = function(event, g, context) { | |
806f92c1 DV |
155 | context.dragEndX = Dygraph.dragGetX_(event, context); |
156 | context.dragEndY = Dygraph.dragGetY_(event, context); | |
846f3d2d DV |
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 | ||
5ec8b8ae | 172 | if (g.getOptionForAxis("logscale", "x")) { |
5b9b2142 RK |
173 | g.dateWindow_ = [ Math.pow(Dygraph.LOG_SCALE, minDate), |
174 | Math.pow(Dygraph.LOG_SCALE, maxDate) ]; | |
175 | } else { | |
176 | g.dateWindow_ = [minDate, maxDate]; | |
177 | } | |
846f3d2d DV |
178 | |
179 | // y-axis scaling is automatic unless this is a full 2D pan. | |
180 | if (context.is2DPan) { | |
f93af875 RK |
181 | |
182 | var pixelsDragged = context.dragEndY - context.dragStartY; | |
183 | ||
846f3d2d DV |
184 | // Adjust each axis appropriately. |
185 | for (var i = 0; i < g.axes_.length; i++) { | |
186 | var axis = g.axes_[i]; | |
97583b90 | 187 | var axis_data = context.axes[i]; |
97583b90 | 188 | var unitsDragged = pixelsDragged * axis_data.unitsPerPixel; |
920208fb | 189 | |
846f3d2d DV |
190 | var boundedValue = context.boundedValues ? context.boundedValues[i] : null; |
191 | ||
192 | // In log scale, maxValue and minValue are the logs of those values. | |
97583b90 | 193 | var maxValue = axis_data.initialTopValue + unitsDragged; |
846f3d2d DV |
194 | if (boundedValue) { |
195 | maxValue = Math.min(maxValue, boundedValue[1]); | |
196 | } | |
97583b90 | 197 | var minValue = maxValue - axis_data.dragValueRange; |
846f3d2d DV |
198 | if (boundedValue) { |
199 | if (minValue < boundedValue[0]) { | |
200 | // Adjust maxValue, and recompute minValue. | |
201 | maxValue = maxValue - (minValue - boundedValue[0]); | |
97583b90 | 202 | minValue = maxValue - axis_data.dragValueRange; |
846f3d2d DV |
203 | } |
204 | } | |
5b9b2142 | 205 | if (g.attributes_.getForAxis("logscale", i)) { |
846f3d2d DV |
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 | * | |
d67a4279 DV |
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. | |
846f3d2d | 230 | */ |
3f50dabb | 231 | Dygraph.Interaction.endPan = Dygraph.Interaction.maybeTreatMouseOpAsClick; |
846f3d2d DV |
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 | * | |
d67a4279 DV |
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. | |
846f3d2d DV |
246 | */ |
247 | Dygraph.Interaction.startZoom = function(event, g, context) { | |
248 | context.isZooming = true; | |
214083b4 | 249 | context.zoomMoved = false; |
846f3d2d DV |
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 | * | |
d67a4279 DV |
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. | |
846f3d2d DV |
265 | */ |
266 | Dygraph.Interaction.moveZoom = function(event, g, context) { | |
214083b4 | 267 | context.zoomMoved = true; |
806f92c1 DV |
268 | context.dragEndX = Dygraph.dragGetX_(event, context); |
269 | context.dragEndY = Dygraph.dragGetY_(event, context); | |
846f3d2d DV |
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 | ||
d67a4279 | 292 | /** |
6f5f0b2b | 293 | * TODO(danvk): move this logic into dygraph.js |
d67a4279 DV |
294 | * @param {Dygraph} g |
295 | * @param {Event} event | |
296 | * @param {Object} context | |
297 | */ | |
846f3d2d | 298 | Dygraph.Interaction.treatMouseOpAsClick = function(g, event, context) { |
b0963cdb DV |
299 | var clickCallback = g.getFunctionOption('clickCallback'); |
300 | var pointClickCallback = g.getFunctionOption('pointClickCallback'); | |
846f3d2d DV |
301 | |
302 | var selectedPoint = null; | |
303 | ||
6f5f0b2b DV |
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; | |
846f3d2d | 317 | } |
6f5f0b2b | 318 | } |
846f3d2d | 319 | |
6f5f0b2b DV |
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]; | |
846f3d2d DV |
324 | } |
325 | ||
326 | if (selectedPoint) { | |
6f5f0b2b DV |
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 | } | |
846f3d2d DV |
341 | } |
342 | ||
6f5f0b2b | 343 | var e = { |
48238e1d | 344 | cancelable: true, |
6f5f0b2b DV |
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 | } | |
846f3d2d DV |
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 | * | |
d67a4279 DV |
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. | |
846f3d2d DV |
372 | */ |
373 | Dygraph.Interaction.endZoom = function(event, g, context) { | |
7c39bb3a | 374 | g.clearZoomRect_(); |
846f3d2d | 375 | context.isZooming = false; |
3f50dabb | 376 | Dygraph.Interaction.maybeTreatMouseOpAsClick(event, g, context); |
846f3d2d | 377 | |
b04888cc DV |
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(); | |
3f50dabb DV |
382 | if (context.regionWidth >= 10 && |
383 | context.dragDirection == Dygraph.HORIZONTAL) { | |
b04888cc DV |
384 | var left = Math.min(context.dragStartX, context.dragEndX), |
385 | right = Math.max(context.dragStartX, context.dragEndX); | |
5ee26cc1 DV |
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 | } | |
421f1773 | 391 | context.cancelNextDblclick = true; |
3f50dabb DV |
392 | } else if (context.regionHeight >= 10 && |
393 | context.dragDirection == Dygraph.VERTICAL) { | |
b04888cc DV |
394 | var top = Math.min(context.dragStartY, context.dragEndY), |
395 | bottom = Math.max(context.dragStartY, context.dragEndY); | |
5ee26cc1 DV |
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 | } | |
421f1773 | 401 | context.cancelNextDblclick = true; |
846f3d2d DV |
402 | } |
403 | context.dragStartX = null; | |
404 | context.dragStartY = null; | |
405 | }; | |
406 | ||
407 | /** | |
6125fedf DV |
408 | * @private |
409 | */ | |
410 | Dygraph.Interaction.startTouch = function(event, g, context) { | |
411 | event.preventDefault(); // touch browsers are all nice. | |
b19d7411 DV |
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 | ||
6125fedf DV |
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) { | |
86ca574e KB |
432 | // This is possbily a touchOVER, save the last touch to check |
433 | context.lastTouch = event; | |
434 | // or This is just a swipe. | |
6125fedf DV |
435 | context.initialPinchCenter = touches[0]; |
436 | context.touchDirections = { x: true, y: true }; | |
48cdd6c4 | 437 | } else if (touches.length >= 2) { |
6125fedf | 438 | // It's become a pinch! |
48cdd6c4 | 439 | // In case there are 3+ touches, we ignore all but the "first" two. |
6125fedf DV |
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), | |
e446c952 | 448 | dataY: 0.5 * (touches[0].dataY + touches[1].dataY) |
6125fedf DV |
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) { | |
b19d7411 DV |
477 | // If the tap moves, then it's definitely not part of a double-tap. |
478 | context.startTimeForDoubleTapMs = null; | |
7775fca8 KB |
479 | |
480 | // clear the last touch if it's doing something else | |
481 | context.lastTouch = null; | |
b19d7411 | 482 | |
e446c952 DV |
483 | var i, touches = []; |
484 | for (i = 0; i < event.touches.length; i++) { | |
6125fedf DV |
485 | var t = event.touches[i]; |
486 | touches.push({ | |
487 | pageX: t.pageX, | |
e446c952 | 488 | pageY: t.pageY |
6125fedf DV |
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, | |
e446c952 | 510 | pageY: c_now.pageY - c_init.pageY |
6125fedf DV |
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; | |
48cdd6c4 | 523 | } else if (touches.length >= 2) { |
6125fedf DV |
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 | ||
b38afae5 | 535 | var didZoom = false; |
6125fedf DV |
536 | if (context.touchDirections.x) { |
537 | g.dateWindow_ = [ | |
538 | c_init.dataX - swipe.dataX + (context.initialRange.x[0] - c_init.dataX) / xScale, | |
e446c952 | 539 | c_init.dataX - swipe.dataX + (context.initialRange.x[1] - c_init.dataX) / xScale |
6125fedf | 540 | ]; |
b38afae5 | 541 | didZoom = true; |
6125fedf DV |
542 | } |
543 | ||
544 | if (context.touchDirections.y) { | |
e446c952 | 545 | for (i = 0; i < 1 /*g.axes_.length*/; i++) { |
6125fedf | 546 | var axis = g.axes_[i]; |
1ca77443 RK |
547 | var logscale = g.attributes_.getForAxis("logscale", i); |
548 | if (logscale) { | |
6125fedf DV |
549 | // TODO(danvk): implement |
550 | } else { | |
551 | axis.valueWindow = [ | |
552 | c_init.dataY - swipe.dataY + (context.initialRange.y[0] - c_init.dataY) / yScale, | |
e446c952 | 553 | c_init.dataY - swipe.dataY + (context.initialRange.y[1] - c_init.dataY) / yScale |
6125fedf | 554 | ]; |
b38afae5 | 555 | didZoom = true; |
6125fedf DV |
556 | } |
557 | } | |
558 | } | |
559 | ||
560 | g.drawGraph_(false); | |
b38afae5 DV |
561 | |
562 | // We only call zoomCallback on zooms, not pans, to mirror desktop behavior. | |
b0963cdb | 563 | if (didZoom && touches.length > 1 && g.getFunctionOption('zoomCallback')) { |
b38afae5 | 564 | var viewWindow = g.xAxisRange(); |
4ee251cb | 565 | g.getFunctionOption("zoomCallback").call(g, viewWindow[0], viewWindow[1], g.yAxisRanges()); |
b38afae5 | 566 | } |
6125fedf DV |
567 | }; |
568 | ||
569 | /** | |
570 | * @private | |
571 | */ | |
572 | Dygraph.Interaction.endTouch = function(event, g, context) { | |
42a9ebb8 | 573 | if (event.touches.length !== 0) { |
6125fedf DV |
574 | // this is effectively a "reset" |
575 | Dygraph.Interaction.startTouch(event, g, context); | |
b19d7411 DV |
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 { | |
7775fca8 KB |
588 | |
589 | if (context.lastTouch !== null){ | |
590 | // no double-tap, pan or pinch so it's a touchOVER | |
3ca097d8 | 591 | event.isTouchOver = true; |
7775fca8 KB |
592 | g.mouseMove(event); |
593 | } | |
594 | ||
b19d7411 DV |
595 | context.startTimeForDoubleTapMs = now; |
596 | context.doubleTapX = t.screenX; | |
597 | context.doubleTapY = t.screenY; | |
598 | } | |
6125fedf DV |
599 | } |
600 | }; | |
601 | ||
3f50dabb DV |
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 | ||
6125fedf | 636 | /** |
846f3d2d DV |
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) { | |
e992d194 DV |
648 | // Right-click should not initiate a zoom. |
649 | if (event.button && event.button == 2) return; | |
650 | ||
846f3d2d DV |
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 | } | |
846f3d2d | 658 | |
3f50dabb DV |
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); | |
5e1abda5 | 666 | if (d < DRAG_EDGE_MARGIN) { |
3f50dabb DV |
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 | } | |
846f3d2d | 689 | |
3f50dabb DV |
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); | |
846f3d2d | 697 | }, |
3f50dabb | 698 | willDestroyContextMyself: true, |
846f3d2d | 699 | |
6125fedf DV |
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 | ||
846f3d2d DV |
710 | // Disable zooming out if panning. |
711 | dblclick: function(event, g, context) { | |
421f1773 DV |
712 | if (context.cancelNextDblclick) { |
713 | context.cancelNextDblclick = false; | |
714 | return; | |
715 | } | |
6f5f0b2b DV |
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 | ||
846f3d2d DV |
726 | if (event.altKey || event.shiftKey) { |
727 | return; | |
728 | } | |
e4f6e11a | 729 | g.resetZoom(); |
846f3d2d DV |
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 | ||
0290d079 | 744 | Dygraph.Interaction.nonInteractiveModel_ = { |
027e9e9b DV |
745 | mousedown: function(event, g, context) { |
746 | context.initializeMouseDown(event, g, context); | |
747 | }, | |
3f50dabb | 748 | mouseup: Dygraph.Interaction.maybeTreatMouseOpAsClick |
027e9e9b | 749 | }; |
3417f017 DV |
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 | }; | |
3f50dabb DV |
768 | |
769 | })(); |