@hanzogui/use-element-layout 7.0.0 → 7.3.0
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/LICENSE +40 -19
- package/dist/cjs/index.cjs +34 -84
- package/dist/cjs/index.native.js +41 -104
- package/dist/cjs/index.native.js.map +1 -1
- package/dist/esm/index.js +34 -84
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/index.mjs +34 -84
- package/dist/esm/index.mjs.map +1 -1
- package/dist/esm/index.native.js +41 -104
- package/dist/esm/index.native.js.map +1 -1
- package/package.json +12 -10
package/LICENSE
CHANGED
|
@@ -1,21 +1,42 @@
|
|
|
1
|
-
|
|
1
|
+
BSD 3-Clause License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026-present, Hanzo AI, Inc.
|
|
4
|
+
|
|
5
|
+
Portions of this software are derived from upstream code originally licensed under
|
|
6
|
+
the MIT License, with the following copyright notices retained per its terms:
|
|
2
7
|
|
|
3
8
|
Copyright (c) 2020 Nate Wienert
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
9
|
+
Copyright (c) 2015-present, Nicolas Gallagher.
|
|
10
|
+
Copyright (c) 2015-present, Facebook, Inc.
|
|
11
|
+
Copyright (c) 2021 Radix
|
|
12
|
+
Copyright (c) 2017 Carmelo Pullara
|
|
13
|
+
Copyright (c) 2018 Framer B.V.
|
|
14
|
+
Copyright (c) 2022 WorkOS
|
|
15
|
+
|
|
16
|
+
All rights reserved.
|
|
17
|
+
|
|
18
|
+
Redistribution and use in source and binary forms, with or without
|
|
19
|
+
modification, are permitted provided that the following conditions are met:
|
|
20
|
+
|
|
21
|
+
1. Redistributions of source code must retain the above copyright notice, this
|
|
22
|
+
list of conditions and the following disclaimer.
|
|
23
|
+
|
|
24
|
+
2. Redistributions in binary form must reproduce the above copyright notice,
|
|
25
|
+
this list of conditions and the following disclaimer in the documentation
|
|
26
|
+
and/or other materials provided with the distribution.
|
|
27
|
+
|
|
28
|
+
3. Neither the name of the copyright holder nor the names of its contributors
|
|
29
|
+
may be used to endorse or promote products derived from this software
|
|
30
|
+
without specific prior written permission.
|
|
31
|
+
|
|
32
|
+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
|
|
33
|
+
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
|
|
34
|
+
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
|
|
35
|
+
ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
|
|
36
|
+
LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
|
|
37
|
+
CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
|
|
38
|
+
SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
|
|
39
|
+
INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
|
|
40
|
+
CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
|
|
41
|
+
ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
|
|
42
|
+
POSSIBILITY OF SUCH DAMAGE.
|
package/dist/cjs/index.cjs
CHANGED
|
@@ -48,9 +48,7 @@ const IntersectionState = /* @__PURE__ */new WeakMap();
|
|
|
48
48
|
const usePretransformDimensions = () => globalThis.__GUI_ONLAYOUT_PRETRANSFORM === true || process.env.GUI_ONLAYOUT_PRETRANSFORM === "1";
|
|
49
49
|
let _debugLayout;
|
|
50
50
|
function isDebugLayout() {
|
|
51
|
-
if (_debugLayout === void 0)
|
|
52
|
-
_debugLayout = typeof window !== "undefined" && new URLSearchParams(window.location.search).has("__tamaDebugLayout");
|
|
53
|
-
}
|
|
51
|
+
if (_debugLayout === void 0) _debugLayout = typeof window !== "undefined" && new URLSearchParams(window.location.search).has("__tamaDebugLayout");
|
|
54
52
|
return _debugLayout;
|
|
55
53
|
}
|
|
56
54
|
const DisableLayoutContextValues = {};
|
|
@@ -92,9 +90,7 @@ function startGlobalObservers() {
|
|
|
92
90
|
for (let i = 0; i < entries.length; i++) {
|
|
93
91
|
const entry = entries[i];
|
|
94
92
|
const node = entry.target;
|
|
95
|
-
if (IntersectionState.get(node) !== entry.isIntersecting)
|
|
96
|
-
IntersectionState.set(node, entry.isIntersecting);
|
|
97
|
-
}
|
|
93
|
+
if (IntersectionState.get(node) !== entry.isIntersecting) IntersectionState.set(node, entry.isIntersecting);
|
|
98
94
|
}
|
|
99
95
|
}, {
|
|
100
96
|
threshold: 0
|
|
@@ -108,12 +104,8 @@ if (ENABLE) {
|
|
|
108
104
|
if (rectFetchObserver) return rectFetchObserver;
|
|
109
105
|
rectFetchObserver = new IntersectionObserver(entries => {
|
|
110
106
|
lastCallbackDelay = Math.round(performance.now() - rectFetchStartTime);
|
|
111
|
-
for (let i = 0; i < entries.length; i++)
|
|
112
|
-
|
|
113
|
-
}
|
|
114
|
-
if (process.env.NODE_ENV === "development" && isDebugLayout() && lastCallbackDelay > 50) {
|
|
115
|
-
console.warn("[onLayout-io-delay]", lastCallbackDelay + "ms", entries.length, "entries");
|
|
116
|
-
}
|
|
107
|
+
for (let i = 0; i < entries.length; i++) BoundingRects.set(entries[i].target, entries[i].boundingClientRect);
|
|
108
|
+
if (process.env.NODE_ENV === "development" && isDebugLayout() && lastCallbackDelay > 50) console.warn("[onLayout-io-delay]", lastCallbackDelay + "ms", entries.length, "entries");
|
|
117
109
|
if (rectFetchResolve) {
|
|
118
110
|
rectFetchResolve(true);
|
|
119
111
|
rectFetchResolve = null;
|
|
@@ -138,9 +130,7 @@ if (ENABLE) {
|
|
|
138
130
|
if (strategy === "async") {
|
|
139
131
|
nodeRect = BoundingRects.get(node);
|
|
140
132
|
parentRect = BoundingRects.get(parentNode);
|
|
141
|
-
if (!nodeRect || !parentRect)
|
|
142
|
-
return;
|
|
143
|
-
}
|
|
133
|
+
if (!nodeRect || !parentRect) return;
|
|
144
134
|
} else {
|
|
145
135
|
nodeRect = node.getBoundingClientRect();
|
|
146
136
|
parentRect = parentNode.getBoundingClientRect();
|
|
@@ -153,20 +143,14 @@ if (ENABLE) {
|
|
|
153
143
|
NodeRectCache.set(node, nodeRect);
|
|
154
144
|
NodeRectCache.set(parentNode, parentRect);
|
|
155
145
|
const event = getElementLayoutEvent(nodeRect, parentRect, node);
|
|
156
|
-
if (process.env.NODE_ENV === "development" && isDebugLayout()) {
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
}
|
|
165
|
-
if (avoidUpdates) {
|
|
166
|
-
queuedUpdates.set(node, () => onLayout(event));
|
|
167
|
-
} else {
|
|
168
|
-
onLayout(event);
|
|
169
|
-
}
|
|
146
|
+
if (process.env.NODE_ENV === "development" && isDebugLayout()) console.log("[useElementLayout] change", {
|
|
147
|
+
tag: node.tagName,
|
|
148
|
+
id: node.id || void 0,
|
|
149
|
+
className: (node.className || "").slice(0, 60) || void 0,
|
|
150
|
+
layout: event.nativeEvent.layout,
|
|
151
|
+
first: !cachedRect
|
|
152
|
+
});
|
|
153
|
+
if (avoidUpdates) queuedUpdates.set(node, () => onLayout(event));else onLayout(event);
|
|
170
154
|
}
|
|
171
155
|
}
|
|
172
156
|
const rAF = typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : void 0;
|
|
@@ -180,9 +164,7 @@ if (ENABLE) {
|
|
|
180
164
|
rAF ? rAF(layoutOnAnimationFrame) : setTimeout(layoutOnAnimationFrame, 16);
|
|
181
165
|
return;
|
|
182
166
|
}
|
|
183
|
-
if (frameCount >= Number.MAX_SAFE_INTEGER)
|
|
184
|
-
frameCount = 0;
|
|
185
|
-
}
|
|
167
|
+
if (frameCount >= Number.MAX_SAFE_INTEGER) frameCount = 0;
|
|
186
168
|
if (strategy !== "off") {
|
|
187
169
|
const visibleNodes = [];
|
|
188
170
|
const parentsToObserve = /* @__PURE__ */new Set();
|
|
@@ -201,29 +183,15 @@ if (ENABLE) {
|
|
|
201
183
|
if (visibleNodes.length > 0) {
|
|
202
184
|
const io = ensureRectFetchObserver();
|
|
203
185
|
rectFetchStartTime = performance.now();
|
|
204
|
-
for (let i = 0; i < visibleNodes.length; i++)
|
|
205
|
-
|
|
206
|
-
}
|
|
207
|
-
for (const parent of parentsToObserve) {
|
|
208
|
-
io.observe(parent);
|
|
209
|
-
}
|
|
186
|
+
for (let i = 0; i < visibleNodes.length; i++) io.observe(visibleNodes[i]);
|
|
187
|
+
for (const parent of parentsToObserve) io.observe(parent);
|
|
210
188
|
await new Promise(res => {
|
|
211
189
|
rectFetchResolve = res;
|
|
212
190
|
});
|
|
213
|
-
for (let i = 0; i < visibleNodes.length; i++)
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
for (
|
|
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
|
-
}
|
|
191
|
+
for (let i = 0; i < visibleNodes.length; i++) io.unobserve(visibleNodes[i]);
|
|
192
|
+
for (const parent of parentsToObserve) io.unobserve(parent);
|
|
193
|
+
if (lastCallbackDelay > 50) skipFrames = Math.min(skipFrames + 2, MAX_SKIP_FRAMES);else if (lastCallbackDelay < 20) skipFrames = Math.max(skipFrames - 1, BASE_SKIP_FRAMES);
|
|
194
|
+
for (let i = 0; i < visibleNodes.length; i++) updateLayoutIfChanged(visibleNodes[i]);
|
|
227
195
|
}
|
|
228
196
|
}
|
|
229
197
|
rAF ? rAF(layoutOnAnimationFrame) : setTimeout(layoutOnAnimationFrame, 16);
|
|
@@ -285,9 +253,7 @@ function cleanupNode(node) {
|
|
|
285
253
|
LayoutDisableKey.delete(node);
|
|
286
254
|
NodeRectCache.delete(node);
|
|
287
255
|
IntersectionState.delete(node);
|
|
288
|
-
if (globalIntersectionObserver)
|
|
289
|
-
globalIntersectionObserver.unobserve(node);
|
|
290
|
-
}
|
|
256
|
+
if (globalIntersectionObserver) globalIntersectionObserver.unobserve(node);
|
|
291
257
|
}
|
|
292
258
|
const PrevHostNode = /* @__PURE__ */new WeakMap();
|
|
293
259
|
function useElementLayout(ref, onLayout) {
|
|
@@ -331,32 +297,24 @@ function useElementLayout(ref, onLayout) {
|
|
|
331
297
|
globalIntersectionObserver.observe(node2);
|
|
332
298
|
IntersectionState.set(node2, true);
|
|
333
299
|
}
|
|
334
|
-
if (process.env.NODE_ENV === "development" && isDebugLayout()) {
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
});
|
|
341
|
-
}
|
|
300
|
+
if (process.env.NODE_ENV === "development" && isDebugLayout()) console.log("[useElementLayout] register", {
|
|
301
|
+
tag: node2.tagName,
|
|
302
|
+
id: node2.id || void 0,
|
|
303
|
+
className: (node2.className || "").slice(0, 60) || void 0,
|
|
304
|
+
totalNodes: Nodes.size
|
|
305
|
+
});
|
|
342
306
|
const parentNode = node2.parentNode;
|
|
343
|
-
if (parentNode)
|
|
344
|
-
onLayout(getElementLayoutEvent(node2.getBoundingClientRect(), parentNode.getBoundingClientRect(), node2));
|
|
345
|
-
}
|
|
307
|
+
if (parentNode) onLayout(getElementLayoutEvent(node2.getBoundingClientRect(), parentNode.getBoundingClientRect(), node2));
|
|
346
308
|
return () => {
|
|
347
309
|
cleanupNode(node2);
|
|
348
310
|
const swappedNode = PrevHostNode.get(ref);
|
|
349
|
-
if (swappedNode && swappedNode !== node2)
|
|
350
|
-
cleanupNode(swappedNode);
|
|
351
|
-
}
|
|
311
|
+
if (swappedNode && swappedNode !== node2) cleanupNode(swappedNode);
|
|
352
312
|
PrevHostNode.delete(ref);
|
|
353
313
|
};
|
|
354
314
|
}, [ref, !!onLayout]);
|
|
355
315
|
}
|
|
356
316
|
function ensureWebElement(x) {
|
|
357
|
-
if (typeof HTMLElement === "undefined")
|
|
358
|
-
return void 0;
|
|
359
|
-
}
|
|
317
|
+
if (typeof HTMLElement === "undefined") return;
|
|
360
318
|
return x instanceof HTMLElement ? x : void 0;
|
|
361
319
|
}
|
|
362
320
|
const getBoundingClientRectAsync = node => {
|
|
@@ -375,17 +333,13 @@ const measureNode = async (node, relativeTo) => {
|
|
|
375
333
|
const relativeNode = relativeTo || node?.parentElement;
|
|
376
334
|
if (relativeNode instanceof HTMLElement) {
|
|
377
335
|
const [nodeDim, relativeNodeDim] = await Promise.all([getBoundingClientRectAsync(node), getBoundingClientRectAsync(relativeNode)]);
|
|
378
|
-
if (relativeNodeDim && nodeDim)
|
|
379
|
-
return getRelativeDimensions(nodeDim, relativeNodeDim, node);
|
|
380
|
-
}
|
|
336
|
+
if (relativeNodeDim && nodeDim) return getRelativeDimensions(nodeDim, relativeNodeDim, node);
|
|
381
337
|
}
|
|
382
338
|
return null;
|
|
383
339
|
};
|
|
384
340
|
const measure = async (node, callback) => {
|
|
385
341
|
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
|
-
}
|
|
342
|
+
if (out) callback?.(out.x, out.y, out.width, out.height, out.pageX, out.pageY);
|
|
389
343
|
return out;
|
|
390
344
|
};
|
|
391
345
|
function createMeasure(node) {
|
|
@@ -393,9 +347,7 @@ function createMeasure(node) {
|
|
|
393
347
|
}
|
|
394
348
|
const measureInWindow = async (node, callback) => {
|
|
395
349
|
const out = await measureNode(node, null);
|
|
396
|
-
if (out)
|
|
397
|
-
callback?.(out.pageX, out.pageY, out.width, out.height);
|
|
398
|
-
}
|
|
350
|
+
if (out) callback?.(out.pageX, out.pageY, out.width, out.height);
|
|
399
351
|
return out;
|
|
400
352
|
};
|
|
401
353
|
const createMeasureInWindow = node => {
|
|
@@ -403,9 +355,7 @@ const createMeasureInWindow = node => {
|
|
|
403
355
|
};
|
|
404
356
|
const measureLayout = async (node, relativeNode, callback) => {
|
|
405
357
|
const out = await measureNode(node, relativeNode);
|
|
406
|
-
if (out)
|
|
407
|
-
callback?.(out.x, out.y, out.width, out.height, out.pageX, out.pageY);
|
|
408
|
-
}
|
|
358
|
+
if (out) callback?.(out.x, out.y, out.width, out.height, out.pageX, out.pageY);
|
|
409
359
|
return out;
|
|
410
360
|
};
|
|
411
361
|
function createMeasureLayout(node) {
|
package/dist/cjs/index.native.js
CHANGED
|
@@ -44,11 +44,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
|
|
|
44
44
|
var import_constants = require("@hanzogui/constants");
|
|
45
45
|
var import_react = require("react");
|
|
46
46
|
function _instanceof(left, right) {
|
|
47
|
-
if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance])
|
|
48
|
-
return !!right[Symbol.hasInstance](left);
|
|
49
|
-
} else {
|
|
50
|
-
return left instanceof right;
|
|
51
|
-
}
|
|
47
|
+
if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) return !!right[Symbol.hasInstance](left);else return left instanceof right;
|
|
52
48
|
}
|
|
53
49
|
var LayoutHandlers = /* @__PURE__ */new WeakMap();
|
|
54
50
|
var LayoutDisableKey = /* @__PURE__ */new WeakMap();
|
|
@@ -59,9 +55,7 @@ var usePretransformDimensions = function () {
|
|
|
59
55
|
};
|
|
60
56
|
var _debugLayout;
|
|
61
57
|
function isDebugLayout() {
|
|
62
|
-
if (_debugLayout === void 0)
|
|
63
|
-
_debugLayout = typeof window !== "undefined" && new URLSearchParams(window.location.search).has("__tamaDebugLayout");
|
|
64
|
-
}
|
|
58
|
+
if (_debugLayout === void 0) _debugLayout = typeof window !== "undefined" && new URLSearchParams(window.location.search).has("__tamaDebugLayout");
|
|
65
59
|
return _debugLayout;
|
|
66
60
|
}
|
|
67
61
|
var DisableLayoutContextValues = {};
|
|
@@ -106,9 +100,7 @@ function startGlobalObservers() {
|
|
|
106
100
|
for (var i = 0; i < entries.length; i++) {
|
|
107
101
|
var entry = entries[i];
|
|
108
102
|
var node = entry.target;
|
|
109
|
-
if (IntersectionState.get(node) !== entry.isIntersecting)
|
|
110
|
-
IntersectionState.set(node, entry.isIntersecting);
|
|
111
|
-
}
|
|
103
|
+
if (IntersectionState.get(node) !== entry.isIntersecting) IntersectionState.set(node, entry.isIntersecting);
|
|
112
104
|
}
|
|
113
105
|
}, {
|
|
114
106
|
threshold: 0
|
|
@@ -122,12 +114,8 @@ if (ENABLE) {
|
|
|
122
114
|
if (rectFetchObserver) return rectFetchObserver;
|
|
123
115
|
rectFetchObserver = new IntersectionObserver(function (entries) {
|
|
124
116
|
lastCallbackDelay = Math.round(performance.now() - rectFetchStartTime);
|
|
125
|
-
for (var i = 0; i < entries.length; i++)
|
|
126
|
-
|
|
127
|
-
}
|
|
128
|
-
if (process.env.NODE_ENV === "development" && isDebugLayout() && lastCallbackDelay > 50) {
|
|
129
|
-
console.warn("[onLayout-io-delay]", lastCallbackDelay + "ms", entries.length, "entries");
|
|
130
|
-
}
|
|
117
|
+
for (var i = 0; i < entries.length; i++) BoundingRects.set(entries[i].target, entries[i].boundingClientRect);
|
|
118
|
+
if (process.env.NODE_ENV === "development" && isDebugLayout() && lastCallbackDelay > 50) console.warn("[onLayout-io-delay]", lastCallbackDelay + "ms", entries.length, "entries");
|
|
131
119
|
if (rectFetchResolve) {
|
|
132
120
|
rectFetchResolve(true);
|
|
133
121
|
rectFetchResolve = null;
|
|
@@ -137,7 +125,6 @@ if (ENABLE) {
|
|
|
137
125
|
});
|
|
138
126
|
return rectFetchObserver;
|
|
139
127
|
};
|
|
140
|
-
var ensureRectFetchObserver2 = ensureRectFetchObserver;
|
|
141
128
|
var BoundingRects = /* @__PURE__ */new WeakMap();
|
|
142
129
|
var rectFetchObserver = null;
|
|
143
130
|
var rectFetchResolve = null;
|
|
@@ -153,9 +140,7 @@ if (ENABLE) {
|
|
|
153
140
|
if (strategy === "async") {
|
|
154
141
|
nodeRect = BoundingRects.get(node);
|
|
155
142
|
parentRect = BoundingRects.get(parentNode);
|
|
156
|
-
if (!nodeRect || !parentRect)
|
|
157
|
-
return;
|
|
158
|
-
}
|
|
143
|
+
if (!nodeRect || !parentRect) return;
|
|
159
144
|
} else {
|
|
160
145
|
nodeRect = node.getBoundingClientRect();
|
|
161
146
|
parentRect = parentNode.getBoundingClientRect();
|
|
@@ -168,22 +153,16 @@ if (ENABLE) {
|
|
|
168
153
|
NodeRectCache.set(node, nodeRect);
|
|
169
154
|
NodeRectCache.set(parentNode, parentRect);
|
|
170
155
|
var event = getElementLayoutEvent(nodeRect, parentRect, node);
|
|
171
|
-
if (process.env.NODE_ENV === "development" && isDebugLayout()) {
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
queuedUpdates.set(node, function () {
|
|
182
|
-
return onLayout(event);
|
|
183
|
-
});
|
|
184
|
-
} else {
|
|
185
|
-
onLayout(event);
|
|
186
|
-
}
|
|
156
|
+
if (process.env.NODE_ENV === "development" && isDebugLayout()) console.log("[useElementLayout] change", {
|
|
157
|
+
tag: node.tagName,
|
|
158
|
+
id: node.id || void 0,
|
|
159
|
+
className: (node.className || "").slice(0, 60) || void 0,
|
|
160
|
+
layout: event.nativeEvent.layout,
|
|
161
|
+
first: !cachedRect
|
|
162
|
+
});
|
|
163
|
+
if (avoidUpdates) queuedUpdates.set(node, function () {
|
|
164
|
+
return onLayout(event);
|
|
165
|
+
});else onLayout(event);
|
|
187
166
|
}
|
|
188
167
|
}
|
|
189
168
|
var rAF = typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : void 0;
|
|
@@ -197,9 +176,7 @@ if (ENABLE) {
|
|
|
197
176
|
rAF ? rAF(layoutOnAnimationFrame) : setTimeout(layoutOnAnimationFrame, 16);
|
|
198
177
|
return;
|
|
199
178
|
}
|
|
200
|
-
if (frameCount >= Number.MAX_SAFE_INTEGER)
|
|
201
|
-
frameCount = 0;
|
|
202
|
-
}
|
|
179
|
+
if (frameCount >= Number.MAX_SAFE_INTEGER) frameCount = 0;
|
|
203
180
|
if (strategy !== "off") {
|
|
204
181
|
var visibleNodes = [];
|
|
205
182
|
var parentsToObserve = /* @__PURE__ */new Set();
|
|
@@ -225,21 +202,15 @@ if (ENABLE) {
|
|
|
225
202
|
_iteratorError = err;
|
|
226
203
|
} finally {
|
|
227
204
|
try {
|
|
228
|
-
if (!_iteratorNormalCompletion && _iterator.return != null)
|
|
229
|
-
_iterator.return();
|
|
230
|
-
}
|
|
205
|
+
if (!_iteratorNormalCompletion && _iterator.return != null) _iterator.return();
|
|
231
206
|
} finally {
|
|
232
|
-
if (_didIteratorError)
|
|
233
|
-
throw _iteratorError;
|
|
234
|
-
}
|
|
207
|
+
if (_didIteratorError) throw _iteratorError;
|
|
235
208
|
}
|
|
236
209
|
}
|
|
237
210
|
if (visibleNodes.length > 0) {
|
|
238
211
|
var io = ensureRectFetchObserver();
|
|
239
212
|
rectFetchStartTime = performance.now();
|
|
240
|
-
for (var i = 0; i < visibleNodes.length; i++)
|
|
241
|
-
io.observe(visibleNodes[i]);
|
|
242
|
-
}
|
|
213
|
+
for (var i = 0; i < visibleNodes.length; i++) io.observe(visibleNodes[i]);
|
|
243
214
|
var _iteratorNormalCompletion1 = true,
|
|
244
215
|
_didIteratorError1 = false,
|
|
245
216
|
_iteratorError1 = void 0;
|
|
@@ -253,21 +224,15 @@ if (ENABLE) {
|
|
|
253
224
|
_iteratorError1 = err;
|
|
254
225
|
} finally {
|
|
255
226
|
try {
|
|
256
|
-
if (!_iteratorNormalCompletion1 && _iterator1.return != null)
|
|
257
|
-
_iterator1.return();
|
|
258
|
-
}
|
|
227
|
+
if (!_iteratorNormalCompletion1 && _iterator1.return != null) _iterator1.return();
|
|
259
228
|
} finally {
|
|
260
|
-
if (_didIteratorError1)
|
|
261
|
-
throw _iteratorError1;
|
|
262
|
-
}
|
|
229
|
+
if (_didIteratorError1) throw _iteratorError1;
|
|
263
230
|
}
|
|
264
231
|
}
|
|
265
232
|
await new Promise(function (res) {
|
|
266
233
|
rectFetchResolve = res;
|
|
267
234
|
});
|
|
268
|
-
for (var i1 = 0; i1 < visibleNodes.length; i1++)
|
|
269
|
-
io.unobserve(visibleNodes[i1]);
|
|
270
|
-
}
|
|
235
|
+
for (var i1 = 0; i1 < visibleNodes.length; i1++) io.unobserve(visibleNodes[i1]);
|
|
271
236
|
var _iteratorNormalCompletion2 = true,
|
|
272
237
|
_didIteratorError2 = false,
|
|
273
238
|
_iteratorError2 = void 0;
|
|
@@ -281,23 +246,13 @@ if (ENABLE) {
|
|
|
281
246
|
_iteratorError2 = err;
|
|
282
247
|
} finally {
|
|
283
248
|
try {
|
|
284
|
-
if (!_iteratorNormalCompletion2 && _iterator2.return != null)
|
|
285
|
-
_iterator2.return();
|
|
286
|
-
}
|
|
249
|
+
if (!_iteratorNormalCompletion2 && _iterator2.return != null) _iterator2.return();
|
|
287
250
|
} finally {
|
|
288
|
-
if (_didIteratorError2)
|
|
289
|
-
throw _iteratorError2;
|
|
290
|
-
}
|
|
251
|
+
if (_didIteratorError2) throw _iteratorError2;
|
|
291
252
|
}
|
|
292
253
|
}
|
|
293
|
-
if (lastCallbackDelay > 50)
|
|
294
|
-
|
|
295
|
-
} else if (lastCallbackDelay < 20) {
|
|
296
|
-
skipFrames = Math.max(skipFrames - 1, BASE_SKIP_FRAMES);
|
|
297
|
-
}
|
|
298
|
-
for (var i2 = 0; i2 < visibleNodes.length; i2++) {
|
|
299
|
-
updateLayoutIfChanged(visibleNodes[i2]);
|
|
300
|
-
}
|
|
254
|
+
if (lastCallbackDelay > 50) skipFrames = Math.min(skipFrames + 2, MAX_SKIP_FRAMES);else if (lastCallbackDelay < 20) skipFrames = Math.max(skipFrames - 1, BASE_SKIP_FRAMES);
|
|
255
|
+
for (var i2 = 0; i2 < visibleNodes.length; i2++) updateLayoutIfChanged(visibleNodes[i2]);
|
|
301
256
|
}
|
|
302
257
|
}
|
|
303
258
|
rAF ? rAF(layoutOnAnimationFrame) : setTimeout(layoutOnAnimationFrame, 16);
|
|
@@ -361,9 +316,7 @@ function cleanupNode(node) {
|
|
|
361
316
|
LayoutDisableKey.delete(node);
|
|
362
317
|
NodeRectCache.delete(node);
|
|
363
318
|
IntersectionState.delete(node);
|
|
364
|
-
if (globalIntersectionObserver)
|
|
365
|
-
globalIntersectionObserver.unobserve(node);
|
|
366
|
-
}
|
|
319
|
+
if (globalIntersectionObserver) globalIntersectionObserver.unobserve(node);
|
|
367
320
|
}
|
|
368
321
|
var PrevHostNode = /* @__PURE__ */new WeakMap();
|
|
369
322
|
function useElementLayout(ref, onLayout) {
|
|
@@ -410,32 +363,24 @@ function useElementLayout(ref, onLayout) {
|
|
|
410
363
|
globalIntersectionObserver.observe(node2);
|
|
411
364
|
IntersectionState.set(node2, true);
|
|
412
365
|
}
|
|
413
|
-
if (process.env.NODE_ENV === "development" && isDebugLayout()) {
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
});
|
|
420
|
-
}
|
|
366
|
+
if (process.env.NODE_ENV === "development" && isDebugLayout()) console.log("[useElementLayout] register", {
|
|
367
|
+
tag: node2.tagName,
|
|
368
|
+
id: node2.id || void 0,
|
|
369
|
+
className: (node2.className || "").slice(0, 60) || void 0,
|
|
370
|
+
totalNodes: Nodes.size
|
|
371
|
+
});
|
|
421
372
|
var parentNode = node2.parentNode;
|
|
422
|
-
if (parentNode)
|
|
423
|
-
onLayout(getElementLayoutEvent(node2.getBoundingClientRect(), parentNode.getBoundingClientRect(), node2));
|
|
424
|
-
}
|
|
373
|
+
if (parentNode) onLayout(getElementLayoutEvent(node2.getBoundingClientRect(), parentNode.getBoundingClientRect(), node2));
|
|
425
374
|
return function () {
|
|
426
375
|
cleanupNode(node2);
|
|
427
376
|
var swappedNode = PrevHostNode.get(ref);
|
|
428
|
-
if (swappedNode && swappedNode !== node2)
|
|
429
|
-
cleanupNode(swappedNode);
|
|
430
|
-
}
|
|
377
|
+
if (swappedNode && swappedNode !== node2) cleanupNode(swappedNode);
|
|
431
378
|
PrevHostNode.delete(ref);
|
|
432
379
|
};
|
|
433
380
|
}, [ref, !!onLayout]);
|
|
434
381
|
}
|
|
435
382
|
function ensureWebElement(x) {
|
|
436
|
-
if (typeof HTMLElement === "undefined")
|
|
437
|
-
return void 0;
|
|
438
|
-
}
|
|
383
|
+
if (typeof HTMLElement === "undefined") return;
|
|
439
384
|
return _instanceof(x, HTMLElement) ? x : void 0;
|
|
440
385
|
}
|
|
441
386
|
var getBoundingClientRectAsync = function (node) {
|
|
@@ -454,17 +399,13 @@ var measureNode = async function (node, relativeTo) {
|
|
|
454
399
|
var relativeNode = relativeTo || (node === null || node === void 0 ? void 0 : node.parentElement);
|
|
455
400
|
if (_instanceof(relativeNode, HTMLElement)) {
|
|
456
401
|
var [nodeDim, relativeNodeDim] = await Promise.all([getBoundingClientRectAsync(node), getBoundingClientRectAsync(relativeNode)]);
|
|
457
|
-
if (relativeNodeDim && nodeDim)
|
|
458
|
-
return getRelativeDimensions(nodeDim, relativeNodeDim, node);
|
|
459
|
-
}
|
|
402
|
+
if (relativeNodeDim && nodeDim) return getRelativeDimensions(nodeDim, relativeNodeDim, node);
|
|
460
403
|
}
|
|
461
404
|
return null;
|
|
462
405
|
};
|
|
463
406
|
var measure = async function (node, callback) {
|
|
464
407
|
var out = await measureNode(node, _instanceof(node.parentNode, HTMLElement) ? node.parentNode : null);
|
|
465
|
-
if (out)
|
|
466
|
-
callback === null || callback === void 0 ? void 0 : callback(out.x, out.y, out.width, out.height, out.pageX, out.pageY);
|
|
467
|
-
}
|
|
408
|
+
if (out) callback === null || callback === void 0 || callback(out.x, out.y, out.width, out.height, out.pageX, out.pageY);
|
|
468
409
|
return out;
|
|
469
410
|
};
|
|
470
411
|
function createMeasure(node) {
|
|
@@ -474,9 +415,7 @@ function createMeasure(node) {
|
|
|
474
415
|
}
|
|
475
416
|
var measureInWindow = async function (node, callback) {
|
|
476
417
|
var out = await measureNode(node, null);
|
|
477
|
-
if (out)
|
|
478
|
-
callback === null || callback === void 0 ? void 0 : callback(out.pageX, out.pageY, out.width, out.height);
|
|
479
|
-
}
|
|
418
|
+
if (out) callback === null || callback === void 0 || callback(out.pageX, out.pageY, out.width, out.height);
|
|
480
419
|
return out;
|
|
481
420
|
};
|
|
482
421
|
var createMeasureInWindow = function (node) {
|
|
@@ -486,9 +425,7 @@ var createMeasureInWindow = function (node) {
|
|
|
486
425
|
};
|
|
487
426
|
var measureLayout = async function (node, relativeNode, callback) {
|
|
488
427
|
var out = await measureNode(node, relativeNode);
|
|
489
|
-
if (out)
|
|
490
|
-
callback === null || callback === void 0 ? void 0 : callback(out.x, out.y, out.width, out.height, out.pageX, out.pageY);
|
|
491
|
-
}
|
|
428
|
+
if (out) callback === null || callback === void 0 || callback(out.x, out.y, out.width, out.height, out.pageX, out.pageY);
|
|
492
429
|
return out;
|
|
493
430
|
};
|
|
494
431
|
function createMeasureLayout(node) {
|