Fix category panning (#476)

* Update category panning

* Restore hammer-simulator for one test

Author: kurkle

docs/guide/options.md

@@ -36,7 +36,6 @@ const chart = new Chart('id', {
 | `mode` | `'x'`\|`'y'`\|`'xy'` | `'xy'` | Allowed panning directions
 | `modifierKey` | `'ctrl'`\|`'alt'`\|`'shift'`\|`'meta'` | `null` |  Modifier key required for panning with mouse
 | `overScaleMode` | `'x'`\|`'y'`\|`'xy'` | `undefined` | Which of the enabled panning directions should only be available when the mouse cursor is over a scale for that axis
-| `speed` | `number` | `20` | Factor for pan velocity on **category scale**
 | `threshold` | `number` | `10` | Mimimal pan distance required before actually applying pan
 
 ### Pan Events

package-lock.json

@@ -47,7 +47,7 @@
     "eslint-plugin-es": "^4.1.0",
     "eslint-plugin-html": "^6.1.2",
     "eslint-plugin-markdown": "^2.0.1",
-    "hammer-simulator": "0.0.1",
+    "hammer-simulator": "^0.0.1",
     "jasmine": "^3.7.0",
     "karma": "^6.3.2",
     "karma-chrome-launcher": "^3.1.0",

package.json

@@ -76,12 +76,12 @@ export function resetZoom(chart) {
   chart.update();
 }
 
-function panScale(scale, delta, panOptions, limits) {
+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 fn = panFunctions[scale.type] || panFunctions.default;
-  if (call(fn, [scale, delta, panOptions, limits])) {
+  if (call(fn, [scale, delta, limits])) {
     // The scale changed, reset cumulative delta
     panDelta[scale.id] = 0;
   } else {
@@ -102,9 +102,9 @@ export function doPan(chart, pan, enabledScales) {
 
   each(enabledScales || chart.scales, function(scale) {
     if (scale.isHorizontal() && xEnabled) {
-      panScale(scale, x, panOptions, limits);
+      panScale(scale, x, limits);
     } else if (!scale.isHorizontal() && yEnabled) {
-      panScale(scale, y, panOptions, limits);
+      panScale(scale, y, limits);
     }
   });
 

src/core.js

@@ -15,7 +15,6 @@ export default {
     pan: {
       enabled: false,
       mode: 'xy',
-      speed: 20,
       threshold: 10,
       modifierKey: null,
     },

src/plugin.js

@@ -66,23 +66,31 @@ function zoomCategoryScale(scale, zoom, center, limits) {
   return updateRange(scale, newRange, limits, true);
 }
 
-const categoryDelta = new WeakMap();
-function panCategoryScale(scale, delta, panOptions, limits) {
+function scaleLength(scale) {
+  return scale.isHorizontal() ? scale.width : scale.height;
+}
+
+function panCategoryScale(scale, delta, limits) {
   const labels = scale.getLabels();
   const lastLabelIndex = labels.length - 1;
-  const offsetAmt = Math.max(scale.ticks.length, 1);
-  const panSpeed = panOptions.speed;
-  const step = Math.round(scale.width / (offsetAmt * panSpeed));
-  const cumDelta = (categoryDelta.get(scale) || 0) + delta;
-  const scaleMin = scale.min;
-  const minIndex = cumDelta > step ? Math.max(0, scaleMin - 1)
-    : cumDelta < -step ? Math.min(lastLabelIndex - offsetAmt + 1, scaleMin + 1)
-    : scaleMin;
-  const maxIndex = Math.min(lastLabelIndex, minIndex + offsetAmt - 1);
-
-  categoryDelta.set(scale, minIndex !== scaleMin ? 0 : cumDelta);
+  let {min, max} = scale;
+  // The visible range. Ticks can be skipped, and thus not reliable.
+  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));
+  let applied;
+  if (delta < -stepDelta) {
+    max = Math.min(max + stepSize, lastLabelIndex);
+    min = range === 1 ? max : max - range;
+    applied = max === lastLabelIndex;
+  } else if (delta > stepDelta) {
+    min = Math.max(0, min - stepSize);
+    max = range === 1 ? min : min + range;
+    applied = min === 0;
+  }
 
-  return updateRange(scale, {min: minIndex, max: maxIndex}, limits);
+  return updateRange(scale, {min, max}, limits) || applied;
 }
 
 const OFFSETS = {
@@ -96,7 +104,7 @@ const OFFSETS = {
   year: 182 * 24 * 60 * 60 * 1000 // 182 d
 };
 
-function panNumericalScale(scale, delta, panOptions, limits) {
+function panNumericalScale(scale, delta, limits) {
   const {min: prevStart, max: prevEnd, options} = scale;
   const round = options.time && options.time.round;
   const offset = OFFSETS[round] || 0;

src/scale.types.js

@@ -0,0 +1,68 @@
+const labels = [];
+const data = [];
+for (let i = 1; i <= 100; i++) {
+  labels.push('Label ' + i);
+  data.push(Math.sin(i / 100 * Math.PI) * 10);
+}
+
+const canvas = document.createElement('canvas');
+canvas.width = 512;
+canvas.height = 512;
+const ctx = canvas.getContext('2d');
+
+module.exports = {
+  tolerance: 0.02,
+  config: {
+    type: 'bar',
+    data: {
+      labels,
+      datasets: [{
+        data,
+        barPercentage: 1,
+        categoryPercentage: 1,
+        backgroundColor: c => `rgba(${255 - c.index * 4}, 0, 0, 1)`
+      }]
+    },
+    options: {
+      events: [],
+      scales: {
+        x: {
+          display: false,
+          min: 'Label 1',
+          max: 'Label 1'
+        },
+        y: {display: false, max: 10}
+      },
+      plugins: {
+        legend: false,
+        tooltip: false,
+        zoom: {
+          pan: {
+            enabled: true,
+            mode: 'x',
+          }
+        }
+      },
+      layout: {
+        padding: 2
+      }
+    }
+  },
+  options: {
+    spriteText: true,
+    run(chart) {
+      const steps = 16;
+      const n = Math.sqrt(steps);
+      const side = 512 / n;
+      for (let i = 0; i < steps; i++) {
+        const col = i % n;
+        const row = Math.floor(i / n);
+        chart.pan({x: -100});
+        chart.update();
+        ctx.drawImage(chart.canvas, col * side, row * side, side, side);
+      }
+      Chart.helpers.clearCanvas(chart.canvas);
+      chart.ctx.drawImage(canvas, 0, 0);
+    }
+  }
+};

test/fixtures/pan/category-x-1.js

@@ -0,0 +1,68 @@
+const labels = [];
+const data = [];
+for (let i = 1; i <= 100; i++) {
+  labels.push('Label ' + i);
+  data.push(Math.sin(i / 100 * Math.PI) * 10);
+}
+
+const canvas = document.createElement('canvas');
+canvas.width = 512;
+canvas.height = 512;
+const ctx = canvas.getContext('2d');
+
+module.exports = {
+  tolerance: 0.02,
+  config: {
+    type: 'bar',
+    data: {
+      labels,
+      datasets: [{
+        data,
+        barPercentage: 1,
+        categoryPercentage: 1,
+        backgroundColor: c => c.index < 50 ? 'blue' : 'red'
+      }]
+    },
+    options: {
+      events: [],
+      scales: {
+        x: {
+          display: false,
+          min: 'Label 1',
+          max: 'Label 10',
+        },
+        y: {display: false, max: 10}
+      },
+      plugins: {
+        legend: false,
+        tooltip: false,
+        zoom: {
+          pan: {
+            enabled: true,
+            mode: 'x',
+          }
+        }
+      },
+      layout: {
+        padding: 2
+      }
+    }
+  },
+  options: {
+    spriteText: true,
+    run(chart) {
+      const steps = 16;
+      const n = Math.sqrt(steps);
+      const side = 512 / n;
+      for (let i = 0; i < steps; i++) {
+        const col = i % n;
+        const row = Math.floor(i / n);
+        chart.pan({x: -200});
+        chart.update();
+        ctx.drawImage(chart.canvas, col * side, row * side, side, side);
+      }
+      Chart.helpers.clearCanvas(chart.canvas);
+      chart.ctx.drawImage(canvas, 0, 0);
+    }
+  }
+};