Skip to content
This repository was archived by the owner on Feb 25, 2025. It is now read-only.

[web] Implement style inheritance during paragraph construction #22365

Merged
merged 1 commit into from
Nov 6, 2020
Merged

[web] Implement style inheritance during paragraph construction #22365

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
162 changes: 160 additions & 2 deletions lib/web_ui/lib/src/engine/text/canvas_paragraph.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -300,6 +300,26 @@ abstract class StyleNode {
/// The resolved text style is equivalent to the entire ascendent chain of
/// parent style nodes.
EngineTextStyle resolveStyle();

ui.Color? get _color;
ui.TextDecoration? get _decoration;
ui.Color? get _decorationColor;
ui.TextDecorationStyle? get _decorationStyle;
double? get _decorationThickness;
ui.FontWeight? get _fontWeight;
ui.FontStyle? get _fontStyle;
ui.TextBaseline? get _textBaseline;
String? get _fontFamily;
List<String>? get _fontFamilyFallback;
List<ui.FontFeature>? get _fontFeatures;
double? get _fontSize;
double? get _letterSpacing;
double? get _wordSpacing;
double? get _height;
ui.Locale? get _locale;
ui.Paint? get _background;
ui.Paint? get _foreground;
List<ui.Shadow>? get _shadows;
}

/// Represents a non-root [StyleNode].
Expand All @@ -315,9 +335,91 @@ class ChildStyleNode extends StyleNode {

@override
EngineTextStyle resolveStyle() {
// TODO(mdebbar): combine all styles from the parent hierarchy.
return style;
return EngineTextStyle(
color: _color,
decoration: _decoration,
decorationColor: _decorationColor,
decorationStyle: _decorationStyle,
decorationThickness: _decorationThickness,
fontWeight: _fontWeight,
fontStyle: _fontStyle,
textBaseline: _textBaseline,
fontFamily: _fontFamily,
fontFamilyFallback: _fontFamilyFallback,
fontFeatures: _fontFeatures,
fontSize: _fontSize,
letterSpacing: _letterSpacing,
wordSpacing: _wordSpacing,
height: _height,
locale: _locale,
background: _background,
foreground: _foreground,
shadows: _shadows,
);
}

// Read these properties from the TextStyle associated with this node. If the
// property isn't defined, go to the parent node.

@override
ui.Color? get _color => style._color ?? parent._color;

@override
ui.TextDecoration? get _decoration => style._decoration ?? parent._decoration;

@override
ui.Color? get _decorationColor => style._decorationColor ?? parent._decorationColor;

@override
ui.TextDecorationStyle? get _decorationStyle => style._decorationStyle ?? parent._decorationStyle;

@override
double? get _decorationThickness => style._decorationThickness ?? parent._decorationThickness;

@override
ui.FontWeight? get _fontWeight => style._fontWeight ?? parent._fontWeight;

@override
ui.FontStyle? get _fontStyle => style._fontStyle ?? parent._fontStyle;

@override
ui.TextBaseline? get _textBaseline => style._textBaseline ?? parent._textBaseline;

@override
List<String>? get _fontFamilyFallback => style._fontFamilyFallback ?? parent._fontFamilyFallback;

@override
List<ui.FontFeature>? get _fontFeatures => style._fontFeatures ?? parent._fontFeatures;

@override
double? get _fontSize => style._fontSize ?? parent._fontSize;

@override
double? get _letterSpacing => style._letterSpacing ?? parent._letterSpacing;

@override
double? get _wordSpacing => style._wordSpacing ?? parent._wordSpacing;

@override
double? get _height => style._height ?? parent._height;

@override
ui.Locale? get _locale => style._locale ?? parent._locale;

@override
ui.Paint? get _background => style._background ?? parent._background;

@override
ui.Paint? get _foreground => style._foreground ?? parent._foreground;

@override
List<ui.Shadow>? get _shadows => style._shadows ?? parent._shadows;

// Font family is slightly different from the other properties above. It's
// never null on the TextStyle object, so we use `_isFontFamilyProvided` to
// check if font family is defined or not.
@override
String? get _fontFamily => style._isFontFamilyProvided ? style._fontFamily : parent._fontFamily;
}

/// The root style node for the paragraph.
Expand All @@ -342,6 +444,62 @@ class RootStyleNode extends StyleNode {
}
return style;
}

@override
ui.Color? get _color => null;

@override
ui.TextDecoration? get _decoration => null;

@override
ui.Color? get _decorationColor => null;

@override
ui.TextDecorationStyle? get _decorationStyle => null;

@override
double? get _decorationThickness => null;

@override
ui.FontWeight? get _fontWeight => paragraphStyle._fontWeight;
@override
ui.FontStyle? get _fontStyle => paragraphStyle._fontStyle;

@override
ui.TextBaseline? get _textBaseline => null;

@override
String? get _fontFamily => paragraphStyle._fontFamily;

@override
List<String>? get _fontFamilyFallback => null;

@override
List<ui.FontFeature>? get _fontFeatures => null;

@override
double? get _fontSize => paragraphStyle._fontSize;

@override
double? get _letterSpacing => null;

@override
double? get _wordSpacing => null;

@override
double? get _height => paragraphStyle._height;

@override
ui.Locale? get _locale => paragraphStyle._locale;

@override
ui.Paint? get _background => null;

