fix: enabling pan after chart initialization

Author: kurkle

.eslintrc.yml

@@ -1,21 +1,19 @@
 extends:
   - chartjs
-  - plugin:es/no-new-in-es2019
   - plugin:markdown/recommended
 
 env:
-  es6: true
+  es2021: true
   browser: true
   node: true
 
 parserOptions:
-  ecmaVersion: 2018
   sourceType: module
   ecmaFeatures:
     impliedStrict: true
     modules: true
 
-plugins: ['html', 'es']
+plugins: ['html']
 
 rules:
   complexity: ["warn", 10]

docs/.vuepress/config.js

@@ -150,9 +150,15 @@ module.exports = {
             'drag/timeseries',
           ]
         },
-        'api',
+        {
+          title: 'Pan',
+          children: [
+            'pan/region',
+            'pan/toggle',
+          ]
+        },
         'fetch-data',
-        'pan-region',
+        'api',
       ],
     }
   }

docs/samples/fetch-data.md

@@ -1,4 +1,4 @@
-# Fetch data
+# Fetch Data
 
 ```js chart-editor
 // <block:data:2>

docs/samples/pan-region.md renamed to docs/samples/pan/region.md

@@ -0,0 +1,105 @@
+# Pan Toggle
+
+In this example pan is initially disabled.
+
+```js chart-editor
+// <block:data:1>
+const NUMBER_CFG = {count: 20, min: -100, max: 100};
+const data = {
+  datasets: [{
+    label: 'My First dataset',
+    borderColor: Utils.randomColor(0.4),
+    backgroundColor: Utils.randomColor(0.1),
+    pointBorderColor: Utils.randomColor(0.7),
+    pointBackgroundColor: Utils.randomColor(0.5),
+    pointBorderWidth: 1,
+    data: Utils.points(NUMBER_CFG),
+  }, {
+    label: 'My Second dataset',
+    borderColor: Utils.randomColor(0.4),
+    backgroundColor: Utils.randomColor(0.1),
+    pointBorderColor: Utils.randomColor(0.7),
+    pointBackgroundColor: Utils.randomColor(0.5),
+    pointBorderWidth: 1,
+    data: Utils.points(NUMBER_CFG),
+  }]
+};
+// </block:data>
+
+// <block:scales:2>
+const scaleOpts = {
+  grid: {
+    borderColor: Utils.randomColor(1),
+    color: 'rgba( 0, 0, 0, 0.1)',
+  },
+  title: {
+    display: true,
+    text: (ctx) => ctx.scale.axis + ' axis',
+  }
+};
+const scales = {
+  x: {
+    position: 'top',
+  },
+  y: {
+    position: 'right',
+  },
+};
+Object.keys(scales).forEach(scale => Object.assign(scales[scale], scaleOpts));
+// </block:scales>
+
+// <block:zoom:0>
+const zoomOptions = {
+  limits: {
+    x: {min: -200, max: 200, minRange: 50},
+    y: {min: -200, max: 200, minRange: 50}
+  },
+  pan: {
+    enabled: false,
+    mode: 'xy',
+  },
+  zoom: {
+    wheel: {
+      enabled: false,
+    },
+    pinch: {
+      enabled: true
+    },
+  }
+};
+// </block:zoom>
+
+// <block:config:1>
+const config = {
+  type: 'scatter',
+  data: data,
+  options: {
+    scales: scales,
+    plugins: {
+      zoom: zoomOptions,
+    },
+  },
+};
+// </block:config>
+
+const actions = [
+  {
+    name: 'Toggle pan',
+    handler(chart) {
+      chart.options.plugins.zoom.pan.enabled = !chart.options.plugins.zoom.pan.enabled;
+      chart.update();
+    }
+  },
+  {
+    name: 'Reset zoom',
+    handler(chart) {
+      chart.resetZoom('zoom');
+    }
+  }
+];
+
+module.exports = {
+  actions,
+  config,
+};
+```

docs/samples/pan/toggle.md

@@ -53,7 +53,6 @@
     "date-fns": "^2.21.1",
     "eslint": "^8.2.0",
     "eslint-config-chartjs": "^0.3.0",
-    "eslint-plugin-es": "^4.1.0",
     "eslint-plugin-html": "^6.1.2",
     "eslint-plugin-markdown": "^2.0.1",
     "hammer-simulator": "^0.0.1",

package-lock.json

@@ -159,3 +159,20 @@ export function stopHammer(chart) {
     hammers.delete(chart);
   }
 }
+
+export function hammerOptionsChanged(oldOptions, newOptions) {
+  const {pan: oldPan, zoom: oldZoom} = oldOptions;
+  const {pan: newPan, zoom: newZoom} = newOptions;
+
+  if (oldZoom?.zoom?.pinch?.enabled !== newZoom?.zoom?.pinch?.enabled) {
+    return true;
+  }
+  if (oldPan?.enabled !== newPan?.enabled) {
+    return true;
+  }
+  if (oldPan?.threshold !== newPan?.threshold) {
+    return true;
+  }
+
+  return false;
+}

package.json

@@ -1,6 +1,6 @@
 import Hammer from 'hammerjs';
 import {addListeners, computeDragRect, removeListeners} from './handlers';
-import {startHammer, stopHammer} from './hammer';
+import {hammerOptionsChanged, startHammer, stopHammer} from './hammer';
 import {pan, zoom, resetZoom, zoomScale, getZoomLevel, getInitialScaleBounds, getZoomedScaleBounds, isZoomedOrPanned, isZoomingOrPanning, zoomRect} from './core';
 import {panFunctions, zoomFunctions, zoomRectFunctions} from './scale.types';
 import {getState, removeState} from './state';
@@ -96,7 +96,15 @@ export default {
 
   beforeUpdate: function(chart, args, options) {
     const state = getState(chart);
+    const previousOptions = state.options;
     state.options = options;
+
+    // Hammer needs to be restarted when certain options change.
+    if (hammerOptionsChanged(previousOptions, options)) {
+      stopHammer(chart);
+      startHammer(chart, options);
+    }
+
     addListeners(chart, options);
   },