daybrush / moveable

Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable! Groupable! Snappable!

Home Page:https://daybrush.com/moveable/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Y Direction of Element Changing Automatically. How to set X, Y position for the moveable target

Parth909 opened this issue Β· comments

Environments

Framework name: React v16
Framework version: 0.56.0
Moveable Component version:

Description

The Y Co-ordinate of the element is changing automatically when a new element is added.

In the below video πŸ‘‡ you can see that when the first textbox is added the translate(x, y) is 70px & 70px for the Moveable Control Box and for the target div with class 'selecto-selectable'.

Problem is when the second textbox is added the translate(x, y) is 70px & 70px for the target div with class 'selecto-selectable' but 70px & 160px for Moveable Control Box

react-moveable_changing_y_automatically.mp4

Solutions Tried

Tried changing the css when onChangeTargets event is fired but only the position of the control box changes & something seems like broken.

onChangeTargets={(e) => {
                        // Because we are using the same Moveable Component when a new layer is added the "Moveable Control Box" shift down & after a few layers goes outside the div.
                        console.log("onChangeTargets", e);

                        if (
                          e.moveable &&
                          Array.isArray(e.targets) &&
                          e.targets.length > 0
                        ) {
                          // target's style is correct translate(70px, 70px)
                          let target = e.targets[0];
                          e.moveable.controlBox.style.transform =
                            target.style.transform;
                          e.moveable.controlBox.style.webkitTransform =
                            target.style.transform;
                        }
                      }}

You can see in the below video πŸ‘‡ the way it is broken the box is somewhere else & the text is somewhere but there styles is 70px & 70px for the Moveable Control Box and for the target div with class 'selecto-selectable'

text_placed_incorrectly.mp4

Here is the link to the full code where I'm using InfiniteViewer, react-moveable, react-selecto.
https://pastebin.com/XqBUXV31