Skip to content

Commit f78b234

Browse files
authored
[DevTools] Recursively compute the bounding rect of the roots (#34629)
It's possible for the children to overflow the bounding rect of the root in general when they overflow in the DOM. However even when it doesn't overflow in the DOM, the bounding rect of the root can shrink while the content is suspended. In fact, it's very likely. Originally I thought we didn't need to consider this recursively because document scrolling takes absolute positioned content into account but because we're using nested overflow scrolling, we have to manually compute this.
1 parent e08f53b commit f78b234

File tree

1 file changed

+48
-21
lines changed

1 file changed

+48
-21
lines changed

packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseRects.js

Lines changed: 48 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -184,6 +184,42 @@ function getBoundingBox(rects: $ReadOnlyArray<Rect> | null): Rect {
184184
};
185185
}
186186

187+
function computeBoundingRectRecursively(
188+
store: Store,
189+
node: SuspenseNode,
190+
bounds: {
191+
minX: number,
192+
minY: number,
193+
maxX: number,
194+
maxY: number,
195+
},
196+
): void {
197+
const rects = node.rects;
198+
if (rects !== null) {
199+
for (let j = 0; j < rects.length; j++) {
200+
const rect = rects[j];
201+
if (rect.x < bounds.minX) {
202+
bounds.minX = rect.x;
203+
}
204+
if (rect.x + rect.width > bounds.maxX) {
205+
bounds.maxX = rect.x + rect.width;
206+
}
207+
if (rect.y < bounds.minY) {
208+
bounds.minY = rect.y;
209+
}
210+
if (rect.y + rect.height > bounds.maxY) {
211+
bounds.maxY = rect.y + rect.height;
212+
}
213+
}
214+
}
215+
for (let i = 0; i < node.children.length; i++) {
216+
const child = store.getSuspenseByID(node.children[i]);
217+
if (child !== null) {
218+
computeBoundingRectRecursively(store, child, bounds);
219+
}
220+
}
221+
}
222+
187223
function getDocumentBoundingRect(
188224
store: Store,
189225
roots: $ReadOnlyArray<SuspenseNode['id']>,
@@ -192,41 +228,32 @@ function getDocumentBoundingRect(
192228
return {x: 0, y: 0, width: 0, height: 0};
193229
}
194230

195-
let minX = Number.POSITIVE_INFINITY;
196-
let minY = Number.POSITIVE_INFINITY;
197-
let maxX = Number.NEGATIVE_INFINITY;
198-
let maxY = Number.NEGATIVE_INFINITY;
231+
const bounds = {
232+
minX: Number.POSITIVE_INFINITY,
233+
minY: Number.POSITIVE_INFINITY,
234+
maxX: Number.NEGATIVE_INFINITY,
235+
maxY: Number.NEGATIVE_INFINITY,
236+
};
199237

200238
for (let i = 0; i < roots.length; i++) {
201239
const rootID = roots[i];
202240
const root = store.getSuspenseByID(rootID);
203241
if (root === null) {
204242
continue;
205243
}
206-
207-
const rects = root.rects;
208-
if (rects === null) {
209-
continue;
210-
}
211-
for (let j = 0; j < rects.length; j++) {
212-
const rect = rects[j];
213-
minX = Math.min(minX, rect.x);
214-
minY = Math.min(minY, rect.y);
215-
maxX = Math.max(maxX, rect.x + rect.width);
216-
maxY = Math.max(maxY, rect.y + rect.height);
217-
}
244+
computeBoundingRectRecursively(store, root, bounds);
218245
}
219246

220-
if (minX === Number.POSITIVE_INFINITY) {
247+
if (bounds.minX === Number.POSITIVE_INFINITY) {
221248
// No rects found, return empty rect
222249
return {x: 0, y: 0, width: 0, height: 0};
223250
}
224251

225252
return {
226-
x: minX,
227-
y: minY,
228-
width: maxX - minX,
229-
height: maxY - minY,
253+
x: bounds.minX,
254+
y: bounds.minY,
255+
width: bounds.maxX - bounds.minX,
256+
height: bounds.maxY - bounds.minY,
230257
};
231258
}
232259

0 commit comments

Comments
 (0)