Rotation handle not following mouse cursor and it gets wonky.

[DMTaswebdevelopment]

Environments

• Framework name: ReactJS
• Framework version: 18.2.0
• Moveable Component version: 0.56.0
• Testable Address(optional):

Description

Rotation.bug.mp4

When I drag the rotation handle it does not follow the mouse cursor. I closely followed the docs but it seems its not working on my end.

Heres a snippet of my code.

`import React, { useRef } from "react";
import Moveable from "react-moveable";
import { flushSync } from "react-dom";

export const ImageControls = ({
object,
selectedObject,
setSelectedObject,
handleResize,
handleDrag,
}) => {

const handleRotate = (e, object) => {
setSelectedObject(object);
e.target.style.transform = e.drag.transform;
setCanvasObjects(
UpdateCanvasObjects(canvasObjects, object.key, {
rotation: e.rotate,
})
);
};

const imageRef = useRef(null);
const controls = (
<Moveable
flushSync={flushSync}
target={imageRef}
origin={false}
resizable={selectedObject.key === object.key}
draggable={true}
rotatable={selectedObject.key === object.key}
pinchable={true}
rotateAroundControls={true}
keepRatio={true}
hideDefaultLines={true}
snappable={true}
verticalGuidelines={[0, 250, 500]}
horizontalGuidelines={[0, 187.5, 375]}
snapDirections={{
center: true,
middle: true,
top: true,
left: true,
bottom: true,
right: true,
}}
snapRotationDegrees={[0, 45, 90, 180, 270]}
onResize={(e) => handleResize(e, object)}
onDrag={(e) => handleDrag(e, object)}
onRotate={(e) => handleRotate(e, object)}
onPinch={(e) => console.log(e)}
/>
);

return (
<div key={object.key} onMouseDown={() => setSelectedObject(object)}>
<img
ref={imageRef}
src={object.data}
alt={object.data}
style={{
transform: translate(${object.position.x}px, ${object.position.y}px) rotate(${object.rotation}deg) scale(${object.scaleX}, ${object.scaleY}),
WebkitUserDrag: "none",
filter: ${object.filter},
objectFit: "cover",
width: object.size.width,
height: object.size.height,
touchAction: "none",
userSelect: "none",
}}
className={ absolute border-2 object-cover ${ selectedObject.key === object.key ? "border-black border-dashed hover:border-dashed" : "border-transparent hover:border-blue-500" } hover:border-solid hover:cursor-move max-w-[200vh]}
/>
{controls}

);
};
`