From fc4d0c8a10a094b924a12df08b7c13a7e0a3e60b Mon Sep 17 00:00:00 2001 From: Venkata Sharath Chandra Manchala <10109130+sharath2727@users.noreply.github.com> Date: Tue, 16 Jul 2024 10:18:24 -0700 Subject: [PATCH 1/4] Resolve transform before animation --- .../CompositionViewComponentView.cpp | 60 +++++++++++-------- .../CompositionViewComponentView.h | 4 ++ 2 files changed, 40 insertions(+), 24 deletions(-) diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp index f0a3757811d..d2dec611cda 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp @@ -180,11 +180,46 @@ const facebook::react::LayoutMetrics &ComponentView::layoutMetrics() const noexc return m_layoutMetrics; } +void ComponentView::FinalizeTransform( + facebook::react::LayoutMetrics const &layoutMetrics, + const facebook::react::ViewProps &viewProps) { + const auto resolveTransformMatrix = viewProps.resolveTransform(layoutMetrics); + winrt::Windows::Foundation::Numerics::float4x4 transformMatrix; + transformMatrix.m11 = resolveTransformMatrix.matrix[0]; + transformMatrix.m12 = resolveTransformMatrix.matrix[1]; + transformMatrix.m13 = resolveTransformMatrix.matrix[2]; + transformMatrix.m14 = resolveTransformMatrix.matrix[3]; + transformMatrix.m21 = resolveTransformMatrix.matrix[4]; + transformMatrix.m22 = resolveTransformMatrix.matrix[5]; + transformMatrix.m23 = resolveTransformMatrix.matrix[6]; + transformMatrix.m24 = resolveTransformMatrix.matrix[7]; + transformMatrix.m31 = resolveTransformMatrix.matrix[8]; + transformMatrix.m32 = resolveTransformMatrix.matrix[9]; + transformMatrix.m33 = resolveTransformMatrix.matrix[10]; + transformMatrix.m34 = resolveTransformMatrix.matrix[11]; + transformMatrix.m41 = resolveTransformMatrix.matrix[12]; + transformMatrix.m42 = resolveTransformMatrix.matrix[13]; + transformMatrix.m43 = resolveTransformMatrix.matrix[14]; + transformMatrix.m44 = resolveTransformMatrix.matrix[15]; + + auto centerPointPropSet = EnsureCenterPointPropertySet(); + if (centerPointPropSet) { + centerPointPropSet.InsertMatrix4x4(L"transform", transformMatrix); + } + + EnsureTransformMatrixFacade(); + m_FinalizeTransform = false; +} + void ComponentView::FinalizeUpdates(winrt::Microsoft::ReactNative::ComponentViewUpdateMask updateMask) noexcept { if ((m_flags & ComponentViewFeatures::NativeBorder) == ComponentViewFeatures::NativeBorder) { finalizeBorderUpdates(m_layoutMetrics, *viewProps()); } + if (m_FinalizeTransform) { + FinalizeTransform(m_layoutMetrics, *viewProps()); + } + base_type::FinalizeUpdates(updateMask); } @@ -1246,30 +1281,7 @@ void ComponentView::updateTransformProps( // Transform - TODO doesn't handle multiple of the same kind of transform -- Doesn't handle hittesting updates if (oldViewProps.transform != newViewProps.transform) { - 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(); - if (centerPointPropSet) { - centerPointPropSet.InsertMatrix4x4(L"transform", transformMatrix); - } - - EnsureTransformMatrixFacade(); + m_FinalizeTransform = true; } } diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h index 1ad1df1d440..608c5643501 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h @@ -168,7 +168,11 @@ struct ComponentView std::array FindSpecialBorderLayers() const noexcept; void UpdateCenterPropertySet() noexcept; + void FinalizeTransform( + facebook::react::LayoutMetrics const &layoutMetrics, + const facebook::react::ViewProps &viewProps); + bool m_transform{false}; ComponentViewFeatures m_flags; void showFocusVisual(bool show) noexcept; winrt::Microsoft::ReactNative::Composition::Experimental::IFocusVisual m_focusVisual{nullptr}; From b38ba377549f7493686d7ab93f2ed03fe9a5522e Mon Sep 17 00:00:00 2001 From: Venkata Sharath Chandra Manchala <10109130+sharath2727@users.noreply.github.com> Date: Tue, 16 Jul 2024 10:21:10 -0700 Subject: [PATCH 2/4] Change files --- ...ative-windows-b3194f0e-3be5-42d3-a9d7-418966736ad0.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/react-native-windows-b3194f0e-3be5-42d3-a9d7-418966736ad0.json diff --git a/change/react-native-windows-b3194f0e-3be5-42d3-a9d7-418966736ad0.json b/change/react-native-windows-b3194f0e-3be5-42d3-a9d7-418966736ad0.json new file mode 100644 index 00000000000..0dc6a29cb59 --- /dev/null +++ b/change/react-native-windows-b3194f0e-3be5-42d3-a9d7-418966736ad0.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "Resolve transform before animation", + "packageName": "react-native-windows", + "email": "10109130+sharath2727@users.noreply.github.com", + "dependentChangeType": "patch" +} From b1812068ce3f747c80710832fd9f6da8c94bdbaf Mon Sep 17 00:00:00 2001 From: Venkata Sharath Chandra Manchala <10109130+sharath2727@users.noreply.github.com> Date: Tue, 16 Jul 2024 10:39:56 -0700 Subject: [PATCH 3/4] Minor naming fix --- .../Fabric/Composition/CompositionViewComponentView.h | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h index 608c5643501..abcdbe5dc82 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h @@ -172,7 +172,7 @@ struct ComponentView facebook::react::LayoutMetrics const &layoutMetrics, const facebook::react::ViewProps &viewProps); - bool m_transform{false}; + bool m_FinalizeTransform{false}; ComponentViewFeatures m_flags; void showFocusVisual(bool show) noexcept; winrt::Microsoft::ReactNative::Composition::Experimental::IFocusVisual m_focusVisual{nullptr}; From d2f070cc7396102b6e7a9b45572899fb535c90fc Mon Sep 17 00:00:00 2001 From: Venkata Sharath Chandra Manchala <10109130+sharath2727@users.noreply.github.com> Date: Tue, 16 Jul 2024 11:17:12 -0700 Subject: [PATCH 4/4] noexcept --- .../Fabric/Composition/CompositionViewComponentView.cpp | 2 +- .../Fabric/Composition/CompositionViewComponentView.h | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp index d2dec611cda..061a388b5e6 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp @@ -182,7 +182,7 @@ const facebook::react::LayoutMetrics &ComponentView::layoutMetrics() const noexc void ComponentView::FinalizeTransform( facebook::react::LayoutMetrics const &layoutMetrics, - const facebook::react::ViewProps &viewProps) { + const facebook::react::ViewProps &viewProps) noexcept { const auto resolveTransformMatrix = viewProps.resolveTransform(layoutMetrics); winrt::Windows::Foundation::Numerics::float4x4 transformMatrix; transformMatrix.m11 = resolveTransformMatrix.matrix[0]; diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h index abcdbe5dc82..ef9927b1f76 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h @@ -170,7 +170,7 @@ struct ComponentView void UpdateCenterPropertySet() noexcept; void FinalizeTransform( facebook::react::LayoutMetrics const &layoutMetrics, - const facebook::react::ViewProps &viewProps); + const facebook::react::ViewProps &viewProps) noexcept; bool m_FinalizeTransform{false}; ComponentViewFeatures m_flags;