Resize and rotate with the same control

[zaqqaz]

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).

https://user-images.githubusercontent.com/2823336/107390914-16ac0680-6af0-11eb-916d-f2a08876a7aa.mov

Originally posted by @zaqqaz in https://github.com/daybrush/moveable/issues/381#issuecomment-776049029

[daybrush]

@zaqqaz

I didn't think about resize and rotate occurring at the same time. I will consider it as a function.

[zaqqaz]

👋 @daybrush is it still something we may expect to be supported or not in the scope for any further milestones yet ?

[frankvdb7]

I would also like to know if its already possible to achieve something like Figma below:

https://user-images.githubusercontent.com/5363672/167166175-22357252-2421-4993-be70-e892e2f2523c.mp4

The 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.

[daybrush]

@zaqqaz @frankvdb7

I'll add this feature to beta. (Only single target and only resize)

[daybrush]

@frankvdb7 @zaqqaz

• lit-moveable 0.10.0
• moveable 0.33.0
• preact-moveable 0.35.0
• react-compat-moveable 0.21.0
• react-moveable 0.36.0
• svelte-moveable 0.25.0
• vue-moveable 2.0.0-beta.27
• vue3-moveable 0.8.0
• ngx-moveable 0.30.0

moveables' new version is released.

https://daybrush.com/moveable/storybook2/?path=/story/advanced-rotatable--rotate-with-resize

Use resolveAblesWithRotatable prop

 resolveAblesWithRotatable={{
                    resizable: ["nw", "ne", "sw", "se"],
                }}

[zaqqaz]

Thanks @daybrush I'll test it soon

[zaqqaz]

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:

       resolveAblesWithRotatable={{
                resizable: ["w", 'e'],
            }}
            resizable={{
                renderDirections: false,
            }}
            rotatable={{
                renderDirections: ["w", 'e'],
            }}

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 ?

[daybrush]

@zaqqaz

origin will always default to transform-origin.

But you can set any origin directly via setFixedDirection.

https://d4cz81.csb.app/

[zaqqaz]

@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).

[zaqqaz]

@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)