publ-echo-test 0.0.129 → 0.0.131

package/dist/lib/GridLayoutEditor/ReactGridLayout.js

@@ -37,7 +37,7 @@ import { bottom, cloneLayoutItem, compact, getAllCollisions, getBoundingArea, ge
 import { calcGridColWidth, calcXY, resolveRowHeight, } from "../GridItem/utils/calculateUtils";
 import GridItem from "../GridItem/GridItem";
 import isEqual from "../../external-lib/lodash.isEqual";
-import { findAllChildrenCbIds, findDirectChildrenBlockIds, findDirectChildrenCbIds, findGroupBlocks, formatCbIdToBlockId, getBlockSpecificType, zIndexMap } from "./group";
+import { findAllChildrenCbIds, findBlockByBlockId, findDirectChildrenBlockIds, findDirectChildrenCbIds, findGroupBlocks, formatCbIdToBlockId, getBlockSpecificType, zIndexMap } from "./group";
 import GroupItem from "../GridItem/GroupItem";
 import OutsideClickHandler from "../GridItem/OutsideClickHandler";
 var layoutClassName = "react-grid-layout";
@@ -50,6 +50,7 @@ var ReactGridLayout = function (_a) {
     } : _w, // TODO fix
     _x = props.resizeHandles, // TODO fix
     resizeHandles = _x === void 0 ? ["se"] : _x, _y = props.width, width = _y === void 0 ? 0 : _y, resizeHandle = props.resizeHandle, _z = props.isHiddenVisibility, isHiddenVisibility = _z === void 0 ? true : _z, innerRef = props.innerRef, minNbRow = props.minNbRow, customColWidth = props.customColWidth, blockStructure = props.blockStructure, onDoubleClickGroup = props.onDoubleClickGroup, _0 = props.editingGroupBlock, editingGroupBlock = _0 === void 0 ? 'ROOT' : _0, _1 = props.selectedGroupBlock, selectedGroupBlock = _1 === void 0 ? 'ROOT' : _1, onClickGroup = props.onClickGroup, bulkIds = props.bulkIds, onDoubleClickOutsideGroup = props.onDoubleClickOutsideGroup;
+    var device = cols === 24 ? 'DESKTOP' : 'MOBILE';
     var _2 = useState(), activeDrag = _2[0], setActiveDrag = _2[1];
     var _3 = useState(), oldDragItem = _3[0], setOldDragItem = _3[1];
     var _4 = useState(), oldLayout = _4[0], setOldLayout = _4[1];
@@ -57,6 +58,7 @@ var ReactGridLayout = function (_a) {
     var _6 = useState(), droppingDOMNode = _6[0], setDroppingDOMNode = _6[1];
     var _7 = useState(), droppingPosition = _7[0], setDroppingPosition = _7[1];
     var _8 = useState(false), isMounted = _8[0], setIsMounted = _8[1];
+    var editorMode = props.isDraggable && props.isResizable ? 'EDIT' : 'VIEW';
     var editableBlockIds = blockStructure ? findDirectChildrenCbIds(blockStructure, editingGroupBlock) : [];
     var editingGroupAllChildren = (blockStructure && editingGroupBlock) ? findAllChildrenCbIds(blockStructure, editingGroupBlock).map(function (i) { return i.toString(); }) : [];
     var _9 = useState([]), oldGroupChildren = _9[0], setOldGroupChildren = _9[1];
@@ -527,6 +529,7 @@ var ReactGridLayout = function (_a) {
      * @return {Element}       Element wrapped in draggable and properly placed.
      */
     var processGridItem = function (child, isDroppingItem) {
+        var _a;
         if (!child || !child.key)
             return;
         var l = getLayoutItem(layout, String(child.key));
@@ -546,29 +549,42 @@ var ReactGridLayout = function (_a) {
         var z = l.z || 0;
         var isInBulk = blockStructure && (bulkIds === null || bulkIds === void 0 ? void 0 : bulkIds.includes(formatCbIdToBlockId(Number(activeDrag === null || activeDrag === void 0 ? void 0 : activeDrag.i))));
         var isRoot = editingGroupBlock === 'ROOT';
-        var baseZ = function () {
-            if (isInBulk) {
-                return zIndexMap.BULK;
+        var block = blockStructure ? findBlockByBlockId(blockStructure, formatCbIdToBlockId(Number(l.i))) : undefined;
+        if (!block) {
+            return _jsx(_Fragment, { children: "NO-BLOCK-FOUND" });
+        }
+        var zOrder = (_a = block[device === 'DESKTOP' ? 'zOrderDesktopInternal' : 'zOrderMobileInternal']) !== null && _a !== void 0 ? _a : 0;
+        var editorZIndex = (function () {
+            // if (isInBulk) {
+            // const bulkBlock = findBlockByBlockId(blockStructure, 'BULK');
+            // const bulkZOrder = bulkBlock?.[device === 'DESKTOP' ? 'zOrderDesktopInternal' : 'zOrderMobileInternal'] ?? 0;
+            // return zIndexMap.EDITING_GROUP;
+            // }
+            if (!isRoot && isInBulk) {
+                return zIndexMap.EDITING_GROUP_CHILD + zOrder;
             }
             if (!isRoot && editable) {
-                return zIndexMap.EDITING_GROUP;
+                return zIndexMap.EDITING_GROUP_CHILD + zOrder;
             }
             if (isRoot && editable) {
-                return zIndexMap.ROOT;
+                return zIndexMap.ROOT + zOrder;
+            }
+            if (isRoot && !editable) {
+                return zIndexMap.ROOT + zOrder;
             }
             if (!editable) {
                 return 0;
             }
             return 0;
-        };
-        console.log('id: ', l.i, 'z: ', z, 'baseZ: ', baseZ());
+        })();
         var outsideOfEditingGroup = !editingGroupAllChildren.includes(l.i);
+        var zIndex = editorMode === 'EDIT' ? editorZIndex : z;
         return (_jsx(GridItem, { className: classNames({
                 'editable-grid-item': (!isRoot && editable),
                 'not-editable-grid-item': (!isRoot && !editable),
                 'bulk-child-item': isInBulk,
                 'outside-of-editing-group': outsideOfEditingGroup,
-            }), z: baseZ() + z, isDraggable: editable && !isInBulk, isResizable: editable && !isInBulk, containerWidth: width, cols: cols, margin: margin, containerPadding: containerPadding || margin, maxRows: maxRows, rowHeight: rowHeight, cancel: draggableCancel, handle: draggableHandle, onDragStop: onDragStopHandler, onDragStart: onDragStartHandler, onDrag: onDragHandler, onResizeStart: onResizeStartHandler, onResize: onResizeHandler, onResizeStop: onResizeStopHandler, onFitToContent: onFitToContentHandler, isBounded: bounded, useCSSTransforms: useCSSTransforms && isMounted, usePercentages: !isMounted, transformScale: transformScale, w: l.w, h: l.h, x: l.x, y: l.y, i: l.i, minH: l.minH, minW: l.minW, maxH: l.maxH, maxW: l.maxW, static: l.static, droppingPosition: isDroppingItem ? droppingPosition : undefined, resizeHandles: resizeHandlesOptions, resizeHandle: resizeHandle, isHiddenVisibility: isHiddenVisibility, customColWidth: colWidth, autoResize: !!l.autoResize, children: child }, l.i));
+            }), z: zIndex, isDraggable: editable && !isInBulk, isResizable: editable && !isInBulk, containerWidth: width, cols: cols, margin: margin, containerPadding: containerPadding || margin, maxRows: maxRows, rowHeight: rowHeight, cancel: draggableCancel, handle: draggableHandle, onDragStop: onDragStopHandler, onDragStart: onDragStartHandler, onDrag: onDragHandler, onResizeStart: onResizeStartHandler, onResize: onResizeHandler, onResizeStop: onResizeStopHandler, onFitToContent: onFitToContentHandler, isBounded: bounded, useCSSTransforms: useCSSTransforms && isMounted, usePercentages: !isMounted, transformScale: transformScale, w: l.w, h: l.h, x: l.x, y: l.y, i: l.i, minH: l.minH, minW: l.minW, maxH: l.maxH, maxW: l.maxW, static: l.static, droppingPosition: isDroppingItem ? droppingPosition : undefined, resizeHandles: resizeHandlesOptions, resizeHandle: resizeHandle, isHiddenVisibility: isHiddenVisibility, customColWidth: colWidth, autoResize: !!l.autoResize, children: child }, l.i));
     };
     var onDragOverHandler = function (e) {
         var _a;
@@ -637,6 +653,7 @@ var ReactGridLayout = function (_a) {
     var mergedClassName = classNames(layoutClassName, className);
     var mergedStyle = __assign({ height: containerHeight() }, style);
     var processGroup = function (block, viewOnly) {
+        var _a;
         if (!blockStructure) {
             return;
         }
@@ -645,13 +662,23 @@ var ReactGridLayout = function (_a) {
         if (!groupItem) {
             return _jsx(_Fragment, {});
         }
+        var zOrder = (_a = block[device === 'DESKTOP' ? 'zOrderDesktopInternal' : 'zOrderMobileInternal']) !== null && _a !== void 0 ? _a : 0;
         var isEditingGroup = block.blockId === editingGroupBlock;
         var type = getBlockSpecificType(block);
         var isRoot = editingGroupBlock === 'ROOT';
         var isInBulk = bulkIds === null || bulkIds === void 0 ? void 0 : bulkIds.includes(block.blockId);
-        var z = (function () {
-            if (isInBulk) {
-                return zIndexMap.BULK;
+        var isBulk = block.blockId === 'BULK';
+        var baseZ = (function () {
+            if (isEditingGroup) {
+                return zIndexMap.EDITING_GROUP;
+            }
+            if (isBulk) {
+                return zIndexMap.EDITING_GROUP_CHILD + zOrder;
+            }
+            if (isInBulk) { // 위와 같지만 이것은 not-editable이긴 함.
+                // const bulkBlock = findBlockByBlockId(blockStructure, 'BULK');
+                // const bulkZOrder = bulkBlock?.[device === 'DESKTOP' ? 'zOrderDesktopInternal' : 'zOrderMobileInternal'] ?? 0;
+                return zIndexMap.EDITING_GROUP_CHILD + zOrder;
             }
             if (!isRoot && type === 'GROUP_BLOCK') {
                 return zIndexMap.EDITING_GROUP;
@@ -664,6 +691,7 @@ var ReactGridLayout = function (_a) {
             }
             return zIndexMap.CB;
         })();
+        var zIndex = editorMode === 'EDIT' ? baseZ : zOrder;
         var handleClick = function (e) {
             onClickGroup && onClickGroup(e, block.blockId, type);
         };
@@ -678,7 +706,7 @@ var ReactGridLayout = function (_a) {
                     'grid-bulk-block': block.blockId === 'BULK',
                     'editing': editingGroupBlock === block.blockId,
                     'selected': selectedGroupBlock === block.blockId
-                }), containerWidth: width, cols: cols, margin: margin, containerPadding: containerPadding || margin, maxRows: maxRows, rowHeight: rowHeight, cancel: draggableCancel, handle: draggableHandle, onDragStop: onDragStopGroupHandler, onDragStart: onDragStartHandler, onDrag: onDragHandler, onResizeStart: onResizeStartHandler, onResize: onResizeHandler, onResizeStop: onResizeStopHandler, onFitToContent: onFitToContentHandler, isDraggable: !viewOnly && !isEditingGroup && !isInBulk, isResizable: !viewOnly && !isEditingGroup && !isInBulk, isBounded: false, useCSSTransforms: useCSSTransforms && isMounted, usePercentages: !isMounted, transformScale: transformScale, w: groupItem.w, h: groupItem.h, x: groupItem.x, y: groupItem.y, z: z, i: block.blockId, 
+                }), z: zIndex, containerWidth: width, cols: cols, margin: margin, containerPadding: containerPadding || margin, maxRows: maxRows, rowHeight: rowHeight, cancel: draggableCancel, handle: draggableHandle, onDragStop: onDragStopGroupHandler, onDragStart: onDragStartHandler, onDrag: onDragHandler, onResizeStart: onResizeStartHandler, onResize: onResizeHandler, onResizeStop: onResizeStopHandler, onFitToContent: onFitToContentHandler, isDraggable: !viewOnly && !isEditingGroup && !isInBulk, isResizable: !viewOnly && !isEditingGroup && !isInBulk, isBounded: false, useCSSTransforms: useCSSTransforms && isMounted, usePercentages: !isMounted, transformScale: transformScale, w: groupItem.w, h: groupItem.h, x: groupItem.x, y: groupItem.y, i: block.blockId, 
                 // minH={l.minH}
                 // minW={l.minW}
                 // maxH={l.maxH}
@@ -690,7 +718,6 @@ var ReactGridLayout = function (_a) {
                 isHiddenVisibility: isHiddenVisibility, customColWidth: colWidth, autoResize: false, onContextGroup: handleClickContextGroup, children: _jsx("div", { onClick: handleClick, onDoubleClick: handleDoubleClick }) }, block.blockId) }));
     };
     var currentGroupBlocks = blockStructure ? findGroupBlocks(blockStructure, editingGroupBlock) : [];
