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

Propagate touchmove while panning when hitting translateExtent #186

Open spetex opened 4 years ago

spetex commented 4 years ago

Hello,

first, thanks for this magnificent library. It already solved a loads of problems for me. However I have reached to a point where I am unable to achieve desired behavior and before I try to update the d3-zoom source by myself I want to discuss it here.

Image a scenario where you have an svg area with different shapes and you want to move the around with pan. In my case the area should be the same width and height of the viewport. On mobile you move it with one finger swipe (pan). Now if you add the translate extent you can only move the shapes to a certain point. for example they cannot leave the area. Since the area could occupy the whole screen and the page could contain other stuff. I would like to propagate the touchmove to the original page scroll when you hit the pan translateExtent boundaries.

Example:

you scroll the page arrive at the svg area. Zoom in on the stuff in the area. You do the same motion as scrolling and you are panning. When you hit the translateExtent boundary you immediately stop panning and resume page scrolling again.

What do you think? @mbostock

mbostock commented 4 years ago

We do something similar for wheel events and scaleExtent, so this sounds reasonable, though we do consume the entire “gesture” when wheeling, as in we continue to consume wheel events that initiated a zoom even when the scaleExtent is reached, and you have to stop wheeling and then wait briefly to scroll.

I imagine we’d need to do something similar with translateExtent. I also think it may prove to be difficult to know on touchstart whether you wish to consume the event or not, so in practice I am not sure whether what you propose will be possible. For wheel events we immediate know the wheeling direction, but for a touchstart the touch has not yet moved.

So, we’ll have to see what it looks like in practice. This stuff can be tricky. :)

spetex commented 4 years ago

Thanks for the tips. I will see what I can find out!

Fil commented 4 years ago

This would also probably allow to restrain to "horizontal" panning — something that other libraries like hammer help to manage (see https://github.com/d3/d3-zoom/issues/215).