I’d like to allow zooming on a canvas (excalidraw API) using only the mouse wheel like on google map , without pressing the ctrl key.
Here are two things that I tried :
useEffect(() => {
const handleWheel = (event) => {
if (!ctrlSimulate) return;
event.preventDefault();
event.stopPropagation();
const wheelEvent = new WheelEvent("wheel", {
...event,
deltaY:event.deltaY,
ctrlKey: true
});
console.log(event.target)
event.target.dispatchEvent(wheelEvent);
};
if (ctrlSimulate) {
window.addEventListener("wheel", handleWheel);
} else {
window.removeEventListener("wheel", handleWheel);
}
return () => {
window.removeEventListener("wheel", handleWheel);
};
}, [ctrlSimulate]);
or
useEffect(() => {
const handleWheel = (event) => {
if (!ctrlSimulate) return;
event.preventDefault();
event.stopPropagation();
const wheelEvent = new WheelEvent("wheel", {
...event,
deltaY:event.deltaY,
ctrlKey: true
});
console.log(event.target)
event.target.dispatchEvent(wheelEvent);
};
const el = document.querySelector("div")
el.onwheel=handleWheel;
}, [ctrlSimulate]);
It’s zooming but not exactly on my cursor which is very frustrating because I think it should
Any help is appreciated !
2
Answers
I'm pretty sure it's because the default event of the wheel is happening even though I have a preventDefault
Ok done by adding capture: true to the event listener