Repository: chartjs/chartjs-plugin-zoom
Pull request #905 (2024-11-26 06:14:33)

fix: pinch events
fix: #906 

github-actions[bot]: **Size Change:** +43 B (+0.21%) 

**Total Size:** 20.8 kB

| Filename | Size | Change |
| :--- | :---: | :---: |
| `dist/chartjs-plugin-zoom.esm.js` | 7.53 kB | +15 B (+0.2%) |
| `dist/chartjs-plugin-zoom.js` | 7.67 kB | +17 B (+0.22%) |
| `dist/chartjs-plugin-zoom.min.js` | 5.59 kB | +11 B (+0.2%) |

<a href="https://github.com/preactjs/compressed-size-action"><sub>compressed-size-action</sub></a>

Patch:
diff --git a/src/hammer.js b/src/hammer.js
index d8cb94c..97051ae 100644
--- a/src/hammer.js
+++ b/src/hammer.js
@@ -69,8 +69,12 @@ function handlePinch(chart, state, e) {
 function startPinch(chart, state, event) {
   if (state.options.zoom.pinch.enabled) {
     const point = getRelativePosition(event, chart);
-    call(state.options.zoom.onZoomStart, [{chart, event, point}]);
-    state.scale = 1;
+    if (call(state.options.zoom.onZoomStart, [{chart, event, point}]) === false) {
+      state.scale = null;
+      call(state.options.zoom.onZoomRejected, [{chart, event}]);
+    } else {
+      state.scale = 1;
+    }
   }
 }
 


Test patch:
diff --git a/test/specs/zoom.pinch.spec.js b/test/specs/zoom.pinch.spec.js
new file mode 100644
index 0000000..fab012a
--- /dev/null
+++ b/test/specs/zoom.pinch.spec.js
@@ -0,0 +1,98 @@
+describe('pinch', () => {
+  const data = {
+    datasets: [{
+      data: [{
+        x: 1,
+        y: 3
+      }, {
+        x: 2,
+        y: 2
+      }, {
+        x: 3,
+        y: 1
+      }]
+    }]
+  };
+
+  describe('events', () => {
+    it('should call onZoomStart', function(done) {
+      const startSpy = jasmine.createSpy('started');
+      const chart = window.acquireChart({
+        type: 'scatter',
+        data,
+        options: {
+          plugins: {
+            zoom: {
+              zoom: {
+                mode: 'xy',
+                onZoomStart: startSpy,
+                pinch: {
+                  enabled: true,
+                },
+              },
+            }
+          }
+        }
+      });
+
+      Simulator.gestures.pinch(chart.canvas, {pos: [chart.width / 2, chart.height / 2]}, function() {
+        expect(startSpy).toHaveBeenCalled();
+        expect(chart.scales.x.min).not.toBe(1);
+        done();
+      });
+    });
+
+    it('should call onZoomRejected when onStartZoom returns false', function(done) {
+      const rejectSpy = jasmine.createSpy('rejected');
+      const chart = window.acquireChart({
+        type: 'scatter',
+        data,
+        options: {
+          plugins: {
+            zoom: {
+              zoom: {
+                mode: 'xy',
+                onZoomStart: () => false,
+                onZoomRejected: rejectSpy,
+                pinch: {
+                  enabled: true,
+                }
+              }
+            }
+          }
+        }
+      });
+
+      Simulator.gestures.pinch(chart.canvas, {}, function() {
+        expect(rejectSpy).toHaveBeenCalled();
+        expect(chart.scales.x.min).toBe(1);
+        done();
+      });
+    });
+
+    it('should call onZoomComplete', function(done) {
+      const chart = window.acquireChart({
+        type: 'scatter',
+        data,
+        options: {
+          plugins: {
+            zoom: {
+              zoom: {
+                mode: 'xy',
+                onZoomComplete(ctx) {
+                  expect(ctx.chart.scales.x.min).not.toBe(1);
+                  done();
+                },
+                pinch: {
+                  enabled: true,
+                },
+              },
+            }
+          }
+        }
+      });
+      Simulator.gestures.pinch(chart.canvas, {});
+    });
+
+  });
+});