@hanzogui/use-element-layout 3.0.6 → 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.
@@ -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
- for (var name in all) __defProp(target, name, {
7
- get: all[name],
8
- enumerable: !0
9
- });
10
- },
11
- __copyProps = (to, from, except, desc) => {
12
- if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
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
- return to;
17
- };
17
+ }
18
+ return to;
19
+ };
18
20
  var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
19
- value: !0
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
- import_react = require("react"),
41
- import_jsx_runtime = require("react/jsx-runtime");
42
- const LayoutHandlers = /* @__PURE__ */new WeakMap(),
43
- LayoutDisableKey = /* @__PURE__ */new WeakMap(),
44
- Nodes = /* @__PURE__ */new Set(),
45
- IntersectionState = /* @__PURE__ */new WeakMap(),
46
- usePretransformDimensions = () => globalThis.__HANZO_GUI_ONLAYOUT_PRETRANSFORM === !0 || process.env.HANZO_GUI_ONLAYOUT_PRETRANSFORM === "1";
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
- return _debugLayout === void 0 && (_debugLayout = typeof window < "u" && new URLSearchParams(window.location.search).has("__tamaDebugLayout")), _debugLayout;
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
- DisableLayoutContextKey = (0, import_react.createContext)(""),
53
- ENABLE = typeof IntersectionObserver < "u",
54
- LayoutMeasurementController = ({
55
- disable,
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
- const id = (0, import_react.useId)();
59
- return (0, import_constants.useIsomorphicLayoutEffect)(() => {
60
- DisableLayoutContextValues[id] = disable;
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 = !0;
78
+ let avoidUpdates = true;
73
79
  const queuedUpdates = /* @__PURE__ */new Map();
74
80
  function enable() {
75
- avoidUpdates && (avoidUpdates = !1, queuedUpdates && (queuedUpdates.forEach(cb => cb()), queuedUpdates.clear()));
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 || (globalIntersectionObserver = new IntersectionObserver(entries => {
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
- node = entry.target;
82
- IntersectionState.get(node) !== entry.isIntersecting && IntersectionState.set(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
- return rectFetchObserver || (rectFetchObserver = new IntersectionObserver(entries => {
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++) BoundingRects.set(entries[i].target, entries[i].boundingClientRect);
96
- process.env.NODE_ENV === "development" && isDebugLayout() && lastCallbackDelay > 50 && console.warn("[onLayout-io-delay]", lastCallbackDelay + "ms", entries.length, "entries"), rectFetchResolve && (rectFetchResolve(!0), rectFetchResolve = null);
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
- }), rectFetchObserver);
123
+ });
124
+ return rectFetchObserver;
100
125
  };
101
126
  const BoundingRects = /* @__PURE__ */new WeakMap();
102
- let rectFetchObserver = null,
103
- rectFetchResolve = null,
104
- rectFetchStartTime = 0,
105
- lastCallbackDelay = 0;
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 != "function") return;
133
+ if (typeof onLayout !== "function") return;
109
134
  const parentNode = node.parentElement;
110
135
  if (!parentNode) return;
111
- let nodeRect, parentRect;
136
+ let nodeRect;
137
+ let parentRect;
112
138
  if (strategy === "async") {
113
- if (nodeRect = BoundingRects.get(node), parentRect = BoundingRects.get(parentNode), !nodeRect || !parentRect) return;
114
- } else nodeRect = node.getBoundingClientRect(), parentRect = parentNode.getBoundingClientRect();
115
- const cachedRect = NodeRectCache.get(node),
116
- cachedParentRect = NodeRectCache.get(parentNode),
117
- nodeChanged = !cachedRect || !rectsEqual(cachedRect, nodeRect),
118
- parentChanged = !cachedParentRect || !rectsEqual(cachedParentRect, parentRect);
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), NodeRectCache.set(parentNode, parentRect);
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() && console.log("[useElementLayout] change", {
123
- tag: node.tagName,
124
- id: node.id || void 0,
125
- className: (node.className || "").slice(0, 60) || void 0,
126
- layout: event.nativeEvent.layout,
127
- first: !cachedRect
128
- }), avoidUpdates ? queuedUpdates.set(node, () => onLayout(event)) : onLayout(event);
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 < "u" ? requestAnimationFrame : void 0,
132
- userSkipVal = process.env.HANZO_GUI_LAYOUT_FRAME_SKIP,
133
- BASE_SKIP_FRAMES = userSkipVal ? +userSkipVal : 10,
134
- MAX_SKIP_FRAMES = 20;
135
- let skipFrames = BASE_SKIP_FRAMES,
136
- frameCount = 0;
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 && (frameCount = 0), strategy !== "off") {
143
- const visibleNodes = [],
144
- parentsToObserve = /* @__PURE__ */new Set();
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] === !0 || IntersectionState.get(node) !== !1 && (visibleNodes.push(node), parentsToObserve.add(parentElement));
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++) io.observe(visibleNodes[i]);
158
- for (const parent of parentsToObserve) io.observe(parent);
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++) io.unobserve(visibleNodes[i]);
163
- for (const parent of parentsToObserve) io.unobserve(parent);
164
- lastCallbackDelay > 50 ? skipFrames = Math.min(skipFrames + 2, MAX_SKIP_FRAMES) : lastCallbackDelay < 20 && (skipFrames = Math.max(skipFrames - 1, BASE_SKIP_FRAMES));
165
- for (let i = 0; i < visibleNodes.length; i++) updateLayoutIfChanged(visibleNodes[i]);
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
- getPreTransformDimensions = node => ({
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
- return Nodes.add(node), LayoutHandlers.set(node, onChange), disableKey && LayoutDisableKey.set(node, disableKey), startGlobalObservers(), globalIntersectionObserver && (globalIntersectionObserver.observe(node), IntersectionState.set(node, !0)), () => cleanupNode(node);
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), LayoutHandlers.delete(node), LayoutDisableKey.delete(node), NodeRectCache.delete(node), IntersectionState.delete(node), globalIntersectionObserver && globalIntersectionObserver.unobserve(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
- node = ensureWebElement(ref.current?.host);
216
- node && onLayout && (LayoutHandlers.set(node, onLayout), LayoutDisableKey.set(node, disableKey)), (0, import_constants.useIsomorphicLayoutEffect)(() => {
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
- prevNode = PrevHostNode.get(ref);
220
- if (nextNode === prevNode || (prevNode && cleanupNode(prevNode), PrevHostNode.set(ref, nextNode), !nextNode)) return;
221
- Nodes.add(nextNode), startGlobalObservers(), globalIntersectionObserver && (globalIntersectionObserver.observe(nextNode), IntersectionState.set(nextNode, !0));
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 != "function") return;
315
+ if (typeof handler !== "function") return;
224
316
  const parentNode = nextNode.parentElement;
225
317
  if (!parentNode) return;
226
- const nodeRect = nextNode.getBoundingClientRect(),
227
- parentRect = parentNode.getBoundingClientRect();
228
- NodeRectCache.set(nextNode, nodeRect), NodeRectCache.set(parentNode, parentRect), handler(getElementLayoutEvent(nodeRect, parentRect, nextNode));
229
- }), (0, import_constants.useIsomorphicLayoutEffect)(() => {
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), startGlobalObservers(), globalIntersectionObserver && (globalIntersectionObserver.observe(node2), IntersectionState.set(node2, !0)), process.env.NODE_ENV === "development" && isDebugLayout() && console.log("[useElementLayout] register", {
234
- tag: node2.tagName,
235
- id: node2.id || void 0,
236
- className: (node2.className || "").slice(0, 60) || void 0,
237
- totalNodes: Nodes.size
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
- return parentNode && onLayout(getElementLayoutEvent(node2.getBoundingClientRect(), parentNode.getBoundingClientRect(), node2)), () => {
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 && cleanupNode(swappedNode), PrevHostNode.delete(ref);
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 (!(typeof HTMLElement > "u")) return x instanceof HTMLElement ? x : void 0;
357
+ if (typeof HTMLElement === "undefined") {
358
+ return void 0;
359
+ }
360
+ return x instanceof HTMLElement ? x : void 0;
249
361
  }
250
- const getBoundingClientRectAsync = node => new Promise(res => {
251
- if (!node || node.nodeType !== 1) return res(!1);
252
- const io = new IntersectionObserver(entries => (io.disconnect(), res(entries[0].boundingClientRect)), {
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
- measureNode = async (node, relativeTo) => {
258
- const relativeNode = relativeTo || node?.parentElement;
259
- if (relativeNode instanceof HTMLElement) {
260
- const [nodeDim, relativeNodeDim] = await Promise.all([getBoundingClientRectAsync(node), getBoundingClientRectAsync(relativeNode)]);
261
- if (relativeNodeDim && nodeDim) return getRelativeDimensions(nodeDim, relativeNodeDim, node);
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
- return null;
264
- },
265
- measure = async (node, callback) => {
266
- const out = await measureNode(node, node.parentNode instanceof HTMLElement ? node.parentNode : null);
267
- return out && callback?.(out.x, out.y, out.width, out.height, out.pageX, out.pageY), out;
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
- const out = await measureNode(node, null);
274
- return out && callback?.(out.pageX, out.pageY, out.width, out.height), out;
275
- },
276
- createMeasureInWindow = node => callback => measureInWindow(node, callback),
277
- measureLayout = async (node, relativeNode, callback) => {
278
- const out = await measureNode(node, relativeNode);
279
- return out && callback?.(out.x, out.y, out.width, out.height, out.pageX, out.pageY), out;
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
  }