Add width/height properties to PointerEvent object

Summary: Changelog: [iOS][Internal] Add width/height properties to the PointerEvent object

Reviewed By: kacieb

Differential Revision: D37116854

fbshipit-source-id: 686266d480bb2ee1d2b6696d80ad42865fa2111c

Author: vincentriemer

React/Fabric/RCTSurfaceTouchHandler.mm

@@ -63,6 +63,11 @@ typedef NS_ENUM(NSInteger, RCTTouchEventType) {
    */
   UITouchType touchType;
 
+  /*
+   * The radius (in points) of the touch.
+   */
+  CGFloat majorRadius;
+
   /*
    * A component view on which the touch was begun.
    */
@@ -105,6 +110,7 @@ static void UpdateActiveTouchWithUITouch(
   }
 
   activeTouch.touchType = uiTouch.type;
+  activeTouch.majorRadius = uiTouch.majorRadius;
 }
 
 static ActiveTouch CreateTouchWithUITouch(UITouch *uiTouch, UIView *rootComponentView, CGPoint rootViewOriginOffset)
@@ -180,6 +186,17 @@ static PointerEvent CreatePointerEventFromActiveTouch(ActiveTouch activeTouch)
   event.pressure = touch.force;
   event.pointerType = PointerTypeCStringFromUITouchType(activeTouch.touchType);
   event.clientPoint = touch.pagePoint;
+
+  CGFloat pointerSize = activeTouch.majorRadius * 2.0;
+  if (@available(iOS 13.4, *)) {
+    if (activeTouch.touchType == UITouchTypeIndirectPointer) {
+      // mouse type pointers should always report a size of 1
+      pointerSize = 1.0;
+    }
+  }
+  event.width = pointerSize;
+  event.height = pointerSize;
+
   return event;
 }
 
@@ -194,6 +211,8 @@ static PointerEvent CreatePointerEventFromActiveTouch(ActiveTouch activeTouch)
   event.pressure = 0.0;
   event.pointerType = "mouse";
   event.clientPoint = RCTPointFromCGPoint(clientLocation);
+  event.width = 1.0;
+  event.height = 1.0;
   return event;
 }
 

ReactCommon/react/renderer/components/view/PointerEvent.cpp

@@ -24,6 +24,8 @@ std::vector<DebugStringConvertibleObject> getDebugProps(
       {"pressure", getDebugDescription(pointerEvent.pressure, options)},
       {"pointerType", getDebugDescription(pointerEvent.pointerType, options)},
       {"clientPoint", getDebugDescription(pointerEvent.clientPoint, options)},
+      {"width", getDebugDescription(pointerEvent.width, options)},
+      {"height", getDebugDescription(pointerEvent.height, options)},
   };
 }
 

ReactCommon/react/renderer/components/view/PointerEvent.h

@@ -34,6 +34,16 @@ struct PointerEvent {
    * opposed to the coordinate within the page).
    */
   Point clientPoint;
+  /*
+   * The width (magnitude on the X axis), in CSS pixels, of the contact geometry
+   * of the pointer
+   */
+  Float width;
+  /*
+   * The height (magnitude on the y axis), in CSS pixels, of the contact
+   * geometry of the pointer
+   */
+  Float height;
 };
 
 #if RN_DEBUG_STRING_CONVERTIBLE

ReactCommon/react/renderer/components/view/TouchEventEmitter.cpp

@@ -68,6 +68,8 @@ static jsi::Value pointerEventPayload(
   object.setProperty(runtime, "pointerType", event.pointerType);
   object.setProperty(runtime, "clientX", event.clientPoint.x);
   object.setProperty(runtime, "clientY", event.clientPoint.y);
+  object.setProperty(runtime, "width", event.width);
+  object.setProperty(runtime, "height", event.height);
   return object;
 }