search

d3 / d3-zoom

Pan and zoom SVG, HTML or Canvas using mouse or touch input.
https://d3js.org/d3-zoom
ISC License
502 stars 143 forks source link

Pinch to zoom not working on mac due to ignoring all non-button events when ctrl is active #204

Closed tsiki closed 3 years ago

tsiki commented 4 years ago

Hello,

It seems https://github.com/d3/d3-zoom/commit/295cb421b1cd1720c5b37722b371211449505402 changed the zooming behavior to filter out any events where control is pressed, but at least in Chrome mac pinch behavior translates to an event where ctrl is true, meaning this change disables mac pinch to zoom by default.

Related SO question: https://stackoverflow.com/questions/59972769/d3-pinch-to-zoom-doesnt-work-in-v5-but-works-in-v4

Fil commented 4 years ago

Confirmed. I have restored pinch-to-zoom in this notebook but… it's very very slow, painful to interact with. Zooming with a scroll gesture is much faster.

cschweikert commented 4 years ago

I had the same issue. This seemes to be introduces with a fix for preventing dragging with ctrl key. See also d3/d3-drag/issues/62 Since this zooming works as a ctrl+wheel event setting a custom filter like this might help:

d3.zoom().filter(function() {
  return (!d3.event.ctrlKey || d3.event.type === 'wheel') && !d3.event.button;
})

This will reanable the old zoom behavior and should not interfere with fix d3/d3-drag/issues/62.

Fil commented 4 years ago

More documentation here https://medium.com/@auchenberg/detecting-multi-touch-trackpad-gestures-in-javascript-a2505babb10e

Fil commented 4 years ago

Probably linked to #194

Fil commented 4 years ago

I've updated the test notebook with a modified wheelDelta: when the wheel event is received with ctrlKey, we multiply the value by 5. Now it's more on par with the scroll gesture.