Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Resize and rotate with the same control

See original GitHub issue

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_

Issue Analytics

State:
Created 2 years ago
Comments:9 (4 by maintainers)

Top GitHub Comments

1reaction

daybrushcommented, Aug 3, 2022

@zaqqaz

origin will always default to transform-origin.

But you can set any origin directly via setFixedDirection.

https://d4cz81.csb.app/

1reaction

daybrushcommented, Jul 25, 2022

@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"],
                }}

Top Results From Across the Web

[feature request] Resize and rotate with the same control #381

on the video below, I've created the component which renders div based line ( style={{width: '100%', height: 2, background: '#000'}} ). As you ......

Select, resize, and rotate objects in Adobe XD.

Learn how to select, resize, and rotate objects in Adobe XD. ... Drag these handles to resize the object or the object group....

HOW TO RE-FRAME, RESIZE, MOVE, ROTATE & FLIP VIDEO ...

In this video, we'll take an in-depth look at the Transform tool built into Final Cut Pro. This is a great tool to...

Select, move, resize, and rotate shapes - Microsoft Support

To rotate the shape clockwise, on the Home tab, in the Arrange group, click Position, point to Rotate Shapes, and select Rotate Right...

Resize, move, and rotate clips in Final Cut Pro - Apple Support

Control -click in the viewer and choose Transform. The Transform onscreen controls appear in the viewer. Adjust the Transform effect using the onscreen...