Skip to content

Commit 875b064

Browse files
jackpopejackpope
authored
Add text node support to FragmentInstance operations (facebook#35630)
This PR adds text node support to FragmentInstance operations, allowing fragment refs to properly handle fragments that contain text nodes (either mixed with elements or text-only). Not currently adding/removing new text nodes as we don't need to track them for events or observers in DOM. Will follow up on this and with Fabric support. ## Support through parent element - `dispatchEvent` - `compareDocumentPosition` - `getRootNode` ## Support through Range API - `getClientRects`: Uses Range to calculate bounding rects for text nodes - `scrollIntoView`: Uses Range to scroll to text node positions directly ## No support - `focus`/`focusLast`/`blur`: Noop for text-only fragments - `observeUsing`: Warns for text-only fragments in DEV - `addEventListener`/`removeEventListener`: Ignores text nodes, but still works on Fragment level through `dispatchEvent`
1 parent d4d099f commit 875b064

17 files changed

+777
-76
lines changed

‎fixtures/dom/src/components/fixtures/fragment-refs/GetClientRectsCase.js‎

Lines changed: 26 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,10 @@
11
import TestCase from '../../TestCase';
22
import Fixture from '../../Fixture';
3+
import PrintRectsFragmentContainer from './PrintRectsFragmentContainer';
34

45
const React = window.React;
5-
const {Fragment, useRef, useState} = React;
66

77
export default function GetClientRectsCase() {
8-
const fragmentRef = useRef(null);
9-
const [rects, setRects] = useState([]);
10-
const getRects = () => {
11-
const rects = fragmentRef.current.getClientRects();
12-
setRects(rects);
13-
};
14-
158
return (
169
<TestCase title="getClientRects">
1710
<TestCase.Steps>
@@ -26,74 +19,35 @@ export default function GetClientRectsCase() {
2619
</TestCase.ExpectedResult>
2720
<Fixture>
2821
<Fixture.Controls>
29-
<button onClick={getRects}>Print Rects</button>
30-
<div style={{display: 'flex'}}>
31-
<div
22+
<PrintRectsFragmentContainer>
23+
<span
3224
style={{
33-
position: 'relative',
34-
width: '30vw',
35-
height: '30vh',
25+
width: '300px',
26+
height: '250px',
27+
backgroundColor: 'lightblue',
28+
fontSize: 20,
3629
border: '1px solid black',
30+
marginBottom: '10px',
3731
}}>
38-
{rects.map(({x, y, width, height}, index) => {
39-
const scale = 0.3;
40-
41-
return (
42-
<div
43-
key={index}
44-
style={{
45-
position: 'absolute',
46-
top: y * scale,
47-
left: x * scale,
48-
width: width * scale,
49-
height: height * scale,
50-
border: '1px solid red',
51-
boxSizing: 'border-box',
52-
}}></div>
53-
);
54-
})}
55-
</div>
56-
<div>
57-
{rects.map(({x, y, width, height}, index) => {
58-
return (
59-
<div>
60-
{index} :: {`{`}x: {x}, y: {y}, width: {width}, height:{' '}
61-
{height}
62-
{`}`}
63-
</div>
64-
);
65-
})}
66-
</div>
67-
</div>
32+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
33+
eiusmod tempor incididunt ut labore et dolore magna aliqua.
34+
</span>
35+
<div
36+
style={{
37+
width: '150px',
38+
height: '100px',
39+
backgroundColor: 'lightgreen',
40+
border: '1px solid black',
41+
}}></div>
42+
<div
43+
style={{
44+
width: '500px',
45+
height: '50px',
46+
backgroundColor: 'lightpink',
47+
border: '1px solid black',
48+
}}></div>
49+
</PrintRectsFragmentContainer>
6850
</Fixture.Controls>
69-
<Fragment ref={fragmentRef}>
70-
<span
71-
style={{
72-
width: '300px',
73-
height: '250px',
74-
backgroundColor: 'lightblue',
75-
fontSize: 20,
76-
border: '1px solid black',
77-
marginBottom: '10px',
78-
}}>
79-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
80-
eiusmod tempor incididunt ut labore et dolore magna aliqua.
81-
</span>
82-
<div
83-
style={{
84-
width: '150px',
85-
height: '100px',
86-
backgroundColor: 'lightgreen',
87-
border: '1px solid black',
88-
}}></div>
89-
<div
90-
style={{
91-
width: '500px',
92-
height: '50px',
93-
backgroundColor: 'lightpink',
94-
border: '1px solid black',
95-
}}></div>
96-
</Fragment>
9751
</Fixture>
9852
</TestCase>
9953
);

‎fixtures/dom/src/components/fixtures/fragment-refs/PrintRectsFragmentContainer.js‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
const React = window.React;
2+
const {Fragment, useRef, useState} = React;
3+
4+
const colors = [
5+
'#e74c3c',
6+
'#3498db',
7+
'#2ecc71',
8+
'#9b59b6',
9+
'#f39c12',
10+
'#1abc9c',
11+
];
12+
13+
export default function PrintRectsFragmentContainer({children}) {
14+
const fragmentRef = useRef(null);
15+
const [rects, setRects] = useState([]);
16+
17+
const getRects = () => {
18+
const rectsResult = fragmentRef.current.getClientRects();
19+
setRects(Array.from(rectsResult));
20+
};
21+
22+
const getColor = index => colors[index % colors.length];
23+
24+
return (
25+
<Fragment>
26+
<div style={{marginBottom: '16px'}}>
27+
<button
28+
onClick={getRects}
29+
style={{
30+
padding: '8px 16px',
31+
fontSize: '14px',
32+
fontWeight: 'bold',
33+
cursor: 'pointer',
34+
}}>
35+
Print Rects
36+
</button>
37+
{rects.length > 0 && (
38+
<span style={{marginLeft: '12px', color: '#666'}}>
39+
Found {rects.length} rect{rects.length !== 1 ? 's' : ''}
40+
</span>
41+
)}
42+
</div>
43+
44+
<div style={{display: 'flex', gap: '20px', marginBottom: '16px'}}>
45+
<div
46+
style={{
47+
position: 'relative',
48+
width: '30vw',
49+
height: '30vh',
50+
border: '1px solid #ccc',
51+
backgroundColor: '#fafafa',
52+
borderRadius: '4px',
53+
overflow: 'hidden',
54+
}}>
55+
{rects.length === 0 && (
56+
<div
57+
style={{
58+
position: 'absolute',
59+
top: '50%',
60+
left: '50%',
61+
transform: 'translate(-50%, -50%)',
62+
color: '#999',
63+
fontSize: '14px',
64+
}}>
65+
Click button to visualize rects
66+
</div>
67+
)}
68+
{rects.map(({x, y, width, height}, index) => {
69+
const scale = 0.3;
70+
const color = getColor(index);
71+
72+
return (
73+
<div
74+
key={index}
75+
style={{
76+
position: 'absolute',
77+
top: y * scale,
78+
left: x * scale,
79+
width: width * scale,
80+
height: height * scale,
81+
border: `2px solid ${color}`,
82+
backgroundColor: `${color}22`,
83+
boxSizing: 'border-box',
84+
borderRadius: '2px',
85+
}}
86+
/>
87+
);
88+
})}
89+
</div>
90+
91+
<div style={{flex: 1, fontSize: '13px', fontFamily: 'monospace'}}>
92+
{rects.map(({x, y, width, height}, index) => {
93+
const color = getColor(index);
94+
return (
95+
<div
96+
key={index}
97+
style={{
98+
padding: '6px 10px',
99+
marginBottom: '4px',
100+
backgroundColor: '#f5f5f5',
101+
borderLeft: `3px solid ${color}`,
102+
borderRadius: '2px',
103+
}}>
104+
<span style={{color: '#666'}}>#{index}</span>{' '}
105+
<span style={{color: '#333'}}>
106+
x: {Math.round(x)}, y: {Math.round(y)}, w: {Math.round(width)}
107+
, h: {Math.round(height)}
108+
</span>
109+
</div>
110+
);
111+
})}
112+
</div>
113+
</div>
114+
115+
<div
116+
style={{
117+
padding: '12px',
118+
border: '1px dashed #ccc',
119+
borderRadius: '4px',
120+
backgroundColor: '#fff',
121+
}}>
122+
<Fragment ref={fragmentRef}>{children}</Fragment>
123+
</div>
124+
</Fragment>
125+
);
126+
}

0 commit comments

Comments
 (0)