Moveable: Using onResize and updateRect leads to unexpected behavior

[qvantor]

If the element changes are not related to the onResize event, the calculations of onResize event become mistaken.
Example of this behavior:
https://codesandbox.io/s/resize-updaterect-vuujb

How to fix such an issue?

[daybrush]

@qvantor

The target is changed by width and height.
What is the reason for switching to child's clientHeight?

Or do you want to use delta?
https://daybrush.com/moveable/release/latest/doc/Moveable.html#.OnResize

[qvantor]

@daybrush In the case above, there is not enough space for the text, after reducing the width. For this reason, the text is transferred to the next line - the block height grows and this change in block height leads to incorrect calculations.

[daybrush]

@qvantor

moveable 0.10.8 is released. check it with following code:

  const moveable = new Moveable(document.body, {
    target: text,
    resizable: true,
    origin: false,
    renderDirections: ["w", "e"]
  }).on("resize", ({ target, width, drag }) => {
    target.style.width = `${width}px`;

    // get drag event
    target.style.transform = `translate(${drag.beforeTranslate[0]}px, ${
      drag.beforeTranslate[1]
    }px)`;
  });

thank you :)

[qvantor]

@daybrush It's awesome!
23 hours and it's done!
Thank you very much!

[qvantor]

@daybrush
one more thing - element flying around when resizing, while keepRatio: false

Example:
https://codesandbox.io/s/resize-updaterect-updated-rg9tg
Steps to reproduce:
1) Rotate element
2) Resize element

[qvantor]

@daybrush also onResize event height don't equal to .getRect() method height

[daybrush]

@qvantor

moveable 0.11.0 is released. Also Use getRect() method's offsetHeight.

Test:
https://codesandbox.io/s/resize-updaterect-updated-eb1bb

Thank you :)

[qvantor]

@daybrush thank you!