publ-echo-test 0.0.184 → 0.0.186

package/dist/lib/GridItem/GroupItem.d.ts

@@ -5,5 +5,6 @@ declare const GroupItem: ({ children, ...props }: PropsWithChildren<GridItemProp
     onContextGroup: (e: React.MouseEvent) => void;
     zOrder: number;
     zOrderInternal: string;
+    minZ?: number | undefined;
 }>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export default GroupItem;

package/dist/lib/GridItem/GroupItem.js

@@ -29,7 +29,7 @@ import { perc, setTopLeft, setTransform, } from '../GridLayoutEditor/utils/rende
 var GroupItem = function (_a) {
     var _b;
     var children = _a.children, props = __rest(_a, ["children"]);
-    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;
+    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;
     var _l = useState(), resizing = _l[0], setResizing = _l[1];
     var _m = useState(), dragging = _m[0], setDragging = _m[1];
     var _o = useState(), dragStart = _o[0], setDragStart = _o[1];
@@ -419,6 +419,7 @@ var GroupItem = function (_a) {
         'data-z-index': z,
         'data-z-order': zOrder,
         'data-z-order-internal': zOrderInternal,
+        'data-min-z': minZ,
         className: classNames('react-group-block', child.props.className, className, {
             static: props.static,
             isResizing: Boolean(resizing) &&

package/dist/lib/GridItem/OutsideClickHandler.js

@@ -9,6 +9,7 @@ var OutsideClickHandler = function (_a) {
         width: '0',
         height: '0'
     }), childDimensions = _b[0], setChildDimensions = _b[1];
+    var _c = useState(0), zIndex = _c[0], setZIndex = _c[1];
     useEffect(function () {
         var handleClickOutside = function (e) {
             var target = e.target;
@@ -31,7 +32,6 @@ var OutsideClickHandler = function (_a) {
             // Get computed style of the child element
             var computedStyle = window.getComputedStyle(childElement);
             if (childElement.dataset['groupBlockId'] !== 'BULK') {
-                console.log(childElement);
                 return;
             }
             setChildDimensions({
@@ -39,6 +39,9 @@ var OutsideClickHandler = function (_a) {
                 width: computedStyle.width,
                 height: computedStyle.height
             });
+            if (childElement.dataset['minZ']) {
+                setZIndex(Number(childElement.dataset['minZ']));
+            }
         }
         return function () {
             setChildDimensions({
@@ -46,6 +49,7 @@ var OutsideClickHandler = function (_a) {
                 width: '0',
                 height: '0'
             });
+            setZIndex(0);
         };
     }, [children, wrapperRef.current]);
     // Parse dimensions to numbers for calculations
@@ -62,7 +66,7 @@ var OutsideClickHandler = function (_a) {
                             marginLeft: "-".concat(shadowOffset, "px"),
                             marginTop: "-".concat(shadowOffset, "px"),
                             pointerEvents: 'none',
-                            zIndex: zIndexMap.BULK
+                            zIndex: zIndexMap.EDITING_GROUP + zIndex
                         } }), _jsx("div", { className: "border-right", style: {
                             position: 'absolute',
                             transform: childDimensions.transform,
@@ -72,7 +76,7 @@ var OutsideClickHandler = function (_a) {
                             marginLeft: "".concat(width + shadowOffset - borderThickness, "px"),
                             marginTop: "-".concat(shadowOffset, "px"),
                             pointerEvents: 'none',
-                            zIndex: zIndexMap.BULK
+                            zIndex: zIndexMap.EDITING_GROUP + zIndex
                         } }), _jsx("div", { className: "border-bottom", style: {
                             position: 'absolute',
                             transform: childDimensions.transform,
@@ -82,7 +86,7 @@ var OutsideClickHandler = function (_a) {
                             marginLeft: "-".concat(shadowOffset, "px"),
                             marginTop: "".concat(height + shadowOffset - borderThickness, "px"),
                             pointerEvents: 'none',
-                            zIndex: zIndexMap.BULK
+                            zIndex: zIndexMap.EDITING_GROUP + zIndex
                         } }), _jsx("div", { className: "border-left", style: {
                             position: 'absolute',
                             transform: childDimensions.transform,
@@ -92,7 +96,7 @@ var OutsideClickHandler = function (_a) {
                             marginLeft: "-".concat(shadowOffset, "px"),
                             marginTop: "-".concat(shadowOffset, "px"),
                             pointerEvents: 'none',
-                            zIndex: zIndexMap.BULK
+                            zIndex: zIndexMap.EDITING_GROUP + zIndex
                         } })] }))] }));
 };
 export default OutsideClickHandler;

package/dist/lib/GridLayoutEditor/ReactGridLayout.js

@@ -34,7 +34,7 @@ import * as React from 'react';
 import { useState, useRef, useLayoutEffect } from 'react';
 import classNames from '../../external-lib/classnames';
 import { bottom, cloneLayoutItem, compact, getAllCollisions, getBoundingArea, getLayoutItem, moveElement, noop, synchronizeLayoutWithChildren, withLayoutItem, } from './utils/renderHelpers';
-import { calcGridColWidth, calcGridItemPosition, calcXY, resolveRowHeight, } from '../GridItem/utils/calculateUtils';
+import { calcGridColWidth, calcXY, resolveRowHeight, } from '../GridItem/utils/calculateUtils';
 import GridItem from '../GridItem/GridItem';
 import isEqual from '../../external-lib/lodash.isEqual';
 import { findAllChildrenCbIds, findBlockByBlockId, findDirectChildrenBlockIds, findDirectChildrenCbIds, findGroupBlocks, findParentGroupBlock, formatCbIdToBlockId, getBlockSpecificType, zIndexMap, } from './group';
