Implement cursor property (#14141)

acoates-ms · web-flow · commit f4dd6f95eaf0 · 2024-12-03T16:07:05.000Z
* Implement cursor property

* Change files
diff --git a/change/react-native-windows-4fec92b2-f049-43b1-8e13-d9c351c5511b.json b/change/react-native-windows-4fec92b2-f049-43b1-8e13-d9c351c5511b.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Implement cursor property",
+  "packageName": "react-native-windows",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionEventHandler.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionEventHandler.cpp
@@ -12,15 +12,18 @@
 #include <Views/ShadowNodeBase.h>
 #include <windows.h>
 #include <windowsx.h>
+#include <winrt/Windows.UI.Core.h>
 #include <winrt/Windows.UI.Input.h>
 #include "Composition.Input.h"
 #include "CompositionViewComponentView.h"
 #include "ReactNativeIsland.h"
 #include "RootComponentView.h"
 
-#ifdef USE_WINUI3
-#include <winrt/Microsoft.UI.Input.h>
-#endif
+namespace ABI::Microsoft::UI::Input {
+struct IInputCursor;
+}
+
+#include <Microsoft.UI.Input.InputCursor.Interop.h>
 
 namespace Microsoft::ReactNative {
 
@@ -328,6 +331,11 @@ CompositionEventHandler::~CompositionEventHandler() {
     }
   }
 #endif
+
+  if (m_hcursorOwned) {
+    ::DestroyCursor(m_hcursor);
+    m_hcursor = nullptr;
+  }
 }
 
 facebook::react::SurfaceId CompositionEventHandler::SurfaceId() const noexcept {
@@ -507,6 +515,10 @@ int64_t CompositionEventHandler::SendMessage(HWND hwnd, uint32_t msg, uint64_t w
       }
       break;
     }
+    case WM_SETCURSOR: {
+      UpdateCursor();
+      return 1;
+    }
   }
 
   return 0;
@@ -753,6 +765,151 @@ void CompositionEventHandler::HandleIncomingPointerEvent(
     hoveredViews.emplace_back(ReactTaggedView(componentViewDescriptor.view));
   }
   m_currentlyHoveredViewsPerPointer[pointerId] = std::move(hoveredViews);
