react-native-windows 0.0.0-canary.581 → 0.0.0-canary.583

package/Libraries/platform-types.d.ts

@@ -0,0 +1,17 @@
+/*
+ * This file contains the windows extra types, which are not part of core.
+ *
+ * NOTE: Concrete classes, objects etc that actually need to be exported from the package,
+*        need to also be added to index.windows.js
+*/
+
+export * from './Components/Flyout/FlyoutProps';
+export * from './Components/Flyout/Flyout';
+export * from './Components/Glyph/Glyph';
+export * from './Components/Popup/PopupProps';
+export * from './Components/Popup/Popup';
+export * from './Components/Keyboard/KeyboardExt';
+export * from './Components/Keyboard/KeyboardExtProps';
+export * from './Components/View/ViewWindowsProps';
+export * from './Components/View/ViewWindows';
+export * from './AppTheme/AppThemeTypes';

package/Microsoft.ReactNative/Base/CoreNativeModules.cpp

@@ -18,21 +18,6 @@
 
 namespace Microsoft::ReactNative {
 
-using winrt::Microsoft::ReactNative::ReactPropertyBag;
-
-namespace {
-
-using winrt::Microsoft::ReactNative::ReactPropertyId;
-
-ReactPropertyId<bool> HttpUseMonolithicModuleProperty() noexcept {
-  static ReactPropertyId<bool> propId{
-      L"ReactNative.Http"
-      L"UseMonolithicModule"};
-  return propId;
-}
-
-} // namespace
-
 std::vector<facebook::react::NativeModuleDescription> GetCoreModules(
     const std::shared_ptr<facebook::react::MessageQueueThread> &batchingUIMessageQueue,
     const std::shared_ptr<facebook::react::MessageQueueThread>
@@ -45,17 +30,15 @@ std::vector<facebook::react::NativeModuleDescription> GetCoreModules(
       [props = context->Properties()]() { return Microsoft::React::CreateHttpModule(props); },
       jsMessageQueue);
 
-  if (!ReactPropertyBag(context->Properties()).Get(HttpUseMonolithicModuleProperty())) {
-    modules.emplace_back(
-        Microsoft::React::GetBlobModuleName(),
-        [props = context->Properties()]() { return Microsoft::React::CreateBlobModule(props); },
-        batchingUIMessageQueue);
+  modules.emplace_back(
+      Microsoft::React::GetBlobModuleName(),
+      [props = context->Properties()]() { return Microsoft::React::CreateBlobModule(props); },
+      batchingUIMessageQueue);
 
-    modules.emplace_back(
-        Microsoft::React::GetFileReaderModuleName(),
-        [props = context->Properties()]() { return Microsoft::React::CreateFileReaderModule(props); },
-        batchingUIMessageQueue);
-  }
+  modules.emplace_back(
+      Microsoft::React::GetFileReaderModuleName(),
+      [props = context->Properties()]() { return Microsoft::React::CreateFileReaderModule(props); },
+      batchingUIMessageQueue);
 
   // AsyncStorageModule doesn't work without package identity (it indirectly depends on
   // Windows.Storage.StorageFile), so check for package identity before adding it.

package/Microsoft.ReactNative/CompositionSwitcher.idl

@@ -48,6 +48,7 @@ namespace Microsoft.ReactNative.Composition
     IVisual GetAt(UInt32 index);
     void Opacity(Single opacity);
     void Scale(Windows.Foundation.Numerics.Vector3 scale);
+    void TransformMatrix(Windows.Foundation.Numerics.Matrix4x4 transform);
     void RotationAngle(Single angle);
     void IsVisible(Boolean isVisible);
     void Size(Windows.Foundation.Numerics.Vector2 size);

package/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp

@@ -207,6 +207,10 @@ struct CompVisual : public winrt::implements<
     m_visual.Scale(scale);
   }
 
+  void TransformMatrix(winrt::Windows::Foundation::Numerics::float4x4 const &transform) noexcept {
+    m_visual.TransformMatrix(transform);
+  }
+
   void RotationAngle(float rotation) noexcept {
     m_visual.RotationAngle(rotation);
   }
@@ -289,6 +293,10 @@ struct CompSpriteVisual : winrt::Microsoft::ReactNative::Composition::implementa
     m_visual.Scale(scale);
   }
 
