search

daybrush / moveable

Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable! Groupable! Snappable!
https://daybrush.com/moveable/
MIT License
9.93k stars 614 forks source link

Combining .request calls on draggable and rotatable results in shifting position #1127

Open oasjohn opened 1 month ago

oasjohn commented 1 month ago

In brief, I'm using JS to reposition and rotate an element incrementally over time, and want the element to rotate about its natural center and reposition relative to its original position. If I do this using the .request calls in this order, the location is shifted relative to the rotated element. (mv is the moveable instance)

newAngle increases over time newX and newY change over time

mv.request('rotatable', { rotate: newAngle }, true)
mv.request('draggable', { x: newX, y: newY }, true)

If I reverse the operations, it also results in the incorrect position.

mv.request('draggable', { x: newX, y: newY }, true)
mv.request('rotatable', { rotate: newAngle }, true)

I've found that I can effectively separate these operations by resetting rotation to zero, set the new position, then apply the new rotation.

mv.request('rotatable', { rotate: 0 }, true)
mv.request('draggable', { x: newX, y: newY }, true)
mv.request('rotatable', { rotate: newAngle }, true)

However, the position seems to shift after several iterations. This happens even if the newX and newY remain static. Simply calling the draggable request seems to introduce some calculation errors internally over time.

Has anyone seen this or is there a better way to implement these actions?

oasjohn commented 1 month ago

Here is how things progress over time:

Things are OK at first... rot-ok

After about 50 iterations...things are starting to shift slightly... rot-bad1

After about 200 iterations...going off the rails... rot-bad2