+
+  if (IsMousePointerEvent(event)) {
+    UpdateCursor();
+  }
+}
+
+void CompositionEventHandler::UpdateCursor() noexcept {
+  for (auto &taggedView : m_currentlyHoveredViewsPerPointer[MOUSE_POINTER_ID]) {
+    if (auto view = taggedView.view()) {
+      if (auto viewcomponent =
+              view.try_as<winrt::Microsoft::ReactNative::Composition::implementation::ComponentView>()) {
+        auto cursorInfo = viewcomponent->cursor();
+        if (cursorInfo.first != facebook::react::Cursor::Auto || cursorInfo.second != nullptr) {
+          SetCursor(cursorInfo.first, cursorInfo.second);
+          return;
+        }
+      }
+    }
+  }
+
+  SetCursor(facebook::react::Cursor::Auto, nullptr);
+}
+
+void CompositionEventHandler::SetCursor(facebook::react::Cursor cursor, HCURSOR hcur) noexcept {
+  if (m_currentCursor == cursor && m_hcursor == hcur)
+    return;
+
+  if (auto strongRootView = m_wkRootView.get()) {
+    if (auto island = strongRootView.Island()) {
+      auto pointerSource = winrt::Microsoft::UI::Input::InputPointerSource::GetForIsland(island);
+
+      if (!hcur) {
+        winrt::Windows::UI::Core::CoreCursorType type = winrt::Windows::UI::Core::CoreCursorType::Arrow;
+        switch (cursor) {
+          case facebook::react::Cursor::Pointer:
+            type = winrt::Windows::UI::Core::CoreCursorType::Hand;
+            break;
+          case facebook::react::Cursor::Help:
+            type = winrt::Windows::UI::Core::CoreCursorType::Help;
+            break;
+          case facebook::react::Cursor::NotAllowed:
+            type = winrt::Windows::UI::Core::CoreCursorType::UniversalNo;
+            break;
+          case facebook::react::Cursor::Wait:
+            type = winrt::Windows::UI::Core::CoreCursorType::Wait;
+            break;
+          case facebook::react::Cursor::Move:
+            type = winrt::Windows::UI::Core::CoreCursorType::SizeAll;
+            break;
+          case facebook::react::Cursor::NESWResize:
+            type = winrt::Windows::UI::Core::CoreCursorType::SizeNortheastSouthwest;
+            break;
+          case facebook::react::Cursor::NSResize:
+            type = winrt::Windows::UI::Core::CoreCursorType::SizeNorthSouth;
+            break;
+          case facebook::react::Cursor::NWSEResize:
+            type = winrt::Windows::UI::Core::CoreCursorType::SizeNorthwestSoutheast;
+            break;
+          case facebook::react::Cursor::EWResize:
+            type = winrt::Windows::UI::Core::CoreCursorType::SizeWestEast;
+            break;
+          case facebook::react::Cursor::Text:
+            type = winrt::Windows::UI::Core::CoreCursorType::IBeam;
+            break;
+          case facebook::react::Cursor::Progress:
+            type = winrt::Windows::UI::Core::CoreCursorType::Wait; // IDC_APPSTARTING not mapped to CoreCursor?
+            break;
+          case facebook::react::Cursor::Crosshair:
+            type = winrt::Windows::UI::Core::CoreCursorType::Cross;
+            break;
+          default:
+            break;
+        }
+
+        m_inputCursor = winrt::Microsoft::UI::Input::InputCursor::CreateFromCoreCursor(
+            winrt::Windows::UI::Core::CoreCursor(type, 0));
+        m_hcursor = hcur;
+      } else {
+        auto cursorInterop = winrt::get_activation_factory<
+            winrt::Microsoft::UI::Input::InputCursor,
+            ABI::Microsoft::UI::Input::IInputCursorStaticsInterop>();
+        winrt::com_ptr<IUnknown> spunk;
+        winrt::check_hresult(cursorInterop->CreateFromHCursor(
+            hcur, reinterpret_cast<ABI::Microsoft::UI::Input::IInputCursor **>(spunk.put_void())));
+        m_hcursor = hcur;
+        m_inputCursor = spunk.as<winrt::Microsoft::UI::Input::InputCursor>();
+      }
+
+      pointerSource.Cursor(m_inputCursor);
+    } else {
+      if (m_hcursorOwned) {
+        ::DestroyCursor(m_hcursor);
+        m_hcursorOwned = false;
+      }
+      if (hcur == nullptr) {
+        const WCHAR *idc = IDC_ARROW;
+        switch (cursor) {
+          case facebook::react::Cursor::Pointer:
+            idc = IDC_HAND;
+            break;
+          case facebook::react::Cursor::Help:
+            idc = IDC_HELP;
+            break;
+          case facebook::react::Cursor::NotAllowed:
+            idc = IDC_NO;
+            break;
+          case facebook::react::Cursor::Wait:
+            idc = IDC_WAIT;
+            break;
+          case facebook::react::Cursor::Move:
+            idc = IDC_SIZEALL;
+            break;
+          case facebook::react::Cursor::NESWResize:
+            idc = IDC_SIZENESW;
+            break;
+          case facebook::react::Cursor::NSResize:
+            idc = IDC_SIZENS;
+            break;
+          case facebook::react::Cursor::NWSEResize:
+            idc = IDC_SIZENWSE;
+            break;
+          case facebook::react::Cursor::EWResize:
+            idc = IDC_SIZEWE;
+            break;
+          case facebook::react::Cursor::Text:
+            idc = IDC_IBEAM;
+            break;
+          case facebook::react::Cursor::Progress:
+            idc = IDC_APPSTARTING;
+            break;
+          case facebook::react::Cursor::Crosshair:
+            idc = IDC_CROSS;
+            break;
+          default:
+            break;
+        }
+        m_hcursor = ::LoadCursor(nullptr, idc);
+        m_hcursorOwned = true;
+      } else {
+        m_hcursor = hcur;
+      }
+      ::SetCursor(m_hcursor);
+    }
+    m_currentCursor = cursor;
+  }
 }
 
 void CompositionEventHandler::UpdateActiveTouch(
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionEventHandler.h b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionEventHandler.h
@@ -147,6 +147,9 @@ class CompositionEventHandler : public std::enable_shared_from_this<CompositionE
   static void
   UpdateActiveTouch(ActiveTouch &activeTouch, facebook::react::Point ptScaled, facebook::react::Point ptLocal) noexcept;
 
+  void UpdateCursor() noexcept;
+  void SetCursor(facebook::react::Cursor cursor, HCURSOR hcur) noexcept;
+
   std::map<PointerId, ActiveTouch> m_activeTouches; // iOS is map of touch event args to ActiveTouch..?
   PointerId m_touchId = 0;
   int m_fragmentTag = -1;
@@ -157,6 +160,10 @@ class CompositionEventHandler : public std::enable_shared_from_this<CompositionE
 
   facebook::react::Tag m_pointerCapturingComponentTag{-1}; // Component that has captured input
   std::vector<PointerId> m_capturedPointers;
+  HCURSOR m_hcursor{nullptr};
+  bool m_hcursorOwned{false}; // If we create the cursor, so we need to destroy it
+  facebook::react::Cursor m_currentCursor{facebook::react::Cursor::Auto};
+  winrt::Microsoft::UI::Input::InputCursor m_inputCursor{nullptr};
 
 #ifdef USE_WINUI3
   winrt::event_token m_pointerPressedToken;
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp
@@ -808,6 +808,10 @@ void ComponentView::updateClippingPath(
   }
 }
 
