fix: stop zooming (panning) at limit (#868)

chartjs · Nov 17, 2024 · 6456d46 · 6456d46
1 parent ec1c125
commit 6456d46
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -14,11 +14,12 @@
     "url": "https://github.com/chartjs/chartjs-plugin-zoom.git"
   },
   "scripts": {
+    "autobuild": "rollup -c -w",
     "build": "rollup -c",
     "dev": "karma start --auto-watch --no-single-run --browsers chrome",
     "dev:ff": "karma start --auto-watch --no-single-run --browsers firefox",
     "docs": "npm run build && vuepress build docs --no-cache",
-    "docs:dev": "npm run build && vuepress dev docs --no-cache",
+    "docs:dev": "concurrently \"npm run autobuild\" \"vuepress dev docs --no-cache\"",
     "lint-js": "eslint \"samples/**/*.html\" \"test/**/*.js\" \"src/**/*.js\"",
     "lint-md": "eslint \"**/*.md\"",
     "lint-tsc": "tsc",

diff --git a/src/scale.types.js b/src/scale.types.js
@@ -133,7 +133,14 @@ export function updateRange(scale, {min, max}, limits, zoom = false) {
     return true;
   }
 
-  const range = zoom ? Math.max(max - min, minRange) : scale.max - scale.min;
+  const scaleRange = scale.max - scale.min;
+  const range = zoom ? Math.max(max - min, minRange) : scaleRange;
+
+  if (zoom && range === minRange && scaleRange <= minRange) {
+    // At range limit: No change but return true to indicate no need to store the delta.
+    return true;
+  }
+
   const offset = (range - max + min) / 2;
   min -= offset;
   max += offset;

diff --git a/test/specs/api.spec.js b/test/specs/api.spec.js
@@ -152,6 +152,48 @@ describe('api', function() {
       expect(chart.scales.x.max).toBe(100);
     });
 
+    it('should no-op whan laready at limit', function() {
+      const chart = window.acquireChart({
+        type: 'scatter',
+        options: {
+          scales: {
+            x: {
+              min: 0,
+              max: 100
+            },
+            y: {
+              min: 0,
+              max: 100
+            }
+          },
+          plugins: {
+            zoom: {
+              mode: 'x',
+              limits: {
+                x: {
+                  min: 0,
+                  max: 100,
+                  minRange: 50
+                }
+              }
+            }
+          }
+        }
+      });
+
+      chart.zoom({x: 1.5, focalPoint: {x: chart.scales.x.getPixelForValue(100)}});
+      expect(chart.scales.x.min).toBe(50);
+      expect(chart.scales.x.max).toBe(100);
+
+      chart.zoom({x: 1.5, focalPoint: {x: chart.scales.x.getPixelForValue(100)}});
+      expect(chart.scales.x.min).toBe(50);
+      expect(chart.scales.x.max).toBe(100);
+
+      chart.zoom({x: 1.5, focalPoint: {x: chart.scales.x.getPixelForValue(50)}});
+      expect(chart.scales.x.min).toBe(50);
+      expect(chart.scales.x.max).toBe(100);
+    });
+
     it('should honor zoom changes against a limit', function() {
       const chart = window.acquireChart({
         type: 'scatter',