+  void TransformMatrix(winrt::Windows::Foundation::Numerics::float4x4 const &transform) noexcept {
+    m_visual.TransformMatrix(transform);
+  }
+
   void RotationAngle(float rotation) noexcept {
     m_visual.RotationAngle(rotation);
   }
@@ -467,6 +475,10 @@ struct CompScrollerVisual : winrt::Microsoft::ReactNative::Composition::implemen
     m_visual.Scale(scale);
   }
 
+  void TransformMatrix(winrt::Windows::Foundation::Numerics::float4x4 const &transform) noexcept {
+    m_visual.TransformMatrix(transform);
+  }
+
   void RotationAngle(float rotation) noexcept {
     m_visual.RotationAngle(rotation);
   }

package/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp

@@ -10,6 +10,7 @@
 #include <Utils/ValueUtils.h>
 #include <Views/FrameworkElementTransferProperties.h>
 #include <winrt/Windows.UI.Composition.h>
+#include "CompositionContextHelper.h"
 #include "CompositionHelpers.h"
 #include "d2d1helper.h"
 
@@ -975,6 +976,65 @@ void CompositionBaseComponentView::indexOffsetForBorder(uint32_t &index) const n
 
 void CompositionBaseComponentView::OnRenderingDeviceLost() noexcept {}
 
+comp::CompositionPropertySet CompositionBaseComponentView::EnsureCenterPointPropertySet() noexcept {
+  if (m_centerPropSet == nullptr) {
+    auto compositor =
+        winrt::Microsoft::ReactNative::Composition::implementation::CompositionContextHelper::InnerCompositor(
+            m_compContext);
+
+    m_centerPropSet = compositor.CreatePropertySet();
+    UpdateCenterPropertySet();
+    m_centerPropSet.InsertMatrix4x4(L"transform", winrt::Windows::Foundation::Numerics::float4x4::identity());
+    m_centerPropSet.InsertVector3(L"translation", {0, 0, 0});
+  }
+
+  return m_centerPropSet;
+}
+
+// Create a PropertySet that will hold properties used for animation facades:
+//   "center":      This is the center of the Visual, which is used by animations and transforms to rotate around the
+//                  correct center
+//   "dpiScale3":   This is a vector3 containing the scale factor for this view, used in expressions to convert from
+//                  dips to px
+//   "dpiScale3":   This is a vector3 containing the inverse scale factor for this view, used in expressions to
+//                  convert from px to dips "translation": An additional translation to apply to the to the visual in
+//                  addition to Offset.  This is used to apply any translation properties set, or animated
+//   "transform":   A transform to apply to the visual.  This transform is in dips.
+void CompositionBaseComponentView::UpdateCenterPropertySet() noexcept {
+  if (m_centerPropSet != nullptr) {
+    m_centerPropSet.InsertVector3(
+        L"center",
+        {m_layoutMetrics.frame.size.width * m_layoutMetrics.pointScaleFactor / 2,
+         m_layoutMetrics.frame.size.height * m_layoutMetrics.pointScaleFactor / 2,
+         0});
+    m_centerPropSet.InsertVector3(
+        L"dpiScale3",
+        {m_layoutMetrics.pointScaleFactor, m_layoutMetrics.pointScaleFactor, m_layoutMetrics.pointScaleFactor});
+    m_centerPropSet.InsertVector3(
+        L"dpiScale3Inv",
+        {1 / m_layoutMetrics.pointScaleFactor,
+         1 / m_layoutMetrics.pointScaleFactor,
+         1 / m_layoutMetrics.pointScaleFactor});
+  }
+}
+
+void CompositionBaseComponentView::EnsureTransformMatrixFacade() noexcept {
+  if (m_hasTransformMatrixFacade)
+    return;
+  m_hasTransformMatrixFacade = true;
+
+  auto centerPointPropSet = EnsureCenterPointPropertySet();
+  // TODO cache expression instead of creating new ones all the time
+  auto expression =
+      winrt::Microsoft::ReactNative::Composition::implementation::CompositionContextHelper::InnerCompositor(
+          m_compContext)
+          .CreateExpressionAnimation(
+              L"Matrix4x4.CreateFromScale(PS.dpiScale3Inv) * Matrix4x4.CreateFromTranslation(PS.translation) * PS.transform * Matrix4x4.CreateFromScale(PS.dpiScale3)");
+  expression.SetReferenceParameter(L"PS", centerPointPropSet);
+  winrt::Microsoft::ReactNative::Composition::implementation::CompositionContextHelper::InnerVisual(Visual())
+      .StartAnimation(L"TransformMatrix", expression);
+}
+
 CompositionViewComponentView::CompositionViewComponentView(
     const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
     facebook::react::Tag tag)
