From 9356308bf5665e828bcc5aec45d0d7f5adf48ec6 Mon Sep 17 00:00:00 2001 From: Abhijeet Jha <74712637+iamAbhi-916@users.noreply.github.com> Date: Mon, 12 May 2025 16:31:28 +0530 Subject: [PATCH 01/12] updated ellipsis to respect tail and clip behaviour , for head , middle follow defaulty tail behaviour --- .../Composition/ParagraphComponentView.cpp | 54 +++++++++++++++++-- 1 file changed, 50 insertions(+), 4 deletions(-) diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp index d5b75881ce0..e0d07587b5a 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp @@ -61,6 +61,11 @@ void ParagraphComponentView::updateProps( updateTextAlignment(newViewProps.textAttributes.alignment); } + // Reset m_textLayout when ellipsizeMode changes + if (oldViewProps.paragraphAttributes.ellipsizeMode != newViewProps.paragraphAttributes.ellipsizeMode) { + m_textLayout = nullptr; + } + Super::updateProps(props, oldProps); } @@ -117,7 +122,6 @@ facebook::react::SharedViewEventEmitter ParagraphComponentView::eventEmitterAtPo void ParagraphComponentView::updateTextAlignment( const std::optional &fbAlignment) noexcept { - m_textLayout = nullptr; if (!m_textLayout) return; @@ -136,7 +140,6 @@ void ParagraphComponentView::updateTextAlignment( case facebook::react::TextAlignment::Right: alignment = DWRITE_TEXT_ALIGNMENT_TRAILING; break; - // TODO use LTR values case facebook::react::TextAlignment::Natural: alignment = DWRITE_TEXT_ALIGNMENT_LEADING; break; @@ -144,8 +147,9 @@ void ParagraphComponentView::updateTextAlignment( assert(false); } } - // TODO - // m_textFormat->SetTextAlignment(alignment); + + // Apply the alignment to the text layout + winrt::check_hresult(m_textLayout->SetTextAlignment(alignment)); } void ParagraphComponentView::OnRenderingDeviceLost() noexcept { @@ -270,6 +274,48 @@ void ParagraphComponentView::DrawText() noexcept { const auto &props = paragraphProps(); + if (m_textLayout) { + DWRITE_TEXT_METRICS metrics; + winrt::check_hresult(m_textLayout->GetMetrics(&metrics)); + + float maxWidth = m_layoutMetrics.frame.size.width - m_layoutMetrics.contentInsets.left - + m_layoutMetrics.contentInsets.right; + + if (metrics.width > maxWidth) { + m_textLayout->SetMaxWidth(maxWidth); + } + + // Ensure alignment is applied correctly + updateTextAlignment(props.textAttributes.alignment); + + // Apply DWRITE_TRIMMING for ellipsizeMode + DWRITE_TRIMMING trimming = {}; + winrt::com_ptr ellipsisSign; + + switch (props.paragraphAttributes.ellipsizeMode) { + case facebook::react::EllipsizeMode::Tail: + trimming.granularity = DWRITE_TRIMMING_GRANULARITY_CHARACTER; + break; + case facebook::react::EllipsizeMode::Clip: + trimming.granularity = DWRITE_TRIMMING_GRANULARITY_NONE; + break; + default: + trimming.granularity = DWRITE_TRIMMING_GRANULARITY_CHARACTER; // Default to tail behavior + break; + } + + // Use IDWriteFactory to create the ellipsis trimming sign + winrt::com_ptr dwriteFactory; + HRESULT hr = DWriteCreateFactory( + DWRITE_FACTORY_TYPE_SHARED, __uuidof(IDWriteFactory), reinterpret_cast(dwriteFactory.put())); + if (SUCCEEDED(hr)) { + hr = dwriteFactory->CreateEllipsisTrimmingSign(m_textLayout.get(), ellipsisSign.put()); + if (SUCCEEDED(hr)) { + m_textLayout->SetTrimming(&trimming, ellipsisSign.get()); + } + } + } + RenderText( *d2dDeviceContext, *m_textLayout, From b13ee853aeb098c5ea4638600916502ffb1e385f Mon Sep 17 00:00:00 2001 From: Abhijeet Jha <74712637+iamAbhi-916@users.noreply.github.com> Date: Mon, 12 May 2025 16:35:06 +0530 Subject: [PATCH 02/12] patched updateTextAlignment method --- .../Fabric/Composition/ParagraphComponentView.cpp | 1 + 1 file changed, 1 insertion(+) diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp index e0d07587b5a..24030ce239b 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp @@ -122,6 +122,7 @@ facebook::react::SharedViewEventEmitter ParagraphComponentView::eventEmitterAtPo void ParagraphComponentView::updateTextAlignment( const std::optional &fbAlignment) noexcept { + m_textLayout = nullptr; if (!m_textLayout) return; From ec0561664f36f1e6210a241773e968a6af8c8f68 Mon Sep 17 00:00:00 2001 From: Abhijeet Jha <74712637+iamAbhi-916@users.noreply.github.com> Date: Mon, 12 May 2025 16:35:35 +0530 Subject: [PATCH 03/12] Change files --- ...ative-windows-1efdb03b-a0af-4ffa-a274-a0c43f757681.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/react-native-windows-1efdb03b-a0af-4ffa-a274-a0c43f757681.json diff --git a/change/react-native-windows-1efdb03b-a0af-4ffa-a274-a0c43f757681.json b/change/react-native-windows-1efdb03b-a0af-4ffa-a274-a0c43f757681.json new file mode 100644 index 00000000000..a4bd58f9a3b --- /dev/null +++ b/change/react-native-windows-1efdb03b-a0af-4ffa-a274-a0c43f757681.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "updated ellipsis to respect tail and clip behaviour , for head , middle follow defaulty tail behaviour", + "packageName": "react-native-windows", + "email": "74712637+iamAbhi-916@users.noreply.github.com", + "dependentChangeType": "patch" +} From 5bfb6d07621e72efa25242be4df0455c772c8962 Mon Sep 17 00:00:00 2001 From: Abhijeet Jha <74712637+iamAbhi-916@users.noreply.github.com> Date: Wed, 4 Jun 2025 11:35:30 +0530 Subject: [PATCH 04/12] pathced branch , lint fix , lint format --- .../Composition/ParagraphComponentView.cpp | 92 +++++++++---------- 1 file changed, 44 insertions(+), 48 deletions(-) diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp index 4f99a7f09db..0f9a5833349 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp @@ -63,10 +63,9 @@ void ParagraphComponentView::updateProps( updateTextAlignment(newViewProps.textAttributes.alignment); } - // Reset m_textLayout when ellipsizeMode changes if (oldViewProps.paragraphAttributes.ellipsizeMode != newViewProps.paragraphAttributes.ellipsizeMode) { - m_textLayout = nullptr; + m_textLayout = nullptr; } if (oldViewProps.paragraphAttributes.adjustsFontSizeToFit != newViewProps.paragraphAttributes.adjustsFontSizeToFit) { m_requireRedraw = true; @@ -105,7 +104,7 @@ void ParagraphComponentView::FinalizeUpdates( facebook::react::SharedViewEventEmitter ParagraphComponentView::eventEmitterAtPoint( facebook::react::Point pt) noexcept { - if (m_attributedStringBox.getValue().getFragments().size()) { + if (m_attributedStringBox.getValue().getFragments().size() && m_textLayout) { BOOL isTrailingHit = false; BOOL isInside = false; DWRITE_HIT_TEST_METRICS metrics; @@ -128,35 +127,8 @@ facebook::react::SharedViewEventEmitter ParagraphComponentView::eventEmitterAtPo void ParagraphComponentView::updateTextAlignment( const std::optional &fbAlignment) noexcept { + // Reset text layout to force recreation with new alignment m_textLayout = nullptr; - if (!m_textLayout) - return; - - DWRITE_TEXT_ALIGNMENT alignment = DWRITE_TEXT_ALIGNMENT_LEADING; - if (fbAlignment) { - switch (*fbAlignment) { - case facebook::react::TextAlignment::Center: - alignment = DWRITE_TEXT_ALIGNMENT_CENTER; - break; - case facebook::react::TextAlignment::Justified: - alignment = DWRITE_TEXT_ALIGNMENT_JUSTIFIED; - break; - case facebook::react::TextAlignment::Left: - alignment = DWRITE_TEXT_ALIGNMENT_LEADING; - break; - case facebook::react::TextAlignment::Right: - alignment = DWRITE_TEXT_ALIGNMENT_TRAILING; - break; - case facebook::react::TextAlignment::Natural: - alignment = DWRITE_TEXT_ALIGNMENT_LEADING; - break; - default: - assert(false); - } - } - - // Apply the alignment to the text layout - winrt::check_hresult(m_textLayout->SetTextAlignment(alignment)); } void ParagraphComponentView::OnRenderingDeviceLost() noexcept { @@ -168,7 +140,6 @@ void ParagraphComponentView::updateVisualBrush() noexcept { // TODO // updateTextAlignment(paragraphProps.textAttributes.alignment); - if (!m_textLayout) { facebook::react::LayoutConstraints constraints; constraints.maximumSize.width = @@ -179,6 +150,35 @@ void ParagraphComponentView::updateVisualBrush() noexcept { facebook::react::WindowsTextLayoutManager::GetTextLayout( m_attributedStringBox, m_paragraphAttributes, constraints, m_textLayout); + // Apply text alignment after creating the text layout + if (m_textLayout) { + const auto &props = paragraphProps(); + DWRITE_TEXT_ALIGNMENT alignment = DWRITE_TEXT_ALIGNMENT_LEADING; + if (props.textAttributes.alignment) { + switch (*props.textAttributes.alignment) { + case facebook::react::TextAlignment::Center: + alignment = DWRITE_TEXT_ALIGNMENT_CENTER; + break; + case facebook::react::TextAlignment::Justified: + alignment = DWRITE_TEXT_ALIGNMENT_JUSTIFIED; + break; + case facebook::react::TextAlignment::Left: + alignment = DWRITE_TEXT_ALIGNMENT_LEADING; + break; + case facebook::react::TextAlignment::Right: + alignment = DWRITE_TEXT_ALIGNMENT_TRAILING; + break; + case facebook::react::TextAlignment::Natural: + alignment = DWRITE_TEXT_ALIGNMENT_LEADING; + break; + default: + alignment = DWRITE_TEXT_ALIGNMENT_LEADING; + break; + } + } + winrt::check_hresult(m_textLayout->SetTextAlignment(alignment)); + } + requireNewBrush = true; } @@ -282,21 +282,17 @@ void ParagraphComponentView::DrawText() noexcept { : D2D1::ColorF(D2D1::ColorF::Black, 0.0f)); const auto &props = paragraphProps(); - if (m_textLayout) { DWRITE_TEXT_METRICS metrics; winrt::check_hresult(m_textLayout->GetMetrics(&metrics)); - float maxWidth = m_layoutMetrics.frame.size.width - m_layoutMetrics.contentInsets.left - - m_layoutMetrics.contentInsets.right; + float maxWidth = + m_layoutMetrics.frame.size.width - m_layoutMetrics.contentInsets.left - m_layoutMetrics.contentInsets.right; if (metrics.width > maxWidth) { m_textLayout->SetMaxWidth(maxWidth); } - // Ensure alignment is applied correctly - updateTextAlignment(props.textAttributes.alignment); - // Apply DWRITE_TRIMMING for ellipsizeMode DWRITE_TRIMMING trimming = {}; winrt::com_ptr ellipsisSign; @@ -323,17 +319,17 @@ void ParagraphComponentView::DrawText() noexcept { m_textLayout->SetTrimming(&trimming, ellipsisSign.get()); } } - } - RenderText( - *d2dDeviceContext, - *m_textLayout, - m_attributedStringBox.getValue(), - props.textAttributes, - {static_cast(offset.x) + m_layoutMetrics.contentInsets.left, - static_cast(offset.y) + m_layoutMetrics.contentInsets.top}, - m_layoutMetrics.pointScaleFactor, - *theme()); + RenderText( + *d2dDeviceContext, + *m_textLayout, + m_attributedStringBox.getValue(), + props.textAttributes, + {static_cast(offset.x) + m_layoutMetrics.contentInsets.left, + static_cast(offset.y) + m_layoutMetrics.contentInsets.top}, + m_layoutMetrics.pointScaleFactor, + *theme()); + } if (!isnan(props.opacity)) { Visual().Opacity(props.opacity); From a09c1aaaf4ba5f2ab1ba3ec59acb4c2ebee60a95 Mon Sep 17 00:00:00 2001 From: Abhijeet Jha <74712637+iamAbhi-916@users.noreply.github.com> Date: Wed, 4 Jun 2025 12:35:00 +0530 Subject: [PATCH 05/12] updated snapshots --- .../test/__snapshots__/LegacyTextHitTestTest.test.ts.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/LegacyTextHitTestTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/LegacyTextHitTestTest.test.ts.snap index a31407e3fde..5b0d72486b1 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/LegacyTextHitTestTest.test.ts.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/LegacyTextHitTestTest.test.ts.snap @@ -342,8 +342,8 @@ exports[`LegacyTextHitTestTest WrappedLTRInRTLFlowEdgeCaseNotPressable 1`] = ` "AutomationId": "pressed-state", "ControlType": 50020, "LocalizedControlType": "text", - "Name": "Pressed: 1 times.", - "TextRangePattern.GetText": "Pressed: 1 times.", + "Name": "Pressed: 0 times.", + "TextRangePattern.GetText": "Pressed: 0 times.", }, "Component Tree": { "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", From 705677f4f694288a4a4143da52abe4f67b4a0efa Mon Sep 17 00:00:00 2001 From: Abhijeet Jha <74712637+iamAbhi-916@users.noreply.github.com> Date: Thu, 5 Jun 2025 22:02:35 +0530 Subject: [PATCH 06/12] added layout changes to TextLayoutManager --- .../Composition/ParagraphComponentView.cpp | 41 +------------------ .../WindowsTextLayoutManager.cpp | 34 ++++++++++++++- 2 files changed, 34 insertions(+), 41 deletions(-) diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp index 0f9a5833349..c23aa2a5b88 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp @@ -279,47 +279,8 @@ void ParagraphComponentView::DrawText() noexcept { if (auto d2dDeviceContext = autoDraw.GetRenderTarget()) { d2dDeviceContext->Clear( viewProps()->backgroundColor ? theme()->D2DColor(*viewProps()->backgroundColor) - : D2D1::ColorF(D2D1::ColorF::Black, 0.0f)); - - const auto &props = paragraphProps(); + : D2D1::ColorF(D2D1::ColorF::Black, 0.0f)); const auto &props = paragraphProps(); if (m_textLayout) { - DWRITE_TEXT_METRICS metrics; - winrt::check_hresult(m_textLayout->GetMetrics(&metrics)); - - float maxWidth = - m_layoutMetrics.frame.size.width - m_layoutMetrics.contentInsets.left - m_layoutMetrics.contentInsets.right; - - if (metrics.width > maxWidth) { - m_textLayout->SetMaxWidth(maxWidth); - } - - // Apply DWRITE_TRIMMING for ellipsizeMode - DWRITE_TRIMMING trimming = {}; - winrt::com_ptr ellipsisSign; - - switch (props.paragraphAttributes.ellipsizeMode) { - case facebook::react::EllipsizeMode::Tail: - trimming.granularity = DWRITE_TRIMMING_GRANULARITY_CHARACTER; - break; - case facebook::react::EllipsizeMode::Clip: - trimming.granularity = DWRITE_TRIMMING_GRANULARITY_NONE; - break; - default: - trimming.granularity = DWRITE_TRIMMING_GRANULARITY_CHARACTER; // Default to tail behavior - break; - } - - // Use IDWriteFactory to create the ellipsis trimming sign - winrt::com_ptr dwriteFactory; - HRESULT hr = DWriteCreateFactory( - DWRITE_FACTORY_TYPE_SHARED, __uuidof(IDWriteFactory), reinterpret_cast(dwriteFactory.put())); - if (SUCCEEDED(hr)) { - hr = dwriteFactory->CreateEllipsisTrimmingSign(m_textLayout.get(), ellipsisSign.put()); - if (SUCCEEDED(hr)) { - m_textLayout->SetTrimming(&trimming, ellipsisSign.get()); - } - } - RenderText( *d2dDeviceContext, *m_textLayout, diff --git a/vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/textlayoutmanager/WindowsTextLayoutManager.cpp b/vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/textlayoutmanager/WindowsTextLayoutManager.cpp index 332001f604a..d927a0cad99 100644 --- a/vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/textlayoutmanager/WindowsTextLayoutManager.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/textlayoutmanager/WindowsTextLayoutManager.cpp @@ -160,7 +160,6 @@ void WindowsTextLayoutManager::GetTextLayout( // Get text with Object Replacement Characters for attachments auto str = GetTransformedText(attributedStringBox); - winrt::check_hresult(Microsoft::ReactNative::DWriteFactory()->CreateTextLayout( str.c_str(), // The string to be laid out and formatted. static_cast(str.size()), // The length of the string. @@ -170,6 +169,39 @@ void WindowsTextLayoutManager::GetTextLayout( spTextLayout.put() // The IDWriteTextLayout interface pointer. )); + // Apply max width constraint and ellipsis trimming to ensure consistency with rendering + DWRITE_TEXT_METRICS metrics; + winrt::check_hresult(spTextLayout->GetMetrics(&metrics)); + + if (metrics.width > size.width) { + spTextLayout->SetMaxWidth(size.width); + } + + // Apply DWRITE_TRIMMING for ellipsizeMode + DWRITE_TRIMMING trimming = {}; + winrt::com_ptr ellipsisSign; + + switch (paragraphAttributes.ellipsizeMode) { + case facebook::react::EllipsizeMode::Tail: + trimming.granularity = DWRITE_TRIMMING_GRANULARITY_CHARACTER; + break; + case facebook::react::EllipsizeMode::Clip: + trimming.granularity = DWRITE_TRIMMING_GRANULARITY_NONE; + break; + default: + trimming.granularity = DWRITE_TRIMMING_GRANULARITY_CHARACTER; // Default to tail behavior + break; + } + + // Use DWriteFactory to create the ellipsis trimming sign + if (trimming.granularity != DWRITE_TRIMMING_GRANULARITY_NONE) { + auto dwriteFactory = Microsoft::ReactNative::DWriteFactory(); + HRESULT hr = dwriteFactory->CreateEllipsisTrimmingSign(spTextLayout.get(), ellipsisSign.put()); + if (SUCCEEDED(hr)) { + spTextLayout->SetTrimming(&trimming, ellipsisSign.get()); + } + } + // Calculate positions for attachments and set inline objects unsigned int position = 0; for (const auto &fragment : fragments) { From 6aee963c41304246e16aa2a6a3e98868e3d21b46 Mon Sep 17 00:00:00 2001 From: Abhijeet Jha <74712637+iamAbhi-916@users.noreply.github.com> Date: Thu, 5 Jun 2025 22:12:46 +0530 Subject: [PATCH 07/12] lint fix and format --- .../Fabric/Composition/ParagraphComponentView.cpp | 3 ++- .../renderer/textlayoutmanager/WindowsTextLayoutManager.cpp | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp index c23aa2a5b88..274fb52bba1 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp @@ -279,7 +279,8 @@ void ParagraphComponentView::DrawText() noexcept { if (auto d2dDeviceContext = autoDraw.GetRenderTarget()) { d2dDeviceContext->Clear( viewProps()->backgroundColor ? theme()->D2DColor(*viewProps()->backgroundColor) - : D2D1::ColorF(D2D1::ColorF::Black, 0.0f)); const auto &props = paragraphProps(); + : D2D1::ColorF(D2D1::ColorF::Black, 0.0f)); + const auto &props = paragraphProps(); if (m_textLayout) { RenderText( *d2dDeviceContext, diff --git a/vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/textlayoutmanager/WindowsTextLayoutManager.cpp b/vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/textlayoutmanager/WindowsTextLayoutManager.cpp index d927a0cad99..b383fa72449 100644 --- a/vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/textlayoutmanager/WindowsTextLayoutManager.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/textlayoutmanager/WindowsTextLayoutManager.cpp @@ -172,7 +172,7 @@ void WindowsTextLayoutManager::GetTextLayout( // Apply max width constraint and ellipsis trimming to ensure consistency with rendering DWRITE_TEXT_METRICS metrics; winrt::check_hresult(spTextLayout->GetMetrics(&metrics)); - + if (metrics.width > size.width) { spTextLayout->SetMaxWidth(size.width); } From ed948af2a5602fd03cfb4a318b5b1a1204f60c7a Mon Sep 17 00:00:00 2001 From: Abhijeet Jha <74712637+iamAbhi-916@users.noreply.github.com> Date: Thu, 5 Jun 2025 23:07:06 +0530 Subject: [PATCH 08/12] updated snapshots --- .../LegacyTextInputTest.test.ts.snap | 2 +- .../PressableComponentTest.test.ts.snap | 23 ++++++++ .../TextComponentTest.test.ts.snap | 54 +++++++++---------- 3 files changed, 51 insertions(+), 28 deletions(-) diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/LegacyTextInputTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/LegacyTextInputTest.test.ts.snap index 6e621a9668c..dc4c6e56024 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/LegacyTextInputTest.test.ts.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/LegacyTextInputTest.test.ts.snap @@ -162,7 +162,7 @@ onFocus "Visual Tree": { "Comment": "textinput-log", "Offset": "0, 0, 0", - "Size": "998, 839", + "Size": "998, 745", "Visual Type": "SpriteVisual", }, } diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/PressableComponentTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/PressableComponentTest.test.ts.snap index 39ef5127842..a3e958583cc 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/PressableComponentTest.test.ts.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/PressableComponentTest.test.ts.snap @@ -689,6 +689,13 @@ exports[`Pressable Tests Pressables can have event handlers, hover 2`] = ` "ControlType": 50026, "LocalizedControlType": "group", "__Children": [ + { + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "hover out", + "TextRangePattern.GetText": "hover out", + }, { "AutomationId": "", "ControlType": 50020, @@ -708,6 +715,10 @@ exports[`Pressable Tests Pressables can have event handlers, hover 2`] = ` "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", "_Props": {}, }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, ], }, "Visual Tree": { @@ -772,6 +783,18 @@ exports[`Pressable Tests Pressables can have event handlers, hover 2`] = ` }, ], }, + { + "Offset": "11, 29, 0", + "Size": "874, 20", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "874, 20", + "Visual Type": "SpriteVisual", + }, + ], + }, ], }, } diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/TextComponentTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/TextComponentTest.test.ts.snap index 9d526f39324..6fb1eb024cd 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/TextComponentTest.test.ts.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/TextComponentTest.test.ts.snap @@ -18,7 +18,7 @@ exports[`Text Tests Padding can be added to Text 1`] = ` "Visual Tree": { "Comment": "text-padding", "Offset": "0, 0, 0", - "Size": "916, 39", + "Size": "916, 40", "Visual Type": "SpriteVisual", }, } @@ -234,7 +234,7 @@ exports[`Text Tests Text can be restricted to one line 1`] = ` "Visual Tree": { "Comment": "text-one-line", "Offset": "0, 0, 0", - "Size": "300, 19", + "Size": "300, 20", "Visual Type": "SpriteVisual", }, } @@ -258,7 +258,7 @@ exports[`Text Tests Text can be selectable 1`] = ` "Visual Tree": { "Comment": "text-selectable", "Offset": "0, 0, 0", - "Size": "916, 20", + "Size": "916, 19", "Visual Type": "SpriteVisual", }, } @@ -282,7 +282,7 @@ exports[`Text Tests Text can have a color 1`] = ` "Visual Tree": { "Comment": "text-color", "Offset": "0, 0, 0", - "Size": "916, 20", + "Size": "916, 19", "Visual Type": "SpriteVisual", }, } @@ -306,7 +306,7 @@ exports[`Text Tests Text can have a customized selection color 1`] = ` "Visual Tree": { "Comment": "text-selection-color", "Offset": "0, 0, 0", - "Size": "916, 19", + "Size": "916, 20", "Visual Type": "SpriteVisual", }, } @@ -330,7 +330,7 @@ exports[`Text Tests Text can have a size 1`] = ` "Visual Tree": { "Comment": "text-size", "Offset": "0, 0, 0", - "Size": "916, 31", + "Size": "916, 32", "Visual Type": "SpriteVisual", }, } @@ -482,12 +482,12 @@ exports[`Text Tests Text can have advanced borders 1`] = ` }, { "Offset": "0, 38, 0", - "Size": "916, 39", + "Size": "916, 40", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "916, 39", + "Size": "916, 40", "Visual Type": "SpriteVisual", "__Children": [ { @@ -523,7 +523,7 @@ exports[`Text Tests Text can have advanced borders 1`] = ` "Color": "rgba(0, 0, 255, 255)", }, "Offset": "-10, 20, 0", - "Size": "10, 13", + "Size": "10, 14", "Visual Type": "SpriteVisual", }, { @@ -559,7 +559,7 @@ exports[`Text Tests Text can have advanced borders 1`] = ` "Color": "rgba(0, 0, 255, 255)", }, "Offset": "0, 22, 0", - "Size": "20, 9", + "Size": "20, 10", "Visual Type": "SpriteVisual", }, ], @@ -568,12 +568,12 @@ exports[`Text Tests Text can have advanced borders 1`] = ` }, { "Offset": "0, 77, 0", - "Size": "916, 22", + "Size": "916, 21", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "916, 22", + "Size": "916, 21", "Visual Type": "SpriteVisual", "__Children": [ { @@ -609,7 +609,7 @@ exports[`Text Tests Text can have advanced borders 1`] = ` "Color": "rgba(0, 128, 0, 255)", }, "Offset": "-1, 4, 0", - "Size": "1, 14", + "Size": "1, 13", "Visual Type": "SpriteVisual", }, { @@ -645,7 +645,7 @@ exports[`Text Tests Text can have advanced borders 1`] = ` "Color": "rgba(0, 128, 0, 255)", }, "Offset": "0, 4, 0", - "Size": "1, 14", + "Size": "1, 13", "Visual Type": "SpriteVisual", }, ], @@ -799,12 +799,12 @@ exports[`Text Tests Text can have borders 1`] = ` }, { "Offset": "100, 127, 0", - "Size": "716, 138", + "Size": "716, 139", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "716, 138", + "Size": "716, 139", "Visual Type": "SpriteVisual", "__Children": [ { @@ -886,7 +886,7 @@ exports[`Text Tests Text can have decoration lines: Solid Line Through 1`] = ` "Visual Tree": { "Comment": "text-decoration-solid-linethru", "Offset": "0, 0, 0", - "Size": "916, 19", + "Size": "916, 20", "Visual Type": "SpriteVisual", }, } @@ -1042,24 +1042,24 @@ exports[`Text Tests Text can have nested views 1`] = ` "__Children": [ { "Offset": "0, 0, 0", - "Size": "916, 19", + "Size": "916, 20", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "916, 19", + "Size": "916, 20", "Visual Type": "SpriteVisual", }, ], }, { "Offset": "0, 18, 0", - "Size": "916, 24", + "Size": "916, 23", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "916, 24", + "Size": "916, 23", "Visual Type": "SpriteVisual", "__Children": [ { @@ -1105,7 +1105,7 @@ exports[`Text Tests Text can have shadows 1`] = ` "Visual Tree": { "Comment": "text-shadow", "Offset": "0, 0, 0", - "Size": "916, 28", + "Size": "916, 27", "Visual Type": "SpriteVisual", }, } @@ -1129,7 +1129,7 @@ exports[`Text Tests Text can wrap 1`] = ` "Visual Tree": { "Comment": "text-wrap", "Offset": "0, 0, 0", - "Size": "300, 38", + "Size": "300, 39", "Visual Type": "SpriteVisual", }, } @@ -1228,12 +1228,12 @@ exports[`Text Tests Texts can clip inline View/Images 1`] = ` "__Children": [ { "Offset": "0, 0, 0", - "Size": "916, 19", + "Size": "916, 20", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "916, 19", + "Size": "916, 20", "Visual Type": "SpriteVisual", }, ], @@ -1286,12 +1286,12 @@ exports[`Text Tests Texts can clip inline View/Images 1`] = ` }, { "Offset": "0, 103, 0", - "Size": "916, 20", + "Size": "916, 19", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "916, 20", + "Size": "916, 19", "Visual Type": "SpriteVisual", }, ], From 77d3183d962fae54ce3d4f40e3c1ae052cc2a86a Mon Sep 17 00:00:00 2001 From: Abhijeet Jha <74712637+iamAbhi-916@users.noreply.github.com> Date: Fri, 6 Jun 2025 00:13:55 +0530 Subject: [PATCH 09/12] updated snapshot Pressable component --- .../PressableComponentTest.test.ts.snap | 23 ------------------- 1 file changed, 23 deletions(-) diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/PressableComponentTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/PressableComponentTest.test.ts.snap index a3e958583cc..39ef5127842 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/PressableComponentTest.test.ts.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/PressableComponentTest.test.ts.snap @@ -689,13 +689,6 @@ exports[`Pressable Tests Pressables can have event handlers, hover 2`] = ` "ControlType": 50026, "LocalizedControlType": "group", "__Children": [ - { - "AutomationId": "", - "ControlType": 50020, - "LocalizedControlType": "text", - "Name": "hover out", - "TextRangePattern.GetText": "hover out", - }, { "AutomationId": "", "ControlType": 50020, @@ -715,10 +708,6 @@ exports[`Pressable Tests Pressables can have event handlers, hover 2`] = ` "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", "_Props": {}, }, - { - "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", - "_Props": {}, - }, ], }, "Visual Tree": { @@ -783,18 +772,6 @@ exports[`Pressable Tests Pressables can have event handlers, hover 2`] = ` }, ], }, - { - "Offset": "11, 29, 0", - "Size": "874, 20", - "Visual Type": "SpriteVisual", - "__Children": [ - { - "Offset": "0, 0, 0", - "Size": "874, 20", - "Visual Type": "SpriteVisual", - }, - ], - }, ], }, } From 972877f56d509e198f1c6b248bbe2ea2a9a671e5 Mon Sep 17 00:00:00 2001 From: Abhijeet Jha <74712637+iamAbhi-916@users.noreply.github.com> Date: Fri, 6 Jun 2025 16:24:07 +0530 Subject: [PATCH 10/12] updated to remove extra text_layout null check --- .../Composition/ParagraphComponentView.cpp | 20 +++++++++---------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp index 274fb52bba1..e7deff01737 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp @@ -281,17 +281,15 @@ void ParagraphComponentView::DrawText() noexcept { viewProps()->backgroundColor ? theme()->D2DColor(*viewProps()->backgroundColor) : D2D1::ColorF(D2D1::ColorF::Black, 0.0f)); const auto &props = paragraphProps(); - if (m_textLayout) { - RenderText( - *d2dDeviceContext, - *m_textLayout, - m_attributedStringBox.getValue(), - props.textAttributes, - {static_cast(offset.x) + m_layoutMetrics.contentInsets.left, - static_cast(offset.y) + m_layoutMetrics.contentInsets.top}, - m_layoutMetrics.pointScaleFactor, - *theme()); - } + RenderText( + *d2dDeviceContext, + *m_textLayout, + m_attributedStringBox.getValue(), + props.textAttributes, + {static_cast(offset.x) + m_layoutMetrics.contentInsets.left, + static_cast(offset.y) + m_layoutMetrics.contentInsets.top}, + m_layoutMetrics.pointScaleFactor, + *theme()); if (!isnan(props.opacity)) { Visual().Opacity(props.opacity); From f3dd11bd5c9286df89d15e42b467b6f27e8f727d Mon Sep 17 00:00:00 2001 From: Abhijeet Jha <74712637+iamAbhi-916@users.noreply.github.com> Date: Fri, 6 Jun 2025 16:32:39 +0530 Subject: [PATCH 11/12] removed comments --- .../Fabric/Composition/ParagraphComponentView.cpp | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp index e7deff01737..9472053bf55 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp @@ -63,10 +63,10 @@ void ParagraphComponentView::updateProps( updateTextAlignment(newViewProps.textAttributes.alignment); } - // Reset m_textLayout when ellipsizeMode changes if (oldViewProps.paragraphAttributes.ellipsizeMode != newViewProps.paragraphAttributes.ellipsizeMode) { m_textLayout = nullptr; } + if (oldViewProps.paragraphAttributes.adjustsFontSizeToFit != newViewProps.paragraphAttributes.adjustsFontSizeToFit) { m_requireRedraw = true; } From f768e7ff360fec735ae2bdcec8d91d7f682b51e5 Mon Sep 17 00:00:00 2001 From: Abhijeet Jha <74712637+iamAbhi-916@users.noreply.github.com> Date: Fri, 6 Jun 2025 16:34:07 +0530 Subject: [PATCH 12/12] format and lint:fix --- .../Fabric/Composition/ParagraphComponentView.cpp | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp index 9472053bf55..c2093ef9bce 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp @@ -66,7 +66,7 @@ void ParagraphComponentView::updateProps( if (oldViewProps.paragraphAttributes.ellipsizeMode != newViewProps.paragraphAttributes.ellipsizeMode) { m_textLayout = nullptr; } - + if (oldViewProps.paragraphAttributes.adjustsFontSizeToFit != newViewProps.paragraphAttributes.adjustsFontSizeToFit) { m_requireRedraw = true; }