Add DOM example for getBoundingClientRect and getClientRects #55282
+1,063
−2
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Summary: When `getBoundingClientRect()` is called on a nested `<Text>` component (TextShadowNode), return the parent paragraph's bounding rect instead of empty/invalid metrics. TextShadowNode is a virtual node that doesn't have its own layout metrics. This matches web behavior where inline elements return their container's rect. Use `getClientRects()` (added in a follow-up diff) to get the individual fragment rects for text that spans multiple lines. Differential Revision: D91087220
Summary: Adds Android-specific implementation for measuring bounding rectangles of text fragments that belong to a specific React tag. This enables getting the visual boundaries of nested `<Text>` components within a paragraph. The implementation provides two methods: 1. `getFragmentRectsForReactTag` - Uses PreparedLayout for efficient measurement when the enablePreparedTextLayout feature flag is enabled 2. `getFragmentRectsFromAttributedString` - Fallback that creates a layout on-demand when PreparedLayout is not available Key features: - Handles multi-line text fragments by returning a rect for each line - Correctly handles RTL text direction - Converts coordinates between pixels and DIPs These methods are used by the DOM getClientRects() API to provide accurate text fragment boundaries for accessibility and layout inspection. Differential Revision: D91087221
Summary: Adds the core DOM implementation for `getClientRects()` which returns the bounding rectangles of all text fragments belonging to a TextShadowNode within its parent ParagraphShadowNode. This is useful for: - Getting the visual boundaries of nested `<Text>` components within a paragraph - Accessibility tools that need per-line text boundaries - Layout inspection for text that spans multiple lines On Android, the implementation uses the platform's TextLayoutManager to get accurate fragment rects. On other platforms, a simplified fallback returns the paragraph's frame for each fragment. Differential Revision: D91087222
Summary: Adds the JavaScript API `getClientRects()` to the Element interface, matching the Web DOM API (https://developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects). For most elements, this returns an array with a single rect matching `getBoundingClientRect()`. For text elements (TextShadowNode), this returns an array of rects representing each line/fragment of the text. This is useful for getting the visual boundaries of nested `<Text>` components within a text paragraph, where text may span multiple lines. Changes: - ReadOnlyElement.js: Add getClientRects() method - NativeDOM.js: Add getClientRects spec - NativeDOM.cpp/h: Add native module binding that calls dom::getClientRects Differential Revision: D91087227
Summary: Adds an interactive example to RNTester demonstrating the DOM APIs: - getBoundingClientRect() for View and Text elements - getClientRects() for nested Text components spanning multiple lines The example includes visual overlays showing the bounding rectangles returned by getClientRects(), making it easy to verify the API behavior. Differential Revision: D91087224
meta-cla
bot
added
the
CLA Signed
|
@andrewdacenko has exported this pull request. If you are a Meta employee, you can view the originating Diff in D91087224. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary:
Adds an interactive example to RNTester demonstrating the DOM APIs:
The example includes visual overlays showing the bounding rectangles returned
by getClientRects(), making it easy to verify the API behavior.
Differential Revision: D91087224