feat(user feedback): Adds toolbar for cropping and annotating #15282
Conversation
| </div> | ||
| {options._experiments.annotations && ( | ||
| <div class="editor__tool-container"> | ||
| <div /> |
There was a problem hiding this comment.
Extra div for reset button in a future PR
| </button> | ||
| </div> | ||
| <div /> |
There was a problem hiding this comment.
Extra div for colour picking in a future PR
| ></CropCorner> | ||
| </div> | ||
| )} | ||
| {(!options._experiments.annotations || isCropping) && ( |
There was a problem hiding this comment.
To be moved into the toolbar area in a future PR, so I didn't combine it with above
size-limit report 📦
|
| const [isCropping, setIsCropping] = hooks.useState(true); | ||
| const [isAnnotating, setIsAnnotating] = hooks.useState(false); |
There was a problem hiding this comment.
We might want to make these a single state where the value is more like an enum.
Right now i'm noticing spots like this:
setIsCropping(!isCropping);
setIsAnnotating(false);
which will only get more annoying if more tools get added. Not something for now, but when the next one gets added this'll be a fix.
| if (!isCropping) { | ||
| return; | ||
| } |
There was a problem hiding this comment.
is this important to be after the clearRect() call? which rect is being cleared in this case
There was a problem hiding this comment.
it is important to be after the clearRect. It removes the white border that's used to show that it's in the cropping state. Here's waht it would look like if it was before clearRect:
With annotation option:
Without annotation option (to confirm that it looks the same as before):
Closes #15252