Target element position gets wrong value after destroying and initializing a new instance

[seahindeniz]

Environments

• Moveable Component version: 0.27.1
• Testable Address(optional): https://codesandbox.io/s/funny-rubin-itisr?file=/src/index.ts

Description

Dragging the target element at first attempt works as expected (I assume). But after destroying the first instance that changes the transform value, and initializing a new Moveable instance and dragging the same element again, this time the element gets positioned to another location. I believe its coordinates gets zeroed.

https://user-images.githubusercontent.com/5789670/141750078-88b5ab59-90a3-4de1-a3e0-645eebd04ba6.mov

[daybrush]

@seahindeniz

The style of target is not initialized, but frame.translate is initialized. The translate of the target and the translate of the frame must match.

[seahindeniz]

Hmm. At first, the target doesn't have style/transform. When we move the target at first attempt, it gets transform: translate(97.1052px, -80.191px); When we try second attempt, it kind of starts from transform: translate(0.333334px, -0.57735px);

Shouldn't Moveable supposed to read the previous translate value from the target element? 🤔 Just curious.

If not and we have to handle it manually, how would you like to suggest setting it up? If you have a suggestion, please consider other scenarios where the target element may also have something like this transform: matrix(1, 0, 0, 1, -470, -13.5) translate(0px, -13.5px) scale(1.04535, 1.04535); too @daybrush

[daybrush]

@seahindeniz

If my understanding is correct, try this:

Don't use dragStart, scaleStart, rotateStart, just use drag and scale.

moveable.on('drag', e => {
   e.target.style.transform = e.transform;
}).on('scale', e => {
    e.target.style.transform = e.drag.transform;
});

``

[seahindeniz]

You have no idea how much I've over-engineered things 🤦🏻 Thank you, and it works as expected.

JFYI, examples like this one, suggests scaleStart usage, so I was kind of under the impression of that we should be setting things on dragStart, you know. That's why I used it.

[daybrush]

@seahindeniz

This demo is an old demo and a new demo is being prepared.

Only react is supported, but various frameworks will be supported.

https://daybrush.com/moveable/storybook2/?path=/story/use-css--scalable-template