chartjs / chartjs/chartjs-plugin-zoom
Wheel zoom uncontrollable on high-resolution touchpad: fixed per-event speed, laggy synchronous redraw for each event
- 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
Assessment
This issue has not been assessed yet.