Skip to content

Commit d6501a3

Browse files
iamAbhi-916iamAbhi-916
authored
Text : Added EllipsizeMode for tail and clip alignment (#14660)
* updated ellipsis to respect tail and clip behaviour , for head , middle follow defaulty tail behaviour * patched updateTextAlignment method * Change files * pathced branch , lint fix , lint format * updated snapshots * added layout changes to TextLayoutManager * lint fix and format * updated snapshots * updated snapshot Pressable component * updated to remove extra text_layout null check * removed comments * format and lint:fix
1 parent 4757284 commit d6501a3

File tree

6 files changed

+105
-63
lines changed

6 files changed

+105
-63
lines changed

‎change/react-native-windows-1efdb03b-a0af-4ffa-a274-a0c43f757681.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "prerelease",
3+
"comment": "updated ellipsis to respect tail and clip behaviour , for head , middle follow defaulty tail behaviour",
4+
"packageName": "react-native-windows",
5+
"email": "74712637+iamAbhi-916@users.noreply.github.com",
6+
"dependentChangeType": "patch"
7+
}

‎packages/e2e-test-app-fabric/test/__snapshots__/LegacyTextHitTestTest.test.ts.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -342,8 +342,8 @@ exports[`LegacyTextHitTestTest WrappedLTRInRTLFlowEdgeCaseNotPressable 1`] = `
342342
"AutomationId": "pressed-state",
343343
"ControlType": 50020,
344344
"LocalizedControlType": "text",
345-
"Name": "Pressed: 1 times.",
346-
"TextRangePattern.GetText": "Pressed: 1 times.",
345+
"Name": "Pressed: 0 times.",
346+
"TextRangePattern.GetText": "Pressed: 0 times.",
347347
},
348348
"Component Tree": {
349349
"Type": "Microsoft.ReactNative.Composition.ParagraphComponentView",

‎packages/e2e-test-app-fabric/test/__snapshots__/LegacyTextInputTest.test.ts.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,7 @@ onFocus
162162
"Visual Tree": {
163163
"Comment": "textinput-log",
164164
"Offset": "0, 0, 0",
165-
"Size": "998, 839",
165+
"Size": "998, 745",
166166
"Visual Type": "SpriteVisual",
167167
},
168168
}

‎packages/e2e-test-app-fabric/test/__snapshots__/TextComponentTest.test.ts.snap‎

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ exports[`Text Tests Padding can be added to Text 1`] = `
1818
"Visual Tree": {
1919
"Comment": "text-padding",
2020
"Offset": "0, 0, 0",
21-
"Size": "916, 39",
21+
"Size": "916, 40",
2222
"Visual Type": "SpriteVisual",
2323
},
2424
}
@@ -234,7 +234,7 @@ exports[`Text Tests Text can be restricted to one line 1`] = `
234234
"Visual Tree": {
235235
"Comment": "text-one-line",
236236
"Offset": "0, 0, 0",
237-
"Size": "300, 19",
237+
"Size": "300, 20",
238238
"Visual Type": "SpriteVisual",
239239
},
240240
}
@@ -258,7 +258,7 @@ exports[`Text Tests Text can be selectable 1`] = `
258258
"Visual Tree": {
259259
"Comment": "text-selectable",
260260
"Offset": "0, 0, 0",
261-
"Size": "916, 20",
261+
"Size": "916, 19",
262262
"Visual Type": "SpriteVisual",
263263
},
264264
}
@@ -282,7 +282,7 @@ exports[`Text Tests Text can have a color 1`] = `
282282
"Visual Tree": {
283283
"Comment": "text-color",
284284
"Offset": "0, 0, 0",
285-
"Size": "916, 20",
285+
"Size": "916, 19",
286286
"Visual Type": "SpriteVisual",
287287
},
288288
}
@@ -306,7 +306,7 @@ exports[`Text Tests Text can have a customized selection color 1`] = `
306306
"Visual Tree": {
307307
"Comment": "text-selection-color",
308308
"Offset": "0, 0, 0",
309-
"Size": "916, 19",
309+
"Size": "916, 20",
310310
"Visual Type": "SpriteVisual",
311311
},
312312
}
@@ -330,7 +330,7 @@ exports[`Text Tests Text can have a size 1`] = `
330330
"Visual Tree": {
331331
"Comment": "text-size",
332332
"Offset": "0, 0, 0",
333-
"Size": "916, 31",
333+
"Size": "916, 32",
334334
"Visual Type": "SpriteVisual",
335335
},
336336
}
@@ -482,12 +482,12 @@ exports[`Text Tests Text can have advanced borders 1`] = `
482482
},
483483
{
484484
"Offset": "0, 38, 0",
485-
"Size": "916, 39",
485+
"Size": "916, 40",
486486
"Visual Type": "SpriteVisual",
487487
"__Children": [
488488
{
489489
"Offset": "0, 0, 0",
490-
"Size": "916, 39",
490+
"Size": "916, 40",
491491
"Visual Type": "SpriteVisual",
492492
"__Children": [
493493
{
@@ -523,7 +523,7 @@ exports[`Text Tests Text can have advanced borders 1`] = `
523523
"Color": "rgba(0, 0, 255, 255)",
524524
},
525525
"Offset": "-10, 20, 0",
526-
"Size": "10, 13",
526+
"Size": "10, 14",
527527
"Visual Type": "SpriteVisual",
528528
},
529529
{
@@ -559,7 +559,7 @@ exports[`Text Tests Text can have advanced borders 1`] = `
559559
"Color": "rgba(0, 0, 255, 255)",
560560
},
561561
"Offset": "0, 22, 0",
562-
"Size": "20, 9",
562+
"Size": "20, 10",
563563
"Visual Type": "SpriteVisual",
564564
},
565565
],
@@ -568,12 +568,12 @@ exports[`Text Tests Text can have advanced borders 1`] = `
568568
},
569569
{
570570
"Offset": "0, 77, 0",
571-
"Size": "916, 22",
571+
"Size": "916, 21",
572572
"Visual Type": "SpriteVisual",
573573
"__Children": [
574574
{
575575
"Offset": "0, 0, 0",
576-
"Size": "916, 22",
576+
"Size": "916, 21",
577577
"Visual Type": "SpriteVisual",
578578
"__Children": [
579579
{
@@ -609,7 +609,7 @@ exports[`Text Tests Text can have advanced borders 1`] = `
609609
"Color": "rgba(0, 128, 0, 255)",
610610
},
611611
"Offset": "-1, 4, 0",
612-
"Size": "1, 14",
612+
"Size": "1, 13",
613613
"Visual Type": "SpriteVisual",
614614
},
615615
{
@@ -645,7 +645,7 @@ exports[`Text Tests Text can have advanced borders 1`] = `
645645
"Color": "rgba(0, 128, 0, 255)",
646646
},
647647
"Offset": "0, 4, 0",
648-
"Size": "1, 14",
648+
"Size": "1, 13",
649649
"Visual Type": "SpriteVisual",
650650
},
651651
],
@@ -799,12 +799,12 @@ exports[`Text Tests Text can have borders 1`] = `
799799
},
800800
{
801801
"Offset": "100, 127, 0",
802-
"Size": "716, 138",
802+
"Size": "716, 139",
803803
"Visual Type": "SpriteVisual",
804804
"__Children": [
805805
{
806806
"Offset": "0, 0, 0",
807-
"Size": "716, 138",
807+
"Size": "716, 139",
808808
"Visual Type": "SpriteVisual",
809809
"__Children": [
810810
{
@@ -886,7 +886,7 @@ exports[`Text Tests Text can have decoration lines: Solid Line Through 1`] = `
886886
"Visual Tree": {
887887
"Comment": "text-decoration-solid-linethru",
888888
"Offset": "0, 0, 0",
889-
"Size": "916, 19",
889+
"Size": "916, 20",
890890
"Visual Type": "SpriteVisual",
891891
},
892892
}
@@ -1042,24 +1042,24 @@ exports[`Text Tests Text can have nested views 1`] = `
10421042
"__Children": [
10431043
{
10441044
"Offset": "0, 0, 0",
1045-
"Size": "916, 19",
1045+
"Size": "916, 20",
10461046
"Visual Type": "SpriteVisual",
10471047
"__Children": [
10481048
{
10491049
"Offset": "0, 0, 0",
1050-
"Size": "916, 19",
1050+
"Size": "916, 20",
10511051
"Visual Type": "SpriteVisual",
10521052
},
10531053
],
10541054
},
10551055
{
10561056
"Offset": "0, 18, 0",
1057-
"Size": "916, 24",
1057+
"Size": "916, 23",
10581058
"Visual Type": "SpriteVisual",
10591059
"__Children": [
10601060
{
10611061
"Offset": "0, 0, 0",
1062-
"Size": "916, 24",
1062+
"Size": "916, 23",
10631063
"Visual Type": "SpriteVisual",
10641064
"__Children": [
10651065
{
@@ -1105,7 +1105,7 @@ exports[`Text Tests Text can have shadows 1`] = `
11051105
"Visual Tree": {
11061106
"Comment": "text-shadow",
11071107
"Offset": "0, 0, 0",
1108-
"Size": "916, 28",
1108+
"Size": "916, 27",
11091109
"Visual Type": "SpriteVisual",
11101110
},
11111111
}
@@ -1129,7 +1129,7 @@ exports[`Text Tests Text can wrap 1`] = `
11291129
"Visual Tree": {
11301130
"Comment": "text-wrap",
11311131
"Offset": "0, 0, 0",
1132-
"Size": "300, 38",
1132+
"Size": "300, 39",
11331133
"Visual Type": "SpriteVisual",
11341134
},
11351135
}
@@ -1228,12 +1228,12 @@ exports[`Text Tests Texts can clip inline View/Images 1`] = `
12281228
"__Children": [
12291229
{
12301230
"Offset": "0, 0, 0",
1231-
"Size": "916, 19",
1231+
"Size": "916, 20",
12321232
"Visual Type": "SpriteVisual",
12331233
"__Children": [
12341234
{
12351235
"Offset": "0, 0, 0",
1236-
"Size": "916, 19",
1236+
"Size": "916, 20",
12371237
"Visual Type": "SpriteVisual",
12381238
},
12391239
],
@@ -1286,12 +1286,12 @@ exports[`Text Tests Texts can clip inline View/Images 1`] = `
12861286
},
12871287
{
12881288
"Offset": "0, 103, 0",
1289-
"Size": "916, 20",
1289+
"Size": "916, 19",
12901290
"Visual Type": "SpriteVisual",
12911291
"__Children": [
12921292
{
12931293
"Offset": "0, 0, 0",
1294-
"Size": "916, 20",
1294+
"Size": "916, 19",
12951295
"Visual Type": "SpriteVisual",
12961296
},
12971297
],

‎vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp‎

Lines changed: 35 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,10 @@ void ParagraphComponentView::updateProps(
6363
updateTextAlignment(newViewProps.textAttributes.alignment);
6464
}
6565

66+
if (oldViewProps.paragraphAttributes.ellipsizeMode != newViewProps.paragraphAttributes.ellipsizeMode) {
67+
m_textLayout = nullptr;
68+
}
69+
6670
if (oldViewProps.paragraphAttributes.adjustsFontSizeToFit != newViewProps.paragraphAttributes.adjustsFontSizeToFit) {
6771
m_requireRedraw = true;
6872
}
@@ -100,7 +104,7 @@ void ParagraphComponentView::FinalizeUpdates(
100104

101105
facebook::react::SharedViewEventEmitter ParagraphComponentView::eventEmitterAtPoint(
102106
facebook::react::Point pt) noexcept {
103-
if (m_attributedStringBox.getValue().getFragments().size()) {
107+
if (m_attributedStringBox.getValue().getFragments().size() && m_textLayout) {
104108
BOOL isTrailingHit = false;
105109
BOOL isInside = false;
106110
DWRITE_HIT_TEST_METRICS metrics;
@@ -123,35 +127,8 @@ facebook::react::SharedViewEventEmitter ParagraphComponentView::eventEmitterAtPo
123127

124128
void ParagraphComponentView::updateTextAlignment(
125129
const std::optional<facebook::react::TextAlignment> &fbAlignment) noexcept {
130+
// Reset text layout to force recreation with new alignment
126131
m_textLayout = nullptr;
127-
if (!m_textLayout)
128-
return;
129-
130-
DWRITE_TEXT_ALIGNMENT alignment = DWRITE_TEXT_ALIGNMENT_LEADING;
131-
if (fbAlignment) {
132-
switch (*fbAlignment) {
133-
case facebook::react::TextAlignment::Center:
134-
alignment = DWRITE_TEXT_ALIGNMENT_CENTER;
135-
break;
136-
case facebook::react::TextAlignment::Justified:
137-
alignment = DWRITE_TEXT_ALIGNMENT_JUSTIFIED;
138-
break;
139-
case facebook::react::TextAlignment::Left:
140-
alignment = DWRITE_TEXT_ALIGNMENT_LEADING;
141-
break;
142-
case facebook::react::TextAlignment::Right:
143-
alignment = DWRITE_TEXT_ALIGNMENT_TRAILING;
144-
break;
145-
// TODO use LTR values
146-
case facebook::react::TextAlignment::Natural:
147-
alignment = DWRITE_TEXT_ALIGNMENT_LEADING;
148-
break;
149-
default:
150-
assert(false);
151-
}
152-
}
153-
// TODO
154-
// m_textFormat->SetTextAlignment(alignment);
155132
}
156133

157134
void ParagraphComponentView::OnRenderingDeviceLost() noexcept {
@@ -163,7 +140,6 @@ void ParagraphComponentView::updateVisualBrush() noexcept {
163140

164141
// TODO
165142
// updateTextAlignment(paragraphProps.textAttributes.alignment);
166-
167143
if (!m_textLayout) {
168144
facebook::react::LayoutConstraints constraints;
169145
constraints.maximumSize.width =
@@ -174,6 +150,35 @@ void ParagraphComponentView::updateVisualBrush() noexcept {
174150
facebook::react::WindowsTextLayoutManager::GetTextLayout(
175151
m_attributedStringBox, m_paragraphAttributes, constraints, m_textLayout);
176152

153+
// Apply text alignment after creating the text layout
154+
if (m_textLayout) {
155+
const auto &props = paragraphProps();
156+
DWRITE_TEXT_ALIGNMENT alignment = DWRITE_TEXT_ALIGNMENT_LEADING;
157+
if (props.textAttributes.alignment) {
158+
switch (*props.textAttributes.alignment) {
159+
case facebook::react::TextAlignment::Center:
160+
alignment = DWRITE_TEXT_ALIGNMENT_CENTER;
161+
break;
162+
case facebook::react::TextAlignment::Justified:
163+
alignment = DWRITE_TEXT_ALIGNMENT_JUSTIFIED;
164+
break;
165+
case facebook::react::TextAlignment::Left:
166+
alignment = DWRITE_TEXT_ALIGNMENT_LEADING;
167+
break;
168+
case facebook::react::TextAlignment::Right:
169+
alignment = DWRITE_TEXT_ALIGNMENT_TRAILING;
170+
break;
171+
case facebook::react::TextAlignment::Natural:
172+
alignment = DWRITE_TEXT_ALIGNMENT_LEADING;
173+
break;
174+
default:
175+
alignment = DWRITE_TEXT_ALIGNMENT_LEADING;
176+
break;
177+
}
178+
}
179+
winrt::check_hresult(m_textLayout->SetTextAlignment(alignment));
180+
}
181+
177182
requireNewBrush = true;
178183
}
179184

@@ -275,9 +280,7 @@ void ParagraphComponentView::DrawText() noexcept {
275280
d2dDeviceContext->Clear(
276281
viewProps()->backgroundColor ? theme()->D2DColor(*viewProps()->backgroundColor)
277282
: D2D1::ColorF(D2D1::ColorF::Black, 0.0f));
278-
279283
const auto &props = paragraphProps();
280-
281284
RenderText(
282285
*d2dDeviceContext,
283286
*m_textLayout,

0 commit comments

Comments
 (0)