fix: comment min size #7915
Merged
fix: comment min size #7915
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
BeksOmega
force-pushed
the
fix/comment-min-size
branch
from
4144737
to
6fb1edd
Compare
BeksOmega
force-pushed
the
fix/comment-min-size
branch
from
6fb1edd
to
cddbee5
Compare
rachel-fenichel
approved these changes
Mar 11, 2024
core/utils/size.ts
Outdated
| @@ -43,4 +43,20 @@ export class Size { | |||
| } | |||
| return a.width === b.width && a.height === b.height; | |||
| } | |||
|
|
|||
| /** | |||
| * Returns a new size with the maximum width and heigh values out of both | |||
| // Loop through listeners backwards in case they remove themselves. | ||
| for (let i = this.textChangeListeners.length - 1; i >= 0; i--) { | ||
| this.textChangeListeners[i](oldText, this.text); | ||
| } | ||
| } | ||
|
|
||
| private updateTextPreview(text: string) { |
| return new Size(width, height); | ||
| } | ||
|
|
||
| private calcDeleteMargin(topBarSize: Size, deleteSize: Size) { |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The basics
The details
Resolves
Fixes N/A
Proposed Changes + Reasons
Makes it so we calculate the minimum size of the comment based on the size of the preview text. This way we'll never get preview text hanging off the edge of the comment.
Alternatively, I could have tried to truncate the preview text to fit within the available area, but this is super inefficient because it requires continual trial and error and layout recalculation. So instead of fitting the text to the area, I fit the area to the text.
Ideally the browser would just truncate the preview and add ellipses for us (then we could fit the text to the area), but SVG doesn't support that! So instead we have to do this complicated madness :P
Test Coverage
Tested that the minimum size is properly set with different text width, and with or without the delete icon.
Documentation
N/A
Additional Information
This doesn't work exactly like MakeCode's setup. For them, they always set the width to a specific width when collapsing (the length of 12
mcharacters, plus the ellipse) which causes a bug where it overlaps their icons. Instead when collapsing, we keep the width of the comment the same, just hide the text area.They are able to implement their behavior using the
onCollapselistener to set the width explicitly. So this isn't a blocker even though it's a difference in behavior.But writing this did make me realize that I might need to change the calculation for positioning the preview text slightly to do what they want, so I'll look into that in a follow up.Tested and the current setup should be fine.