round rotate near 90 multiple degrees angles

[Nonoizz]

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:

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

Thanks for reading

[daybrush]

@Nonoizz

Sounds like a good idea.

I'll add it in the next update.

[jadiagaurang]

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

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

Amazing! nice job!

[jadiagaurang]

@daybrush

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

[davidalejandroaguilar]

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

[daybrush]

@davidalejandroaguilar

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

[daybrush]

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