-
-
Notifications
You must be signed in to change notification settings - Fork 598
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Resize and rotate with the same control #467
Comments
I didn't think about resize and rotate occurring at the same time. I will consider it as a function. |
👋 @daybrush is it still something we may expect to be supported or not in the scope for any further milestones yet ? |
I would also like to know if its already possible to achieve something like Figma below: Recording.1.mp4The rotationTarget property seems to be very close to re-creating the exact same behavior, but the resize/rotate events seem to conflict with each other, causing all sorts of strange behavior. |
I'll add this feature to beta. (Only single target and only resize) |
moveables' new version is released. https://daybrush.com/moveable/storybook2/?path=/story/advanced-rotatable--rotate-with-resize Use resolveAblesWithRotatable={{
resizable: ["nw", "ne", "sw", "se"],
}} |
Thanks @daybrush I'll test it soon |
hey @daybrush thanks for the feature, seems it works ~ fine for rectangle(but the behaviour is different depends on which control you use to resize/rotate) containers but still fails to support the experience for arrows, with:
The bug here that we need to set transform-origin dynamically depends from which angle you trying to drag the arrow. @daybrush can you please test on arrow-like element ? |
origin will always default to transform-origin. But you can set any origin directly via setFixedDirection. |
@daybrush, thanks, it works! the only tiny issue that on hover over moveable dot it display "draggable" icon instead of resize (or rotate one, though I think resize is more suitable). |
@daybrush this behaviour breaks in 0.43.1 of react-moveable release (after rotation it always starts in 0,0 position even if there were drags prior). Works like a charm in 0.42.1 demo of 0.43.1 https://codesandbox.io/s/wonderful-sun-8dgzdb?file=/package.json (try drag first and resize,rotate after) p.s. Also it produces small glitches if snap set to true, maybe we can disable snappable during resize/rotate event programmatically ? (currently possible to do through local state but looks a bit awkward) |
On the video below, I've created the component which renders div based line (
style={{width: '100%', height: 2, background: '#000'}}
). As you can see on video it behaves ~ ok when we do size bigger (though, I'd expect that the head will move absolutely the same as cursor), but it goes crazy once line is minified a lot. You may also notice slight twitching in the video, especially when it snaps to snappable point (it's expected that head will snap, though the tail point should remain on the same position).2021-02-09.15.56.26.mov
Originally posted by @zaqqaz in #381 (comment)
The text was updated successfully, but these errors were encountered: