react-resizable-panels 2.0.8 → 2.0.9
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/CHANGELOG.md +5 -0
- package/dist/react-resizable-panels.browser.cjs.js +110 -3
- package/dist/react-resizable-panels.browser.development.cjs.js +110 -3
- package/dist/react-resizable-panels.browser.development.esm.js +109 -2
- package/dist/react-resizable-panels.browser.esm.js +109 -2
- package/dist/react-resizable-panels.cjs.js +110 -3
- package/dist/react-resizable-panels.development.cjs.js +110 -3
- package/dist/react-resizable-panels.development.esm.js +109 -2
- package/dist/react-resizable-panels.development.node.cjs.js +110 -3
- package/dist/react-resizable-panels.development.node.esm.js +109 -2
- package/dist/react-resizable-panels.esm.js +109 -2
- package/dist/react-resizable-panels.node.cjs.js +110 -3
- package/dist/react-resizable-panels.node.esm.js +109 -2
- package/package.json +1 -4
- package/src/PanelResizeHandleRegistry.ts +2 -2
- package/src/vendor/stacking-order.ts +130 -0
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
|
-
var stackingOrder = require('stacking-order');
|
|
7
6
|
|
|
8
7
|
function _interopNamespace(e) {
|
|
9
8
|
if (e && e.__esModule) return e;
|
|
@@ -317,6 +316,114 @@ function intersects(rectOne, rectTwo, strict) {
|
|
|
317
316
|
}
|
|
318
317
|
}
|
|
319
318
|
|
|
319
|
+
// Forked from NPM stacking-order@2.0.0
|
|
320
|
+
|
|
321
|
+
/**
|
|
322
|
+
* Determine which of two nodes appears in front of the other —
|
|
323
|
+
* if `a` is in front, returns 1, otherwise returns -1
|
|
324
|
+
* @param {HTMLElement} a
|
|
325
|
+
* @param {HTMLElement} b
|
|
326
|
+
*/
|
|
327
|
+
function compare(a, b) {
|
|
328
|
+
if (a === b) throw new Error("Cannot compare node with itself");
|
|
329
|
+
const ancestors = {
|
|
330
|
+
a: get_ancestors(a),
|
|
331
|
+
b: get_ancestors(b)
|
|
332
|
+
};
|
|
333
|
+
let common_ancestor;
|
|
334
|
+
|
|
335
|
+
// remove shared ancestors
|
|
336
|
+
while (ancestors.a.at(-1) === ancestors.b.at(-1)) {
|
|
337
|
+
a = ancestors.a.pop();
|
|
338
|
+
b = ancestors.b.pop();
|
|
339
|
+
common_ancestor = a;
|
|
340
|
+
}
|
|
341
|
+
assert(common_ancestor);
|
|
342
|
+
const z_indexes = {
|
|
343
|
+
a: get_z_index(find_stacking_context(ancestors.a)),
|
|
344
|
+
b: get_z_index(find_stacking_context(ancestors.b))
|
|
345
|
+
};
|
|
346
|
+
if (z_indexes.a === z_indexes.b) {
|
|
347
|
+
const children = common_ancestor.childNodes;
|
|
348
|
+
const furthest_ancestors = {
|
|
349
|
+
a: ancestors.a.at(-1),
|
|
350
|
+
b: ancestors.b.at(-1)
|
|
351
|
+
};
|
|
352
|
+
let i = children.length;
|
|
353
|
+
while (i--) {
|
|
354
|
+
const child = children[i];
|
|
355
|
+
if (child === furthest_ancestors.a) return 1;
|
|
356
|
+
if (child === furthest_ancestors.b) return -1;
|
|
357
|
+
}
|
|
358
|
+
}
|
|
359
|
+
return Math.sign(z_indexes.a - z_indexes.b);
|
|
360
|
+
}
|
|
361
|
+
const props = /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMode|filter|webkitFilter|isolation)\b/;
|
|
362
|
+
|
|
363
|
+
/** @param {HTMLElement} node */
|
|
364
|
+
function is_flex_item(node) {
|
|
365
|
+
const display = getComputedStyle(get_parent(node)).display;
|
|
366
|
+
return display === "flex" || display === "inline-flex";
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
/** @param {HTMLElement} node */
|
|
370
|
+
function creates_stacking_context(node) {
|
|
371
|
+
const style = getComputedStyle(node);
|
|
372
|
+
|
|
373
|
+
// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
|
|
374
|
+
if (style.position === "fixed") return true;
|
|
375
|
+
// Forked to fix upstream bug https://github.com/Rich-Harris/stacking-order/issues/3
|
|
376
|
+
// if (
|
|
377
|
+
// (style.zIndex !== "auto" && style.position !== "static") ||
|
|
378
|
+
// is_flex_item(node)
|
|
379
|
+
// )
|
|
380
|
+
if (style.zIndex !== "auto" && (style.position !== "static" || is_flex_item(node))) return true;
|
|
381
|
+
if (+style.opacity < 1) return true;
|
|
382
|
+
if ("transform" in style && style.transform !== "none") return true;
|
|
383
|
+
if ("webkitTransform" in style && style.webkitTransform !== "none") return true;
|
|
384
|
+
if ("mixBlendMode" in style && style.mixBlendMode !== "normal") return true;
|
|
385
|
+
if ("filter" in style && style.filter !== "none") return true;
|
|
386
|
+
if ("webkitFilter" in style && style.webkitFilter !== "none") return true;
|
|
387
|
+
if ("isolation" in style && style.isolation === "isolate") return true;
|
|
388
|
+
if (props.test(style.willChange)) return true;
|
|
389
|
+
// @ts-expect-error
|
|
390
|
+
if (style.webkitOverflowScrolling === "touch") return true;
|
|
391
|
+
return false;
|
|
392
|
+
}
|
|
393
|
+
|
|
394
|
+
/** @param {HTMLElement[]} nodes */
|
|
395
|
+
function find_stacking_context(nodes) {
|
|
396
|
+
let i = nodes.length;
|
|
397
|
+
while (i--) {
|
|
398
|
+
const node = nodes[i];
|
|
399
|
+
assert(node);
|
|
400
|
+
if (creates_stacking_context(node)) return node;
|
|
401
|
+
}
|
|
402
|
+
return null;
|
|
403
|
+
}
|
|
404
|
+
|
|
405
|
+
/** @param {HTMLElement} node */
|
|
406
|
+
function get_z_index(node) {
|
|
407
|
+
return node && Number(getComputedStyle(node).zIndex) || 0;
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
/** @param {HTMLElement} node */
|
|
411
|
+
function get_ancestors(node) {
|
|
412
|
+
const ancestors = [];
|
|
413
|
+
while (node) {
|
|
414
|
+
ancestors.push(node);
|
|
415
|
+
node = get_parent(node);
|
|
416
|
+
}
|
|
417
|
+
return ancestors; // [ node, ... <body>, <html>, document ]
|
|
418
|
+
}
|
|
419
|
+
|
|
420
|
+
/** @param {HTMLElement} node */
|
|
421
|
+
function get_parent(node) {
|
|
422
|
+
var _node$parentNode;
|
|
423
|
+
// @ts-ignore
|
|
424
|
+
return ((_node$parentNode = node.parentNode) === null || _node$parentNode === void 0 ? void 0 : _node$parentNode.host) || node.parentNode;
|
|
425
|
+
}
|
|
426
|
+
|
|
320
427
|
const EXCEEDED_HORIZONTAL_MIN = 0b0001;
|
|
321
428
|
const EXCEEDED_HORIZONTAL_MAX = 0b0010;
|
|
322
429
|
const EXCEEDED_VERTICAL_MIN = 0b0100;
|
|
@@ -458,7 +565,7 @@ function recalculateIntersectingHandles({
|
|
|
458
565
|
// Calculating stacking order has a cost, so we should avoid it if possible
|
|
459
566
|
// That is why we only check potentially intersecting handles,
|
|
460
567
|
// and why we skip if the event target is within the handle's DOM
|
|
461
|
-
|
|
568
|
+
compare(targetElement, dragHandleElement) > 0) {
|
|
462
569
|
// If the target is above the drag handle, then we also need to confirm they overlap
|
|
463
570
|
// If they are beside each other (e.g. a panel and its drag handle) then the handle is still interactive
|
|
464
571
|
//
|
|
@@ -529,7 +636,7 @@ function updateListeners() {
|
|
|
529
636
|
window.removeEventListener("mouseup", handlePointerUp);
|
|
530
637
|
window.removeEventListener("touchcancel", handlePointerUp);
|
|
531
638
|
window.removeEventListener("touchend", handlePointerUp);
|
|
532
|
-
if (
|
|
639
|
+
if (registeredResizeHandlers.size > 0) {
|
|
533
640
|
if (isPointerDown) {
|
|
534
641
|
if (intersectingHandles.length > 0) {
|
|
535
642
|
ownerDocumentCounts.forEach((count, ownerDocument) => {
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { compare } from 'stacking-order';
|
|
3
2
|
|
|
4
3
|
const isBrowser = typeof window !== "undefined";
|
|
5
4
|
|
|
@@ -293,6 +292,114 @@ function intersects(rectOne, rectTwo, strict) {
|
|
|
293
292
|
}
|
|
294
293
|
}
|
|
295
294
|
|
|
295
|
+
// Forked from NPM stacking-order@2.0.0
|
|
296
|
+
|
|
297
|
+
/**
|
|
298
|
+
* Determine which of two nodes appears in front of the other —
|
|
299
|
+
* if `a` is in front, returns 1, otherwise returns -1
|
|
300
|
+
* @param {HTMLElement} a
|
|
301
|
+
* @param {HTMLElement} b
|
|
302
|
+
*/
|
|
303
|
+
function compare(a, b) {
|
|
304
|
+
if (a === b) throw new Error("Cannot compare node with itself");
|
|
305
|
+
const ancestors = {
|
|
306
|
+
a: get_ancestors(a),
|
|
307
|
+
b: get_ancestors(b)
|
|
308
|
+
};
|
|
309
|
+
let common_ancestor;
|
|
310
|
+
|
|
311
|
+
// remove shared ancestors
|
|
312
|
+
while (ancestors.a.at(-1) === ancestors.b.at(-1)) {
|
|
313
|
+
a = ancestors.a.pop();
|
|
314
|
+
b = ancestors.b.pop();
|
|
315
|
+
common_ancestor = a;
|
|
316
|
+
}
|
|
317
|
+
assert(common_ancestor);
|
|
318
|
+
const z_indexes = {
|
|
319
|
+
a: get_z_index(find_stacking_context(ancestors.a)),
|
|
320
|
+
b: get_z_index(find_stacking_context(ancestors.b))
|
|
321
|
+
};
|
|
322
|
+
if (z_indexes.a === z_indexes.b) {
|
|
323
|
+
const children = common_ancestor.childNodes;
|
|
324
|
+
const furthest_ancestors = {
|
|
325
|
+
a: ancestors.a.at(-1),
|
|
326
|
+
b: ancestors.b.at(-1)
|
|
327
|
+
};
|
|
328
|
+
let i = children.length;
|
|
329
|
+
while (i--) {
|
|
330
|
+
const child = children[i];
|
|
331
|
+
if (child === furthest_ancestors.a) return 1;
|
|
332
|
+
if (child === furthest_ancestors.b) return -1;
|
|
333
|
+
}
|
|
334
|
+
}
|
|
335
|
+
return Math.sign(z_indexes.a - z_indexes.b);
|
|
336
|
+
}
|
|
337
|
+
const props = /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMode|filter|webkitFilter|isolation)\b/;
|
|
338
|
+
|
|
339
|
+
/** @param {HTMLElement} node */
|
|
340
|
+
function is_flex_item(node) {
|
|
341
|
+
const display = getComputedStyle(get_parent(node)).display;
|
|
342
|
+
return display === "flex" || display === "inline-flex";
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
/** @param {HTMLElement} node */
|
|
346
|
+
function creates_stacking_context(node) {
|
|
347
|
+
const style = getComputedStyle(node);
|
|
348
|
+
|
|
349
|
+
// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
|
|
350
|
+
if (style.position === "fixed") return true;
|
|
351
|
+
// Forked to fix upstream bug https://github.com/Rich-Harris/stacking-order/issues/3
|
|
352
|
+
// if (
|
|
353
|
+
// (style.zIndex !== "auto" && style.position !== "static") ||
|
|
354
|
+
// is_flex_item(node)
|
|
355
|
+
// )
|
|
356
|
+
if (style.zIndex !== "auto" && (style.position !== "static" || is_flex_item(node))) return true;
|
|
357
|
+
if (+style.opacity < 1) return true;
|
|
358
|
+
if ("transform" in style && style.transform !== "none") return true;
|
|
359
|
+
if ("webkitTransform" in style && style.webkitTransform !== "none") return true;
|
|
360
|
+
if ("mixBlendMode" in style && style.mixBlendMode !== "normal") return true;
|
|
361
|
+
if ("filter" in style && style.filter !== "none") return true;
|
|
362
|
+
if ("webkitFilter" in style && style.webkitFilter !== "none") return true;
|
|
363
|
+
if ("isolation" in style && style.isolation === "isolate") return true;
|
|
364
|
+
if (props.test(style.willChange)) return true;
|
|
365
|
+
// @ts-expect-error
|
|
366
|
+
if (style.webkitOverflowScrolling === "touch") return true;
|
|
367
|
+
return false;
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
/** @param {HTMLElement[]} nodes */
|
|
371
|
+
function find_stacking_context(nodes) {
|
|
372
|
+
let i = nodes.length;
|
|
373
|
+
while (i--) {
|
|
374
|
+
const node = nodes[i];
|
|
375
|
+
assert(node);
|
|
376
|
+
if (creates_stacking_context(node)) return node;
|
|
377
|
+
}
|
|
378
|
+
return null;
|
|
379
|
+
}
|
|
380
|
+
|
|
381
|
+
/** @param {HTMLElement} node */
|
|
382
|
+
function get_z_index(node) {
|
|
383
|
+
return node && Number(getComputedStyle(node).zIndex) || 0;
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
/** @param {HTMLElement} node */
|
|
387
|
+
function get_ancestors(node) {
|
|
388
|
+
const ancestors = [];
|
|
389
|
+
while (node) {
|
|
390
|
+
ancestors.push(node);
|
|
391
|
+
node = get_parent(node);
|
|
392
|
+
}
|
|
393
|
+
return ancestors; // [ node, ... <body>, <html>, document ]
|
|
394
|
+
}
|
|
395
|
+
|
|
396
|
+
/** @param {HTMLElement} node */
|
|
397
|
+
function get_parent(node) {
|
|
398
|
+
var _node$parentNode;
|
|
399
|
+
// @ts-ignore
|
|
400
|
+
return ((_node$parentNode = node.parentNode) === null || _node$parentNode === void 0 ? void 0 : _node$parentNode.host) || node.parentNode;
|
|
401
|
+
}
|
|
402
|
+
|
|
296
403
|
const EXCEEDED_HORIZONTAL_MIN = 0b0001;
|
|
297
404
|
const EXCEEDED_HORIZONTAL_MAX = 0b0010;
|
|
298
405
|
const EXCEEDED_VERTICAL_MIN = 0b0100;
|
|
@@ -505,7 +612,7 @@ function updateListeners() {
|
|
|
505
612
|
window.removeEventListener("mouseup", handlePointerUp);
|
|
506
613
|
window.removeEventListener("touchcancel", handlePointerUp);
|
|
507
614
|
window.removeEventListener("touchend", handlePointerUp);
|
|
508
|
-
if (
|
|
615
|
+
if (registeredResizeHandlers.size > 0) {
|
|
509
616
|
if (isPointerDown) {
|
|
510
617
|
if (intersectingHandles.length > 0) {
|
|
511
618
|
ownerDocumentCounts.forEach((count, ownerDocument) => {
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
|
-
var stackingOrder = require('stacking-order');
|
|
7
6
|
|
|
8
7
|
function _interopNamespace(e) {
|
|
9
8
|
if (e && e.__esModule) return e;
|
|
@@ -279,6 +278,114 @@ function intersects(rectOne, rectTwo, strict) {
|
|
|
279
278
|
}
|
|
280
279
|
}
|
|
281
280
|
|
|
281
|
+
// Forked from NPM stacking-order@2.0.0
|
|
282
|
+
|
|
283
|
+
/**
|
|
284
|
+
* Determine which of two nodes appears in front of the other —
|
|
285
|
+
* if `a` is in front, returns 1, otherwise returns -1
|
|
286
|
+
* @param {HTMLElement} a
|
|
287
|
+
* @param {HTMLElement} b
|
|
288
|
+
*/
|
|
289
|
+
function compare(a, b) {
|
|
290
|
+
if (a === b) throw new Error("Cannot compare node with itself");
|
|
291
|
+
const ancestors = {
|
|
292
|
+
a: get_ancestors(a),
|
|
293
|
+
b: get_ancestors(b)
|
|
294
|
+
};
|
|
295
|
+
let common_ancestor;
|
|
296
|
+
|
|
297
|
+
// remove shared ancestors
|
|
298
|
+
while (ancestors.a.at(-1) === ancestors.b.at(-1)) {
|
|
299
|
+
a = ancestors.a.pop();
|
|
300
|
+
b = ancestors.b.pop();
|
|
301
|
+
common_ancestor = a;
|
|
302
|
+
}
|
|
303
|
+
assert(common_ancestor);
|
|
304
|
+
const z_indexes = {
|
|
305
|
+
a: get_z_index(find_stacking_context(ancestors.a)),
|
|
306
|
+
b: get_z_index(find_stacking_context(ancestors.b))
|
|
307
|
+
};
|
|
308
|
+
if (z_indexes.a === z_indexes.b) {
|
|
309
|
+
const children = common_ancestor.childNodes;
|
|
310
|
+
const furthest_ancestors = {
|
|
311
|
+
a: ancestors.a.at(-1),
|
|
312
|
+
b: ancestors.b.at(-1)
|
|
313
|
+
};
|
|
314
|
+
let i = children.length;
|
|
315
|
+
while (i--) {
|
|
316
|
+
const child = children[i];
|
|
317
|
+
if (child === furthest_ancestors.a) return 1;
|
|
318
|
+
if (child === furthest_ancestors.b) return -1;
|
|
319
|
+
}
|
|
320
|
+
}
|
|
321
|
+
return Math.sign(z_indexes.a - z_indexes.b);
|
|
322
|
+
}
|
|
323
|
+
const props = /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMode|filter|webkitFilter|isolation)\b/;
|
|
324
|
+
|
|
325
|
+
/** @param {HTMLElement} node */
|
|
326
|
+
function is_flex_item(node) {
|
|
327
|
+
const display = getComputedStyle(get_parent(node)).display;
|
|
328
|
+
return display === "flex" || display === "inline-flex";
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
/** @param {HTMLElement} node */
|
|
332
|
+
function creates_stacking_context(node) {
|
|
333
|
+
const style = getComputedStyle(node);
|
|
334
|
+
|
|
335
|
+
// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
|
|
336
|
+
if (style.position === "fixed") return true;
|
|
337
|
+
// Forked to fix upstream bug https://github.com/Rich-Harris/stacking-order/issues/3
|
|
338
|
+
// if (
|
|
339
|
+
// (style.zIndex !== "auto" && style.position !== "static") ||
|
|
340
|
+
// is_flex_item(node)
|
|
341
|
+
// )
|
|
342
|
+
if (style.zIndex !== "auto" && (style.position !== "static" || is_flex_item(node))) return true;
|
|
343
|
+
if (+style.opacity < 1) return true;
|
|
344
|
+
if ("transform" in style && style.transform !== "none") return true;
|
|
345
|
+
if ("webkitTransform" in style && style.webkitTransform !== "none") return true;
|
|
346
|
+
if ("mixBlendMode" in style && style.mixBlendMode !== "normal") return true;
|
|
347
|
+
if ("filter" in style && style.filter !== "none") return true;
|
|
348
|
+
if ("webkitFilter" in style && style.webkitFilter !== "none") return true;
|
|
349
|
+
if ("isolation" in style && style.isolation === "isolate") return true;
|
|
350
|
+
if (props.test(style.willChange)) return true;
|
|
351
|
+
// @ts-expect-error
|
|
352
|
+
if (style.webkitOverflowScrolling === "touch") return true;
|
|
353
|
+
return false;
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
/** @param {HTMLElement[]} nodes */
|
|
357
|
+
function find_stacking_context(nodes) {
|
|
358
|
+
let i = nodes.length;
|
|
359
|
+
while (i--) {
|
|
360
|
+
const node = nodes[i];
|
|
361
|
+
assert(node);
|
|
362
|
+
if (creates_stacking_context(node)) return node;
|
|
363
|
+
}
|
|
364
|
+
return null;
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
/** @param {HTMLElement} node */
|
|
368
|
+
function get_z_index(node) {
|
|
369
|
+
return node && Number(getComputedStyle(node).zIndex) || 0;
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
/** @param {HTMLElement} node */
|
|
373
|
+
function get_ancestors(node) {
|
|
374
|
+
const ancestors = [];
|
|
375
|
+
while (node) {
|
|
376
|
+
ancestors.push(node);
|
|
377
|
+
node = get_parent(node);
|
|
378
|
+
}
|
|
379
|
+
return ancestors; // [ node, ... <body>, <html>, document ]
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
/** @param {HTMLElement} node */
|
|
383
|
+
function get_parent(node) {
|
|
384
|
+
var _node$parentNode;
|
|
385
|
+
// @ts-ignore
|
|
386
|
+
return ((_node$parentNode = node.parentNode) === null || _node$parentNode === void 0 ? void 0 : _node$parentNode.host) || node.parentNode;
|
|
387
|
+
}
|
|
388
|
+
|
|
282
389
|
const EXCEEDED_HORIZONTAL_MIN = 0b0001;
|
|
283
390
|
const EXCEEDED_HORIZONTAL_MAX = 0b0010;
|
|
284
391
|
const EXCEEDED_VERTICAL_MIN = 0b0100;
|
|
@@ -420,7 +527,7 @@ function recalculateIntersectingHandles({
|
|
|
420
527
|
// Calculating stacking order has a cost, so we should avoid it if possible
|
|
421
528
|
// That is why we only check potentially intersecting handles,
|
|
422
529
|
// and why we skip if the event target is within the handle's DOM
|
|
423
|
-
|
|
530
|
+
compare(targetElement, dragHandleElement) > 0) {
|
|
424
531
|
// If the target is above the drag handle, then we also need to confirm they overlap
|
|
425
532
|
// If they are beside each other (e.g. a panel and its drag handle) then the handle is still interactive
|
|
426
533
|
//
|
|
@@ -491,7 +598,7 @@ function updateListeners() {
|
|
|
491
598
|
window.removeEventListener("mouseup", handlePointerUp);
|
|
492
599
|
window.removeEventListener("touchcancel", handlePointerUp);
|
|
493
600
|
window.removeEventListener("touchend", handlePointerUp);
|
|
494
|
-
if (
|
|
601
|
+
if (registeredResizeHandlers.size > 0) {
|
|
495
602
|
if (isPointerDown) {
|
|
496
603
|
if (intersectingHandles.length > 0) {
|
|
497
604
|
ownerDocumentCounts.forEach((count, ownerDocument) => {
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { compare } from 'stacking-order';
|
|
3
2
|
|
|
4
3
|
// This module exists to work around Webpack issue https://github.com/webpack/webpack/issues/14814
|
|
5
4
|
|
|
@@ -255,6 +254,114 @@ function intersects(rectOne, rectTwo, strict) {
|
|
|
255
254
|
}
|
|
256
255
|
}
|
|
257
256
|
|
|
257
|
+
// Forked from NPM stacking-order@2.0.0
|
|
258
|
+
|
|
259
|
+
/**
|
|
260
|
+
* Determine which of two nodes appears in front of the other —
|
|
261
|
+
* if `a` is in front, returns 1, otherwise returns -1
|
|
262
|
+
* @param {HTMLElement} a
|
|
263
|
+
* @param {HTMLElement} b
|
|
264
|
+
*/
|
|
265
|
+
function compare(a, b) {
|
|
266
|
+
if (a === b) throw new Error("Cannot compare node with itself");
|
|
267
|
+
const ancestors = {
|
|
268
|
+
a: get_ancestors(a),
|
|
269
|
+
b: get_ancestors(b)
|
|
270
|
+
};
|
|
271
|
+
let common_ancestor;
|
|
272
|
+
|
|
273
|
+
// remove shared ancestors
|
|
274
|
+
while (ancestors.a.at(-1) === ancestors.b.at(-1)) {
|
|
275
|
+
a = ancestors.a.pop();
|
|
276
|
+
b = ancestors.b.pop();
|
|
277
|
+
common_ancestor = a;
|
|
278
|
+
}
|
|
279
|
+
assert(common_ancestor);
|
|
280
|
+
const z_indexes = {
|
|
281
|
+
a: get_z_index(find_stacking_context(ancestors.a)),
|
|
282
|
+
b: get_z_index(find_stacking_context(ancestors.b))
|
|
283
|
+
};
|
|
284
|
+
if (z_indexes.a === z_indexes.b) {
|
|
285
|
+
const children = common_ancestor.childNodes;
|
|
286
|
+
const furthest_ancestors = {
|
|
287
|
+
a: ancestors.a.at(-1),
|
|
288
|
+
b: ancestors.b.at(-1)
|
|
289
|
+
};
|
|
290
|
+
let i = children.length;
|
|
291
|
+
while (i--) {
|
|
292
|
+
const child = children[i];
|
|
293
|
+
if (child === furthest_ancestors.a) return 1;
|
|
294
|
+
if (child === furthest_ancestors.b) return -1;
|
|
295
|
+
}
|
|
296
|
+
}
|
|
297
|
+
return Math.sign(z_indexes.a - z_indexes.b);
|
|
298
|
+
}
|
|
299
|
+
const props = /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMode|filter|webkitFilter|isolation)\b/;
|
|
300
|
+
|
|
301
|
+
/** @param {HTMLElement} node */
|
|
302
|
+
function is_flex_item(node) {
|
|
303
|
+
const display = getComputedStyle(get_parent(node)).display;
|
|
304
|
+
return display === "flex" || display === "inline-flex";
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
/** @param {HTMLElement} node */
|
|
308
|
+
function creates_stacking_context(node) {
|
|
309
|
+
const style = getComputedStyle(node);
|
|
310
|
+
|
|
311
|
+
// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
|
|
312
|
+
if (style.position === "fixed") return true;
|
|
313
|
+
// Forked to fix upstream bug https://github.com/Rich-Harris/stacking-order/issues/3
|
|
314
|
+
// if (
|
|
315
|
+
// (style.zIndex !== "auto" && style.position !== "static") ||
|
|
316
|
+
// is_flex_item(node)
|
|
317
|
+
// )
|
|
318
|
+
if (style.zIndex !== "auto" && (style.position !== "static" || is_flex_item(node))) return true;
|
|
319
|
+
if (+style.opacity < 1) return true;
|
|
320
|
+
if ("transform" in style && style.transform !== "none") return true;
|
|
321
|
+
if ("webkitTransform" in style && style.webkitTransform !== "none") return true;
|
|
322
|
+
if ("mixBlendMode" in style && style.mixBlendMode !== "normal") return true;
|
|
323
|
+
if ("filter" in style && style.filter !== "none") return true;
|
|
324
|
+
if ("webkitFilter" in style && style.webkitFilter !== "none") return true;
|
|
325
|
+
if ("isolation" in style && style.isolation === "isolate") return true;
|
|
326
|
+
if (props.test(style.willChange)) return true;
|
|
327
|
+
// @ts-expect-error
|
|
328
|
+
if (style.webkitOverflowScrolling === "touch") return true;
|
|
329
|
+
return false;
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
/** @param {HTMLElement[]} nodes */
|
|
333
|
+
function find_stacking_context(nodes) {
|
|
334
|
+
let i = nodes.length;
|
|
335
|
+
while (i--) {
|
|
336
|
+
const node = nodes[i];
|
|
337
|
+
assert(node);
|
|
338
|
+
if (creates_stacking_context(node)) return node;
|
|
339
|
+
}
|
|
340
|
+
return null;
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
/** @param {HTMLElement} node */
|
|
344
|
+
function get_z_index(node) {
|
|
345
|
+
return node && Number(getComputedStyle(node).zIndex) || 0;
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
/** @param {HTMLElement} node */
|
|
349
|
+
function get_ancestors(node) {
|
|
350
|
+
const ancestors = [];
|
|
351
|
+
while (node) {
|
|
352
|
+
ancestors.push(node);
|
|
353
|
+
node = get_parent(node);
|
|
354
|
+
}
|
|
355
|
+
return ancestors; // [ node, ... <body>, <html>, document ]
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
/** @param {HTMLElement} node */
|
|
359
|
+
function get_parent(node) {
|
|
360
|
+
var _node$parentNode;
|
|
361
|
+
// @ts-ignore
|
|
362
|
+
return ((_node$parentNode = node.parentNode) === null || _node$parentNode === void 0 ? void 0 : _node$parentNode.host) || node.parentNode;
|
|
363
|
+
}
|
|
364
|
+
|
|
258
365
|
const EXCEEDED_HORIZONTAL_MIN = 0b0001;
|
|
259
366
|
const EXCEEDED_HORIZONTAL_MAX = 0b0010;
|
|
260
367
|
const EXCEEDED_VERTICAL_MIN = 0b0100;
|
|
@@ -467,7 +574,7 @@ function updateListeners() {
|
|
|
467
574
|
window.removeEventListener("mouseup", handlePointerUp);
|
|
468
575
|
window.removeEventListener("touchcancel", handlePointerUp);
|
|
469
576
|
window.removeEventListener("touchend", handlePointerUp);
|
|
470
|
-
if (
|
|
577
|
+
if (registeredResizeHandlers.size > 0) {
|
|
471
578
|
if (isPointerDown) {
|
|
472
579
|
if (intersectingHandles.length > 0) {
|
|
473
580
|
ownerDocumentCounts.forEach((count, ownerDocument) => {
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { compare } from 'stacking-order';
|
|
3
2
|
|
|
4
3
|
const isBrowser = typeof window !== "undefined";
|
|
5
4
|
|
|
@@ -282,6 +281,114 @@ function intersects(rectOne, rectTwo, strict) {
|
|
|
282
281
|
}
|
|
283
282
|
}
|
|
284
283
|
|
|
284
|
+
// Forked from NPM stacking-order@2.0.0
|
|
285
|
+
|
|
286
|
+
/**
|
|
287
|
+
* Determine which of two nodes appears in front of the other —
|
|
288
|
+
* if `a` is in front, returns 1, otherwise returns -1
|
|
289
|
+
* @param {HTMLElement} a
|
|
290
|
+
* @param {HTMLElement} b
|
|
291
|
+
*/
|
|
292
|
+
function compare(a, b) {
|
|
293
|
+
if (a === b) throw new Error("Cannot compare node with itself");
|
|
294
|
+
const ancestors = {
|
|
295
|
+
a: get_ancestors(a),
|
|
296
|
+
b: get_ancestors(b)
|
|
297
|
+
};
|
|
298
|
+
let common_ancestor;
|
|
299
|
+
|
|
300
|
+
// remove shared ancestors
|
|
301
|
+
while (ancestors.a.at(-1) === ancestors.b.at(-1)) {
|
|
302
|
+
a = ancestors.a.pop();
|
|
303
|
+
b = ancestors.b.pop();
|
|
304
|
+
common_ancestor = a;
|
|
305
|
+
}
|
|
306
|
+
assert(common_ancestor);
|
|
307
|
+
const z_indexes = {
|
|
308
|
+
a: get_z_index(find_stacking_context(ancestors.a)),
|
|
309
|
+
b: get_z_index(find_stacking_context(ancestors.b))
|
|
310
|
+
};
|
|
311
|
+
if (z_indexes.a === z_indexes.b) {
|
|
312
|
+
const children = common_ancestor.childNodes;
|
|
313
|
+
const furthest_ancestors = {
|
|
314
|
+
a: ancestors.a.at(-1),
|
|
315
|
+
b: ancestors.b.at(-1)
|
|
316
|
+
};
|
|
317
|
+
let i = children.length;
|
|
318
|
+
while (i--) {
|
|
319
|
+
const child = children[i];
|
|
320
|
+
if (child === furthest_ancestors.a) return 1;
|
|
321
|
+
if (child === furthest_ancestors.b) return -1;
|
|
322
|
+
}
|
|
323
|
+
}
|
|
324
|
+
return Math.sign(z_indexes.a - z_indexes.b);
|
|
325
|
+
}
|
|
326
|
+
const props = /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMode|filter|webkitFilter|isolation)\b/;
|
|
327
|
+
|
|
328
|
+
/** @param {HTMLElement} node */
|
|
329
|
+
function is_flex_item(node) {
|
|
330
|
+
const display = getComputedStyle(get_parent(node)).display;
|
|
331
|
+
return display === "flex" || display === "inline-flex";
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
/** @param {HTMLElement} node */
|
|
335
|
+
function creates_stacking_context(node) {
|
|
336
|
+
const style = getComputedStyle(node);
|
|
337
|
+
|
|
338
|
+
// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
|
|
339
|
+
if (style.position === "fixed") return true;
|
|
340
|
+
// Forked to fix upstream bug https://github.com/Rich-Harris/stacking-order/issues/3
|
|
341
|
+
// if (
|
|
342
|
+
// (style.zIndex !== "auto" && style.position !== "static") ||
|
|
343
|
+
// is_flex_item(node)
|
|
344
|
+
// )
|
|
345
|
+
if (style.zIndex !== "auto" && (style.position !== "static" || is_flex_item(node))) return true;
|
|
346
|
+
if (+style.opacity < 1) return true;
|
|
347
|
+
if ("transform" in style && style.transform !== "none") return true;
|
|
348
|
+
if ("webkitTransform" in style && style.webkitTransform !== "none") return true;
|
|
349
|
+
if ("mixBlendMode" in style && style.mixBlendMode !== "normal") return true;
|
|
350
|
+
if ("filter" in style && style.filter !== "none") return true;
|
|
351
|
+
if ("webkitFilter" in style && style.webkitFilter !== "none") return true;
|
|
352
|
+
if ("isolation" in style && style.isolation === "isolate") return true;
|
|
353
|
+
if (props.test(style.willChange)) return true;
|
|
354
|
+
// @ts-expect-error
|
|
355
|
+
if (style.webkitOverflowScrolling === "touch") return true;
|
|
356
|
+
return false;
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
/** @param {HTMLElement[]} nodes */
|
|
360
|
+
function find_stacking_context(nodes) {
|
|
361
|
+
let i = nodes.length;
|
|
362
|
+
while (i--) {
|
|
363
|
+
const node = nodes[i];
|
|
364
|
+
assert(node);
|
|
365
|
+
if (creates_stacking_context(node)) return node;
|
|
366
|
+
}
|
|
367
|
+
return null;
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
/** @param {HTMLElement} node */
|
|
371
|
+
function get_z_index(node) {
|
|
372
|
+
return node && Number(getComputedStyle(node).zIndex) || 0;
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
/** @param {HTMLElement} node */
|
|
376
|
+
function get_ancestors(node) {
|
|
377
|
+
const ancestors = [];
|
|
378
|
+
while (node) {
|
|
379
|
+
ancestors.push(node);
|
|
380
|
+
node = get_parent(node);
|
|
381
|
+
}
|
|
382
|
+
return ancestors; // [ node, ... <body>, <html>, document ]
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
/** @param {HTMLElement} node */
|
|
386
|
+
function get_parent(node) {
|
|
387
|
+
var _node$parentNode;
|
|
388
|
+
// @ts-ignore
|
|
389
|
+
return ((_node$parentNode = node.parentNode) === null || _node$parentNode === void 0 ? void 0 : _node$parentNode.host) || node.parentNode;
|
|
390
|
+
}
|
|
391
|
+
|
|
285
392
|
const EXCEEDED_HORIZONTAL_MIN = 0b0001;
|
|
286
393
|
const EXCEEDED_HORIZONTAL_MAX = 0b0010;
|
|
287
394
|
const EXCEEDED_VERTICAL_MIN = 0b0100;
|
|
@@ -494,7 +601,7 @@ function updateListeners() {
|
|
|
494
601
|
window.removeEventListener("mouseup", handlePointerUp);
|
|
495
602
|
window.removeEventListener("touchcancel", handlePointerUp);
|
|
496
603
|
window.removeEventListener("touchend", handlePointerUp);
|
|
497
|
-
if (
|
|
604
|
+
if (registeredResizeHandlers.size > 0) {
|
|
498
605
|
if (isPointerDown) {
|
|
499
606
|
if (intersectingHandles.length > 0) {
|
|
500
607
|
ownerDocumentCounts.forEach((count, ownerDocument) => {
|