Commit 875b064

Browse files
jackpopejackpope
authored
Add text node support to FragmentInstance operations (#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

Lines changed: 777 additions & 76 deletions

‎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
importTestCasefrom'../../TestCase';
22
importFixturefrom'../../Fixture';
3+
importPrintRectsFragmentContainerfrom'./PrintRectsFragmentContainer';
34

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

77
exportdefaultfunctionGetClientRectsCase(){
8-
constfragmentRef=useRef(null);
9-
const[rects,setRects]=useState([]);
10-
constgetRects=()=>{
11-
constrects=fragmentRef.current.getClientRects();
12-
setRects(rects);
13-
};
14-
158
return(
169
<TestCasetitle="getClientRects">
1710
<TestCase.Steps>
@@ -26,74 +19,35 @@ export default function GetClientRectsCase() {
2619
</TestCase.ExpectedResult>
2720
<Fixture>
2821
<Fixture.Controls>
29-
<buttononClick={getRects}>Print Rects</button>
30-
<divstyle={{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-
constscale=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-
<Fragmentref={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+
constReact=window.React;
2+
const{Fragment, useRef, useState}=React;
3+
4+
constcolors=[
5+
'#e74c3c',
6+
'#3498db',
7+
'#2ecc71',
8+
'#9b59b6',
9+
'#f39c12',
10+
'#1abc9c',
11+
];
12+
13+
exportdefaultfunctionPrintRectsFragmentContainer({children}){
14+
constfragmentRef=useRef(null);
15+
const[rects,setRects]=useState([]);
16+
17+
constgetRects=()=>{
18+
constrectsResult=fragmentRef.current.getClientRects();
19+
setRects(Array.from(rectsResult));
20+
};
21+
22+
constgetColor=index=>colors[index%colors.length];
23+
24+
return(
25+
<Fragment>
26+
<divstyle={{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+
<spanstyle={{marginLeft: '12px',color: '#666'}}>
39+
Found {rects.length} rect{rects.length!==1 ? 's' : ''}
40+
</span>
41+
)}
42+
</div>
43+
44+
<divstyle={{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+
constscale=0.3;
70+
constcolor=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+
<divstyle={{flex: 1,fontSize: '13px',fontFamily: 'monospace'}}>
92+
{rects.map(({x, y, width, height},index)=>{
93+
constcolor=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+
<spanstyle={{color: '#666'}}>#{index}</span>{' '}
105+
<spanstyle={{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+
<Fragmentref={fragmentRef}>{children}</Fragment>
123+
</div>
124+
</Fragment>
125+
);
126+
}

0 commit comments

Comments
 (0)
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
Commit 875b064
Browse files
jackpopejackpope
authored
Add text node support to FragmentInstance operations (#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
Lines changed: 777 additions & 76 deletions
‎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
importTestCasefrom'../../TestCase';
22
importFixturefrom'../../Fixture';
3+
importPrintRectsFragmentContainerfrom'./PrintRectsFragmentContainer';
34

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

77
exportdefaultfunctionGetClientRectsCase(){
8-
constfragmentRef=useRef(null);
9-
const[rects,setRects]=useState([]);
10-
constgetRects=()=>{
11-
constrects=fragmentRef.current.getClientRects();
12-
setRects(rects);
13-
};
14-
158
return(
169
<TestCasetitle="getClientRects">
1710
<TestCase.Steps>
@@ -26,74 +19,35 @@ export default function GetClientRectsCase() {
2619
</TestCase.ExpectedResult>
2720
<Fixture>
2821
<Fixture.Controls>
29-
<buttononClick={getRects}>Print Rects</button>
30-
<divstyle={{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-
constscale=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-
<Fragmentref={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+
constReact=window.React;
2+
const{Fragment, useRef, useState}=React;
3+
4+
constcolors=[
5+
'#e74c3c',
6+
'#3498db',
7+
'#2ecc71',
8+
'#9b59b6',
9+
'#f39c12',
10+
'#1abc9c',
11+
];
12+
13+
exportdefaultfunctionPrintRectsFragmentContainer({children}){
14+
constfragmentRef=useRef(null);
15+
const[rects,setRects]=useState([]);
16+
17+
constgetRects=()=>{
18+
constrectsResult=fragmentRef.current.getClientRects();
19+
setRects(Array.from(rectsResult));
20+
};
21+
22+
constgetColor=index=>colors[index%colors.length];
23+
24+
return(
25+
<Fragment>
26+
<divstyle={{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+
<spanstyle={{marginLeft: '12px',color: '#666'}}>
39+
 Found {rects.length} rect{rects.length!==1 ? 's' : ''}
40+
</span>
41+
)}
42+
</div>
43+
44+
<divstyle={{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+
constscale=0.3;
70+
constcolor=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+
<divstyle={{flex: 1,fontSize: '13px',fontFamily: 'monospace'}}>
92+
{rects.map(({x, y, width, height},index)=>{
93+
constcolor=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+
<spanstyle={{color: '#666'}}>#{index}</span>{' '}
105+
<spanstyle={{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+
<Fragmentref={fragmentRef}>{children}</Fragment>
123+
</div>
124+
</Fragment>
125+
);
126+
}
0 commit comments
Comments
 (0)

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Commit 875b064
Browse files
jackpopejackpope
authored
Add text node support to FragmentInstance operations (#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
Lines changed: 777 additions & 76 deletions
‎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
importTestCasefrom'../../TestCase';
22
importFixturefrom'../../Fixture';
3+
importPrintRectsFragmentContainerfrom'./PrintRectsFragmentContainer';
34

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

77
exportdefaultfunctionGetClientRectsCase(){
8-
constfragmentRef=useRef(null);
9-
const[rects,setRects]=useState([]);
10-
constgetRects=()=>{
11-
constrects=fragmentRef.current.getClientRects();
12-
setRects(rects);
13-
};
14-
158
return(
169
<TestCasetitle="getClientRects">
1710
<TestCase.Steps>
@@ -26,74 +19,35 @@ export default function GetClientRectsCase() {
2619
</TestCase.ExpectedResult>
2720
<Fixture>
2821
<Fixture.Controls>
29-
<buttononClick={getRects}>Print Rects</button>
30-
<divstyle={{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-
constscale=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-
<Fragmentref={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+
constReact=window.React;
2+
const{Fragment, useRef, useState}=React;
3+
4+
constcolors=[
5+
'#e74c3c',
6+
'#3498db',
7+
'#2ecc71',
8+
'#9b59b6',
9+
'#f39c12',
10+
'#1abc9c',
11+
];
12+
13+
exportdefaultfunctionPrintRectsFragmentContainer({children}){
14+
constfragmentRef=useRef(null);
15+
const[rects,setRects]=useState([]);
16+
17+
constgetRects=()=>{
18+
constrectsResult=fragmentRef.current.getClientRects();
19+
setRects(Array.from(rectsResult));
20+
};
21+
22+
constgetColor=index=>colors[index%colors.length];
23+
24+
return(
25+
<Fragment>
26+
<divstyle={{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+
<spanstyle={{marginLeft: '12px',color: '#666'}}>
39+
 Found {rects.length} rect{rects.length!==1 ? 's' : ''}
40+
</span>
41+
)}
42+
</div>
43+
44+
<divstyle={{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+
constscale=0.3;
70+
constcolor=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+
<divstyle={{flex: 1,fontSize: '13px',fontFamily: 'monospace'}}>
92+
{rects.map(({x, y, width, height},index)=>{
93+
constcolor=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+
<spanstyle={{color: '#666'}}>#{index}</span>{' '}
105+
<spanstyle={{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+
<Fragmentref={fragmentRef}>{children}</Fragment>
123+
</div>
124+
</Fragment>
125+
);
126+
}
0 commit comments
Comments
 (0)

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Commit 875b064
Browse files
jackpopejackpope
authored
Add text node support to FragmentInstance operations (#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
Lines changed: 777 additions & 76 deletions
‎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
importTestCasefrom'../../TestCase';
22
importFixturefrom'../../Fixture';
3+
importPrintRectsFragmentContainerfrom'./PrintRectsFragmentContainer';
34

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

77
exportdefaultfunctionGetClientRectsCase(){
8-
constfragmentRef=useRef(null);
9-
const[rects,setRects]=useState([]);
10-
constgetRects=()=>{
11-
constrects=fragmentRef.current.getClientRects();
12-
setRects(rects);
13-
};
14-
158
return(
169
<TestCasetitle="getClientRects">
1710
<TestCase.Steps>
@@ -26,74 +19,35 @@ export default function GetClientRectsCase() {
2619
</TestCase.ExpectedResult>
2720
<Fixture>
2821
<Fixture.Controls>
29-
<buttononClick={getRects}>Print Rects</button>
30-
<divstyle={{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-
constscale=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-
<Fragmentref={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+
constReact=window.React;
2+
const{Fragment, useRef, useState}=React;
3+
4+
constcolors=[
5+
'#e74c3c',
6+
'#3498db',
7+
'#2ecc71',
8+
'#9b59b6',
9+
'#f39c12',
10+
'#1abc9c',
11+
];
12+
13+
exportdefaultfunctionPrintRectsFragmentContainer({children}){
14+
constfragmentRef=useRef(null);
15+
const[rects,setRects]=useState([]);
16+
17+
constgetRects=()=>{
18+
constrectsResult=fragmentRef.current.getClientRects();
19+
setRects(Array.from(rectsResult));
20+
};
21+
22+
constgetColor=index=>colors[index%colors.length];
23+
24+
return(
25+
<Fragment>
26+
<divstyle={{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+
<spanstyle={{marginLeft: '12px',color: '#666'}}>
39+
 Found {rects.length} rect{rects.length!==1 ? 's' : ''}
40+
</span>
41+
)}
42+
</div>
43+
44+
<divstyle={{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+
constscale=0.3;
70+
constcolor=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+
<divstyle={{flex: 1,fontSize: '13px',fontFamily: 'monospace'}}>
92+
{rects.map(({x, y, width, height},index)=>{
93+
constcolor=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+
<spanstyle={{color: '#666'}}>#{index}</span>{' '}
105+
<spanstyle={{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+
<Fragmentref={fragmentRef}>{children}</Fragment>
123+
</div>
124+
</Fragment>
125+
);
126+
}
0 commit comments
Comments
 (0)

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
Commit 875b064
Browse files
jackpopejackpope
authored
Add text node support to FragmentInstance operations (#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
Lines changed: 777 additions & 76 deletions
‎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
importTestCasefrom'../../TestCase';
22
importFixturefrom'../../Fixture';
3+
importPrintRectsFragmentContainerfrom'./PrintRectsFragmentContainer';
34

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

77
exportdefaultfunctionGetClientRectsCase(){
8-
constfragmentRef=useRef(null);
9-
const[rects,setRects]=useState([]);
10-
constgetRects=()=>{
11-
constrects=fragmentRef.current.getClientRects();
12-
setRects(rects);
13-
};
14-
158
return(
169
<TestCasetitle="getClientRects">
1710
<TestCase.Steps>
@@ -26,74 +19,35 @@ export default function GetClientRectsCase() {
2619
</TestCase.ExpectedResult>
2720
<Fixture>
2821
<Fixture.Controls>
29-
<buttononClick={getRects}>Print Rects</button>
30-
<divstyle={{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-
constscale=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-
<Fragmentref={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+
constReact=window.React;
2+
const{Fragment, useRef, useState}=React;
3+
4+
constcolors=[
5+
'#e74c3c',
6+
'#3498db',
7+
'#2ecc71',
8+
'#9b59b6',
9+
'#f39c12',
10+
'#1abc9c',
11+
];
12+
13+
exportdefaultfunctionPrintRectsFragmentContainer({children}){
14+
constfragmentRef=useRef(null);
15+
const[rects,setRects]=useState([]);
16+
17+
constgetRects=()=>{
18+
constrectsResult=fragmentRef.current.getClientRects();
19+
setRects(Array.from(rectsResult));
20+
};
21+
22+
constgetColor=index=>colors[index%colors.length];
23+
24+
return(
25+
<Fragment>
26+
<divstyle={{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+
<spanstyle={{marginLeft: '12px',color: '#666'}}>
39+
 Found {rects.length} rect{rects.length!==1 ? 's' : ''}
40+
</span>
41+
)}
42+
</div>
43+
44+
<divstyle={{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+
constscale=0.3;
70+
constcolor=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+
<divstyle={{flex: 1,fontSize: '13px',fontFamily: 'monospace'}}>
92+
{rects.map(({x, y, width, height},index)=>{
93+
constcolor=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+
<spanstyle={{color: '#666'}}>#{index}</span>{' '}
105+
<spanstyle={{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+
<Fragmentref={fragmentRef}>{children}</Fragment>
123+
</div>
124+
</Fragment>
125+
);
126+
}
0 commit comments
Comments
 (0)

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Commit 875b064
Browse files
jackpopejackpope
authored
Add text node support to FragmentInstance operations (#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
Lines changed: 777 additions & 76 deletions
‎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
importTestCasefrom'../../TestCase';
22
importFixturefrom'../../Fixture';
3+
importPrintRectsFragmentContainerfrom'./PrintRectsFragmentContainer';
34

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

77
exportdefaultfunctionGetClientRectsCase(){
8-
constfragmentRef=useRef(null);
9-
const[rects,setRects]=useState([]);
10-
constgetRects=()=>{
11-
constrects=fragmentRef.current.getClientRects();
12-
setRects(rects);
13-
};
14-
158
return(
169
<TestCasetitle="getClientRects">
1710
<TestCase.Steps>
@@ -26,74 +19,35 @@ export default function GetClientRectsCase() {
2619
</TestCase.ExpectedResult>
2720
<Fixture>
2821
<Fixture.Controls>
29-
<buttononClick={getRects}>Print Rects</button>
30-
<divstyle={{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-
constscale=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-
<Fragmentref={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+
constReact=window.React;
2+
const{Fragment, useRef, useState}=React;
3+
4+
constcolors=[
5+
'#e74c3c',
6+
'#3498db',
7+
'#2ecc71',
8+
'#9b59b6',
9+
'#f39c12',
10+
'#1abc9c',
11+
];
12+
13+
exportdefaultfunctionPrintRectsFragmentContainer({children}){
14+
constfragmentRef=useRef(null);
15+
const[rects,setRects]=useState([]);
16+
17+
constgetRects=()=>{
18+
constrectsResult=fragmentRef.current.getClientRects();
19+
setRects(Array.from(rectsResult));
20+
};
21+
22+
constgetColor=index=>colors[index%colors.length];
23+
24+
return(
25+
<Fragment>
26+
<divstyle={{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+
<spanstyle={{marginLeft: '12px',color: '#666'}}>
39+
 Found {rects.length} rect{rects.length!==1 ? 's' : ''}
40+
</span>
41+
)}
42+
</div>
43+
44+
<divstyle={{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+
constscale=0.3;
70+
constcolor=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+
<divstyle={{flex: 1,fontSize: '13px',fontFamily: 'monospace'}}>
92+
{rects.map(({x, y, width, height},index)=>{
93+
constcolor=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+
<spanstyle={{color: '#666'}}>#{index}</span>{' '}
105+
<spanstyle={{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+
<Fragmentref={fragmentRef}>{children}</Fragment>
123+
</div>
124+
</Fragment>
125+
);
126+
}
0 commit comments
Comments
 (0)

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Commit 875b064
Browse files
jackpopejackpope
authored
Add text node support to FragmentInstance operations (#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
Lines changed: 777 additions & 76 deletions
‎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
importTestCasefrom'../../TestCase';
22
importFixturefrom'../../Fixture';
3+
importPrintRectsFragmentContainerfrom'./PrintRectsFragmentContainer';
34

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

77
exportdefaultfunctionGetClientRectsCase(){
8-
constfragmentRef=useRef(null);
9-
const[rects,setRects]=useState([]);
10-
constgetRects=()=>{
11-
constrects=fragmentRef.current.getClientRects();
12-
setRects(rects);
13-
};
14-
158
return(
169
<TestCasetitle="getClientRects">
1710
<TestCase.Steps>
@@ -26,74 +19,35 @@ export default function GetClientRectsCase() {
2619
</TestCase.ExpectedResult>
2720
<Fixture>
2821
<Fixture.Controls>
29-
<buttononClick={getRects}>Print Rects</button>
30-
<divstyle={{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-
constscale=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-
<Fragmentref={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+
constReact=window.React;
2+
const{Fragment, useRef, useState}=React;
3+
4+
constcolors=[
5+
'#e74c3c',
6+
'#3498db',
7+
'#2ecc71',
8+
'#9b59b6',
9+
'#f39c12',
10+
'#1abc9c',
11+
];
12+
13+
exportdefaultfunctionPrintRectsFragmentContainer({children}){
14+
constfragmentRef=useRef(null);
15+
const[rects,setRects]=useState([]);
16+
17+
constgetRects=()=>{
18+
constrectsResult=fragmentRef.current.getClientRects();
19+
setRects(Array.from(rectsResult));
20+
};
21+
22+
constgetColor=index=>colors[index%colors.length];
23+
24+
return(
25+
<Fragment>
26+
<divstyle={{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+
<spanstyle={{marginLeft: '12px',color: '#666'}}>
39+
 Found {rects.length} rect{rects.length!==1 ? 's' : ''}
40+
</span>
41+
)}
42+
</div>
43+
44+
<divstyle={{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+
constscale=0.3;
70+
constcolor=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+
<divstyle={{flex: 1,fontSize: '13px',fontFamily: 'monospace'}}>
92+
{rects.map(({x, y, width, height},index)=>{
93+
constcolor=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+
<spanstyle={{color: '#666'}}>#{index}</span>{' '}
105+
<spanstyle={{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+
<Fragmentref={fragmentRef}>{children}</Fragment>
123+
</div>
124+
</Fragment>
125+
);
126+
}
0 commit comments
Comments
 (0)

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
Commit 875b064
Browse files
jackpopejackpope
authored
Add text node support to FragmentInstance operations (#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
Lines changed: 777 additions & 76 deletions
‎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
importTestCasefrom'../../TestCase';
22
importFixturefrom'../../Fixture';
3+
importPrintRectsFragmentContainerfrom'./PrintRectsFragmentContainer';
34

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

77
exportdefaultfunctionGetClientRectsCase(){
8-
constfragmentRef=useRef(null);
9-
const[rects,setRects]=useState([]);
10-
constgetRects=()=>{
11-
constrects=fragmentRef.current.getClientRects();
12-
setRects(rects);
13-
};
14-
158
return(
169
<TestCasetitle="getClientRects">
1710
<TestCase.Steps>
@@ -26,74 +19,35 @@ export default function GetClientRectsCase() {
2619
</TestCase.ExpectedResult>
2720
<Fixture>
2821
<Fixture.Controls>
29-
<buttononClick={getRects}>Print Rects</button>
30-
<divstyle={{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-
constscale=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-
<Fragmentref={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+
constReact=window.React;
2+
const{Fragment, useRef, useState}=React;
3+
4+
constcolors=[
5+
'#e74c3c',
6+
'#3498db',
7+
'#2ecc71',
8+
'#9b59b6',
9+
'#f39c12',
10+
'#1abc9c',
11+
];
12+
13+
exportdefaultfunctionPrintRectsFragmentContainer({children}){
14+
constfragmentRef=useRef(null);
15+
const[rects,setRects]=useState([]);
16+
17+
constgetRects=()=>{
18+
constrectsResult=fragmentRef.current.getClientRects();
19+
setRects(Array.from(rectsResult));
20+
};
21+
22+
constgetColor=index=>colors[index%colors.length];
23+
24+
return(
25+
<Fragment>
26+
<divstyle={{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+
<spanstyle={{marginLeft: '12px',color: '#666'}}>
39+
 Found {rects.length} rect{rects.length!==1 ? 's' : ''}
40+
</span>
41+
)}
42+
</div>
43+
44+
<divstyle={{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+
constscale=0.3;
70+
constcolor=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+
<divstyle={{flex: 1,fontSize: '13px',fontFamily: 'monospace'}}>
92+
{rects.map(({x, y, width, height},index)=>{
93+
constcolor=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+
<spanstyle={{color: '#666'}}>#{index}</span>{' '}
105+
<spanstyle={{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+
<Fragmentref={fragmentRef}>{children}</Fragment>
123+
</div>
124+
</Fragment>
125+
);
126+
}
0 commit comments
Comments
 (0)