+std::pair<facebook::react::Cursor, HCURSOR> ComponentView::cursor() const noexcept {
+  return {viewProps()->cursor, nullptr};
+}
+
 void ComponentView::indexOffsetForBorder(uint32_t &index) const noexcept {
   if (m_borderPrimitive) {
     index += m_borderPrimitive->numberOfVisuals();
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h
@@ -106,6 +106,8 @@ struct ComponentView : public ComponentViewT<
   void Toggle() noexcept override;
   virtual winrt::Microsoft::ReactNative::implementation::ClipState getClipState() noexcept;
 
+  virtual std::pair<facebook::react::Cursor, HCURSOR> cursor() const noexcept;
+
   const facebook::react::LayoutMetrics &layoutMetrics() const noexcept;
 
   virtual std::string DefaultControlType() const noexcept;
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp
@@ -236,7 +236,7 @@ struct CompTextHost : public winrt::implements<CompTextHost, ITextHost> {
 
   //@cmember Establish a new cursor shape
   void TxSetCursor(HCURSOR hcur, BOOL fText) override {
-    assert(false);
+    m_outer->m_hcursor = hcur;
   }
 
   //@cmember Converts screen coordinates of a specified point to the client coordinates
@@ -732,6 +732,9 @@ void WindowsTextInputComponentView::OnPointerMoved(
     auto hr = m_textServices->TxSendMessage(msg, static_cast<WPARAM>(wParam), static_cast<LPARAM>(lParam), &lresult);
     args.Handled(hr != S_FALSE);
   }
+
+  m_textServices->OnTxSetCursor(
+      DVASPECT_CONTENT, -1, nullptr, nullptr, nullptr, nullptr, nullptr, ptContainer.x, ptContainer.y);
 }
 
 void WindowsTextInputComponentView::OnKeyDown(
@@ -1479,6 +1482,10 @@ WindowsTextInputComponentView::createVisual() noexcept {
   return visual;
 }
 
+std::pair<facebook::react::Cursor, HCURSOR> WindowsTextInputComponentView::cursor() const noexcept {
+  return {viewProps()->cursor, m_hcursor};
+}
+
 void WindowsTextInputComponentView::onThemeChanged() noexcept {
   const auto &props = windowsTextInputProps();
   updateCursorColor(props.cursorColor, props.textAttributes.foregroundColor);
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.h b/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.h
@@ -78,6 +78,8 @@ struct WindowsTextInputComponentView
 
   winrt::Microsoft::ReactNative::Composition::Experimental::IVisual createVisual() noexcept;
 
+  std::pair<facebook::react::Cursor, HCURSOR> cursor() const noexcept override;
+
  private:
   struct DrawBlock {
     DrawBlock(WindowsTextInputComponentView &view);
@@ -133,6 +135,7 @@ struct WindowsTextInputComponentView
   bool m_multiline{false};
   DWORD m_propBitsMask{0};
   DWORD m_propBits{0};
+  HCURSOR m_hcursor{nullptr};
   std::vector<facebook::react::CompWindowsTextInputSubmitKeyEventsStruct> m_submitKeyEvents;
 };
 

Original file line number	Diff line number	Diff line change
`@@ -808,6 +808,10 @@ void ComponentView::updateClippingPath(`
`808`	`808`	`}`
`809`	`809`	`}`
`810`	`810`
	`811`	`+std::pair<facebook::react::Cursor, HCURSOR> ComponentView::cursor() const noexcept {`
	`812`	`+ return {viewProps()->cursor, nullptr};`
	`813`	`+}`
	`814`	`+`
`811`	`815`	`void ComponentView::indexOffsetForBorder(uint32_t &index) const noexcept {`
`812`	`816`	`if (m_borderPrimitive) {`
`813`	`817`	`index += m_borderPrimitive->numberOfVisuals();`
Original file line number	Diff line number	Diff line change
`@@ -236,7 +236,7 @@ struct CompTextHost : public winrt::implements<CompTextHost, ITextHost> {`
`236`	`236`
`237`	`237`	`//@cmember Establish a new cursor shape`
`238`	`238`	`void TxSetCursor(HCURSOR hcur, BOOL fText) override {`
`239`		`- assert(false);`
	`239`	`+ m_outer->m_hcursor = hcur;`
`240`	`240`	`}`
`241`	`241`
`242`	`242`	`//@cmember Converts screen coordinates of a specified point to the client coordinates`
`@@ -732,6 +732,9 @@ void WindowsTextInputComponentView::OnPointerMoved(`
`732`	`732`	`auto hr = m_textServices->TxSendMessage(msg, static_cast<WPARAM>(wParam), static_cast<LPARAM>(lParam), &lresult);`
`733`	`733`	`args.Handled(hr != S_FALSE);`
`734`	`734`	`}`
	`735`	`+`
	`736`	`+ m_textServices->OnTxSetCursor(`
	`737`	`+ DVASPECT_CONTENT, -1, nullptr, nullptr, nullptr, nullptr, nullptr, ptContainer.x, ptContainer.y);`
`735`	`738`	`}`
`736`	`739`
`737`	`740`	`void WindowsTextInputComponentView::OnKeyDown(`
`@@ -1479,6 +1482,10 @@ WindowsTextInputComponentView::createVisual() noexcept {`
`1479`	`1482`	`return visual;`
`1480`	`1483`	`}`
`1481`	`1484`
	`1485`	`+std::pair<facebook::react::Cursor, HCURSOR> WindowsTextInputComponentView::cursor() const noexcept {`
	`1486`	`+ return {viewProps()->cursor, m_hcursor};`
	`1487`	`+}`
	`1488`	`+`
`1482`	`1489`	`void WindowsTextInputComponentView::onThemeChanged() noexcept {`
`1483`	`1490`	`const auto &props = windowsTextInputProps();`
`1484`	`1491`	`updateCursorColor(props.cursorColor, props.textAttributes.foregroundColor);`