react-native-windows 0.68.3 → 0.69.0-preview.1

package/Microsoft.ReactNative/Fabric/ViewComponentView.cpp

@@ -20,6 +20,10 @@ const facebook::react::SharedViewEventEmitter &BaseComponentView::GetEventEmitte
   return m_eventEmitter;
 }
 
+void BaseComponentView::handleCommand(std::string const &commandName, folly::dynamic const &arg) noexcept {
+  assert(false); // Unhandled command
+}
+
 ViewComponentView::ViewComponentView() {
   static auto const defaultProps = std::make_shared<facebook::react::ViewProps const>();
   m_props = defaultProps;
@@ -81,6 +85,7 @@ bool ViewComponentView::shouldBeControl() const noexcept {
 void ViewComponentView::updateState(
     facebook::react::State::Shared const &state,
     facebook::react::State::Shared const &oldState) noexcept {}
+
 void ViewComponentView::updateLayoutMetrics(
     facebook::react::LayoutMetrics const &layoutMetrics,
     facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept {
@@ -91,9 +96,6 @@ void ViewComponentView::updateLayoutMetrics(
 
   winrt::Microsoft::ReactNative::ViewPanel::SetLeft(m_panel, layoutMetrics.frame.origin.x);
   winrt::Microsoft::ReactNative::ViewPanel::SetTop(m_panel, layoutMetrics.frame.origin.y);
-
-  m_panel.Width(layoutMetrics.frame.size.width);
-  m_panel.Height(layoutMetrics.frame.size.height);
 }
 
 void ViewComponentView::finalizeUpdates(RNComponentViewUpdateMask updateMask) noexcept {
@@ -174,6 +176,36 @@ void ViewComponentView::finalizeUpdates(RNComponentViewUpdateMask updateMask) no
         m_control.Content(m_panel);
     }
   }
+
+  if (m_outerBorder) {
+    m_outerBorder.Width(m_layoutMetrics.frame.size.width);
+    m_outerBorder.Height(m_layoutMetrics.frame.size.height);
+  }
+
+  if (m_control) {
+    m_control.Width(m_layoutMetrics.frame.size.width);
+    m_control.Height(m_layoutMetrics.frame.size.height);
+  }
+
+  m_panel.Width(m_layoutMetrics.frame.size.width);
+  m_panel.Height(m_layoutMetrics.frame.size.height);
+
+  if (m_control) {
+    winrt::Microsoft::ReactNative::ViewPanel::SetLeft(m_control, m_layoutMetrics.frame.origin.x);
+    winrt::Microsoft::ReactNative::ViewPanel::SetTop(m_control, m_layoutMetrics.frame.origin.y);
+    winrt::Microsoft::ReactNative::ViewPanel::SetLeft(m_outerBorder, 0);
+    winrt::Microsoft::ReactNative::ViewPanel::SetTop(m_outerBorder, 0);
+    winrt::Microsoft::ReactNative::ViewPanel::SetLeft(m_panel, 0);
+    winrt::Microsoft::ReactNative::ViewPanel::SetTop(m_panel, 0);
+  } else if (m_outerBorder) {
+    winrt::Microsoft::ReactNative::ViewPanel::SetLeft(m_outerBorder, m_layoutMetrics.frame.origin.x);
+    winrt::Microsoft::ReactNative::ViewPanel::SetTop(m_outerBorder, m_layoutMetrics.frame.origin.y);
+    winrt::Microsoft::ReactNative::ViewPanel::SetLeft(m_panel, 0);
+    winrt::Microsoft::ReactNative::ViewPanel::SetTop(m_panel, 0);
+  } else {
+    winrt::Microsoft::ReactNative::ViewPanel::SetLeft(m_panel, m_layoutMetrics.frame.origin.x);
+    winrt::Microsoft::ReactNative::ViewPanel::SetTop(m_panel, m_layoutMetrics.frame.origin.y);
+  }
 }
 
 void ViewComponentView::prepareForRecycle() noexcept {}

package/Microsoft.ReactNative/Fabric/ViewComponentView.h

@@ -14,6 +14,7 @@ struct BaseComponentView : IComponentView {
   virtual const xaml::FrameworkElement Element() const noexcept = 0;
   void updateEventEmitter(facebook::react::EventEmitter::Shared const &eventEmitter) noexcept override;
   const facebook::react::SharedViewEventEmitter &GetEventEmitter() const noexcept;
+  void handleCommand(std::string const &commandName, folly::dynamic const &arg) noexcept override;
 
  protected:
   facebook::react::SharedViewEventEmitter m_eventEmitter;

package/Microsoft.ReactNative/Fabric/platform/react/renderer/components/rncore/EventEmitters.h

@@ -0,0 +1,5 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+// RN has some weird include directory redirections..this forwards the include to the right place
+#include <react/components/rnwcore/EventEmitters.h>

package/Microsoft.ReactNative/Fabric/platform/react/renderer/components/rncore/Props.h

@@ -0,0 +1,5 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+// RN has some weird include directory redirections..this forwards the include to the right place
+#include <react/components/rnwcore/Props.h>

package/Microsoft.ReactNative/Fabric/platform/react/renderer/components/slider/SliderMeasurementsManager.cpp

@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#include "SliderMeasurementsManager.h"
+
+#include <react/renderer/core/conversions.h>
+#include <winrt/Windows.Foundation.Collections.h>
+#include <winrt/Windows.UI.Xaml.Interop.h>
+
+#include "ReactContext.h"
+#include "ReactHost/React.h"
+#include "ReactPropertyBag.h"
+#include "winrt/Microsoft.ReactNative.h"
+
+namespace facebook::react {
+
+void InitSliderMeasurements(const Mso::React::IReactContext &reactContext) {
+  auto slider = xaml::Controls::Slider();
+  xaml::Style sliderStyle;
+  xaml::Application::Current()
+      .Resources()
+      .TryLookup(winrt::box_value(winrt::xaml_typename<xaml::Controls::Slider>()))
+      .as(sliderStyle);
+  slider.Style(sliderStyle);
+
+  slider.Measure({std::numeric_limits<float>::infinity(), std::numeric_limits<float>::infinity()});
+  auto size = slider.DesiredSize();
+  winrt::Microsoft::ReactNative::ReactPropertyBag(reactContext.Properties())
+      .Set(
+          winrt::Microsoft::ReactNative::ReactPropertyId<winrt::Windows::Foundation::Size>(L"SliderMeasurements"),
+          size);
+}
+
+Size SliderMeasurementsManager::measure(SurfaceId surfaceId, LayoutConstraints layoutConstraints) const {
+  auto context = m_contextContainer->at<winrt::Microsoft::ReactNative::ReactContext>("MSRN.ReactContext");
+  auto size = *context.Properties().Get(
+      winrt::Microsoft::ReactNative::ReactPropertyId<winrt::Windows::Foundation::Size>(L"SliderMeasurements"));
+
+  return {static_cast<float>(size.Width), static_cast<float>(size.Height)};
+}
+
+} // namespace facebook::react

package/Microsoft.ReactNative/Fabric/platform/react/renderer/components/slider/SliderMeasurementsManager.h

@@ -0,0 +1,30 @@
+#pragma once
+
+#include <CppWinrtIncludes.h>
+#include <UI.Xaml.Controls.h>
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+#include <react/renderer/core/LayoutConstraints.h>
+#include <react/utils/ContextContainer.h>
+
+namespace facebook::react {
+
+/**
+ * Class that manages slider measurements across platforms.
+ * On iOS it is a noop, since the height is passed in from JS on iOS only.
+ */
+class SliderMeasurementsManager {
+ public:
+  SliderMeasurementsManager(const ContextContainer::Shared &contextContainer) : m_contextContainer(contextContainer) {}
+
+  static inline bool shouldMeasureSlider() {
+    return true;
+  }
+
+  Size measure(SurfaceId surfaceId, LayoutConstraints layoutConstraints) const;
+
+ private:
+  ContextContainer::Shared m_contextContainer;
+  mutable xaml::Controls::Slider m_slider{nullptr};
+};
+
+} // namespace facebook::react

package/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/Color.cpp

@@ -15,6 +15,7 @@ bool isColorMeaningful(SharedColor const &color) noexcept {
   return colorComponentsFromColor(color).alpha > 0;
 }
 
+#ifndef CORE_ABI
 xaml::Media::Brush SharedColor::AsWindowsBrush() const {
   if (!m_color)
     return nullptr;
@@ -23,6 +24,7 @@ xaml::Media::Brush SharedColor::AsWindowsBrush() const {
   }
   return xaml::Media::SolidColorBrush(m_color->m_color);
 }
+#endif // CORE_ABI
 
 SharedColor colorFromComponents(ColorComponents components) {
   float ratio = 255;

package/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/conversions.h

@@ -58,15 +58,7 @@ inline void fromRawValue(const PropsParserContext &context, const RawValue &valu
 
 #ifdef ANDROID
 
-inline folly::dynamic toDynamic(const SharedColor &color) {
-  ColorComponents components = colorComponentsFromColor(color);
-  auto ratio = 255.f;
-  return (
-      ((int)round(components.alpha * ratio) & 0xff) << 24 | ((int)round(components.red * ratio) & 0xff) << 16 |
-      ((int)round(components.green * ratio) & 0xff) << 8 | ((int)round(components.blue * ratio) & 0xff));
-}
-
-inline int toMapBuffer(const SharedColor &color) {
+inline int toAndroidRepr(const SharedColor &color) {
   ColorComponents components = colorComponentsFromColor(color);
   auto ratio = 255.f;
   return (

package/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/platform/cxx/react/renderer/graphics/Color.h

@@ -12,8 +12,8 @@
 #include <limits>
 
 #include <CppWinRTIncludes.h>
-#include <butter/optional.h>
 #include <react/renderer/graphics/ColorComponents.h>
+#include <optional>
 
 namespace facebook {
 namespace react {
@@ -87,7 +87,9 @@ class SharedColor {
     return m_color->m_color;
   }
 
+#ifndef CORE_ABI
   xaml::Media::Brush AsWindowsBrush() const;
+#endif
 
  private:
   std::shared_ptr<Color> m_color;

package/Microsoft.ReactNative/Fabric/platform/react/renderer/textlayoutmanager/TextLayoutManager.cpp

@@ -5,86 +5,148 @@
 
 #include "pch.h"
 
-#include "TextLayoutManager.h"
-
+#include <Fabric/DWriteHelpers.h>
 #include <dwrite.h>
+#include "TextLayoutManager.h"
 
 #include <unicode.h>
 
-namespace facebook {
-namespace react {
+namespace facebook::react {
 
-TextLayoutManager::~TextLayoutManager() {}
+void TextLayoutManager::GetTextLayout(
+    AttributedStringBox attributedStringBox,
+    ParagraphAttributes paragraphAttributes,
+    LayoutConstraints layoutConstraints,
+    const std::optional<TextAlignment> &textAlignment,
+    winrt::com_ptr<IDWriteTextLayout> &spTextLayout) noexcept {
+  if (attributedStringBox.getValue().isEmpty())
+    return;
+
+  auto fragments = attributedStringBox.getValue().getFragments();
+  auto outerFragment = fragments[0];
+
+  DWRITE_FONT_STYLE style = DWRITE_FONT_STYLE_NORMAL;
+  if (outerFragment.textAttributes.fontStyle == facebook::react::FontStyle::Italic)
+    style = DWRITE_FONT_STYLE_ITALIC;
+  else if (outerFragment.textAttributes.fontStyle == facebook::react::FontStyle::Oblique)
+    style = DWRITE_FONT_STYLE_OBLIQUE;
+
+  winrt::com_ptr<IDWriteTextFormat> spTextFormat;
+  winrt::check_hresult(Microsoft::ReactNative::DWriteFactory()->CreateTextFormat(
+      outerFragment.textAttributes.fontFamily.empty()
+          ? L"Segoe UI"
+          : Microsoft::Common::Unicode::Utf8ToUtf16(outerFragment.textAttributes.fontFamily).c_str(),
+      nullptr, // Font collection (nullptr sets it to use the system font collection).
+      static_cast<DWRITE_FONT_WEIGHT>(outerFragment.textAttributes.fontWeight.value_or(
+          static_cast<facebook::react::FontWeight>(DWRITE_FONT_WEIGHT_REGULAR))),
+      style,
+      DWRITE_FONT_STRETCH_NORMAL,
+      outerFragment.textAttributes.fontSize,
+      L"",
+      spTextFormat.put()));
+
+  DWRITE_TEXT_ALIGNMENT alignment = DWRITE_TEXT_ALIGNMENT_LEADING;
+  if (textAlignment) {
+    switch (*textAlignment) {
+      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;
+      // TODO use LTR values
+      case facebook::react::TextAlignment::Natural:
+        alignment = DWRITE_TEXT_ALIGNMENT_LEADING;
+        break;
+      default:
+        assert(false);
+    }
+  }
+  winrt::check_hresult(spTextFormat->SetTextAlignment(alignment));
+
+  auto str = Microsoft::Common::Unicode::Utf8ToUtf16(attributedStringBox.getValue().getString());
+
+  winrt::check_hresult(Microsoft::ReactNative::DWriteFactory()->CreateTextLayout(
+      str.c_str(), // The string to be laid out and formatted.
+      static_cast<UINT32>(str.length()), // The length of the string.
+      spTextFormat.get(), // The text format to apply to the string (contains font information, etc).
+      layoutConstraints.maximumSize.width, // The width of the layout box.
+      layoutConstraints.maximumSize.height, // The height of the layout box.
+      spTextLayout.put() // The IDWriteTextLayout interface pointer.
+      ));
+
+  unsigned int position = 0;
+  unsigned int length = 0;
+  for (const auto &fragment : fragments) {
+    length = static_cast<UINT32>(fragment.string.length());
+    DWRITE_TEXT_RANGE range = {position, length};
+    TextAttributes attributes = fragment.textAttributes;
+    DWRITE_FONT_STYLE fragmentStyle = DWRITE_FONT_STYLE_NORMAL;
+    if (attributes.fontStyle == facebook::react::FontStyle::Italic)
+      fragmentStyle = DWRITE_FONT_STYLE_ITALIC;
+    else if (attributes.fontStyle == facebook::react::FontStyle::Oblique)
+      fragmentStyle = DWRITE_FONT_STYLE_OBLIQUE;
+
+    winrt::check_hresult(spTextLayout->SetFontFamilyName(
+        attributes.fontFamily.empty() ? L"Segoe UI"
+                                      : Microsoft::Common::Unicode::Utf8ToUtf16(attributes.fontFamily).c_str(),
+        range));
+    winrt::check_hresult(spTextLayout->SetFontWeight(
+        static_cast<DWRITE_FONT_WEIGHT>(
+            attributes.fontWeight.value_or(static_cast<facebook::react::FontWeight>(DWRITE_FONT_WEIGHT_REGULAR))),
+        range));
+    winrt::check_hresult(spTextLayout->SetFontStyle(fragmentStyle, range));
+    winrt::check_hresult(spTextLayout->SetFontSize(attributes.fontSize, range));
+
+    position += length;
+  }
+}
 
-// TODO: This is a placeholder implementation to get basic text rendering.  This should not be considered a real
-// implementation. It currently has various performance issues (like creating a new factory on every run), and only
-// handles single strings, and makes all kinds of assumptions around things like locale, font family etc. This whole
-// implementation will need to be replaced to get text rendering/layout to work properly.
 TextMeasurement TextLayoutManager::measure(
     AttributedStringBox attributedStringBox,
     ParagraphAttributes paragraphAttributes,
     LayoutConstraints layoutConstraints) const {
-  winrt::com_ptr<IDWriteFactory> spDWriteFactory;
-  DWriteCreateFactory(
-      DWRITE_FACTORY_TYPE_SHARED, __uuidof(IDWriteFactory), reinterpret_cast<IUnknown **>(spDWriteFactory.put()));
-
-  for (auto &fragment : attributedStringBox.getValue().getFragments()) {
-    DWRITE_FONT_STYLE style = DWRITE_FONT_STYLE_NORMAL;
-    if (fragment.textAttributes.fontStyle == facebook::react::FontStyle::Italic)
-      style = DWRITE_FONT_STYLE_ITALIC;
-    else if (fragment.textAttributes.fontStyle == facebook::react::FontStyle::Oblique)
-      style = DWRITE_FONT_STYLE_OBLIQUE;
-
-    winrt::com_ptr<IDWriteTextFormat> spTextFormat;
-    spDWriteFactory->CreateTextFormat(
-        fragment.textAttributes.fontFamily.empty()
-            ? L"Segoe UI"
-            : Microsoft::Common::Unicode::Utf8ToUtf16(fragment.textAttributes.fontFamily).c_str(),
-        NULL, // Font collection (NULL sets it to use the system font collection).
-        static_cast<DWRITE_FONT_WEIGHT>(fragment.textAttributes.fontWeight.value_or(
-            static_cast<facebook::react::FontWeight>(DWRITE_FONT_WEIGHT_REGULAR))),
-        style,
-        DWRITE_FONT_STRETCH_NORMAL,
-        fragment.textAttributes.fontSize,
-        L"en-us",
-        spTextFormat.put());
-
-    auto str = Microsoft::Common::Unicode::Utf8ToUtf16(fragment.string);
-
-    winrt::com_ptr<IDWriteTextLayout> spTextLayout;
-    spDWriteFactory->CreateTextLayout(
-        str.c_str(), // The string to be laid out and formatted.
-        static_cast<UINT32>(str.length()), // The length of the string.
-        spTextFormat.get(), // The text format to apply to the string (contains font information, etc).
-        layoutConstraints.maximumSize.width, // The width of the layout box.
-        layoutConstraints.maximumSize.height, // The height of the layout box.
-        spTextLayout.put() // The IDWriteTextLayout interface pointer.
-    );
-
-    TextMeasurement tm;
-
-    DWRITE_TEXT_METRICS dtm;
-    spTextLayout->GetMetrics(&dtm);
+  winrt::com_ptr<IDWriteTextLayout> spTextLayout;
+
+  GetTextLayout(attributedStringBox, paragraphAttributes, layoutConstraints, TextAlignment::Left, spTextLayout);
+
+  TextMeasurement tm{};
+  if (spTextLayout) {
+    DWRITE_TEXT_METRICS dtm{};
+    winrt::check_hresult(spTextLayout->GetMetrics(&dtm));
     tm.size = {dtm.width, dtm.height};
-    return tm;
   }
+  return tm;
+}
 
+/**
+ * Measures an AttributedString on the platform, as identified by some
+ * opaque cache ID.
+ */
+TextMeasurement TextLayoutManager::measureCachedSpannableById(
+    int64_t cacheId,
+    ParagraphAttributes const &paragraphAttributes,
+    LayoutConstraints layoutConstraints) const {
+  assert(false);
   return {};
-};
+}
 
 LinesMeasurements TextLayoutManager::measureLines(
     AttributedString attributedString,
     ParagraphAttributes paragraphAttributes,
     Size size) const {
   assert(false);
-
-  std::vector<LineMeasurement> paragraphLines{};
-  return paragraphLines;
+  return {};
 }
 
 void *TextLayoutManager::getNativeTextLayoutManager() const {
   return (void *)this;
 }
 
-} // namespace react
-} // namespace facebook
+} // namespace facebook::react

package/Microsoft.ReactNative/Fabric/platform/react/renderer/textlayoutmanager/TextLayoutManager.h

@@ -3,6 +3,7 @@
 
 #pragma once
 
+#include <dwrite.h>
 #include <react/renderer/attributedstring/AttributedString.h>
 #include <react/renderer/attributedstring/AttributedStringBox.h>
 #include <react/renderer/attributedstring/ParagraphAttributes.h>
@@ -27,7 +28,7 @@ class TextLayoutManager {
 
 #pragma region required interface from core cxx cross platform impl
   TextLayoutManager(const ContextContainer::Shared &contextContainer) : m_contextContainer(contextContainer){};
-  ~TextLayoutManager();
+  ~TextLayoutManager() = default;
 
   /*
    * Measures `attributedStringBox` using native text rendering infrastructure.
@@ -44,12 +45,28 @@ class TextLayoutManager {
   LinesMeasurements measureLines(AttributedString attributedString, ParagraphAttributes paragraphAttributes, Size size)
       const;
 
+  /**
+   * Measures an AttributedString on the platform, as identified by some
+   * opaque cache ID.
+   */
+  TextMeasurement measureCachedSpannableById(
+      int64_t cacheId,
+      ParagraphAttributes const &paragraphAttributes,
+      LayoutConstraints layoutConstraints) const;
+
   /*
    * Returns an opaque pointer to platform-specific TextLayoutManager.
    * Is used on a native views layer to delegate text rendering to the manager.
    */
   void *getNativeTextLayoutManager() const;
 
+  static void GetTextLayout(
+      AttributedStringBox attributedStringBox,
+      ParagraphAttributes paragraphAttributes,
+      LayoutConstraints layoutConstraints,
+      const std::optional<TextAlignment> &textAlignment,
+      winrt::com_ptr<IDWriteTextLayout> &spTextLayout) noexcept;
+
 #pragma endregion
 
  private:

package/Microsoft.ReactNative/IViewManager.idl

@@ -88,18 +88,18 @@ namespace Microsoft.ReactNative
     )
     void OnPointerEvent(Object view, ReactPointerEventArgs args);
   };
-
+  
   [webhosthidden]
   DOC_STRING(
     "Enables view managers to track when views are"
-    "removed from the shadow tree."
+    "removed from their shadow trees. "
   )
   interface IViewManagerWithDropViewInstance {
     DOC_STRING(
         "Invoked when React has removed the view "
         "from its shadow tree. Note this method call is distinct from "
         "the XAML Unloaded event, which is asynchronously triggered "
-        "when the view is removed from the UI tree."
+        "from when the removal of the view from the UI tree happens. "
     )
     void OnDropViewInstance(XAML_NAMESPACE.FrameworkElement view);
   };