@@ -1047,12 +1107,28 @@ void CompositionViewComponentView::updateProps(
 
   // Transform - TODO doesn't handle multiple of the same kind of transform -- Doesn't handle hittesting updates
   if (oldViewProps.transform != newViewProps.transform) {
-    for (const auto &operation : newViewProps.transform.operations) {
-      if (operation.type == facebook::react::TransformOperationType::Scale)
-        m_visual.Scale({operation.x, operation.y, operation.z});
-      else if (operation.type == facebook::react::TransformOperationType::Rotate)
-        m_visual.RotationAngle(operation.z);
-    }
+    winrt::Windows::Foundation::Numerics::float4x4 transformMatrix;
+    transformMatrix.m11 = newViewProps.transform.matrix[0];
+    transformMatrix.m12 = newViewProps.transform.matrix[1];
+    transformMatrix.m13 = newViewProps.transform.matrix[2];
+    transformMatrix.m14 = newViewProps.transform.matrix[3];
+    transformMatrix.m21 = newViewProps.transform.matrix[4];
+    transformMatrix.m22 = newViewProps.transform.matrix[5];
+    transformMatrix.m23 = newViewProps.transform.matrix[6];
+    transformMatrix.m24 = newViewProps.transform.matrix[7];
+    transformMatrix.m31 = newViewProps.transform.matrix[8];
+    transformMatrix.m32 = newViewProps.transform.matrix[9];
+    transformMatrix.m33 = newViewProps.transform.matrix[10];
+    transformMatrix.m34 = newViewProps.transform.matrix[11];
+    transformMatrix.m41 = newViewProps.transform.matrix[12];
+    transformMatrix.m42 = newViewProps.transform.matrix[13];
+    transformMatrix.m43 = newViewProps.transform.matrix[14];
+    transformMatrix.m44 = newViewProps.transform.matrix[15];
+
+    auto centerPointPropSet = EnsureCenterPointPropertySet();
+    centerPointPropSet.InsertMatrix4x4(L"transform", transformMatrix);
+
+    EnsureTransformMatrixFacade();
   }
 
   m_props = std::static_pointer_cast<facebook::react::ViewProps const>(props);
@@ -1116,6 +1192,7 @@ void CompositionViewComponentView::updateLayoutMetrics(
 
   m_layoutMetrics = layoutMetrics;
 
+  UpdateCenterPropertySet();
   m_visual.Size(
       {layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor,
        layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor});

package/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h

@@ -50,6 +50,9 @@ struct CompositionBaseComponentView : public IComponentView {
 
   virtual void OnRenderingDeviceLost() noexcept;
 
+  comp::CompositionPropertySet EnsureCenterPointPropertySet() noexcept;
+  void EnsureTransformMatrixFacade() noexcept;
+
  protected:
   std::array<winrt::Microsoft::ReactNative::Composition::SpriteVisual, SpecialBorderLayerCount>
   FindSpecialBorderLayers() const noexcept;
@@ -60,14 +63,17 @@ struct CompositionBaseComponentView : public IComponentView {
   void UpdateSpecialBorderLayers(
       facebook::react::LayoutMetrics const &layoutMetrics,
       const facebook::react::ViewProps &viewProps) noexcept;
+  void UpdateCenterPropertySet() noexcept;
 
   winrt::Microsoft::ReactNative::Composition::ICompositionContext m_compContext;
+  comp::CompositionPropertySet m_centerPropSet{nullptr};
   const facebook::react::Tag m_tag;
   facebook::react::SharedViewEventEmitter m_eventEmitter;
   std::vector<const IComponentView *> m_children;
   IComponentView *m_parent{nullptr};
   facebook::react::LayoutMetrics m_layoutMetrics;
   bool m_needsBorderUpdate{false};
+  bool m_hasTransformMatrixFacade{false};
   uint8_t m_numBorderVisuals{0};
 };
 

package/Microsoft.ReactNative/Fabric/Composition/ImageComponentView.cpp

@@ -178,6 +178,7 @@ void ImageComponentView::updateLayoutMetrics(
 
   m_layoutMetrics = layoutMetrics;
 
+  UpdateCenterPropertySet();
   m_visual.Size(
       {layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor,
        layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor});

package/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp

@@ -88,6 +88,7 @@ void ParagraphComponentView::updateLayoutMetrics(
 
   m_layoutMetrics = layoutMetrics;
 
+  UpdateCenterPropertySet();
   m_visual.Size(
       {layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor,
        layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor});

package/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp

@@ -197,6 +197,7 @@ void ScrollViewComponentView::updateLayoutMetrics(
   // m_needsBorderUpdate = true;
   m_layoutMetrics = layoutMetrics;
 
+  UpdateCenterPropertySet();
   m_visual.Size(
       {layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor,
        layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor});

package/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp

@@ -782,6 +782,7 @@ void WindowsTextInputComponentView::updateLayoutMetrics(
   m_imgWidth = newWidth;
   m_imgHeight = newHeight;
 
+  UpdateCenterPropertySet();
   m_visual.Size(
       {layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor,
        layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor});

package/Microsoft.ReactNative/Modules/Animated/AdditionAnimatedNode.cpp

@@ -21,7 +21,7 @@ AdditionAnimatedNode::AdditionAnimatedNode(
 
   if (m_useComposition) {
     m_propertySet.StartAnimation(s_valueName, [nodes = m_inputNodes, manager]() {
-      const auto anim = Microsoft::ReactNative::GetCompositor().CreateExpressionAnimation();
+      const auto anim = manager->Compositor().CreateExpressionAnimation();
 
       anim.Expression([nodes, manager, anim]() {
         winrt::hstring expr = L"0";

package/Microsoft.ReactNative/Modules/Animated/CalculatedAnimationDriver.cpp

@@ -11,8 +11,8 @@ namespace Microsoft::ReactNative {
 std::tuple<comp::CompositionAnimation, comp::CompositionScopedBatch> CalculatedAnimationDriver::MakeAnimation(
     const winrt::Microsoft::ReactNative::JSValueObject & /*config*/) {
   assert(m_useComposition);
-  const auto [scopedBatch, animation, easingFunction] = []() {
-    const auto compositor = Microsoft::ReactNative::GetCompositor();
+  const auto [scopedBatch, animation, easingFunction] = [manager = m_manager.lock()]() {
+    const auto compositor = manager->Compositor();
     return std::make_tuple(
         compositor.CreateScopedBatch(comp::CompositionBatchTypes::AllAnimations),
         compositor.CreateScalarKeyFrameAnimation(),

package/Microsoft.ReactNative/Modules/Animated/DiffClampAnimatedNode.cpp

@@ -19,7 +19,7 @@ DiffClampAnimatedNode::DiffClampAnimatedNode(
 
   if (m_useComposition) {
     m_propertySet.StartAnimation(s_valueName, [node = m_inputNodeTag, min = m_min, max = m_max, manager]() {
-      const auto anim = Microsoft::ReactNative::GetCompositor().CreateExpressionAnimation();
+      const auto anim = manager->Compositor().CreateExpressionAnimation();
       anim.SetReferenceParameter(s_inputParameterName, manager->GetValueAnimatedNode(node)->PropertySet());
       anim.SetScalarParameter(s_minParameterName, static_cast<float>(min));
       anim.SetScalarParameter(s_maxParameterName, static_cast<float>(max));

package/Microsoft.ReactNative/Modules/Animated/DivisionAnimatedNode.cpp

@@ -24,7 +24,7 @@ DivisionAnimatedNode::DivisionAnimatedNode(
 
   if (m_useComposition) {
     m_propertySet.StartAnimation(s_valueName, [firstNode = m_firstInput, nodes = m_inputNodes, manager]() {
-      const auto anim = Microsoft::ReactNative::GetCompositor().CreateExpressionAnimation();
+      const auto anim = manager->Compositor().CreateExpressionAnimation();
 
       anim.Expression([firstNode, nodes, manager, anim]() {
         anim.SetReferenceParameter(s_baseName, manager->GetValueAnimatedNode(firstNode)->PropertySet());

package/Microsoft.ReactNative/Modules/Animated/FrameAnimationDriver.cpp

@@ -24,8 +24,8 @@ FrameAnimationDriver::FrameAnimationDriver(
 std::tuple<comp::CompositionAnimation, comp::CompositionScopedBatch> FrameAnimationDriver::MakeAnimation(
     const winrt::Microsoft::ReactNative::JSValueObject & /*config*/) {
   assert(m_useComposition);
-  const auto [scopedBatch, animation] = []() {
-    const auto compositor = Microsoft::ReactNative::GetCompositor();
+  const auto [scopedBatch, animation] = [manager = m_manager.lock()]() {
+    const auto compositor = manager->Compositor();
     return std::make_tuple(
         compositor.CreateScopedBatch(
             IsRS5OrHigher() ? comp::CompositionBatchTypes::AllAnimations : comp::CompositionBatchTypes::Animation),

package/Microsoft.ReactNative/Modules/Animated/InterpolationAnimatedNode.cpp

@@ -59,7 +59,7 @@ void InterpolationAnimatedNode::OnAttachToNode(int64_t animatedNodeTag) {
     const auto [rawValueAnimation, offsetAnimation] = [this]() {
       if (const auto manager = m_manager.lock()) {
         if (const auto parent = manager->GetValueAnimatedNode(m_parentTag)) {
-          const auto compositor = Microsoft::ReactNative::GetCompositor();
+          const auto compositor = manager->Compositor();
 
           const auto rawValueAnimation = CreateExpressionAnimation(compositor, *parent);
           rawValueAnimation.Expression(

package/Microsoft.ReactNative/Modules/Animated/ModulusAnimatedNode.cpp

@@ -18,7 +18,7 @@ ModulusAnimatedNode::ModulusAnimatedNode(
 
   if (m_useComposition) {
     m_propertySet.StartAnimation(s_valueName, [node = m_inputNodeTag, mod = m_modulus, manager]() {
-      const auto anim = Microsoft::ReactNative::GetCompositor().CreateExpressionAnimation();
+      const auto anim = manager->Compositor().CreateExpressionAnimation();
       anim.SetReferenceParameter(s_inputParameterName, manager->GetValueAnimatedNode(node)->PropertySet());
       anim.SetScalarParameter(s_modName, static_cast<float>(mod));
       anim.Expression(

package/Microsoft.ReactNative/Modules/Animated/MultiplicationAnimatedNode.cpp

@@ -20,7 +20,7 @@ MultiplicationAnimatedNode::MultiplicationAnimatedNode(
 
   if (m_useComposition) {
     m_propertySet.StartAnimation(s_valueName, [nodes = m_inputNodes, manager]() {
-      const auto anim = Microsoft::ReactNative::GetCompositor().CreateExpressionAnimation();
+      const auto anim = manager->Compositor().CreateExpressionAnimation();
 
       anim.Expression([nodes, manager, anim]() {
         winrt::hstring expr = L"1";

package/Microsoft.ReactNative/Modules/Animated/NativeAnimatedModule.cpp

@@ -12,6 +12,7 @@ namespace Microsoft::ReactNative {
 
 void NativeAnimatedModule::Initialize(winrt::Microsoft::ReactNative::ReactContext const &reactContext) noexcept {
   m_context = reactContext;
+  m_nodesManager = std::make_shared<NativeAnimatedNodeManager>(reactContext);
 }
 
 void NativeAnimatedModule::startOperationBatch() noexcept {

package/Microsoft.ReactNative/Modules/Animated/NativeAnimatedModule.h

@@ -142,7 +142,7 @@ struct NativeAnimatedModule : std::enable_shared_from_this<NativeAnimatedModule>
   void queueAndExecuteBatchedOperations(::React::JSValueArray &&operationsAndArgs) noexcept;
 
  private:
-  std::shared_ptr<NativeAnimatedNodeManager> m_nodesManager{std::make_shared<NativeAnimatedNodeManager>()};
+  std::shared_ptr<NativeAnimatedNodeManager> m_nodesManager;
   winrt::Microsoft::ReactNative::ReactContext m_context;
 };
 } // namespace Microsoft::ReactNative

package/Microsoft.ReactNative/Modules/Animated/NativeAnimatedNodeManager.cpp

@@ -27,7 +27,35 @@
 #include <Windows.Foundation.h>
 #include <queue>
 
+#ifdef USE_FABRIC
+#include <Fabric/Composition/CompositionContextHelper.h>
+#include <Fabric/Composition/CompositionUIService.h>
+#endif
+
 namespace Microsoft::ReactNative {
+
+NativeAnimatedNodeManager::NativeAnimatedNodeManager(winrt::Microsoft::ReactNative::ReactContext const &reactContext)
+    : m_context(reactContext) {}
+
+const winrt::Microsoft::ReactNative::ReactContext &NativeAnimatedNodeManager::ReactContext() const noexcept {
+  return m_context;
+}
+
+comp::Compositor NativeAnimatedNodeManager::Compositor() const noexcept {
+#ifdef USE_FABRIC
+  auto compositionContext =
+      winrt::Microsoft::ReactNative::Composition::implementation::CompositionUIService::GetCompositionContext(
+          m_context.Properties().Handle());
+  if (compositionContext) {
+    return winrt::Microsoft::ReactNative::Composition::implementation::CompositionContextHelper::InnerCompositor(
+        compositionContext);
+  }
+#endif
+  // TODO: Islands - need to get the XamlView associated with this animation in order to
+  // use the compositor Microsoft::ReactNative::GetCompositor(xamlView)
+  return Microsoft::ReactNative::GetCompositor();
+}
+
 void NativeAnimatedNodeManager::CreateAnimatedNode(
     int64_t tag,
     const ::React::JSValueObject &config,

package/Microsoft.ReactNative/Modules/Animated/NativeAnimatedNodeManager.h

@@ -43,6 +43,9 @@ class AnimationDriver;
 class EventAnimationDriver;
 class NativeAnimatedNodeManager {
  public:
+  NativeAnimatedNodeManager(winrt::Microsoft::ReactNative::ReactContext const &reactContext);
+  const winrt::Microsoft::ReactNative::ReactContext &ReactContext() const noexcept;
+  comp::Compositor Compositor() const noexcept;
   void CreateAnimatedNode(
       int64_t tag,
       const winrt::Microsoft::ReactNative::JSValueObject &config,
@@ -127,6 +130,7 @@ class NativeAnimatedNodeManager {
   std::unordered_map<int64_t, int64_t> m_deferredAnimationForValues{};
   std::vector<std::tuple<int64_t, int64_t>> m_trackingAndLeadNodeTags{};
   std::vector<int64_t> m_delayedPropsNodes{};
+  winrt::Microsoft::ReactNative::ReactContext m_context;
 
   std::unordered_set<int64_t> m_updatedNodes{};
   std::vector<int64_t> m_activeAnimationIds{};