chartjs / chartjs/chartjs-plugin-zoom

Wheel zoom uncontrollable on high-resolution touchpad: fixed per-event speed, laggy synchronous redraw for each event

Open
#947 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
623
Forks
331
Avg merge
7h 5m
Merged PRs (30d)
7

Description

Two problems with the `wheel` event handler compound to make zooming completely uncontrollable on a touchpad with high-resolution scrolling, which emits `wheel` events with small `deltaY` at a high frequency:

1. The handler ignores the event’s [`deltaMode`](https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaMode) and the magnitude of [`deltaY`](https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaY): it only takes the sign into account. So the high event frequency leads to much more zooming than the user intended.

https://github.com/chartjs/chartjs-plugin-zoom/blob/4aa6d11aed1c271bc8698bd414adc9587e1bfbb9/src/handlers.js#L246-L247

2. The handler redraws the chart synchronously for each event, rather coalescing multiple events across a [`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame) callback. If the redraw is even just a little slower than the time between events, a backlog of events builds up in the queue, and the chart lags farther and farther behind real time.

https://github.com/chartjs/chartjs-plugin-zoom/blob/4aa6d11aed1c271bc8698bd414adc9587e1bfbb9/src/handlers.js#L257

### Reproduction

https://jsfiddle.net/anderskaseorg/ezy5guf2/

```html

import { Chart, LinearScale, PointElement, ScatterController } from "https://esm.sh/chart.js@4.5.1";
import zoomPlugin from "https://esm.sh/chartjs-plugin-zoom@2.2.0";
Chart.register(LinearScale, PointElement, ScatterController, zoomPlugin);
const chart = new Chart(ctx, {
type: "scatter",
data: {
datasets: [{
data: [...Array(10000).keys()].map(() => ({ x: Math.random(), y: Math.random() })),
}],
},
options: { plugins: { zoom: { zoom: { wheel: { enabled: true } } } } },
});

```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.