Skip to content

Commit

Permalink
feat: Support text align on new text rendering pipeline (#3147)
Browse files Browse the repository at this point in the history
  • Loading branch information
luanpotter authored May 6, 2024
1 parent ce9392a commit 194d553
Show file tree
Hide file tree
Showing 4 changed files with 44 additions and 2 deletions.
10 changes: 9 additions & 1 deletion examples/lib/stories/rendering/rendering.dart
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,15 @@ void addRenderingStories(Dashbook dashbook) {
)
..add(
'Rich Text',
(_) => GameWidget(game: RichTextExample()),
(context) => GameWidget(
game: RichTextExample(
textAlign: context.listProperty(
'Text align',
TextAlign.left,
TextAlign.values,
),
),
),
codeLink: baseLink('rendering/rich_text_example.dart'),
info: RichTextExample.description,
);
Expand Down
8 changes: 8 additions & 0 deletions examples/lib/stories/rendering/rich_text_example.dart
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@ import 'package:flame/text.dart';
import 'package:flutter/painting.dart';

class RichTextExample extends FlameGame {
final TextAlign textAlign;

RichTextExample({this.textAlign = TextAlign.left});

static const String description =
'A non-interactive example of how to render rich text in Flame.';

Expand All @@ -23,11 +27,15 @@ class RichTextExample extends FlameGame {
),
paragraph: BlockStyle(
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
textAlign: textAlign,
background: BackgroundStyle(
color: const Color(0xFF004D40),
borderColor: const Color(0xFFAAAAAA),
),
),
header1: BlockStyle(
textAlign: textAlign,
),
);
final document = DocumentRoot([
HeaderNode.simple('1984', level: 1),
Expand Down
25 changes: 24 additions & 1 deletion packages/flame/lib/src/text/nodes/text_block_node.dart
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import 'dart:ui';

import 'package:flame/src/text/common/utils.dart';
import 'package:flame/src/text/elements/group_element.dart';
import 'package:flame/text.dart';
Expand Down Expand Up @@ -26,6 +28,7 @@ abstract class TextBlockNode extends BlockNode {
final lines = <InlineTextElement>[];
final horizontalOffset = style.padding.left;
var verticalOffset = style.padding.top;
final textAlign = style.textAlign ?? TextAlign.left;
while (!layoutBuilder.isDone) {
final element = layoutBuilder.layOutNextLine(contentWidth);
if (element == null) {
Expand All @@ -36,7 +39,12 @@ abstract class TextBlockNode extends BlockNode {
} else {
final metrics = element.metrics;
assert(metrics.left == 0 && metrics.baseline == 0);
element.translate(horizontalOffset, verticalOffset + metrics.ascent);

final dx = horizontalOffset +
(contentWidth - metrics.width) * _relativeOffset(textAlign);
final dy = verticalOffset + metrics.ascent;
element.translate(dx, dy);

lines.add(element);
verticalOffset += metrics.height;
}
Expand All @@ -50,4 +58,19 @@ abstract class TextBlockNode extends BlockNode {
children: elements,
);
}

double _relativeOffset(TextAlign textAlign) {
return switch (textAlign) {
TextAlign.left => 0,
TextAlign.right => 1,
TextAlign.center => 0.5,
// NOTE: we do not support non-LRT text directions
TextAlign.start => 0,
TextAlign.end => 1,
// Not supported by Flame
TextAlign.justify => throw UnimplementedError(
'The text rendering pipeline cannot justify text.',
),
};
}
}
3 changes: 3 additions & 0 deletions packages/flame/lib/src/text/styles/block_style.dart
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,15 @@ class BlockStyle extends FlameTextStyle {
EdgeInsets? padding,
this.background,
this.text,
this.textAlign,
}) : _margin = margin,
_padding = padding;

final EdgeInsets? _margin;
final EdgeInsets? _padding;
final BackgroundStyle? background;
final InlineTextStyle? text;
final TextAlign? textAlign;

EdgeInsets get margin => _margin ?? EdgeInsets.zero;
EdgeInsets get padding => _padding ?? EdgeInsets.zero;
Expand All @@ -29,6 +31,7 @@ class BlockStyle extends FlameTextStyle {
padding: other._padding ?? _padding,
background: other.background ?? background,
text: FlameTextStyle.merge(text, other.text),
textAlign: other.textAlign ?? textAlign,
);
}
}

0 comments on commit 194d553

Please sign in to comment.