Use cartesian distance for pinch zoom gesture

[atg]

Pinch zoom gestures should use cartesian distance, because they are usually executed diagonally, and so that they can optionally be combined with a rotate gesture.

Description

The previous code used the following distance calculation that only looks at the horizontal component of the pinch:

const curDiff = Math.abs(evCache[0].clientX - evCache[1].clientX);

If you actually try to zoom like this, it's very challenging ergonomically: your thumb, index finger, hand and forearm and all on the same line, your arm wants to be perpendicular to your body and the trackpad, so doing a pinch zoom horizontally requires your forearm to be almost parallel to the trackpad. In other words, the vertical component is the primary component for a pinch zoom and the horizontal component is secondary.

Usually a pinch zoom is implemented as cartesian distance because it is complemented by the rotate gesture. So a 1 dimensional pinch zoom is inconsistent with user expectations.

[github-actions]

Preview URLs

• /en-US/docs/Web/API/Pointer_events/Pinch_zoom_gestures

[sideshowbarker]

@atg, congrats on landing your first docs change here — welcome aboard 🎉