daybrush / moveable

Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable! Groupable! Snappable!
https://daybrush.com/moveable/
MIT License
9.8k stars 605 forks source link

Could resizable support decimal #1066

Open suanmei opened 6 months ago

suanmei commented 6 months ago

Environments

Description

The original size of my element is dynamically calculated. It is most likely not an integer but a decimal. Now after moving it, there are two problems. One is that it will be forcibly set to two integers, causing my aspect ratio to change. Now, the second problem is that after resize, I can no longer go back to the original initial value (decimal).

suanmei commented 6 months ago

actual:

console.log(targetRef.current?.getBoundingClientRect(), '====');

output:

bottom: 250
height: 183
left: 844.53125
right: 947.46875
top: 67
width: 102.9375
x: 844.53125
y: 67

In Moveable:

 const onResizeEnd = (e: OnResizeEnd) => {
    console.log(e);
  };

output:

{
   ...
   lastEvent: undefined,
   target: {
      ...
      clientWidth: 103
      clientWidth: 183
   }
}

I just clicked the resize button, the actual resize did not occur. In the output event, I checked the target information, and at this point, the width and height of my element had already been rounded. So I want to ask why we can't use actual decimals, but we must round them up

suanmei commented 6 months ago

I have found the answer. throttleResize

SidIcarus commented 5 months ago

@suanmei if this is resolved, can you close out your issue?