@override
ui.Paint? get _foreground => null;

@override
List<ui.Shadow>? get _shadows => null;
}

/// Builds a [CanvasParagraph] containing text with the given styling
Expand Down
70 changes: 61 additions & 9 deletions lib/web_ui/lib/src/engine/text/paragraph.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -894,7 +894,38 @@ class EngineParagraphStyle implements ui.ParagraphStyle {

/// The web implementation of [ui.TextStyle].
class EngineTextStyle implements ui.TextStyle {
EngineTextStyle({
/// Constructs an [EngineTextStyle] with all properties being required.
///
/// This is good for call sites that need to be updated whenever a new
/// property is added to [EngineTextStyle]. Non-updated call sites will fail
/// the build otherwise.
factory EngineTextStyle({
required ui.Color? color,
required ui.TextDecoration? decoration,
required ui.Color? decorationColor,
required ui.TextDecorationStyle? decorationStyle,
required double? decorationThickness,
required ui.FontWeight? fontWeight,
required ui.FontStyle? fontStyle,
required ui.TextBaseline? textBaseline,
required String? fontFamily,
required List<String>? fontFamilyFallback,
required double? fontSize,
required double? letterSpacing,
required double? wordSpacing,
required double? height,
required ui.Locale? locale,
required ui.Paint? background,
required ui.Paint? foreground,
required List<ui.Shadow>? shadows,
required List<ui.FontFeature>? fontFeatures,
}) = EngineTextStyle.only;

/// Constructs an [EngineTextStyle] with only the given properties.
///
/// This constructor should be used sparingly in tests, for example. Or when
/// we know for sure that not all properties are needed.
EngineTextStyle.only({
ui.Color? color,
ui.TextDecoration? decoration,
ui.Color? decorationColor,
Expand Down Expand Up @@ -940,14 +971,20 @@ class EngineTextStyle implements ui.TextStyle {
_foreground = foreground,
_shadows = shadows;

factory EngineTextStyle.fromParagraphStyle(EngineParagraphStyle paragraphStyle) => EngineTextStyle(
fontWeight: paragraphStyle._fontWeight,
fontStyle: paragraphStyle._fontStyle,
fontFamily: paragraphStyle._fontFamily,
fontSize: paragraphStyle._fontSize,
height: paragraphStyle._height,
locale: paragraphStyle._locale,
);
/// Constructs an [EngineTextStyle] by reading properties from an
/// [EngineParagraphStyle].
factory EngineTextStyle.fromParagraphStyle(
EngineParagraphStyle paragraphStyle,
) {
return EngineTextStyle.only(
fontWeight: paragraphStyle._fontWeight,
fontStyle: paragraphStyle._fontStyle,
fontFamily: paragraphStyle._fontFamily,
fontSize: paragraphStyle._fontSize,
height: paragraphStyle._height,
locale: paragraphStyle._locale,
);
}

final ui.Color? _color;
final ui.TextDecoration? _decoration;
Expand Down Expand Up @@ -1281,10 +1318,13 @@ class DomParagraphBuilder implements ui.ParagraphBuilder {
ui.TextDecoration? decoration;
ui.Color? decorationColor;
ui.TextDecorationStyle? decorationStyle;
double? decorationThickness;
ui.FontWeight? fontWeight = _paragraphStyle._fontWeight;
ui.FontStyle? fontStyle = _paragraphStyle._fontStyle;
ui.TextBaseline? textBaseline;
String fontFamily = _paragraphStyle._fontFamily ?? DomRenderer.defaultFontFamily;
List<String>? fontFamilyFallback;
List<ui.FontFeature>? fontFeatures;
double fontSize = _paragraphStyle._fontSize ?? DomRenderer.defaultFontSize;
final ui.TextAlign textAlign = _paragraphStyle._effectiveTextAlign;
final ui.TextDirection textDirection = _paragraphStyle._effectiveTextDirection;
Expand Down Expand Up @@ -1316,6 +1356,9 @@ class DomParagraphBuilder implements ui.ParagraphBuilder {
if (style._decorationStyle != null) {
decorationStyle = style._decorationStyle;
}
if (style._decorationThickness != null) {
decorationThickness = style._decorationThickness;
}
if (style._fontWeight != null) {
fontWeight = style._fontWeight;
}
Expand All @@ -1326,6 +1369,12 @@ class DomParagraphBuilder implements ui.ParagraphBuilder {
textBaseline = style._textBaseline;
}
fontFamily = style._fontFamily;
if (style._fontFamilyFallback != null) {
fontFamilyFallback = style._fontFamilyFallback;
}
if (style._fontFeatures != null) {
fontFeatures = style._fontFeatures;
}
if (style._fontSize != null) {
fontSize = style._fontSize!;
}
Expand Down Expand Up @@ -1358,10 +1407,13 @@ class DomParagraphBuilder implements ui.ParagraphBuilder {
decoration: decoration,
decorationColor: decorationColor,
decorationStyle: decorationStyle,
decorationThickness: decorationThickness,
fontWeight: fontWeight,
fontStyle: fontStyle,
textBaseline: textBaseline,
fontFamily: fontFamily,
fontFamilyFallback: fontFamilyFallback,
fontFeatures: fontFeatures,
fontSize: fontSize,
letterSpacing: letterSpacing,
wordSpacing: wordSpacing,
Expand Down
Loading