Pinch Gesture on web platform

Connected to: bevyengine/bevy#23421

Description

I am trying to detect pinch to zoom gestures when using winit on the web. This is problematic because pinch to zoom gestures use the same MouseWheel event scrolling uses. The only difference is that event.ctrlKey is set.

This results in a hacky solution to try to detect whether the control key is pressed by listening to two separate events.

Solution

Adding modifier state directly to the MouseWheel event and other events similar to it would allow higher ease of use for situations such as this one. Another solution could be to expose just a variable called is_pinching that represents the control key.

A new proposed solution is to send a pinch event when the ctrlKey modifier is sent during the event.

Example JS Code

// current
document.addEventListener('wheel', (e) => {
    dispatchModifiers(...)
    dispatchWheelEvent({ x: e.deltaX, y: e.deltaY });
});

// proposed
document.addEventListener('wheel', (e) => {
    dispatchModifiers(...)
    if (!e.ctrlKey) dispatchWheelEvent({ x: e.deltaX, y: e.deltaY, modifiers: ... });
    else dispatchPinchEvent({ … });
});

Start with the web platform wheel listener shown in the issue and compare its current MouseWheel dispatch with the proposed pinch branch. Trace how ctrlKey is handled and determine the event API and modifier behavior needed to distinguish pinch gestures from ordinary wheel events. Done means pinch gestures no longer require the separate modifier-listener workaround.