[Fabric] Enable ScrollView touch scrolling (#13664)

acoates-ms · web-flow · commit bc4949e569c1 · 2024-09-10T14:10:00.000-07:00
* [Fabric] Enable ScrolView touch scrolling

* Change files

* format

* typo
diff --git a/change/react-native-windows-61e991a4-b01f-44ee-a7a3-43a6d7f79eb1.json b/change/react-native-windows-61e991a4-b01f-44ee-a7a3-43a6d7f79eb1.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "[Fabric] Enable ScrollView touch scrolling",
+  "packageName": "react-native-windows",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/vnext/Microsoft.ReactNative/Composition.Input.idl b/vnext/Microsoft.ReactNative/Composition.Input.idl
@@ -106,6 +106,7 @@ namespace Microsoft.ReactNative.Composition.Input
     UInt64 Timestamp { get; };
     PointerPoint GetOffsetPoint(
         Windows.Foundation.Point offset);
+    Microsoft.UI.Input.PointerPoint Inner { get; };
   };
 
   runtimeclass PointerRoutedEventArgs : RoutedEventArgs
diff --git a/vnext/Microsoft.ReactNative/CompositionSwitcher.idl b/vnext/Microsoft.ReactNative/CompositionSwitcher.idl
@@ -3,6 +3,7 @@
 
 #include "NamespaceRedirect.h"
 #include "DocString.h"
+import "Composition.Input.idl";
 
 namespace Microsoft.ReactNative.Composition.Experimental
 {
@@ -112,6 +113,8 @@ namespace Microsoft.ReactNative.Composition.Experimental
     Windows.Foundation.Numerics.Vector3 ScrollPosition { get; };
     void ScrollBy(Windows.Foundation.Numerics.Vector3 offset, Boolean animate);
     void TryUpdatePosition(Windows.Foundation.Numerics.Vector3 position, Boolean animate);
+    void OnPointerPressed(Microsoft.ReactNative.Composition.Input.PointerRoutedEventArgs args);
+    Boolean Horizontal;
   }
 
   [webhosthidden]
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/Composition.Input.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/Composition.Input.cpp
@@ -637,6 +637,10 @@ bool PointerPoint::IsPointerMessage(uint32_t message) const noexcept {
   return (message >= WM_POINTERFIRST && message <= WM_POINTERLAST);
 }
 
