Add a animationDuration option to configure the duration of the drag animation (#282)

Add a animationDuration option for drag

Author: jledentu

README.md

@@ -65,11 +65,12 @@ plugins: {
 			// Enable drag-to-zoom behavior
 			drag: true,
 
-			// Drag-to-zoom rectangle style can be customized
+			// Drag-to-zoom effect can be customized
 			// drag: {
 			// 	 borderColor: 'rgba(225,225,225,0.3)'
 			// 	 borderWidth: 5,
-			// 	 backgroundColor: 'rgb(225,225,225)'
+			// 	 backgroundColor: 'rgb(225,225,225)',
+			//   animationDuration: 0
 			// },
 
 			// Zooming directions. Remove the appropriate direction to disable

samples/zoom-time.html

@@ -26,6 +26,9 @@
 	<script>
 		var timeFormat = 'MM/DD/YYYY HH:mm';
 		var now = window.moment();
+		var dragOptions = {
+			animationDuration: 1000
+		};
 
 		function randomScalingFactor() {
 			return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
@@ -110,7 +113,7 @@
 					zoom: {
 						zoom: {
 							enabled: true,
-							drag: true,
+							drag: dragOptions,
 							mode: 'x',
 							speed: 0.05
 						}
@@ -134,7 +137,8 @@
 		window.toggleDragMode = function() {
 			var chart = window.myLine;
 			var zoomOptions = chart.options.plugins.zoom.zoom;
-			zoomOptions.drag = !zoomOptions.drag;
+			zoomOptions.drag = zoomOptions.drag ? false : dragOptions;
+
 			chart.update();
 			document.getElementById('drag-switch').innerText = zoomOptions.drag ? 'Disable drag mode' : 'Enable drag mode';
 		};

src/plugin.js

@@ -191,8 +191,9 @@ function zoomScale(scale, zoom, center, zoomOptions) {
  * @param {number} percentZoomY The zoom percentage in the y direction
  * @param {{x: number, y: number}} focalPoint The x and y coordinates of zoom focal point. The point which doesn't change while zooming. E.g. the location of the mouse cursor when "drag: false"
  * @param {string} whichAxes `xy`, 'x', or 'y'
+ * @param {number} animationDuration Duration of the animation of the redraw in milliseconds
  */
-function doZoom(chart, percentZoomX, percentZoomY, focalPoint, whichAxes) {
+function doZoom(chart, percentZoomX, percentZoomY, focalPoint, whichAxes, animationDuration) {
 	var ca = chart.chartArea;
 	if (!focalPoint) {
 		focalPoint = {
@@ -229,7 +230,14 @@ function doZoom(chart, percentZoomX, percentZoomY, focalPoint, whichAxes) {
 			}
 		});
 
-		chart.update(0);
+		if (animationDuration) {
+			chart.update({
+				duration: animationDuration,
+				easing: 'easeOutQuad',
+			});
+		} else {
+			chart.update(0);
+		}
 
 		if (typeof zoomOptions.onZoom === 'function') {
 			zoomOptions.onZoom({chart: chart});
@@ -489,7 +497,7 @@ var zoomPlugin = {
 			doZoom(chartInstance, zoomX, zoomY, {
 				x: (startX - chartArea.left) / (1 - dragDistanceX / chartDistanceX) + chartArea.left,
 				y: (startY - chartArea.top) / (1 - dragDistanceY / chartDistanceY) + chartArea.top
-			});
+			}, undefined, zoomOptions.drag.animationDuration);
 
 			if (typeof zoomOptions.onZoomComplete === 'function') {
 				zoomOptions.onZoomComplete({chart: chartInstance});