[feature request] Resize and rotate with the same control

[zaqqaz]

For arrows-like elements, it will be useful to have a way to resize and rotate them with the same control (origin override also required per-control, it should be enough just pass an identifier of the control to the start callback).

For now to achieve that I implemented custom controls (dragging to change the position is still handled by moveable), but I feel that it might be quite common use-case and can be supported oob in this project.

https://user-images.githubusercontent.com/2823336/102825031-0d0afa00-43ef-11eb-9c5a-aedd2c83440a.mov

Please share your thoughts! Cheers 😉

[daybrush]

@zaqqaz

• moveable 0.23.0
• react-moveable 0.26.0
• preact-moveable 0.25.0
• ngx-moveable 0.19.0
• svelte-moveable 0.14.0

You can use the renderDirections property and the rotationTarget property.

<Moveable
   rotatable={true}
   renderDirections={["nw", "n", "ne", "e", "w", "sw", "se", "s"]}
  rotataionTarget={".moveable-direction"}
  />

[zaqqaz]

Thank you! I can confirm that new props rotationTarget and rotationPosition works 👍

ps. Though I'm experiencing a bit 'jumping' behaviour during resize event with rotation, I'll test it a bit more soon and let you know

[zaqqaz]

@daybrush thank you again. 🚀 Finally I properly tested this feature: 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

[zaqqaz]

@daybrush, just curious, have you had a chance to look into it ?(👆)

[thanh-coder]

@zaqqaz Can you share your code for me? I am new to react. currently, I am doing tasks relates to resize, rotate and add marker-start, marker-end for object lines. But I am stuck to resolve them.

[sonterix]

@zaqqaz Can you share your code for me? I am new to react. currently, I am doing tasks relates to resize, rotate and add marker-start, marker-end for object lines. But I am stuck to resolve them.

Take a look at the demo here: https://github.com/daybrush/moveable/issues/467#issuecomment-1427045989 but use the latest version of Moveable for correct functionality (0.56.0 works fine).