useDrag() does not consider parent container's transfrom.

[AagitoEx]

<div className="transformations">
    <animated.div className='slider-page' {...bind()} key={i} style={{ display, x, zIndex: z }}>
        <animated.div style={{ backgroundImage: `url("${convertPath(files[i].path)}")` }} /> :
    </animated.div>
<div>

In the above HTML hierarchy, I have a draggable object in a container. I have an object draggable in X-direction.
If rotate(90deg) CSS transform is applied on parent "transformations" div or its parents, I was expecting it to work as usual, but useDrag seems to return window-space coordinates rather than local coordinates.

[dbismut]

Hi, thanks for submitting a question. Please,

1. Read the docs carefully
2. Provide a sandbox. There's nothing to analyse in the excerpt you've submitted.

[AagitoEx]

If you see the transform applied to the parent div. useDrag still returns window space x-axis after rotation is applied on the parent div.
While the gesture box is still positioned along its relative x-axis.

Link to code sandbox

Code Sandbox

[dbismut]

Ok thanks, much clearer. I'm not sure what you mean by "local" coordinates? Everything is calculated based on event.clientX, event.clientY as I guess it should be. What behavior would you have expected?

[AagitoEx]

The behaviour I was expecting was that useDrag coordinates were transformed into local coordinates. Local as in the x-direction of the target is equivalent to the x-direction of the drag, even after transformation were applied to the target's parent.

I am guessing event.clientX, event.clientY returns viewport coordinates. Currently I have managed to work around by passing in the current rotation of the parent to the useDrag() args and applying vector rotation to the movement vector.

I am also unaware if this behaviour is what others want.

I have updated the sandbox with the comment of where I applied the transform if that helps.

[dbismut]

@AagitoEx thanks for the explanation. Yes, clientX / clientY return viewport coordinates. Getting local coordinates would require a lot of effort to make this work. I know offsetX exist on MouseEvents and should return relative offset, but I'm not even sure how they would work with transforms.

Note that the lib offers a transform option that allows you to map viewport coordinates to anything else you'd like, have a look at this: https://codesandbox.io/s/zealous-http-5dw7n7?file=/src/App.js