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