publ-echo-test 0.0.330 → 0.0.332

package/dist/lib/GridLayoutEditor/ReactGridLayout.js

@@ -1,748 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-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";
-// NOTE: 필수 변경하기
-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 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, 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 = _10[0], setLayout = _10[1];
-    var dragEnterCounter = useRef(0);
-    useLayoutEffect(function () {
-        setIsMounted(true);
-        onLayoutMaybeChanged(layout, layout);
-    }, []);
-    useLayoutEffect(function () {
-        if (props.layout && !Array.isArray(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);
-        setLayout(newLayout);
-    }, [children]);
-    var getPositionParams = function () {
-        return {
-            cols: cols,
-            margin: margin,
-            maxRows: maxRows,
-            rowHeight: rowHeight,
-            containerWidth: width,
-            containerPadding: containerPadding || margin,
-        };
-    };
-    var colWidth = customColWidth !== null && customColWidth !== void 0 ? customColWidth : calcGridColWidth(getPositionParams());
-    /**
-     * Calculates a pixel value for the container.
-     * @return {String} Container height in pixels.
-     */
-    var containerHeight = function () {
-        if (!autoSize)
-            return;
-        var nbRow = bottom(layout);
-        var biggerNbRow = minNbRow ? Math.max(nbRow, minNbRow) : nbRow;
-        var containerPaddingY = containerPadding
-            ? containerPadding[1]
-            : margin[1];
-        return (biggerNbRow * resolveRowHeight(rowHeight, colWidth) +
-            (biggerNbRow - 1) * margin[1] +
-            containerPaddingY * 2 +
-            "px");
-    };
-    var getBackgroundHeight = function () {
-        if (!autoSize)
-            return;
-        var nbRow = bottom(layout);
-        var biggerNbRow = minNbRow ? Math.max(nbRow, minNbRow) : nbRow;
-        var containerPaddingY = containerPadding
-            ? containerPadding[1]
-            : margin[1];
-        return (biggerNbRow * resolveRowHeight(rowHeight, colWidth) +
-            (biggerNbRow - 1) * margin[1] +
-            containerPaddingY * 2 -
-            2 * margin[1] +
-            "px");
-    };
-    var getBackgroundWidth = function () {
-        if (!autoSize)
-            return;
-        return width - margin[0] * 2 + "px";
-    };
-    /**
-     * When dragging starts
-     * @param {String} i Id of the child
-     * @param {Number} x X position of the move
-     * @param {Number} y Y position of the move
-     * @param {Event} e The mousedown event
-     * @param {Element} node The current dragging DOM element
-     */
-    var onDragStartHandler = function (i, x, y, _a, isGroup) {
-        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: 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,
-                prev: l,
-                item: l,
-                placeholder: undefined,
-                e: e,
-                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
-     * @param {Number} x X position of the move
-     * @param {Number} y Y position of the move
-     * @param {Event} e The mousedown event
-     * @param {Element} node The current dragging DOM element
-     */
-    var onDragHandler = function (i, x, y, _a, isGroup) {
-        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 };
-        if (!l)
-            return;
-        if (!oldDragItem) {
-            return;
-        }
-        var xgap = x - oldDragItem.x;
-        var ygap = y - oldDragItem.y;
-        var placeholder = {
-            w: l.w,
-            h: l.h,
-            x: l.x,
-            y: l.y,
-            z: l.z,
-            placeholder: true,
-            i: i,
-        };
-        var isUserAction = true;
-        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,
-                prev: oldDragItem,
-                item: l,
-                placeholder: placeholder,
-                e: e,
-                node: node,
-            });
-        setLayout(allowOverlap ? newLayout : compact(newLayout, compactType, cols));
-        setActiveDrag(placeholder);
-    };
-    /**
-     * When dragging stops, figure out which position the element is closest to and update its x and y.
-     * @param {String} i Index of the child.
-     * @param {Number} x X position of the move
-     * @param {Number} y Y position of the move
-     * @param {Event} e The mousedown event
-     * @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 = (_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,
-        });
-        props.onDragStop &&
-            props.onDragStop({
-                layout: movedLayout,
-                prev: oldDragItem,
-                item: l,
-                placeholder: undefined,
-                e: e,
-                node: node,
-            });
-        var newLayout = allowOverlap
-            ? movedLayout
-            : compact(movedLayout, compactType, cols);
-        setActiveDrag(undefined);
-        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) {
-        if (!oldLayout) {
-            oldLayout = layout;
-        }
-        if (!isEqual(oldLayout, newLayout)) {
-            props.onLayoutChange && props.onLayoutChange(newLayout);
-        }
-    };
-    var onResizeStartHandler = function (i, x, y, _a) {
-        var e = _a.e, node = _a.node;
-        var l = getLayoutItem(layout, i);
-        if (!l)
-            return;
-        setOldResizeItem(cloneLayoutItem(l));
-        setOldLayout(layout);
-        props.onResizeStart &&
-            props.onResizeStart({
-                layout: layout,
-                prev: l,
-                item: l,
-                e: e,
-                node: node,
-            });
-    };
-    var onResizeHandler = function (i, w, h, _a, x, y) {
-        var e = _a.e, node = _a.node;
-        var _b = withLayoutItem(layout, i, function (l) {
-            var hasCollisions;
-            if (preventCollision && !allowOverlap) {
-                var collisions = getAllCollisions(layout, __assign(__assign({}, l), { w: x, h: y })).filter(function (layoutItem) { return layoutItem.i !== l.i; });
-                hasCollisions = collisions.length > 0;
-                if (hasCollisions) {
-                    var leastX_1 = Infinity, leastY_1 = Infinity;
-                    collisions.forEach(function (layoutItem) {
-                        if (layoutItem.x > l.x)
-                            leastX_1 = Math.min(leastX_1, layoutItem.x);
-                        if (layoutItem.y > l.y)
-                            leastY_1 = Math.min(leastY_1, layoutItem.y);
-                    });
-                    if (Number.isFinite(leastX_1))
-                        l.w = leastX_1 - l.x;
-                    if (Number.isFinite(leastY_1))
-                        l.h = leastY_1 - l.y;
-                }
-            }
-            if (!hasCollisions) {
-                // NOTE - 여기서 x, y를 추가적으로 세팅해줘야 nw, w, n, sw 방향에서 placeholder가 반대로 resize되지 않고 해당 element와 똑같이 resize
-                l.w = w;
-                l.h = h;
-                l.x = x;
-                l.y = y;
-            }
-            return l;
-        }), newLayout = _b[0], l = _b[1];
-        if (!l)
-            return;
-        var placeholder = {
-            w: l.w,
-            h: l.h,
-            x: l.x,
-            y: l.y,
-            z: l.z,
-            static: true,
-            i: i,
-        };
-        props.onResize &&
-            props.onResize({
-                layout: newLayout,
-                prev: oldResizeItem,
-                item: l,
-                placeholder: placeholder,
-                e: e,
-                node: node,
-            });
-        setLayout(allowOverlap ? newLayout : compact(newLayout, compactType, cols));
-        setActiveDrag(placeholder);
-    };
-    var onResizeStopHandler = function (i, x, y, _a) {
-        var e = _a.e, node = _a.node;
-        var l = getLayoutItem(layout, i);
-        props.onResizeStop &&
-            props.onResizeStop({ layout: layout, prev: oldResizeItem, item: l, e: e, node: node });
-        var newLayout = allowOverlap
-            ? layout
-            : compact(layout, compactType, cols);
-        setActiveDrag(undefined);
-        setLayout(newLayout);
-        setOldResizeItem(undefined);
-        setOldLayout(undefined);
-        onLayoutMaybeChanged(newLayout, oldLayout);
-    };
-    var onFitToContentHandler = function (i, w, h, x, y, _a) {
-        var hasPaddingChanged = _a.hasPaddingChanged;
-        var _b = withLayoutItem(layout, i, function (l) {
-            var hasCollisions;
-            if (preventCollision && !allowOverlap) {
-                var collisions = getAllCollisions(layout, __assign(__assign({}, l), { w: x, h: y })).filter(function (layoutItem) { return layoutItem.i !== l.i; });
-                hasCollisions = collisions.length > 0;
-                if (hasCollisions) {
-                    var leastX_2 = Infinity, leastY_2 = Infinity;
-                    collisions.forEach(function (layoutItem) {
-                        if (layoutItem.x > l.x)
-                            leastX_2 = Math.min(leastX_2, layoutItem.x);
-                        if (layoutItem.y > l.y)
-                            leastY_2 = Math.min(leastY_2, layoutItem.y);
-                    });
-                    if (Number.isFinite(leastX_2))
-                        l.w = leastX_2 - l.x;
-                    if (Number.isFinite(leastY_2))
-                        l.h = leastY_2 - l.y;
-                }
-            }
-            if (!hasCollisions) {
-                // NOTE - 여기서 x, y를 추가적으로 세팅해줘야 nw, w, n, sw 방향에서 placeholder가 반대로 resize되지 않고 해당 element와 똑같이 resize
-                l.w = w;
-                l.h = h;
-                l.x = x;
-                l.y = y;
-                l.minH = h;
-            }
-            return l;
-        }), newLayout = _b[0], l = _b[1];
-        if (!l)
-            return;
-        props.onFitToContent &&
-            props.onFitToContent({
-                layout: newLayout,
-                prev: oldResizeItem,
-                item: l,
-                hasPaddingChanged: hasPaddingChanged,
-            });
-        setLayout(allowOverlap ? newLayout : compact(newLayout, compactType, cols));
-    };
-    /**
-     * Create a placeholder object.
-     * @return {Element} Placeholder div.
-     */
-    var placeholder = function () {
-        if (!activeDrag)
-            return;
-        // {...activeDrag} is pretty slow, actually
-        var l = getLayoutItem(props.layout, String(activeDrag.i));
-        if (!l) {
-            return null;
-        }
-        // NOTE: toChildren changes key
-        // 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(".$");
-            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: 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, minH: l.minH, minW: l.minW, children: item && item }));
-    };
-    /**
-     * Given a grid item, set its style attributes & surround in a <Draggable>.
-     * @param  {Element} child React element.
-     * @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"
-            ? l.isDraggable
-            : !l.static && isDraggable;
-        var resizable = typeof l.isResizable === "boolean"
-            ? l.isResizable
-            : !l.static && isResizable;
-        var resizeHandlesOptions = l.resizeHandles || resizeHandles;
-        var bounded = draggable && isBounded && l.isBounded !== false;
-        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 isInsideOfEditingGroup = editingGroupAllChildren.includes(l.i);
-        var editorZIndex = (function () {
-            if (isRoot && isInBulk) {
-                return z;
-            }
-            if (!isRoot && isInsideOfEditingGroup) {
-                return zIndexMap.CB_IN_EDITING_GROUP + z;
-            }
-            if (isRoot && editable) {
-                return zIndexMap.ROOT + z;
-            }
-            if (isRoot && !editable) {
-                return zIndexMap.ROOT + z;
-            }
-            if (!editable) {
-                return z;
-            }
-            return z;
-        })();
-        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": !isInsideOfEditingGroup,
-            }), 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;
-        e.preventDefault();
-        e.stopPropagation();
-        var onDragOverResult = (_a = props.onDropDragOver) === null || _a === void 0 ? void 0 : _a.call(props, e); // TODO fix
-        if (onDragOverResult === false) {
-            if (droppingDOMNode) {
-                removeDroppingPlaceholder();
-            }
-            return false;
-        }
-        var finalDroppingItem = __assign(__assign({}, droppingItem), onDragOverResult);
-        var _b = e.nativeEvent, layerX = _b.layerX, layerY = _b.layerY; // TODO fix
-        var droppingPosition = {
-            left: layerX / transformScale,
-            top: layerY / transformScale,
-            e: e,
-        };
-        if (!droppingDOMNode) {
-            var calculatedPosition = calcXY(getPositionParams(), layerY, layerX, finalDroppingItem.w, finalDroppingItem.h);
-            setDroppingDOMNode(_jsx("div", {}, finalDroppingItem.i));
-            setDroppingPosition(droppingPosition);
-            setLayout(__spreadArray(__spreadArray([], layout, true), [
-                __assign(__assign({}, finalDroppingItem), { x: calculatedPosition.x, y: calculatedPosition.y, static: false, isDraggable: true }),
-            ], false));
-        }
-        else if (droppingPosition) {
-            var left = droppingPosition.left, top_1 = droppingPosition.top;
-            var shouldUpdatePosition = left != layerX || top_1 != layerY;
-            if (shouldUpdatePosition) {
-                setDroppingPosition(droppingPosition);
-            }
-        }
-    };
-    var removeDroppingPlaceholder = function () {
-        var newLayout = compact(layout.filter(function (l) { return l.i !== droppingItem.i; }), compactType, cols, allowOverlap);
-        setLayout(newLayout);
-        setDroppingDOMNode(undefined);
-        setActiveDrag(undefined);
-        setDroppingPosition(undefined);
-    };
-    var onDragLeaveHandler = function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-        dragEnterCounter.current = dragEnterCounter.current - 1;
-        if (dragEnterCounter.current === 0) {
-            removeDroppingPlaceholder();
-        }
-    };
-    var onDragEnterHandler = function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-        dragEnterCounter.current += 1;
-    };
-    var onDropHandler = function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-        var item = layout.find(function (l) { return l.i === droppingItem.i; });
-        dragEnterCounter.current = 0;
-        removeDroppingPlaceholder();
-        if (item) {
-            props.onDrop && props.onDrop(layout, item, e);
-        }
-    };
-    var mergedClassName = classNames(layoutClassName, className);
-    var mergedStyle = __assign({ height: containerHeight() }, style);
-    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 internalZOrder = (_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 (isBulk) {
-                // groupItem.z : 그룹 내 CB중 가장 큰 zorder
-                return zIndexMap.BULK + groupItem.z;
-            }
-            if (isInBulk) {
-                if (!isRoot) {
-                    return zIndexMap.EDITABLE_GROUP + internalZOrder;
-                }
-                return zIndexMap.CB_IN_EDITING_GROUP + internalZOrder;
-            }
-            if (isEditingGroup) {
-                return zIndexMap.EDITING_GROUP;
-            }
-            if (!isRoot && type === "GROUP_BLOCK") {
-                return zIndexMap.EDITABLE_GROUP + internalZOrder;
-            }
-            if (type === "GROUP_BLOCK") {
-                return zIndexMap.GROUP;
-            }
-            return -1; // NOTE: ERROR
-        })();
-        var zIndex = editorMode === "EDIT" ? baseZ : internalZOrder;
-        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: internalZOrder, zOrderInternal: parent
-                    ? "".concat(parent[device === "DESKTOP"
-                        ? "zOrderDesktopInternal"
-                        : "zOrderMobileInternal"], " > ").concat(internalZOrder)
-                    : internalZOrder.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;