From 6049a32b754e8946fabd117cdb0e65455898df4e Mon Sep 17 00:00:00 2001 From: Anupriya Verma Date: Tue, 25 Mar 2025 08:23:05 +0530 Subject: [PATCH 01/13] Initial Commit for onScrollBeginDrag --- .../Composition/ScrollViewComponentView.cpp | 152 +++++++++--------- .../Composition/ScrollViewComponentView.h | 4 + 2 files changed, 79 insertions(+), 77 deletions(-) diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp index 12e2ae3d84c..064595f5493 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp @@ -608,94 +608,92 @@ ScrollViewComponentView::ScrollViewComponentView( compContext, tag, reactContext, - ComponentViewFeatures::Default & ~ComponentViewFeatures::Background) { - // m_element.Content(m_contentPanel); + ComponentViewFeatures::Default & ~ComponentViewFeatures::Background), + m_element(winrt::Windows::UI::Xaml::Controls::ScrollViewer()), + m_contentPanel(winrt::Windows::UI::Xaml::Controls::StackPanel()) { + + m_element.Content(m_contentPanel); /* - m_scrollViewerViewChangingRevoker = - m_element.ViewChanging(winrt::auto_revoke, [this](const auto &sender, const auto &args) { - const auto scrollViewerNotNull = sender.as(); - - facebook::react::ScrollViewMetrics scrollMetrics; - scrollMetrics.containerSize.height = static_cast(m_element.ActualHeight()); - scrollMetrics.containerSize.width = static_cast(m_element.ActualWidth()); - scrollMetrics.contentOffset.x = static_cast(args.NextView().HorizontalOffset()); - scrollMetrics.contentOffset.y = static_cast(args.NextView().VerticalOffset()); - scrollMetrics.zoomScale = args.NextView().ZoomFactor(); - scrollMetrics.contentSize.height = static_cast(m_contentPanel.ActualHeight()); - scrollMetrics.contentSize.width = static_cast(m_contentPanel.ActualWidth()); - - // If we are transitioning to inertial scrolling. - if (m_isScrolling && !m_isScrollingFromInertia && args.IsInertial()) { - m_isScrollingFromInertia = true; - - if (m_eventEmitter) { - std::static_pointer_cast(m_eventEmitter) - ->onScrollEndDrag(scrollMetrics); - std::static_pointer_cast(m_eventEmitter) - ->onMomentumScrollBegin(scrollMetrics); - } - } + m_scrollViewerViewChangingRevoker = + m_element.ViewChanging(winrt::auto_revoke, [this](const auto &sender, const auto &args) { + const auto scrollViewerNotNull = sender.as(); + + facebook::react::ScrollViewMetrics scrollMetrics; + scrollMetrics.containerSize.height = static_cast(m_element.ActualHeight()); + scrollMetrics.containerSize.width = static_cast(m_element.ActualWidth()); + scrollMetrics.contentOffset.x = static_cast(args.NextView().HorizontalOffset()); + scrollMetrics.contentOffset.y = static_cast(args.NextView().VerticalOffset()); + scrollMetrics.zoomScale = args.NextView().ZoomFactor(); + scrollMetrics.contentSize.height = static_cast(m_contentPanel.ActualHeight()); + scrollMetrics.contentSize.width = static_cast(m_contentPanel.ActualWidth()); + + // If we are transitioning to inertial scrolling. + if (m_isScrolling && !m_isScrollingFromInertia && args.IsInertial()) { + m_isScrollingFromInertia = true; if (m_eventEmitter) { std::static_pointer_cast(m_eventEmitter) - ->onScroll(scrollMetrics); - } - }); - - m_scrollViewerDirectManipulationStartedRevoker = - m_element.DirectManipulationStarted(winrt::auto_revoke, [this](const auto &sender, const auto &) { - m_isScrolling = true; - - - //if (m_dismissKeyboardOnDrag && m_SIPEventHandler) { - // m_SIPEventHandler->TryHide(); - //} - - - facebook::react::ScrollViewMetrics scrollMetrics; - scrollMetrics.containerSize.height = static_cast(m_element.ActualHeight()); - scrollMetrics.containerSize.width = static_cast(m_element.ActualWidth()); - scrollMetrics.contentOffset.x = static_cast(m_element.HorizontalOffset()); - scrollMetrics.contentOffset.y = static_cast(m_element.VerticalOffset()); - scrollMetrics.zoomScale = m_element.ZoomFactor(); - scrollMetrics.contentSize.height = static_cast(m_contentPanel.ActualHeight()); - scrollMetrics.contentSize.width = static_cast(m_contentPanel.ActualWidth()); - - const auto scrollViewer = sender.as(); - if (m_eventEmitter) { + ->onScrollEndDrag(scrollMetrics); std::static_pointer_cast(m_eventEmitter) - ->onScrollBeginDrag(scrollMetrics); + ->onMomentumScrollBegin(scrollMetrics); } - }); - - m_scrollViewerDirectManipulationCompletedRevoker = - m_element.DirectManipulationCompleted(winrt::auto_revoke, [this](const auto &sender, const auto &args) { - const auto scrollViewer = sender.as(); + } - facebook::react::ScrollViewMetrics scrollMetrics; - scrollMetrics.containerSize.height = static_cast(m_element.ActualHeight()); - scrollMetrics.containerSize.width = static_cast(m_element.ActualWidth()); - scrollMetrics.contentOffset.x = static_cast(m_element.HorizontalOffset()); - scrollMetrics.contentOffset.y = static_cast(m_element.VerticalOffset()); - scrollMetrics.zoomScale = m_element.ZoomFactor(); - scrollMetrics.contentSize.height = static_cast(m_contentPanel.ActualHeight()); - scrollMetrics.contentSize.width = static_cast(m_contentPanel.ActualWidth()); + if (m_eventEmitter) { + std::static_pointer_cast(m_eventEmitter) + ->onScroll(scrollMetrics); + } + }); + */ + + m_scrollViewerDirectManipulationStartedRevoker = + m_element.DirectManipulationStarted(winrt::auto_revoke, [this](const auto &sender, const auto &) { + m_isScrolling = true; + + facebook::react::ScrollViewMetrics scrollMetrics; + scrollMetrics.containerSize.height = static_cast(m_element.ActualHeight()); + scrollMetrics.containerSize.width = static_cast(m_element.ActualWidth()); + scrollMetrics.contentOffset.x = static_cast(m_element.HorizontalOffset()); + scrollMetrics.contentOffset.y = static_cast(m_element.VerticalOffset()); + scrollMetrics.zoomScale = m_element.ZoomFactor(); + scrollMetrics.contentSize.height = static_cast(m_contentPanel.ActualHeight()); + scrollMetrics.contentSize.width = static_cast(m_contentPanel.ActualWidth()); + + const auto scrollViewer = sender.as(); + if (m_eventEmitter) { + std::static_pointer_cast(m_eventEmitter) + ->onScrollBeginDrag(scrollMetrics); + } + }); - if (m_eventEmitter) { - if (m_isScrollingFromInertia) { - std::static_pointer_cast(m_eventEmitter) - ->onMomentumScrollEnd(scrollMetrics); - } else { - std::static_pointer_cast(m_eventEmitter) - ->onScrollEndDrag(scrollMetrics); - } + /* + m_scrollViewerDirectManipulationCompletedRevoker = + m_element.DirectManipulationCompleted(winrt::auto_revoke, [this](const auto &sender, const auto &args) { + const auto scrollViewer = sender.as(); + + facebook::react::ScrollViewMetrics scrollMetrics; + scrollMetrics.containerSize.height = static_cast(m_element.ActualHeight()); + scrollMetrics.containerSize.width = static_cast(m_element.ActualWidth()); + scrollMetrics.contentOffset.x = static_cast(m_element.HorizontalOffset()); + scrollMetrics.contentOffset.y = static_cast(m_element.VerticalOffset()); + scrollMetrics.zoomScale = m_element.ZoomFactor(); + scrollMetrics.contentSize.height = static_cast(m_contentPanel.ActualHeight()); + scrollMetrics.contentSize.width = static_cast(m_contentPanel.ActualWidth()); + + if (m_eventEmitter) { + if (m_isScrollingFromInertia) { + std::static_pointer_cast(m_eventEmitter) + ->onMomentumScrollEnd(scrollMetrics); + } else { + std::static_pointer_cast(m_eventEmitter) + ->onScrollEndDrag(scrollMetrics); } + } - m_isScrolling = false; - m_isScrollingFromInertia = false; - }); - */ + m_isScrolling = false; + m_isScrollingFromInertia = false; + });*/ } void ScrollViewComponentView::MountChildComponentView( diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h index c82e6ae5f0b..d0cf147cea2 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h @@ -136,6 +136,10 @@ struct ScrollInteractionTrackerOwner : public winrt::implements< winrt::Microsoft::ReactNative::Composition::Experimental::IScrollVisual::ScrollPositionChanged_revoker m_scrollPositionChangedRevoker{}; + winrt::Windows::UI::Xaml::Controls::ScrollViewer::DirectManipulationStarted_revoker m_scrollViewerDirectManipulationStartedRevoker; + winrt::Windows::UI::Xaml::Controls::ScrollViewer m_element; + winrt::Windows::UI::Xaml::Controls::StackPanel m_contentPanel; + float m_zoomFactor{1.0f}; bool m_isScrollingFromInertia = false; bool m_isScrolling = false; From fa35533bec64bbb3ae5e828122d9515778eb1e27 Mon Sep 17 00:00:00 2001 From: Anupriya Verma Date: Tue, 25 Mar 2025 08:23:05 +0530 Subject: [PATCH 02/13] Initial Commit for onScrollBeginDrag --- .../Composition/ScrollViewComponentView.cpp | 152 +++++++++--------- .../Composition/ScrollViewComponentView.h | 4 + 2 files changed, 79 insertions(+), 77 deletions(-) diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp index 12e2ae3d84c..064595f5493 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp @@ -608,94 +608,92 @@ ScrollViewComponentView::ScrollViewComponentView( compContext, tag, reactContext, - ComponentViewFeatures::Default & ~ComponentViewFeatures::Background) { - // m_element.Content(m_contentPanel); + ComponentViewFeatures::Default & ~ComponentViewFeatures::Background), + m_element(winrt::Windows::UI::Xaml::Controls::ScrollViewer()), + m_contentPanel(winrt::Windows::UI::Xaml::Controls::StackPanel()) { + + m_element.Content(m_contentPanel); /* - m_scrollViewerViewChangingRevoker = - m_element.ViewChanging(winrt::auto_revoke, [this](const auto &sender, const auto &args) { - const auto scrollViewerNotNull = sender.as(); - - facebook::react::ScrollViewMetrics scrollMetrics; - scrollMetrics.containerSize.height = static_cast(m_element.ActualHeight()); - scrollMetrics.containerSize.width = static_cast(m_element.ActualWidth()); - scrollMetrics.contentOffset.x = static_cast(args.NextView().HorizontalOffset()); - scrollMetrics.contentOffset.y = static_cast(args.NextView().VerticalOffset()); - scrollMetrics.zoomScale = args.NextView().ZoomFactor(); - scrollMetrics.contentSize.height = static_cast(m_contentPanel.ActualHeight()); - scrollMetrics.contentSize.width = static_cast(m_contentPanel.ActualWidth()); - - // If we are transitioning to inertial scrolling. - if (m_isScrolling && !m_isScrollingFromInertia && args.IsInertial()) { - m_isScrollingFromInertia = true; - - if (m_eventEmitter) { - std::static_pointer_cast(m_eventEmitter) - ->onScrollEndDrag(scrollMetrics); - std::static_pointer_cast(m_eventEmitter) - ->onMomentumScrollBegin(scrollMetrics); - } - } + m_scrollViewerViewChangingRevoker = + m_element.ViewChanging(winrt::auto_revoke, [this](const auto &sender, const auto &args) { + const auto scrollViewerNotNull = sender.as(); + + facebook::react::ScrollViewMetrics scrollMetrics; + scrollMetrics.containerSize.height = static_cast(m_element.ActualHeight()); + scrollMetrics.containerSize.width = static_cast(m_element.ActualWidth()); + scrollMetrics.contentOffset.x = static_cast(args.NextView().HorizontalOffset()); + scrollMetrics.contentOffset.y = static_cast(args.NextView().VerticalOffset()); + scrollMetrics.zoomScale = args.NextView().ZoomFactor(); + scrollMetrics.contentSize.height = static_cast(m_contentPanel.ActualHeight()); + scrollMetrics.contentSize.width = static_cast(m_contentPanel.ActualWidth()); + + // If we are transitioning to inertial scrolling. + if (m_isScrolling && !m_isScrollingFromInertia && args.IsInertial()) { + m_isScrollingFromInertia = true; if (m_eventEmitter) { std::static_pointer_cast(m_eventEmitter) - ->onScroll(scrollMetrics); - } - }); - - m_scrollViewerDirectManipulationStartedRevoker = - m_element.DirectManipulationStarted(winrt::auto_revoke, [this](const auto &sender, const auto &) { - m_isScrolling = true; - - - //if (m_dismissKeyboardOnDrag && m_SIPEventHandler) { - // m_SIPEventHandler->TryHide(); - //} - - - facebook::react::ScrollViewMetrics scrollMetrics; - scrollMetrics.containerSize.height = static_cast(m_element.ActualHeight()); - scrollMetrics.containerSize.width = static_cast(m_element.ActualWidth()); - scrollMetrics.contentOffset.x = static_cast(m_element.HorizontalOffset()); - scrollMetrics.contentOffset.y = static_cast(m_element.VerticalOffset()); - scrollMetrics.zoomScale = m_element.ZoomFactor(); - scrollMetrics.contentSize.height = static_cast(m_contentPanel.ActualHeight()); - scrollMetrics.contentSize.width = static_cast(m_contentPanel.ActualWidth()); - - const auto scrollViewer = sender.as(); - if (m_eventEmitter) { + ->onScrollEndDrag(scrollMetrics); std::static_pointer_cast(m_eventEmitter) - ->onScrollBeginDrag(scrollMetrics); + ->onMomentumScrollBegin(scrollMetrics); } - }); - - m_scrollViewerDirectManipulationCompletedRevoker = - m_element.DirectManipulationCompleted(winrt::auto_revoke, [this](const auto &sender, const auto &args) { - const auto scrollViewer = sender.as(); + } - facebook::react::ScrollViewMetrics scrollMetrics; - scrollMetrics.containerSize.height = static_cast(m_element.ActualHeight()); - scrollMetrics.containerSize.width = static_cast(m_element.ActualWidth()); - scrollMetrics.contentOffset.x = static_cast(m_element.HorizontalOffset()); - scrollMetrics.contentOffset.y = static_cast(m_element.VerticalOffset()); - scrollMetrics.zoomScale = m_element.ZoomFactor(); - scrollMetrics.contentSize.height = static_cast(m_contentPanel.ActualHeight()); - scrollMetrics.contentSize.width = static_cast(m_contentPanel.ActualWidth()); + if (m_eventEmitter) { + std::static_pointer_cast(m_eventEmitter) + ->onScroll(scrollMetrics); + } + }); + */ + + m_scrollViewerDirectManipulationStartedRevoker = + m_element.DirectManipulationStarted(winrt::auto_revoke, [this](const auto &sender, const auto &) { + m_isScrolling = true; + + facebook::react::ScrollViewMetrics scrollMetrics; + scrollMetrics.containerSize.height = static_cast(m_element.ActualHeight()); + scrollMetrics.containerSize.width = static_cast(m_element.ActualWidth()); + scrollMetrics.contentOffset.x = static_cast(m_element.HorizontalOffset()); + scrollMetrics.contentOffset.y = static_cast(m_element.VerticalOffset()); + scrollMetrics.zoomScale = m_element.ZoomFactor(); + scrollMetrics.contentSize.height = static_cast(m_contentPanel.ActualHeight()); + scrollMetrics.contentSize.width = static_cast(m_contentPanel.ActualWidth()); + + const auto scrollViewer = sender.as(); + if (m_eventEmitter) { + std::static_pointer_cast(m_eventEmitter) + ->onScrollBeginDrag(scrollMetrics); + } + }); - if (m_eventEmitter) { - if (m_isScrollingFromInertia) { - std::static_pointer_cast(m_eventEmitter) - ->onMomentumScrollEnd(scrollMetrics); - } else { - std::static_pointer_cast(m_eventEmitter) - ->onScrollEndDrag(scrollMetrics); - } + /* + m_scrollViewerDirectManipulationCompletedRevoker = + m_element.DirectManipulationCompleted(winrt::auto_revoke, [this](const auto &sender, const auto &args) { + const auto scrollViewer = sender.as(); + + facebook::react::ScrollViewMetrics scrollMetrics; + scrollMetrics.containerSize.height = static_cast(m_element.ActualHeight()); + scrollMetrics.containerSize.width = static_cast(m_element.ActualWidth()); + scrollMetrics.contentOffset.x = static_cast(m_element.HorizontalOffset()); + scrollMetrics.contentOffset.y = static_cast(m_element.VerticalOffset()); + scrollMetrics.zoomScale = m_element.ZoomFactor(); + scrollMetrics.contentSize.height = static_cast(m_contentPanel.ActualHeight()); + scrollMetrics.contentSize.width = static_cast(m_contentPanel.ActualWidth()); + + if (m_eventEmitter) { + if (m_isScrollingFromInertia) { + std::static_pointer_cast(m_eventEmitter) + ->onMomentumScrollEnd(scrollMetrics); + } else { + std::static_pointer_cast(m_eventEmitter) + ->onScrollEndDrag(scrollMetrics); } + } - m_isScrolling = false; - m_isScrollingFromInertia = false; - }); - */ + m_isScrolling = false; + m_isScrollingFromInertia = false; + });*/ } void ScrollViewComponentView::MountChildComponentView( diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h index c82e6ae5f0b..d0cf147cea2 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h @@ -136,6 +136,10 @@ struct ScrollInteractionTrackerOwner : public winrt::implements< winrt::Microsoft::ReactNative::Composition::Experimental::IScrollVisual::ScrollPositionChanged_revoker m_scrollPositionChangedRevoker{}; + winrt::Windows::UI::Xaml::Controls::ScrollViewer::DirectManipulationStarted_revoker m_scrollViewerDirectManipulationStartedRevoker; + winrt::Windows::UI::Xaml::Controls::ScrollViewer m_element; + winrt::Windows::UI::Xaml::Controls::StackPanel m_contentPanel; + float m_zoomFactor{1.0f}; bool m_isScrollingFromInertia = false; bool m_isScrolling = false; From 270bd653e27d0189b392c67cf04e074d17e523a8 Mon Sep 17 00:00:00 2001 From: Anupriya Verma Date: Tue, 25 Mar 2025 14:18:03 +0530 Subject: [PATCH 03/13] Revert "Initial Commit for onScrollBeginDrag" This reverts commit 6049a32b754e8946fabd117cdb0e65455898df4e. --- .../Composition/ScrollViewComponentView.cpp | 152 +++++++++--------- .../Composition/ScrollViewComponentView.h | 4 - 2 files changed, 77 insertions(+), 79 deletions(-) diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp index 064595f5493..12e2ae3d84c 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp @@ -608,92 +608,94 @@ ScrollViewComponentView::ScrollViewComponentView( compContext, tag, reactContext, - ComponentViewFeatures::Default & ~ComponentViewFeatures::Background), - m_element(winrt::Windows::UI::Xaml::Controls::ScrollViewer()), - m_contentPanel(winrt::Windows::UI::Xaml::Controls::StackPanel()) { - - m_element.Content(m_contentPanel); + ComponentViewFeatures::Default & ~ComponentViewFeatures::Background) { + // m_element.Content(m_contentPanel); /* - m_scrollViewerViewChangingRevoker = - m_element.ViewChanging(winrt::auto_revoke, [this](const auto &sender, const auto &args) { - const auto scrollViewerNotNull = sender.as(); - - facebook::react::ScrollViewMetrics scrollMetrics; - scrollMetrics.containerSize.height = static_cast(m_element.ActualHeight()); - scrollMetrics.containerSize.width = static_cast(m_element.ActualWidth()); - scrollMetrics.contentOffset.x = static_cast(args.NextView().HorizontalOffset()); - scrollMetrics.contentOffset.y = static_cast(args.NextView().VerticalOffset()); - scrollMetrics.zoomScale = args.NextView().ZoomFactor(); - scrollMetrics.contentSize.height = static_cast(m_contentPanel.ActualHeight()); - scrollMetrics.contentSize.width = static_cast(m_contentPanel.ActualWidth()); - - // If we are transitioning to inertial scrolling. - if (m_isScrolling && !m_isScrollingFromInertia && args.IsInertial()) { - m_isScrollingFromInertia = true; + m_scrollViewerViewChangingRevoker = + m_element.ViewChanging(winrt::auto_revoke, [this](const auto &sender, const auto &args) { + const auto scrollViewerNotNull = sender.as(); + + facebook::react::ScrollViewMetrics scrollMetrics; + scrollMetrics.containerSize.height = static_cast(m_element.ActualHeight()); + scrollMetrics.containerSize.width = static_cast(m_element.ActualWidth()); + scrollMetrics.contentOffset.x = static_cast(args.NextView().HorizontalOffset()); + scrollMetrics.contentOffset.y = static_cast(args.NextView().VerticalOffset()); + scrollMetrics.zoomScale = args.NextView().ZoomFactor(); + scrollMetrics.contentSize.height = static_cast(m_contentPanel.ActualHeight()); + scrollMetrics.contentSize.width = static_cast(m_contentPanel.ActualWidth()); + + // If we are transitioning to inertial scrolling. + if (m_isScrolling && !m_isScrollingFromInertia && args.IsInertial()) { + m_isScrollingFromInertia = true; + + if (m_eventEmitter) { + std::static_pointer_cast(m_eventEmitter) + ->onScrollEndDrag(scrollMetrics); + std::static_pointer_cast(m_eventEmitter) + ->onMomentumScrollBegin(scrollMetrics); + } + } if (m_eventEmitter) { std::static_pointer_cast(m_eventEmitter) - ->onScrollEndDrag(scrollMetrics); - std::static_pointer_cast(m_eventEmitter) - ->onMomentumScrollBegin(scrollMetrics); + ->onScroll(scrollMetrics); } - } + }); - if (m_eventEmitter) { - std::static_pointer_cast(m_eventEmitter) - ->onScroll(scrollMetrics); - } - }); - */ - - m_scrollViewerDirectManipulationStartedRevoker = - m_element.DirectManipulationStarted(winrt::auto_revoke, [this](const auto &sender, const auto &) { - m_isScrolling = true; - - facebook::react::ScrollViewMetrics scrollMetrics; - scrollMetrics.containerSize.height = static_cast(m_element.ActualHeight()); - scrollMetrics.containerSize.width = static_cast(m_element.ActualWidth()); - scrollMetrics.contentOffset.x = static_cast(m_element.HorizontalOffset()); - scrollMetrics.contentOffset.y = static_cast(m_element.VerticalOffset()); - scrollMetrics.zoomScale = m_element.ZoomFactor(); - scrollMetrics.contentSize.height = static_cast(m_contentPanel.ActualHeight()); - scrollMetrics.contentSize.width = static_cast(m_contentPanel.ActualWidth()); - - const auto scrollViewer = sender.as(); - if (m_eventEmitter) { - std::static_pointer_cast(m_eventEmitter) - ->onScrollBeginDrag(scrollMetrics); - } - }); + m_scrollViewerDirectManipulationStartedRevoker = + m_element.DirectManipulationStarted(winrt::auto_revoke, [this](const auto &sender, const auto &) { + m_isScrolling = true; - /* - m_scrollViewerDirectManipulationCompletedRevoker = - m_element.DirectManipulationCompleted(winrt::auto_revoke, [this](const auto &sender, const auto &args) { - const auto scrollViewer = sender.as(); - - facebook::react::ScrollViewMetrics scrollMetrics; - scrollMetrics.containerSize.height = static_cast(m_element.ActualHeight()); - scrollMetrics.containerSize.width = static_cast(m_element.ActualWidth()); - scrollMetrics.contentOffset.x = static_cast(m_element.HorizontalOffset()); - scrollMetrics.contentOffset.y = static_cast(m_element.VerticalOffset()); - scrollMetrics.zoomScale = m_element.ZoomFactor(); - scrollMetrics.contentSize.height = static_cast(m_contentPanel.ActualHeight()); - scrollMetrics.contentSize.width = static_cast(m_contentPanel.ActualWidth()); - - if (m_eventEmitter) { - if (m_isScrollingFromInertia) { - std::static_pointer_cast(m_eventEmitter) - ->onMomentumScrollEnd(scrollMetrics); - } else { + + //if (m_dismissKeyboardOnDrag && m_SIPEventHandler) { + // m_SIPEventHandler->TryHide(); + //} + + + facebook::react::ScrollViewMetrics scrollMetrics; + scrollMetrics.containerSize.height = static_cast(m_element.ActualHeight()); + scrollMetrics.containerSize.width = static_cast(m_element.ActualWidth()); + scrollMetrics.contentOffset.x = static_cast(m_element.HorizontalOffset()); + scrollMetrics.contentOffset.y = static_cast(m_element.VerticalOffset()); + scrollMetrics.zoomScale = m_element.ZoomFactor(); + scrollMetrics.contentSize.height = static_cast(m_contentPanel.ActualHeight()); + scrollMetrics.contentSize.width = static_cast(m_contentPanel.ActualWidth()); + + const auto scrollViewer = sender.as(); + if (m_eventEmitter) { std::static_pointer_cast(m_eventEmitter) - ->onScrollEndDrag(scrollMetrics); + ->onScrollBeginDrag(scrollMetrics); + } + }); + + m_scrollViewerDirectManipulationCompletedRevoker = + m_element.DirectManipulationCompleted(winrt::auto_revoke, [this](const auto &sender, const auto &args) { + const auto scrollViewer = sender.as(); + + facebook::react::ScrollViewMetrics scrollMetrics; + scrollMetrics.containerSize.height = static_cast(m_element.ActualHeight()); + scrollMetrics.containerSize.width = static_cast(m_element.ActualWidth()); + scrollMetrics.contentOffset.x = static_cast(m_element.HorizontalOffset()); + scrollMetrics.contentOffset.y = static_cast(m_element.VerticalOffset()); + scrollMetrics.zoomScale = m_element.ZoomFactor(); + scrollMetrics.contentSize.height = static_cast(m_contentPanel.ActualHeight()); + scrollMetrics.contentSize.width = static_cast(m_contentPanel.ActualWidth()); + + if (m_eventEmitter) { + if (m_isScrollingFromInertia) { + std::static_pointer_cast(m_eventEmitter) + ->onMomentumScrollEnd(scrollMetrics); + } else { + std::static_pointer_cast(m_eventEmitter) + ->onScrollEndDrag(scrollMetrics); + } } - } - m_isScrolling = false; - m_isScrollingFromInertia = false; - });*/ + m_isScrolling = false; + m_isScrollingFromInertia = false; + }); + */ } void ScrollViewComponentView::MountChildComponentView( diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h index d0cf147cea2..c82e6ae5f0b 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h @@ -136,10 +136,6 @@ struct ScrollInteractionTrackerOwner : public winrt::implements< winrt::Microsoft::ReactNative::Composition::Experimental::IScrollVisual::ScrollPositionChanged_revoker m_scrollPositionChangedRevoker{}; - winrt::Windows::UI::Xaml::Controls::ScrollViewer::DirectManipulationStarted_revoker m_scrollViewerDirectManipulationStartedRevoker; - winrt::Windows::UI::Xaml::Controls::ScrollViewer m_element; - winrt::Windows::UI::Xaml::Controls::StackPanel m_contentPanel; - float m_zoomFactor{1.0f}; bool m_isScrollingFromInertia = false; bool m_isScrolling = false; From bf6df0d29c189929e565674ac866bec68e1e982e Mon Sep 17 00:00:00 2001 From: Anupriya Verma Date: Tue, 25 Mar 2025 14:24:27 +0530 Subject: [PATCH 04/13] Revert "Initial Commit for onScrollBeginDrag" This reverts commit fa35533bec64bbb3ae5e828122d9515778eb1e27. --- .../Composition/ScrollViewComponentView.cpp | 152 +++++++++--------- .../Composition/ScrollViewComponentView.h | 4 - 2 files changed, 77 insertions(+), 79 deletions(-) diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp index 064595f5493..12e2ae3d84c 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp @@ -608,92 +608,94 @@ ScrollViewComponentView::ScrollViewComponentView( compContext, tag, reactContext, - ComponentViewFeatures::Default & ~ComponentViewFeatures::Background), - m_element(winrt::Windows::UI::Xaml::Controls::ScrollViewer()), - m_contentPanel(winrt::Windows::UI::Xaml::Controls::StackPanel()) { - - m_element.Content(m_contentPanel); + ComponentViewFeatures::Default & ~ComponentViewFeatures::Background) { + // m_element.Content(m_contentPanel); /* - m_scrollViewerViewChangingRevoker = - m_element.ViewChanging(winrt::auto_revoke, [this](const auto &sender, const auto &args) { - const auto scrollViewerNotNull = sender.as(); - - facebook::react::ScrollViewMetrics scrollMetrics; - scrollMetrics.containerSize.height = static_cast(m_element.ActualHeight()); - scrollMetrics.containerSize.width = static_cast(m_element.ActualWidth()); - scrollMetrics.contentOffset.x = static_cast(args.NextView().HorizontalOffset()); - scrollMetrics.contentOffset.y = static_cast(args.NextView().VerticalOffset()); - scrollMetrics.zoomScale = args.NextView().ZoomFactor(); - scrollMetrics.contentSize.height = static_cast(m_contentPanel.ActualHeight()); - scrollMetrics.contentSize.width = static_cast(m_contentPanel.ActualWidth()); - - // If we are transitioning to inertial scrolling. - if (m_isScrolling && !m_isScrollingFromInertia && args.IsInertial()) { - m_isScrollingFromInertia = true; + m_scrollViewerViewChangingRevoker = + m_element.ViewChanging(winrt::auto_revoke, [this](const auto &sender, const auto &args) { + const auto scrollViewerNotNull = sender.as(); + + facebook::react::ScrollViewMetrics scrollMetrics; + scrollMetrics.containerSize.height = static_cast(m_element.ActualHeight()); + scrollMetrics.containerSize.width = static_cast(m_element.ActualWidth()); + scrollMetrics.contentOffset.x = static_cast(args.NextView().HorizontalOffset()); + scrollMetrics.contentOffset.y = static_cast(args.NextView().VerticalOffset()); + scrollMetrics.zoomScale = args.NextView().ZoomFactor(); + scrollMetrics.contentSize.height = static_cast(m_contentPanel.ActualHeight()); + scrollMetrics.contentSize.width = static_cast(m_contentPanel.ActualWidth()); + + // If we are transitioning to inertial scrolling. + if (m_isScrolling && !m_isScrollingFromInertia && args.IsInertial()) { + m_isScrollingFromInertia = true; + + if (m_eventEmitter) { + std::static_pointer_cast(m_eventEmitter) + ->onScrollEndDrag(scrollMetrics); + std::static_pointer_cast(m_eventEmitter) + ->onMomentumScrollBegin(scrollMetrics); + } + } if (m_eventEmitter) { std::static_pointer_cast(m_eventEmitter) - ->onScrollEndDrag(scrollMetrics); - std::static_pointer_cast(m_eventEmitter) - ->onMomentumScrollBegin(scrollMetrics); + ->onScroll(scrollMetrics); } - } + }); - if (m_eventEmitter) { - std::static_pointer_cast(m_eventEmitter) - ->onScroll(scrollMetrics); - } - }); - */ - - m_scrollViewerDirectManipulationStartedRevoker = - m_element.DirectManipulationStarted(winrt::auto_revoke, [this](const auto &sender, const auto &) { - m_isScrolling = true; - - facebook::react::ScrollViewMetrics scrollMetrics; - scrollMetrics.containerSize.height = static_cast(m_element.ActualHeight()); - scrollMetrics.containerSize.width = static_cast(m_element.ActualWidth()); - scrollMetrics.contentOffset.x = static_cast(m_element.HorizontalOffset()); - scrollMetrics.contentOffset.y = static_cast(m_element.VerticalOffset()); - scrollMetrics.zoomScale = m_element.ZoomFactor(); - scrollMetrics.contentSize.height = static_cast(m_contentPanel.ActualHeight()); - scrollMetrics.contentSize.width = static_cast(m_contentPanel.ActualWidth()); - - const auto scrollViewer = sender.as(); - if (m_eventEmitter) { - std::static_pointer_cast(m_eventEmitter) - ->onScrollBeginDrag(scrollMetrics); - } - }); + m_scrollViewerDirectManipulationStartedRevoker = + m_element.DirectManipulationStarted(winrt::auto_revoke, [this](const auto &sender, const auto &) { + m_isScrolling = true; - /* - m_scrollViewerDirectManipulationCompletedRevoker = - m_element.DirectManipulationCompleted(winrt::auto_revoke, [this](const auto &sender, const auto &args) { - const auto scrollViewer = sender.as(); - - facebook::react::ScrollViewMetrics scrollMetrics; - scrollMetrics.containerSize.height = static_cast(m_element.ActualHeight()); - scrollMetrics.containerSize.width = static_cast(m_element.ActualWidth()); - scrollMetrics.contentOffset.x = static_cast(m_element.HorizontalOffset()); - scrollMetrics.contentOffset.y = static_cast(m_element.VerticalOffset()); - scrollMetrics.zoomScale = m_element.ZoomFactor(); - scrollMetrics.contentSize.height = static_cast(m_contentPanel.ActualHeight()); - scrollMetrics.contentSize.width = static_cast(m_contentPanel.ActualWidth()); - - if (m_eventEmitter) { - if (m_isScrollingFromInertia) { - std::static_pointer_cast(m_eventEmitter) - ->onMomentumScrollEnd(scrollMetrics); - } else { + + //if (m_dismissKeyboardOnDrag && m_SIPEventHandler) { + // m_SIPEventHandler->TryHide(); + //} + + + facebook::react::ScrollViewMetrics scrollMetrics; + scrollMetrics.containerSize.height = static_cast(m_element.ActualHeight()); + scrollMetrics.containerSize.width = static_cast(m_element.ActualWidth()); + scrollMetrics.contentOffset.x = static_cast(m_element.HorizontalOffset()); + scrollMetrics.contentOffset.y = static_cast(m_element.VerticalOffset()); + scrollMetrics.zoomScale = m_element.ZoomFactor(); + scrollMetrics.contentSize.height = static_cast(m_contentPanel.ActualHeight()); + scrollMetrics.contentSize.width = static_cast(m_contentPanel.ActualWidth()); + + const auto scrollViewer = sender.as(); + if (m_eventEmitter) { std::static_pointer_cast(m_eventEmitter) - ->onScrollEndDrag(scrollMetrics); + ->onScrollBeginDrag(scrollMetrics); + } + }); + + m_scrollViewerDirectManipulationCompletedRevoker = + m_element.DirectManipulationCompleted(winrt::auto_revoke, [this](const auto &sender, const auto &args) { + const auto scrollViewer = sender.as(); + + facebook::react::ScrollViewMetrics scrollMetrics; + scrollMetrics.containerSize.height = static_cast(m_element.ActualHeight()); + scrollMetrics.containerSize.width = static_cast(m_element.ActualWidth()); + scrollMetrics.contentOffset.x = static_cast(m_element.HorizontalOffset()); + scrollMetrics.contentOffset.y = static_cast(m_element.VerticalOffset()); + scrollMetrics.zoomScale = m_element.ZoomFactor(); + scrollMetrics.contentSize.height = static_cast(m_contentPanel.ActualHeight()); + scrollMetrics.contentSize.width = static_cast(m_contentPanel.ActualWidth()); + + if (m_eventEmitter) { + if (m_isScrollingFromInertia) { + std::static_pointer_cast(m_eventEmitter) + ->onMomentumScrollEnd(scrollMetrics); + } else { + std::static_pointer_cast(m_eventEmitter) + ->onScrollEndDrag(scrollMetrics); + } } - } - m_isScrolling = false; - m_isScrollingFromInertia = false; - });*/ + m_isScrolling = false; + m_isScrollingFromInertia = false; + }); + */ } void ScrollViewComponentView::MountChildComponentView( diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h index d0cf147cea2..c82e6ae5f0b 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h @@ -136,10 +136,6 @@ struct ScrollInteractionTrackerOwner : public winrt::implements< winrt::Microsoft::ReactNative::Composition::Experimental::IScrollVisual::ScrollPositionChanged_revoker m_scrollPositionChangedRevoker{}; - winrt::Windows::UI::Xaml::Controls::ScrollViewer::DirectManipulationStarted_revoker m_scrollViewerDirectManipulationStartedRevoker; - winrt::Windows::UI::Xaml::Controls::ScrollViewer m_element; - winrt::Windows::UI::Xaml::Controls::StackPanel m_contentPanel; - float m_zoomFactor{1.0f}; bool m_isScrollingFromInertia = false; bool m_isScrolling = false; From f5fb61540fa27cbe7a1a6ad4010e4a2b59fb01b7 Mon Sep 17 00:00:00 2001 From: Anupriya Verma Date: Tue, 25 Mar 2025 14:53:29 +0530 Subject: [PATCH 05/13] Draft: Only for reference to share the approach --- .../Composition/ScrollViewComponentView.cpp | 22 +++++++++++++++++++ .../Composition/ScrollViewComponentView.h | 2 ++ 2 files changed, 24 insertions(+) diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp index 12e2ae3d84c..357962be1a4 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp @@ -1217,6 +1217,28 @@ winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ScrollViewComp ->onScroll(scrollMetrics); } }); + + //m_scrollBeginDragRevoker = m_scrollVisual.ScrollBeginDrag( + // winrt::auto_revoke, + // [this]( + // winrt::IInspectable const & /*sender*/, + // winrt::Microsoft::ReactNative::Composition::Experimental::IScrollBeginDragArgs const &args) { + // updateStateWithContentOffset(); + // auto eventEmitter = GetEventEmitter(); + // if (eventEmitter) { + // facebook::react::ScrollViewEventEmitter::Metrics scrollMetrics; + // scrollMetrics.containerSize.height = m_layoutMetrics.frame.size.height; + // scrollMetrics.containerSize.width = m_layoutMetrics.frame.size.width; + // scrollMetrics.contentOffset.x = args.Position().x / m_layoutMetrics.pointScaleFactor; + // scrollMetrics.contentOffset.y = args.Position().y / m_layoutMetrics.pointScaleFactor; + // scrollMetrics.zoomScale = 1.0; + // scrollMetrics.contentSize.height = std::max(m_contentSize.height, m_layoutMetrics.frame.size.height); + // scrollMetrics.contentSize.width = std::max(m_contentSize.width, m_layoutMetrics.frame.size.width); + // std::static_pointer_cast(eventEmitter) + // ->onScrollBeginDrag(scrollMetrics); + // } + // }); + return visual; } diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h index c82e6ae5f0b..88d73f3d18c 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h @@ -135,6 +135,8 @@ struct ScrollInteractionTrackerOwner : public winrt::implements< std::shared_ptr m_verticalScrollbarComponent{nullptr}; winrt::Microsoft::ReactNative::Composition::Experimental::IScrollVisual::ScrollPositionChanged_revoker m_scrollPositionChangedRevoker{}; + //winrt::Microsoft::ReactNative::Composition::Experimental::IScrollVisual::ScrollBeginDrag_revoker + // m_scrollBeginDragRevoker{}; float m_zoomFactor{1.0f}; bool m_isScrollingFromInertia = false; From ee2009e1eac621cdad251787d25cee1ff1f52386 Mon Sep 17 00:00:00 2001 From: Anupriya Verma Date: Fri, 28 Mar 2025 06:36:20 +0530 Subject: [PATCH 06/13] Test Code --- .../CompositionSwitcher.idl | 1 + .../Composition/CompositionContextHelper.cpp | 23 ++++++++++- .../Composition/ScrollViewComponentView.cpp | 40 +++++++++---------- .../Composition/ScrollViewComponentView.h | 4 +- 4 files changed, 45 insertions(+), 23 deletions(-) diff --git a/vnext/Microsoft.ReactNative/CompositionSwitcher.idl b/vnext/Microsoft.ReactNative/CompositionSwitcher.idl index a4c98ebfdbe..3494b2ed12d 100644 --- a/vnext/Microsoft.ReactNative/CompositionSwitcher.idl +++ b/vnext/Microsoft.ReactNative/CompositionSwitcher.idl @@ -109,6 +109,7 @@ namespace Microsoft.ReactNative.Composition.Experimental void Brush(IBrush brush); void ScrollEnabled(Boolean isScrollEnabled); event Windows.Foundation.EventHandler ScrollPositionChanged; + event Windows.Foundation.EventHandler ScrollBeginDrag; void ContentSize(Windows.Foundation.Numerics.Vector2 size); Windows.Foundation.Numerics.Vector3 ScrollPosition { get; }; void ScrollBy(Windows.Foundation.Numerics.Vector3 offset, Boolean animate); diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp index 7553f2cf2b2..59486e7e5bf 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp @@ -711,7 +711,10 @@ struct CompScrollerVisual : winrt::implements< } void InteractingStateEntered( typename TTypeRedirects::InteractionTracker sender, - typename TTypeRedirects::InteractionTrackerInteractingStateEnteredArgs args) noexcept {} + typename TTypeRedirects::InteractionTrackerInteractingStateEnteredArgs args) noexcept { + m_outer->m_currentPosition = args.Position(); + m_outer->FireScrollBeginDrag({args.Position().x, args.Position().y}); + } void RequestIgnored( typename TTypeRedirects::InteractionTracker sender, typename TTypeRedirects::InteractionTrackerRequestIgnoredArgs args) noexcept {} @@ -918,10 +921,21 @@ struct CompScrollerVisual : winrt::implements< return m_scrollPositionChangedEvent.add(handler); } + winrt::event_token ScrollBeginDrag( + winrt::Windows::Foundation::EventHandler< + winrt::Microsoft::ReactNative::Composition::Experimental::IScrollPositionChangedArgs> const + &handler) noexcept { + return m_scrollBeginDragEvent.add(handler); + } + void ScrollPositionChanged(winrt::event_token const &token) noexcept { m_scrollPositionChangedEvent.remove(token); } + void ScrollBeginDrag(winrt::event_token const &token) noexcept { + m_scrollBeginDragEvent.remove(token); + } + void ContentSize(winrt::Windows::Foundation::Numerics::float2 const &size) noexcept { m_contentSize = size; m_contentVisual.Size(size); @@ -992,6 +1006,10 @@ struct CompScrollerVisual : winrt::implements< m_scrollPositionChangedEvent(*this, winrt::make(position)); } + void FireScrollBeginDrag(winrt::Windows::Foundation::Numerics::float2 position) noexcept { + m_scrollBeginDragEvent(*this, winrt::make(position)); + } + void UpdateMaxPosition() noexcept { m_interactionTracker.MaxPosition( {std::max(m_contentSize.x - m_visualSize.x, 0), @@ -1010,6 +1028,9 @@ struct CompScrollerVisual : winrt::implements< winrt::event> m_scrollPositionChangedEvent; + winrt::event> + m_scrollBeginDragEvent; typename TTypeRedirects::SpriteVisual m_visual{nullptr}; typename TTypeRedirects::SpriteVisual m_contentVisual{nullptr}; typename TTypeRedirects::InteractionTracker m_interactionTracker{nullptr}; diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp index 357962be1a4..3a26a2068f1 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp @@ -1218,26 +1218,26 @@ winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ScrollViewComp } }); - //m_scrollBeginDragRevoker = m_scrollVisual.ScrollBeginDrag( - // winrt::auto_revoke, - // [this]( - // winrt::IInspectable const & /*sender*/, - // winrt::Microsoft::ReactNative::Composition::Experimental::IScrollBeginDragArgs const &args) { - // updateStateWithContentOffset(); - // auto eventEmitter = GetEventEmitter(); - // if (eventEmitter) { - // facebook::react::ScrollViewEventEmitter::Metrics scrollMetrics; - // scrollMetrics.containerSize.height = m_layoutMetrics.frame.size.height; - // scrollMetrics.containerSize.width = m_layoutMetrics.frame.size.width; - // scrollMetrics.contentOffset.x = args.Position().x / m_layoutMetrics.pointScaleFactor; - // scrollMetrics.contentOffset.y = args.Position().y / m_layoutMetrics.pointScaleFactor; - // scrollMetrics.zoomScale = 1.0; - // scrollMetrics.contentSize.height = std::max(m_contentSize.height, m_layoutMetrics.frame.size.height); - // scrollMetrics.contentSize.width = std::max(m_contentSize.width, m_layoutMetrics.frame.size.width); - // std::static_pointer_cast(eventEmitter) - // ->onScrollBeginDrag(scrollMetrics); - // } - // }); + m_scrollBeginDragRevoker = m_scrollVisual.ScrollBeginDrag( + winrt::auto_revoke, + [this]( + winrt::IInspectable const & /*sender*/, + winrt::Microsoft::ReactNative::Composition::Experimental::IScrollBeginDragArgs const &args) { + updateStateWithContentOffset(); + auto eventEmitter = GetEventEmitter(); + if (eventEmitter) { + facebook::react::ScrollViewEventEmitter::Metrics scrollMetrics; + scrollMetrics.containerSize.height = m_layoutMetrics.frame.size.height; + scrollMetrics.containerSize.width = m_layoutMetrics.frame.size.width; + scrollMetrics.contentOffset.x = args.Position().x / m_layoutMetrics.pointScaleFactor; + scrollMetrics.contentOffset.y = args.Position().y / m_layoutMetrics.pointScaleFactor; + scrollMetrics.zoomScale = 1.0; + scrollMetrics.contentSize.height = std::max(m_contentSize.height, m_layoutMetrics.frame.size.height); + scrollMetrics.contentSize.width = std::max(m_contentSize.width, m_layoutMetrics.frame.size.width); + std::static_pointer_cast(eventEmitter) + ->onScrollBeginDrag(scrollMetrics); + } + }); return visual; } diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h index 88d73f3d18c..1fe3289866c 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h @@ -135,8 +135,8 @@ struct ScrollInteractionTrackerOwner : public winrt::implements< std::shared_ptr m_verticalScrollbarComponent{nullptr}; winrt::Microsoft::ReactNative::Composition::Experimental::IScrollVisual::ScrollPositionChanged_revoker m_scrollPositionChangedRevoker{}; - //winrt::Microsoft::ReactNative::Composition::Experimental::IScrollVisual::ScrollBeginDrag_revoker - // m_scrollBeginDragRevoker{}; + winrt::Microsoft::ReactNative::Composition::Experimental::IScrollVisual::ScrollBeginDrag_revoker + m_scrollBeginDragRevoker{}; float m_zoomFactor{1.0f}; bool m_isScrollingFromInertia = false; From 961993080e2f1e50d60346a8a0ac64fd4d0597a5 Mon Sep 17 00:00:00 2001 From: Anupriya Verma Date: Fri, 28 Mar 2025 08:37:27 +0530 Subject: [PATCH 07/13] Fix Compile issues --- .../Fabric/Composition/CompositionContextHelper.cpp | 7 +++---- .../Fabric/Composition/ScrollViewComponentView.cpp | 2 +- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp index 59486e7e5bf..3ea979ad1e4 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp @@ -708,13 +708,12 @@ struct CompScrollerVisual : winrt::implements< typename TTypeRedirects::InteractionTrackerInertiaStateEnteredArgs args) noexcept { m_outer->m_custom = false; m_outer->m_inertia = true; + m_outer->m_currentPosition = args.NaturalRestingPosition(); + m_outer->FireScrollBeginDrag({args.NaturalRestingPosition().x, args.NaturalRestingPosition().y}); } void InteractingStateEntered( typename TTypeRedirects::InteractionTracker sender, - typename TTypeRedirects::InteractionTrackerInteractingStateEnteredArgs args) noexcept { - m_outer->m_currentPosition = args.Position(); - m_outer->FireScrollBeginDrag({args.Position().x, args.Position().y}); - } + typename TTypeRedirects::InteractionTrackerInteractingStateEnteredArgs args) noexcept {} void RequestIgnored( typename TTypeRedirects::InteractionTracker sender, typename TTypeRedirects::InteractionTrackerRequestIgnoredArgs args) noexcept {} diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp index 3a26a2068f1..e8b65498505 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp @@ -1222,7 +1222,7 @@ winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ScrollViewComp winrt::auto_revoke, [this]( winrt::IInspectable const & /*sender*/, - winrt::Microsoft::ReactNative::Composition::Experimental::IScrollBeginDragArgs const &args) { + winrt::Microsoft::ReactNative::Composition::Experimental::IScrollPositionChangedArgs const &args) { updateStateWithContentOffset(); auto eventEmitter = GetEventEmitter(); if (eventEmitter) { From bce19061d6ae8c417de1a5d72d00d1b0b9f3edfa Mon Sep 17 00:00:00 2001 From: Anupriya Verma Date: Fri, 28 Mar 2025 12:13:07 +0530 Subject: [PATCH 08/13] yarn format --- .../Composition/CompositionContextHelper.cpp | 2 +- .../Composition/ScrollViewComponentView.cpp | 38 +++++++++---------- 2 files changed, 20 insertions(+), 20 deletions(-) diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp index 3ea979ad1e4..58adda1037e 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp @@ -920,7 +920,7 @@ struct CompScrollerVisual : winrt::implements< return m_scrollPositionChangedEvent.add(handler); } - winrt::event_token ScrollBeginDrag( + winrt::event_token ScrollBeginDrag( winrt::Windows::Foundation::EventHandler< winrt::Microsoft::ReactNative::Composition::Experimental::IScrollPositionChangedArgs> const &handler) noexcept { diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp index e8b65498505..9451e2cf054 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp @@ -1219,25 +1219,25 @@ winrt::Microsoft::ReactNative::Composition::Experimental::IVisual ScrollViewComp }); m_scrollBeginDragRevoker = m_scrollVisual.ScrollBeginDrag( - winrt::auto_revoke, - [this]( - winrt::IInspectable const & /*sender*/, - winrt::Microsoft::ReactNative::Composition::Experimental::IScrollPositionChangedArgs const &args) { - updateStateWithContentOffset(); - auto eventEmitter = GetEventEmitter(); - if (eventEmitter) { - facebook::react::ScrollViewEventEmitter::Metrics scrollMetrics; - scrollMetrics.containerSize.height = m_layoutMetrics.frame.size.height; - scrollMetrics.containerSize.width = m_layoutMetrics.frame.size.width; - scrollMetrics.contentOffset.x = args.Position().x / m_layoutMetrics.pointScaleFactor; - scrollMetrics.contentOffset.y = args.Position().y / m_layoutMetrics.pointScaleFactor; - scrollMetrics.zoomScale = 1.0; - scrollMetrics.contentSize.height = std::max(m_contentSize.height, m_layoutMetrics.frame.size.height); - scrollMetrics.contentSize.width = std::max(m_contentSize.width, m_layoutMetrics.frame.size.width); - std::static_pointer_cast(eventEmitter) - ->onScrollBeginDrag(scrollMetrics); - } - }); + winrt::auto_revoke, + [this]( + winrt::IInspectable const & /*sender*/, + winrt::Microsoft::ReactNative::Composition::Experimental::IScrollPositionChangedArgs const &args) { + updateStateWithContentOffset(); + auto eventEmitter = GetEventEmitter(); + if (eventEmitter) { + facebook::react::ScrollViewEventEmitter::Metrics scrollMetrics; + scrollMetrics.containerSize.height = m_layoutMetrics.frame.size.height; + scrollMetrics.containerSize.width = m_layoutMetrics.frame.size.width; + scrollMetrics.contentOffset.x = args.Position().x / m_layoutMetrics.pointScaleFactor; + scrollMetrics.contentOffset.y = args.Position().y / m_layoutMetrics.pointScaleFactor; + scrollMetrics.zoomScale = 1.0; + scrollMetrics.contentSize.height = std::max(m_contentSize.height, m_layoutMetrics.frame.size.height); + scrollMetrics.contentSize.width = std::max(m_contentSize.width, m_layoutMetrics.frame.size.width); + std::static_pointer_cast(eventEmitter) + ->onScrollBeginDrag(scrollMetrics); + } + }); return visual; } From 02d4f29647c11d5a143230b0acd8034d6729486c Mon Sep 17 00:00:00 2001 From: Anupriya Verma Date: Fri, 28 Mar 2025 12:13:30 +0530 Subject: [PATCH 09/13] Change files --- ...ative-windows-b165413e-a3de-4ba5-8511-cc1f22727002.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/react-native-windows-b165413e-a3de-4ba5-8511-cc1f22727002.json diff --git a/change/react-native-windows-b165413e-a3de-4ba5-8511-cc1f22727002.json b/change/react-native-windows-b165413e-a3de-4ba5-8511-cc1f22727002.json new file mode 100644 index 00000000000..881d9475767 --- /dev/null +++ b/change/react-native-windows-b165413e-a3de-4ba5-8511-cc1f22727002.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "yarn format", + "packageName": "react-native-windows", + "email": "anupriyaverma13@gmail.com", + "dependentChangeType": "patch" +} From 70716ab665f16bfb0b097fdddc27b240d53e31be Mon Sep 17 00:00:00 2001 From: Anupriya Verma Date: Fri, 28 Mar 2025 12:19:09 +0530 Subject: [PATCH 10/13] Change File --- ...act-native-windows-b165413e-a3de-4ba5-8511-cc1f22727002.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/change/react-native-windows-b165413e-a3de-4ba5-8511-cc1f22727002.json b/change/react-native-windows-b165413e-a3de-4ba5-8511-cc1f22727002.json index 881d9475767..bce078fbe1d 100644 --- a/change/react-native-windows-b165413e-a3de-4ba5-8511-cc1f22727002.json +++ b/change/react-native-windows-b165413e-a3de-4ba5-8511-cc1f22727002.json @@ -1,6 +1,6 @@ { "type": "prerelease", - "comment": "yarn format", + "comment": "Implement OnScrollBeginDrag Event", "packageName": "react-native-windows", "email": "anupriyaverma13@gmail.com", "dependentChangeType": "patch" From dd1d63acb762b4263d0020fd5a4db9210488fa76 Mon Sep 17 00:00:00 2001 From: Anupriya Verma Date: Fri, 28 Mar 2025 12:43:43 +0530 Subject: [PATCH 11/13] Update scrollViewSnapSample.tsx --- packages/playground/Samples/scrollViewSnapSample.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/playground/Samples/scrollViewSnapSample.tsx b/packages/playground/Samples/scrollViewSnapSample.tsx index e12c779f224..d18f7961e95 100644 --- a/packages/playground/Samples/scrollViewSnapSample.tsx +++ b/packages/playground/Samples/scrollViewSnapSample.tsx @@ -245,7 +245,10 @@ export default class Bootstrap extends React.Component<{}, any> { snapToStart={this.state.snapToStartValue} snapToEnd={this.state.snapToEndValue} snapToAlignment={this.state.alignToStartValue ? 'start' : 'end'} - horizontal={this.state.horizontalValue}> + horizontal={this.state.horizontalValue} + onScrollBeginDrag={() => { console.log('onScrollBeginDrag') }} + onScroll={() => { console.log('onScroll') }} + > {this.makeItems(20, [styles.itemWrapper])} From f332b4e7a41126d24753e2aa13c43fa281f93ecc Mon Sep 17 00:00:00 2001 From: Anupriya Verma Date: Sun, 30 Mar 2025 14:03:51 +0530 Subject: [PATCH 12/13] lint fix --- packages/playground/Samples/scrollViewSnapSample.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/playground/Samples/scrollViewSnapSample.tsx b/packages/playground/Samples/scrollViewSnapSample.tsx index d18f7961e95..70d8d760663 100644 --- a/packages/playground/Samples/scrollViewSnapSample.tsx +++ b/packages/playground/Samples/scrollViewSnapSample.tsx @@ -246,9 +246,12 @@ export default class Bootstrap extends React.Component<{}, any> { snapToEnd={this.state.snapToEndValue} snapToAlignment={this.state.alignToStartValue ? 'start' : 'end'} horizontal={this.state.horizontalValue} - onScrollBeginDrag={() => { console.log('onScrollBeginDrag') }} - onScroll={() => { console.log('onScroll') }} - > + onScrollBeginDrag={() => { + console.log('onScrollBeginDrag'); + }} + onScroll={() => { + console.log('onScroll'); + }}> {this.makeItems(20, [styles.itemWrapper])} From c6acef952c7235180d997798ff6fb79cd6b4cecc Mon Sep 17 00:00:00 2001 From: Anupriya Verma Date: Mon, 31 Mar 2025 16:33:08 +0530 Subject: [PATCH 13/13] Update react-native-windows-b165413e-a3de-4ba5-8511-cc1f22727002.json --- ...act-native-windows-b165413e-a3de-4ba5-8511-cc1f22727002.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/change/react-native-windows-b165413e-a3de-4ba5-8511-cc1f22727002.json b/change/react-native-windows-b165413e-a3de-4ba5-8511-cc1f22727002.json index bce078fbe1d..c2dce8319f5 100644 --- a/change/react-native-windows-b165413e-a3de-4ba5-8511-cc1f22727002.json +++ b/change/react-native-windows-b165413e-a3de-4ba5-8511-cc1f22727002.json @@ -2,6 +2,6 @@ "type": "prerelease", "comment": "Implement OnScrollBeginDrag Event", "packageName": "react-native-windows", - "email": "anupriyaverma13@gmail.com", + "email": "54227869+anupriya13@users.noreply.github.com", "dependentChangeType": "patch" }