publ-echo-test 0.0.184 → 0.0.185
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/lib/GridItem/GroupItem.d.ts +1 -0
- package/dist/lib/GridItem/GroupItem.js +2 -1
- package/dist/lib/GridItem/OutsideClickHandler.js +9 -5
- package/dist/lib/GridLayoutEditor/ReactGridLayout.js +1 -1
- package/dist/lib/GridLayoutEditor/utils/renderHelpers.d.ts +1 -0
- package/dist/lib/GridLayoutEditor/utils/renderHelpers.js +7 -4
- package/package.json +1 -1
@@ -5,5 +5,6 @@ declare const GroupItem: ({ children, ...props }: PropsWithChildren<GridItemProp
|
|
5
5
|
onContextGroup: (e: React.MouseEvent) => void;
|
6
6
|
zOrder: number;
|
7
7
|
zOrderInternal: string;
|
8
|
+
minZ?: number | undefined;
|
8
9
|
}>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
|
9
10
|
export default GroupItem;
|
@@ -29,7 +29,7 @@ import { perc, setTopLeft, setTransform, } from '../GridLayoutEditor/utils/rende
|
|
29
29
|
var GroupItem = function (_a) {
|
30
30
|
var _b;
|
31
31
|
var children = _a.children, props = __rest(_a, ["children"]);
|
32
|
-
var resizeHandle = props.resizeHandle, cols = props.cols, zOrder = props.zOrder, zOrderInternal = props.zOrderInternal, isDraggable = props.isDraggable, _c = props.transformScale, transformScale = _c === void 0 ? 1 : _c, isResizable = props.isResizable, useCSSTransforms = props.useCSSTransforms, className = props.className, _d = props.cancel, cancel = _d === void 0 ? '' : _d, _e = props.handle, handle = _e === void 0 ? '' : _e, x = props.x, y = props.y, z = props.z, w = props.w, h = props.h, _f = props.minH, minH = _f === void 0 ? 1 : _f, _g = props.minW, minW = _g === void 0 ? 1 : _g, _h = props.maxH, maxH = _h === void 0 ? Infinity : _h, _j = props.maxW, maxW = _j === void 0 ? Infinity : _j, i = props.i, _k = props.isHiddenVisibility, isHiddenVisibility = _k === void 0 ? false : _k, containerWidth = props.containerWidth, customColWidth = props.customColWidth, autoResize = props.autoResize, onContextGroup = props.onContextGroup;
|
32
|
+
var resizeHandle = props.resizeHandle, cols = props.cols, zOrder = props.zOrder, zOrderInternal = props.zOrderInternal, isDraggable = props.isDraggable, _c = props.transformScale, transformScale = _c === void 0 ? 1 : _c, isResizable = props.isResizable, useCSSTransforms = props.useCSSTransforms, className = props.className, _d = props.cancel, cancel = _d === void 0 ? '' : _d, _e = props.handle, handle = _e === void 0 ? '' : _e, x = props.x, y = props.y, z = props.z, w = props.w, h = props.h, _f = props.minH, minH = _f === void 0 ? 1 : _f, _g = props.minW, minW = _g === void 0 ? 1 : _g, _h = props.maxH, maxH = _h === void 0 ? Infinity : _h, _j = props.maxW, maxW = _j === void 0 ? Infinity : _j, i = props.i, _k = props.isHiddenVisibility, isHiddenVisibility = _k === void 0 ? false : _k, containerWidth = props.containerWidth, customColWidth = props.customColWidth, autoResize = props.autoResize, minZ = props.minZ, onContextGroup = props.onContextGroup;
|
33
33
|
var _l = useState(), resizing = _l[0], setResizing = _l[1];
|
34
34
|
var _m = useState(), dragging = _m[0], setDragging = _m[1];
|
35
35
|
var _o = useState(), dragStart = _o[0], setDragStart = _o[1];
|
@@ -419,6 +419,7 @@ var GroupItem = function (_a) {
|
|
419
419
|
'data-z-index': z,
|
420
420
|
'data-z-order': zOrder,
|
421
421
|
'data-z-order-internal': zOrderInternal,
|
422
|
+
'data-min-z': minZ,
|
422
423
|
className: classNames('react-group-block', child.props.className, className, {
|
423
424
|
static: props.static,
|
424
425
|
isResizing: Boolean(resizing) &&
|
@@ -9,6 +9,7 @@ var OutsideClickHandler = function (_a) {
|
|
9
9
|
width: '0',
|
10
10
|
height: '0'
|
11
11
|
}), childDimensions = _b[0], setChildDimensions = _b[1];
|
12
|
+
var _c = useState(0), zIndex = _c[0], setZIndex = _c[1];
|
12
13
|
useEffect(function () {
|
13
14
|
var handleClickOutside = function (e) {
|
14
15
|
var target = e.target;
|
@@ -31,7 +32,6 @@ var OutsideClickHandler = function (_a) {
|
|
31
32
|
// Get computed style of the child element
|
32
33
|
var computedStyle = window.getComputedStyle(childElement);
|
33
34
|
if (childElement.dataset['groupBlockId'] !== 'BULK') {
|
34
|
-
console.log(childElement);
|
35
35
|
return;
|
36
36
|
}
|
37
37
|
setChildDimensions({
|
@@ -39,6 +39,9 @@ var OutsideClickHandler = function (_a) {
|
|
39
39
|
width: computedStyle.width,
|
40
40
|
height: computedStyle.height
|
41
41
|
});
|
42
|
+
if (childElement.dataset['minZ']) {
|
43
|
+
setZIndex(Number(childElement.dataset['minZ']));
|
44
|
+
}
|
42
45
|
}
|
43
46
|
return function () {
|
44
47
|
setChildDimensions({
|
@@ -46,6 +49,7 @@ var OutsideClickHandler = function (_a) {
|
|
46
49
|
width: '0',
|
47
50
|
height: '0'
|
48
51
|
});
|
52
|
+
setZIndex(0);
|
49
53
|
};
|
50
54
|
}, [children, wrapperRef.current]);
|
51
55
|
// Parse dimensions to numbers for calculations
|
@@ -62,7 +66,7 @@ var OutsideClickHandler = function (_a) {
|
|
62
66
|
marginLeft: "-".concat(shadowOffset, "px"),
|
63
67
|
marginTop: "-".concat(shadowOffset, "px"),
|
64
68
|
pointerEvents: 'none',
|
65
|
-
zIndex: zIndexMap.
|
69
|
+
zIndex: zIndexMap.EDITING_GROUP + zIndex
|
66
70
|
} }), _jsx("div", { className: "border-right", style: {
|
67
71
|
position: 'absolute',
|
68
72
|
transform: childDimensions.transform,
|
@@ -72,7 +76,7 @@ var OutsideClickHandler = function (_a) {
|
|
72
76
|
marginLeft: "".concat(width + shadowOffset - borderThickness, "px"),
|
73
77
|
marginTop: "-".concat(shadowOffset, "px"),
|
74
78
|
pointerEvents: 'none',
|
75
|
-
zIndex: zIndexMap.
|
79
|
+
zIndex: zIndexMap.EDITING_GROUP + zIndex
|
76
80
|
} }), _jsx("div", { className: "border-bottom", style: {
|
77
81
|
position: 'absolute',
|
78
82
|
transform: childDimensions.transform,
|
@@ -82,7 +86,7 @@ var OutsideClickHandler = function (_a) {
|
|
82
86
|
marginLeft: "-".concat(shadowOffset, "px"),
|
83
87
|
marginTop: "".concat(height + shadowOffset - borderThickness, "px"),
|
84
88
|
pointerEvents: 'none',
|
85
|
-
zIndex: zIndexMap.
|
89
|
+
zIndex: zIndexMap.EDITING_GROUP + zIndex
|
86
90
|
} }), _jsx("div", { className: "border-left", style: {
|
87
91
|
position: 'absolute',
|
88
92
|
transform: childDimensions.transform,
|
@@ -92,7 +96,7 @@ var OutsideClickHandler = function (_a) {
|
|
92
96
|
marginLeft: "-".concat(shadowOffset, "px"),
|
93
97
|
marginTop: "-".concat(shadowOffset, "px"),
|
94
98
|
pointerEvents: 'none',
|
95
|
-
zIndex: zIndexMap.
|
99
|
+
zIndex: zIndexMap.EDITING_GROUP + zIndex
|
96
100
|
} })] }))] }));
|
97
101
|
};
|
98
102
|
export default OutsideClickHandler;
|
@@ -721,7 +721,7 @@ var ReactGridLayout = function (_a) {
|
|
721
721
|
'grid-bulk-block': block.blockId === 'BULK',
|
722
722
|
editing: editingGroupBlock === block.blockId,
|
723
723
|
selected: selectedGroupBlock === block.blockId,
|
724
|
-
}), z: zIndex, zOrder: zOrder, zOrderInternal: parent
|
724
|
+
}), z: zIndex, minZ: groupItem.minZ, zOrder: zOrder, zOrderInternal: parent
|
725
725
|
? "".concat(parent[device === 'DESKTOP'
|
726
726
|
? 'zOrderDesktopInternal'
|
727
727
|
: 'zOrderMobileInternal'], " > ").concat(zOrder)
|
@@ -576,10 +576,11 @@ export function getBoundingArea(layout, ids) {
|
|
576
576
|
w: layoutItems[0].w,
|
577
577
|
h: layoutItems[0].h,
|
578
578
|
z: layoutItems[0].z,
|
579
|
+
minZ: layoutItems[0].z,
|
579
580
|
};
|
580
581
|
}
|
581
582
|
var _a = layoutItems.reduce(function (acc, elem, idx, arr) {
|
582
|
-
var _a, _b;
|
583
|
+
var _a, _b, _c, _d;
|
583
584
|
if (idx === arr.length - 1) {
|
584
585
|
return acc;
|
585
586
|
}
|
@@ -592,13 +593,15 @@ export function getBoundingArea(layout, ids) {
|
|
592
593
|
var elem1H = elem1.y - minY + elem1.h;
|
593
594
|
var elem2H = elem2.y - minY + elem2.h;
|
594
595
|
var maxZ = Math.max((_a = elem1 === null || elem1 === void 0 ? void 0 : elem1.z) !== null && _a !== void 0 ? _a : 0, (_b = elem2 === null || elem2 === void 0 ? void 0 : elem2.z) !== null && _b !== void 0 ? _b : 0);
|
596
|
+
var minZ = Math.min((_c = elem1 === null || elem1 === void 0 ? void 0 : elem1.z) !== null && _c !== void 0 ? _c : 0, (_d = elem2 === null || elem2 === void 0 ? void 0 : elem2.z) !== null && _d !== void 0 ? _d : 0);
|
595
597
|
return {
|
596
598
|
x: Math.min(elem1.x, elem2.x),
|
597
599
|
y: Math.min(elem1.y, elem2.y),
|
598
600
|
w: Math.max(elem1W, elem2W),
|
599
601
|
h: Math.max(elem1H, elem2H),
|
600
|
-
z: maxZ
|
602
|
+
z: maxZ,
|
603
|
+
minZ: minZ,
|
601
604
|
};
|
602
|
-
}, { x: 0, y: 0, w: 0, h: 0, z: 0 }), minX = _a.x, minY = _a.y, maxW = _a.w, maxH = _a.h, maxZ = _a.z;
|
603
|
-
return { x: minX, y: minY, w: maxW, h: maxH, z: maxZ };
|
605
|
+
}, { x: 0, y: 0, w: 0, h: 0, z: 0, minZ: 0 }), minX = _a.x, minY = _a.y, maxW = _a.w, maxH = _a.h, maxZ = _a.z, minZ = _a.minZ;
|
606
|
+
return { x: minX, y: minY, w: maxW, h: maxH, z: maxZ, minZ: minZ };
|
604
607
|
}
|