🐛 [BUG]: Pinch zooming with trackpads does not work on Windows laptops

[luckyeiner]

Is there an existing issue for this?

• [X] I have searched the existing issues and this is a new bug.

Current Behavior

Attempting to zoom via panning on trackpads does not work for windows machines. In However, it does work fine with Macbooks

Expected Behavior

It should zoom via panning on Windows laptop trackpads

Steps To Reproduce

1. Go to the basic example
2. Set props to

    :zoom-on-scroll="false"
    :pan-on-scroll="true"
    :pan-on-drag="false"

3. Try to zoom on the example via pinching

Relevant log output

No response

Anything else?

No response

[bcakmakoglu]

Thanks for the report, I’ll see what can be done about this once I’m back from my vacation :)

[bcakmakoglu]

Any chance this might be related to this? https://github.com/xyflow/xyflow/issues/4416

[luckyeiner]

Any chance this might be related to this? xyflow/xyflow#4416

I don't think so. It doesn't seem to work at all, not just very slowly.

[zheng93775]

I encountered the same issue with the same configuration; my computer is also Windows.

[zheng93775]

Ultimately, this is how I solved the problem.

:zoom-on-scroll="false"
:zoom-on-pinch="true"
:pan-on-drag="false"
:pan-on-scroll="false"

instance.vueFlowRef.value.addEventListener('wheel', (event) => {
  const zoom = instance.viewport.value.zoom;
  setTimeout(() => {
    if (instance.viewport.value.zoom == zoom) {
      instance.panBy({
        x: event.deltaX * -1,
        y: event.deltaY * -1,
      });
    }
  }, 10);
}, { passive: true, capture: true });

I believe that panOnScroll causes zoomOnPinch to not work, so I disabled panOnScroll and implemented the effect of panOnScroll myself.