Fix handling at canvas edge (#898)

chartjs · Nov 21, 2024 · 2b5a165 · 2b5a165
1 parent 2dabfe4
commit 2b5a165
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 6 deletions.
diff --git 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/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() {