publ-echo 0.0.103 → 0.0.105

package/dist/lib/GridLayoutEditor/ReactGridLayout.js

@@ -29,34 +29,48 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { useState, useRef, useLayoutEffect } from "react";
-import classNames from "../../external-lib/classnames";
-import { bottom, cloneLayoutItem, compact, getAllCollisions, getLayoutItem, moveElement, noop, synchronizeLayoutWithChildren, withLayoutItem, } from "./utils/renderHelpers";
-import { calcGridColWidth, calcXY, resolveRowHeight, } from "../GridItem/utils/calculateUtils";
-import GridItem from "../GridItem/GridItem";
-import isEqual from "../../external-lib/lodash.isEqual";
-var layoutClassName = "react-grid-layout";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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, 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';
+import GroupItem from '../GridItem/GroupItem';
+import OutsideClickHandler from '../GridItem/OutsideClickHandler';
+var layoutClassName = 'react-grid-layout';
 var ReactGridLayout = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
-    var _b = props.autoSize, autoSize = _b === void 0 ? true : _b, _c = props.cols, cols = _c === void 0 ? 12 : _c, _d = props.className, className = _d === void 0 ? "" : _d, _e = props.style, style = _e === void 0 ? {} : _e, _f = props.draggableHandle, draggableHandle = _f === void 0 ? "" : _f, _g = props.draggableCancel, draggableCancel = _g === void 0 ? "" : _g, _h = props.containerPadding, containerPadding = _h === void 0 ? undefined : _h, _j = props.rowHeight, rowHeight = _j === void 0 ? 150 : _j, _k = props.maxRows, maxRows = _k === void 0 ? Infinity : _k, _l = props.margin, margin = _l === void 0 ? [10, 10] : _l, _m = props.isBounded, isBounded = _m === void 0 ? false : _m, _o = props.isDraggable, isDraggable = _o === void 0 ? true : _o, _p = props.isResizable, isResizable = _p === void 0 ? true : _p, _q = props.allowOverlap, allowOverlap = _q === void 0 ? false : _q, _r = props.isDroppable, isDroppable = _r === void 0 ? false : _r, _s = props.useCSSTransforms, useCSSTransforms = _s === void 0 ? true : _s, _t = props.transformScale, transformScale = _t === void 0 ? 1 : _t, _u = props.compactType, compactType = _u === void 0 ? "vertical" : _u, _v = props.preventCollision, preventCollision = _v === void 0 ? false : _v, _w = props.droppingItem, droppingItem = _w === void 0 ? {
-        i: "__dropping-elem__",
+    var sectionId = props.sectionId, _b = props.autoSize, autoSize = _b === void 0 ? true : _b, _c = props.cols, cols = _c === void 0 ? 12 : _c, _d = props.className, className = _d === void 0 ? '' : _d, _e = props.style, style = _e === void 0 ? {} : _e, _f = props.draggableHandle, draggableHandle = _f === void 0 ? '' : _f, _g = props.draggableCancel, draggableCancel = _g === void 0 ? '' : _g, _h = props.containerPadding, containerPadding = _h === void 0 ? undefined : _h, _j = props.rowHeight, rowHeight = _j === void 0 ? 150 : _j, _k = props.maxRows, maxRows = _k === void 0 ? Infinity : _k, _l = props.margin, margin = _l === void 0 ? [10, 10] : _l, _m = props.isBounded, isBounded = _m === void 0 ? false : _m, _o = props.isDraggable, isDraggable = _o === void 0 ? true : _o, _p = props.isResizable, isResizable = _p === void 0 ? true : _p, _q = props.allowOverlap, allowOverlap = _q === void 0 ? false : _q, _r = props.isDroppable, isDroppable = _r === void 0 ? false : _r, _s = props.useCSSTransforms, useCSSTransforms = _s === void 0 ? true : _s, _t = props.transformScale, transformScale = _t === void 0 ? 1 : _t, _u = props.compactType, compactType = _u === void 0 ? 'vertical' : _u, _v = props.preventCollision, preventCollision = _v === void 0 ? false : _v, _w = props.droppingItem, droppingItem = _w === void 0 ? {
+        i: '__dropping-elem__',
         h: 1,
         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;
-    var _0 = useState(), activeDrag = _0[0], setActiveDrag = _0[1];
-    var _1 = useState(), oldDragItem = _1[0], setOldDragItem = _1[1];
-    var _2 = useState(), oldLayout = _2[0], setOldLayout = _2[1];
-    var _3 = useState(), oldResizeItem = _3[0], setOldResizeItem = _3[1];
-    var _4 = useState(), droppingDOMNode = _4[0], setDroppingDOMNode = _4[1];
-    var _5 = useState(), droppingPosition = _5[0], setDroppingPosition = _5[1];
-    var _6 = useState(false), isMounted = _6[0], setIsMounted = _6[1];
-    var _7 = useState(function () {
+    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];
+    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];
+    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];
+    var _10 = useState(function () {
         return synchronizeLayoutWithChildren(props.layout || [], children, cols, compactType, allowOverlap);
-    }), layout = _7[0], setLayout = _7[1];
+    }), layout = _10[0], setLayout = _10[1];
     var dragEnterCounter = useRef(0);
     useLayoutEffect(function () {
         setIsMounted(true);
@@ -64,12 +78,12 @@ var ReactGridLayout = function (_a) {
     }, []);
     useLayoutEffect(function () {
         if (props.layout && !Array.isArray(props.layout)) {
-            console.error("Expecting layout to be an Array but got: ", props.layout);
+            console.error('Expecting layout to be an Array but got: ', props.layout);
         }
         setLayout(synchronizeLayoutWithChildren(props.layout || [], children, cols, compactType, allowOverlap));
     }, [props.layout]);
     useLayoutEffect(function () {
-        var newLayout = synchronizeLayoutWithChildren(props.layout || layout, children, props.cols || cols, props.compactType || "vertical", props.allowOverlap);
+        var newLayout = synchronizeLayoutWithChildren(props.layout || layout, children, props.cols || cols, props.compactType || 'vertical', props.allowOverlap);
         setLayout(newLayout);
     }, [children]);
     var getPositionParams = function () {
@@ -95,11 +109,10 @@ var ReactGridLayout = function (_a) {
         var containerPaddingY = containerPadding
             ? containerPadding[1]
             : margin[1];
-        return (biggerNbRow *
-            resolveRowHeight(rowHeight, colWidth) +
+        return (biggerNbRow * resolveRowHeight(rowHeight, colWidth) +
             (biggerNbRow - 1) * margin[1] +
             containerPaddingY * 2 +
-            "px");
+            'px');
     };
     var getBackgroundHeight = function () {
         if (!autoSize)
@@ -109,17 +122,16 @@ var ReactGridLayout = function (_a) {
         var containerPaddingY = containerPadding
             ? containerPadding[1]
             : margin[1];
-        return (biggerNbRow *
-            resolveRowHeight(rowHeight, colWidth) +
+        return (biggerNbRow * resolveRowHeight(rowHeight, colWidth) +
             (biggerNbRow - 1) * margin[1] +
             containerPaddingY * 2 -
             2 * margin[1] +
-            "px");
+            'px');
     };
     var getBackgroundWidth = function () {
         if (!autoSize)
             return;
-        return width - margin[0] * 2 + "px";
+        return width - margin[0] * 2 + 'px';
     };
     /**
      * When dragging starts
@@ -129,13 +141,27 @@ var ReactGridLayout = function (_a) {
      * @param {Event} e The mousedown event
      * @param {Element} node The current dragging DOM element
      */
-    var onDragStartHandler = function (i, x, y, _a) {
+    var onDragStartHandler = function (i, x, y, _a, isGroup) {
+        var _b;
         var e = _a.e, node = _a.node;
-        var l = getLayoutItem(layout, i);
+        var l = (_b = getLayoutItem(layout, i)) !== null && _b !== void 0 ? _b : { i: i, x: x, y: y, w: 1, h: 1 };
         if (!l)
             return;
         setOldDragItem(cloneLayoutItem(l));
         setOldLayout(layout);
+        if (isGroup) {
+            if (!blockStructure) {
+                return;
+            }
+            var childrenIds = findAllChildrenCbIds(blockStructure, i).map(function (i) {
+                return i.toString();
+            });
+            var children_1 = childrenIds.map(function (id) {
+                var item = getLayoutItem(layout, id);
+                return cloneLayoutItem(item);
+            });
+            setOldGroupChildren(children_1);
+        }
         props.onDragStart &&
             props.onDragStart({
                 layout: layout,
@@ -146,6 +172,32 @@ var ReactGridLayout = function (_a) {
                 node: node,
             });
     };
+    var onDragStartHandlerGroup = function (i, x, y, _a, isGroup) {
+        // const l = getLayoutItem(layout, i);
+        var e = _a.e, node = _a.node;
+        // if (!l) return;
+        // setOldDragItem(cloneLayoutItem(l));
+        setOldLayout(layout);
+        if (isGroup) {
+            if (!blockStructure) {
+                return;
+            }
+            var children_2 = findDirectChildrenBlockIds(blockStructure, i).map(function (id) {
+                var item = getLayoutItem(layout, id);
+                return cloneLayoutItem(item);
+            });
+            setOldGroupChildren(children_2);
+        }
+        // props.onDragStart &&
+        //   props.onDragStart({
+        //     layout,
+        //     prev: l,
+        //     item: l,
+        //     placeholder: undefined,
+        //     e,
+        //     node,
+        //   });
+    };
     /**
      * Each drag movement create a new dragelement and move the element to the dragged location
      * @param {String} i Id of the child
@@ -154,11 +206,17 @@ var ReactGridLayout = function (_a) {
      * @param {Event} e The mousedown event
      * @param {Element} node The current dragging DOM element
      */
-    var onDragHandler = function (i, x, y, _a) {
+    var onDragHandler = function (i, x, y, _a, isGroup) {
+        var _b;
         var e = _a.e, node = _a.node;
-        var l = getLayoutItem(layout, i);
+        var l = (_b = getLayoutItem(layout, i)) !== null && _b !== void 0 ? _b : { i: i, x: x, y: y, w: 10, h: 10 };
         if (!l)
             return;
+        if (!oldDragItem) {
+            return;
+        }
+        var xgap = x - oldDragItem.x;
+        var ygap = y - oldDragItem.y;
         var placeholder = {
             w: l.w,
             h: l.h,
@@ -169,17 +227,35 @@ var ReactGridLayout = function (_a) {
             i: i,
         };
         var isUserAction = true;
-        var newLayout = moveElement({
-            layout: layout,
-            l: l,
-            x: x,
-            y: y,
-            isUserAction: isUserAction,
-            preventCollision: preventCollision,
-            compactType: compactType,
-            cols: cols,
-            allowOverlap: allowOverlap,
-        });
+        var newLayout = isGroup
+            ? layout
+            : moveElement({
+                layout: layout,
+                l: l,
+                x: x,
+                y: y,
+                isUserAction: isUserAction,
+                preventCollision: preventCollision,
+                compactType: compactType,
+                cols: cols,
+                allowOverlap: allowOverlap,
+            });
+        if (isGroup) {
+            oldGroupChildren.forEach(function (item) {
+                var layoutItem = getLayoutItem(layout, item.i);
+                newLayout = moveElement({
+                    layout: layout,
+                    l: layoutItem,
+                    x: item.x + xgap,
+                    y: item.y + ygap,
+                    isUserAction: isUserAction,
+                    preventCollision: preventCollision,
+                    compactType: compactType,
+                    cols: cols,
+                    allowOverlap: allowOverlap,
+                });
+            });
+        }
         props.onDrag &&
             props.onDrag({
                 layout: newLayout,
@@ -201,12 +277,12 @@ var ReactGridLayout = function (_a) {
      * @param {Element} node The current dragging DOM element
      */
     var onDragStopHandler = function (i, x, y, _a) {
+        var _b;
         var e = _a.e, node = _a.node;
         if (!activeDrag || !oldDragItem) {
             return;
         }
-        ;
-        var l = getLayoutItem(layout, i);
+        var l = (_b = getLayoutItem(layout, i)) !== null && _b !== void 0 ? _b : { i: i, x: x, y: y, w: 10, h: 10 };
         if (!l)
             return;
         // NOTE: z-index 원래대로 복귀
@@ -222,7 +298,7 @@ var ReactGridLayout = function (_a) {
             compactType: compactType,
             cols: cols,
             allowOverlap: allowOverlap,
-            overrideZ: oldDragItem.z
+            overrideZ: oldDragItem.z,
         });
         props.onDragStop &&
             props.onDragStop({
@@ -240,6 +316,59 @@ var ReactGridLayout = function (_a) {
         setLayout(newLayout);
         setOldDragItem(undefined);
         setOldLayout(undefined);
+        setOldGroupChildren([]);
+        props.onLayoutChange && props.onLayoutChange(newLayout);
+    };
+    var onDragStopGroupHandler = function (i, x, y, _a) {
+        var _b;
+        var e = _a.e, node = _a.node;
+        if (!activeDrag || !oldDragItem) {
+            return;
+        }
+        var l = (_b = getLayoutItem(layout, i)) !== null && _b !== void 0 ? _b : { i: i, x: x, y: y, w: 10, h: 10 };
+        if (!l)
+            return;
+        // NOTE: z-index 원래대로 복귀
+        l.z = oldDragItem.z;
+        var isUserAction = true;
+        var movedLayout = moveElement({
+            layout: layout,
+            l: l,
+            x: x,
+            y: y,
+            isUserAction: isUserAction,
+            preventCollision: preventCollision,
+            compactType: compactType,
+            cols: cols,
+            allowOverlap: allowOverlap,
+            overrideZ: oldDragItem.z,
+        });
+        var updatedItems = oldGroupChildren.map(function (item) {
+            var layoutItem = getLayoutItem(layout, item.i);
+            return {
+                id: layoutItem.i,
+                x: layoutItem.x,
+                y: layoutItem.y,
+            };
+        });
+        props.onDragStopForGroup &&
+            props.onDragStopForGroup({
+                layout: movedLayout,
+                prev: oldDragItem,
+                item: l,
+                placeholder: undefined,
+                e: e,
+                node: node,
+                updatedItems: updatedItems,
+            });
+        var newLayout = allowOverlap
+            ? movedLayout
+            : compact(movedLayout, compactType, cols);
+        setActiveDrag(undefined);
+        setLayout(newLayout);
+        setOldDragItem(undefined);
+        setOldLayout(undefined);
+        setOldGroupChildren([]);
         props.onLayoutChange && props.onLayoutChange(newLayout);
     };
     var onLayoutMaybeChanged = function (newLayout, oldLayout) {
@@ -371,7 +500,7 @@ var ReactGridLayout = function (_a) {
                 layout: newLayout,
                 prev: oldResizeItem,
                 item: l,
-                hasPaddingChanged: hasPaddingChanged
+                hasPaddingChanged: hasPaddingChanged,
             });
         setLayout(allowOverlap ? newLayout : compact(newLayout, compactType, cols));
     };
@@ -391,13 +520,15 @@ var ReactGridLayout = function (_a) {
         // LINK: https://legacy.reactjs.org/docs/react-api.html
         var items = React.Children.toArray(children);
         var item = items.find(function (child) {
-            var originalKey = String(child.key).split(".$");
+            var originalKey = String(child.key).split('.$');
             return originalKey[1] === l.i;
         });
+        var isInBulk = blockStructure &&
+            (bulkIds === null || bulkIds === void 0 ? void 0 : bulkIds.includes(formatCbIdToBlockId(Number(activeDrag.i))));
         if (!item) {
             return null;
         }
-        return (_jsx(GridItem, { w: activeDrag.w, h: activeDrag.h, x: activeDrag.x, y: activeDrag.y, z: activeDrag.z || 0, i: activeDrag.i, className: "placeholder", containerWidth: width, cols: cols, margin: margin, containerPadding: containerPadding || margin, maxRows: maxRows, rowHeight: rowHeight, isDraggable: false, isResizable: false, isBounded: false, useCSSTransforms: useCSSTransforms, transformScale: transformScale, autoResize: !!l.autoResize, children: item && item }));
+        return (_jsx(GridItem, { w: activeDrag.w, h: activeDrag.h, x: activeDrag.x, y: activeDrag.y, z: zIndexMap.ISDRAGGING, i: activeDrag.i, className: 'placeholder', containerWidth: width, cols: cols, margin: margin, containerPadding: containerPadding || margin, maxRows: maxRows, rowHeight: rowHeight, isDraggable: false, isResizable: false, isBounded: false, useCSSTransforms: useCSSTransforms, transformScale: transformScale, autoResize: !!l.autoResize, children: item && item }));
     };
     /**
      * Given a grid item, set its style attributes & surround in a <Draggable>.
@@ -405,22 +536,65 @@ 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));
         if (!l) {
             return;
         }
-        ;
-        var draggable = typeof l.isDraggable === "boolean"
+        var draggable = typeof l.isDraggable === 'boolean'
             ? l.isDraggable
             : !l.static && isDraggable;
-        var resizable = typeof l.isResizable === "boolean"
+        var resizable = typeof l.isResizable === 'boolean'
             ? l.isResizable
             : !l.static && isResizable;
         var resizeHandlesOptions = l.resizeHandles || resizeHandles;
         var bounded = draggable && isBounded && l.isBounded !== false;
-        return (_jsx(GridItem, { 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: draggable, isResizable: resizable, isBounded: bounded, useCSSTransforms: useCSSTransforms && isMounted, usePercentages: !isMounted, transformScale: transformScale, w: l.w, h: l.h, x: l.x, y: l.y, z: l.z || 0, 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 editable = editableBlockIds.includes(Number(l.i));
+        var z = l.z || 0;
+        var isInBulk = blockStructure && (bulkIds === null || bulkIds === void 0 ? void 0 : bulkIds.includes(formatCbIdToBlockId(Number(l.i))));
+        var isRoot = editingGroupBlock === 'ROOT';
+        var block = blockStructure
+            ? findBlockByBlockId(blockStructure, formatCbIdToBlockId(Number(l.i)))
+            : undefined;
+        var parent = blockStructure
+            ? findParentGroupBlock(blockStructure, formatCbIdToBlockId(Number(l.i)))
+            : null;
+        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) {
+                return zIndexMap.EDITING_GROUP_CHILD + z;
+            }
+            if (!isRoot && editable) {
+                return zIndexMap.EDITING_GROUP_CHILD + z;
+            }
+            if (isRoot && editable) {
+                return zIndexMap.ROOT + z;
+            }
+            if (isRoot && !editable) {
+                return zIndexMap.ROOT + z;
+            }
+            if (!editable) {
+                return z;
+            }
+            return z;
+        })();
+        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: zIndex, zOrder: l.z, zOrderInternal: parent
+                ? "".concat(parent[device === 'DESKTOP'
+                    ? 'zOrderDesktopInternal'
+                    : 'zOrderMobileInternal'], " > ").concat(zOrder)
+                : zOrder.toString(), 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;
@@ -488,11 +662,88 @@ var ReactGridLayout = function (_a) {
     };
     var mergedClassName = classNames(layoutClassName, className);
     var mergedStyle = __assign({ height: containerHeight() }, 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: [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",
-                    marginRight: margin[0] + "px",
-                }, children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: getBackgroundWidth(), height: getBackgroundHeight(), children: [_jsx("defs", { children: _jsx("pattern", { id: "grid-pattern", height: rowHeight + margin[1], width: colWidth + margin[0], patternUnits: "userSpaceOnUse", children: _jsx("rect", { x: 0.5, y: 0.5, className: "grid-pattern-rect", height: rowHeight, width: colWidth }) }) }), _jsx("rect", { width: width, height: "100%", fill: "url(#grid-pattern)" })] }) }))] }));
+    var processGroup = function (block, viewOnly) {
+        var _a;
+        if (!blockStructure) {
+            return;
+        }
+        var childrenIds = findAllChildrenCbIds(blockStructure, block.blockId).map(function (i) { return i.toString(); });
+        var groupItem = getBoundingArea(layout, childrenIds);
+        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 isBulk = block.blockId === 'BULK';
+        var baseZ = (function () {
+            if (isEditingGroup) {
+                return zIndexMap.EDITING_GROUP;
+            }
+            if (isBulk) {
+                return zIndexMap.EDITING_GROUP_CHILD + groupItem.z;
+            }
+            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;
+            }
+            if (type === 'GROUP_BLOCK') {
+                return zIndexMap.GROUP;
+            }
+            if (type === 'BULK') {
+                return zIndexMap.BULK;
+            }
+            return zIndexMap.CB;
+        })();
+        var zIndex = editorMode === 'EDIT' ? baseZ : zOrder;
+        var handleClick = function (e) {
+            onClickGroup && onClickGroup(e, block.blockId, type);
+        };
+        var handleDoubleClick = function (e) {
+            onDoubleClickGroup && onDoubleClickGroup(e, block.blockId, type);
+        };
+        var handleClickContextGroup = function (e) {
+            (props === null || props === void 0 ? void 0 : props.onContextGroup) &&
+                props.onContextGroup(e, block.blockId, isEditingGroup);
+        };
+        var parent = blockStructure
+            ? findParentGroupBlock(blockStructure, block.blockId)
+            : null;
+        return (_jsx(OutsideClickHandler, { onOutsideClick: onDoubleClickOutsideGroup, children: _jsx(GroupItem, { className: classNames({
+                    'bulk-child-item': isInBulk,
+                    'grid-bulk-block': block.blockId === 'BULK',
+                    editing: editingGroupBlock === block.blockId,
+                    selected: selectedGroupBlock === block.blockId,
+                }), z: zIndex, minZ: groupItem.minZ, zOrder: zOrder, zOrderInternal: parent
+                    ? "".concat(parent[device === 'DESKTOP'
+                        ? 'zOrderDesktopInternal'
+                        : 'zOrderMobileInternal'], " > ").concat(zOrder)
+                    : zOrder.toString(), 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}
+                // maxW={l.maxW}
+                // static={l.static}
+                // droppingPosition={isDroppingItem ? droppingPosition : undefined}
+                // resizeHandles={resizeHandlesOptions}
+                // resizeHandle={resizeHandle}
+                isHiddenVisibility: isHiddenVisibility, customColWidth: colWidth, autoResize: false, onContextGroup: handleClickContextGroup, children: _jsx("div", { onClick: handleClick, onDoubleClick: handleDoubleClick }) }, block.blockId) }));
+    };
+    var currentGroupBlocks = blockStructure
+        ? findGroupBlocks(blockStructure, editingGroupBlock)
+        : [];
+    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, "data-grid-row-height": rowHeight, "data-grid-cols": cols, "data-section-id": sectionId, 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',
+                    marginRight: margin[0] + 'px',
+                }, children: _jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', width: getBackgroundWidth(), height: getBackgroundHeight(), children: [_jsx("defs", { children: _jsx("pattern", { id: 'grid-pattern', height: rowHeight + margin[1], width: colWidth + margin[0], patternUnits: 'userSpaceOnUse', children: _jsx("rect", { x: 0.5, y: 0.5, className: 'grid-pattern-rect', height: rowHeight, width: colWidth }) }) }), _jsx("rect", { width: width, height: '100%', fill: 'url(#grid-pattern)' })] }) }))] }));
 };
 export default ReactGridLayout;

package/dist/lib/GridLayoutEditor/ResponsiveGridLayout.js

@@ -38,7 +38,7 @@ function getIndentationValue(param, breakpoint) {
 }
 export var ResponsiveGridLayout = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
-    var breakpoint = props.breakpoint, compactType = props.compactType, _b = props.breakpoints, breakpoints = _b === void 0 ? { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 } : _b, _c = props.cols, cols = _c === void 0 ? { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 } : _c, _d = props.containerPadding, containerPadding = _d === void 0 ? {} : _d, _e = props.layouts, layouts = _e === void 0 ? {} : _e, _f = props.width, width = _f === void 0 ? 0 : _f, _g = props.margin, margin = _g === void 0 ? [10, 10] : _g, _h = props.onBreakpointChange, onBreakpointChange = _h === void 0 ? noop : _h, _j = props.onLayoutChange, onLayoutChange = _j === void 0 ? noop : _j, _k = props.onWidthChange, onWidthChange = _k === void 0 ? noop : _k, transformScale = props.transformScale, restProps = __rest(props, ["breakpoint", "compactType", "breakpoints", "cols", "containerPadding", "layouts", "width", "margin", "onBreakpointChange", "onLayoutChange", "onWidthChange", "transformScale"]);
+    var breakpoint = props.breakpoint, compactType = props.compactType, _b = props.breakpoints, breakpoints = _b === void 0 ? { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 } : _b, _c = props.cols, cols = _c === void 0 ? { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 } : _c, _d = props.containerPadding, containerPadding = _d === void 0 ? {} : _d, _e = props.layouts, layouts = _e === void 0 ? {} : _e, _f = props.width, width = _f === void 0 ? 0 : _f, _g = props.margin, margin = _g === void 0 ? [10, 10] : _g, _h = props.onBreakpointChange, onBreakpointChange = _h === void 0 ? noop : _h, _j = props.onLayoutChange, onLayoutChange = _j === void 0 ? noop : _j, _k = props.onWidthChange, onWidthChange = _k === void 0 ? noop : _k, zoom = props.zoom, restProps = __rest(props, ["breakpoint", "compactType", "breakpoints", "cols", "containerPadding", "layouts", "width", "margin", "onBreakpointChange", "onLayoutChange", "onWidthChange", "zoom"]);
     var _l = useState({ width: width, breakpoints: breakpoints, cols: cols }), prevProps = _l[0], setPrevProps = _l[1];
     var generateInitialState = function () {
         var breakpoint = getBreakpointFromWidth(breakpoints, width);
@@ -112,6 +112,6 @@ export var ResponsiveGridLayout = function (_a) {
         var containerPaddingModified = getIndentationValue(containerPadding, newBreakpoint);
         onWidthChange(width, modifiedMargin, newCols, containerPaddingModified);
     };
-    return (_jsx(ReactGridLayout, __assign({}, restProps, { children: children, width: width, margin: getIndentationValue(margin, state.breakpoint), containerPadding: getIndentationValue(containerPadding, state.breakpoint), onLayoutChange: onLayoutChangeHandler, layout: state.layout, cols: state.cols, transformScale: transformScale })));
+    return (_jsx(ReactGridLayout, __assign({}, restProps, { children: children, width: width, margin: getIndentationValue(margin, state.breakpoint), containerPadding: getIndentationValue(containerPadding, state.breakpoint), onLayoutChange: onLayoutChangeHandler, layout: state.layout, cols: state.cols, transformScale: zoom !== null && zoom !== void 0 ? zoom : 1 })));
 };
 export default ResponsiveGridLayout;

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

@@ -0,0 +1,57 @@
+export declare const zIndexMap: {
+    ISDRAGGING: number;
+    BULK: number;
+    EDITING_GROUP_CHILD: number;
+    EDITING_GROUP: number;
+    GROUP: number;
+    CB: number;
+    ROOT: number;
+};
+export declare function getBlockSpecificType(block: Block): "ROOT" | "BULK" | "COMPONENT_BLOCK" | "GROUP_BLOCK";
+export type SectionPedigree = RootBlock;
+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 findBlockByBlockId: (block: Block, blockId: string) => Block | null;
+export declare const findDirectChildrenCbIds: (block: Block, targetId: string) => number[];
+export declare const findAllChildrenCbIds: (block: Block, targetId: string) => number[];
+export declare const findAllChildrenBlockIds: (block: Block, targetId: string) => string[];
+export declare const findDirectChildrenBlockIds: (block: Block, targetId: string) => string[];
+export declare const findGroupBlocks: (block: Block, targetId: string) => GroupBlock[];
+export declare const addBulkToTarget: (block: Block, targetId: string, bulkBlockIds: string[]) => Block;
+export declare function getBlockWorkDirPath(blockStructure: Block, targetBlockId: string): string;
+export declare function formatBlockIdToCbId(blockId: string): number | null;
+export declare function formatCbIdToBlockId(cbId: number): string;
+export declare function findParentGroupBlock(current: Block, targetBlockId: string): GroupBlock | null;
+export declare function findOneComponentBlock(current: Block, targetBlockId: string): number | null;