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

Author: Saadnajmi

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

@@ -562,10 +562,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]