+winrt::Microsoft::UI::Input::PointerPoint PointerPoint::Inner() const noexcept {
+  return m_sysPointerPoint;
+}
+
 PointerRoutedEventArgs::PointerRoutedEventArgs(
     const winrt::Microsoft::ReactNative::ReactContext &context,
     facebook::react::Tag tag,
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/Composition.Input.h b/vnext/Microsoft.ReactNative/Fabric/Composition/Composition.Input.h
@@ -198,6 +198,7 @@ struct PointerPoint : PointerPointT<PointerPoint> {
   uint64_t Timestamp() const noexcept;
   winrt::Microsoft::ReactNative::Composition::Input::PointerPoint GetOffsetPoint(
       const winrt::Windows::Foundation::Point &offset) const noexcept;
+  winrt::Microsoft::UI::Input::PointerPoint Inner() const noexcept;
 
  private:
   bool IsPointerMessage(uint32_t message) const noexcept;
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp
@@ -12,6 +12,7 @@
 
 #include <Windows.Graphics.Interop.h>
 #include <windows.ui.composition.interop.h>
+#include <winrt/Microsoft.ReactNative.Composition.Input.h>
 #include <winrt/Windows.Graphics.DirectX.Direct3D11.h>
 #include <winrt/Windows.UI.Composition.h>
 #include <winrt/Windows.UI.Composition.interactions.h>
@@ -744,14 +745,9 @@ struct CompScrollerVisual : winrt::implements<
     m_interactionTracker.MaxScale(1.0);
 
     m_visualInteractionSource = TTypeRedirects::VisualInteractionSource::Create(m_visual);
-
-    m_visualInteractionSource.PositionXSourceMode(TTypeRedirects::InteractionSourceMode::EnabledWithInertia);
-    m_visualInteractionSource.PositionYSourceMode(TTypeRedirects::InteractionSourceMode::EnabledWithInertia);
     m_visualInteractionSource.ScaleSourceMode(TTypeRedirects::InteractionSourceMode::Disabled);
-
-    m_visualInteractionSource.ManipulationRedirectionMode(
-        TTypeRedirects::VisualInteractionSourceRedirectionMode::CapableTouchpadAndPointerWheel);
     m_interactionTracker.InteractionSources().Add(m_visualInteractionSource);
+    UpdateInteractionModes();
 
     auto positionExpression = compositor.CreateExpressionAnimation(L"-tracker.Position");
     positionExpression.SetReferenceParameter(L"tracker", m_interactionTracker);
@@ -762,6 +758,44 @@ struct CompScrollerVisual : winrt::implements<
     return m_visual;
   }
 
+  void OnPointerPressed(
+      const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
+    if constexpr (std::is_same_v<TTypeRedirects, MicrosoftTypeRedirects>) {
+      auto pointerDeviceType = args.Pointer().PointerDeviceType();
+      if (pointerDeviceType == winrt::Microsoft::ReactNative::Composition::Input::PointerDeviceType::Touch) {
+        m_visualInteractionSource.TryRedirectForManipulation(args.GetCurrentPoint(args.OriginalSource()).Inner());
+      }
+    }
+  }
+
+  bool Horizontal() const noexcept {
+    return m_horizontal;
+  }
+
+  void Horizontal(bool value) noexcept {
+    m_horizontal = value;
+
+    UpdateInteractionModes();
+  }
+
+  void UpdateInteractionModes() noexcept {
+    if (m_isScrollEnabled) {
+      m_visualInteractionSource.PositionXSourceMode(
+          m_horizontal ? TTypeRedirects::InteractionSourceMode::EnabledWithInertia
+                       : TTypeRedirects::InteractionSourceMode::Disabled);
+      m_visualInteractionSource.PositionYSourceMode(
+          m_horizontal ? TTypeRedirects::InteractionSourceMode::Disabled
+                       : TTypeRedirects::InteractionSourceMode::EnabledWithInertia);
+      m_visualInteractionSource.ManipulationRedirectionMode(
+          TTypeRedirects::VisualInteractionSourceRedirectionMode::CapableTouchpadAndPointerWheel);
+    } else {
+      m_visualInteractionSource.PositionXSourceMode(TTypeRedirects::InteractionSourceMode::Disabled);
+      m_visualInteractionSource.PositionYSourceMode(TTypeRedirects::InteractionSourceMode::Disabled);
+      m_visualInteractionSource.ManipulationRedirectionMode(
+          TTypeRedirects::VisualInteractionSourceRedirectionMode::Off);
+    }
+  }
+
   void InsertAt(
       const winrt::Microsoft::ReactNative::Composition::Experimental::IVisual &visual,
       uint32_t index) noexcept {
@@ -796,13 +830,8 @@ struct CompScrollerVisual : winrt::implements<
   }
 
   void ScrollEnabled(bool isScrollEnabled) noexcept {
-    if (isScrollEnabled) {
-      m_visualInteractionSource.ManipulationRedirectionMode(
-          TTypeRedirects::VisualInteractionSourceRedirectionMode::CapableTouchpadAndPointerWheel);
-    } else {
-      m_visualInteractionSource.ManipulationRedirectionMode(
-          TTypeRedirects::VisualInteractionSourceRedirectionMode::Off);
-    }
+    m_isScrollEnabled = isScrollEnabled;
+    UpdateInteractionModes();
   }
 
   void Opacity(float opacity) noexcept {
@@ -970,6 +999,8 @@ struct CompScrollerVisual : winrt::implements<
          0});
   }
 
+  bool m_isScrollEnabled{true};
+  bool m_horizontal{false};
   bool m_inertia{false};
   bool m_custom{false};
   winrt::Windows::Foundation::Numerics::float3 m_targetPosition;
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp
@@ -749,6 +749,10 @@ void ScrollViewComponentView::updateProps(
     m_horizontalScrollbarComponent->UpdateColorForScrollBarRegions();
     m_verticalScrollbarComponent->UpdateColorForScrollBarRegions();
   }
+
+  if (!oldProps || oldViewProps.horizontal != newViewProps.horizontal) {
+    m_scrollVisual.Horizontal(newViewProps.horizontal);
+  }
 }
 
 void ScrollViewComponentView::updateState(
@@ -886,6 +890,12 @@ void ScrollViewComponentView::OnPointerPressed(
   m_verticalScrollbarComponent->OnPointerPressed(args);
   m_horizontalScrollbarComponent->OnPointerPressed(args);
   Super::OnPointerPressed(args);
+
+  if (!args.Handled()) {
+    auto f = args.Pointer();
+    auto g = f.PointerDeviceType();
+    m_scrollVisual.OnPointerPressed(args);
+  }
 }
 
 void ScrollViewComponentView::OnPointerReleased(

Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,7 @@`
`3`	`3`
`4`	`4`	`#include "NamespaceRedirect.h"`
`5`	`5`	`#include "DocString.h"`
	`6`	`+import "Composition.Input.idl";`
`6`	`7`
`7`	`8`	`namespace Microsoft.ReactNative.Composition.Experimental`
`8`	`9`	`{`
`@@ -112,6 +113,8 @@ namespace Microsoft.ReactNative.Composition.Experimental`
`112`	`113`	`Windows.Foundation.Numerics.Vector3 ScrollPosition { get; };`
`113`	`114`	`void ScrollBy(Windows.Foundation.Numerics.Vector3 offset, Boolean animate);`
`114`	`115`	`void TryUpdatePosition(Windows.Foundation.Numerics.Vector3 position, Boolean animate);`
	`116`	`+ void OnPointerPressed(Microsoft.ReactNative.Composition.Input.PointerRoutedEventArgs args);`
	`117`	`+ Boolean Horizontal;`
`115`	`118`	`}`
`116`	`119`
`117`	`120`	`[webhosthidden]`