Repository: chartjs/chartjs-plugin-zoom
Pull request #900 (2024-11-21 19:26:43)

Fixes to types and spelling


Patch:
diff --git a/MAINTAINING.md b/MAINTAINING.md
index 9b159d6..66e75c5 100644
--- a/MAINTAINING.md
+++ b/MAINTAINING.md
@@ -9,7 +9,7 @@ Series of github actions are used to automate the library [releases](https://git
 `release-drafter` action updates a draft of release notes after each push. Its based on labels and the commit messages, so its important to label pull requests and have clean commits. If the draft contains commits that do not fall under any heading, those commits should be labeled and the drafter re-run from [actions](https://github.com/chartjs/chartjs-plugin-zoom/actions).
 
 1. update `master` `package.json` version using [semver](https://semver.org/) semantic
-1. update the tag and version in the release draft to match `package.json`. Mark it as `pre-release` if you would like to publis with `next` tag on [npmjs](https://www.npmjs.com/package/chartjs-plugin-zoom)
+1. update the tag and version in the release draft to match `package.json`. Mark it as `pre-release` if you would like to publish with `next` tag on [npmjs](https://www.npmjs.com/package/chartjs-plugin-zoom)
 1. publish the release in GitHub. Publishing will trigger the `publish-npm` action. You can monitor the process in [actions](https://github.com/chartjs/chartjs-plugin-zoom/actions)
 
 ### Automated Tasks
diff --git a/docs/guide/options.md b/docs/guide/options.md
index 74afe03..27177b6 100644
--- a/docs/guide/options.md
+++ b/docs/guide/options.md
@@ -45,7 +45,7 @@ const chart = new Chart('id', {
 | ---- | --------- | -----------
 | `onPan` | `{chart}` | Called while the chart is being panned
 | `onPanComplete` | `{chart}` | Called once panning is completed
-| `onPanRejected` | `{chart,event}` | Called when panning is rejected due to missing modifier key. `event` is the a [hammer event](https://hammerjs.github.io/api#event-object) that failed
+| `onPanRejected` | `{chart,event}` | Called when panning is rejected due to missing modifier key. `event` is a [Hammer event](https://hammerjs.github.io/api#event-object) that failed
 | `onPanStart` | `{chart,event,point}` | Called when panning is about to start. If this callback returns false, panning is aborted and `onPanRejected` is invoked
 
 ## Zoom
@@ -105,7 +105,7 @@ The `drawTime` option for zooming determines where in the chart lifecycle the dr
 | ---- | --------- | -----------
 | `onZoom` | `{chart}` | Called while the chart is being zoomed
 | `onZoomComplete` | `{chart}` | Called once zooming is completed
-| `onZoomRejected` | `{chart,event}` | Called when zoom is rejected due to missing modifier key. `event` is the a [hammer event](https://hammerjs.github.io/api#event-object) that failed
+| `onZoomRejected` | `{chart,event}` | Called when zoom is rejected due to missing modifier key. `event` is a [Hammer event](https://hammerjs.github.io/api#event-object) that failed
 | `onZoomStart` | `{chart,event,point}` | Called when zooming is about to start. If this callback returns false, zooming is aborted and `onZoomRejected` is invoked
 
 ## Limits
diff --git a/docs/samples/wheel/click-zoom.md b/docs/samples/wheel/click-zoom.md
index 20e0ba1..f63fac5 100644
--- a/docs/samples/wheel/click-zoom.md
+++ b/docs/samples/wheel/click-zoom.md
@@ -3,7 +3,7 @@
 ::: tip NOTE
 
 The following text is there on purpose, so the page is scrollable.
-This demoes that the chart does not consume the wheel until clicked.
+This demos that the chart does not consume the wheel until clicked.
 
 :::
 
diff --git a/src/handlers.js b/src/handlers.js
index 25ea441..97c716f 100644
--- a/src/handlers.js
+++ b/src/handlers.js
@@ -58,13 +58,14 @@ function keyDown(chart, event) {
 }
 
 function getPointPosition(event, chart) {
-  const point = getRelativePosition(event, chart);
-  const canvasArea = chart.canvas.getBoundingClientRect();
-  if (!_isPointInArea(event, canvasArea)) {
-    point.x = event.clientX - canvasArea.left;
-    point.y = event.clientY - canvasArea.top;
+  if (event.target !== chart.canvas) {
+    const canvasArea = chart.canvas.getBoundingClientRect();
+    return {
+      x: event.clientX - canvasArea.left,
+      y: event.clientY - canvasArea.top,
+    };
   }
-  return point;
+  return getRelativePosition(event, chart);
 }
 
 function zoomStart(chart, event, zoomOptions) {
diff --git a/types/options.d.ts b/types/options.d.ts
index 1d6d5da..efe2c8b 100644
--- a/types/options.d.ts
+++ b/types/options.d.ts
@@ -116,7 +116,7 @@ export interface ZoomOptions {
    */
   onZoomRejected?: (context: { chart: Chart, event: Event }) => void;
 
-  onZoomStart?: (context: { chart: Chart, event: Event, point: Point }) => void;
+  onZoomStart?: (context: { chart: Chart, event: Event, point: Point }) => boolean | undefined;
 }
 
 /**
@@ -137,7 +137,7 @@ export interface PanOptions {
    *     return 'xy';
    *   },
    */
-  mode?: Mode | { (char: Chart): Mode };
+  mode?: Mode | { (chart: Chart): Mode };
 
   /**
    * Modifier key required for panning with mouse
@@ -165,7 +165,7 @@ export interface PanOptions {
 
   /**
    * Function called when pan fails because modifier key was not detected.
-   * event is the a hammer event that failed - see https://hammerjs.github.io/api#event-object
+   * event is the Hammer event that failed - see https://hammerjs.github.io/api#event-object
    */
   onPanRejected?: (context: { chart: Chart, event: HammerInput }) => void;
 


Test patch:
diff --git a/test/specs/zoom.drag.spec.js b/test/specs/zoom.drag.spec.js
index 712f2b6..1ec51c4 100644
--- a/test/specs/zoom.drag.spec.js
+++ b/test/specs/zoom.drag.spec.js
@@ -450,6 +450,63 @@ describe('zoom with drag', function() {
       expect(scaleY.options.min).toBeCloseTo(1.2);
       expect(scaleY.options.max).toBeCloseTo(1.7);
     });
+
+    it('handles dragging off the right edge of the chart canvas', function() {
+      chart = window.acquireChart({
+        type: 'line',
+        data,
+        options: {
+          scales: {
+            xScale0: {
+              id: 'xScale0',
+              type: 'linear',
+              min: 0,
+              max: 4
+            },
+            yScale0: {
+              id: 'yScale0',
+              type: 'linear',
+              min: 0,
+              max: 4,
+            }
+          },
+          plugins: {
+            zoom: {
+              zoom: {
+                drag: {
+                  enabled: true
+                },
+                mode: 'xy'
+              }
+            }
+          }
+        }
+      }, {
+        wrapper: {style: 'position: absolute; left: 50px; top: 50px;'}
+      });
+
+      scaleX = chart.scales.xScale0;
+      scaleY = chart.scales.yScale0;
+
+      jasmine.triggerMouseEvent(chart, 'mousedown', {
+        x: scaleX.getPixelForValue(1.5),
+        y: scaleY.getPixelForValue(1.2)
+      });
+
+      const rect = chart.canvas.getBoundingClientRect();
+      document.documentElement.dispatchEvent(new MouseEvent('mouseup', {
+        clientX: rect.right,
+        clientY: rect.top + scaleY.getPixelForValue(1.7),
+        cancelable: true,
+        bubbles: true,
+        view: window
+      }));
+
+      expect(scaleX.options.min).toBeCloseTo(1.5);
+      expect(scaleX.options.max).toBeCloseTo(4);
+      expect(scaleY.options.min).toBeCloseTo(1.2);
+      expect(scaleY.options.max).toBeCloseTo(1.7);
+    });
   });
 
   describe('events', function() {