@tamagui/use-element-layout 3.0.0-beta.831.1 → 3.0.0-beta.889.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 +54 -89
- package/dist/cjs/index.native.cjs +44 -64
- package/dist/cjs/index.native.js +44 -64
- package/dist/cjs/index.native.js.map +1 -1
- package/dist/esm/index.js +53 -88
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/index.mjs +53 -88
- package/dist/esm/index.mjs.map +1 -1
- package/dist/esm/index.native.js +44 -64
- package/dist/esm/index.native.js.map +1 -1
- package/package.json +4 -4
- package/src/index.tsx +78 -244
- package/types/index.d.ts +6 -6
- package/types/index.d.ts.map +2 -2
package/dist/cjs/index.cjs
CHANGED
|
@@ -41,12 +41,10 @@ var import_jsx_runtime = require("react/jsx-runtime");
|
|
|
41
41
|
const LayoutHandlers = /* @__PURE__ */ new WeakMap();
|
|
42
42
|
const LayoutDisableKey = /* @__PURE__ */ new WeakMap();
|
|
43
43
|
const Nodes = /* @__PURE__ */ new Set();
|
|
44
|
+
const NodeRectCache = /* @__PURE__ */ new WeakMap();
|
|
45
|
+
const PrevHostNode = /* @__PURE__ */ new WeakMap();
|
|
44
46
|
const usePretransformDimensions = () => globalThis.__TAMAGUI_ONLAYOUT_PRETRANSFORM === true || process.env.TAMAGUI_ONLAYOUT_PRETRANSFORM === "1";
|
|
45
|
-
|
|
46
|
-
function isDebugLayout() {
|
|
47
|
-
if (_debugLayout === void 0) _debugLayout = typeof window !== "undefined" && new URLSearchParams(window.location.search).has("__tamaDebugLayout");
|
|
48
|
-
return _debugLayout;
|
|
49
|
-
}
|
|
47
|
+
const isDebugLayout = () => typeof window !== "undefined" && window.location?.search?.includes("__tamaDebugLayout");
|
|
50
48
|
const DisableLayoutContextValues = {};
|
|
51
49
|
const DisableLayoutContextKey = (0, import_react.createContext)("");
|
|
52
50
|
const ENABLE = typeof IntersectionObserver !== "undefined";
|
|
@@ -65,7 +63,6 @@ const LayoutMeasurementController = ({ disable, children }) => {
|
|
|
65
63
|
let strategy = "async";
|
|
66
64
|
let resumeLayoutLoop;
|
|
67
65
|
let measureOnNextFrame;
|
|
68
|
-
const NodeRectCache = /* @__PURE__ */ new WeakMap();
|
|
69
66
|
let avoidUpdates = true;
|
|
70
67
|
const queuedUpdates = /* @__PURE__ */ new Map();
|
|
71
68
|
function enable() {
|
|
@@ -93,17 +90,7 @@ if (ENABLE) {
|
|
|
93
90
|
}
|
|
94
91
|
}, { threshold: 0 });
|
|
95
92
|
return rectFetchObserver;
|
|
96
|
-
},
|
|
97
|
-
if (frameScheduled || strategy === "off" || Nodes.size === 0 || document.hidden) return;
|
|
98
|
-
frameScheduled = true;
|
|
99
|
-
rAF ? rAF(layoutOnAnimationFrame) : setTimeout(layoutOnAnimationFrame, 16);
|
|
100
|
-
};
|
|
101
|
-
const BoundingRects = /* @__PURE__ */ new WeakMap();
|
|
102
|
-
let rectFetchObserver = null;
|
|
103
|
-
let rectFetchResolve = null;
|
|
104
|
-
let rectFetchStartTime = 0;
|
|
105
|
-
let lastCallbackDelay = 0;
|
|
106
|
-
async function updateLayoutIfChanged(node) {
|
|
93
|
+
}, updateLayoutIfChanged = function(node) {
|
|
107
94
|
if (typeof LayoutHandlers.get(node) !== "function") return;
|
|
108
95
|
const parentNode = node.parentElement;
|
|
109
96
|
if (!parentNode) return;
|
|
@@ -118,7 +105,16 @@ if (ENABLE) {
|
|
|
118
105
|
parentRect = parentNode.getBoundingClientRect();
|
|
119
106
|
}
|
|
120
107
|
emitLayoutIfChanged(node, parentNode, nodeRect, parentRect);
|
|
121
|
-
}
|
|
108
|
+
}, scheduleLayoutFrame = function() {
|
|
109
|
+
if (frameScheduled || strategy === "off" || Nodes.size === 0 || document.hidden) return;
|
|
110
|
+
frameScheduled = true;
|
|
111
|
+
rAF ? rAF(layoutOnAnimationFrame) : setTimeout(layoutOnAnimationFrame, 16);
|
|
112
|
+
};
|
|
113
|
+
const BoundingRects = /* @__PURE__ */ new WeakMap();
|
|
114
|
+
let rectFetchObserver = null;
|
|
115
|
+
let rectFetchResolve = null;
|
|
116
|
+
let rectFetchStartTime = 0;
|
|
117
|
+
let lastCallbackDelay = 0;
|
|
122
118
|
const rAF = typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : void 0;
|
|
123
119
|
const userSkipVal = process.env.TAMAGUI_LAYOUT_FRAME_SKIP;
|
|
124
120
|
const BASE_SKIP_FRAMES = userSkipVal ? +userSkipVal : 10;
|
|
@@ -173,32 +169,27 @@ if (ENABLE) {
|
|
|
173
169
|
document.addEventListener("visibilitychange", scheduleLayoutFrame);
|
|
174
170
|
scheduleLayoutFrame();
|
|
175
171
|
}
|
|
176
|
-
const getElementLayoutEvent = (nodeRect, parentRect, node) => {
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
width: node.offsetWidth,
|
|
188
|
-
height: node.offsetHeight
|
|
189
|
-
};
|
|
190
|
-
};
|
|
172
|
+
const getElementLayoutEvent = (nodeRect, parentRect, node) => ({
|
|
173
|
+
nativeEvent: {
|
|
174
|
+
layout: getRelativeDimensions(nodeRect, parentRect, node),
|
|
175
|
+
target: nodeRect
|
|
176
|
+
},
|
|
177
|
+
timeStamp: Date.now()
|
|
178
|
+
});
|
|
179
|
+
const getPreTransformDimensions = (node) => ({
|
|
180
|
+
width: node.offsetWidth,
|
|
181
|
+
height: node.offsetHeight
|
|
182
|
+
});
|
|
191
183
|
const getRelativeDimensions = (a, b, aNode) => {
|
|
192
|
-
const
|
|
193
|
-
const
|
|
194
|
-
const y = top - b.top;
|
|
184
|
+
const left = a.left - b.left;
|
|
185
|
+
const top = a.top - b.top;
|
|
195
186
|
const { width, height } = usePretransformDimensions() && aNode ? getPreTransformDimensions(aNode) : {
|
|
196
187
|
width: a.width,
|
|
197
188
|
height: a.height
|
|
198
189
|
};
|
|
199
190
|
return {
|
|
200
|
-
x,
|
|
201
|
-
y,
|
|
191
|
+
x: left,
|
|
192
|
+
y: top,
|
|
202
193
|
width,
|
|
203
194
|
height,
|
|
204
195
|
pageX: a.left,
|
|
@@ -216,13 +207,6 @@ function emitLayoutIfChanged(node, parentNode, nodeRect, parentRect) {
|
|
|
216
207
|
NodeRectCache.set(node, nodeRect);
|
|
217
208
|
NodeRectCache.set(parentNode, parentRect);
|
|
218
209
|
const event = getElementLayoutEvent(nodeRect, parentRect, node);
|
|
219
|
-
if (process.env.NODE_ENV === "development" && isDebugLayout()) console.log("[useElementLayout] change", {
|
|
220
|
-
tag: node.tagName,
|
|
221
|
-
id: node.id || void 0,
|
|
222
|
-
className: (node.className || "").slice(0, 60) || void 0,
|
|
223
|
-
layout: event.nativeEvent.layout,
|
|
224
|
-
first: !cachedRect
|
|
225
|
-
});
|
|
226
210
|
if (avoidUpdates) queuedUpdates.set(node, () => onLayout(event));
|
|
227
211
|
else onLayout(event);
|
|
228
212
|
}
|
|
@@ -243,7 +227,6 @@ function cleanupNode(node) {
|
|
|
243
227
|
LayoutDisableKey.delete(node);
|
|
244
228
|
NodeRectCache.delete(node);
|
|
245
229
|
}
|
|
246
|
-
const PrevHostNode = /* @__PURE__ */ new WeakMap();
|
|
247
230
|
function emitLayoutSync(node) {
|
|
248
231
|
const onLayout = LayoutHandlers.get(node);
|
|
249
232
|
if (typeof onLayout !== "function") return;
|
|
@@ -266,48 +249,36 @@ function useElementLayout(ref, onLayout) {
|
|
|
266
249
|
if (!onLayout) return;
|
|
267
250
|
const nextNode = ensureWebElement(ref.current?.host);
|
|
268
251
|
const prevNode = PrevHostNode.get(ref);
|
|
269
|
-
if (nextNode
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
if (!onLayout) return;
|
|
279
|
-
const node2 = ref.current?.host;
|
|
280
|
-
if (!node2) return;
|
|
281
|
-
LayoutHandlers.set(node2, onLayout);
|
|
282
|
-
observeLayoutNode(node2, disableKey);
|
|
283
|
-
if (process.env.NODE_ENV === "development" && isDebugLayout()) console.log("[useElementLayout] register", {
|
|
284
|
-
tag: node2.tagName,
|
|
285
|
-
id: node2.id || void 0,
|
|
286
|
-
className: (node2.className || "").slice(0, 60) || void 0,
|
|
287
|
-
totalNodes: Nodes.size
|
|
288
|
-
});
|
|
252
|
+
if (nextNode !== prevNode) {
|
|
253
|
+
if (prevNode) cleanupNode(prevNode);
|
|
254
|
+
PrevHostNode.set(ref, nextNode);
|
|
255
|
+
if (nextNode) {
|
|
256
|
+
LayoutHandlers.set(nextNode, onLayout);
|
|
257
|
+
observeLayoutNode(nextNode, disableKey);
|
|
258
|
+
emitLayoutSync(nextNode);
|
|
259
|
+
}
|
|
260
|
+
}
|
|
289
261
|
return () => {
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
262
|
+
const activeNode = ensureWebElement(ref.current?.host);
|
|
263
|
+
if (activeNode) cleanupNode(activeNode);
|
|
264
|
+
const swapped = PrevHostNode.get(ref);
|
|
265
|
+
if (swapped && swapped !== activeNode) cleanupNode(swapped);
|
|
293
266
|
PrevHostNode.delete(ref);
|
|
294
267
|
};
|
|
295
268
|
}, [ref, !!onLayout]);
|
|
296
269
|
}
|
|
297
270
|
function ensureWebElement(x) {
|
|
298
|
-
if (typeof HTMLElement === "undefined") return;
|
|
271
|
+
if (typeof HTMLElement === "undefined") return void 0;
|
|
299
272
|
return x instanceof HTMLElement ? x : void 0;
|
|
300
273
|
}
|
|
301
|
-
const getBoundingClientRectAsync = (node) => {
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
return res(entries[0].boundingClientRect);
|
|
307
|
-
}, { threshold: 0 });
|
|
308
|
-
io.observe(node);
|
|
274
|
+
const getBoundingClientRectAsync = (node) => new Promise((res) => {
|
|
275
|
+
if (!node || node.nodeType !== 1) return res(false);
|
|
276
|
+
const io = new IntersectionObserver((entries) => {
|
|
277
|
+
io.disconnect();
|
|
278
|
+
res(entries[0].boundingClientRect);
|
|
309
279
|
});
|
|
310
|
-
|
|
280
|
+
io.observe(node);
|
|
281
|
+
});
|
|
311
282
|
const measureNode = async (node, relativeTo) => {
|
|
312
283
|
const relativeNode = relativeTo || node?.parentElement;
|
|
313
284
|
if (relativeNode instanceof HTMLElement) {
|
|
@@ -317,26 +288,20 @@ const measureNode = async (node, relativeTo) => {
|
|
|
317
288
|
return null;
|
|
318
289
|
};
|
|
319
290
|
const measure = async (node, callback) => {
|
|
320
|
-
const out = await measureNode(node, node.
|
|
291
|
+
const out = await measureNode(node, node.parentElement);
|
|
321
292
|
if (out) callback?.(out.x, out.y, out.width, out.height, out.pageX, out.pageY);
|
|
322
293
|
return out;
|
|
323
294
|
};
|
|
324
|
-
|
|
325
|
-
return (callback) => measure(node, callback);
|
|
326
|
-
}
|
|
295
|
+
const createMeasure = (node) => (callback) => measure(node, callback);
|
|
327
296
|
const measureInWindow = async (node, callback) => {
|
|
328
297
|
const out = await measureNode(node, null);
|
|
329
298
|
if (out) callback?.(out.pageX, out.pageY, out.width, out.height);
|
|
330
299
|
return out;
|
|
331
300
|
};
|
|
332
|
-
const createMeasureInWindow = (node) =>
|
|
333
|
-
return (callback) => measureInWindow(node, callback);
|
|
334
|
-
};
|
|
301
|
+
const createMeasureInWindow = (node) => (callback) => measureInWindow(node, callback);
|
|
335
302
|
const measureLayout = async (node, relativeNode, callback) => {
|
|
336
303
|
const out = await measureNode(node, relativeNode);
|
|
337
304
|
if (out) callback?.(out.x, out.y, out.width, out.height, out.pageX, out.pageY);
|
|
338
305
|
return out;
|
|
339
306
|
};
|
|
340
|
-
|
|
341
|
-
return (relativeTo, callback) => measureLayout(node, relativeTo, callback);
|
|
342
|
-
}
|
|
307
|
+
const createMeasureLayout = (node) => (relativeTo, callback) => measureLayout(node, relativeTo, callback);
|
|
@@ -47,14 +47,15 @@ function _instanceof(left, right) {
|
|
|
47
47
|
var LayoutHandlers = /* @__PURE__ */ new WeakMap();
|
|
48
48
|
var LayoutDisableKey = /* @__PURE__ */ new WeakMap();
|
|
49
49
|
var Nodes = /* @__PURE__ */ new Set();
|
|
50
|
+
var NodeRectCache = /* @__PURE__ */ new WeakMap();
|
|
51
|
+
var PrevHostNode = /* @__PURE__ */ new WeakMap();
|
|
50
52
|
var usePretransformDimensions = function() {
|
|
51
53
|
return globalThis.__TAMAGUI_ONLAYOUT_PRETRANSFORM === true || process.env.TAMAGUI_ONLAYOUT_PRETRANSFORM === "1";
|
|
52
54
|
};
|
|
53
|
-
var
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
}
|
|
55
|
+
var isDebugLayout = function() {
|
|
56
|
+
var _window_location_search, _window_location;
|
|
57
|
+
return typeof window !== "undefined" && ((_window_location = window.location) === null || _window_location === void 0 ? void 0 : (_window_location_search = _window_location.search) === null || _window_location_search === void 0 ? void 0 : _window_location_search.includes("__tamaDebugLayout"));
|
|
58
|
+
};
|
|
58
59
|
var DisableLayoutContextValues = {};
|
|
59
60
|
var DisableLayoutContextKey = /* @__PURE__ */ (0, import_react.createContext)("");
|
|
60
61
|
var ENABLE = false;
|
|
@@ -74,7 +75,6 @@ var LayoutMeasurementController = function(param) {
|
|
|
74
75
|
var strategy = "async";
|
|
75
76
|
var resumeLayoutLoop;
|
|
76
77
|
var measureOnNextFrame;
|
|
77
|
-
var NodeRectCache = /* @__PURE__ */ new WeakMap();
|
|
78
78
|
var avoidUpdates = true;
|
|
79
79
|
var queuedUpdates = /* @__PURE__ */ new Map();
|
|
80
80
|
function enable() {
|
|
@@ -104,17 +104,7 @@ if (ENABLE) {
|
|
|
104
104
|
}
|
|
105
105
|
}, { threshold: 0 });
|
|
106
106
|
return rectFetchObserver;
|
|
107
|
-
},
|
|
108
|
-
if (frameScheduled || strategy === "off" || Nodes.size === 0 || document.hidden) return;
|
|
109
|
-
frameScheduled = true;
|
|
110
|
-
rAF ? rAF(layoutOnAnimationFrame) : setTimeout(layoutOnAnimationFrame, 16);
|
|
111
|
-
};
|
|
112
|
-
var BoundingRects = /* @__PURE__ */ new WeakMap();
|
|
113
|
-
var rectFetchObserver = null;
|
|
114
|
-
var rectFetchResolve = null;
|
|
115
|
-
var rectFetchStartTime = 0;
|
|
116
|
-
var lastCallbackDelay = 0;
|
|
117
|
-
async function updateLayoutIfChanged(node) {
|
|
107
|
+
}, updateLayoutIfChanged2 = function(node) {
|
|
118
108
|
if (typeof LayoutHandlers.get(node) !== "function") return;
|
|
119
109
|
var parentNode = node.parentElement;
|
|
120
110
|
if (!parentNode) return;
|
|
@@ -129,7 +119,16 @@ if (ENABLE) {
|
|
|
129
119
|
parentRect = parentNode.getBoundingClientRect();
|
|
130
120
|
}
|
|
131
121
|
emitLayoutIfChanged(node, parentNode, nodeRect, parentRect);
|
|
132
|
-
}
|
|
122
|
+
}, scheduleLayoutFrame2 = function() {
|
|
123
|
+
if (frameScheduled || strategy === "off" || Nodes.size === 0 || document.hidden) return;
|
|
124
|
+
frameScheduled = true;
|
|
125
|
+
rAF ? rAF(layoutOnAnimationFrame) : setTimeout(layoutOnAnimationFrame, 16);
|
|
126
|
+
};
|
|
127
|
+
var BoundingRects = /* @__PURE__ */ new WeakMap();
|
|
128
|
+
var rectFetchObserver = null;
|
|
129
|
+
var rectFetchResolve = null;
|
|
130
|
+
var rectFetchStartTime = 0;
|
|
131
|
+
var lastCallbackDelay = 0;
|
|
133
132
|
var rAF = typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : void 0;
|
|
134
133
|
var userSkipVal = process.env.TAMAGUI_LAYOUT_FRAME_SKIP;
|
|
135
134
|
var BASE_SKIP_FRAMES = userSkipVal ? +userSkipVal : 10;
|
|
@@ -213,7 +212,7 @@ if (ENABLE) {
|
|
|
213
212
|
}
|
|
214
213
|
if (lastCallbackDelay > 50) skipFrames = Math.min(skipFrames + 2, MAX_SKIP_FRAMES);
|
|
215
214
|
else if (lastCallbackDelay < 20) skipFrames = Math.max(skipFrames - 1, BASE_SKIP_FRAMES);
|
|
216
|
-
for (var i2 = 0; i2 < activeNodes.length; i2++)
|
|
215
|
+
for (var i2 = 0; i2 < activeNodes.length; i2++) updateLayoutIfChanged2(activeNodes[i2]);
|
|
217
216
|
}
|
|
218
217
|
}
|
|
219
218
|
frameScheduled = false;
|
|
@@ -243,16 +242,15 @@ var getPreTransformDimensions = function(node) {
|
|
|
243
242
|
};
|
|
244
243
|
};
|
|
245
244
|
var getRelativeDimensions = function(a, b, aNode) {
|
|
246
|
-
var
|
|
247
|
-
var
|
|
248
|
-
var y = top - b.top;
|
|
245
|
+
var left = a.left - b.left;
|
|
246
|
+
var top = a.top - b.top;
|
|
249
247
|
var { width, height } = usePretransformDimensions() && aNode ? getPreTransformDimensions(aNode) : {
|
|
250
248
|
width: a.width,
|
|
251
249
|
height: a.height
|
|
252
250
|
};
|
|
253
251
|
return {
|
|
254
|
-
x,
|
|
255
|
-
y,
|
|
252
|
+
x: left,
|
|
253
|
+
y: top,
|
|
256
254
|
width,
|
|
257
255
|
height,
|
|
258
256
|
pageX: a.left,
|
|
@@ -270,13 +268,6 @@ function emitLayoutIfChanged(node, parentNode, nodeRect, parentRect) {
|
|
|
270
268
|
NodeRectCache.set(node, nodeRect);
|
|
271
269
|
NodeRectCache.set(parentNode, parentRect);
|
|
272
270
|
var event = getElementLayoutEvent(nodeRect, parentRect, node);
|
|
273
|
-
if (process.env.NODE_ENV === "development" && isDebugLayout()) console.log("[useElementLayout] change", {
|
|
274
|
-
tag: node.tagName,
|
|
275
|
-
id: node.id || void 0,
|
|
276
|
-
className: (node.className || "").slice(0, 60) || void 0,
|
|
277
|
-
layout: event.nativeEvent.layout,
|
|
278
|
-
first: !cachedRect
|
|
279
|
-
});
|
|
280
271
|
if (avoidUpdates) queuedUpdates.set(node, function() {
|
|
281
272
|
return onLayout(event);
|
|
282
273
|
});
|
|
@@ -301,7 +292,6 @@ function cleanupNode(node) {
|
|
|
301
292
|
LayoutDisableKey.delete(node);
|
|
302
293
|
NodeRectCache.delete(node);
|
|
303
294
|
}
|
|
304
|
-
var PrevHostNode = /* @__PURE__ */ new WeakMap();
|
|
305
295
|
function emitLayoutSync(node) {
|
|
306
296
|
var onLayout = LayoutHandlers.get(node);
|
|
307
297
|
if (typeof onLayout !== "function") return;
|
|
@@ -326,37 +316,27 @@ function useElementLayout(ref, onLayout) {
|
|
|
326
316
|
if (!onLayout) return;
|
|
327
317
|
var nextNode = ensureWebElement((_ref_current2 = ref.current) === null || _ref_current2 === void 0 ? void 0 : _ref_current2.host);
|
|
328
318
|
var prevNode = PrevHostNode.get(ref);
|
|
329
|
-
if (nextNode
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
var _ref_current2;
|
|
339
|
-
if (!onLayout) return;
|
|
340
|
-
var node2 = (_ref_current2 = ref.current) === null || _ref_current2 === void 0 ? void 0 : _ref_current2.host;
|
|
341
|
-
if (!node2) return;
|
|
342
|
-
LayoutHandlers.set(node2, onLayout);
|
|
343
|
-
observeLayoutNode(node2, disableKey);
|
|
344
|
-
if (process.env.NODE_ENV === "development" && isDebugLayout()) console.log("[useElementLayout] register", {
|
|
345
|
-
tag: node2.tagName,
|
|
346
|
-
id: node2.id || void 0,
|
|
347
|
-
className: (node2.className || "").slice(0, 60) || void 0,
|
|
348
|
-
totalNodes: Nodes.size
|
|
349
|
-
});
|
|
319
|
+
if (nextNode !== prevNode) {
|
|
320
|
+
if (prevNode) cleanupNode(prevNode);
|
|
321
|
+
PrevHostNode.set(ref, nextNode);
|
|
322
|
+
if (nextNode) {
|
|
323
|
+
LayoutHandlers.set(nextNode, onLayout);
|
|
324
|
+
observeLayoutNode(nextNode, disableKey);
|
|
325
|
+
emitLayoutSync(nextNode);
|
|
326
|
+
}
|
|
327
|
+
}
|
|
350
328
|
return function() {
|
|
351
|
-
|
|
352
|
-
var
|
|
353
|
-
if (
|
|
329
|
+
var _ref_current3;
|
|
330
|
+
var activeNode = ensureWebElement((_ref_current3 = ref.current) === null || _ref_current3 === void 0 ? void 0 : _ref_current3.host);
|
|
331
|
+
if (activeNode) cleanupNode(activeNode);
|
|
332
|
+
var swapped = PrevHostNode.get(ref);
|
|
333
|
+
if (swapped && swapped !== activeNode) cleanupNode(swapped);
|
|
354
334
|
PrevHostNode.delete(ref);
|
|
355
335
|
};
|
|
356
336
|
}, [ref, !!onLayout]);
|
|
357
337
|
}
|
|
358
338
|
function ensureWebElement(x) {
|
|
359
|
-
if (typeof HTMLElement === "undefined") return;
|
|
339
|
+
if (typeof HTMLElement === "undefined") return void 0;
|
|
360
340
|
return _instanceof(x, HTMLElement) ? x : void 0;
|
|
361
341
|
}
|
|
362
342
|
var getBoundingClientRectAsync = function(node) {
|
|
@@ -364,8 +344,8 @@ var getBoundingClientRectAsync = function(node) {
|
|
|
364
344
|
if (!node || node.nodeType !== 1) return res(false);
|
|
365
345
|
var io = new IntersectionObserver(function(entries) {
|
|
366
346
|
io.disconnect();
|
|
367
|
-
|
|
368
|
-
}
|
|
347
|
+
res(entries[0].boundingClientRect);
|
|
348
|
+
});
|
|
369
349
|
io.observe(node);
|
|
370
350
|
});
|
|
371
351
|
};
|
|
@@ -378,15 +358,15 @@ var measureNode = async function(node, relativeTo) {
|
|
|
378
358
|
return null;
|
|
379
359
|
};
|
|
380
360
|
var measure = async function(node, callback) {
|
|
381
|
-
var out = await measureNode(node,
|
|
361
|
+
var out = await measureNode(node, node.parentElement);
|
|
382
362
|
if (out) callback === null || callback === void 0 || callback(out.x, out.y, out.width, out.height, out.pageX, out.pageY);
|
|
383
363
|
return out;
|
|
384
364
|
};
|
|
385
|
-
|
|
365
|
+
var createMeasure = function(node) {
|
|
386
366
|
return function(callback) {
|
|
387
367
|
return measure(node, callback);
|
|
388
368
|
};
|
|
389
|
-
}
|
|
369
|
+
};
|
|
390
370
|
var measureInWindow = async function(node, callback) {
|
|
391
371
|
var out = await measureNode(node, null);
|
|
392
372
|
if (out) callback === null || callback === void 0 || callback(out.pageX, out.pageY, out.width, out.height);
|
|
@@ -402,8 +382,8 @@ var measureLayout = async function(node, relativeNode, callback) {
|
|
|
402
382
|
if (out) callback === null || callback === void 0 || callback(out.x, out.y, out.width, out.height, out.pageX, out.pageY);
|
|
403
383
|
return out;
|
|
404
384
|
};
|
|
405
|
-
|
|
385
|
+
var createMeasureLayout = function(node) {
|
|
406
386
|
return function(relativeTo, callback) {
|
|
407
387
|
return measureLayout(node, relativeTo, callback);
|
|
408
388
|
};
|
|
409
|
-
}
|
|
389
|
+
};
|
package/dist/cjs/index.native.js
CHANGED
|
@@ -47,14 +47,15 @@ function _instanceof(left, right) {
|
|
|
47
47
|
var LayoutHandlers = /* @__PURE__ */ new WeakMap();
|
|
48
48
|
var LayoutDisableKey = /* @__PURE__ */ new WeakMap();
|
|
49
49
|
var Nodes = /* @__PURE__ */ new Set();
|
|
50
|
+
var NodeRectCache = /* @__PURE__ */ new WeakMap();
|
|
51
|
+
var PrevHostNode = /* @__PURE__ */ new WeakMap();
|
|
50
52
|
var usePretransformDimensions = function() {
|
|
51
53
|
return globalThis.__TAMAGUI_ONLAYOUT_PRETRANSFORM === true || process.env.TAMAGUI_ONLAYOUT_PRETRANSFORM === "1";
|
|
52
54
|
};
|
|
53
|
-
var
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
}
|
|
55
|
+
var isDebugLayout = function() {
|
|
56
|
+
var _window_location_search, _window_location;
|
|
57
|
+
return typeof window !== "undefined" && ((_window_location = window.location) === null || _window_location === void 0 ? void 0 : (_window_location_search = _window_location.search) === null || _window_location_search === void 0 ? void 0 : _window_location_search.includes("__tamaDebugLayout"));
|
|
58
|
+
};
|
|
58
59
|
var DisableLayoutContextValues = {};
|
|
59
60
|
var DisableLayoutContextKey = /* @__PURE__ */ (0, import_react.createContext)("");
|
|
60
61
|
var ENABLE = false;
|
|
@@ -74,7 +75,6 @@ var LayoutMeasurementController = function(param) {
|
|
|
74
75
|
var strategy = "async";
|
|
75
76
|
var resumeLayoutLoop;
|
|
76
77
|
var measureOnNextFrame;
|
|
77
|
-
var NodeRectCache = /* @__PURE__ */ new WeakMap();
|
|
78
78
|
var avoidUpdates = true;
|
|
79
79
|
var queuedUpdates = /* @__PURE__ */ new Map();
|
|
80
80
|
function enable() {
|
|
@@ -104,17 +104,7 @@ if (ENABLE) {
|
|
|
104
104
|
}
|
|
105
105
|
}, { threshold: 0 });
|
|
106
106
|
return rectFetchObserver;
|
|
107
|
-
},
|
|
108
|
-
if (frameScheduled || strategy === "off" || Nodes.size === 0 || document.hidden) return;
|
|
109
|
-
frameScheduled = true;
|
|
110
|
-
rAF ? rAF(layoutOnAnimationFrame) : setTimeout(layoutOnAnimationFrame, 16);
|
|
111
|
-
};
|
|
112
|
-
var BoundingRects = /* @__PURE__ */ new WeakMap();
|
|
113
|
-
var rectFetchObserver = null;
|
|
114
|
-
var rectFetchResolve = null;
|
|
115
|
-
var rectFetchStartTime = 0;
|
|
116
|
-
var lastCallbackDelay = 0;
|
|
117
|
-
async function updateLayoutIfChanged(node) {
|
|
107
|
+
}, updateLayoutIfChanged2 = function(node) {
|
|
118
108
|
if (typeof LayoutHandlers.get(node) !== "function") return;
|
|
119
109
|
var parentNode = node.parentElement;
|
|
120
110
|
if (!parentNode) return;
|
|
@@ -129,7 +119,16 @@ if (ENABLE) {
|
|
|
129
119
|
parentRect = parentNode.getBoundingClientRect();
|
|
130
120
|
}
|
|
131
121
|
emitLayoutIfChanged(node, parentNode, nodeRect, parentRect);
|
|
132
|
-
}
|
|
122
|
+
}, scheduleLayoutFrame2 = function() {
|
|
123
|
+
if (frameScheduled || strategy === "off" || Nodes.size === 0 || document.hidden) return;
|
|
124
|
+
frameScheduled = true;
|
|
125
|
+
rAF ? rAF(layoutOnAnimationFrame) : setTimeout(layoutOnAnimationFrame, 16);
|
|
126
|
+
};
|
|
127
|
+
var BoundingRects = /* @__PURE__ */ new WeakMap();
|
|
128
|
+
var rectFetchObserver = null;
|
|
129
|
+
var rectFetchResolve = null;
|
|
130
|
+
var rectFetchStartTime = 0;
|
|
131
|
+
var lastCallbackDelay = 0;
|
|
133
132
|
var rAF = typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : void 0;
|
|
134
133
|
var userSkipVal = process.env.TAMAGUI_LAYOUT_FRAME_SKIP;
|
|
135
134
|
var BASE_SKIP_FRAMES = userSkipVal ? +userSkipVal : 10;
|
|
@@ -213,7 +212,7 @@ if (ENABLE) {
|
|
|
213
212
|
}
|
|
214
213
|
if (lastCallbackDelay > 50) skipFrames = Math.min(skipFrames + 2, MAX_SKIP_FRAMES);
|
|
215
214
|
else if (lastCallbackDelay < 20) skipFrames = Math.max(skipFrames - 1, BASE_SKIP_FRAMES);
|
|
216
|
-
for (var i2 = 0; i2 < activeNodes.length; i2++)
|
|
215
|
+
for (var i2 = 0; i2 < activeNodes.length; i2++) updateLayoutIfChanged2(activeNodes[i2]);
|
|
217
216
|
}
|
|
218
217
|
}
|
|
219
218
|
frameScheduled = false;
|
|
@@ -243,16 +242,15 @@ var getPreTransformDimensions = function(node) {
|
|
|
243
242
|
};
|
|
244
243
|
};
|
|
245
244
|
var getRelativeDimensions = function(a, b, aNode) {
|
|
246
|
-
var
|
|
247
|
-
var
|
|
248
|
-
var y = top - b.top;
|
|
245
|
+
var left = a.left - b.left;
|
|
246
|
+
var top = a.top - b.top;
|
|
249
247
|
var { width, height } = usePretransformDimensions() && aNode ? getPreTransformDimensions(aNode) : {
|
|
250
248
|
width: a.width,
|
|
251
249
|
height: a.height
|
|
252
250
|
};
|
|
253
251
|
return {
|
|
254
|
-
x,
|
|
255
|
-
y,
|
|
252
|
+
x: left,
|
|
253
|
+
y: top,
|
|
256
254
|
width,
|
|
257
255
|
height,
|
|
258
256
|
pageX: a.left,
|
|
@@ -270,13 +268,6 @@ function emitLayoutIfChanged(node, parentNode, nodeRect, parentRect) {
|
|
|
270
268
|
NodeRectCache.set(node, nodeRect);
|
|
271
269
|
NodeRectCache.set(parentNode, parentRect);
|
|
272
270
|
var event = getElementLayoutEvent(nodeRect, parentRect, node);
|
|
273
|
-
if (process.env.NODE_ENV === "development" && isDebugLayout()) console.log("[useElementLayout] change", {
|
|
274
|
-
tag: node.tagName,
|
|
275
|
-
id: node.id || void 0,
|
|
276
|
-
className: (node.className || "").slice(0, 60) || void 0,
|
|
277
|
-
layout: event.nativeEvent.layout,
|
|
278
|
-
first: !cachedRect
|
|
279
|
-
});
|
|
280
271
|
if (avoidUpdates) queuedUpdates.set(node, function() {
|
|
281
272
|
return onLayout(event);
|
|
282
273
|
});
|
|
@@ -301,7 +292,6 @@ function cleanupNode(node) {
|
|
|
301
292
|
LayoutDisableKey.delete(node);
|
|
302
293
|
NodeRectCache.delete(node);
|
|
303
294
|
}
|
|
304
|
-
var PrevHostNode = /* @__PURE__ */ new WeakMap();
|
|
305
295
|
function emitLayoutSync(node) {
|
|
306
296
|
var onLayout = LayoutHandlers.get(node);
|
|
307
297
|
if (typeof onLayout !== "function") return;
|
|
@@ -326,37 +316,27 @@ function useElementLayout(ref, onLayout) {
|
|
|
326
316
|
if (!onLayout) return;
|
|
327
317
|
var nextNode = ensureWebElement((_ref_current2 = ref.current) === null || _ref_current2 === void 0 ? void 0 : _ref_current2.host);
|
|
328
318
|
var prevNode = PrevHostNode.get(ref);
|
|
329
|
-
if (nextNode
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
var _ref_current2;
|
|
339
|
-
if (!onLayout) return;
|
|
340
|
-
var node2 = (_ref_current2 = ref.current) === null || _ref_current2 === void 0 ? void 0 : _ref_current2.host;
|
|
341
|
-
if (!node2) return;
|
|
342
|
-
LayoutHandlers.set(node2, onLayout);
|
|
343
|
-
observeLayoutNode(node2, disableKey);
|
|
344
|
-
if (process.env.NODE_ENV === "development" && isDebugLayout()) console.log("[useElementLayout] register", {
|
|
345
|
-
tag: node2.tagName,
|
|
346
|
-
id: node2.id || void 0,
|
|
347
|
-
className: (node2.className || "").slice(0, 60) || void 0,
|
|
348
|
-
totalNodes: Nodes.size
|
|
349
|
-
});
|
|
319
|
+
if (nextNode !== prevNode) {
|
|
320
|
+
if (prevNode) cleanupNode(prevNode);
|
|
321
|
+
PrevHostNode.set(ref, nextNode);
|
|
322
|
+
if (nextNode) {
|
|
323
|
+
LayoutHandlers.set(nextNode, onLayout);
|
|
324
|
+
observeLayoutNode(nextNode, disableKey);
|
|
325
|
+
emitLayoutSync(nextNode);
|
|
326
|
+
}
|
|
327
|
+
}
|
|
350
328
|
return function() {
|
|
351
|
-
|
|
352
|
-
var
|
|
353
|
-
if (
|
|
329
|
+
var _ref_current3;
|
|
330
|
+
var activeNode = ensureWebElement((_ref_current3 = ref.current) === null || _ref_current3 === void 0 ? void 0 : _ref_current3.host);
|
|
331
|
+
if (activeNode) cleanupNode(activeNode);
|
|
332
|
+
var swapped = PrevHostNode.get(ref);
|
|
333
|
+
if (swapped && swapped !== activeNode) cleanupNode(swapped);
|
|
354
334
|
PrevHostNode.delete(ref);
|
|
355
335
|
};
|
|
356
336
|
}, [ref, !!onLayout]);
|
|
357
337
|
}
|
|
358
338
|
function ensureWebElement(x) {
|
|
359
|
-
if (typeof HTMLElement === "undefined") return;
|
|
339
|
+
if (typeof HTMLElement === "undefined") return void 0;
|
|
360
340
|
return _instanceof(x, HTMLElement) ? x : void 0;
|
|
361
341
|
}
|
|
362
342
|
var getBoundingClientRectAsync = function(node) {
|
|
@@ -364,8 +344,8 @@ var getBoundingClientRectAsync = function(node) {
|
|
|
364
344
|
if (!node || node.nodeType !== 1) return res(false);
|
|
365
345
|
var io = new IntersectionObserver(function(entries) {
|
|
366
346
|
io.disconnect();
|
|
367
|
-
|
|
368
|
-
}
|
|
347
|
+
res(entries[0].boundingClientRect);
|
|
348
|
+
});
|
|
369
349
|
io.observe(node);
|
|
370
350
|
});
|
|
371
351
|
};
|
|
@@ -378,15 +358,15 @@ var measureNode = async function(node, relativeTo) {
|
|
|
378
358
|
return null;
|
|
379
359
|
};
|
|
380
360
|
var measure = async function(node, callback) {
|
|
381
|
-
var out = await measureNode(node,
|
|
361
|
+
var out = await measureNode(node, node.parentElement);
|
|
382
362
|
if (out) callback === null || callback === void 0 || callback(out.x, out.y, out.width, out.height, out.pageX, out.pageY);
|
|
383
363
|
return out;
|
|
384
364
|
};
|
|
385
|
-
|
|
365
|
+
var createMeasure = function(node) {
|
|
386
366
|
return function(callback) {
|
|
387
367
|
return measure(node, callback);
|
|
388
368
|
};
|
|
389
|
-
}
|
|
369
|
+
};
|
|
390
370
|
var measureInWindow = async function(node, callback) {
|
|
391
371
|
var out = await measureNode(node, null);
|
|
392
372
|
if (out) callback === null || callback === void 0 || callback(out.pageX, out.pageY, out.width, out.height);
|
|
@@ -402,10 +382,10 @@ var measureLayout = async function(node, relativeNode, callback) {
|
|
|
402
382
|
if (out) callback === null || callback === void 0 || callback(out.x, out.y, out.width, out.height, out.pageX, out.pageY);
|
|
403
383
|
return out;
|
|
404
384
|
};
|
|
405
|
-
|
|
385
|
+
var createMeasureLayout = function(node) {
|
|
406
386
|
return function(relativeTo, callback) {
|
|
407
387
|
return measureLayout(node, relativeTo, callback);
|
|
408
388
|
};
|
|
409
|
-
}
|
|
389
|
+
};
|
|
410
390
|
|
|
411
391
|
//# sourceMappingURL=index.native.js.map
|