Fix calling of onZoomComplete from wheel event (#485)

* Fix calling of onZoomComplete from wheel event

* CC

* Add test

* CC2

* Remove some unused code

Author: kurkle

src/handlers.js

@@ -99,8 +99,8 @@ export function mouseUp(chart, event) {
 }
 
 export function wheel(chart, event) {
-  const {options: {zoom: zoomOptions}} = getState(chart);
-  const {wheelModifierKey, onZoomRejected, onZoomComplete} = zoomOptions;
+  const {handlers: {onZoomComplete}, options: {zoom: zoomOptions}} = getState(chart);
+  const {wheelModifierKey, onZoomRejected} = zoomOptions;
 
   // Before preventDefault, check if the modifier key required and pressed
   if (wheelModifierKey && !event[wheelModifierKey + 'Key']) {
@@ -114,7 +114,7 @@ export function wheel(chart, event) {
 
   // Firefox always fires the wheel event twice:
   // First without the delta and right after that once with the delta properties.
-  if (typeof event.deltaY === 'undefined') {
+  if (event.deltaY === undefined) {
     return;
   }
 
@@ -132,20 +132,26 @@ export function wheel(chart, event) {
   zoom(chart, amount);
 
   if (onZoomComplete) {
-    debounce(() => call(onZoomComplete, [{chart}]), 250);
+    onZoomComplete();
+  }
+}
+
+function addDebouncedHandler(chart, name, handler, delay) {
+  if (handler) {
+    getState(chart).handlers[name] = debounce(() => call(handler, [{chart}]), delay);
   }
 }
 
 export function addListeners(chart, options) {
   const canvas = chart.canvas;
+  const {enabled: zoomEnabled, drag: dragEnabled, onZoomComplete} = options.zoom;
 
   // Install listeners. Do this dynamically based on options so that we can turn zoom on and off
   // We also want to make sure listeners aren't always on. E.g. if you're scrolling down a page
   // and the mouse goes over a chart you don't want it intercepted unless the plugin is enabled
-  const zoomEnabled = options.zoom && options.zoom.enabled;
-  const dragEnabled = options.zoom.drag;
   if (zoomEnabled && !dragEnabled) {
     addHandler(chart, canvas, 'wheel', wheel);
+    addDebouncedHandler(chart, 'onZoomComplete', onZoomComplete, 250);
   } else {
     removeHandler(chart, canvas, 'wheel');
   }

src/utils.js

@@ -27,12 +27,8 @@ export function directionEnabled(mode, dir, chart) {
 export function debounce(fn, delay) {
   let timeout;
   return function() {
-    if (delay) {
-      clearTimeout(timeout);
-      timeout = setTimeout(fn, delay);
-    } else {
-      fn();
-    }
+    clearTimeout(timeout);
+    timeout = setTimeout(fn, delay);
     return delay;
   };
 }

test/specs/zoom.spec.js

@@ -396,4 +396,30 @@ describe('zoom', function() {
       });
     });
   });
+
+  describe('onZoomComplete', function() {
+    it('should be called', function(done) {
+      const chart = window.acquireChart({
+        type: 'scatter',
+        data,
+        options: {
+          plugins: {
+            zoom: {
+              zoom: {
+                enabled: true,
+                mode: 'xy',
+                onZoomComplete: done
+              }
+            }
+          }
+        }
+      });
+      const wheelEv = {
+        x: chart.scales.x.getPixelForValue(1.5),
+        y: chart.scales.y.getPixelForValue(1.1),
+        deltaY: 1
+      };
+      jasmine.triggerWheelEvent(chart, wheelEv);
+    });
+  });
 });