publ-echo-test 0.0.58 → 0.0.59

package/dist/lib/Draggable/DraggableCore.js

@@ -260,6 +260,7 @@ var DraggableCore = function (_a) {
         onMouseDown: handleMouseDown,
         onMouseUp: handleMouseUp,
         onTouchEnd: handleTouchEnd,
+        onDoubleClick: props.onDoubleClick,
         ref: (_b = props.nodeRef) !== null && _b !== void 0 ? _b : draggableCoreRef,
     });
 };

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

@@ -23,6 +23,7 @@ export type DraggableCoreDefaultProps = {
     onDrag?: DraggableEventHandler | Function;
     onStop?: DraggableEventHandler | Function;
     onMouseDown?: (e: MouseEvent) => void;
+    onDoubleClick?: any;
     scale?: number;
     cancel?: string;
     children: ReactElement<any>;

package/dist/lib/GridItem/GridItem.js

@@ -384,6 +384,7 @@ var GridItem = function (_a) {
         resizing: resizing,
     }, colWidth);
     var child = React.Children.only(children);
+    // console.log(child.props.className, className)
     var newChild = React.cloneElement(child, {
         key: i,
         ref: elementRef,

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

@@ -0,0 +1,5 @@
+import React from "react";
+import { GridItemProps } from "./types";
+import { PropsWithChildren } from "../types";
+declare const GroupItem: ({ children, ...props }: PropsWithChildren<GridItemProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export default GroupItem;

package/dist/lib/GridItem/GroupItem.js

@@ -0,0 +1,411 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState } from "react";
+import { DraggableCore } from "../Draggable";
+import classNames from "../../external-lib/classnames";
+import { calcGridColWidth, calcGridItemPosition, calcGridItemWHPx, calcWH, calcXY, clamp, resolveRowHeight, } from "./utils/calculateUtils";
+import { perc, setTopLeft, setTransform, } from "../GridLayoutEditor/utils/renderHelpers";
+import { Resizable } from "../Resizable";
+var GroupItem = function (_a) {
+    var _b;
+    var children = _a.children, props = __rest(_a, ["children"]);
+    var resizeHandle = props.resizeHandle, cols = props.cols, isDraggable = props.isDraggable, _c = props.transformScale, transformScale = _c === void 0 ? 1 : _c, isResizable = props.isResizable, useCSSTransforms = props.useCSSTransforms, className = props.className, _d = props.cancel, cancel = _d === void 0 ? "" : _d, _e = props.handle, handle = _e === void 0 ? "" : _e, x = props.x, y = props.y, z = props.z, w = props.w, h = props.h, _f = props.minH, minH = _f === void 0 ? 1 : _f, _g = props.minW, minW = _g === void 0 ? 1 : _g, _h = props.maxH, maxH = _h === void 0 ? Infinity : _h, _j = props.maxW, maxW = _j === void 0 ? Infinity : _j, i = props.i, _k = props.isHiddenVisibility, isHiddenVisibility = _k === void 0 ? false : _k, containerWidth = props.containerWidth, customColWidth = props.customColWidth, autoResize = props.autoResize, onDoubleClick = props.onDoubleClick;
+    var _l = useState(), resizing = _l[0], setResizing = _l[1];
+    var _m = useState(), dragging = _m[0], setDragging = _m[1];
+    var _o = useState(), dragStart = _o[0], setDragStart = _o[1];
+    var _p = useState(false), isDragging = _p[0], setIsDragging = _p[1];
+    var _q = useState(false), isResizing = _q[0], setIsResizing = _q[1];
+    var elementRef = useRef(null);
+    var isSelected = (_b = elementRef.current) === null || _b === void 0 ? void 0 : _b.classList.contains('react-grid-item-selected');
+    useEffect(function () {
+        var _a;
+        if (!isSelected || !autoResize) {
+            return;
+        }
+        var targetNode = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.children[0].children[0].children[0];
+        if (!targetNode || isDragging || isResizing) {
+            return;
+        }
+        var prevPaddingL = parseFloat(getComputedStyle(targetNode).paddingLeft);
+        var prevPaddingR = parseFloat(getComputedStyle(targetNode).paddingRight);
+        var prevPaddingT = parseFloat(getComputedStyle(targetNode).paddingTop);
+        var prevPaddingB = parseFloat(getComputedStyle(targetNode).paddingBottom);
+        // MutationObserver 콜백 함수
+        var callback = function (mutationsList) {
+            for (var _i = 0, mutationsList_1 = mutationsList; _i < mutationsList_1.length; _i++) {
+                var mutation = mutationsList_1[_i];
+                var isCharacterChanged = mutation.type === 'characterData';
+                var keepWidth = true;
+                var hasPaddingChanged = false;
+                var height = isCharacterChanged ? mutation.target.parentNode.clientHeight : mutation.target.clientHeight;
+                var width = targetNode.clientWidth;
+                if (!isCharacterChanged && mutation.target instanceof Element) {
+                    var styles = getComputedStyle(mutation.target);
+                    var minWidth = parseFloat(styles.minWidth);
+                    if (minWidth > width) {
+                        keepWidth = false;
+                    }
+                    // NOTE: POC
+                    var paddingL = parseFloat(styles.paddingLeft);
+                    var paddingR = parseFloat(styles.paddingRight);
+                    var paddingT = parseFloat(styles.paddingTop);
+                    var paddingB = parseFloat(styles.paddingBottom);
+                    if (prevPaddingL !== paddingL || prevPaddingR !== paddingR || prevPaddingT !== paddingT || prevPaddingB !== paddingB) {
+                        hasPaddingChanged = true;
+                        keepWidth = false;
+                    }
+                }
+                var prevW = props.w;
+                var prevH = props.h;
+                var _a = calcWH(getPositionParams(), {
+                    width: width,
+                    height: height,
+                }, x, y, 'e', props.w, props.h, false), w_1 = _a.w, h_1 = _a.h;
+                if (keepWidth) {
+                    w_1 = prevW;
+                }
+                if (prevH > h_1) {
+                    h_1 = prevH;
+                }
+                var _b = getResizableXYPosition('e', w_1, h_1, prevW, prevH), newX = _b.newX, newY = _b.newY;
+                if (prevH === h_1 && prevW === w_1 && newX === x && newY === y) {
+                    return;
+                }
+                props.onFitToContent && props.onFitToContent(i, w_1, h_1, newX, newY, { hasPaddingChanged: hasPaddingChanged });
+            }
+        };
+        // MutationObserver 인스턴스 생성
+        var observer = new MutationObserver(callback);
+        // 관찰할 DOM 변이 설정
+        var config = { characterData: true, attributes: true, subtree: true };
+        // 대상 노드와 설정으로 관찰 시작
+        observer.observe(targetNode, config);
+        // 정리 함수에서 MutationObserver 해제
+        return function () {
+            observer.disconnect();
+        };
+    }, [autoResize, isSelected, isDragging, isResizing, props.w, props.h, x, y]);
+    // const moveDroppingItem = (prevProps: GridItemProps) => {
+    //   const { droppingPosition } = props;
+    //   if (!droppingPosition) return;
+    //   const node = elementRef.current;
+    //   // Can't find DOM node (are we unmounted?)
+    //   if (!node) return;
+    //   const prevDroppingPosition = prevProps.droppingPosition || {
+    //     left: 0,
+    //     top: 0,
+    //   };
+    //   const shouldDrag =
+    //     (dragging && droppingPosition.left !== prevDroppingPosition.left) ||
+    //     droppingPosition.top !== prevDroppingPosition.top;
+    //   if (!dragging) {
+    //     onDragStart(droppingPosition.e, {
+    //       node,
+    //       deltaX: droppingPosition.left,
+    //       deltaY: droppingPosition.top,
+    //     });
+    //   } else if (shouldDrag) {
+    //     const deltaX = droppingPosition.left - dragging.left;
+    //     const deltaY = droppingPosition.top - dragging.top;
+    //     onDrag(droppingPosition.e, {
+    //       node,
+    //       deltaX,
+    //       deltaY,
+    //     });
+    //   }
+    // };
+    var handleDoubleClick = function () {
+        (props === null || props === void 0 ? void 0 : props.onDoubleClick) && props.onDoubleClick(props.i);
+    };
+    var getPositionParams = function (prop) {
+        if (prop === void 0) { prop = props; }
+        return {
+            cols: prop.cols,
+            containerPadding: prop.containerPadding,
+            containerWidth: prop.containerWidth,
+            margin: prop.margin,
+            maxRows: prop.maxRows,
+            rowHeight: prop.rowHeight,
+        };
+    };
+    var colWidth = customColWidth !== null && customColWidth !== void 0 ? customColWidth : calcGridColWidth(getPositionParams());
+    var createStyle = function (pos) {
+        var usePercentages = props.usePercentages, containerWidth = props.containerWidth, useCSSTransforms = props.useCSSTransforms;
+        var style;
+        if (useCSSTransforms) {
+            style = setTransform(pos);
+        }
+        else {
+            style = setTopLeft(pos);
+            if (usePercentages) {
+                if (containerWidth == null) {
+                    throw new Error("Container width is missing!");
+                }
+                style.left = perc(pos.left / containerWidth);
+                style.width = perc(pos.width / containerWidth);
+            }
+        }
+        return style;
+    };
+    /**
+     * Mix a Draggable instance into a child.
+     * @param  {Element} child    Child element.
+     * @return {Element}          Child wrapped in Draggable.
+     */
+    var mixinDraggable = function (child, isDraggable) {
+        return (_jsx(DraggableCore, { onDoubleClick: handleDoubleClick, disabled: !isDraggable, onStart: onDragStart, onDrag: onDrag, onStop: onDragStop, handle: handle, cancel: ".react-resizable-handle" + (cancel ? "," + cancel : ""), scale: transformScale, nodeRef: elementRef, children: child }));
+    };
+    /**
+     * Mix a Resizable instance into a child.
+     * @param  {Element} child    Child element.
+     * @param  {Object} position  Position object (pixel values)
+     * @return {Element}          Child wrapped in Resizable.
+     */
+    var mixinResizable = function (child, position, isResizable) {
+        var positionParams = getPositionParams();
+        // const maxWidth = calcGridItemPosition(
+        //   positionParams,
+        //   x,
+        //   y,
+        //   z,
+        //   cols - x, // TODO - 수정 필요
+        //   h
+        // ).width;
+        var mins = calcGridItemPosition(positionParams, x, y, z, minW, minH);
+        var maxes = calcGridItemPosition(positionParams, x, y, z, maxW, maxH);
+        var minConstraints = [mins.width, mins.height];
+        var maxConstraints = [
+            Math.min(maxes.width, containerWidth),
+            Math.min(maxes.height, Infinity),
+        ];
+        return (_jsx(Resizable, { draggableOpts: {
+                disabled: !isResizable,
+            }, className: "react-resizable-hide", width: position.width, height: position.height, top: position.top, left: position.left, onResizeStop: onResizeStop, onResizeStart: onResizeStart, onResize: onResize, minConstraints: minConstraints, maxConstraints: maxConstraints, transformScale: transformScale, isResizing: isResizing, autoResize: autoResize, colWidth: colWidth, margin: props.margin, children: child }));
+    };
+    /**
+     * onDragStart event handler
+     * @param  {Event}  e             event data
+     * @param  {Object} callbackData  an object with node, delta and position information
+     */
+    var onDragStart = function (e, _a) {
+        var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
+        var newPosition = { top: 0, left: 0 };
+        var offsetParent = node.offsetParent;
+        if (!offsetParent)
+            return;
+        var parentRect = offsetParent.getBoundingClientRect();
+        var clientRect = node.getBoundingClientRect();
+        var cLeft = clientRect.left / transformScale;
+        var pLeft = parentRect.left / transformScale;
+        var cTop = clientRect.top / transformScale;
+        var pTop = parentRect.top / transformScale;
+        newPosition.left = cLeft - pLeft + offsetParent.scrollLeft;
+        newPosition.top = cTop - pTop + offsetParent.scrollTop;
+        setDragging(newPosition);
+        var _b = calcXY(getPositionParams(), newPosition.top, newPosition.left, props.w, props.h), x = _b.x, y = _b.y;
+        setDragStart({ x: x, y: y });
+        props.onDragStart &&
+            props.onDragStart(props.i, x, y, { e: e, node: node, newPosition: newPosition }, true);
+    };
+    /**
+     * onDrag event handler
+     * @param  {Event}  e             event data
+     * @param  {Object} callbackData  an object with node, delta and position information
+     */
+    var onDrag = function (e, _a) {
+        var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
+        if (!dragging) {
+            throw new Error("onDrag called before onDragStart.");
+        }
+        setIsDragging(true);
+        var top = dragging.top + deltaY;
+        var left = dragging.left + deltaX;
+        var isBounded = props.isBounded, i = props.i, w = props.w, h = props.h, containerWidth = props.containerWidth;
+        var positionParams = getPositionParams();
+        if (isBounded) {
+            var offsetParent = node.offsetParent;
+            if (offsetParent) {
+                var margin = props.margin, rowHeight = props.rowHeight;
+                // const colWidth =  calcGridColWidth(positionParams);
+                var rowHeightNumber = resolveRowHeight(rowHeight, colWidth);
+                var bottomBoundary = offsetParent.clientHeight -
+                    calcGridItemWHPx(h, rowHeightNumber, margin[1]);
+                top = clamp(top, 0, bottomBoundary);
+                var rightBoundary = containerWidth - calcGridItemWHPx(w, colWidth, margin[0]);
+                left = clamp(left, 0, rightBoundary);
+            }
+        }
+        var newPosition = { top: top, left: left };
+        setDragging(newPosition);
+        var _b = calcXY(positionParams, top, left, w, h), x = _b.x, y = _b.y;
+        props.onDrag && props.onDrag(i, x, y, { e: e, node: node, newPosition: newPosition }, true);
+    };
+    /**
+     * onDragStop event handler
+     * @param  {Event}  e             event data
+     * @param  {Object} callbackData  an object with node, delta and position information
+     */
+    var onDragStop = function (e, _a) {
+        var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
+        if (!dragging) {
+            throw new Error("onDragEnd called before onDragStart.");
+        }
+        var w = props.w, h = props.h, i = props.i;
+        var left = dragging.left, top = dragging.top;
+        var _b = calcXY(getPositionParams(), top, left, w, h), x = _b.x, y = _b.y;
+        var newPosition = { top: top, left: left };
+        var change = (dragStart === null || dragStart === void 0 ? void 0 : dragStart.x) !== x || (dragStart === null || dragStart === void 0 ? void 0 : dragStart.y) !== y;
+        setDragging(undefined);
+        setDragStart(undefined);
+        setIsDragging(false);
+        props.onDragStop &&
+            props.onDragStop(i, x, y, { e: e, node: node, newPosition: newPosition, change: change });
+    };
+    var getResizableXYPosition = function (handle, width, height, prevW, prevH) {
+        var newX = x;
+        var newY = y;
+        if (handle === "nw") {
+            // NOTE - nw left(X)와 top(Y) 둘다 변경
+            if (width > prevW) {
+                newX = x - (width - prevW);
+            }
+            else {
+                newX = x + (prevW - width);
+            }
+            if (height > prevH) {
+                newY = y - (height - prevH);
+            }
+            else {
+                newY = y + (prevH - height);
+            }
+        }
+        if (handle === "n" || handle === "ne") {
+            // NOTE - n, ne left(X) 고정 & top(Y) 변경
+            if (height > prevH) {
+                newY = y - (height - prevH);
+            }
+            else {
+                newY = y + (prevH - height);
+            }
+        }
+        if (handle === "w" || handle === "sw") {
+            // NOTE - s, sw left(X) 변경 top(Y) 고정
+            if (width > prevW) {
+                newX = x - (width - prevW);
+            }
+            else {
+                newX = x + (prevW - width);
+            }
+        }
+        return { newX: newX, newY: newY };
+    };
+    /**
+     * onResizeStart event handler
+     * @param  {ResizeEventType}  e             event data
+     * @param  {Object} callbackData  an object with node and size information
+     */
+    var onResizeStart = function (e, callbackData) {
+        onResizeHandler(e, callbackData, "onResizeStart");
+    };
+    /**
+     * onResize event handler
+     * @param  {ResizeEventType}  e             event data
+     * @param  {Object} callbackData  an object with node and size information
+     */
+    var onResize = function (e, callbackData) {
+        setIsResizing(true);
+        onResizeHandler(e, callbackData, "onResize");
+    };
+    /**
+     * onResizeStop event handler
+     * @param  {ResizeEventType}  e             event data
+     * @param  {Object} callbackData  an object with node and size information
+     */
+    var onResizeStop = function (e, callbackData) {
+        setIsResizing(false);
+        onResizeHandler(e, callbackData, "onResizeStop");
+    };
+    /**
+     * Wrapper around drag events to provide more useful data.
+     * All drag events call the function with the given handler name,
+     * with the signature (index, x, y).
+     *
+     * @param  {String} handlerName Handler name to wrap.
+     * @return {Function}           Handler function.
+     */
+    var onResizeHandler = function (e, _a, handlerName) {
+        var node = _a.node, size = _a.size, handle = _a.handle, minWidth = _a.minWidth, minHeight = _a.minHeight;
+        var handler = props[handlerName];
+        if (!handler)
+            return;
+        var prevW = props.w, prevH = props.h;
+        // Get new XY
+        var _b = calcWH(getPositionParams(), size, x, y, handle, prevW, prevH, true), w = _b.w, h = _b.h;
+        var tempMinH = minH;
+        if (minWidth) {
+            var _c = calcWH(getPositionParams(), __assign(__assign({}, size), { width: minWidth, height: minHeight !== null && minHeight !== void 0 ? minHeight : 0 }), x, y, handle, prevW, prevH, true), minW_1 = _c.w, newMinH = _c.h;
+            if (minW_1 > w) {
+                w = minW_1;
+            }
+            if (minH > 1) {
+                tempMinH = Math.max(1, newMinH);
+            }
+        }
+        // minW should be at least 1
+        // minW = Math.max(minW, 1);
+        // maxW should be at most (cols - x)
+        // maxW = Math.min(maxW, cols - x);
+        w = clamp(w, minW, maxW);
+        h = clamp(h, tempMinH, maxH);
+        setResizing(handlerName === "onResizeStop" ? undefined : size);
+        var _d = getResizableXYPosition(handle, w, h, prevW, prevH), newX = _d.newX, newY = _d.newY;
+        handler(i, w, h, { e: e, node: node, size: size }, newX, newY);
+    };
+    var pos = calcGridItemPosition(getPositionParams(), x, y, z, w, h, {
+        dragging: dragging,
+        resizing: resizing,
+    }, colWidth);
+    var child = React.Children.only(children);
+    // console.log(child, className)
+    var newChild = React.cloneElement(child, {
+        key: i,
+        ref: elementRef,
+        'data-grid-id': i,
+        className: classNames("react-grid-item", child.props.className, className, {
+            static: props.static,
+            isResizing: Boolean(resizing) && Boolean(isResizing) && Boolean(isHiddenVisibility),
+            resizing: Boolean(resizing),
+            "react-draggable": isDraggable,
+            isDragging: Boolean(isDragging) && Boolean(dragging) && Boolean(isHiddenVisibility),
+            "react-draggable-dragging": Boolean(dragging),
+            // dropping: Boolean(droppingPosition),
+            cssTransforms: useCSSTransforms,
+        }),
+        style: __assign(__assign(__assign({}, props.style), child.props.style), createStyle(pos)),
+    });
+    newChild = mixinResizable(newChild, pos, isResizable);
+    newChild = mixinDraggable(newChild, isDraggable);
+    return newChild;
+};
+export default GroupItem;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+type OutsideClickHandlerProps = {
+    children: React.ReactNode;
+    onOutsideClick: () => void;
+};
+declare const OutsideClickHandler: React.FC<OutsideClickHandlerProps>;
+export default OutsideClickHandler;

package/dist/lib/GridItem/OutsideClickHandler.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+var OutsideClickHandler = function (_a) {
+    var children = _a.children, onOutsideClick = _a.onOutsideClick;
+    var wrapperRef = useRef(null);
+    useEffect(function () {
+        var handleClickOutside = function (e) {
+            var target = e.target;
+            if (target.closest('.editable-grid-item') || target.closest('.group') || target.closest('.placeholder')) {
+                return;
+            }
+            if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+                onOutsideClick(); // div 외부를 클릭했을 때 실행
+            }
+        };
+        document.addEventListener('dblclick', handleClickOutside);
+        return function () {
+            document.removeEventListener('dblclick', handleClickOutside);
+        };
+    }, [onOutsideClick]);
+    return _jsx("div", { ref: wrapperRef, children: children });
+};
+export default OutsideClickHandler;

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

@@ -16,7 +16,7 @@ export type GridDragEvent = {
     node: HTMLElement;
     newPosition: PartialPosition;
 };
-export type GridItemCallback<Data extends GridDragEvent | GridResizeEvent> = (i: string, x: number, y: number, data: Data) => void;
+export type GridItemCallback<Data extends GridDragEvent | GridResizeEvent> = (i: string, x: number, y: number, data: Data, isGroup?: boolean) => void;
 type ResizeGridItemCallback<Data extends GridDragEvent | GridResizeEvent> = (i: string, w: number, h: number, data: Data, x: number, y: number) => void;
 export type GridDragStopEvent = GridDragEvent & {
     change: boolean;
@@ -78,6 +78,7 @@ export type GridItemProps = {
     onFitToContent?: (i: string, w: number, h: number, x: number, y: number, { hasPaddingChanged }: {
         hasPaddingChanged: boolean;
     }) => void;
+    onDoubleClick?: (id: string) => void;
     isHiddenVisibility?: boolean;
     customColWidth?: number;
     autoResize: boolean;

package/dist/lib/GridLayoutEditor/ReactGridLayout.js

@@ -29,14 +29,16 @@ 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 { 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, getLayoutItem, moveElement, noop, synchronizeLayoutWithChildren, withLayoutItem, } from "./utils/renderHelpers";
+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 { findAllChildrenButGroup, findAllChildrenIds, findChildrenIds, findGroupBlocks } from "./group";
+import GroupItem from "../GridItem/GroupItem";
 var layoutClassName = "react-grid-layout";
 var ReactGridLayout = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
@@ -46,17 +48,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;
-    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.selectedGroupBlock, selectedGroupBlock = _0 === void 0 ? '1' : _0, onClickGroup = props.onClickGroup;
+    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];
+    // const [selectedGroup, setSelectedGroup] = useState<string>('1');
+    var editableItems = blockStructure ? findChildrenIds(blockStructure, selectedGroupBlock) : [];
+    var _8 = useState([]), oldGroupChildren = _8[0], setOldGroupChildren = _8[1];
+    var _9 = useState(function () {
         return synchronizeLayoutWithChildren(props.layout || [], children, cols, compactType, allowOverlap);
-    }), layout = _7[0], setLayout = _7[1];
+    }), layout = _9[0], setLayout = _9[1];
     var dragEnterCounter = useRef(0);
     useLayoutEffect(function () {
         setIsMounted(true);
@@ -129,13 +134,25 @@ 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 = findAllChildrenButGroup(blockStructure, i);
+            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 +163,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 = findChildrenIds(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 +197,18 @@ 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;
+        }
+        // console.log(x, y)
+        var xgap = x - oldDragItem.x;
+        var ygap = y - oldDragItem.y;
         var placeholder = {
             w: l.w,
             h: l.h,
@@ -169,7 +219,7 @@ var ReactGridLayout = function (_a) {
             i: i,
         };
         var isUserAction = true;
-        var newLayout = moveElement({
+        var newLayout = isGroup ? layout : moveElement({
             layout: layout,
             l: l,
             x: x,
@@ -180,6 +230,22 @@ var ReactGridLayout = function (_a) {
             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 +267,13 @@ 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 원래대로 복귀
@@ -240,6 +307,7 @@ var ReactGridLayout = function (_a) {
         setLayout(newLayout);
         setOldDragItem(undefined);
         setOldLayout(undefined);
+        setOldGroupChildren([]);
         props.onLayoutChange && props.onLayoutChange(newLayout);
     };
     var onLayoutMaybeChanged = function (newLayout, oldLayout) {
@@ -420,7 +488,9 @@ var ReactGridLayout = function (_a) {
             : !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 = editableItems.includes(l.i);
+        var z = l.z || 0;
+        return (_jsx(GridItem, { className: editable ? 'editable-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 ? 100009 + 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 onDragOverHandler = function (e) {
         var _a;
@@ -488,7 +558,52 @@ 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: {
+    var processGroup = function (block, viewOnly) {
+        if (!blockStructure) {
+            return;
+        }
+        var childrenIds = findAllChildrenIds(blockStructure, block.id);
+        var groupItem = getBoundingArea(layout, childrenIds);
+        // const draggable =
+        //   typeof l.isDraggable === "boolean"
+        //     ? l.isDraggable
+        //     : !l.static && isDraggable;
+        // const resizable =
+        //   typeof l.isResizable === "boolean"
+        //     ? l.isResizable
+        //     : !l.static && isResizable;
+        // const resizeHandlesOptions = l.resizeHandles || resizeHandles;
+        // const bounded = draggable && isBounded && l.isBounded !== false;
+        if (!groupItem) {
+            return _jsx(_Fragment, {});
+        }
+        var isEditingGroup = block.id === selectedGroupBlock;
+        return (
+        // <OutsideClickHandler  onOutsideClick={() => {
+        //   if (isEditingGroup) {
+        //    const parent = findParentGroupByGroupId(blockStructure, block.id)
+        //    parent && setSelectedGroup(parent)
+        //    if (parent === null) {
+        //     setSelectedGroup('1')
+        //    }
+        //   }
+        // }}>
+        _jsx(GroupItem, { className: isEditingGroup ? 'group editing' : 'group', onDoubleClick: onDoubleClickGroup, 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: true, useCSSTransforms: useCSSTransforms && isMounted, usePercentages: !isMounted, transformScale: transformScale, w: groupItem.w, h: groupItem.h, x: groupItem.x, y: groupItem.y, z: (isEditingGroup) ? 100009 : 100009 + groupItem.z, i: block.id.toString(), 
+            // 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, children: _jsx("div", { onClick: function () { onClickGroup && onClickGroup(block.id); } }) }, block.id)
+        // </OutsideClickHandler>
+        );
+    };
+    var currentGroupBlocks = blockStructure ? findGroupBlocks(blockStructure, selectedGroupBlock) : [];
+    // const groupsParentsGroups = findAllParentGroups(blockStructure, selectedGroup);
+    return (_jsxs("div", { ref: innerRef, className: mergedClassName, style: mergedStyle, onDrop: isDroppable ? onDropHandler : noop, onDragLeave: isDroppable ? onDragLeaveHandler : noop, onDragEnter: isDroppable ? onDragEnterHandler : noop, onDragOver: isDroppable ? onDragOverHandler : noop, children: [currentGroupBlocks.map(function (each) { return processGroup(each); }), React.Children.map(children, function (child) { return processGridItem(child); }), placeholder(), activeDrag && _jsx("div", { className: "grid-guide-line-center" }), activeDrag && (_jsx("div", { className: "grid-placeholder", style: {
                     marginTop: margin[1] + "px",
                     marginBottom: margin[1] + "px",
                     marginLeft: margin[0] + "px",

package/dist/lib/GridLayoutEditor/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, restProps = __rest(props, ["breakpoint", "compactType", "breakpoints", "cols", "containerPadding", "layouts", "width", "margin", "onBreakpointChange", "onLayoutChange", "onWidthChange"]);
+    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 })));
+    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,16 @@
+export interface Block {
+    id: string;
+    name: string;
+    children?: Block[];
+}
+export declare const findBlockById: (blocks: Block[], id: 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 findAllChildrenButGroup: (blockStructure: Block[], targetId: string) => string[];
+export declare const findGroupBlocks: (blockStructure: Block[], targetId: string) => Block[];
+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 blockStructure: Block[];

package/dist/lib/GridLayoutEditor/group.js

@@ -0,0 +1,280 @@
+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 __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));
+};
+export var findBlockById = function (blocks, id) {
+    for (var _i = 0, blocks_1 = blocks; _i < blocks_1.length; _i++) {
+        var block = blocks_1[_i];
+        if (block.id === id) {
+            return block;
+        }
+        if (block.children) {
+            var found = findBlockById(block.children, id);
+            if (found) {
+                return found;
+            }
+        }
+    }
+    return null;
+};
+export var findChildrenIds = function (blockStructure, targetId) {
+    var targetBlock = findBlockById(blockStructure, targetId);
+    return targetBlock && targetBlock.children ? targetBlock.children.map(function (child) { return child.id; }) : [];
+};
+export var findAllChildrenIds = function (blockStructure, targetId) {
+    var collectChildrenIds = function (block) {
+        var ids = [];
+        if (block.children) {
+            for (var _i = 0, _a = block.children; _i < _a.length; _i++) {
+                var child = _a[_i];
+                ids.push(child.id);
+                ids = ids.concat(collectChildrenIds(child));
+            }
+        }
+        return ids;
+    };
+    var targetBlock = findBlockById(blockStructure, targetId);
+    return targetBlock ? collectChildrenIds(targetBlock) : [];
+};
+export var findAllParentGroups = function (blockStructure, targetId) {
+    var findParentGroups = function (blocks, id, parents) {
+        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.children) {
+                var result = findParentGroups(block.children, id, __spreadArray(__spreadArray([], parents, true), [block], false));
+                if (result) {
+                    return result;
+                }
+            }
+        }
+        return null;
+    };
+    return findParentGroups(blockStructure, targetId) || [];
+};
+export var findAllChildrenButGroup = function (blockStructure, targetId) {
+    var collectChildrenIds = function (block) {
+        var ids = [];
+        if (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);
+                }
+                ids = ids.concat(collectChildrenIds(child));
+            }
+        }
+        return ids;
+    };
+    var targetBlock = findBlockById(blockStructure, targetId);
+    return targetBlock ? collectChildrenIds(targetBlock) : [];
+};
+export var findGroupBlocks = function (blockStructure, targetId) {
+    var targetBlock = findBlockById(blockStructure, targetId);
+    var groupBlocks = [];
+    if (targetBlock) {
+        if (targetBlock.name === 'GroupBlock') {
+            groupBlocks.push(targetBlock);
+        }
+        if (targetBlock.children) {
+            groupBlocks.push.apply(groupBlocks, targetBlock.children.filter(function (child) { return child.name === 'GroupBlock'; }));
+        }
+    }
+    return groupBlocks;
+};
+export var findAllComponentBlockIds = function (blockStructure) {
+    var collectComponentBlockIds = function (blocks) {
+        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.children) {
+                ids = ids.concat(collectComponentBlockIds(block.children));
+            }
+        }
+        return ids;
+    };
+    return collectComponentBlockIds(blockStructure);
+};
+export var findParentGroupByGroupId = function (blockStructure, targetId) {
+    var findParentGroup = function (blocks, id, parent) {
+        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.children) {
+                var result = findParentGroup(block.children, id, block);
+                if (result) {
+                    return result;
+                }
+            }
+        }
+        return null;
+    };
+    return findParentGroup(blockStructure, targetId);
+};
+export var addBlockToRoot = function (blockStructure, newBlock) {
+    return blockStructure.map(function (block) {
+        if (block.name === 'RootBlock') {
+            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) {
+        throw new Error("Target block with id ".concat(targetId, " not found or has no children."));
+    }
+    var bulkBlocks = targetBlock.children.filter(function (child) { return bulkIds.includes(child.id); });
+    if (bulkBlocks.length !== bulkIds.length) {
+        throw new Error("Some bulkIds do not exist as children of the target block.");
+    }
+    // Remove bulk blocks from target's children
+    targetBlock.children = targetBlock.children.filter(function (child) { return !bulkIds.includes(child.id); });
+    // Create the new bulkBlock
+    var bulkBlock = {
+        id: "bulk",
+        name: 'GroupBlock',
+        children: bulkBlocks,
+    };
+    // Add the bulkBlock to the target's children
+    targetBlock.children.push(bulkBlock);
+    return structure;
+};
+// 사용 예시:
+export var blockStructure = [
+    {
+        id: '1',
+        name: 'RootBlock',
+        children: [
+            {
+                id: '2',
+                name: 'GroupBlock',
+                children: [
+                    {
+                        id: '3',
+                        name: 'GroupBlock',
+                        children: [
+                            {
+                                id: '4',
+                                name: 'ComponentBlock'
+                            },
+                            {
+                                id: '5',
+                                name: 'ComponentBlock'
+                            },
+                            {
+                                id: '6',
+                                name: 'GroupBlock',
+                                children: [
+                                    {
+                                        id: '7',
+                                        name: 'ComponentBlock'
+                                    },
+                                    {
+                                        id: '8',
+                                        name: 'ComponentBlock'
+                                    },
+                                    {
+                                        id: '9',
+                                        name: 'GroupBlock',
+                                        children: [
+                                            {
+                                                id: '10',
+                                                name: 'ComponentBlock'
+                                            },
+                                            {
+                                                id: '11',
+                                                name: 'ComponentBlock'
+                                            }
+                                        ]
+                                    },
+                                ]
+                            },
+                        ]
+                    },
+                    {
+                        id: '12',
+                        name: 'GroupBlock',
+                        children: [
+                            {
+                                id: '13',
+                                name: 'ComponentBlock'
+                            },
+                            {
+                                id: '14',
+                                name: 'ComponentBlock'
+                            }
+                        ]
+                    },
+                    {
+                        id: '15',
+                        name: 'ComponentBlock'
+                    },
+                    {
+                        id: '16',
+                        name: 'ComponentBlock'
+                    }
+                ]
+            },
+            {
+                id: '17',
+                name: 'GroupBlock',
+                children: [
+                    // {
+                    //   id: '6',
+                    //   name: 'GroupBlock',
+                    //   children: [
+                    //     {
+                    //       id: '7',
+                    //       name: 'ComponentBlock'
+                    //     },
+                    //     {
+                    //       id: '8',
+                    //       name: 'ComponentBlock'
+                    //     }
+                    //   ]
+                    // },
+                    {
+                        id: '18',
+                        name: 'ComponentBlock'
+                    }
+                ]
+            },
+            {
+                id: '19',
+                name: 'ComponentBlock'
+            },
+            {
+                id: '20',
+                name: 'ComponentBlock'
+            }
+        ]
+    }
+];

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

@@ -1,6 +1,7 @@
 import { DragEvent, ReactElement, RefObject } from "react";
 import { ResizeHandleAxis, ResizeHandleType } from "../Resizable/types";
 import { ResizeEventType } from "../GridItem/types";
+import { Block } from "./group";
 export type CompactType = "vertical" | "horizontal";
 export type LayoutItem = {
     w: number;
@@ -72,6 +73,10 @@ export type ReactGridLayoutProps = {
     minNbRow?: number;
     customColWidth?: number;
     onFitToContent?: OnFitContentCallBack;
+    blockStructure?: Block[];
+    onDoubleClickGroup?: (id: string) => void;
+    selectedGroupBlock?: string;
+    onClickGroup?: (id: string) => void;
 };
 export type DragOverEvent = MouseEvent & {
     nativeEvent: {
@@ -129,6 +134,7 @@ export type ResponsiveGridLayoutProps = {
     onBreakpointChange?: OnBreakpointChangeCallback;
     onLayoutChange?: OnLayoutChangeCallback;
     onWidthChange?: OnWidthChangeCallback;
+    zoom?: number;
 } & CoreType;
 export type Breakpoint = string;
 export type DefaultBreakpoints = "lg" | "md" | "sm" | "xs" | "xxs";

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

@@ -163,3 +163,10 @@ export declare function synchronizeLayoutWithChildren(initialLayout: Layout, chi
  */
 export declare function validateLayout(layout: Layout, contextName?: string): void;
 export declare const noop: (args: any) => any;
+export declare function getBoundingArea(layout: Layout, ids: string[]): {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    z: number;
+} | null;

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

@@ -564,3 +564,41 @@ function log() {
     console.log.apply(console, args);
 }
 export var noop = function (_args) { return undefined; };
+export function getBoundingArea(layout, ids) {
+    var layoutItems = ids.map(function (id) { return getLayoutItem(layout, id); }).filter(function (item) { return item !== undefined; });
+    if (layoutItems.length === 0) {
+        return null;
+    }
+    if (layoutItems.length === 1) {
+        return {
+            x: layoutItems[0].x,
+            y: layoutItems[0].y,
+            w: layoutItems[0].w,
+            h: layoutItems[0].h,
+            z: layoutItems[0].z,
+        };
+    }
+    var _a = layoutItems.reduce(function (acc, elem, idx, arr) {
+        var _a, _b;
+        if (idx === arr.length - 1) {
+            return acc;
+        }
+        var elem1 = idx === 0 ? elem : acc;
+        var elem2 = arr[idx + 1];
+        var minX = Math.min(elem1.x, elem2.x);
+        var minY = Math.min(elem1.y, elem2.y);
+        var elem1W = elem1.x - minX + elem1.w;
+        var elem2W = elem2.x - minX + elem2.w;
+        var elem1H = elem1.y - minY + elem1.h;
+        var elem2H = elem2.y - minY + elem2.h;
+        var maxZ = Math.max((_a = elem1 === null || elem1 === void 0 ? void 0 : elem1.z) !== null && _a !== void 0 ? _a : 0, (_b = elem2 === null || elem2 === void 0 ? void 0 : elem2.z) !== null && _b !== void 0 ? _b : 0);
+        return {
+            x: Math.min(elem1.x, elem2.x),
+            y: Math.min(elem1.y, elem2.y),
+            w: Math.max(elem1W, elem2W),
+            h: Math.max(elem1H, elem2H),
+            z: maxZ
+        };
+    }, { x: 0, y: 0, w: 0, h: 0, z: 0 }), minX = _a.x, minY = _a.y, maxW = _a.w, maxH = _a.h, maxZ = _a.z;
+    return { x: minX, y: minY, w: maxW, h: maxH, z: maxZ };
+}

package/package.json

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