@@ -721,7 +721,7 @@ var ReactGridLayout = function (_a) {
                     'grid-bulk-block': block.blockId === 'BULK',
                     editing: editingGroupBlock === block.blockId,
                     selected: selectedGroupBlock === block.blockId,
-                }), z: zIndex, zOrder: zOrder, zOrderInternal: parent
+                }), z: zIndex, minZ: groupItem.minZ, zOrder: zOrder, zOrderInternal: parent
                     ? "".concat(parent[device === 'DESKTOP'
                         ? 'zOrderDesktopInternal'
                         : 'zOrderMobileInternal'], " > ").concat(zOrder)
@@ -739,31 +739,7 @@ var ReactGridLayout = function (_a) {
     var currentGroupBlocks = blockStructure
         ? findGroupBlocks(blockStructure, editingGroupBlock)
         : [];
-    // 화면에 보이는 아이템만 렌더링
-    var visibleItems = React.useMemo(function () {
-        if (!containerHeight)
-            return layout;
-        // 화면에 보이는 영역 계산
-        var visibleTop = window.scrollY;
-        var visibleBottom = visibleTop + window.innerHeight;
-        // 여유 공간 추가 (스크롤 시 부드러운 전환을 위해)
-        var buffer = resolveRowHeight(rowHeight, colWidth) * 2;
-        return layout.filter(function (item) {
-            var _a;
-            var itemPos = calcGridItemPosition(getPositionParams(), item.x, item.y, (_a = item.z) !== null && _a !== void 0 ? _a : 0, item.w, item.h);
-            return (itemPos.top < visibleBottom + buffer) && (itemPos.top + itemPos.height > visibleTop - buffer);
-        });
-    }, [layout, window.scrollY, window.innerHeight, rowHeight, colWidth]);
-    return (_jsxs("div", { ref: innerRef, className: mergedClassName, style: mergedStyle, onDrop: isDroppable ? onDropHandler : noop, onDragLeave: isDroppable ? onDragLeaveHandler : noop, onDragEnter: isDroppable ? onDragEnterHandler : noop, onDragOver: isDroppable ? onDragOverHandler : noop, children: [currentGroupBlocks.map(function (each) { return processGroup(each); }), React.Children.map(children, function (child) {
-                var _a;
-                var key = (_a = child.key) === null || _a === void 0 ? void 0 : _a.toString();
-                if (!key)
-                    return null;
-                var item = visibleItems.find(function (item) { return item.i === key; });
-                if (!item)
-                    return null;
-                return processGridItem(child);
-            }), placeholder(), activeDrag && _jsx("div", { className: 'grid-guide-line-center' }), activeDrag && (_jsx("div", { className: 'grid-placeholder', style: {
+    return (_jsxs("div", { ref: innerRef, className: mergedClassName, style: mergedStyle, onDrop: isDroppable ? onDropHandler : noop, onDragLeave: isDroppable ? onDragLeaveHandler : noop, onDragEnter: isDroppable ? onDragEnterHandler : noop, onDragOver: isDroppable ? onDragOverHandler : noop, children: [currentGroupBlocks.map(function (each) { return processGroup(each); }), React.Children.map(children, function (child) { return processGridItem(child); }), placeholder(), activeDrag && _jsx("div", { className: 'grid-guide-line-center' }), activeDrag && (_jsx("div", { className: 'grid-placeholder', style: {
                     marginTop: margin[1] + 'px',
                     marginBottom: margin[1] + 'px',
                     marginLeft: margin[0] + 'px',

package/dist/lib/GridLayoutEditor/utils/renderHelpers.d.ts

@@ -169,4 +169,5 @@ export declare function getBoundingArea(layout: Layout, ids: string[]): {
     w: number;
     h: number;
     z: number;
+    minZ: number;
 } | null;

package/dist/lib/GridLayoutEditor/utils/renderHelpers.js

@@ -576,10 +576,11 @@ export function getBoundingArea(layout, ids) {
             w: layoutItems[0].w,
             h: layoutItems[0].h,
             z: layoutItems[0].z,
+            minZ: layoutItems[0].z,
         };
     }
     var _a = layoutItems.reduce(function (acc, elem, idx, arr) {
-        var _a, _b;
+        var _a, _b, _c, _d;
         if (idx === arr.length - 1) {
             return acc;
         }
@@ -592,13 +593,15 @@ export function getBoundingArea(layout, ids) {
         var elem1H = elem1.y - minY + elem1.h;
         var elem2H = elem2.y - minY + elem2.h;
         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);
+        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);
         return {
             x: Math.min(elem1.x, elem2.x),
             y: Math.min(elem1.y, elem2.y),
             w: Math.max(elem1W, elem2W),
             h: Math.max(elem1H, elem2H),
-            z: maxZ
+            z: maxZ,
+            minZ: minZ,
         };
-    }, { 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;
-    return { x: minX, y: minY, w: maxW, h: maxH, z: maxZ };
+    }, { 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;
+    return { x: minX, y: minY, w: maxW, h: maxH, z: maxZ, minZ: minZ };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "publ-echo-test",
-  "version": "0.0.184",
+  "version": "0.0.186",
   "private": false,
   "main": "dist/lib/index.js",
   "types": "dist/lib/index.d.js",