[Farbic] Extract RenderText into helper function + clean up Loading visuals (#12866)

* Extract RenderText into helper function

* Change files

Author: acoates-ms

change/react-native-windows-af6a8175-d270-491f-86c3-ee4c84fe4eb5.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Extract RenderText into helper function",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

vnext/Microsoft.ReactNative/Fabric/Composition/CompositionRootView.cpp

@@ -5,6 +5,7 @@
 #include "CompositionRootView.g.cpp"
 #include "FocusNavigationRequest.g.cpp"
 
+#include <AutoDraw.h>
 #include <DynamicWriter.h>
 #include <Fabric/FabricUIManagerModule.h>
 #include <IReactInstance.h>
@@ -15,8 +16,10 @@
 #include <Utils/Helpers.h>
 #include <dispatchQueue/dispatchQueue.h>
 #include <eventWaitHandle/eventWaitHandle.h>
+#include <react/renderer/attributedstring/AttributedStringBox.h>
 #include <react/renderer/core/LayoutConstraints.h>
 #include <react/renderer/core/LayoutContext.h>
+#include <react/renderer/textlayoutmanager/TextLayoutManager.h>
 #include <winrt/Microsoft.ReactNative.Composition.h>
 #include <winrt/Microsoft.ReactNative.h>
 #include <winrt/Windows.UI.Core.h>
@@ -26,13 +29,20 @@
 #include "CompositionUIService.h"
 #include "ReactNativeHost.h"
 #include "RootComponentView.h"
+#include "TextDrawing.h"
 
 #ifdef USE_WINUI3
 #include <winrt/Microsoft.UI.Content.h>
 #endif
 
 namespace winrt::Microsoft::ReactNative::implementation {
 
+constexpr float loadingActivitySize = 12.0f;
+constexpr float loadingActivityHorizontalOffset = 16.0f;
+constexpr float loadingBarHeight = 36.0f;
+constexpr float loadingBarFontSize = 20.0f;
+constexpr float loadingTextHorizontalOffset = 48.0f;
+
 //! This class ensures that we access ReactRootView from UI thread.
 struct CompositionReactViewInstance
     : public winrt::implements<CompositionReactViewInstance, winrt::Microsoft::ReactNative::IReactViewInstance> {
@@ -149,6 +159,7 @@ void CompositionRootView::RootVisual(winrt::Microsoft::ReactNative::Composition:
   if (m_rootVisual != value) {
     assert(!m_rootVisual);
     m_rootVisual = value;
+    UpdateRootVisualSize();
   }
 }
 
@@ -172,14 +183,39 @@ winrt::Windows::Foundation::Size CompositionRootView::Size() noexcept {
 
 void CompositionRootView::Size(winrt::Windows::Foundation::Size value) noexcept {
   m_size = value;
+  UpdateRootVisualSize();
+}
+
+void CompositionRootView::UpdateRootVisualSize() noexcept {
+  if (m_rootVisual)
+    m_rootVisual.Size({m_size.Width * m_scaleFactor, m_size.Height * m_scaleFactor});
+
+  UpdateLoadingVisualSize();
+}
+
+void CompositionRootView::UpdateLoadingVisualSize() noexcept {
+  if (m_loadingVisual) {
+    auto drawingSurface = CreateLoadingVisualBrush();
+    m_loadingVisual.Brush(drawingSurface);
+    m_loadingVisual.Offset({0.0f, -(loadingBarHeight * m_scaleFactor / 2.0f), 0.0f}, {0.0f, 0.5f, 0.0f});
+    m_loadingVisual.Size({m_size.Width * m_scaleFactor, loadingBarHeight * m_scaleFactor});
+    m_loadingActivityVisual.Size(loadingActivitySize * m_scaleFactor);
+    const float loadingActivityVerticalOffset = ((loadingBarHeight - (loadingActivitySize * 2)) * m_scaleFactor) / 2;
+
+    m_loadingActivityVisual.Offset(
+        {loadingActivityHorizontalOffset * m_scaleFactor, loadingActivityVerticalOffset, 0.0f});
+  }
 }
 
 float CompositionRootView::ScaleFactor() noexcept {
   return m_scaleFactor;
 }
 
 void CompositionRootView::ScaleFactor(float value) noexcept {
-  m_scaleFactor = value;
+  if (m_scaleFactor != value) {
+    m_scaleFactor = value;
+    UpdateRootVisualSize();
+  }
 }
 
 winrt::Microsoft::ReactNative::Composition::Theme CompositionRootView::Theme() noexcept {
@@ -397,6 +433,7 @@ void CompositionRootView::ClearLoadingUI() noexcept {
   RootVisual().Remove(m_loadingVisual);
 
   m_loadingVisual = nullptr;
+  m_loadingActivityVisual = nullptr;
 }
 
 void CompositionRootView::EnsureLoadingUI() noexcept {}
@@ -425,6 +462,63 @@ void CompositionRootView::ShowInstanceError() noexcept {
   ClearLoadingUI();
 }
 
+Composition::IDrawingSurfaceBrush CompositionRootView::CreateLoadingVisualBrush() noexcept {
+  auto compContext =
+      winrt::Microsoft::ReactNative::Composition::implementation::CompositionUIService::GetCompositionContext(
+          m_context.Properties().Handle());
+
+  winrt::Windows::Foundation::Size surfaceSize = {
+      m_size.Width * m_scaleFactor, std::min(m_size.Height, loadingBarHeight) * m_scaleFactor};
+  auto drawingSurface = compContext.CreateDrawingSurfaceBrush(
+      surfaceSize,
+      winrt::Windows::Graphics::DirectX::DirectXPixelFormat::B8G8R8A8UIntNormalized,
+      winrt::Windows::Graphics::DirectX::DirectXAlphaMode::Premultiplied);
+
+  POINT offset;
+  {
+    ::Microsoft::ReactNative::Composition::AutoDrawDrawingSurface autoDraw(drawingSurface, &offset);
+    if (auto d2dDeviceContext = autoDraw.GetRenderTarget()) {
+      d2dDeviceContext->Clear(D2D1::ColorF(D2D1::ColorF::Green));
+
+      facebook::react::LayoutConstraints constraints;
+      constraints.maximumSize.width = std::max(0.0f, m_size.Width - loadingTextHorizontalOffset);
+      constraints.maximumSize.height = std::max(0.0f, m_size.Height - loadingBarHeight);
+
+      auto attributedString = facebook::react::AttributedString{};
+      auto fragment = facebook::react::AttributedString::Fragment{};
+      fragment.string = "Loading";
+      fragment.textAttributes.fontSize = loadingBarFontSize;
+      attributedString.appendFragment(fragment);
+      auto attributedStringBox = facebook::react::AttributedStringBox{attributedString};
+
+      auto textAttributes = facebook::react::TextAttributes{};
+      textAttributes.foregroundColor = facebook::react::whiteColor();
+
+      winrt::com_ptr<::IDWriteTextLayout> textLayout;
+      facebook::react::TextLayoutManager::GetTextLayout(
+          attributedStringBox, {} /*paragraphAttributes*/, constraints, textLayout);
+
+      DWRITE_TEXT_METRICS tm;
+      textLayout->GetMetrics(&tm);
+      const float textVerticalOffsetWithinLoadingBar = ((loadingBarHeight - tm.height) * m_scaleFactor) / 2;
+
+      auto theme = winrt::get_self<winrt::Microsoft::ReactNative::Composition::implementation::Theme>(Theme());
+
+      Composition::RenderText(
+          *d2dDeviceContext,
+          *textLayout,
+          attributedStringBox.getValue(),
+          textAttributes,
+          {static_cast<float>(offset.x + (loadingTextHorizontalOffset * m_scaleFactor)),
+           static_cast<float>(offset.y + textVerticalOffsetWithinLoadingBar)},
+          m_scaleFactor,
+          *theme);
+    }
+  }
+
+  return drawingSurface;
+}
+
 void CompositionRootView::ShowInstanceLoading() noexcept {
   if (!Mso::React::ReactOptions::UseDeveloperSupport(m_context.Properties().Handle()))
     return;
@@ -436,19 +530,18 @@ void CompositionRootView::ShowInstanceLoading() noexcept {
       winrt::Microsoft::ReactNative::Composition::implementation::CompositionUIService::GetCompositionContext(
           m_context.Properties().Handle());
 
-  auto brush = compContext.CreateColorBrush({0x80, 0x03, 0x29, 0x29});
+  auto drawingSurface = CreateLoadingVisualBrush();
+
   m_loadingVisual = compContext.CreateSpriteVisual();
-  m_loadingVisual.RelativeSizeWithOffset({0.0f, 50.0f}, {1.0f, 0.0f});
-  m_loadingVisual.Offset({0.0f, -25.0f, 0.0f}, {0.0f, 0.5f, 0.0f});
-  m_loadingVisual.Brush(brush);
+  m_loadingVisual.Brush(drawingSurface);
 
   auto foregroundBrush = compContext.CreateColorBrush({255, 255, 255, 255});
 
-  auto activity = compContext.CreateActivityVisual();
-  activity.Size(15.0f);
-  activity.Brush(foregroundBrush);
-  activity.Offset({-50.0f, 5.0f, 0.0f}, {0.5f, 0.0f, 0.0f});
-  m_loadingVisual.InsertAt(activity, 0);
+  m_loadingActivityVisual = compContext.CreateActivityVisual();
+  m_loadingActivityVisual.Brush(foregroundBrush);
+  m_loadingVisual.InsertAt(m_loadingActivityVisual, 0);
+
+  UpdateLoadingVisualSize();
 
   RootVisual().InsertAt(m_loadingVisual, m_hasRenderedVisual ? 1 : 0);
 }
@@ -523,7 +616,6 @@ winrt::Microsoft::UI::Content::ContentIsland CompositionRootView::Island() noexc
 
   if (!m_island) {
     auto rootVisual = m_compositor.CreateSpriteVisual();
-    rootVisual.RelativeSizeAdjustment({1, 1});
 
     RootVisual(winrt::Microsoft::ReactNative::Composition::MicrosoftCompositionContextHelper::CreateVisual(rootVisual));
     m_island = winrt::Microsoft::UI::Content::ContentIsland::Create(rootVisual);

vnext/Microsoft.ReactNative/Fabric/Composition/CompositionRootView.h

@@ -127,6 +127,7 @@ struct CompositionRootView : CompositionRootViewT<CompositionRootView>, ::Micros
   std::shared_ptr<::Microsoft::ReactNative::CompositionEventHandler> m_CompositionEventHandler;
   winrt::Microsoft::ReactNative::Composition::IVisual m_rootVisual{nullptr};
   winrt::Microsoft::ReactNative::Composition::ISpriteVisual m_loadingVisual{nullptr};
+  winrt::Microsoft::ReactNative::Composition::IActivityVisual m_loadingActivityVisual{nullptr};
   winrt::Microsoft::ReactNative::Composition::Theme m_theme{nullptr};
   winrt::Microsoft::ReactNative::ReactNotificationSubscription m_themeChangedSubscription{nullptr};
   winrt::Microsoft::ReactNative::Composition::Theme::ThemeChanged_revoker m_themeChangedRevoker;
@@ -137,6 +138,9 @@ struct CompositionRootView : CompositionRootViewT<CompositionRootView>, ::Micros
   void ShowInstanceLoaded() noexcept;
   void ShowInstanceError() noexcept;
   void ShowInstanceLoading() noexcept;
+  void UpdateRootVisualSize() noexcept;
+  void UpdateLoadingVisualSize() noexcept;
+  Composition::IDrawingSurfaceBrush CreateLoadingVisualBrush() noexcept;
 };
 
 } // namespace winrt::Microsoft::ReactNative::implementation