Drag behaviour when parent is scaled (Zoom, Drag)

[jrozbicki]

Do you have any tips on how to tweak implementation to get dragging right inside Zoom'ed element?

Basic scenario would be to have <g transform="scale(2)"> wrapped around <Drag> components. Dragged element will basically travel twice as fast as mouse cursor.

Example from your example section with wrapper: https://codesandbox.io/s/nostalgic-worker-8vjqwc?file=/Example.tsx

1. Half working solution would be to divide dx by 2 (parent scale) - this would "sync" mouse cursor with dragged element.

<circle
  ...
  transform={`translate(${dx / 2}, ${dy / 2})`}
 ...
/>

But this would fail when scale changes, because it would change in both parent (which influences circle) and circle itself which would "move" circle from it's original place.

2. Another idea I had was to improve useDrag so that it could receive parents scale and include that in dx calculation when dragging.

Any suggestions how to tackle this? If needed I could set up better reproduction that would include <Zoom> and nested <Drag>.

[williaster]

Going to convert this to a discussion, I don't have experience correcting for this, curious if anyone else in the community does!

[jrozbicki]

I would really appreciate maintainer insight on how to combine Zoom and Drag together, there is not much community movement in this in this Discussions section :(

[jrozbicki]

I came up with somewhat solution, it's definitely not a PR contender, but works in this case.

There is "Problem" repro in Problem.tsx and solution with tweaked useDrag in Solution folder

To swap between just change import in index.tsx.

https://codesandbox.io/s/zoomdrag-29cti9?file=/index.tsx

If it's right direction I could work on more robust solution for a PR. Would be nice to get some feedback on it.

[blazingh]

shame that there is no proper solution yet.
thanks for the code demo, I'm currently using it with no issues.