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) { | |
432 | // This is just a swipe. | |
433 | context.initialPinchCenter = touches[0]; | |
434 | context.touchDirections = { x: true, y: true }; | |
48cdd6c4 | 435 | } else if (touches.length >= 2) { |
6125fedf | 436 | // It's become a pinch! |
48cdd6c4 | 437 | // In case there are 3+ touches, we ignore all but the "first" two. |
6125fedf DV |
438 | |
439 | // only screen coordinates can be averaged (data coords could be log scale). | |
440 | context.initialPinchCenter = { | |
441 | pageX: 0.5 * (touches[0].pageX + touches[1].pageX), | |
442 | pageY: 0.5 * (touches[0].pageY + touches[1].pageY), | |
443 | ||
444 | // TODO(danvk): remove | |
445 | dataX: 0.5 * (touches[0].dataX + touches[1].dataX), | |
e446c952 | 446 | dataY: 0.5 * (touches[0].dataY + touches[1].dataY) |
6125fedf DV |
447 | }; |
448 | ||
449 | // Make pinches in a 45-degree swath around either axis 1-dimensional zooms. | |
450 | var initialAngle = 180 / Math.PI * Math.atan2( | |
451 | context.initialPinchCenter.pageY - touches[0].pageY, | |
452 | touches[0].pageX - context.initialPinchCenter.pageX); | |
453 | ||
454 | // use symmetry to get it into the first quadrant. | |
455 | initialAngle = Math.abs(initialAngle); | |
456 | if (initialAngle > 90) initialAngle = 90 - initialAngle; | |
457 | ||
458 | context.touchDirections = { | |
459 | x: (initialAngle < (90 - 45/2)), | |
460 | y: (initialAngle > 45/2) | |
461 | }; | |
462 | } | |
463 | ||
464 | // save the full x & y ranges. | |
465 | context.initialRange = { | |
466 | x: g.xAxisRange(), | |
467 | y: g.yAxisRange() | |
468 | }; | |
469 | }; | |
470 | ||
471 | /** | |
472 | * @private | |
473 | */ | |
474 | Dygraph.Interaction.moveTouch = function(event, g, context) { | |
b19d7411 DV |
475 | // If the tap moves, then it's definitely not part of a double-tap. |
476 | context.startTimeForDoubleTapMs = null; | |
477 | ||
e446c952 DV |
478 | var i, touches = []; |
479 | for (i = 0; i < event.touches.length; i++) { | |
6125fedf DV |
480 | var t = event.touches[i]; |
481 | touches.push({ | |
482 | pageX: t.pageX, | |
e446c952 | 483 | pageY: t.pageY |
6125fedf DV |
484 | }); |
485 | } | |
486 | var initialTouches = context.initialTouches; | |
487 | ||
488 | var c_now; | |
489 | ||
490 | // old and new centers. | |
491 | var c_init = context.initialPinchCenter; | |
492 | if (touches.length == 1) { | |
493 | c_now = touches[0]; | |
494 | } else { | |
495 | c_now = { | |
496 | pageX: 0.5 * (touches[0].pageX + touches[1].pageX), | |
497 | pageY: 0.5 * (touches[0].pageY + touches[1].pageY) | |
498 | }; | |
499 | } | |
500 | ||
501 | // this is the "swipe" component | |
502 | // we toss it out for now, but could use it in the future. | |
503 | var swipe = { | |
504 | pageX: c_now.pageX - c_init.pageX, | |
e446c952 | 505 | pageY: c_now.pageY - c_init.pageY |
6125fedf DV |
506 | }; |
507 | var dataWidth = context.initialRange.x[1] - context.initialRange.x[0]; | |
508 | var dataHeight = context.initialRange.y[0] - context.initialRange.y[1]; | |
509 | swipe.dataX = (swipe.pageX / g.plotter_.area.w) * dataWidth; | |
510 | swipe.dataY = (swipe.pageY / g.plotter_.area.h) * dataHeight; | |
511 | var xScale, yScale; | |
512 | ||
513 | // The residual bits are usually split into scale & rotate bits, but we split | |
514 | // them into x-scale and y-scale bits. | |
515 | if (touches.length == 1) { | |
516 | xScale = 1.0; | |
517 | yScale = 1.0; | |
48cdd6c4 | 518 | } else if (touches.length >= 2) { |
6125fedf DV |
519 | var initHalfWidth = (initialTouches[1].pageX - c_init.pageX); |
520 | xScale = (touches[1].pageX - c_now.pageX) / initHalfWidth; | |
521 | ||
522 | var initHalfHeight = (initialTouches[1].pageY - c_init.pageY); | |
523 | yScale = (touches[1].pageY - c_now.pageY) / initHalfHeight; | |
524 | } | |
525 | ||
526 | // Clip scaling to [1/8, 8] to prevent too much blowup. | |
527 | xScale = Math.min(8, Math.max(0.125, xScale)); | |
528 | yScale = Math.min(8, Math.max(0.125, yScale)); | |
529 | ||
b38afae5 | 530 | var didZoom = false; |
6125fedf DV |
531 | if (context.touchDirections.x) { |
532 | g.dateWindow_ = [ | |
533 | c_init.dataX - swipe.dataX + (context.initialRange.x[0] - c_init.dataX) / xScale, | |
e446c952 | 534 | c_init.dataX - swipe.dataX + (context.initialRange.x[1] - c_init.dataX) / xScale |
6125fedf | 535 | ]; |
b38afae5 | 536 | didZoom = true; |
6125fedf DV |
537 | } |
538 | ||
539 | if (context.touchDirections.y) { | |
e446c952 | 540 | for (i = 0; i < 1 /*g.axes_.length*/; i++) { |
6125fedf | 541 | var axis = g.axes_[i]; |
1ca77443 RK |
542 | var logscale = g.attributes_.getForAxis("logscale", i); |
543 | if (logscale) { | |
6125fedf DV |
544 | // TODO(danvk): implement |
545 | } else { | |
546 | axis.valueWindow = [ | |
547 | c_init.dataY - swipe.dataY + (context.initialRange.y[0] - c_init.dataY) / yScale, | |
e446c952 | 548 | c_init.dataY - swipe.dataY + (context.initialRange.y[1] - c_init.dataY) / yScale |
6125fedf | 549 | ]; |
b38afae5 | 550 | didZoom = true; |
6125fedf DV |
551 | } |
552 | } | |
553 | } | |
554 | ||
555 | g.drawGraph_(false); | |
b38afae5 DV |
556 | |
557 | // We only call zoomCallback on zooms, not pans, to mirror desktop behavior. | |
b0963cdb | 558 | if (didZoom && touches.length > 1 && g.getFunctionOption('zoomCallback')) { |
b38afae5 | 559 | var viewWindow = g.xAxisRange(); |
4ee251cb | 560 | g.getFunctionOption("zoomCallback").call(g, viewWindow[0], viewWindow[1], g.yAxisRanges()); |
b38afae5 | 561 | } |
6125fedf DV |
562 | }; |
563 | ||
564 | /** | |
565 | * @private | |
566 | */ | |
567 | Dygraph.Interaction.endTouch = function(event, g, context) { | |
42a9ebb8 | 568 | if (event.touches.length !== 0) { |
6125fedf DV |
569 | // this is effectively a "reset" |
570 | Dygraph.Interaction.startTouch(event, g, context); | |
b19d7411 DV |
571 | } else if (event.changedTouches.length == 1) { |
572 | // Could be part of a "double tap" | |
573 | // The heuristic here is that it's a double-tap if the two touchend events | |
574 | // occur within 500ms and within a 50x50 pixel box. | |
575 | var now = new Date().getTime(); | |
576 | var t = event.changedTouches[0]; | |
577 | if (context.startTimeForDoubleTapMs && | |
578 | now - context.startTimeForDoubleTapMs < 500 && | |
579 | context.doubleTapX && Math.abs(context.doubleTapX - t.screenX) < 50 && | |
580 | context.doubleTapY && Math.abs(context.doubleTapY - t.screenY) < 50) { | |
581 | g.resetZoom(); | |
582 | } else { | |
583 | context.startTimeForDoubleTapMs = now; | |
584 | context.doubleTapX = t.screenX; | |
585 | context.doubleTapY = t.screenY; | |
586 | } | |
6125fedf DV |
587 | } |
588 | }; | |
589 | ||
3f50dabb DV |
590 | // Determine the distance from x to [left, right]. |
591 | var distanceFromInterval = function(x, left, right) { | |
592 | if (x < left) { | |
593 | return left - x; | |
594 | } else if (x > right) { | |
595 | return x - right; | |
596 | } else { | |
597 | return 0; | |
598 | } | |
599 | }; | |
600 | ||
601 | /** | |
602 | * Returns the number of pixels by which the event happens from the nearest | |
603 | * edge of the chart. For events in the interior of the chart, this returns zero. | |
604 | */ | |
605 | var distanceFromChart = function(event, g) { | |
606 | var chartPos = Dygraph.findPos(g.canvas_); | |
607 | var box = { | |
608 | left: chartPos.x, | |
609 | right: chartPos.x + g.canvas_.offsetWidth, | |
610 | top: chartPos.y, | |
611 | bottom: chartPos.y + g.canvas_.offsetHeight | |
612 | }; | |
613 | ||
614 | var pt = { | |
615 | x: Dygraph.pageX(event), | |
616 | y: Dygraph.pageY(event) | |
617 | }; | |
618 | ||
619 | var dx = distanceFromInterval(pt.x, box.left, box.right), | |
620 | dy = distanceFromInterval(pt.y, box.top, box.bottom); | |
621 | return Math.max(dx, dy); | |
622 | }; | |
623 | ||
6125fedf | 624 | /** |
846f3d2d DV |
625 | * Default interation model for dygraphs. You can refer to specific elements of |
626 | * this when constructing your own interaction model, e.g.: | |
627 | * g.updateOptions( { | |
628 | * interactionModel: { | |
629 | * mousedown: Dygraph.defaultInteractionModel.mousedown | |
630 | * } | |
631 | * } ); | |
632 | */ | |
633 | Dygraph.Interaction.defaultModel = { | |
634 | // Track the beginning of drag events | |
635 | mousedown: function(event, g, context) { | |
e992d194 DV |
636 | // Right-click should not initiate a zoom. |
637 | if (event.button && event.button == 2) return; | |
638 | ||
846f3d2d DV |
639 | context.initializeMouseDown(event, g, context); |
640 | ||
641 | if (event.altKey || event.shiftKey) { | |
642 | Dygraph.startPan(event, g, context); | |
643 | } else { | |
644 | Dygraph.startZoom(event, g, context); | |
645 | } | |
846f3d2d | 646 | |
3f50dabb DV |
647 | // Note: we register mousemove/mouseup on document to allow some leeway for |
648 | // events to move outside of the chart. Interaction model events get | |
649 | // registered on the canvas, which is too small to allow this. | |
650 | var mousemove = function(event) { | |
651 | if (context.isZooming) { | |
652 | // When the mouse moves >200px from the chart edge, cancel the zoom. | |
653 | var d = distanceFromChart(event, g); | |
5e1abda5 | 654 | if (d < DRAG_EDGE_MARGIN) { |
3f50dabb DV |
655 | Dygraph.moveZoom(event, g, context); |
656 | } else { | |
657 | if (context.dragEndX !== null) { | |
658 | context.dragEndX = null; | |
659 | context.dragEndY = null; | |
660 | g.clearZoomRect_(); | |
661 | } | |
662 | } | |
663 | } else if (context.isPanning) { | |
664 | Dygraph.movePan(event, g, context); | |
665 | } | |
666 | }; | |
667 | var mouseup = function(event) { | |
668 | if (context.isZooming) { | |
669 | if (context.dragEndX !== null) { | |
670 | Dygraph.endZoom(event, g, context); | |
671 | } else { | |
672 | Dygraph.Interaction.maybeTreatMouseOpAsClick(event, g, context); | |
673 | } | |
674 | } else if (context.isPanning) { | |
675 | Dygraph.endPan(event, g, context); | |
676 | } | |
846f3d2d | 677 | |
3f50dabb DV |
678 | Dygraph.removeEvent(document, 'mousemove', mousemove); |
679 | Dygraph.removeEvent(document, 'mouseup', mouseup); | |
680 | context.destroy(); | |
681 | }; | |
682 | ||
683 | g.addAndTrackEvent(document, 'mousemove', mousemove); | |
684 | g.addAndTrackEvent(document, 'mouseup', mouseup); | |
846f3d2d | 685 | }, |
3f50dabb | 686 | willDestroyContextMyself: true, |
846f3d2d | 687 | |
6125fedf DV |
688 | touchstart: function(event, g, context) { |
689 | Dygraph.Interaction.startTouch(event, g, context); | |
690 | }, | |
691 | touchmove: function(event, g, context) { | |
692 | Dygraph.Interaction.moveTouch(event, g, context); | |
693 | }, | |
694 | touchend: function(event, g, context) { | |
695 | Dygraph.Interaction.endTouch(event, g, context); | |
696 | }, | |
697 | ||
846f3d2d DV |
698 | // Disable zooming out if panning. |
699 | dblclick: function(event, g, context) { | |
421f1773 DV |
700 | if (context.cancelNextDblclick) { |
701 | context.cancelNextDblclick = false; | |
702 | return; | |
703 | } | |
6f5f0b2b DV |
704 | |
705 | // Give plugins a chance to grab this event. | |
706 | var e = { | |
707 | canvasx: context.dragEndX, | |
708 | canvasy: context.dragEndY | |
709 | }; | |
710 | if (g.cascadeEvents_('dblclick', e)) { | |
711 | return; | |
712 | } | |
713 | ||
846f3d2d DV |
714 | if (event.altKey || event.shiftKey) { |
715 | return; | |
716 | } | |
e4f6e11a | 717 | g.resetZoom(); |
846f3d2d DV |
718 | } |
719 | }; | |
720 | ||
721 | Dygraph.DEFAULT_ATTRS.interactionModel = Dygraph.Interaction.defaultModel; | |
722 | ||
723 | // old ways of accessing these methods/properties | |
724 | Dygraph.defaultInteractionModel = Dygraph.Interaction.defaultModel; | |
725 | Dygraph.endZoom = Dygraph.Interaction.endZoom; | |
726 | Dygraph.moveZoom = Dygraph.Interaction.moveZoom; | |
727 | Dygraph.startZoom = Dygraph.Interaction.startZoom; | |
728 | Dygraph.endPan = Dygraph.Interaction.endPan; | |
729 | Dygraph.movePan = Dygraph.Interaction.movePan; | |
730 | Dygraph.startPan = Dygraph.Interaction.startPan; | |
731 | ||
0290d079 | 732 | Dygraph.Interaction.nonInteractiveModel_ = { |
027e9e9b DV |
733 | mousedown: function(event, g, context) { |
734 | context.initializeMouseDown(event, g, context); | |
735 | }, | |
3f50dabb | 736 | mouseup: Dygraph.Interaction.maybeTreatMouseOpAsClick |
027e9e9b | 737 | }; |
3417f017 DV |
738 | |
739 | // Default interaction model when using the range selector. | |
740 | Dygraph.Interaction.dragIsPanInteractionModel = { | |
741 | mousedown: function(event, g, context) { | |
742 | context.initializeMouseDown(event, g, context); | |
743 | Dygraph.startPan(event, g, context); | |
744 | }, | |
745 | mousemove: function(event, g, context) { | |
746 | if (context.isPanning) { | |
747 | Dygraph.movePan(event, g, context); | |
748 | } | |
749 | }, | |
750 | mouseup: function(event, g, context) { | |
751 | if (context.isPanning) { | |
752 | Dygraph.endPan(event, g, context); | |
753 | } | |
754 | } | |
755 | }; | |
3f50dabb DV |
756 | |
757 | })(); |