Skip to content
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

Re-Land "Refactor StrokeAlign to allow double values." (#108339) #110234

Merged
merged 5 commits into from Aug 25, 2022

Conversation

gspencergoog
Copy link
Contributor

@gspencergoog gspencergoog commented Aug 25, 2022

Description

This re-lands #108339 with some updates that keep the rendering the same as it was before so that they don't break golden tests. There are still some acceptable very small (one grey level) rounding differences in BoxBorder rendering, but everything else is closer to where it should have been, especially the corners on zero-width rounded rectangles, and zero-radius corners on ContinuousRectangleBorders.

I also renamed the sample, and linked it to the BorderSide.strokeAlign member docs.

The first commit is the original re-land, and the subsequent commits are my changes.

Related Issue: #106362

cc @bernaferrari

internal reference: b/243217872
G3Fix: cl/469882656

@flutter-dashboard flutter-dashboard bot added d: api docs Issues with https://api.flutter.dev/ d: examples Sample code and demos documentation f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. team Infra upgrades, team productivity, code health, technical debt. See also team: labels. labels Aug 25, 2022
Comment on lines 129 to 139
if (side.width == 0.0) {
canvas.drawRRect(borderRadius.resolve(textDirection).toRRect(rect), side.toPaint());
} else {
final Paint paint = Paint()
..color = side.color;
final RRect borderRect = borderRadius.resolve(textDirection).toRRect(rect);
final RRect inner = borderRect.deflate(side.strokeInset);
final RRect outer = borderRect.inflate(side.strokeOutset);
canvas.drawDRRect(outer, inner, paint);
}
break;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is canvas.drawRRect better than break;? I'm curious if there was a difference.

Your break; in 139 is 'unecessary' (if you add, you might want to add in 130, after drawRRect, and on the other borders. But break = nothing so it doesn't matter.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I realize that it doesn't do anything, but it provides consistency with the other case statement, and if a new case is added, the person adding it won't need to add a break.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, sure. Feel free to add to the other borders if you feel it is relevant, I think only the Continous or Beveled have it. The other ones don't.

@bernaferrari
Copy link
Contributor

Thanks for your persistence on this!

@bernaferrari
Copy link
Contributor

I also added an additional sample to the BorderSide.strokeAlign member.

Isn't this the previous sample that we made and got merged/reverted/re-merged/re-reverted? I'm kind of confused. But everything is ok.

@gspencergoog
Copy link
Contributor Author

Isn't this the previous sample that we made and got merged/reverted/re-merged/re-reverted? I'm kind of confused. But everything is ok.

Yeah, could be. :-). I just noticed it wasn't linked in the docs, and that the files were sitting on my disk, so I added them.

adjustedRect = borderRect;
break;
}
final RRect adjustedRect = borderRect.deflate(ui.lerpDouble(side.width, 0, side.strokeAlign)!);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you are using an older version. The one that was merged didn't have this. We replace the lerp with strokeInset.

image

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oooh, thanks for catching that, I'll make sure I'm reverting the right thing.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wait... I'm not seeing the same thing you are.

In both the originally landed PR, and here, the line is:

final RRect adjustedRect = borderRect.deflate(ui.lerpDouble(side.width, 0, side.strokeAlign)!);

You're looking at line 100 on the right, not line 296.

The real question is: should that be changed? It seems to work as-is.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're right, though, that the example is the same as the original, I just linked it into the docs, and renamed it to match the naming convention.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, forgive me. I got confused and looked in the wrong place. It was late at night 😅.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No worries.

Copy link
Contributor

@HansMuller HansMuller left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@bernaferrari
Copy link
Contributor

I just double-checked everything, everything looks good to me.

@gspencergoog gspencergoog added the autosubmit Merge PR when tree becomes green via auto submit App label Aug 25, 2022
@auto-submit auto-submit bot merged commit fefb2b0 into flutter:master Aug 25, 2022
engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Aug 25, 2022
engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Aug 26, 2022
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 26, 2022
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 26, 2022
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 26, 2022
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 26, 2022
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 26, 2022
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 26, 2022
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 26, 2022
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 26, 2022
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 26, 2022
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 26, 2022
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 26, 2022
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 26, 2022
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 29, 2022
@gspencergoog gspencergoog deleted the stroke_align branch October 7, 2022 22:06
/// - [inside] provides padding with full [BorderSide.width].
/// - [center] provides padding with half [BorderSide.width].
/// - [outside] provides zero padding, as stroke is drawn entirely outside.
enum StrokeAlign {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why is removing this not a breaking change? the code I wrote a few months ago became red w/o any pointers on why or how to fix it. i had to go into the flutter code, see the last changing commit and go through the PR to understand the reason and cause of the breakage. am i missing something?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AFAIK it is complicated, there is no easy way to keep that without making a weird class that acts as a shortcut for doubles, even though I tried, it was weird and non-standard, so BorderSide.strokeAlignInside became the default (you can read the discussion in the original PR). The "part 1" and "part 2" commits were like 2 months apart and strokeAlign was still really new when it was modified, but due to how Flutter stable works, they ended up being like 6 months apart.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmm that makes sense. if only dart supported union types natively.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Me too, but we can only hope they prioritize that for 2024.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
autosubmit Merge PR when tree becomes green via auto submit App d: api docs Issues with https://api.flutter.dev/ d: examples Sample code and demos f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. team Infra upgrades, team productivity, code health, technical debt. See also team: labels.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants