Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: highlight nodes relatively to their containers (#41817)

Browse Source 
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/41817

Changelog: [Internal]

TSIA

Reviewed By: sammy-SC

Differential Revision: D51713088

fbshipit-source-id: b0019a13b0b3ce616ed034a8d97e9e6706ef3268
This commit is contained in:
Ruslan Lesiutin
2024-01-15 14:11:00 -08:00
committed by Facebook GitHub Bot
parent 5162b4368b
commit 78176e8ff1
1 changed files with 28 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-native/Libraries/Debugging/DebuggingOverlayRegistry.js
Vendored
+28 -2
View File
@@ -189,9 +189,22 @@ class DebuggingOverlayRegistry {
}
const {x, y, width, height} = instance.getBoundingClientRect();
const rootViewInstance = parent.rootViewRef.current;
if (rootViewInstance == null) {
continue;
}
const {x: parentX, y: parentY} =
// $FlowFixMe[prop-missing] React Native View is not a descendant of ReactNativeElement yet. We should be able to remove it once Paper is no longer supported.
rootViewInstance.getBoundingClientRect();
// DebuggingOverlay will scale to the same size as a Root view. Substract Root view position from the element position
// to calculate the element's position relatively to its parent DebuggingOverlay.
// We can't call `getBoundingClientRect` on the debuggingOverlayRef, because its a ref for the native component, which doesn't have it, hopefully yet.
traceUpdatesForParent.push({
id,
rectangle: {x, y, width, height},
rectangle: {x: x - parentX, y: y - parentY, width, height},
color: processColor(color),
});
}
@@ -274,9 +287,22 @@ class DebuggingOverlayRegistry {
const parent =
this.#findLowestParentFromRegistryForInstance(publicInstance);
if (parent) {
const rootViewInstance = parent.rootViewRef.current;
if (rootViewInstance == null) {
return;
}
const {x: parentX, y: parentY} =
// $FlowFixMe[prop-missing] React Native View is not a descendant of ReactNativeElement yet. We should be able to remove it once Paper is no longer supported.
rootViewInstance.getBoundingClientRect();
// DebuggingOverlay will scale to the same size as a Root view. Substract Root view position from the element position
// to calculate the element's position relatively to its parent DebuggingOverlay.
// We can't call `getBoundingClientRect` on the debuggingOverlayRef, because its a ref for the native component, which doesn't have it, hopefully yet.
parent.debuggingOverlayRef.current?.highlightElements([
{x, y, width, height},
{x: x - parentX, y: y - parentY, width, height},
]);
}
}