[Fabric] Enable ScrollView touch scrolling (#13664)

* [Fabric] Enable ScrolView touch scrolling

* Change files

* format

* typo

Author: acoates-ms

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"
+}

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

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]

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,

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;

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;

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(