New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Canvas: Add ability to rotate elements #83295
Conversation
Few comments:
|
…tated elements (not perfect but "good enough" for time being)
@@ -408,6 +424,10 @@ export class Scene { | |||
draggable: allowChanges && !this.editModeEnabled.getValue(), | |||
resizable: allowChanges, | |||
|
|||
// Setup rotatable | |||
rotatable: allowChanges, | |||
throttleRotate: 5, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is in effect our version of angle "snapping" making it easier to get to 45, 90, 180 etc values without explicitly setting in the placement editor
const originalDirTB = dirTB; | ||
|
||
dirLR = Math.sign(originalDirLR * Math.cos(rotationInRadians) - originalDirTB * Math.sin(rotationInRadians)); | ||
dirTB = Math.sign(originalDirLR * Math.sin(rotationInRadians) + originalDirTB * Math.cos(rotationInRadians)); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
and you thought you were done with geometry in school? 🎒
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
SOHCAHTOA!!!!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Tested out in a number of different scenarios and seems to be working well. Good stuff! 😄
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice! Works as expected! I will say the snapping to other elements, especially if there are A LOT of elements feels a little jarring. But that's maybe not something we can easily change, since it is the expected behavior.
Screen.Recording.2024-03-22.at.1.40.52.PM.mov
enableCustomables = () => { | ||
this.moveable!.props = { | ||
dimensionViewable: true, | ||
constraintViewable: true, | ||
settingsViewable: true, | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
+100
More relatively low hanging fruit similar to #80407
Add ability to rotate canvas elements via the rotatable functionality that already exists inside the moveable library. This was previously implemented temporarily for the cancad hackathon project
Screen.Recording.2024-03-21.at.1.51.35.PM.mov
TODO
Known issues / next steps