Resizing Group Behavior and Animation Smoothness Problem

[anishkargaonkar]

Environments

• Framework name: react-moveable
• Framework version: 0.55.0
• Moveable Component version: 0.55.0
• Testable Address(optional): [LINK]

Description

I've run into an issue with the resizing group where the animation seems a bit unusual. This may be related to how I've incorporated the system. The main problem occurs when attempting to resize from left to right, as the layer not only resizes but also shifts to the right, which is not the desired behavior.

Furthermore, the animation appears somewhat choppy and lacks smoothness. Any suggestions on how to address these issues?

[daybrush]

@anishkargaonkar

If you are using React 18's concurrent mode, use flushSync for UI sync.

import React from 'react';
import ReactDOM from 'react-dom/client';
import { flushSync } from "react-dom";

import Moveable from "react-moveable";


function App() {
    return <Moveable flushSync={flushSync} />
}

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

[anishkargaonkar]

Employing flushSync effectively resolves the problem. Regrettably, our current React version is v17.0.2. Is there a method to address the abrupt movements?

[daybrush]

@anishkargaonkar

There should be no problem in 17.0.2. Is it correct that you probably set it like this: e.target.style.cssText += e.cssText;?