react-native-windows 0.73.11 → 0.74.0-preview.1

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

@@ -16,23 +16,578 @@
 
 #include <windows.ui.composition.interop.h>
 
+#include <AutoDraw.h>
+#include <Fabric/DWriteHelpers.h>
 #include <unicode.h>
 #include "CompositionDynamicAutomationProvider.h"
+#include "JSValueReader.h"
+#include "RootComponentView.h"
 
-namespace Microsoft::ReactNative {
+namespace winrt::Microsoft::ReactNative::Composition::implementation {
 
 constexpr float c_scrollerLineDelta = 16.0f;
 
-std::shared_ptr<ScrollViewComponentView> ScrollViewComponentView::Create(
+enum class ScrollbarHitRegion : int {
+  Unknown = -1,
+  ArrowFirst = 0,
+  PageUp = 1,
+  Thumb = 2,
+  PageDown = 3,
+  ArrowLast = 4,
+};
+
+struct ScrollBarComponent {
+  ScrollBarComponent(
+      const winrt::Microsoft::ReactNative::Composition::ScrollViewComponentView &outer,
+      const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+      winrt::Microsoft::ReactNative::ReactContext const &reactContext,
+      bool vertical)
+      : m_outer(outer), m_compContext(compContext), m_reactContext(reactContext), m_vertical(vertical) {
+    m_rootVisual = m_compContext.CreateSpriteVisual();
+    m_trackVisual = m_compContext.CreateRoundedRectangleVisual();
+    m_thumbVisual = m_compContext.CreateRoundedRectangleVisual();
+    m_arrowVisualFirst = m_compContext.CreateSpriteVisual();
+    m_arrowVisualLast = m_compContext.CreateSpriteVisual();
+
+    m_rootVisual.InsertAt(m_trackVisual, 0);
+    m_rootVisual.InsertAt(m_arrowVisualFirst, 1);
+    m_rootVisual.InsertAt(m_arrowVisualLast, 2);
+    m_rootVisual.InsertAt(m_thumbVisual, 3);
+
+    m_trackVisual.AnimationClass(winrt::Microsoft::ReactNative::Composition::AnimationClass::ScrollBar);
+    m_arrowVisualFirst.AnimationClass(winrt::Microsoft::ReactNative::Composition::AnimationClass::ScrollBar);
+    m_arrowVisualLast.AnimationClass(winrt::Microsoft::ReactNative::Composition::AnimationClass::ScrollBar);
+    m_thumbVisual.AnimationClass(
+        vertical ? winrt::Microsoft::ReactNative::Composition::AnimationClass::ScrollBarThumbVertical
+                 : winrt::Microsoft::ReactNative::Composition::AnimationClass::ScrollBarThumbHorizontal);
+
+    updateShy(true);
+    onScaleChanged();
+    OnThemeChanged();
+  }
+
+  void OnThemeChanged() noexcept {
+    updateHighlight(ScrollbarHitRegion::ArrowFirst);
+    updateHighlight(ScrollbarHitRegion::ArrowLast);
+    updateHighlight(ScrollbarHitRegion::Thumb);
+    m_trackVisual.Brush(m_outer.Theme().PlatformBrush(L"ScrollBarTrackFill"));
+  }
+
+  void ContentSize(winrt::Windows::Foundation::Size contentSize) noexcept {
+    m_contentSize = contentSize;
+    updateThumb();
+    updateVisibility();
+  }
+
+  void updateTrack() noexcept {
+    if (m_vertical) {
+      m_trackVisual.Size({m_arrowSize, std::max(m_size.Height - (m_trackMargin * 2), 0.0f)});
+      m_trackVisual.Offset({-m_arrowSize, m_trackMargin, 0.0f}, {1.0f, 0.0f, 0.0f});
+    } else {
+      m_trackVisual.Size({std::max(m_size.Width - (m_trackMargin * 2), 0.0f), m_arrowSize});
+      m_trackVisual.Offset({m_trackMargin, -m_arrowSize, 0.0f}, {0.0f, 1.0f, 0.0f});
+    }
+  }
+
+  void updateLayoutMetrics(facebook::react::LayoutMetrics const &layoutMetrics) noexcept {
+    m_size = {
+        layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor,
+        layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor};
+
+    if (m_scaleFactor != layoutMetrics.pointScaleFactor) {
+      m_scaleFactor = layoutMetrics.pointScaleFactor;
+      onScaleChanged();
+    }
+
+    updateTrack();
+    updateThumb();
+    updateVisibility();
+  }
+
+  void updateVisibility() noexcept {
+    bool newVisibility = false;
+    if (m_vertical) {
+      newVisibility = (m_contentSize.Height > m_size.Height);
+    } else {
+      newVisibility = (m_contentSize.Width > m_size.Width);
+    }
+
+    if (newVisibility != m_visible) {
+      m_visible = newVisibility;
+      m_rootVisual.IsVisible(m_visible);
+    }
+  }
+
+  void updateRootAndArrowVisualOffsets() noexcept {
+    if (m_vertical) {
+      m_rootVisual.RelativeSizeWithOffset({m_arrowSize, 0.0f}, {0.0f, 1.0f});
+      m_rootVisual.Offset({-(m_arrowSize + m_trackEdgeMargin), 0.0f, 0.0f}, {1.0f, 0.0f, 0.0f});
+      m_arrowVisualFirst.Offset({0.0f, m_arrowMargin, 0.0f});
+      m_arrowVisualLast.Offset({0.0f, -(m_arrowSize + m_arrowMargin), 0.0f}, {0.0f, 1.0f, 0.0f});
+    } else {
+      m_rootVisual.RelativeSizeWithOffset({0.0f, m_arrowSize}, {1.0f, 0.0f});
+      m_rootVisual.Offset({0.0f, -(m_arrowSize + m_trackEdgeMargin), 0.0f}, {0.0f, 1.0f, 0.0f});
+      m_arrowVisualFirst.Offset({m_arrowMargin, 0.0f, 0.0f});
+      m_arrowVisualLast.Offset({-(m_arrowSize + m_arrowMargin), 0.0f, 0.0f}, {1.0f, 0.0f, 0.0f});
+    }
+  }
+
+  void onScaleChanged() noexcept {
+    m_arrowSize = 12 * m_scaleFactor; // From Xaml resource: ScrollBarSize
+    m_thumbWidth = 6 * m_scaleFactor; // From Xaml resource: ScrollBarThumbStrokeThickness
+    m_thumbShyWidth = 2 * m_scaleFactor;
+    m_arrowMargin = 4 * m_scaleFactor; // From Xaml resource: ScrollBar(Vertical|Horizontal)(Increase|Decrease)Margin
+    m_trackEdgeMargin = 1 * m_scaleFactor; // From Xaml resource: ScrollViewerScrollBarMargin
+    m_trackMargin =
+        (2 + 1) * m_scaleFactor; // From Xaml template VerticalPanningThumb.Margin + ScrollViewerScrollBarMargin
+    m_minThumbSize = static_cast<int>(
+        30 * m_scaleFactor); // From Xaml resource: ScrollBarVerticalThumbMinHeight / ScrollBarHorizontalThumbMinWidth
+
+    m_thumbVisual.CornerRadius({m_thumbWidth / 2.0f, m_thumbWidth / 2.0f});
+    m_trackVisual.CornerRadius({m_arrowSize / 2.0f, m_arrowSize / 2.0f});
+
+    m_arrowVisualFirst.Size({m_arrowSize, m_arrowSize});
+    m_arrowVisualLast.Size({m_arrowSize, m_arrowSize});
+    m_arrowFirstDrawingSurface = nullptr; // Reset arrow textures when scale changes
+    m_arrowLastDrawingSurface = nullptr;
+    updateRootAndArrowVisualOffsets();
+  }
+
+  void ContentOffset(const winrt::Windows::Foundation::Numerics::float3 &offset) noexcept {
+    m_offset = offset;
+    updateThumb();
+  }
+
+  ScrollbarHitRegion HitTest(winrt::Windows::Foundation::Point pt) noexcept {
+    pt = {pt.X * m_scaleFactor, pt.Y * m_scaleFactor};
+    if (m_vertical) {
+      if (pt.X < m_size.Width - (m_arrowSize + m_trackEdgeMargin)) {
+        return ScrollbarHitRegion::Unknown;
+      }
+
+      if (pt.Y < (m_arrowSize + m_arrowMargin)) {
+        return ScrollbarHitRegion::ArrowFirst;
+      }
+
+      if (pt.Y < (m_arrowSize + m_arrowMargin) + m_thumbPos) {
+        return ScrollbarHitRegion::PageUp;
+      }
+
+      if (pt.Y < (m_arrowSize + m_arrowMargin) + m_thumbPos + m_thumbSize) {
+        return ScrollbarHitRegion::Thumb;
+      }
+
+      if (pt.Y < m_size.Height - (m_arrowSize + m_arrowMargin)) {
+        return ScrollbarHitRegion::PageDown;
+      }
+
+      return ScrollbarHitRegion::ArrowLast;
+    } else {
+      if (pt.Y < m_size.Height - (m_arrowSize + m_trackEdgeMargin)) {
+        return ScrollbarHitRegion::Unknown;
+      }
+
+      if (pt.X < (m_arrowSize + m_arrowMargin)) {
+        return ScrollbarHitRegion::ArrowFirst;
+      }
+
+      if (pt.X < (m_arrowSize + m_arrowMargin) + m_thumbPos) {
+        return ScrollbarHitRegion::PageUp;
+      }
+
+      if (pt.X < (m_arrowSize + m_arrowMargin) + m_thumbPos + m_thumbSize) {
+        return ScrollbarHitRegion::Thumb;
+      }
+
+      if (pt.X < m_size.Width - (m_arrowSize + m_arrowMargin)) {
+        return ScrollbarHitRegion::PageDown;
+      }
+
+      return ScrollbarHitRegion::ArrowLast;
+    }
+
+    return ScrollbarHitRegion::Unknown;
+  }
+
+  int getViewportSize() const noexcept {
+    return static_cast<int>(m_vertical ? m_size.Height : m_size.Width);
+  }
+
+  int calulateMaxThumbLength() const noexcept {
+    return std::max(static_cast<int>(getViewportSize() - (2 * (m_arrowSize + m_arrowMargin))), 0);
+  }
+
+  int getScrollRange() const noexcept {
+    return static_cast<int>(m_vertical ? m_contentSize.Height : m_contentSize.Width);
+  }
+
+  int getComputedPixelThumbSize() const noexcept {
+    auto maxThumbLength = calulateMaxThumbLength();
+    auto scrollRange = getScrollRange();
+    auto viewportSize = getViewportSize();
+    return std::max(::MulDiv(std::min(scrollRange, viewportSize), maxThumbLength, scrollRange), 0);
+  }
+
+  float scrollOffsetFromThumbPos(int thumbPos) const noexcept {
+    auto maxThumbLength = calulateMaxThumbLength();
+    auto scrollRange = getScrollRange();
+
+    const int computedPixelThumbSize = getComputedPixelThumbSize();
+
+    int thumbCorrection = 0;
+    if (!(m_minThumbSize <= computedPixelThumbSize || maxThumbLength < 2 * m_minThumbSize)) {
+      thumbCorrection = m_minThumbSize - computedPixelThumbSize;
+    }
+    return std::clamp(
+        static_cast<float>(::MulDiv(thumbPos, scrollRange, (maxThumbLength - thumbCorrection))),
+        0.0f,
+        static_cast<float>(scrollRange));
+  }
+
+  void updateThumb() noexcept {
+    auto maxThumbLength = calulateMaxThumbLength();
+    auto scrollRange = getScrollRange();
+    auto scrollOffset = static_cast<int>(m_vertical ? m_offset.y : m_offset.x);
+
+    const int computedPixelThumbSize = getComputedPixelThumbSize();
+
+    m_thumbSize = 0;
+    int thumbCorrection = 0;
+
+    if (m_minThumbSize <= computedPixelThumbSize || maxThumbLength < 2 * m_minThumbSize)
+      m_thumbSize = computedPixelThumbSize;
+    else {
+      thumbCorrection = m_minThumbSize - computedPixelThumbSize;
+      m_thumbSize = m_minThumbSize;
+    }
+
+    // Position is relative to available area for thumb
+    m_thumbPos = (scrollRange > 0 ? ::MulDiv(scrollOffset, maxThumbLength - thumbCorrection, scrollRange) : 0);
+
+    auto thumbOffset = (m_arrowSize - m_thumbWidth) / 2.0f;
+    auto shyOffset = m_shy ? (m_thumbWidth - m_thumbShyWidth) : 0.0f;
+    auto thumbScale = m_shy ? (m_thumbShyWidth / m_thumbWidth) : 1.0f;
+
+    if (m_vertical) {
+      m_thumbVisual.Size({m_thumbWidth, static_cast<float>(m_thumbSize)});
+      m_thumbVisual.Offset(
+          {-m_arrowSize + thumbOffset + shyOffset, m_arrowSize + m_arrowMargin + static_cast<float>(m_thumbPos), 0.0f},
+          {1.0f, 0.0f, 0.0f});
+      m_thumbVisual.Scale({thumbScale, 1.0f, 1.0f});
+    } else {
+      m_thumbVisual.Size({static_cast<float>(m_thumbSize), m_thumbWidth});
+      m_thumbVisual.Offset(
+          {m_arrowSize + m_arrowMargin + static_cast<float>(m_thumbPos), -m_arrowSize + thumbOffset + shyOffset, 0.0f},
+          {0.0f, 1.0f, 0.0f});
+      m_thumbVisual.Scale({1.0f, thumbScale, 1.0f});
+    }
+  }
+
+  winrt::Microsoft::ReactNative::Composition::IVisual Visual() const noexcept {
+    return m_rootVisual;
+  }
+
+  void OnPointerReleased(const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) {
+    if (!m_visible)
+      return;
+    auto pt = args.GetCurrentPoint(m_outer.Tag());
+    if (m_nTrackInputOffset != -1 &&
+        pt.PointerDeviceType() == winrt::Microsoft::ReactNative::Composition::Input::PointerDeviceType::Mouse &&
+        pt.Properties().PointerUpdateKind() ==
+            winrt::Microsoft::ReactNative::Composition::Input::PointerUpdateKind::LeftButtonReleased) {
+      handleMoveThumb(args);
+      stopTrackingThumb();
+      m_outer.ReleasePointerCapture(args.Pointer());
+
+      auto reg = HitTest(pt.Position());
+      updateShy(reg == ScrollbarHitRegion::Unknown);
+    }
+  }
+
+  void stopTrackingThumb() noexcept {
+    m_nTrackInputOffset = -1;
+    m_thumbVisual.AnimationClass(
+        m_vertical ? winrt::Microsoft::ReactNative::Composition::AnimationClass::ScrollBarThumbVertical
+                   : winrt::Microsoft::ReactNative::Composition::AnimationClass::ScrollBarThumbHorizontal);
+  }
+
+  void handleMoveThumb(const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) {
+    auto pt = args.GetCurrentPoint(m_outer.Tag());
+    auto pos = pt.Position();
+
+    auto newTrackingPosition = static_cast<int>((m_vertical ? pos.Y : pos.X) * m_scaleFactor) - m_nTrackInputOffset;
+    winrt::get_self<ScrollViewComponentView>(m_outer)->scrollTo(
+        m_vertical ? winrt::Windows::Foundation::Numerics::
+                         float3{m_offset.x, scrollOffsetFromThumbPos(newTrackingPosition), m_offset.z}
+                   : winrt::Windows::Foundation::Numerics::
+                         float3{scrollOffsetFromThumbPos(newTrackingPosition), m_offset.y, m_offset.z},
+        false);
+    args.Handled(true);
+  }
+
+  void OnPointerPressed(const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) {
+    if (!m_visible)
+      return;
+    auto pt = args.GetCurrentPoint(m_outer.Tag());
+    if (pt.PointerDeviceType() == winrt::Microsoft::ReactNative::Composition::Input::PointerDeviceType::Mouse) {
+      auto pos = pt.Position();
+      auto reg = HitTest(pos);
+
+      switch (reg) {
+        case ScrollbarHitRegion::ArrowFirst:
+          if (m_vertical) {
+            winrt::get_self<ScrollViewComponentView>(m_outer)->lineUp(false);
+          } else {
+            winrt::get_self<ScrollViewComponentView>(m_outer)->lineLeft(false);
+          }
+          args.Handled(true);
+          break;
+        case ScrollbarHitRegion::ArrowLast:
+          if (m_vertical) {
+            winrt::get_self<ScrollViewComponentView>(m_outer)->lineDown(false);
+          } else {
+            winrt::get_self<ScrollViewComponentView>(m_outer)->lineRight(false);
+          }
+          args.Handled(true);
+          break;
+        case ScrollbarHitRegion::PageUp:
+          if (m_vertical) {
+            winrt::get_self<ScrollViewComponentView>(m_outer)->pageUp(false);
+          }
+          args.Handled(true);
+          break;
+        case ScrollbarHitRegion::PageDown:
+          if (m_vertical) {
+            winrt::get_self<ScrollViewComponentView>(m_outer)->pageDown(false);
+          }
+          args.Handled(true);
+          break;
+        case ScrollbarHitRegion::Thumb: {
+          m_outer.CapturePointer(args.Pointer());
+          m_nTrackInputOffset = static_cast<int>((m_vertical ? pos.Y : pos.X) * m_scaleFactor) - m_thumbPos;
+          m_thumbVisual.AnimationClass(winrt::Microsoft::ReactNative::Composition::AnimationClass::None);
+          handleMoveThumb(args);
+        }
+      }
+    }
+  }
+
+  void OnPointerMoved(const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) {
+    if (!m_visible)
+      return;
+    auto pt = args.GetCurrentPoint(m_outer.Tag());
+    if (pt.PointerDeviceType() == winrt::Microsoft::ReactNative::Composition::Input::PointerDeviceType::Mouse) {
+      if (m_nTrackInputOffset != -1) {
+        handleMoveThumb(args);
+      } else {
+        auto pos = pt.Position();
+        auto reg = HitTest(pos);
+        updateShy(reg == ScrollbarHitRegion::Unknown);
+        setHighlightedRegion(reg);
+      }
+    }
+  }
+
+  void OnPointerCaptureLost() {
+    if (!m_visible)
+      return;
+
+    stopTrackingThumb();
+    updateShy(true);
+  }
+
+  void updateShy(bool shy) {
+    if (shy == m_shy)
+      return;
+
+    m_shy = shy;
+
+    m_trackVisual.Opacity(m_shy ? 0.0f : 1.0f);
+    m_arrowVisualFirst.Opacity(m_shy ? 0.0f : 1.0f);
+    m_arrowVisualLast.Opacity(m_shy ? 0.0f : 1.0f);
+
+    updateThumb();
+  }
+
+  void setHighlightedRegion(ScrollbarHitRegion region) noexcept {
+    if (m_highlightedRegion == region)
+      return;
+
+    auto oldRegion = m_highlightedRegion;
+    m_highlightedRegion = region;
+    updateHighlight(oldRegion);
+    updateHighlight(m_highlightedRegion);
+  }
+
+  // Renders the text into our composition surface
+  void drawArrow(ScrollbarHitRegion region, bool disabled, bool hovered) noexcept {
+    auto &drawingSurface =
+        (region == ScrollbarHitRegion::ArrowFirst) ? m_arrowFirstDrawingSurface : m_arrowLastDrawingSurface;
+    if (!drawingSurface) {
+      drawingSurface = m_compContext.CreateDrawingSurfaceBrush(
+          {m_arrowSize, m_arrowSize},
+          winrt::Windows::Graphics::DirectX::DirectXPixelFormat::B8G8R8A8UIntNormalized,
+          winrt::Windows::Graphics::DirectX::DirectXAlphaMode::Premultiplied);
+    }
+
+    if (winrt::get_self<ScrollViewComponentView>(m_outer)->theme()->IsEmpty()) {
+      return;
+    }
+
+    winrt::com_ptr<IDWriteTextFormat> spTextFormat;
+    winrt::check_hresult(::Microsoft::ReactNative::DWriteFactory()->CreateTextFormat(
+        L"Segoe Fluent Icons",
+        nullptr, // Font collection (nullptr sets it to use the system font collection).
+        DWRITE_FONT_WEIGHT_REGULAR,
+        DWRITE_FONT_STYLE_NORMAL,
+        DWRITE_FONT_STRETCH_NORMAL,
+        8, //  Xaml resource: ScrollBarButtonArrowIconFontSize
+        L"",
+        spTextFormat.put()));
+
+    winrt::check_hresult(spTextFormat->SetTextAlignment(DWRITE_TEXT_ALIGNMENT_CENTER));
+
+    winrt::com_ptr<IDWriteTextLayout> spTextLayout;
+    winrt::check_hresult(::Microsoft::ReactNative::DWriteFactory()->CreateTextLayout(
+        m_vertical ? ((region == ScrollbarHitRegion::ArrowFirst) ? L"\uEDDB" : L"\uEDDC")
+                   : ((region == ScrollbarHitRegion::ArrowFirst) ? L"\uEDD9" : L"\uEDDA"),
+        1, // The length of the string.
+        spTextFormat.get(), // The text format to apply to the string (contains font information, etc).
+        (m_arrowSize / m_scaleFactor), // The width of the layout box.
+        (m_arrowSize / m_scaleFactor), // The height of the layout box.
+        spTextLayout.put() // The IDWriteTextLayout interface pointer.
+        ));
+
+    POINT offset;
+    {
+      ::Microsoft::ReactNative::Composition::AutoDrawDrawingSurface autoDraw(drawingSurface, &offset);
+      if (auto d2dDeviceContext = autoDraw.GetRenderTarget()) {
+        d2dDeviceContext->Clear(D2D1::ColorF(D2D1::ColorF::Black, 0.0f));
+        assert(d2dDeviceContext->GetUnitMode() == D2D1_UNIT_MODE_DIPS);
+        const auto dpi = m_scaleFactor * 96.0f;
+        float oldDpiX, oldDpiY;
+        d2dDeviceContext->GetDpi(&oldDpiX, &oldDpiY);
+        d2dDeviceContext->SetDpi(dpi, dpi);
+
+        // Create a solid color brush for the text. A more sophisticated application might want
+        // to cache and reuse a brush across all text elements instead, taking care to recreate
+        // it in the event of device removed.
+        winrt::com_ptr<ID2D1SolidColorBrush> brush;
+
+        D2D1::ColorF color{0};
+        if (disabled) {
+          color = winrt::get_self<ScrollViewComponentView>(m_outer)->theme()->D2DPlatformColor(
+              "ScrollBarButtonArrowForegroundDisabled");
+        } else if (hovered) {
+          color = winrt::get_self<ScrollViewComponentView>(m_outer)->theme()->D2DPlatformColor(
+              "ScrollBarButtonArrowForegroundPointerOver");
+        } else {
+          color = winrt::get_self<ScrollViewComponentView>(m_outer)->theme()->D2DPlatformColor(
+              "ScrollBarButtonArrowForeground");
+        }
+        winrt::check_hresult(d2dDeviceContext->CreateSolidColorBrush(color, brush.put()));
+
+        {
+          DWRITE_TEXT_METRICS dtm{};
+          winrt::check_hresult(spTextLayout->GetMetrics(&dtm));
+          offset.y += static_cast<int>((m_arrowSize - dtm.height) / 2.0f);
+        }
+
+        // Draw the line of text at the specified offset, which corresponds to the top-left
+        // corner of our drawing surface. Notice we don't call BeginDraw on the D2D device
+        // context; this has already been done for us by the composition API.
+        d2dDeviceContext->DrawTextLayout(
+            D2D1::Point2F(
+                static_cast<FLOAT>((offset.x) / m_scaleFactor), static_cast<FLOAT>((offset.y) / m_scaleFactor)),
+            spTextLayout.get(),
+            brush.get(),
+            D2D1_DRAW_TEXT_OPTIONS_ENABLE_COLOR_FONT);
+
+        // restore dpi to old state
+        d2dDeviceContext->SetDpi(oldDpiX, oldDpiY);
+      }
+    }
+    if (drawingSurface) {
+      drawingSurface.HorizontalAlignmentRatio(0.0f);
+      drawingSurface.VerticalAlignmentRatio(0.0f);
+      drawingSurface.Stretch(winrt::Microsoft::ReactNative::Composition::CompositionStretch::None);
+    }
+
+    auto &arrowVisual = (region == ScrollbarHitRegion::ArrowFirst) ? m_arrowVisualFirst : m_arrowVisualLast;
+    arrowVisual.Brush(drawingSurface);
+  }
+
+  void updateHighlight(ScrollbarHitRegion region) noexcept {
+    switch (region) {
+      case ScrollbarHitRegion::ArrowFirst:
+      case ScrollbarHitRegion::ArrowLast: {
+        auto disabled = !std::static_pointer_cast<const facebook::react::ScrollViewProps>(
+                             winrt::get_self<ScrollViewComponentView>(m_outer)->viewProps())
+                             ->scrollEnabled;
+        drawArrow(region, disabled, m_highlightedRegion == region);
+      }
+      case ScrollbarHitRegion::Thumb: {
+        if (!std::static_pointer_cast<const facebook::react::ScrollViewProps>(
+                 winrt::get_self<ScrollViewComponentView>(m_outer)->viewProps())
+                 ->scrollEnabled) {
+          m_thumbVisual.Brush(m_outer.Theme().PlatformBrush(L"ScrollBarThumbFillDisabled"));
+        } else if (m_highlightedRegion == region) {
+          m_thumbVisual.Brush(m_outer.Theme().PlatformBrush(L"ScrollBarThumbFillPointerOver"));
+        } else {
+          m_thumbVisual.Brush(m_outer.Theme().PlatformBrush(L"ScrollBarThumbFill"));
+        }
+      }
+    }
+  }
+
+ private:
+  winrt::Microsoft::ReactNative::Composition::ScrollViewComponentView m_outer;
+  winrt::Microsoft::ReactNative::Composition::ICompositionContext m_compContext;
+  winrt::Microsoft::ReactNative::ReactContext m_reactContext;
+  const bool m_vertical;
+  bool m_visible{false};
+  bool m_shy{false};
+  int m_thumbSize{0};
+  float m_arrowSize{0};
+  float m_arrowMargin{0}; // margin on outside end of arrow buttons
+  float m_trackEdgeMargin{0}; // margin between track and edge of component
+  float m_trackMargin{0}; // margin of track background to ends of scrollbar
+  float m_thumbWidth{0};
+  float m_thumbShyWidth{0};
+  int m_minThumbSize{0};
+  float m_scaleFactor{1};
+  int m_thumbPos{0};
+  int m_nTrackInputOffset{-1};
+  ScrollbarHitRegion m_highlightedRegion{ScrollbarHitRegion::Unknown};
+  winrt::Windows::Foundation::Numerics::float3 m_offset{0};
+  winrt::Windows::Foundation::Size m_contentSize{0, 0};
+  winrt::Windows::Foundation::Size m_size{0, 0};
+  winrt::Microsoft::ReactNative::Composition::ISpriteVisual m_rootVisual{nullptr};
+  winrt::Microsoft::ReactNative::Composition::IRoundedRectangleVisual m_thumbVisual{nullptr};
+  winrt::Microsoft::ReactNative::Composition::ISpriteVisual m_arrowVisualFirst{nullptr};
+  winrt::Microsoft::ReactNative::Composition::ISpriteVisual m_arrowVisualLast{nullptr};
+  winrt::Microsoft::ReactNative::Composition::IDrawingSurfaceBrush m_arrowFirstDrawingSurface{nullptr};
+  winrt::Microsoft::ReactNative::Composition::IDrawingSurfaceBrush m_arrowLastDrawingSurface{nullptr};
+  winrt::Microsoft::ReactNative::Composition::IRoundedRectangleVisual m_trackVisual{nullptr};
+};
+
+winrt::Microsoft::ReactNative::ComponentView ScrollViewComponentView::Create(
     const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
-    facebook::react::Tag tag) noexcept {
-  return std::shared_ptr<ScrollViewComponentView>(new ScrollViewComponentView(compContext, tag));
+    facebook::react::Tag tag,
+    winrt::Microsoft::ReactNative::ReactContext const &reactContext) noexcept {
+  return winrt::make<ScrollViewComponentView>(compContext, tag, reactContext);
 }
 
 ScrollViewComponentView::ScrollViewComponentView(
     const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
-    facebook::react::Tag tag)
-    : Super(compContext, tag) {
+    facebook::react::Tag tag,
+    winrt::Microsoft::ReactNative::ReactContext const &reactContext)
+    : Super(
+          compContext,
+          tag,
+          reactContext,
+          ComponentViewFeatures::Default & ~ComponentViewFeatures::Background,
+          false) {
   static auto const defaultProps = std::make_shared<facebook::react::ScrollViewProps const>();
   m_props = defaultProps;
 
@@ -125,20 +680,30 @@ ScrollViewComponentView::ScrollViewComponentView(
         */
 }
 
-void ScrollViewComponentView::mountChildComponentView(IComponentView &childComponentView, uint32_t index) noexcept {
-  ensureVisual();
-
-  m_children.insert(std::next(m_children.begin(), index), &childComponentView);
-  childComponentView.parent(this);
+void ScrollViewComponentView::MountChildComponentView(
+    const winrt::Microsoft::ReactNative::ComponentView &childComponentView,
+    uint32_t index) noexcept {
+  base_type::MountChildComponentView(childComponentView, index);
 
-  m_scrollVisual.InsertAt(static_cast<CompositionBaseComponentView &>(childComponentView).OuterVisual(), index);
+  ensureVisual();
+  m_scrollVisual.InsertAt(
+      childComponentView.as<winrt::Microsoft::ReactNative::Composition::implementation::ComponentView>()->OuterVisual(),
+      index);
 }
 
-void ScrollViewComponentView::unmountChildComponentView(IComponentView &childComponentView, uint32_t index) noexcept {
-  m_children.erase(std::next(m_children.begin(), index));
+void ScrollViewComponentView::UnmountChildComponentView(
+    const winrt::Microsoft::ReactNative::ComponentView &childComponentView,
+    uint32_t index) noexcept {
+  base_type::UnmountChildComponentView(childComponentView, index);
+  m_scrollVisual.Remove(childComponentView.as<ComponentView>()->OuterVisual());
+}
 
-  m_scrollVisual.Remove(static_cast<CompositionBaseComponentView &>(childComponentView).OuterVisual());
-  childComponentView.parent(nullptr);
+void ScrollViewComponentView::updateBackgroundColor(const facebook::react::SharedColor &color) noexcept {
+  if (color) {
+    m_scrollVisual.Brush(theme()->Brush(*color));
+  } else {
+    m_scrollVisual.Brush(m_compContext.CreateColorBrush({0, 0, 0, 0}));
+  }
 }
 
 void ScrollViewComponentView::updateProps(
@@ -150,17 +715,15 @@ void ScrollViewComponentView::updateProps(
   ensureVisual();
 
   if (!oldProps || oldViewProps.backgroundColor != newViewProps.backgroundColor) {
-    if (newViewProps.backgroundColor) {
-      m_scrollVisual.Brush(m_compContext.CreateColorBrush(newViewProps.backgroundColor.AsWindowsColor()));
-    } else {
-      m_scrollVisual.Brush(m_compContext.CreateColorBrush({0, 0, 0, 0}));
-    }
+    updateBackgroundColor(newViewProps.backgroundColor);
+  }
+  if (oldViewProps.testId != newViewProps.testId) {
+    m_visual.Comment(winrt::to_hstring(newViewProps.testId));
   }
 
   // update BaseComponentView props
-  updateShadowProps(oldViewProps, newViewProps, m_visual);
   updateTransformProps(oldViewProps, newViewProps, m_visual);
-  updateBorderProps(oldViewProps, newViewProps);
+  Super::updateProps(props, oldProps);
 
   m_props = std::static_pointer_cast<facebook::react::ViewProps const>(props);
 }
@@ -168,12 +731,27 @@ void ScrollViewComponentView::updateProps(
 void ScrollViewComponentView::updateState(
     facebook::react::State::Shared const &state,
     facebook::react::State::Shared const &oldState) noexcept {
-  const auto &newState = *std::static_pointer_cast<facebook::react::ScrollViewShadowNode::ConcreteState const>(state);
-
-  m_contentSize = newState.getData().getContentSize();
+  m_state = std::static_pointer_cast<facebook::react::ScrollViewShadowNode::ConcreteState const>(state);
+  m_contentSize = m_state->getData().getContentSize();
   updateContentVisualSize();
 }
 
+void ScrollViewComponentView::updateStateWithContentOffset() noexcept {
+  if (!m_state) {
+    return;
+  }
+
+  auto scrollPosition = m_scrollVisual.ScrollPosition();
+  m_verticalScrollbarComponent->ContentOffset(scrollPosition);
+  m_horizontalScrollbarComponent->ContentOffset(scrollPosition);
+
+  m_state->updateState([scrollPosition](const facebook::react::ScrollViewShadowNode::ConcreteState::Data &data) {
+    auto newData = data;
+    newData.contentOffset = {scrollPosition.x, scrollPosition.y};
+    return std::make_shared<facebook::react::ScrollViewShadowNode::ConcreteState::Data const>(newData);
+  });
+}
+
 void ScrollViewComponentView::updateLayoutMetrics(
     facebook::react::LayoutMetrics const &layoutMetrics,
     facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept {
@@ -184,11 +762,9 @@ void ScrollViewComponentView::updateLayoutMetrics(
     OuterVisual().IsVisible(layoutMetrics.displayType != facebook::react::DisplayType::None);
   }
 
-  // m_needsBorderUpdate = true;
-  updateBorderLayoutMetrics(layoutMetrics, *m_props);
-  m_layoutMetrics = layoutMetrics;
-
-  UpdateCenterPropertySet();
+  m_verticalScrollbarComponent->updateLayoutMetrics(layoutMetrics);
+  m_horizontalScrollbarComponent->updateLayoutMetrics(layoutMetrics);
+  Super::updateLayoutMetrics(layoutMetrics, oldLayoutMetrics);
   m_visual.Size(
       {layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor,
        layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor});
@@ -199,17 +775,18 @@ void ScrollViewComponentView::updateLayoutMetrics(
 }
 
 void ScrollViewComponentView::updateContentVisualSize() noexcept {
-  m_scrollVisual.ContentSize(
-      {std::max(m_contentSize.width, m_layoutMetrics.frame.size.width) * m_layoutMetrics.pointScaleFactor,
-       std::max(m_contentSize.height, m_layoutMetrics.frame.size.height) * m_layoutMetrics.pointScaleFactor});
+  winrt::Windows::Foundation::Size contentSize = {
+      std::max(m_contentSize.width, m_layoutMetrics.frame.size.width) * m_layoutMetrics.pointScaleFactor,
+      std::max(m_contentSize.height, m_layoutMetrics.frame.size.height) * m_layoutMetrics.pointScaleFactor};
+  m_verticalScrollbarComponent->ContentSize(contentSize);
+  m_horizontalScrollbarComponent->ContentSize(contentSize);
+  m_scrollVisual.ContentSize(contentSize);
 }
 
-void ScrollViewComponentView::finalizeUpdates(RNComponentViewUpdateMask updateMask) noexcept {
-  // m_element.FinalizeProperties();
-}
 void ScrollViewComponentView::prepareForRecycle() noexcept {}
-facebook::react::Props::Shared ScrollViewComponentView::props() noexcept {
-  return static_cast<facebook::react::Props::Shared>(m_props);
+
+facebook::react::SharedViewProps ScrollViewComponentView::viewProps() noexcept {
+  return m_props;
 }
 
 /*
@@ -257,7 +834,14 @@ void ScrollViewComponentView::OnPointerDown(const winrt::Windows::UI::Input::Poi
 }
 */
 
-void ScrollViewComponentView::onPointerWheelChanged(
+void ScrollViewComponentView::onThemeChanged() noexcept {
+  updateBackgroundColor(std::static_pointer_cast<const facebook::react::ScrollViewProps>(m_props)->backgroundColor);
+  m_verticalScrollbarComponent->OnThemeChanged();
+  m_horizontalScrollbarComponent->OnThemeChanged();
+  Super::onThemeChanged();
+}
+
+void ScrollViewComponentView::OnPointerWheelChanged(
     const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
   auto ppp = args.GetCurrentPoint(-1).Properties();
   auto delta = static_cast<float>(ppp.MouseWheelDelta());
@@ -284,7 +868,34 @@ void ScrollViewComponentView::onPointerWheelChanged(
   }
 }
 
-void ScrollViewComponentView::onKeyDown(
+void ScrollViewComponentView::OnPointerPressed(
+    const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
+  m_verticalScrollbarComponent->OnPointerPressed(args);
+  m_horizontalScrollbarComponent->OnPointerPressed(args);
+  Super::OnPointerPressed(args);
+}
+
+void ScrollViewComponentView::OnPointerReleased(
+    const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
+  m_verticalScrollbarComponent->OnPointerReleased(args);
+  m_horizontalScrollbarComponent->OnPointerReleased(args);
+  Super::OnPointerReleased(args);
+}
+
+void ScrollViewComponentView::OnPointerMoved(
+    const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
+  m_verticalScrollbarComponent->OnPointerMoved(args);
+  m_horizontalScrollbarComponent->OnPointerMoved(args);
+  Super::OnPointerMoved(args);
+}
+
+void ScrollViewComponentView::OnPointerCaptureLost() noexcept {
+  m_verticalScrollbarComponent->OnPointerCaptureLost();
+  m_horizontalScrollbarComponent->OnPointerCaptureLost();
+  Super::OnPointerCaptureLost();
+}
+
+void ScrollViewComponentView::OnKeyDown(
     const winrt::Microsoft::ReactNative::Composition::Input::KeyboardSource &source,
     const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept {
   switch (args.Key()) {
@@ -396,25 +1007,37 @@ bool ScrollViewComponentView::scrollRight(float delta, bool animate) noexcept {
   return true;
 }
 
-void ScrollViewComponentView::handleCommand(std::string const &commandName, folly::dynamic const &arg) noexcept {
-  if (commandName == "scrollTo") {
-    auto x = arg[0].asDouble() * m_layoutMetrics.pointScaleFactor;
-    auto y = arg[1].asDouble() * m_layoutMetrics.pointScaleFactor;
-    auto animate = arg[2].asBool();
-    m_scrollVisual.TryUpdatePosition({static_cast<float>(x), static_cast<float>(y), 0.0f}, animate);
-  } else if (commandName == "flashScrollIndicators") {
+void ScrollViewComponentView::HandleCommand(
+    winrt::hstring commandName,
+    const winrt::Microsoft::ReactNative::IJSValueReader &args) noexcept {
+  if (commandName == L"scrollTo") {
+    double x, y;
+    bool animate;
+    winrt::Microsoft::ReactNative::ReadArgs(args, x, y, animate);
+    scrollTo(
+        {static_cast<float>(x) * m_layoutMetrics.pointScaleFactor,
+         static_cast<float>(y) * m_layoutMetrics.pointScaleFactor,
+         0.0f},
+        animate);
+  } else if (commandName == L"flashScrollIndicators") {
     // No-op for now
-  } else if (commandName == "scrollToEnd") {
-    auto animate = arg[0].asBool();
+  } else if (commandName == L"scrollToEnd") {
+    bool animate;
+    winrt::Microsoft::ReactNative::ReadArgs(args, animate);
     scrollToEnd(animate);
-  } else if (commandName == "zoomToRect") {
+  } else if (commandName == L"zoomToRect") {
     // No-op for now
   } else {
-    Super::handleCommand(commandName, arg);
+    Super::HandleCommand(commandName, args);
   }
 }
 
-void ScrollViewComponentView::StartBringIntoView(BringIntoViewOptions &&options) noexcept {
+void ScrollViewComponentView::scrollTo(winrt::Windows::Foundation::Numerics::float3 offset, bool animate) noexcept {
+  m_scrollVisual.TryUpdatePosition(offset, animate);
+}
+
+void ScrollViewComponentView::StartBringIntoView(
+    winrt::Microsoft::ReactNative::implementation::BringIntoViewOptions &&options) noexcept {
   RECT rc{getClientRect()};
 
   if (!options.TargetRect) {
@@ -502,7 +1125,8 @@ void ScrollViewComponentView::StartBringIntoView(BringIntoViewOptions &&options)
 
     options.TargetRect = facebook::react::Rect::intersect(viewerRect, options.TargetRect.value());
 
-    m_parent->StartBringIntoView(std::move(options));
+    winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(m_parent)->StartBringIntoView(
+        std::move(options));
   }
 }
 
@@ -510,12 +1134,17 @@ void ScrollViewComponentView::ensureVisual() noexcept {
   if (!m_visual) {
     m_visual = m_compContext.CreateSpriteVisual();
     m_scrollVisual = m_compContext.CreateScrollerVisual();
+    m_verticalScrollbarComponent = std::make_shared<ScrollBarComponent>(*this, m_compContext, m_reactContext, true);
+    m_horizontalScrollbarComponent = std::make_shared<ScrollBarComponent>(*this, m_compContext, m_reactContext, false);
     m_visual.InsertAt(m_scrollVisual, 0);
+    m_visual.InsertAt(m_verticalScrollbarComponent->Visual(), 1);
+    m_visual.InsertAt(m_horizontalScrollbarComponent->Visual(), 2);
     m_scrollPositionChangedRevoker = m_scrollVisual.ScrollPositionChanged(
         winrt::auto_revoke,
         [this](
             winrt::IInspectable const & /*sender*/,
             winrt::Microsoft::ReactNative::Composition::IScrollPositionChangedArgs const &args) {
+          updateStateWithContentOffset();
           auto eventEmitter = GetEventEmitter();
           if (eventEmitter) {
             facebook::react::ScrollViewMetrics scrollMetrics;
@@ -545,25 +1174,39 @@ facebook::react::Tag ScrollViewComponentView::hitTest(
       ptViewport.y + m_scrollVisual.ScrollPosition().y / m_layoutMetrics.pointScaleFactor};
 
   facebook::react::Tag targetTag;
-  if ((ignorePointerEvents || m_props->pointerEvents == facebook::react::PointerEventsMode::Auto ||
-       m_props->pointerEvents == facebook::react::PointerEventsMode::BoxNone) &&
-      std::any_of(m_children.rbegin(), m_children.rend(), [&targetTag, &ptContent, &localPt](auto child) {
-        targetTag = static_cast<const CompositionBaseComponentView *>(child)->hitTest(ptContent, localPt);
-        return targetTag != -1;
-      }))
-    return targetTag;
 
   if ((ignorePointerEvents || m_props->pointerEvents == facebook::react::PointerEventsMode::Auto ||
        m_props->pointerEvents == facebook::react::PointerEventsMode::BoxOnly) &&
       ptViewport.x >= 0 && ptViewport.x <= m_layoutMetrics.frame.size.width && ptViewport.y >= 0 &&
       ptViewport.y <= m_layoutMetrics.frame.size.height) {
-    localPt = ptViewport;
-    return this->tag();
+    if ((ignorePointerEvents || m_props->pointerEvents == facebook::react::PointerEventsMode::Auto ||
+         m_props->pointerEvents == facebook::react::PointerEventsMode::BoxNone) &&
+        anyHitTestHelper(targetTag, ptContent, localPt))
+      return targetTag;
+
+    if (ignorePointerEvents || m_props->pointerEvents == facebook::react::PointerEventsMode::Auto ||
+        m_props->pointerEvents == facebook::react::PointerEventsMode::BoxOnly) {
+      return this->Tag();
+    }
   }
 
   return -1;
 }
 
+facebook::react::Point ScrollViewComponentView::getClientOffset() const noexcept {
+  facebook::react::Point parentOffset{0};
+  if (m_parent) {
+    parentOffset =
+        winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(m_parent)->getClientOffset();
+  }
+
+  return {
+      m_layoutMetrics.frame.origin.x * m_layoutMetrics.pointScaleFactor - m_scrollVisual.ScrollPosition().x +
+          parentOffset.x,
+      m_layoutMetrics.frame.origin.y * m_layoutMetrics.pointScaleFactor - m_scrollVisual.ScrollPosition().y +
+          parentOffset.y};
+}
+
 winrt::Microsoft::ReactNative::Composition::IVisual ScrollViewComponentView::Visual() const noexcept {
   return m_visual;
 }
@@ -572,4 +1215,4 @@ std::string ScrollViewComponentView::DefaultControlType() const noexcept {
   return "scrollbar";
 }
 
-} // namespace Microsoft::ReactNative
+} // namespace winrt::Microsoft::ReactNative::Composition::implementation