[DevTools] Include some sub-pixel precision in rects (#34873)
Currently the sub-pixel precision is lost which can lead to things not lining up properly and being slightly off or overlapping. We need some sub-pixel precision. Ideally we'd just keep the floating point as is. I'm not sure why the operations is limited to integers. We don't send it as a typed array anyway it seems which would ideally be more optimal. Even if we did, we haven't defined a precision for the protocol. Is it 32bit integer? 64bit? If it's 64bit we can fit a float anyway. Ideally it would be more variable precision like just pushing into a typed array directly with the option to write whatever precision we want.
Sebastian Markbåge committed
Oct 16, 2025 at 10:50 UTC
03ba0c76e15967fe0ac0413e9a8a55eb55f9e55f
2 files changed
+16
-16
packages/react-devtools-shared/src/backend/fiber/renderer.js
+8
-8
@@ -2693,10 +2693,10 @@ export function attach(
2693
pushOperation(rects.length);
2694
for (let i = 0; i < rects.length; ++i) {
2695
const rect = rects[i];
2696
- pushOperation(Math.round(rect.x));
2697
- pushOperation(Math.round(rect.y));
2698
- pushOperation(Math.round(rect.width));
2699
- pushOperation(Math.round(rect.height));
2696
+ pushOperation(Math.round(rect.x * 1000));
2697
+ pushOperation(Math.round(rect.y * 1000));
2698
+ pushOperation(Math.round(rect.width * 1000));
2699
+ pushOperation(Math.round(rect.height * 1000));
2700
}
2701
}
2702
}
@@ -2765,10 +2765,10 @@ export function attach(
2765
pushOperation(rects.length);
2766
for (let i = 0; i < rects.length; ++i) {
2767
const rect = rects[i];
2768
- pushOperation(Math.round(rect.x));
2769
- pushOperation(Math.round(rect.y));
2770
- pushOperation(Math.round(rect.width));
2771
- pushOperation(Math.round(rect.height));
2768
+ pushOperation(Math.round(rect.x * 1000));
2769
+ pushOperation(Math.round(rect.y * 1000));
2770
+ pushOperation(Math.round(rect.width * 1000));
2771
+ pushOperation(Math.round(rect.height * 1000));
2772
}
2773
}
2774
}
packages/react-devtools-shared/src/devtools/store.js
+8
-8
@@ -1587,10 +1587,10 @@ export default class Store extends EventEmitter<{
1587
} else {
1588
rects = [];
1589
for (let rectIndex = 0; rectIndex < numRects; rectIndex++) {
1590
- const x = operations[i + 0];
1591
- const y = operations[i + 1];
1592
- const width = operations[i + 2];
1593
- const height = operations[i + 3];
1590
+ const x = operations[i + 0] / 1000;
1591
+ const y = operations[i + 1] / 1000;
1592
+ const width = operations[i + 2] / 1000;
1593
+ const height = operations[i + 3] / 1000;
1594
rects.push({x, y, width, height});
1595
i += 4;
1596
}
@@ -1763,10 +1763,10 @@ export default class Store extends EventEmitter<{
1763
} else {
1764
nextRects = [];
1765
for (let rectIndex = 0; rectIndex < numRects; rectIndex++) {
1766
- const x = operations[i + 0];
1767
- const y = operations[i + 1];
1768
- const width = operations[i + 2];
1769
- const height = operations[i + 3];
1766
+ const x = operations[i + 0] / 1000;
1767
+ const y = operations[i + 1] / 1000;
1768
+ const width = operations[i + 2] / 1000;
1769
+ const height = operations[i + 3] / 1000;
1770
1771
nextRects.push({x, y, width, height});
1772