Cannot execute updateRect on ref.current.

Environments

• Framework name: react-moveable / React
• Framework version: 0.39.3
• Moveable Component version:
• Testable Address(optional):

Description

I am updating my component’s data, and also changing transform/translate values, everything works ok, except the control box, which moves more than needed, I have deduced it is due to the miscalculations, and I need to use updateRect to fix it.

I try to update it after I update my state in onDragEnd event, using moveableRef.current.updateRect(), I do not get any error, however, it does not seem to change anything. Below is a screenshot, green box is where controlbox supposed to be.

I inspected moveableRef.current and there is no such function in there, see screenshot below.

If I call moveableRef.updateRect() - it seems to work, and the controlbox updates. See screenshot below.

However, I then get error, that no such function exists.

Why it works, when I get the error, and it does not work, when it is supposed to work ? Am I missing some setup ?

My Moveable :

[daybrush]

@SarunasMedeikis It will be because of the transform you set.

Since the state of React is asynchronous, the rect of the moveable is calculated without all styles applied.

e.target.style.cssText +=
            `left: ${target.left}px;` +
            `top: ${target.top}px;` +
            `transform: translate(0px, 0px)`;
          frame.translate = [0, 0, 0, 0];

And check the box-sizing: border-box property of the target?

rect is offsetWidth and offsetHeight. The width and height are gradually increased.

.target {
   box-sizing: border-box;
}

[SarunasMedeikis]

Thank you for the help 👍