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
37 Dygraph
.Interaction
.startPan
= function(event
, g
, context
) {
39 context
.isPanning
= true;
40 var xRange
= g
.xAxisRange();
41 context
.dateRange
= xRange
[1] - xRange
[0];
42 context
.initialLeftmostDate
= xRange
[0];
43 context
.xUnitsPerPixel
= context
.dateRange
/ (g
.plotter_
.area
.w
- 1);
45 if (g
.attr_("panEdgeFraction")) {
46 var maxXPixelsToDraw
= g
.width_
* g
.attr_("panEdgeFraction");
47 var xExtremes
= g
.xAxisExtremes(); // I REALLY WANT TO CALL THIS xTremes!
49 var boundedLeftX
= g
.toDomXCoord(xExtremes
[0]) - maxXPixelsToDraw
;
50 var boundedRightX
= g
.toDomXCoord(xExtremes
[1]) + maxXPixelsToDraw
;
52 var boundedLeftDate
= g
.toDataXCoord(boundedLeftX
);
53 var boundedRightDate
= g
.toDataXCoord(boundedRightX
);
54 context
.boundedDates
= [boundedLeftDate
, boundedRightDate
];
56 var boundedValues
= [];
57 var maxYPixelsToDraw
= g
.height_
* g
.attr_("panEdgeFraction");
59 for (i
= 0; i
< g
.axes_
.length
; i
++) {
61 var yExtremes
= axis
.extremeRange
;
63 var boundedTopY
= g
.toDomYCoord(yExtremes
[0], i
) + maxYPixelsToDraw
;
64 var boundedBottomY
= g
.toDomYCoord(yExtremes
[1], i
) - maxYPixelsToDraw
;
66 var boundedTopValue
= g
.toDataYCoord(boundedTopY
);
67 var boundedBottomValue
= g
.toDataYCoord(boundedBottomY
);
69 boundedValues
[i
] = [boundedTopValue
, boundedBottomValue
];
71 context
.boundedValues
= boundedValues
;
74 // Record the range of each y-axis at the start of the drag.
75 // If any axis has a valueRange or valueWindow, then we want a 2D pan.
76 // We can't store data directly in g.axes_, because it does not belong to us
77 // and could change out from under us during a pan (say if there's a data
79 context
.is2DPan
= false;
81 for (i
= 0; i
< g
.axes_
.length
; i
++) {
84 var yRange
= g
.yAxisRange(i
);
85 // TODO(konigsberg): These values should be in |context|.
86 // In log scale, initialTopValue, dragValueRange and unitsPerPixel are log scale.
87 var logscale
= g
.attributes_
.getForAxis("logscale", i
);
89 axis_data
.initialTopValue
= Dygraph
.log10(yRange
[1]);
90 axis_data
.dragValueRange
= Dygraph
.log10(yRange
[1]) - Dygraph
.log10(yRange
[0]);
92 axis_data
.initialTopValue
= yRange
[1];
93 axis_data
.dragValueRange
= yRange
[1] - yRange
[0];
95 axis_data
.unitsPerPixel
= axis_data
.dragValueRange
/ (g
.plotter_
.area
.h
- 1);
96 context
.axes
.push(axis_data
);
98 // While calculating axes, set 2dpan.
99 if (axis
.valueWindow
|| axis
.valueRange
) context
.is2DPan
= true;
104 * Called in response to an interaction model operation that
105 * responds to an event that pans the view.
107 * It's used in the default callback for "mousemove" operations.
108 * Custom interaction model builders can use it to provide the default
111 * @param {Event} event the event object which led to the movePan call.
112 * @param {Dygraph} g The dygraph on which to act.
113 * @param {Object} context The dragging context object (with
114 * dragStartX/dragStartY/etc. properties). This function modifies the
117 Dygraph
.Interaction
.movePan
= function(event
, g
, context
) {
118 context
.dragEndX
= g
.dragGetX_(event
, context
);
119 context
.dragEndY
= g
.dragGetY_(event
, context
);
121 var minDate
= context
.initialLeftmostDate
-
122 (context
.dragEndX
- context
.dragStartX
) * context
.xUnitsPerPixel
;
123 if (context
.boundedDates
) {
124 minDate
= Math
.max(minDate
, context
.boundedDates
[0]);
126 var maxDate
= minDate
+ context
.dateRange
;
127 if (context
.boundedDates
) {
128 if (maxDate
> context
.boundedDates
[1]) {
129 // Adjust minDate, and recompute maxDate.
130 minDate
= minDate
- (maxDate
- context
.boundedDates
[1]);
131 maxDate
= minDate
+ context
.dateRange
;
135 g
.dateWindow_
= [minDate
, maxDate
];
137 // y-axis scaling is automatic unless this is a full 2D pan.
138 if (context
.is2DPan
) {
139 // Adjust each axis appropriately.
140 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
141 var axis
= g
.axes_
[i
];
142 var axis_data
= context
.axes
[i
];
144 var pixelsDragged
= context
.dragEndY
- context
.dragStartY
;
145 var unitsDragged
= pixelsDragged
* axis_data
.unitsPerPixel
;
147 var boundedValue
= context
.boundedValues
? context
.boundedValues
[i
] : null;
149 // In log scale, maxValue and minValue are the logs of those values.
150 var maxValue
= axis_data
.initialTopValue
+ unitsDragged
;
152 maxValue
= Math
.min(maxValue
, boundedValue
[1]);
154 var minValue
= maxValue
- axis_data
.dragValueRange
;
156 if (minValue
< boundedValue
[0]) {
157 // Adjust maxValue, and recompute minValue.
158 maxValue
= maxValue
- (minValue
- boundedValue
[0]);
159 minValue
= maxValue
- axis_data
.dragValueRange
;
162 var logscale
= g
.attributes_
.getForAxis("logscale", i
);
164 axis
.valueWindow
= [ Math
.pow(Dygraph
.LOG_SCALE
, minValue
),
165 Math
.pow(Dygraph
.LOG_SCALE
, maxValue
) ];
167 axis
.valueWindow
= [ minValue
, maxValue
];
176 * Called in response to an interaction model operation that
177 * responds to an event that ends panning.
179 * It's used in the default callback for "mouseup" operations.
180 * Custom interaction model builders can use it to provide the default
183 * @param {Event} event the event object which led to the endPan call.
184 * @param {Dygraph} g The dygraph on which to act.
185 * @param {Object} context The dragging context object (with
186 * dragStartX/dragStartY/etc. properties). This function modifies the
189 Dygraph
.Interaction
.endPan
= function(event
, g
, context
) {
190 context
.dragEndX
= g
.dragGetX_(event
, context
);
191 context
.dragEndY
= g
.dragGetY_(event
, context
);
193 var regionWidth
= Math
.abs(context
.dragEndX
- context
.dragStartX
);
194 var regionHeight
= Math
.abs(context
.dragEndY
- context
.dragStartY
);
196 if (regionWidth
< 2 && regionHeight
< 2 &&
197 g
.lastx_
!== undefined
&& g
.lastx_
!= -1) {
198 Dygraph
.Interaction
.treatMouseOpAsClick(g
, event
, context
);
201 // TODO(konigsberg): mouseup should just delete the
202 // context object, and mousedown should create a new one.
203 context
.isPanning
= false;
204 context
.is2DPan
= false;
205 context
.initialLeftmostDate
= null;
206 context
.dateRange
= null;
207 context
.valueRange
= null;
208 context
.boundedDates
= null;
209 context
.boundedValues
= null;
214 * Called in response to an interaction model operation that
215 * responds to an event that starts zooming.
217 * It's used in the default callback for "mousedown" operations.
218 * Custom interaction model builders can use it to provide the default
221 * @param {Event} event the event object which led to the startZoom call.
222 * @param {Dygraph} g The dygraph on which to act.
223 * @param {Object} context The dragging context object (with
224 * dragStartX/dragStartY/etc. properties). This function modifies the
227 Dygraph
.Interaction
.startZoom
= function(event
, g
, context
) {
228 context
.isZooming
= true;
229 context
.zoomMoved
= false;
233 * Called in response to an interaction model operation that
234 * responds to an event that defines zoom boundaries.
236 * It's used in the default callback for "mousemove" operations.
237 * Custom interaction model builders can use it to provide the default
240 * @param {Event} event the event object which led to the moveZoom call.
241 * @param {Dygraph} g The dygraph on which to act.
242 * @param {Object} context The dragging context object (with
243 * dragStartX/dragStartY/etc. properties). This function modifies the
246 Dygraph
.Interaction
.moveZoom
= function(event
, g
, context
) {
247 context
.zoomMoved
= true;
248 context
.dragEndX
= g
.dragGetX_(event
, context
);
249 context
.dragEndY
= g
.dragGetY_(event
, context
);
251 var xDelta
= Math
.abs(context
.dragStartX
- context
.dragEndX
);
252 var yDelta
= Math
.abs(context
.dragStartY
- context
.dragEndY
);
254 // drag direction threshold for y axis is twice as large as x axis
255 context
.dragDirection
= (xDelta
< yDelta
/ 2) ? Dygraph
.VERTICAL
: Dygraph
.HORIZONTAL
;
258 context
.dragDirection
,
263 context
.prevDragDirection
,
267 context
.prevEndX
= context
.dragEndX
;
268 context
.prevEndY
= context
.dragEndY
;
269 context
.prevDragDirection
= context
.dragDirection
;
274 * @param {Event} event
275 * @param {Object} context
277 Dygraph
.Interaction
.treatMouseOpAsClick
= function(g
, event
, context
) {
278 var clickCallback
= g
.attr_('clickCallback');
279 var pointClickCallback
= g
.attr_('pointClickCallback');
281 var selectedPoint
= null;
283 // Find out if the click occurs on a point. This only matters if there's a
284 // pointClickCallback.
285 if (pointClickCallback
) {
287 var closestDistance
= Number
.MAX_VALUE
;
289 // check if the click was on a particular point.
290 for (var i
= 0; i
< g
.selPoints_
.length
; i
++) {
291 var p
= g
.selPoints_
[i
];
292 var distance
= Math
.pow(p
.canvasx
- context
.dragEndX
, 2) +
293 Math
.pow(p
.canvasy
- context
.dragEndY
, 2);
294 if (!isNaN(distance
) &&
295 (closestIdx
== -1 || distance
< closestDistance
)) {
296 closestDistance
= distance
;
301 // Allow any click within two pixels of the dot.
302 var radius
= g
.attr_('highlightCircleSize') + 2;
303 if (closestDistance
<= radius
* radius
) {
304 selectedPoint
= g
.selPoints_
[closestIdx
];
309 pointClickCallback(event
, selectedPoint
);
312 // TODO(danvk): pass along more info about the points, e.g. 'x'
314 clickCallback(event
, g
.lastx_
, g
.selPoints_
);
319 * Called in response to an interaction model operation that
320 * responds to an event that performs a zoom based on previously defined
323 * It's used in the default callback for "mouseup" operations.
324 * Custom interaction model builders can use it to provide the default
327 * @param {Event} event the event object which led to the endZoom call.
328 * @param {Dygraph} g The dygraph on which to end the zoom.
329 * @param {Object} context The dragging context object (with
330 * dragStartX/dragStartY/etc. properties). This function modifies the
333 Dygraph
.Interaction
.endZoom
= function(event
, g
, context
) {
334 context
.isZooming
= false;
335 context
.dragEndX
= g
.dragGetX_(event
, context
);
336 context
.dragEndY
= g
.dragGetY_(event
, context
);
337 var regionWidth
= Math
.abs(context
.dragEndX
- context
.dragStartX
);
338 var regionHeight
= Math
.abs(context
.dragEndY
- context
.dragStartY
);
340 if (regionWidth
< 2 && regionHeight
< 2 &&
341 g
.lastx_
!== undefined
&& g
.lastx_
!= -1) {
342 Dygraph
.Interaction
.treatMouseOpAsClick(g
, event
, context
);
345 // The zoom rectangle is visibly clipped to the plot area, so its behavior
346 // should be as well.
347 // See http://code.google.com/p/dygraphs/issues/detail
?id
=280
348 var plotArea
= g
.getArea();
349 if (regionWidth
>= 10 && context
.dragDirection
== Dygraph
.HORIZONTAL
) {
350 var left
= Math
.min(context
.dragStartX
, context
.dragEndX
),
351 right
= Math
.max(context
.dragStartX
, context
.dragEndX
);
352 left
= Math
.max(left
, plotArea
.x
);
353 right
= Math
.min(right
, plotArea
.x
+ plotArea
.w
);
355 g
.doZoomX_(left
, right
);
357 context
.cancelNextDblclick
= true;
358 } else if (regionHeight
>= 10 && context
.dragDirection
== Dygraph
.VERTICAL
) {
359 var top
= Math
.min(context
.dragStartY
, context
.dragEndY
),
360 bottom
= Math
.max(context
.dragStartY
, context
.dragEndY
);
361 top
= Math
.max(top
, plotArea
.y
);
362 bottom
= Math
.min(bottom
, plotArea
.y
+ plotArea
.h
);
364 g
.doZoomY_(top
, bottom
);
366 context
.cancelNextDblclick
= true;
368 if (context
.zoomMoved
) g
.clearZoomRect_();
370 context
.dragStartX
= null;
371 context
.dragStartY
= null;
377 Dygraph
.Interaction
.startTouch
= function(event
, g
, context
) {
378 event
.preventDefault(); // touch browsers are all nice.
379 if (event
.touches
.length
> 1) {
380 // If the user ever puts two fingers down, it's not a double tap.
381 context
.startTimeForDoubleTapMs
= null;
385 for (var i
= 0; i
< event
.touches
.length
; i
++) {
386 var t
= event
.touches
[i
];
387 // we dispense with 'dragGetX_' because all touchBrowsers support pageX
391 dataX
: g
.toDataXCoord(t
.pageX
),
392 dataY
: g
.toDataYCoord(t
.pageY
)
393 // identifier: t.identifier
396 context
.initialTouches
= touches
;
398 if (touches
.length
== 1) {
399 // This is just a swipe.
400 context
.initialPinchCenter
= touches
[0];
401 context
.touchDirections
= { x
: true, y
: true };
402 } else if (touches
.length
>= 2) {
403 // It's become a pinch!
404 // In case there are 3+ touches, we ignore all but the "first" two.
406 // only screen coordinates can be averaged (data coords could be log scale).
407 context
.initialPinchCenter
= {
408 pageX
: 0.5 * (touches
[0].pageX
+ touches
[1].pageX
),
409 pageY
: 0.5 * (touches
[0].pageY
+ touches
[1].pageY
),
411 // TODO(danvk): remove
412 dataX
: 0.5 * (touches
[0].dataX
+ touches
[1].dataX
),
413 dataY
: 0.5 * (touches
[0].dataY
+ touches
[1].dataY
)
416 // Make pinches in a 45-degree swath around either axis 1-dimensional zooms.
417 var initialAngle
= 180 / Math
.PI
* Math
.atan2(
418 context
.initialPinchCenter
.pageY
- touches
[0].pageY
,
419 touches
[0].pageX
- context
.initialPinchCenter
.pageX
);
421 // use symmetry to get it into the first quadrant.
422 initialAngle
= Math
.abs(initialAngle
);
423 if (initialAngle
> 90) initialAngle
= 90 - initialAngle
;
425 context
.touchDirections
= {
426 x
: (initialAngle
< (90 - 45/2)),
427 y
: (initialAngle
> 45/2)
431 // save the full x & y ranges.
432 context
.initialRange
= {
441 Dygraph
.Interaction
.moveTouch
= function(event
, g
, context
) {
442 // If the tap moves, then it's definitely not part of a double-tap.
443 context
.startTimeForDoubleTapMs
= null;
446 for (i
= 0; i
< event
.touches
.length
; i
++) {
447 var t
= event
.touches
[i
];
453 var initialTouches
= context
.initialTouches
;
457 // old and new centers.
458 var c_init
= context
.initialPinchCenter
;
459 if (touches
.length
== 1) {
463 pageX
: 0.5 * (touches
[0].pageX
+ touches
[1].pageX
),
464 pageY
: 0.5 * (touches
[0].pageY
+ touches
[1].pageY
)
468 // this is the "swipe" component
469 // we toss it out for now, but could use it in the future.
471 pageX
: c_now
.pageX
- c_init
.pageX
,
472 pageY
: c_now
.pageY
- c_init
.pageY
474 var dataWidth
= context
.initialRange
.x
[1] - context
.initialRange
.x
[0];
475 var dataHeight
= context
.initialRange
.y
[0] - context
.initialRange
.y
[1];
476 swipe
.dataX
= (swipe
.pageX
/ g
.plotter_
.area
.w
) * dataWidth
;
477 swipe
.dataY
= (swipe
.pageY
/ g
.plotter_
.area
.h
) * dataHeight
;
480 // The residual bits are usually split into scale & rotate bits, but we split
481 // them into x-scale and y-scale bits.
482 if (touches
.length
== 1) {
485 } else if (touches
.length
>= 2) {
486 var initHalfWidth
= (initialTouches
[1].pageX
- c_init
.pageX
);
487 xScale
= (touches
[1].pageX
- c_now
.pageX
) / initHalfWidth
;
489 var initHalfHeight
= (initialTouches
[1].pageY
- c_init
.pageY
);
490 yScale
= (touches
[1].pageY
- c_now
.pageY
) / initHalfHeight
;
493 // Clip scaling to [1/8, 8] to prevent too much blowup
.
494 xScale
= Math
.min(8, Math
.max(0.125, xScale
));
495 yScale
= Math
.min(8, Math
.max(0.125, yScale
));
498 if (context
.touchDirections
.x
) {
500 c_init
.dataX
- swipe
.dataX
+ (context
.initialRange
.x
[0] - c_init
.dataX
) / xScale
,
501 c_init
.dataX
- swipe
.dataX
+ (context
.initialRange
.x
[1] - c_init
.dataX
) / xScale
506 if (context
.touchDirections
.y
) {
507 for (i
= 0; i
< 1 /*g.axes_.length*/; i
++) {
508 var axis
= g
.axes_
[i
];
509 var logscale
= g
.attributes_
.getForAxis("logscale", i
);
511 // TODO(danvk): implement
514 c_init
.dataY
- swipe
.dataY
+ (context
.initialRange
.y
[0] - c_init
.dataY
) / yScale
,
515 c_init
.dataY
- swipe
.dataY
+ (context
.initialRange
.y
[1] - c_init
.dataY
) / yScale
524 // We only call zoomCallback on zooms, not pans, to mirror desktop behavior.
525 if (didZoom
&& touches
.length
> 1 && g
.attr_('zoomCallback')) {
526 var viewWindow
= g
.xAxisRange();
527 g
.attr_("zoomCallback")(viewWindow
[0], viewWindow
[1], g
.yAxisRanges());
534 Dygraph
.Interaction
.endTouch
= function(event
, g
, context
) {
535 if (event
.touches
.length
!== 0) {
536 // this is effectively a "reset"
537 Dygraph
.Interaction
.startTouch(event
, g
, context
);
538 } else if (event
.changedTouches
.length
== 1) {
539 // Could be part of a "double tap"
540 // The heuristic here is that it's a double-tap if the two touchend events
541 // occur within 500ms and within a 50x50 pixel box.
542 var now
= new Date().getTime();
543 var t
= event
.changedTouches
[0];
544 if (context
.startTimeForDoubleTapMs
&&
545 now
- context
.startTimeForDoubleTapMs
< 500 &&
546 context
.doubleTapX
&& Math
.abs(context
.doubleTapX
- t
.screenX
) < 50 &&
547 context
.doubleTapY
&& Math
.abs(context
.doubleTapY
- t
.screenY
) < 50) {
550 context
.startTimeForDoubleTapMs
= now
;
551 context
.doubleTapX
= t
.screenX
;
552 context
.doubleTapY
= t
.screenY
;
558 * Default interation model for dygraphs. You can refer to specific elements of
559 * this when constructing your own interaction model, e.g.:
561 * interactionModel: {
562 * mousedown: Dygraph.defaultInteractionModel.mousedown
566 Dygraph
.Interaction
.defaultModel
= {
567 // Track the beginning of drag events
568 mousedown
: function(event
, g
, context
) {
569 // Right-click should not initiate a zoom.
570 if (event
.button
&& event
.button
== 2) return;
572 context
.initializeMouseDown(event
, g
, context
);
574 if (event
.altKey
|| event
.shiftKey
) {
575 Dygraph
.startPan(event
, g
, context
);
577 Dygraph
.startZoom(event
, g
, context
);
581 // Draw zoom rectangles when the mouse is down and the user moves around
582 mousemove
: function(event
, g
, context
) {
583 if (context
.isZooming
) {
584 Dygraph
.moveZoom(event
, g
, context
);
585 } else if (context
.isPanning
) {
586 Dygraph
.movePan(event
, g
, context
);
590 mouseup
: function(event
, g
, context
) {
591 if (context
.isZooming
) {
592 Dygraph
.endZoom(event
, g
, context
);
593 } else if (context
.isPanning
) {
594 Dygraph
.endPan(event
, g
, context
);
598 touchstart
: function(event
, g
, context
) {
599 Dygraph
.Interaction
.startTouch(event
, g
, context
);
601 touchmove
: function(event
, g
, context
) {
602 Dygraph
.Interaction
.moveTouch(event
, g
, context
);
604 touchend
: function(event
, g
, context
) {
605 Dygraph
.Interaction
.endTouch(event
, g
, context
);
608 // Temporarily cancel the dragging event when the mouse leaves the graph
609 mouseout
: function(event
, g
, context
) {
610 if (context
.isZooming
) {
611 context
.dragEndX
= null;
612 context
.dragEndY
= null;
617 // Disable zooming out if panning.
618 dblclick
: function(event
, g
, context
) {
619 if (context
.cancelNextDblclick
) {
620 context
.cancelNextDblclick
= false;
623 if (event
.altKey
|| event
.shiftKey
) {
630 Dygraph
.DEFAULT_ATTRS
.interactionModel
= Dygraph
.Interaction
.defaultModel
;
632 // old ways of accessing these methods/properties
633 Dygraph
.defaultInteractionModel
= Dygraph
.Interaction
.defaultModel
;
634 Dygraph
.endZoom
= Dygraph
.Interaction
.endZoom
;
635 Dygraph
.moveZoom
= Dygraph
.Interaction
.moveZoom
;
636 Dygraph
.startZoom
= Dygraph
.Interaction
.startZoom
;
637 Dygraph
.endPan
= Dygraph
.Interaction
.endPan
;
638 Dygraph
.movePan
= Dygraph
.Interaction
.movePan
;
639 Dygraph
.startPan
= Dygraph
.Interaction
.startPan
;
641 Dygraph
.Interaction
.nonInteractiveModel_
= {
642 mousedown
: function(event
, g
, context
) {
643 context
.initializeMouseDown(event
, g
, context
);
645 mouseup
: function(event
, g
, context
) {
646 // TODO(danvk): this logic is repeated in Dygraph.Interaction.endZoom
647 context
.dragEndX
= g
.dragGetX_(event
, context
);
648 context
.dragEndY
= g
.dragGetY_(event
, context
);
649 var regionWidth
= Math
.abs(context
.dragEndX
- context
.dragStartX
);
650 var regionHeight
= Math
.abs(context
.dragEndY
- context
.dragStartY
);
652 if (regionWidth
< 2 && regionHeight
< 2 &&
653 g
.lastx_
!== undefined
&& g
.lastx_
!= -1) {
654 Dygraph
.Interaction
.treatMouseOpAsClick(g
, event
, context
);
659 // Default interaction model when using the range selector.
660 Dygraph
.Interaction
.dragIsPanInteractionModel
= {
661 mousedown
: function(event
, g
, context
) {
662 context
.initializeMouseDown(event
, g
, context
);
663 Dygraph
.startPan(event
, g
, context
);
665 mousemove
: function(event
, g
, context
) {
666 if (context
.isPanning
) {
667 Dygraph
.movePan(event
, g
, context
);
670 mouseup
: function(event
, g
, context
) {
671 if (context
.isPanning
) {
672 Dygraph
.endPan(event
, g
, context
);