publ-echo-test 0.0.61 → 0.0.62

package/dist/lib/GridItem/GridItem.js

@@ -395,6 +395,7 @@ var GridItem = function (_a) {
             isResizing: Boolean(resizing) && Boolean(isResizing) && Boolean(isHiddenVisibility),
             resizing: Boolean(resizing),
             "react-draggable": isDraggable,
+            "editable-grid-item": isResizable && isDraggable,
             isDragging: Boolean(isDragging) && Boolean(dragging) && Boolean(isHiddenVisibility),
             "react-draggable-dragging": Boolean(dragging),
             // dropping: Boolean(droppingPosition),

package/dist/lib/GridItem/GroupItem.js

@@ -385,8 +385,8 @@ var GroupItem = function (_a) {
     var newChild = React.cloneElement(child, {
         key: i,
         ref: elementRef,
-        'data-grid-id': i,
-        className: classNames("react-group-item", child.props.className, className, {
+        'data-group-block-id': i,
+        className: classNames("react-group-block", child.props.className, className, {
             static: props.static,
             isResizing: Boolean(resizing) && Boolean(isResizing) && Boolean(isHiddenVisibility),
             resizing: Boolean(resizing),

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 { findAllChildrenButGroup, findAllChildrenIds, findChildrenIds, findGroupBlocks, getBlockType } from "./group";
+import { findAllChildrenButGroup, findAllChildrenIds, findChildrenIds, findGroupBlocks, getBlockSpecificType, zIndexMap } from "./group";
 import GroupItem from "../GridItem/GroupItem";
 import OutsideClickHandler from "../GridItem/OutsideClickHandler";
 var layoutClassName = "react-grid-layout";
@@ -49,20 +49,20 @@ var ReactGridLayout = function (_a) {
         w: 1,
     } : _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 ? '1' : _0, onClickGroup = props.onClickGroup, bulkIds = props.bulkIds, onDoubleClickOutsideGroup = props.onDoubleClickOutsideGroup, selectedGroupBlock = props.selectedGroupBlock;
-    var _1 = useState(), activeDrag = _1[0], setActiveDrag = _1[1];
-    var _2 = useState(), oldDragItem = _2[0], setOldDragItem = _2[1];
-    var _3 = useState(), oldLayout = _3[0], setOldLayout = _3[1];
-    var _4 = useState(), oldResizeItem = _4[0], setOldResizeItem = _4[1];
-    var _5 = useState(), droppingDOMNode = _5[0], setDroppingDOMNode = _5[1];
-    var _6 = useState(), droppingPosition = _6[0], setDroppingPosition = _6[1];
-    var _7 = useState(false), isMounted = _7[0], setIsMounted = _7[1];
+    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 _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];
+    var _5 = useState(), oldResizeItem = _5[0], setOldResizeItem = _5[1];
+    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];
     // const [selectedGroup, setSelectedGroup] = useState<string>('1');
     var editableItems = blockStructure ? findChildrenIds(blockStructure, editingGroupBlock) : [];
-    var _8 = useState([]), oldGroupChildren = _8[0], setOldGroupChildren = _8[1];
-    var _9 = useState(function () {
+    var _9 = useState([]), oldGroupChildren = _9[0], setOldGroupChildren = _9[1];
+    var _10 = useState(function () {
         return synchronizeLayoutWithChildren(props.layout || [], children, cols, compactType, allowOverlap);
-    }), layout = _9[0], setLayout = _9[1];
+    }), layout = _10[0], setLayout = _10[1];
     var dragEnterCounter = useRef(0);
     useLayoutEffect(function () {
         setIsMounted(true);
@@ -202,7 +202,6 @@ var ReactGridLayout = function (_a) {
         var _b;
         var e = _a.e, node = _a.node;
         var l = (_b = getLayoutItem(layout, i)) !== null && _b !== void 0 ? _b : { i: i, x: x, y: y, w: 10, h: 10 };
-        console.log(y);
         if (!l)
             return;
         if (!oldDragItem) {
@@ -493,7 +492,25 @@ var ReactGridLayout = function (_a) {
         var editable = editableItems.includes(l.i);
         var z = l.z || 0;
         var isInBulk = bulkIds === null || bulkIds === void 0 ? void 0 : bulkIds.includes(l.i);
-        return (_jsx(GridItem, { className: editable ? 'editable-grid-item' : isInBulk ? 'bulk-grid-item' : 'not-editable-grid-item', isDraggable: editable, isResizable: editable, 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, z: editable ? 1000 + z : z, 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 isRoot = editingGroupBlock === 'ROOT';
+        var baseZ = function () {
+            if (!isRoot && editable) {
+                return zIndexMap.EDITING_GROUP;
+            }
+            if (isRoot && editable) {
+                return zIndexMap.ROOT;
+            }
+            if (!editable) {
+                return 0;
+            }
+            return 0;
+        };
+        return (_jsx(GridItem, { className: classNames({
+                'editable-grid-item': (!isRoot && editable),
+                'not-editable-grid-item': (!isRoot && !editable)
+            }), 
+            // className={editable ? 'editable-grid-item' : isInBulk ? 'bulk-grid-item': 'not-editable-grid-item'}
+            z: baseZ() + z, isDraggable: editable, isResizable: editable, 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;
@@ -565,7 +582,7 @@ var ReactGridLayout = function (_a) {
         if (!blockStructure) {
             return;
         }
-        var childrenIds = findAllChildrenIds(blockStructure, block.id);
+        var childrenIds = findAllChildrenIds(blockStructure, block.blockId);
         var groupItem = getBoundingArea(layout, childrenIds);
         // const draggable =
         //   typeof l.isDraggable === "boolean"
@@ -580,45 +597,31 @@ var ReactGridLayout = function (_a) {
         if (!groupItem) {
             return _jsx(_Fragment, {});
         }
-        var isEditingGroup = block.id === editingGroupBlock;
-        var type = getBlockType(block.id);
+        var isEditingGroup = block.blockId === editingGroupBlock;
+        var type = getBlockSpecificType(block);
+        var isRoot = editingGroupBlock === 'ROOT';
         var z = (function () {
-            if (isEditingGroup && type === 'GROUP') {
-                return 1000;
+            if (!isRoot && type === 'GROUP_BLOCK') {
+                return zIndexMap.EDITING_GROUP;
             }
-            if (type === 'GROUP') {
-                return 1000;
+            if (type === 'GROUP_BLOCK') {
+                return zIndexMap.GROUP;
             }
             if (type === 'BULK') {
-                return 9999;
+                return zIndexMap.BULK;
             }
-            return 1000;
+            return zIndexMap.CB;
         })();
         var handleClick = function (e) {
-            onClickGroup && onClickGroup(e, block.id, type);
+            onClickGroup && onClickGroup(e, block.blockId, type);
         };
         var handleDoubleClick = function (e) {
-            onDoubleClickGroup && onDoubleClickGroup(e, block.id, type);
+            onDoubleClickGroup && onDoubleClickGroup(e, block.blockId, type);
         };
-        // () => {
-        //   if (isEditingGroup) {
-        //    const parent = findParentGroupByGroupId(blockStructure, block.id)
-        //    parent && setSelectedGroup(parent)
-        //    if (parent === null) {
-        //     setSelectedGroup('1')
-        //    }
-        //   }
-        // }
-        var classname = (function () {
-            if (editingGroupBlock === block.id) {
-                return 'group editing';
-            }
-            if (selectedGroupBlock === block.id) {
-                return 'group selected';
-            }
-            return type.toLowerCase();
-        })();
-        return (_jsx(OutsideClickHandler, { onOutsideClick: onDoubleClickOutsideGroup, children: _jsx(GroupItem, { className: classname, 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, isDraggable: !viewOnly && !isEditingGroup, isResizable: !viewOnly && !isEditingGroup, 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.id.toString(), 
+        return (_jsx(OutsideClickHandler, { onOutsideClick: onDoubleClickOutsideGroup, children: _jsx(GroupItem, { className: classNames({
+                    '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: onDragStopHandler, onDragStart: onDragStartHandler, onDrag: onDragHandler, onResizeStart: onResizeStartHandler, onResize: onResizeHandler, onResizeStop: onResizeStopHandler, onFitToContent: onFitToContentHandler, isDraggable: !viewOnly && !isEditingGroup, isResizable: !viewOnly && !isEditingGroup, 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, 
                 // minH={l.minH}
                 // minW={l.minW}
                 // maxH={l.maxH}
@@ -627,10 +630,10 @@ var ReactGridLayout = function (_a) {
                 // droppingPosition={isDroppingItem ? droppingPosition : undefined}
                 // resizeHandles={resizeHandlesOptions}
                 // resizeHandle={resizeHandle}
-                isHiddenVisibility: isHiddenVisibility, customColWidth: colWidth, autoResize: false, children: _jsx("div", { onClick: handleClick, onDoubleClick: handleDoubleClick }) }, block.id) }));
+                isHiddenVisibility: isHiddenVisibility, customColWidth: colWidth, autoResize: false, children: _jsx("div", { onClick: handleClick, onDoubleClick: handleDoubleClick }) }, block.blockId) }));
     };
     var currentGroupBlocks = blockStructure ? findGroupBlocks(blockStructure, editingGroupBlock) : [];
-    // const groupsParentsGroups = findAllParentGroups(blockStructure, selectedGroup);
+    console.log(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,17 +1,53 @@
-export interface Block {
-    id: string;
-    name: string;
-    children?: Block[];
-}
-export declare const findBlockById: (blocks: Block[], id: string) => Block | null;
+export declare const zIndexMap: {
+    BULK: number;
+    EDITING_GROUP: number;
+    GROUP: number;
+    CB: number;
+    ROOT: number;
+};
+export declare function getBlockSpecificType(block: Block): "ROOT" | "BULK" | "COMPONENT_BLOCK" | "GROUP_BLOCK";
+export type Block = ComponentBlock | GroupBlock | RootBlock;
+export type ZOrder = {
+    [platform in "mobile" | "desktop"]: {
+        [componentBlockId: string]: number;
+    };
+};
+export type ComponentBlock = {
+    blockId: string;
+    type: "COMPONENT_BLOCK";
+    zOrderDesktopInternal: number | null;
+    zOrderMobileInternal: number | null;
+    componentBlockId: number;
+};
+export type GroupBlock = {
+    blockId: string;
+    type: "GROUP_BLOCK";
+    zOrderDesktopInternal: number | null;
+    zOrderMobileInternal: number | null;
+    children: (ComponentBlock | GroupBlock)[];
+};
+export type RootBlock = {
+    blockId: "ROOT";
+    type: "GROUP_BLOCK";
+    zOrderDesktopInternal: number | null;
+    zOrderMobileInternal: number | null;
+    children: (ComponentBlock | GroupBlock)[];
+};
+export type BulkBlockInternal = {
+    blockId: "BULK";
+    type: "GROUP_BLOCK";
+    zOrderDesktopInternal: number;
+    zOrderMobileInternal: number;
+    children: (ComponentBlock | GroupBlock)[];
+};
+export declare const findBlockById: (blocks: Block[], blockId: string) => Block | null;
 export declare const findChildrenIds: (blockStructure: Block[], targetId: string) => string[];
 export declare const findAllChildrenIds: (blockStructure: Block[], targetId: string) => string[];
-export declare const findAllParentGroups: (blockStructure: Block[], targetId: string) => Block[];
+export declare const findAllParentGroups: (blockStructure: Block[], targetId: string) => GroupBlock[];
 export declare const findAllChildrenButGroup: (blockStructure: Block[], targetId: string) => string[];
-export declare const findGroupBlocks: (blockStructure: Block[], targetId: string) => Block[];
+export declare const findGroupBlocks: (blockStructure: Block[], targetId: string) => GroupBlock[];
 export declare const findAllComponentBlockIds: (blockStructure: Block[]) => string[];
 export declare const findParentGroupByGroupId: (blockStructure: Block[], targetId: string) => string | null;
 export declare const addBlockToRoot: (blockStructure: Block[], newBlock: Block) => Block[];
 export declare const addBulkToTarget: (blockStructure: Block[], targetId: string, bulkIds: string[]) => Block[];
-export declare const getBlockType: (id: string) => 'GROUP' | 'BULK' | 'COMPONENT_BLOCK' | 'UNKNOWN';
 export declare const blockStructure: Block[];

package/dist/lib/GridLayoutEditor/group.js

@@ -18,14 +18,31 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-export var findBlockById = function (blocks, id) {
+export var zIndexMap = {
+    'BULK': 20000,
+    'EDITING_GROUP': 10000,
+    'GROUP': 5000,
+    'CB': 500,
+    'ROOT': 500, //?
+};
+export function getBlockSpecificType(block) {
+    if (block.blockId === 'ROOT') {
+        return 'ROOT';
+    }
+    if (block.blockId === 'BULK') {
+        return 'BULK';
+    }
+    return block.type;
+}
+var deepClone = function (blocks) { return JSON.parse(JSON.stringify(blocks)); };
+export var findBlockById = function (blocks, blockId) {
     for (var _i = 0, blocks_1 = blocks; _i < blocks_1.length; _i++) {
         var block = blocks_1[_i];
-        if (block.id === id) {
+        if (block.blockId === blockId) {
             return block;
         }
-        if (block.children) {
-            var found = findBlockById(block.children, id);
+        if (block.type === 'GROUP_BLOCK' && block.children) {
+            var found = findBlockById(block.children, blockId);
             if (found) {
                 return found;
             }
@@ -35,15 +52,17 @@ export var findBlockById = function (blocks, id) {
 };
 export var findChildrenIds = function (blockStructure, targetId) {
     var targetBlock = findBlockById(blockStructure, targetId);
-    return targetBlock && targetBlock.children ? targetBlock.children.map(function (child) { return child.id; }) : [];
+    return targetBlock && 'children' in targetBlock && targetBlock.children
+        ? targetBlock.children.map(function (child) { return child.blockId; })
+        : [];
 };
 export var findAllChildrenIds = function (blockStructure, targetId) {
     var collectChildrenIds = function (block) {
         var ids = [];
-        if (block.children) {
+        if ('children' in block && block.children) {
             for (var _i = 0, _a = block.children; _i < _a.length; _i++) {
                 var child = _a[_i];
-                ids.push(child.id);
+                ids.push(child.blockId);
                 ids = ids.concat(collectChildrenIds(child));
             }
         }
@@ -57,11 +76,11 @@ export var findAllParentGroups = function (blockStructure, targetId) {
         if (parents === void 0) { parents = []; }
         for (var _i = 0, blocks_2 = blocks; _i < blocks_2.length; _i++) {
             var block = blocks_2[_i];
-            if (block.id === id && block.name === 'GroupBlock') {
-                return parents.filter(function (parent) { return parent.name === 'GroupBlock'; });
+            if (block.blockId === id && block.type === 'GROUP_BLOCK') {
+                return parents;
             }
-            if (block.children) {
-                var result = findParentGroups(block.children, id, __spreadArray(__spreadArray([], parents, true), [block], false));
+            if ('children' in block && block.children) {
+                var result = findParentGroups(block.children, id, block.type === 'GROUP_BLOCK' ? __spreadArray(__spreadArray([], parents, true), [block], false) : parents);
                 if (result) {
                     return result;
                 }
@@ -74,11 +93,11 @@ export var findAllParentGroups = function (blockStructure, targetId) {
 export var findAllChildrenButGroup = function (blockStructure, targetId) {
     var collectChildrenIds = function (block) {
         var ids = [];
-        if (block.children) {
+        if ('children' in block && block.children) {
             for (var _i = 0, _a = block.children; _i < _a.length; _i++) {
                 var child = _a[_i];
-                if (child.name !== 'GroupBlock') {
-                    ids.push(child.id);
+                if (child.type !== 'GROUP_BLOCK') {
+                    ids.push(child.blockId);
                 }
                 ids = ids.concat(collectChildrenIds(child));
             }
@@ -91,12 +110,16 @@ export var findAllChildrenButGroup = function (blockStructure, targetId) {
 export var findGroupBlocks = function (blockStructure, targetId) {
     var targetBlock = findBlockById(blockStructure, targetId);
     var groupBlocks = [];
-    if (targetBlock) {
-        if (targetBlock.name === 'GroupBlock' || targetBlock.name === 'BulkBlock') {
-            groupBlocks.push(targetBlock);
+    if (targetBlock && targetBlock.blockId === 'ROOT') {
+        if ('children' in targetBlock) {
+            groupBlocks.push.apply(groupBlocks, targetBlock.children.filter(function (child) { return child.type === 'GROUP_BLOCK'; }));
+            return groupBlocks;
         }
+    }
+    if (targetBlock && targetBlock.type === 'GROUP_BLOCK') {
+        groupBlocks.push(targetBlock);
         if (targetBlock.children) {
-            groupBlocks.push.apply(groupBlocks, targetBlock.children.filter(function (child) { return child.name === 'GroupBlock' || child.name === 'BulkBlock'; }));
+            groupBlocks.push.apply(groupBlocks, targetBlock.children.filter(function (child) { return child.type === 'GROUP_BLOCK'; }));
         }
     }
     return groupBlocks;
@@ -106,10 +129,10 @@ export var findAllComponentBlockIds = function (blockStructure) {
         var ids = [];
         for (var _i = 0, blocks_3 = blocks; _i < blocks_3.length; _i++) {
             var block = blocks_3[_i];
-            if (block.name === 'ComponentBlock') {
-                ids.push(block.id);
+            if (block.type === 'COMPONENT_BLOCK') {
+                ids.push(block.blockId);
             }
-            if (block.children) {
+            if ('children' in block && block.children) {
                 ids = ids.concat(collectComponentBlockIds(block.children));
             }
         }
@@ -122,11 +145,11 @@ export var findParentGroupByGroupId = function (blockStructure, targetId) {
         if (parent === void 0) { parent = null; }
         for (var _i = 0, blocks_4 = blocks; _i < blocks_4.length; _i++) {
             var block = blocks_4[_i];
-            if (block.id === id && (block.name === 'GroupBlock')) {
-                return parent && parent.name === 'GroupBlock' ? parent.id : null;
+            if (block.blockId === id && block.type === 'GROUP_BLOCK') {
+                return parent ? parent.blockId : null;
             }
-            if (block.children) {
-                var result = findParentGroup(block.children, id, block);
+            if ('children' in block && block.children) {
+                var result = findParentGroup(block.children, id, block.type === 'GROUP_BLOCK' ? block : parent);
                 if (result) {
                     return result;
                 }
@@ -138,20 +161,19 @@ export var findParentGroupByGroupId = function (blockStructure, targetId) {
 };
 export var addBlockToRoot = function (blockStructure, newBlock) {
     return blockStructure.map(function (block) {
-        if (block.name === 'RootBlock') {
+        if (block.blockId === 'ROOT' && block.type === 'GROUP_BLOCK') {
             return __assign(__assign({}, block), { children: block.children ? __spreadArray(__spreadArray([], block.children, true), [newBlock], false) : [newBlock] });
         }
         return block;
     });
 };
-var deepClone = function (blocks) { return JSON.parse(JSON.stringify(blocks)); };
 export var addBulkToTarget = function (blockStructure, targetId, bulkIds) {
     var structure = deepClone(blockStructure);
     var targetBlock = findBlockById(structure, targetId);
-    if (!targetBlock || !targetBlock.children) {
+    if (!targetBlock || targetBlock.type !== 'GROUP_BLOCK' || !targetBlock.children) {
         return blockStructure;
     }
-    var bulkBlocks = targetBlock.children.filter(function (child) { return bulkIds.includes(child.id); });
+    var bulkBlocks = targetBlock.children.filter(function (child) { return bulkIds.includes(child.blockId); });
     if (bulkBlocks.length !== bulkIds.length) {
         throw new Error("Some bulkIds do not exist as children of the target block.");
     }
@@ -159,136 +181,164 @@ export var addBulkToTarget = function (blockStructure, targetId, bulkIds) {
         return blockStructure;
     }
     // Remove bulk blocks from target's children
-    targetBlock.children = targetBlock.children.filter(function (child) { return !bulkIds.includes(child.id); });
+    targetBlock.children = targetBlock.children.filter(function (child) { return !bulkIds.includes(child.blockId); });
     // Create the new bulkBlock
     var bulkBlock = {
-        id: "BULK",
-        name: 'BulkBlock',
+        blockId: 'BULK',
+        type: 'GROUP_BLOCK',
+        zOrderDesktopInternal: zIndexMap.BULK,
+        zOrderMobileInternal: zIndexMap.BULK,
         children: bulkBlocks,
     };
     // Add the bulkBlock to the target's children
     targetBlock.children.push(bulkBlock);
     return structure;
 };
-export var getBlockType = function (id) {
-    if (id.startsWith('GB_')) {
-        return 'GROUP';
-    }
-    else if (id.startsWith('CB_')) {
-        return 'COMPONENT_BLOCK';
-    }
-    else if (id === 'BULK') {
-        return 'BULK';
-    }
-    return 'UNKNOWN'; // 잘못된 ID 형식의 경우
-};
-// 사용 예시:
 export var blockStructure = [
     {
-        id: '1',
-        name: 'RootBlock',
+        blockId: 'ROOT',
+        type: 'GROUP_BLOCK',
+        zOrderDesktopInternal: null,
+        zOrderMobileInternal: null,
         children: [
             {
-                id: 'GB_2',
-                name: 'GroupBlock',
+                blockId: 'GB_2',
+                type: 'GROUP_BLOCK',
+                zOrderDesktopInternal: null,
+                zOrderMobileInternal: null,
                 children: [
                     {
-                        id: 'GB_3',
-                        name: 'GroupBlock',
+                        blockId: 'GB_3',
+                        type: 'GROUP_BLOCK',
+                        zOrderDesktopInternal: null,
+                        zOrderMobileInternal: null,
                         children: [
                             {
-                                id: 'CB_4',
-                                name: 'ComponentBlock'
+                                blockId: 'CB_4',
+                                type: 'COMPONENT_BLOCK',
+                                zOrderDesktopInternal: null,
+                                zOrderMobileInternal: null,
+                                componentBlockId: 4
                             },
                             {
-                                id: 'CB_5',
-                                name: 'ComponentBlock'
+                                blockId: 'CB_5',
+                                type: 'COMPONENT_BLOCK',
+                                zOrderDesktopInternal: null,
+                                zOrderMobileInternal: null,
+                                componentBlockId: 5
                             },
                             {
-                                id: 'GB_6',
-                                name: 'GroupBlock',
+                                blockId: 'GB_6',
+                                type: 'GROUP_BLOCK',
+                                zOrderDesktopInternal: null,
+                                zOrderMobileInternal: null,
                                 children: [
                                     {
-                                        id: 'CB_7',
-                                        name: 'ComponentBlock'
+                                        blockId: 'CB_7',
+                                        type: 'COMPONENT_BLOCK',
+                                        zOrderDesktopInternal: null,
+                                        zOrderMobileInternal: null,
+                                        componentBlockId: 7
                                     },
                                     {
-                                        id: 'CB_8',
-                                        name: 'ComponentBlock'
+                                        blockId: 'CB_8',
+                                        type: 'COMPONENT_BLOCK',
+                                        zOrderDesktopInternal: null,
+                                        zOrderMobileInternal: null,
+                                        componentBlockId: 8
                                     },
                                     {
-                                        id: 'GB_9',
-                                        name: 'GroupBlock',
+                                        blockId: 'GB_9',
+                                        type: 'GROUP_BLOCK',
+                                        zOrderDesktopInternal: null,
+                                        zOrderMobileInternal: null,
                                         children: [
                                             {
-                                                id: 'CB_10',
-                                                name: 'ComponentBlock'
+                                                blockId: 'CB_10',
+                                                type: 'COMPONENT_BLOCK',
+                                                zOrderDesktopInternal: null,
+                                                zOrderMobileInternal: null,
+                                                componentBlockId: 10
                                             },
                                             {
-                                                id: 'CB_11',
-                                                name: 'ComponentBlock'
+                                                blockId: 'CB_11',
+                                                type: 'COMPONENT_BLOCK',
+                                                zOrderDesktopInternal: null,
+                                                zOrderMobileInternal: null,
+                                                componentBlockId: 11
                                             }
                                         ]
-                                    },
+                                    }
                                 ]
-                            },
+                            }
                         ]
                     },
                     {
-                        id: 'GB_12',
-                        name: 'GroupBlock',
+                        blockId: 'GB_12',
+                        type: 'GROUP_BLOCK',
+                        zOrderDesktopInternal: null,
+                        zOrderMobileInternal: null,
                         children: [
                             {
-                                id: 'CB_13',
-                                name: 'ComponentBlock'
+                                blockId: 'CB_13',
+                                type: 'COMPONENT_BLOCK',
+                                zOrderDesktopInternal: null,
+                                zOrderMobileInternal: null,
+                                componentBlockId: 13
                             },
                             {
-                                id: 'CB_14',
-                                name: 'ComponentBlock'
+                                blockId: 'CB_14',
+                                type: 'COMPONENT_BLOCK',
+                                zOrderDesktopInternal: null,
+                                zOrderMobileInternal: null,
+                                componentBlockId: 14
                             }
                         ]
                     },
                     {
-                        id: 'CB_15',
-                        name: 'ComponentBlock'
+                        blockId: 'CB_15',
+                        type: 'COMPONENT_BLOCK',
+                        zOrderDesktopInternal: null,
+                        zOrderMobileInternal: null,
+                        componentBlockId: 15
                     },
                     {
-                        id: 'CB_16',
-                        name: 'ComponentBlock'
+                        blockId: 'CB_16',
+                        type: 'COMPONENT_BLOCK',
+                        zOrderDesktopInternal: null,
+                        zOrderMobileInternal: null,
+                        componentBlockId: 16
                     }
                 ]
             },
             {
-                id: 'GB_17',
-                name: 'GroupBlock',
+                blockId: 'GB_17',
+                type: 'GROUP_BLOCK',
+                zOrderDesktopInternal: null,
+                zOrderMobileInternal: null,
                 children: [
-                    // {
-                    //   id: '6',
-                    //   name: 'GroupBlock',
-                    //   children: [
-                    //     {
-                    //       id: '7',
-                    //       name: 'ComponentBlock'
-                    //     },
-                    //     {
-                    //       id: '8',
-                    //       name: 'ComponentBlock'
-                    //     }
-                    //   ]
-                    // },
                     {
-                        id: 'CB_18',
-                        name: 'ComponentBlock'
+                        blockId: 'CB_18',
+                        type: 'COMPONENT_BLOCK',
+                        zOrderDesktopInternal: null,
+                        zOrderMobileInternal: null,
+                        componentBlockId: 18
                     }
                 ]
             },
             {
-                id: 'CB_19',
-                name: 'ComponentBlock'
+                blockId: 'CB_19',
+                type: 'COMPONENT_BLOCK',
+                zOrderDesktopInternal: null,
+                zOrderMobileInternal: null,
+                componentBlockId: 19
             },
             {
-                id: 'CB_20',
-                name: 'ComponentBlock'
+                blockId: 'CB_20',
+                type: 'COMPONENT_BLOCK',
+                zOrderDesktopInternal: null,
+                zOrderMobileInternal: null,
+                componentBlockId: 20
             }
         ]
     }

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

@@ -75,8 +75,8 @@ export type ReactGridLayoutProps = {
     onFitToContent?: OnFitContentCallBack;
     blockStructure?: Block[];
     onDoubleClickGroup?: (e: React.MouseEvent, id: string, type: string) => void;
-    selectedGroupBlock?: string | null;
-    editingGroupBlock?: string;
+    selectedGroupBlock?: 'ROOT' | string;
+    editingGroupBlock?: 'ROOT' | string;
     onClickGroup?: (e: React.MouseEvent, id: string, type: string) => void;
     bulkIds?: string[];
     onDoubleClickOutsideGroup: () => void;

package/dist/lib/Resizable/Resizable.js

@@ -34,6 +34,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useEffect, useRef } from "react";
 import { cloneElement } from "./utils/cloneElement";
 import { DraggableCore } from "../Draggable";
+import classNames from "../../external-lib/classnames";
 var Resizable = function (_a) {
     var children = _a.children, _b = _a.axis, axis = _b === void 0 ? "both" : _b, _c = _a.handleSize, handleSize = _c === void 0 ? [20, 20] : _c, _d = _a.lockAspectRatio, lockAspectRatio = _d === void 0 ? false : _d, _e = _a.minConstraints, minConstraints = _e === void 0 ? [20, 20] : _e, _f = _a.maxConstraints, maxConstraints = _f === void 0 ? [Infinity, Infinity] : _f, _g = _a.resizeHandles, resizeHandles = _g === void 0 ? ["se"] : _g, _h = _a.transformScale, transformScale = _h === void 0 ? 1 : _h, isResizing = _a.isResizing, autoResize = _a.autoResize, colWidth = _a.colWidth, margin = _a.margin, props = __rest(_a, ["children", "axis", "handleSize", "lockAspectRatio", "minConstraints", "maxConstraints", "resizeHandles", "transformScale", "isResizing", "autoResize", "colWidth", "margin"]);
     var handleRefs = useRef({
@@ -119,8 +120,6 @@ var Resizable = function (_a) {
                 width = height * ratio;
             }
         }
-        console.log('w: ', width);
-        console.log('minW: ', minWidth.current);
         var _b = [width, height], oldW = _b[0], oldH = _b[1];
         var _c = (_a = slack.current) !== null && _a !== void 0 ? _a : [0, 0], slackW = _c[0], slackH = _c[1];
         width += slackW;
@@ -269,7 +268,7 @@ var Resizable = function (_a) {
         var props = __assign({ ref: ref }, (isDOMElement ? {} : { handleAxis: handleAxis }));
         return React.cloneElement(handle, props);
     };
-    return cloneElement(children, __assign(__assign({}, restProps), { className: "".concat(className ? "".concat(className, " ") : "", "react-resizable"), children: __spreadArray([
+    return cloneElement(children, __assign(__assign({}, restProps), { className: classNames(className !== null && className !== void 0 ? className : 'react-resizable'), children: __spreadArray([
             // ...children.props.children,
             React.Children.map(children.props.children, function (child) { return child; })
         ], resizeHandles.map(function (handleAxis) {

package/dist/lib/utils/classNames.d.ts

@@ -0,0 +1,3 @@
+type ClassValue = string | number | boolean | null | undefined;
+declare function clsx(...classes: ClassValue[]): string;
+export default clsx;

package/dist/lib/utils/classNames.js

@@ -0,0 +1,10 @@
+function clsx() {
+    var classes = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        classes[_i] = arguments[_i];
+    }
+    return classes
+        .filter(function (cls) { return Boolean(cls); })
+        .join(" ");
+}
+export default clsx;

package/package.json

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