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

https://github.com/daybrush/moveable/assets/160803175/6ac988d0-658c-403a-a36b-2f509020f8bb

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} ); }; `