feat!: add new rotate_selected mode

[stropitek]

The new story shows the type of usage scenario I have in mind with this new feature.

• feat: add mode similar to select mode, but to rotate the selected ROI instead of moving it
• refactor!: rename allowRotate to displayRotationHandle

[cloudflare-workers-and-pages]

Deploying react-roi with    Cloudflare Pages

Latest commit:	8be1887
Status:	✅  Deploy successful!
Preview URL:	https://94ab8c39.react-roi.pages.dev
Branch Preview URL:	https://rotation-mode.react-roi.pages.dev

View logs

[tpoisseau]

https://rotation-mode.react-roi.pages.dev/?path=%2Fstory%2Fhooks-useactions--rotation-mode

I'm not convinced by the control of select_rotation mode. It's like a rotation slider but it's confusing in this context. I would prefer to keep normal rotation behavior (angle from roi center and mouse cursor).

I suppose the intention is to have a more precise rotation, but normal rotation behavior can be much more precise once we put the cursor far away from the center.

Also. with select_rotation mode, we should not be able to resize, In this context, cursor symbol for rotation is the same than resize horizontal resize, so if we start the action too close to the edge of the roi, we resize it instead rotate it and we saw it too late.

[stropitek]

I suppose the intention is to have a more precise rotation

Yes. It also helps with #123.

but normal rotation behavior can be much more precise once we put the cursor far away from the center.

But this is not very convenient to do. And I'm not sure a lot of users will intuitively understand that they can do that.

cursor symbol for rotation is the same than resize horizontal resize

Saw that but unfortunately I don't have a lot of native options. Using a custom cursor would imply to do that for all the cursors (if we want cohesion in the design).

we should not be able to resize

I'm ok with changing that. It would fix the problem above. I think it should be possible to do it from anywhere, even if the action starts outside the selected ROI, so unselection is disabled in this mode.

[stropitek]

I didn't mention what I find the most important: with the handler, you can only rotate the roi while relatively zoomed out in order to see the handle. Now you can zoom in deep into the ROI but still perform the action. Combined with the grid features of my last PR, I think it is a powerful way to align with text, lines, or anything that is supposed to be straight in the image.

Also it requires much less precise actions from the user. They don't have to focus on where to click, just use a keyboard shortcut and use mouse anywhere.

[tpoisseau]

Ok, I'll approve once resize is disabled for select_rotation mode

[stropitek]

Renamed select_rotate to rotate_selected

The mode won't do anything when nothing is selected, and will always rotate the selected one regardless of where we interact on the react roi component.

[tpoisseau]

SGTM