round rotate near 90 multiple degrees angles

daybrush / moveable

Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable! Groupable! Snappable!

https://daybrush.com/moveable/

MIT License

10.08k stars 618 forks source link

round rotate near 90 multiple degrees angles #928

Open Nonoizz opened 1 year ago

Nonoizz commented 1 year ago

Environments

Framework name: Angular
Framework version: 14
Moveable Component version: ^0.43.1

Description

When using rotate, i would like the 90 degrees angle (0, 90, 180, 270) to be blocked when the value is close. For example

with a rotate angle of 55, it stays at 55
with a rotate angle between 87 and 93, i would like the rotation to stay at 90
with an angle of 100, it stays at 100

It only rounds when the value is close of 0, 90, 180, 270

check this for inspiration: rotation

What's the best solution to achieve this kind of behavior ?

Thanks for reading

daybrush commented 1 year ago

@Nonoizz

Sounds like a good idea.

I'll add it in the next update.

jadiagaurang commented 1 year ago

@Nonoizz @daybrush

Yes, This is a very good idea. I am also looking forward to add to improve UX.

Possible config:

snapRotation: true,
snapRotationThreshold: 1,   // +/- 1 deg
snapRotationDegrees: [
  0,
  90,
  180,
  270
]

daybrush commented 1 year ago

@jadiagaurang @Nonoizz

croact-moveable 0.4.0
@moveable/helper 0.1.2
lit-moveable 0.25.0
moveable 0.48.0
preact-moveable 0.50.0
react-moveable 0.51.0
svelte-moveable 0.40.0
vue-moveable 2.0.0-beta.76
vue3-moveable 0.23.0
ngx-moveable 0.45.0

moveable's new version is released. snapRotationThreshold (default: 5), snapRotationDegrees (default: []) props are added

See this example: https://daybrush.com/moveable/storybook/?path=/story/snap-bound--snap-rotations

Nonoizz commented 1 year ago

Amazing! nice job!

jadiagaurang commented 1 year ago

@daybrush

I tried this new config. It worked very well. Thanks again!

davidalejandroaguilar commented 1 year ago

@daybrush You accidentally named this snapRotationDegress instead of snapRotationDegrees, even though in the Storybook you shared its spelled correctly.

daybrush commented 1 year ago

@davidalejandroaguilar

Oh sorry, I'll fix it in the next version.

daybrush commented 1 year ago

@jadiagaurang @Nonoizz @davidalejandroaguilar

croact-moveable 0.5.0
@moveable/helper 0.1.3
lit-moveable 0.26.0
moveable 0.49.0
preact-moveable 0.51.0
react-moveable 0.52.0
svelte-moveable 0.41.0
vue-moveable 2.0.0-beta.77
vue3-moveable 0.24.0
ngx-moveable 0.46.0

moveable's new version is released.

Change prop name snapRotationDegress to snapRotationDegrees. Check it again.