Fix delta calculation at direction change (#494)

Author: kurkle

src/core.js

@@ -1,4 +1,4 @@
-import {each, callback as call} from 'chart.js/helpers';
+import {each, callback as call, sign} from 'chart.js/helpers';
 import {panFunctions, updateRange, zoomFunctions} from './scale.types';
 import {getState} from './state';
 import {directionEnabled, getEnabledScalesByPoint} from './utils';
@@ -117,7 +117,10 @@ export function resetZoom(chart, transition = 'default') {
 function panScale(scale, delta, limits) {
   const {panDelta} = getState(scale.chart);
   // Add possible cumulative delta from previous pan attempts where scale did not change
-  delta += panDelta[scale.id] || 0;
+  const storedDelta = panDelta[scale.id] || 0;
+  if (sign(storedDelta) === sign(delta)) {
+    delta += storedDelta;
+  }
   const fn = panFunctions[scale.type] || panFunctions.default;
   if (call(fn, [scale, delta, limits])) {
     // The scale changed, reset cumulative delta

src/scale.types.js

@@ -82,7 +82,7 @@ function panCategoryScale(scale, delta, limits) {
   const range = Math.max(max - min, 1);
   // How many pixels of delta is required before making a step. stepSize, but limited to max 1/10 of the scale length.
   const stepDelta = Math.round(scaleLength(scale) / Math.max(range, 10));
-  const stepSize = Math.ceil(Math.abs(delta / stepDelta));
+  const stepSize = Math.round(Math.abs(delta / stepDelta));
   let applied;
   if (delta < -stepDelta) {
     max = Math.min(max + stepSize, lastLabelIndex);

test/fixtures/pan/category-x-5.png

@@ -2,6 +2,7 @@ describe('pan', function() {
   describe('auto', jasmine.fixture.specs('pan'));
 
   const data = {
+    labels: ['a', 'b', 'c', 'd', 'e'],
     datasets: [{
       data: [{
         x: 1,
@@ -16,6 +17,83 @@ describe('pan', function() {
     }]
   };
 
+  describe('delta', function() {
+    it('should be applied cumulatively', function() {
+      const chart = window.acquireChart({
+        type: 'line',
+        data,
+        options: {
+          plugins: {
+            zoom: {
+              pan: {
+                enabled: true,
+                mode: 'x',
+              }
+            }
+          },
+          scales: {
+            x: {
+              min: 1,
+              max: 2
+            }
+          }
+        }
+      });
+      const scale = chart.scales.x;
+      expect(scale.min).toBe(1);
+      expect(scale.max).toBe(2);
+      chart.pan(20);
+      expect(scale.min).toBe(1);
+      expect(scale.max).toBe(2);
+      chart.pan(20);
+      expect(scale.min).toBe(1);
+      expect(scale.max).toBe(2);
+      chart.pan(20);
+      expect(scale.min).toBe(0);
+      expect(scale.max).toBe(1);
+    });
+
+    it('should not give credit', function() {
+      const chart = window.acquireChart({
+        type: 'scatter',
+        data,
+        options: {
+          plugins: {
+            zoom: {
+              limits: {
+                x: {
+                  max: 4
+                }
+              },
+              pan: {
+                enabled: true,
+                mode: 'x',
+              }
+            }
+          },
+          scales: {
+            x: {
+              min: 1,
+              max: 3
+            }
+          }
+        }
+      });
+      const scale = chart.scales.x;
+      expect(scale.min).toBe(1);
+      expect(scale.max).toBe(3);
+      chart.pan(-2000);
+      expect(scale.min).toBe(2);
+      expect(scale.max).toBe(4);
+      chart.pan(-2000);
+      expect(scale.min).toBe(2);
+      expect(scale.max).toBe(4);
+      chart.pan(50);
+      expect(scale.min).toBeLessThan(2);
+      expect(scale.max).toBe(scale.min + 2);
+    });
+  });
+
   describe('events', function() {
     it('should call onPanStart', function(done) {
       const startSpy = jasmine.createSpy('started');