skip to Main Content

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


  1. Chosen as BEST ANSWER

    I'm pretty sure it's because the default event of the wheel is happening even though I have a preventDefault


  2. Ok done by adding capture: true to the event listener

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search