fix(macOS): reconcile coordinate systems for mouse events (#2403)

## Summary:

On iOS, [-hitTest:withEvent:](https://developer.apple.com/documentation/uikit/uiview/hittest(_:with:)?changes=la_3_2_7_2_8&language=objc) works with the coordinate system of the view that is being hit tested. On the other hand, on macOS, [-hitTest:](https://developer.apple.com/documentation/appkit/nsview/hittest(_:)?language=objc) works with the coordinate system of the *superview*. React Native macOS currently appears to mix these two coordinate systems, which can lead to unexpected behaviors, one of which that I have personally observed is `mouseDown:` events being delievered to a view that does not pass OS-level hit testing (e.g. the hit point is completely outside of the view that was allegedly hit, even if accounting for not clipping to bounds and any possible descendant view larger than the hit view).

To enforce consistent behavior, we will use the macOS style coordinate system for APIs that follow the macOS signature, and the iOS style coordinate system for APIs that follow the iOS signature, or are obviously React Native APIs. Several APIs were scrubbed for calls and implementation.

The following APIs shall work with superview's coordinate space:
* `- hitTest:`

The following APIs shall work with the view's (i.e. self) coordinate space:
* `RCTUIViewHitTestWithEvent`
* `- reactTagAtMouseLocationFromEvent:`
* `- reactTagAtPoint:`
* `- hitTest:withEvent:`
* `- betterHitTest:withEvent:`
* `- pointInside:withEvent:`

With the proper coordinate system usage, we no longer need new RN components inheriting from NSView to behave in special manners. Updating documentation to reflect that.

## Test Plan:

Manual Testing:

* Downstream scenario around misrouted mouseDown: events was verified fixed
* Sanity tested mouse clicks -- everything seems to work as expected

Author: nakambo

docs/WritingNativeComponents.md

@@ -12,25 +12,5 @@ internal class FixedVisualEffectView: NSVisualEffectView {
 	override var isFlipped: Bool {
 		return true
 	}
-
-	/// This subclass is necessary due to differences in hitTest()'s implementation between iOS and macOS
-	///	On iOS / UIKit, hitTest(_ point:, with event:) takes a point in the receiver's local coordinate system.
-	///	On macOS / AppKit, hitTest(_ point) takes a point in the reciever's superviews' coordinate system.
-	/// RCTView assumes the iOS implementation, so it has  an override of hitTest(_ point). Let's copy the
-	/// implementatation to our  native component, so that clicks for subviews of type RCTView are handled properly.
-	/// Another solution would be to add an RCTView subview that covers the full bounds of our native view
-	open override func hitTest(_ point: NSPoint) -> NSView? {
-		var pointForHitTest = point
-		for subview in subviews {
-			if let subview = subview as? RCTView {
-				pointForHitTest = subview.convert(point, from: superview)
-			}
-			let result = subview.hitTest(pointForHitTest)
-			if (result != nil) {
-				return result
-			}
-		}
-		return nil
-	}
 }
 ```

packages/react-native/React/Base/RCTTouchHandler.m

@@ -128,8 +128,9 @@ - (void)_recordNewTouches:(NSSet *)touches
 #else // [macOS
     // -[NSView hitTest:] takes coordinates in a view's superview coordinate system.
     // The assumption here is that a RCTUIView/RCTSurfaceView will always have a superview.
-    CGPoint touchLocation = [self.view.superview convertPoint:touch.locationInWindow fromView:nil];
-    NSView *targetView = [self.view hitTest:touchLocation];
+    NSView *superview = [[self view] superview];
+    const CGPoint touchLocationInSuperview = [superview convertPoint:touch.locationInWindow fromView:nil];
+    NSView *targetView = [self.view hitTest:touchLocationInSuperview];
     // Don't record clicks on scrollbars.
     if ([targetView isKindOfClass:[NSScroller class]]) {
       continue;
@@ -148,8 +149,7 @@ - (void)_recordNewTouches:(NSSet *)touches
     } else {
       _shouldSendMouseUpOnSystemBehalf = NO;
     }
-    touchLocation = [targetView convertPoint:touchLocation fromView:self.view.superview];
-    
+
     while (targetView) {
       BOOL isUserInteractionEnabled = NO;
       if ([((RCTUIView*)targetView) respondsToSelector:@selector(isUserInteractionEnabled)]) { // [macOS]
@@ -161,7 +161,8 @@ - (void)_recordNewTouches:(NSSet *)touches
       targetView = targetView.superview;
     }
 
-    NSNumber *reactTag = [targetView reactTagAtPoint:touchLocation];
+    const CGPoint touchLocationInSelf = [targetView convertPoint:touchLocationInSuperview fromView:self.view.superview];
+    NSNumber *reactTag = [targetView reactTagAtPoint:touchLocationInSelf];
     BOOL isUserInteractionEnabled = NO;
     if ([((RCTUIView*)targetView) respondsToSelector:@selector(isUserInteractionEnabled)]) { // [macOS]
       isUserInteractionEnabled = ((RCTUIView*)targetView).isUserInteractionEnabled; // [macOS]

packages/react-native/React/Base/RCTUIKit.h

@@ -484,7 +484,10 @@ CGPathRef UIBezierPathCreateCGPathRef(UIBezierPath *path);
 
 NS_INLINE RCTPlatformView *RCTUIViewHitTestWithEvent(RCTPlatformView *view, CGPoint point, __unused UIEvent *__nullable event)
 {
-  return [view hitTest:point];
+  // [macOS IMPORTANT -- point is in local coordinate space, but OSX expects super coordinate space for hitTest:
+  NSView *superview = [view superview];
+  NSPoint pointInSuperview = superview != nil ? [view convertPoint:point toView:superview] : point;
+  return [view hitTest:pointInSuperview];
 }
 
 BOOL RCTUIViewSetClipsToBounds(RCTPlatformView *view);

packages/react-native/React/Base/macOS/RCTUIKit.m

@@ -454,7 +454,10 @@ - (void)setTransform:(CGAffineTransform)transform
 
 - (NSView *)hitTest:(NSPoint)point
 {
-  return [self hitTest:NSPointToCGPoint(point) withEvent:nil];
+  // IMPORTANT point is passed in super coordinates by OSX, but expected to be passed in local coordinates
+  NSView *superview = [self superview];
+  NSPoint pointInSelf = superview != nil ? [self convertPoint:point fromView:superview] : point;
+  return [self hitTest:pointInSelf withEvent:nil];
 }
 
 - (BOOL)wantsUpdateLayer
@@ -505,7 +508,11 @@ - (BOOL)becomeFirstResponder
 
 - (NSView *)hitTest:(CGPoint)point withEvent:(__unused UIEvent *)event
 {
-  return self.userInteractionEnabled ? [super hitTest:NSPointFromCGPoint(point)] : nil;
+// [macOS
+  // IMPORTANT point is expected to be passed in local coordinates, but OSX expects point to be super 
+  NSView *superview = [self superview];
+  NSPoint pointInSuperview = superview != nil ? [self convertPoint:point toView:superview] : point;
+  return self.userInteractionEnabled ? [super hitTest:pointInSuperview] : nil;
 }
 
 - (BOOL)pointInside:(CGPoint)point withEvent:(__unused UIEvent *)event

packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm

@@ -680,17 +680,7 @@ - (RCTUIView *)betterHitTest:(CGPoint)point withEvent:(UIEvent *)event // [macOS
   }
 
   for (RCTUIView *subview in [self.subviews reverseObjectEnumerator]) { // [macOS]
-#if !TARGET_OS_OSX // [macOS]
     RCTUIView *hitView = [subview hitTest:[subview convertPoint:point fromView:self] withEvent:event]; // [macOS]
-#else // [macOS
-    // Native macOS views require the point to be in the super view coordinate space for hit testing.
-    CGPoint hitTestPoint = point;
-    // Fabric components use the target view coordinate space for hit testing
-    if ([subview isKindOfClass:[RCTViewComponentView class]]) {
-      hitTestPoint = [subview convertPoint:point fromView:self];
-    }
-    RCTUIView *hitView = [subview hitTest:hitTestPoint withEvent:event]; // [macOS]
-#endif // macOS]
     if (hitView) {
       return hitView;
     }
@@ -1533,4 +1523,4 @@ - (NSString *)componentViewName_DO_NOT_USE_THIS_IS_BROKEN
 Class<RCTComponentViewProtocol> RCTViewCls(void)
 {
   return RCTViewComponentView.class;
-}
+}

packages/react-native/React/Views/RCTView.m

@@ -251,18 +251,7 @@ - (RCTPlatformView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event // [macOS
     // of the hit view will return YES from -pointInside:withEvent:). See:
     //  - https://developer.apple.com/library/ios/qa/qa2013/qa1812.html
     for (RCTUIView *subview in [sortedSubviews reverseObjectEnumerator]) { // [macOS]
-      CGPoint pointForHitTest = CGPointZero; // [macOS
-#if !TARGET_OS_OSX // [macOS]
-      pointForHitTest = [subview convertPoint:point fromView:self];
-#else // [macOS
-      // Paper and Fabric components use the target view coordinate space for hit testing
-      if ([subview isKindOfClass:[RCTView class]] || [subview respondsToSelector:@selector(updateProps:oldProps:)]) {
-        pointForHitTest = [subview convertPoint:point fromView:self];
-      } else {
-        // Native macOS views require the point to be in the super view coordinate space for hit testing.
-        pointForHitTest = point;
-      }
-#endif // macOS]
+      CGPoint pointForHitTest = [subview convertPoint:point fromView:self];
       hitSubview = RCTUIViewHitTestWithEvent(subview, pointForHitTest, event); // macOS]
       if (hitSubview != nil) {
         break;
@@ -1653,4 +1642,4 @@ - (void)keyUp:(NSEvent *)event {
 }
 #endif // macOS]
 
-@end
+@end

packages/react-native/React/Views/UIView+React.m

@@ -573,10 +573,13 @@ - (NSString *)react_recursiveDescription
 
 // [macOS
 #pragma mark - Hit testing
-#if TARGET_OS_OSX  
+#if TARGET_OS_OSX
+// IMPORTANT -- point is in local coordinate space, unlike the hitTest: version from OSX which is in super's coordinate space
 - (RCTPlatformView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
 {
-  return [self hitTest:point];
+  NSView *superview = [self superview];
+  NSPoint pointInSuper = superview != nil ? [self convertPoint:point toView:superview] : point;
+  return [self hitTest:pointInSuper];
 }
 #endif // macOS]