refactor: use same rectangle spec for DebuggingOverlay native commands

Summary: Changelog: [Internal] Differential Revision: https://internalfb.com/D51708055 fbshipit-source-id: 8cf3e4a1cd39c45c7350a9a06b9eab70909559b5
hoxyq · Jan 15, 2024 · 6974049 · 6974049
1 parent 8b690da
commit 6974049
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 11 deletions.
diff --git a/packages/react-native/Libraries/Debugging/DebuggingOverlayNativeComponent.js b/packages/react-native/Libraries/Debugging/DebuggingOverlayNativeComponent.js
@@ -21,7 +21,7 @@ type NativeProps = $ReadOnly<{|
 |}>;
 export type DebuggingOverlayNativeComponentType = HostComponent<NativeProps>;
 export type Overlay = {
-  rect: {left: number, top: number, width: number, height: number},
+  rect: ElementRectangle,
   color: ?ProcessedColorValue,
 };
 

diff --git a/packages/react-native/Libraries/Debugging/DebuggingOverlayRegistry.js b/packages/react-native/Libraries/Debugging/DebuggingOverlayRegistry.js
@@ -111,7 +111,7 @@ class DebuggingOverlayRegistry {
         // TODO(T171095283): We should refactor this to use `getBoundingClientRect` when Paper is no longer supported.
         publicInstance.measure((x, y, width, height, left, top) => {
           resolve({
-            rect: {left, top, width, height},
+            rect: {x: left, y: top, width, height},
             color: processColor(color),
           });
         });

diff --git a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap
@@ -4770,7 +4770,7 @@ exports[`public API should not change unintentionally Libraries/Debugging/Debugg
 |}>;
 export type DebuggingOverlayNativeComponentType = HostComponent<NativeProps>;
 export type Overlay = {
-  rect: { left: number, top: number, width: number, height: number },
+  rect: ElementRectangle,
   color: ?ProcessedColorValue,
 };
 export type ElementRectangle = {

diff --git a/packages/react-native/React/Views/RCTDebuggingOverlay.m b/packages/react-native/React/Views/RCTDebuggingOverlay.m
@@ -38,12 +38,7 @@ - (void)draw:(NSString *)serializedNodes
     NSDictionary *nodeRectangle = node[@"rect"];
     NSNumber *nodeColor = node[@"color"];
 
-    NSNumber *x = nodeRectangle[@"left"];
-    NSNumber *y = nodeRectangle[@"top"];
-    NSNumber *width = nodeRectangle[@"width"];
-    NSNumber *height = nodeRectangle[@"height"];
-
-    CGRect rect = CGRectMake(x.doubleValue, y.doubleValue, width.doubleValue, height.doubleValue);
+    CGRect rect = [RCTConvert CGRect:nodeRectangle];
 
     UIView *box = [[UIView alloc] initWithFrame:rect];
     box.backgroundColor = [UIColor clearColor];

diff --git a/...roid/src/main/java/com/facebook/react/views/debuggingoverlay/DebuggingOverlayManager.java b/...roid/src/main/java/com/facebook/react/views/debuggingoverlay/DebuggingOverlayManager.java
@@ -50,8 +50,8 @@ public void receiveCommand(
           for (int i = 0; i < overlaysArr.length(); i++) {
             JSONObject overlay = overlaysArr.getJSONObject(i);
             JSONObject rectObj = overlay.getJSONObject("rect");
-            float left = (float) rectObj.getDouble("left");
-            float top = (float) rectObj.getDouble("top");
+            float left = (float) rectObj.getDouble("x");
+            float top = (float) rectObj.getDouble("y");
             float right = (float) (left + rectObj.getDouble("width"));
             float bottom = (float) (top + rectObj.getDouble("height"));
             RectF rect = new RectF(left, top, right, bottom);