feat: per-side border widths #836
Merged
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
|
Linux build is failing for reasons I can't determine. The build also took 49 minutes :p |
Check the skia bindings |
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #836 +/- ##
==========================================
+ Coverage 75.76% 76.01% +0.25%
==========================================
Files 207 207
Lines 23514 23831 +317
==========================================
+ Hits 17816 18116 +300
- Misses 5698 5715 +17 ☔ View full report in Codecov by Sentry. |
Merged
marc2332
requested changes
Sep 15, 2024
|
Rendering quality has been fixed. Example has been updated as part of #889 (which is dependent on this PR). |
marc2332
requested changes
Sep 28, 2024
Co-authored-by: Marc Espin <[email protected]>
marc2332
requested changes
Sep 28, 2024
marc2332
approved these changes
Sep 28, 2024
marc2332
added a commit
that referenced
this pull request
Sep 28, 2024
* feat: per-side border widths * refactor: make `BorderWidth::is_all_zero` more sane * fix: wrong operator in `is_all_zero` * implement parsing for per-side widths * feat: impl `Display` for `Border` * fix lints * fix another lint * chore: fmt * fix tests * fix: add `RRect::rect` to mocked engine * chore: improve border test coverage * fix: border test assertion * fix: radius offset calculations for different border alignments * clean up border drawing code * fmt * revert needless `get_rounded_rect` name change * format * add `PathFillType` to mocked engine * remove `border_align` and place it in main syntax * add support for multiple borders per element * mock `Path::set_fill_type` * update docs * update `border` attribute documentation * fix some poor wording in the border docs * fmt * fix jagged antialiasing on borders * lint * fmt * mock `Canvas::draw_drrect` and `RRect::bounds` * update border example * fix borders not rendering with no background * feat: per-side border widths (#836) * feat: per-side border widths * refactor: make `BorderWidth::is_all_zero` more sane * fix: wrong operator in `is_all_zero` * implement parsing for per-side widths * feat: impl `Display` for `Border` * fix lints * fix another lint * chore: fmt * fix tests * fix: add `RRect::rect` to mocked engine * chore: improve border test coverage * fix: border test assertion * fix: radius offset calculations for different border alignments * clean up border drawing code * fmt * revert needless `get_rounded_rect` name change * format * add `PathFillType` to mocked engine * mock `Path::set_fill_type` * update docs * fix jagged antialiasing on borders * lint * mock `Canvas::draw_drrect` and `RRect::bounds` * simplify border visibility check Co-authored-by: Marc Espin <[email protected]> --------- Co-authored-by: Marc Espin <[email protected]> * fix: checkbox component * feat: per-side border widths * refactor: make `BorderWidth::is_all_zero` more sane * fix: wrong operator in `is_all_zero` * implement parsing for per-side widths * feat: impl `Display` for `Border` * fix lints * fix another lint * chore: fmt * chore: improve border test coverage * fix: border test assertion * fix: radius offset calculations for different border alignments * clean up border drawing code * fmt * revert needless `get_rounded_rect` name change * format * remove `border_align` and place it in main syntax * add support for multiple borders per element * update docs * update `border` attribute documentation * fix some poor wording in the border docs * fmt * fix jagged antialiasing on borders * lint * fmt * update border example * fix borders not rendering with no background * fix: stray `border_align` --------- Co-authored-by: Marc Espin <[email protected]>
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.
Adds support for individual border-widths per side. Made based on observation of figma's stroke rendering system.
Basic Rundown
Rather than using Skia's stroking API, we instead draw the border as a second path (the "border path") with either a larger or smaller corner radius (the offset for roundness is calculated by
RectElement::border_corner_radius_offset). We then mask out a smaller rect (the "border clip path") from the inside of the border rect.What this gives us is the ability to offset the border rect allowing for different widths on each side.
Current Limitations
The parser requires the user to input exactly four width values and no less currently. This means all examples and devtools are currently broken. I need to find a way to parse the widths in a clean way.Devtools are broken as mentioned before.Zero-width borders bleed through from under the rect if they happen to render on a subpixel.This is a skia bug and will befixedavoided once pixel snapping is implemented. (feat: Physical pixel snapping #837)Some cursed showcases
Superellipse roundness with variable widths on each side. (this rendering is actually more correct than figma's, which doesn't do squircle calculations on borders :D)
Variable widths with variable corner radius.