-    console.log('currentGroupBlocks', currentGroupBlocks);
     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",

package/dist/lib/GridLayoutEditor/group.d.ts

@@ -1,5 +1,6 @@
 export declare const zIndexMap: {
     BULK: number;
+    EDITING_GROUP_CHILD: number;
     EDITING_GROUP: number;
     GROUP: number;
     CB: number;

package/dist/lib/GridLayoutEditor/group.js

@@ -9,7 +9,8 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 export var zIndexMap = {
     'BULK': 20000,
-    'EDITING_GROUP': 10000,
+    'EDITING_GROUP_CHILD': 10000,
+    'EDITING_GROUP': 9000,
     'GROUP': 5000,
     'CB': 500,
     'ROOT': 500, //?
@@ -211,12 +212,16 @@ export var addBulkToTarget = function (block, targetId, bulkBlockIds) {
     }
     // Remove bulk blocks from target's children
     targetBlock.children = targetBlock.children.filter(function (child) { return !bulkBlockIds.includes(child.blockId); });
+    var zOrdersDesktop = bulkBlocks.map(function (block) { return block.zOrderDesktopInternal; }).filter(function (each) { return each !== null; });
+    var zOrdersMobile = bulkBlocks.map(function (block) { return block.zOrderMobileInternal; }).filter(function (each) { return each !== null; });
+    var zOrderDesktopInternal = Math.max.apply(Math, zOrdersDesktop);
+    var zOrderMobileInternal = Math.max.apply(Math, zOrdersMobile);
     // Create the new bulkBlock
     var bulkBlock = {
         blockId: 'BULK',
         type: 'GROUP_BLOCK',
-        zOrderDesktopInternal: zIndexMap.BULK,
-        zOrderMobileInternal: zIndexMap.BULK,
+        zOrderDesktopInternal: zOrderDesktopInternal,
+        zOrderMobileInternal: zOrderMobileInternal,
         children: bulkBlocks,
     };
     // Add the bulkBlock to the target's children

package/package.json

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