@hanzogui/use-element-layout 3.0.5 → 4.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.cjs +284 -154
- package/dist/cjs/index.native.js +353 -226
- package/dist/cjs/index.native.js.map +1 -1
- package/dist/esm/index.js +269 -141
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/index.mjs +269 -141
- package/dist/esm/index.mjs.map +1 -1
- package/dist/esm/index.native.js +338 -213
- package/dist/esm/index.native.js.map +1 -1
- package/package.json +4 -4
- package/src/index.tsx +4 -4
- package/types/index.d.ts.map +1 -1
package/dist/cjs/index.cjs
CHANGED
|
@@ -3,20 +3,22 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
|
3
3
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
4
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
5
|
var __export = (target, all) => {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
6
|
+
for (var name in all) __defProp(target, name, {
|
|
7
|
+
get: all[name],
|
|
8
|
+
enumerable: true
|
|
9
|
+
});
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
|
13
14
|
get: () => from[key],
|
|
14
15
|
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
15
16
|
});
|
|
16
|
-
|
|
17
|
-
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
18
20
|
var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
|
|
19
|
-
value:
|
|
21
|
+
value: true
|
|
20
22
|
}), mod);
|
|
21
23
|
var index_exports = {};
|
|
22
24
|
__export(index_exports, {
|
|
@@ -36,112 +38,154 @@ __export(index_exports, {
|
|
|
36
38
|
useElementLayout: () => useElementLayout
|
|
37
39
|
});
|
|
38
40
|
module.exports = __toCommonJS(index_exports);
|
|
39
|
-
var import_constants = require("@hanzogui/constants")
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
const LayoutHandlers = /* @__PURE__ */new WeakMap()
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
41
|
+
var import_constants = require("@hanzogui/constants");
|
|
42
|
+
var import_react = require("react");
|
|
43
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
44
|
+
const LayoutHandlers = /* @__PURE__ */new WeakMap();
|
|
45
|
+
const LayoutDisableKey = /* @__PURE__ */new WeakMap();
|
|
46
|
+
const Nodes = /* @__PURE__ */new Set();
|
|
47
|
+
const IntersectionState = /* @__PURE__ */new WeakMap();
|
|
48
|
+
const usePretransformDimensions = () => globalThis.__GUI_ONLAYOUT_PRETRANSFORM === true || process.env.GUI_ONLAYOUT_PRETRANSFORM === "1";
|
|
47
49
|
let _debugLayout;
|
|
48
50
|
function isDebugLayout() {
|
|
49
|
-
|
|
51
|
+
if (_debugLayout === void 0) {
|
|
52
|
+
_debugLayout = typeof window !== "undefined" && new URLSearchParams(window.location.search).has("__tamaDebugLayout");
|
|
53
|
+
}
|
|
54
|
+
return _debugLayout;
|
|
50
55
|
}
|
|
51
|
-
const DisableLayoutContextValues = {}
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
+
const DisableLayoutContextValues = {};
|
|
57
|
+
const DisableLayoutContextKey = (0, import_react.createContext)("");
|
|
58
|
+
const ENABLE = typeof IntersectionObserver !== "undefined";
|
|
59
|
+
const LayoutMeasurementController = ({
|
|
60
|
+
disable,
|
|
61
|
+
children
|
|
62
|
+
}) => {
|
|
63
|
+
const id = (0, import_react.useId)();
|
|
64
|
+
(0, import_constants.useIsomorphicLayoutEffect)(() => {
|
|
65
|
+
DisableLayoutContextValues[id] = disable;
|
|
66
|
+
}, [disable, id]);
|
|
67
|
+
return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DisableLayoutContextKey.Provider, {
|
|
68
|
+
value: id,
|
|
56
69
|
children
|
|
57
|
-
})
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
}, [disable, id]), /* @__PURE__ */(0, import_jsx_runtime.jsx)(DisableLayoutContextKey.Provider, {
|
|
62
|
-
value: id,
|
|
63
|
-
children
|
|
64
|
-
});
|
|
65
|
-
};
|
|
66
|
-
let globalIntersectionObserver = null,
|
|
67
|
-
strategy = "async";
|
|
70
|
+
});
|
|
71
|
+
};
|
|
72
|
+
let globalIntersectionObserver = null;
|
|
73
|
+
let strategy = "async";
|
|
68
74
|
function setOnLayoutStrategy(state) {
|
|
69
75
|
strategy = state;
|
|
70
76
|
}
|
|
71
77
|
const NodeRectCache = /* @__PURE__ */new WeakMap();
|
|
72
|
-
let avoidUpdates =
|
|
78
|
+
let avoidUpdates = true;
|
|
73
79
|
const queuedUpdates = /* @__PURE__ */new Map();
|
|
74
80
|
function enable() {
|
|
75
|
-
|
|
81
|
+
if (avoidUpdates) {
|
|
82
|
+
avoidUpdates = false;
|
|
83
|
+
if (queuedUpdates) {
|
|
84
|
+
queuedUpdates.forEach(cb => cb());
|
|
85
|
+
queuedUpdates.clear();
|
|
86
|
+
}
|
|
87
|
+
}
|
|
76
88
|
}
|
|
77
89
|
function startGlobalObservers() {
|
|
78
|
-
!ENABLE || globalIntersectionObserver
|
|
90
|
+
if (!ENABLE || globalIntersectionObserver) return;
|
|
91
|
+
globalIntersectionObserver = new IntersectionObserver(entries => {
|
|
79
92
|
for (let i = 0; i < entries.length; i++) {
|
|
80
|
-
const entry = entries[i]
|
|
81
|
-
|
|
82
|
-
IntersectionState.get(node) !== entry.isIntersecting
|
|
93
|
+
const entry = entries[i];
|
|
94
|
+
const node = entry.target;
|
|
95
|
+
if (IntersectionState.get(node) !== entry.isIntersecting) {
|
|
96
|
+
IntersectionState.set(node, entry.isIntersecting);
|
|
97
|
+
}
|
|
83
98
|
}
|
|
84
99
|
}, {
|
|
85
100
|
threshold: 0
|
|
86
|
-
})
|
|
101
|
+
});
|
|
87
102
|
}
|
|
88
103
|
function rectsEqual(a, b) {
|
|
89
104
|
return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
|
|
90
105
|
}
|
|
91
106
|
if (ENABLE) {
|
|
92
107
|
let ensureRectFetchObserver = function () {
|
|
93
|
-
|
|
108
|
+
if (rectFetchObserver) return rectFetchObserver;
|
|
109
|
+
rectFetchObserver = new IntersectionObserver(entries => {
|
|
94
110
|
lastCallbackDelay = Math.round(performance.now() - rectFetchStartTime);
|
|
95
|
-
for (let i = 0; i < entries.length; i++)
|
|
96
|
-
|
|
111
|
+
for (let i = 0; i < entries.length; i++) {
|
|
112
|
+
BoundingRects.set(entries[i].target, entries[i].boundingClientRect);
|
|
113
|
+
}
|
|
114
|
+
if (process.env.NODE_ENV === "development" && isDebugLayout() && lastCallbackDelay > 50) {
|
|
115
|
+
console.warn("[onLayout-io-delay]", lastCallbackDelay + "ms", entries.length, "entries");
|
|
116
|
+
}
|
|
117
|
+
if (rectFetchResolve) {
|
|
118
|
+
rectFetchResolve(true);
|
|
119
|
+
rectFetchResolve = null;
|
|
120
|
+
}
|
|
97
121
|
}, {
|
|
98
122
|
threshold: 0
|
|
99
|
-
})
|
|
123
|
+
});
|
|
124
|
+
return rectFetchObserver;
|
|
100
125
|
};
|
|
101
126
|
const BoundingRects = /* @__PURE__ */new WeakMap();
|
|
102
|
-
let rectFetchObserver = null
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
127
|
+
let rectFetchObserver = null;
|
|
128
|
+
let rectFetchResolve = null;
|
|
129
|
+
let rectFetchStartTime = 0;
|
|
130
|
+
let lastCallbackDelay = 0;
|
|
106
131
|
async function updateLayoutIfChanged(node) {
|
|
107
132
|
const onLayout = LayoutHandlers.get(node);
|
|
108
|
-
if (typeof onLayout
|
|
133
|
+
if (typeof onLayout !== "function") return;
|
|
109
134
|
const parentNode = node.parentElement;
|
|
110
135
|
if (!parentNode) return;
|
|
111
|
-
let nodeRect
|
|
136
|
+
let nodeRect;
|
|
137
|
+
let parentRect;
|
|
112
138
|
if (strategy === "async") {
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
139
|
+
nodeRect = BoundingRects.get(node);
|
|
140
|
+
parentRect = BoundingRects.get(parentNode);
|
|
141
|
+
if (!nodeRect || !parentRect) {
|
|
142
|
+
return;
|
|
143
|
+
}
|
|
144
|
+
} else {
|
|
145
|
+
nodeRect = node.getBoundingClientRect();
|
|
146
|
+
parentRect = parentNode.getBoundingClientRect();
|
|
147
|
+
}
|
|
148
|
+
const cachedRect = NodeRectCache.get(node);
|
|
149
|
+
const cachedParentRect = NodeRectCache.get(parentNode);
|
|
150
|
+
const nodeChanged = !cachedRect || !rectsEqual(cachedRect, nodeRect);
|
|
151
|
+
const parentChanged = !cachedParentRect || !rectsEqual(cachedParentRect, parentRect);
|
|
119
152
|
if (nodeChanged || parentChanged) {
|
|
120
|
-
NodeRectCache.set(node, nodeRect)
|
|
153
|
+
NodeRectCache.set(node, nodeRect);
|
|
154
|
+
NodeRectCache.set(parentNode, parentRect);
|
|
121
155
|
const event = getElementLayoutEvent(nodeRect, parentRect, node);
|
|
122
|
-
process.env.NODE_ENV === "development" && isDebugLayout()
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
156
|
+
if (process.env.NODE_ENV === "development" && isDebugLayout()) {
|
|
157
|
+
console.log("[useElementLayout] change", {
|
|
158
|
+
tag: node.tagName,
|
|
159
|
+
id: node.id || void 0,
|
|
160
|
+
className: (node.className || "").slice(0, 60) || void 0,
|
|
161
|
+
layout: event.nativeEvent.layout,
|
|
162
|
+
first: !cachedRect
|
|
163
|
+
});
|
|
164
|
+
}
|
|
165
|
+
if (avoidUpdates) {
|
|
166
|
+
queuedUpdates.set(node, () => onLayout(event));
|
|
167
|
+
} else {
|
|
168
|
+
onLayout(event);
|
|
169
|
+
}
|
|
129
170
|
}
|
|
130
171
|
}
|
|
131
|
-
const rAF = typeof requestAnimationFrame
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
let skipFrames = BASE_SKIP_FRAMES
|
|
136
|
-
|
|
172
|
+
const rAF = typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : void 0;
|
|
173
|
+
const userSkipVal = process.env.GUI_LAYOUT_FRAME_SKIP;
|
|
174
|
+
const BASE_SKIP_FRAMES = userSkipVal ? +userSkipVal : 10;
|
|
175
|
+
const MAX_SKIP_FRAMES = 20;
|
|
176
|
+
let skipFrames = BASE_SKIP_FRAMES;
|
|
177
|
+
let frameCount = 0;
|
|
137
178
|
async function layoutOnAnimationFrame() {
|
|
138
179
|
if (frameCount++ % skipFrames !== 0) {
|
|
139
180
|
rAF ? rAF(layoutOnAnimationFrame) : setTimeout(layoutOnAnimationFrame, 16);
|
|
140
181
|
return;
|
|
141
182
|
}
|
|
142
|
-
if (frameCount >= Number.MAX_SAFE_INTEGER
|
|
143
|
-
|
|
144
|
-
|
|
183
|
+
if (frameCount >= Number.MAX_SAFE_INTEGER) {
|
|
184
|
+
frameCount = 0;
|
|
185
|
+
}
|
|
186
|
+
if (strategy !== "off") {
|
|
187
|
+
const visibleNodes = [];
|
|
188
|
+
const parentsToObserve = /* @__PURE__ */new Set();
|
|
145
189
|
for (const node of Nodes) {
|
|
146
190
|
const parentElement = node.parentElement;
|
|
147
191
|
if (!(parentElement instanceof HTMLElement)) {
|
|
@@ -149,135 +193,221 @@ if (ENABLE) {
|
|
|
149
193
|
continue;
|
|
150
194
|
}
|
|
151
195
|
const disableKey = LayoutDisableKey.get(node);
|
|
152
|
-
disableKey && DisableLayoutContextValues[disableKey] ===
|
|
196
|
+
if (disableKey && DisableLayoutContextValues[disableKey] === true) continue;
|
|
197
|
+
if (IntersectionState.get(node) === false) continue;
|
|
198
|
+
visibleNodes.push(node);
|
|
199
|
+
parentsToObserve.add(parentElement);
|
|
153
200
|
}
|
|
154
201
|
if (visibleNodes.length > 0) {
|
|
155
202
|
const io = ensureRectFetchObserver();
|
|
156
203
|
rectFetchStartTime = performance.now();
|
|
157
|
-
for (let i = 0; i < visibleNodes.length; i++)
|
|
158
|
-
|
|
204
|
+
for (let i = 0; i < visibleNodes.length; i++) {
|
|
205
|
+
io.observe(visibleNodes[i]);
|
|
206
|
+
}
|
|
207
|
+
for (const parent of parentsToObserve) {
|
|
208
|
+
io.observe(parent);
|
|
209
|
+
}
|
|
159
210
|
await new Promise(res => {
|
|
160
211
|
rectFetchResolve = res;
|
|
161
212
|
});
|
|
162
|
-
for (let i = 0; i < visibleNodes.length; i++)
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
for (
|
|
213
|
+
for (let i = 0; i < visibleNodes.length; i++) {
|
|
214
|
+
io.unobserve(visibleNodes[i]);
|
|
215
|
+
}
|
|
216
|
+
for (const parent of parentsToObserve) {
|
|
217
|
+
io.unobserve(parent);
|
|
218
|
+
}
|
|
219
|
+
if (lastCallbackDelay > 50) {
|
|
220
|
+
skipFrames = Math.min(skipFrames + 2, MAX_SKIP_FRAMES);
|
|
221
|
+
} else if (lastCallbackDelay < 20) {
|
|
222
|
+
skipFrames = Math.max(skipFrames - 1, BASE_SKIP_FRAMES);
|
|
223
|
+
}
|
|
224
|
+
for (let i = 0; i < visibleNodes.length; i++) {
|
|
225
|
+
updateLayoutIfChanged(visibleNodes[i]);
|
|
226
|
+
}
|
|
166
227
|
}
|
|
167
228
|
}
|
|
168
229
|
rAF ? rAF(layoutOnAnimationFrame) : setTimeout(layoutOnAnimationFrame, 16);
|
|
169
230
|
}
|
|
170
231
|
layoutOnAnimationFrame();
|
|
171
232
|
}
|
|
172
|
-
const getElementLayoutEvent = (nodeRect, parentRect, node) =>
|
|
233
|
+
const getElementLayoutEvent = (nodeRect, parentRect, node) => {
|
|
234
|
+
return {
|
|
173
235
|
nativeEvent: {
|
|
174
236
|
layout: getRelativeDimensions(nodeRect, parentRect, node),
|
|
175
237
|
target: nodeRect
|
|
176
238
|
},
|
|
177
239
|
timeStamp: Date.now()
|
|
178
|
-
}
|
|
179
|
-
|
|
240
|
+
};
|
|
241
|
+
};
|
|
242
|
+
const getPreTransformDimensions = node => {
|
|
243
|
+
return {
|
|
180
244
|
width: node.offsetWidth,
|
|
181
245
|
height: node.offsetHeight
|
|
182
|
-
}),
|
|
183
|
-
getRelativeDimensions = (a, b, aNode) => {
|
|
184
|
-
const {
|
|
185
|
-
left,
|
|
186
|
-
top
|
|
187
|
-
} = a,
|
|
188
|
-
x = left - b.left,
|
|
189
|
-
y = top - b.top,
|
|
190
|
-
{
|
|
191
|
-
width,
|
|
192
|
-
height
|
|
193
|
-
} = usePretransformDimensions() && aNode ? getPreTransformDimensions(aNode) : {
|
|
194
|
-
width: a.width,
|
|
195
|
-
height: a.height
|
|
196
|
-
};
|
|
197
|
-
return {
|
|
198
|
-
x,
|
|
199
|
-
y,
|
|
200
|
-
width,
|
|
201
|
-
height,
|
|
202
|
-
pageX: a.left,
|
|
203
|
-
pageY: a.top
|
|
204
|
-
};
|
|
205
246
|
};
|
|
247
|
+
};
|
|
248
|
+
const getRelativeDimensions = (a, b, aNode) => {
|
|
249
|
+
const {
|
|
250
|
+
left,
|
|
251
|
+
top
|
|
252
|
+
} = a;
|
|
253
|
+
const x = left - b.left;
|
|
254
|
+
const y = top - b.top;
|
|
255
|
+
const {
|
|
256
|
+
width,
|
|
257
|
+
height
|
|
258
|
+
} = usePretransformDimensions() && aNode ? getPreTransformDimensions(aNode) : {
|
|
259
|
+
width: a.width,
|
|
260
|
+
height: a.height
|
|
261
|
+
};
|
|
262
|
+
return {
|
|
263
|
+
x,
|
|
264
|
+
y,
|
|
265
|
+
width,
|
|
266
|
+
height,
|
|
267
|
+
pageX: a.left,
|
|
268
|
+
pageY: a.top
|
|
269
|
+
};
|
|
270
|
+
};
|
|
206
271
|
function registerLayoutNode(node, onChange, disableKey) {
|
|
207
|
-
|
|
272
|
+
Nodes.add(node);
|
|
273
|
+
LayoutHandlers.set(node, onChange);
|
|
274
|
+
if (disableKey) LayoutDisableKey.set(node, disableKey);
|
|
275
|
+
startGlobalObservers();
|
|
276
|
+
if (globalIntersectionObserver) {
|
|
277
|
+
globalIntersectionObserver.observe(node);
|
|
278
|
+
IntersectionState.set(node, true);
|
|
279
|
+
}
|
|
280
|
+
return () => cleanupNode(node);
|
|
208
281
|
}
|
|
209
282
|
function cleanupNode(node) {
|
|
210
|
-
Nodes.delete(node)
|
|
283
|
+
Nodes.delete(node);
|
|
284
|
+
LayoutHandlers.delete(node);
|
|
285
|
+
LayoutDisableKey.delete(node);
|
|
286
|
+
NodeRectCache.delete(node);
|
|
287
|
+
IntersectionState.delete(node);
|
|
288
|
+
if (globalIntersectionObserver) {
|
|
289
|
+
globalIntersectionObserver.unobserve(node);
|
|
290
|
+
}
|
|
211
291
|
}
|
|
212
292
|
const PrevHostNode = /* @__PURE__ */new WeakMap();
|
|
213
293
|
function useElementLayout(ref, onLayout) {
|
|
214
|
-
const disableKey = (0, import_react.useContext)(DisableLayoutContextKey)
|
|
215
|
-
|
|
216
|
-
node && onLayout
|
|
294
|
+
const disableKey = (0, import_react.useContext)(DisableLayoutContextKey);
|
|
295
|
+
const node = ensureWebElement(ref.current?.host);
|
|
296
|
+
if (node && onLayout) {
|
|
297
|
+
LayoutHandlers.set(node, onLayout);
|
|
298
|
+
LayoutDisableKey.set(node, disableKey);
|
|
299
|
+
}
|
|
300
|
+
(0, import_constants.useIsomorphicLayoutEffect)(() => {
|
|
217
301
|
if (!onLayout) return;
|
|
218
|
-
const nextNode = ensureWebElement(ref.current?.host)
|
|
219
|
-
|
|
220
|
-
if (nextNode === prevNode
|
|
221
|
-
|
|
302
|
+
const nextNode = ensureWebElement(ref.current?.host);
|
|
303
|
+
const prevNode = PrevHostNode.get(ref);
|
|
304
|
+
if (nextNode === prevNode) return;
|
|
305
|
+
if (prevNode) cleanupNode(prevNode);
|
|
306
|
+
PrevHostNode.set(ref, nextNode);
|
|
307
|
+
if (!nextNode) return;
|
|
308
|
+
Nodes.add(nextNode);
|
|
309
|
+
startGlobalObservers();
|
|
310
|
+
if (globalIntersectionObserver) {
|
|
311
|
+
globalIntersectionObserver.observe(nextNode);
|
|
312
|
+
IntersectionState.set(nextNode, true);
|
|
313
|
+
}
|
|
222
314
|
const handler = LayoutHandlers.get(nextNode);
|
|
223
|
-
if (typeof handler
|
|
315
|
+
if (typeof handler !== "function") return;
|
|
224
316
|
const parentNode = nextNode.parentElement;
|
|
225
317
|
if (!parentNode) return;
|
|
226
|
-
const nodeRect = nextNode.getBoundingClientRect()
|
|
227
|
-
|
|
228
|
-
NodeRectCache.set(nextNode, nodeRect)
|
|
229
|
-
|
|
318
|
+
const nodeRect = nextNode.getBoundingClientRect();
|
|
319
|
+
const parentRect = parentNode.getBoundingClientRect();
|
|
320
|
+
NodeRectCache.set(nextNode, nodeRect);
|
|
321
|
+
NodeRectCache.set(parentNode, parentRect);
|
|
322
|
+
handler(getElementLayoutEvent(nodeRect, parentRect, nextNode));
|
|
323
|
+
});
|
|
324
|
+
(0, import_constants.useIsomorphicLayoutEffect)(() => {
|
|
230
325
|
if (!onLayout) return;
|
|
231
326
|
const node2 = ref.current?.host;
|
|
232
327
|
if (!node2) return;
|
|
233
|
-
Nodes.add(node2)
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
}
|
|
328
|
+
Nodes.add(node2);
|
|
329
|
+
startGlobalObservers();
|
|
330
|
+
if (globalIntersectionObserver) {
|
|
331
|
+
globalIntersectionObserver.observe(node2);
|
|
332
|
+
IntersectionState.set(node2, true);
|
|
333
|
+
}
|
|
334
|
+
if (process.env.NODE_ENV === "development" && isDebugLayout()) {
|
|
335
|
+
console.log("[useElementLayout] register", {
|
|
336
|
+
tag: node2.tagName,
|
|
337
|
+
id: node2.id || void 0,
|
|
338
|
+
className: (node2.className || "").slice(0, 60) || void 0,
|
|
339
|
+
totalNodes: Nodes.size
|
|
340
|
+
});
|
|
341
|
+
}
|
|
239
342
|
const parentNode = node2.parentNode;
|
|
240
|
-
|
|
343
|
+
if (parentNode) {
|
|
344
|
+
onLayout(getElementLayoutEvent(node2.getBoundingClientRect(), parentNode.getBoundingClientRect(), node2));
|
|
345
|
+
}
|
|
346
|
+
return () => {
|
|
241
347
|
cleanupNode(node2);
|
|
242
348
|
const swappedNode = PrevHostNode.get(ref);
|
|
243
|
-
swappedNode && swappedNode !== node2
|
|
349
|
+
if (swappedNode && swappedNode !== node2) {
|
|
350
|
+
cleanupNode(swappedNode);
|
|
351
|
+
}
|
|
352
|
+
PrevHostNode.delete(ref);
|
|
244
353
|
};
|
|
245
354
|
}, [ref, !!onLayout]);
|
|
246
355
|
}
|
|
247
356
|
function ensureWebElement(x) {
|
|
248
|
-
if (
|
|
357
|
+
if (typeof HTMLElement === "undefined") {
|
|
358
|
+
return void 0;
|
|
359
|
+
}
|
|
360
|
+
return x instanceof HTMLElement ? x : void 0;
|
|
249
361
|
}
|
|
250
|
-
const getBoundingClientRectAsync = node =>
|
|
251
|
-
|
|
252
|
-
|
|
362
|
+
const getBoundingClientRectAsync = node => {
|
|
363
|
+
return new Promise(res => {
|
|
364
|
+
if (!node || node.nodeType !== 1) return res(false);
|
|
365
|
+
const io = new IntersectionObserver(entries => {
|
|
366
|
+
io.disconnect();
|
|
367
|
+
return res(entries[0].boundingClientRect);
|
|
368
|
+
}, {
|
|
253
369
|
threshold: 0
|
|
254
370
|
});
|
|
255
371
|
io.observe(node);
|
|
256
|
-
})
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
372
|
+
});
|
|
373
|
+
};
|
|
374
|
+
const measureNode = async (node, relativeTo) => {
|
|
375
|
+
const relativeNode = relativeTo || node?.parentElement;
|
|
376
|
+
if (relativeNode instanceof HTMLElement) {
|
|
377
|
+
const [nodeDim, relativeNodeDim] = await Promise.all([getBoundingClientRectAsync(node), getBoundingClientRectAsync(relativeNode)]);
|
|
378
|
+
if (relativeNodeDim && nodeDim) {
|
|
379
|
+
return getRelativeDimensions(nodeDim, relativeNodeDim, node);
|
|
262
380
|
}
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
381
|
+
}
|
|
382
|
+
return null;
|
|
383
|
+
};
|
|
384
|
+
const measure = async (node, callback) => {
|
|
385
|
+
const out = await measureNode(node, node.parentNode instanceof HTMLElement ? node.parentNode : null);
|
|
386
|
+
if (out) {
|
|
387
|
+
callback?.(out.x, out.y, out.width, out.height, out.pageX, out.pageY);
|
|
388
|
+
}
|
|
389
|
+
return out;
|
|
390
|
+
};
|
|
269
391
|
function createMeasure(node) {
|
|
270
392
|
return callback => measure(node, callback);
|
|
271
393
|
}
|
|
272
394
|
const measureInWindow = async (node, callback) => {
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
395
|
+
const out = await measureNode(node, null);
|
|
396
|
+
if (out) {
|
|
397
|
+
callback?.(out.pageX, out.pageY, out.width, out.height);
|
|
398
|
+
}
|
|
399
|
+
return out;
|
|
400
|
+
};
|
|
401
|
+
const createMeasureInWindow = node => {
|
|
402
|
+
return callback => measureInWindow(node, callback);
|
|
403
|
+
};
|
|
404
|
+
const measureLayout = async (node, relativeNode, callback) => {
|
|
405
|
+
const out = await measureNode(node, relativeNode);
|
|
406
|
+
if (out) {
|
|
407
|
+
callback?.(out.x, out.y, out.width, out.height, out.pageX, out.pageY);
|
|
408
|
+
}
|
|
409
|
+
return out;
|
|
410
|
+
};
|
|
281
411
|
function createMeasureLayout(node) {
|
|
282
412
|
return (relativeTo, callback) => measureLayout(node, relativeTo, callback);
|
|
283
413
|
}
|