3 * Copyright 2011 Robert Konigsberg (konigsberg@google.com)
4 * MIT-licensed (http://opensource.org/licenses/MIT)
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)
13 /*jshint globalstrict: true */
14 /*global Dygraph:false */
18 * A collection of functions to facilitate build custom interaction models.
21 Dygraph
.Interaction
= {};
24 * Called in response to an interaction model operation that
25 * should start the default panning behavior.
27 * It's used in the default callback for "mousedown" operations.
28 * Custom interaction model builders can use it to provide the default
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 context.
36 Dygraph
.Interaction
.startPan
= function(event
, g
, context
) {
38 context
.isPanning
= true;
39 var xRange
= g
.xAxisRange();
40 context
.dateRange
= xRange
[1] - xRange
[0];
41 context
.initialLeftmostDate
= xRange
[0];
42 context
.xUnitsPerPixel
= context
.dateRange
/ (g
.plotter_
.area
.w
- 1);
44 if (g
.attr_("panEdgeFraction")) {
45 var maxXPixelsToDraw
= g
.width_
* g
.attr_("panEdgeFraction");
46 var xExtremes
= g
.xAxisExtremes(); // I REALLY WANT TO CALL THIS xTremes!
48 var boundedLeftX
= g
.toDomXCoord(xExtremes
[0]) - maxXPixelsToDraw
;
49 var boundedRightX
= g
.toDomXCoord(xExtremes
[1]) + maxXPixelsToDraw
;
51 var boundedLeftDate
= g
.toDataXCoord(boundedLeftX
);
52 var boundedRightDate
= g
.toDataXCoord(boundedRightX
);
53 context
.boundedDates
= [boundedLeftDate
, boundedRightDate
];
55 var boundedValues
= [];
56 var maxYPixelsToDraw
= g
.height_
* g
.attr_("panEdgeFraction");
58 for (i
= 0; i
< g
.axes_
.length
; i
++) {
60 var yExtremes
= axis
.extremeRange
;
62 var boundedTopY
= g
.toDomYCoord(yExtremes
[0], i
) + maxYPixelsToDraw
;
63 var boundedBottomY
= g
.toDomYCoord(yExtremes
[1], i
) - maxYPixelsToDraw
;
65 var boundedTopValue
= g
.toDataYCoord(boundedTopY
);
66 var boundedBottomValue
= g
.toDataYCoord(boundedBottomY
);
68 boundedValues
[i
] = [boundedTopValue
, boundedBottomValue
];
70 context
.boundedValues
= boundedValues
;
73 // Record the range of each y-axis at the start of the drag.
74 // If any axis has a valueRange or valueWindow, then we want a 2D pan.
75 // We can't store data directly in g.axes_, because it does not belong to us
76 // and could change out from under us during a pan (say if there's a data
78 context
.is2DPan
= false;
80 for (i
= 0; i
< g
.axes_
.length
; i
++) {
83 var yRange
= g
.yAxisRange(i
);
84 // TODO(konigsberg): These values should be in |context|.
85 // In log scale, initialTopValue, dragValueRange and unitsPerPixel are log scale.
87 axis_data
.initialTopValue
= Dygraph
.log10(yRange
[1]);
88 axis_data
.dragValueRange
= Dygraph
.log10(yRange
[1]) - Dygraph
.log10(yRange
[0]);
90 axis_data
.initialTopValue
= yRange
[1];
91 axis_data
.dragValueRange
= yRange
[1] - yRange
[0];
93 axis_data
.unitsPerPixel
= axis_data
.dragValueRange
/ (g
.plotter_
.area
.h
- 1);
94 context
.axes
.push(axis_data
);
96 // While calculating axes, set 2dpan.
97 if (axis
.valueWindow
|| axis
.valueRange
) context
.is2DPan
= true;
102 * Called in response to an interaction model operation that
103 * responds to an event that pans the view.
105 * It's used in the default callback for "mousemove" operations.
106 * Custom interaction model builders can use it to provide the default
109 * @param { Event } event the event object which led to the movePan call.
110 * @param { Dygraph} g The dygraph on which to act.
111 * @param { Object} context The dragging context object (with
112 * dragStartX/dragStartY/etc. properties). This function modifies the context.
114 Dygraph
.Interaction
.movePan
= function(event
, g
, context
) {
115 context
.dragEndX
= g
.dragGetX_(event
, context
);
116 context
.dragEndY
= g
.dragGetY_(event
, context
);
118 var minDate
= context
.initialLeftmostDate
-
119 (context
.dragEndX
- context
.dragStartX
) * context
.xUnitsPerPixel
;
120 if (context
.boundedDates
) {
121 minDate
= Math
.max(minDate
, context
.boundedDates
[0]);
123 var maxDate
= minDate
+ context
.dateRange
;
124 if (context
.boundedDates
) {
125 if (maxDate
> context
.boundedDates
[1]) {
126 // Adjust minDate, and recompute maxDate.
127 minDate
= minDate
- (maxDate
- context
.boundedDates
[1]);
128 maxDate
= minDate
+ context
.dateRange
;
132 g
.dateWindow_
= [minDate
, maxDate
];
134 // y-axis scaling is automatic unless this is a full 2D pan.
135 if (context
.is2DPan
) {
136 // Adjust each axis appropriately.
137 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
138 var axis
= g
.axes_
[i
];
139 var axis_data
= context
.axes
[i
];
141 var pixelsDragged
= context
.dragEndY
- context
.dragStartY
;
142 var unitsDragged
= pixelsDragged
* axis_data
.unitsPerPixel
;
144 var boundedValue
= context
.boundedValues
? context
.boundedValues
[i
] : null;
146 // In log scale, maxValue and minValue are the logs of those values.
147 var maxValue
= axis_data
.initialTopValue
+ unitsDragged
;
149 maxValue
= Math
.min(maxValue
, boundedValue
[1]);
151 var minValue
= maxValue
- axis_data
.dragValueRange
;
153 if (minValue
< boundedValue
[0]) {
154 // Adjust maxValue, and recompute minValue.
155 maxValue
= maxValue
- (minValue
- boundedValue
[0]);
156 minValue
= maxValue
- axis_data
.dragValueRange
;
160 axis
.valueWindow
= [ Math
.pow(Dygraph
.LOG_SCALE
, minValue
),
161 Math
.pow(Dygraph
.LOG_SCALE
, maxValue
) ];
163 axis
.valueWindow
= [ minValue
, maxValue
];
172 * Called in response to an interaction model operation that
173 * responds to an event that ends panning.
175 * It's used in the default callback for "mouseup" operations.
176 * Custom interaction model builders can use it to provide the default
179 * @param { Event } event the event object which led to the endPan call.
180 * @param { Dygraph} g The dygraph on which to act.
181 * @param { Object} context The dragging context object (with
182 * dragStartX/dragStartY/etc. properties). This function modifies the context.
184 Dygraph
.Interaction
.endPan
= function(event
, g
, context
) {
185 context
.dragEndX
= g
.dragGetX_(event
, context
);
186 context
.dragEndY
= g
.dragGetY_(event
, context
);
188 var regionWidth
= Math
.abs(context
.dragEndX
- context
.dragStartX
);
189 var regionHeight
= Math
.abs(context
.dragEndY
- context
.dragStartY
);
191 if (regionWidth
< 2 && regionHeight
< 2 &&
192 g
.lastx_
!== undefined
&& g
.lastx_
!= -1) {
193 Dygraph
.Interaction
.treatMouseOpAsClick(g
, event
, context
);
196 // TODO(konigsberg): mouseup should just delete the
197 // context object, and mousedown should create a new one.
198 context
.isPanning
= false;
199 context
.is2DPan
= false;
200 context
.initialLeftmostDate
= null;
201 context
.dateRange
= null;
202 context
.valueRange
= null;
203 context
.boundedDates
= null;
204 context
.boundedValues
= null;
209 * Called in response to an interaction model operation that
210 * responds to an event that starts zooming.
212 * It's used in the default callback for "mousedown" operations.
213 * Custom interaction model builders can use it to provide the default
216 * @param { Event } event the event object which led to the startZoom call.
217 * @param { Dygraph} g The dygraph on which to act.
218 * @param { Object} context The dragging context object (with
219 * dragStartX/dragStartY/etc. properties). This function modifies the context.
221 Dygraph
.Interaction
.startZoom
= function(event
, g
, context
) {
222 context
.isZooming
= true;
223 context
.zoomMoved
= false;
227 * Called in response to an interaction model operation that
228 * responds to an event that defines zoom boundaries.
230 * It's used in the default callback for "mousemove" operations.
231 * Custom interaction model builders can use it to provide the default
234 * @param { Event } event the event object which led to the moveZoom call.
235 * @param { Dygraph} g The dygraph on which to act.
236 * @param { Object} context The dragging context object (with
237 * dragStartX/dragStartY/etc. properties). This function modifies the context.
239 Dygraph
.Interaction
.moveZoom
= function(event
, g
, context
) {
240 context
.zoomMoved
= true;
241 context
.dragEndX
= g
.dragGetX_(event
, context
);
242 context
.dragEndY
= g
.dragGetY_(event
, context
);
244 var xDelta
= Math
.abs(context
.dragStartX
- context
.dragEndX
);
245 var yDelta
= Math
.abs(context
.dragStartY
- context
.dragEndY
);
247 // drag direction threshold for y axis is twice as large as x axis
248 context
.dragDirection
= (xDelta
< yDelta
/ 2) ? Dygraph
.VERTICAL
: Dygraph
.HORIZONTAL
;
251 context
.dragDirection
,
256 context
.prevDragDirection
,
260 context
.prevEndX
= context
.dragEndX
;
261 context
.prevEndY
= context
.dragEndY
;
262 context
.prevDragDirection
= context
.dragDirection
;
265 Dygraph
.Interaction
.treatMouseOpAsClick
= function(g
, event
, context
) {
266 var clickCallback
= g
.attr_('clickCallback');
267 var pointClickCallback
= g
.attr_('pointClickCallback');
269 var selectedPoint
= null;
271 // Find out if the click occurs on a point. This only matters if there's a pointClickCallback.
272 if (pointClickCallback
) {
274 var closestDistance
= Number
.MAX_VALUE
;
276 // check if the click was on a particular point.
277 for (var i
= 0; i
< g
.selPoints_
.length
; i
++) {
278 var p
= g
.selPoints_
[i
];
279 var distance
= Math
.pow(p
.canvasx
- context
.dragEndX
, 2) +
280 Math
.pow(p
.canvasy
- context
.dragEndY
, 2);
281 if (!isNaN(distance
) &&
282 (closestIdx
== -1 || distance
< closestDistance
)) {
283 closestDistance
= distance
;
288 // Allow any click within two pixels of the dot.
289 var radius
= g
.attr_('highlightCircleSize') + 2;
290 if (closestDistance
<= radius
* radius
) {
291 selectedPoint
= g
.selPoints_
[closestIdx
];
296 pointClickCallback(event
, selectedPoint
);
299 // TODO(danvk): pass along more info about the points, e.g. 'x'
301 clickCallback(event
, g
.lastx_
, g
.selPoints_
);
306 * Called in response to an interaction model operation that
307 * responds to an event that performs a zoom based on previously defined
310 * It's used in the default callback for "mouseup" operations.
311 * Custom interaction model builders can use it to provide the default
314 * @param { Event } event the event object which led to the endZoom call.
315 * @param { Dygraph} g The dygraph on which to end the zoom.
316 * @param { Object} context The dragging context object (with
317 * dragStartX/dragStartY/etc. properties). This function modifies the context.
319 Dygraph
.Interaction
.endZoom
= function(event
, g
, context
) {
320 context
.isZooming
= false;
321 context
.dragEndX
= g
.dragGetX_(event
, context
);
322 context
.dragEndY
= g
.dragGetY_(event
, context
);
323 var regionWidth
= Math
.abs(context
.dragEndX
- context
.dragStartX
);
324 var regionHeight
= Math
.abs(context
.dragEndY
- context
.dragStartY
);
326 if (regionWidth
< 2 && regionHeight
< 2 &&
327 g
.lastx_
!== undefined
&& g
.lastx_
!= -1) {
328 Dygraph
.Interaction
.treatMouseOpAsClick(g
, event
, context
);
331 if (regionWidth
>= 10 && context
.dragDirection
== Dygraph
.HORIZONTAL
) {
332 g
.doZoomX_(Math
.min(context
.dragStartX
, context
.dragEndX
),
333 Math
.max(context
.dragStartX
, context
.dragEndX
));
334 context
.cancelNextDblclick
= true;
335 } else if (regionHeight
>= 10 && context
.dragDirection
== Dygraph
.VERTICAL
) {
336 g
.doZoomY_(Math
.min(context
.dragStartY
, context
.dragEndY
),
337 Math
.max(context
.dragStartY
, context
.dragEndY
));
338 context
.cancelNextDblclick
= true;
340 if (context
.zoomMoved
) g
.clearZoomRect_();
342 context
.dragStartX
= null;
343 context
.dragStartY
= null;
349 Dygraph
.Interaction
.startTouch
= function(event
, g
, context
) {
350 event
.preventDefault(); // touch browsers are all nice.
352 for (var i
= 0; i
< event
.touches
.length
; i
++) {
353 var t
= event
.touches
[i
];
354 // we dispense with 'dragGetX_' because all touchBrowsers support pageX
358 dataX
: g
.toDataXCoord(t
.pageX
),
359 dataY
: g
.toDataYCoord(t
.pageY
)
360 // identifier: t.identifier
363 context
.initialTouches
= touches
;
365 if (touches
.length
== 1) {
366 // This is just a swipe.
367 context
.initialPinchCenter
= touches
[0];
368 context
.touchDirections
= { x
: true, y
: true };
369 } else if (touches
.length
== 2) {
370 // It's become a pinch!
372 // only screen coordinates can be averaged (data coords could be log scale).
373 context
.initialPinchCenter
= {
374 pageX
: 0.5 * (touches
[0].pageX
+ touches
[1].pageX
),
375 pageY
: 0.5 * (touches
[0].pageY
+ touches
[1].pageY
),
377 // TODO(danvk): remove
378 dataX
: 0.5 * (touches
[0].dataX
+ touches
[1].dataX
),
379 dataY
: 0.5 * (touches
[0].dataY
+ touches
[1].dataY
)
382 // Make pinches in a 45-degree swath around either axis 1-dimensional zooms.
383 var initialAngle
= 180 / Math
.PI
* Math
.atan2(
384 context
.initialPinchCenter
.pageY
- touches
[0].pageY
,
385 touches
[0].pageX
- context
.initialPinchCenter
.pageX
);
387 // use symmetry to get it into the first quadrant.
388 initialAngle
= Math
.abs(initialAngle
);
389 if (initialAngle
> 90) initialAngle
= 90 - initialAngle
;
391 context
.touchDirections
= {
392 x
: (initialAngle
< (90 - 45/2)),
393 y
: (initialAngle
> 45/2)
397 // save the full x & y ranges.
398 context
.initialRange
= {
407 Dygraph
.Interaction
.moveTouch
= function(event
, g
, context
) {
409 for (i
= 0; i
< event
.touches
.length
; i
++) {
410 var t
= event
.touches
[i
];
416 var initialTouches
= context
.initialTouches
;
420 // old and new centers.
421 var c_init
= context
.initialPinchCenter
;
422 if (touches
.length
== 1) {
426 pageX
: 0.5 * (touches
[0].pageX
+ touches
[1].pageX
),
427 pageY
: 0.5 * (touches
[0].pageY
+ touches
[1].pageY
)
431 // this is the "swipe" component
432 // we toss it out for now, but could use it in the future.
434 pageX
: c_now
.pageX
- c_init
.pageX
,
435 pageY
: c_now
.pageY
- c_init
.pageY
437 var dataWidth
= context
.initialRange
.x
[1] - context
.initialRange
.x
[0];
438 var dataHeight
= context
.initialRange
.y
[0] - context
.initialRange
.y
[1];
439 swipe
.dataX
= (swipe
.pageX
/ g
.plotter_
.area
.w
) * dataWidth
;
440 swipe
.dataY
= (swipe
.pageY
/ g
.plotter_
.area
.h
) * dataHeight
;
443 // The residual bits are usually split into scale & rotate bits, but we split
444 // them into x-scale and y-scale bits.
445 if (touches
.length
== 1) {
448 } else if (touches
.length
== 2) {
449 var initHalfWidth
= (initialTouches
[1].pageX
- c_init
.pageX
);
450 xScale
= (touches
[1].pageX
- c_now
.pageX
) / initHalfWidth
;
452 var initHalfHeight
= (initialTouches
[1].pageY
- c_init
.pageY
);
453 yScale
= (touches
[1].pageY
- c_now
.pageY
) / initHalfHeight
;
456 // Clip scaling to [1/8, 8] to prevent too much blowup
.
457 xScale
= Math
.min(8, Math
.max(0.125, xScale
));
458 yScale
= Math
.min(8, Math
.max(0.125, yScale
));
460 if (context
.touchDirections
.x
) {
462 c_init
.dataX
- swipe
.dataX
+ (context
.initialRange
.x
[0] - c_init
.dataX
) / xScale
,
463 c_init
.dataX
- swipe
.dataX
+ (context
.initialRange
.x
[1] - c_init
.dataX
) / xScale
467 if (context
.touchDirections
.y
) {
468 for (i
= 0; i
< 1 /*g.axes_.length*/; i
++) {
469 var axis
= g
.axes_
[i
];
471 // TODO(danvk): implement
474 c_init
.dataY
- swipe
.dataY
+ (context
.initialRange
.y
[0] - c_init
.dataY
) / yScale
,
475 c_init
.dataY
- swipe
.dataY
+ (context
.initialRange
.y
[1] - c_init
.dataY
) / yScale
487 Dygraph
.Interaction
.endTouch
= function(event
, g
, context
) {
488 if (event
.touches
.length
!== 0) {
489 // this is effectively a "reset"
490 Dygraph
.Interaction
.startTouch(event
, g
, context
);
495 * Default interation model for dygraphs. You can refer to specific elements of
496 * this when constructing your own interaction model, e.g.:
498 * interactionModel: {
499 * mousedown: Dygraph.defaultInteractionModel.mousedown
503 Dygraph
.Interaction
.defaultModel
= {
504 // Track the beginning of drag events
505 mousedown
: function(event
, g
, context
) {
506 // Right-click should not initiate a zoom.
507 if (event
.button
&& event
.button
== 2) return;
509 context
.initializeMouseDown(event
, g
, context
);
511 if (event
.altKey
|| event
.shiftKey
) {
512 Dygraph
.startPan(event
, g
, context
);
514 Dygraph
.startZoom(event
, g
, context
);
518 // Draw zoom rectangles when the mouse is down and the user moves around
519 mousemove
: function(event
, g
, context
) {
520 if (context
.isZooming
) {
521 Dygraph
.moveZoom(event
, g
, context
);
522 } else if (context
.isPanning
) {
523 Dygraph
.movePan(event
, g
, context
);
527 mouseup
: function(event
, g
, context
) {
528 if (context
.isZooming
) {
529 Dygraph
.endZoom(event
, g
, context
);
530 } else if (context
.isPanning
) {
531 Dygraph
.endPan(event
, g
, context
);
535 touchstart
: function(event
, g
, context
) {
536 Dygraph
.Interaction
.startTouch(event
, g
, context
);
538 touchmove
: function(event
, g
, context
) {
539 Dygraph
.Interaction
.moveTouch(event
, g
, context
);
541 touchend
: function(event
, g
, context
) {
542 Dygraph
.Interaction
.endTouch(event
, g
, context
);
545 // Temporarily cancel the dragging event when the mouse leaves the graph
546 mouseout
: function(event
, g
, context
) {
547 if (context
.isZooming
) {
548 context
.dragEndX
= null;
549 context
.dragEndY
= null;
553 // Disable zooming out if panning.
554 dblclick
: function(event
, g
, context
) {
555 if (context
.cancelNextDblclick
) {
556 context
.cancelNextDblclick
= false;
559 if (event
.altKey
|| event
.shiftKey
) {
562 // TODO(konigsberg): replace g.doUnzoom()_ with something that is
563 // friendlier to public use.
568 Dygraph
.DEFAULT_ATTRS
.interactionModel
= Dygraph
.Interaction
.defaultModel
;
570 // old ways of accessing these methods/properties
571 Dygraph
.defaultInteractionModel
= Dygraph
.Interaction
.defaultModel
;
572 Dygraph
.endZoom
= Dygraph
.Interaction
.endZoom
;
573 Dygraph
.moveZoom
= Dygraph
.Interaction
.moveZoom
;
574 Dygraph
.startZoom
= Dygraph
.Interaction
.startZoom
;
575 Dygraph
.endPan
= Dygraph
.Interaction
.endPan
;
576 Dygraph
.movePan
= Dygraph
.Interaction
.movePan
;
577 Dygraph
.startPan
= Dygraph
.Interaction
.startPan
;
579 Dygraph
.Interaction
.nonInteractiveModel_
= {
580 mousedown
: function(event
, g
, context
) {
581 context
.initializeMouseDown(event
, g
, context
);
583 mouseup
: function(event
, g
, context
) {
584 // TODO(danvk): this logic is repeated in Dygraph.Interaction.endZoom
585 context
.dragEndX
= g
.dragGetX_(event
, context
);
586 context
.dragEndY
= g
.dragGetY_(event
, context
);
587 var regionWidth
= Math
.abs(context
.dragEndX
- context
.dragStartX
);
588 var regionHeight
= Math
.abs(context
.dragEndY
- context
.dragStartY
);
590 if (regionWidth
< 2 && regionHeight
< 2 &&
591 g
.lastx_
!== undefined
&& g
.lastx_
!= -1) {
592 Dygraph
.Interaction
.treatMouseOpAsClick(g
, event
, context
);
597 // Default interaction model when using the range selector.
598 Dygraph
.Interaction
.dragIsPanInteractionModel
= {
599 mousedown
: function(event
, g
, context
) {
600 context
.initializeMouseDown(event
, g
, context
);
601 Dygraph
.startPan(event
, g
, context
);
603 mousemove
: function(event
, g
, context
) {
604 if (context
.isPanning
) {
605 Dygraph
.movePan(event
, g
, context
);
608 mouseup
: function(event
, g
, context
) {
609 if (context
.isPanning
) {
610 Dygraph
.endPan(event
, g
, context
);