publ-echo-test 0.0.331 → 0.0.333

package/css/gle-styles.css

@@ -13,7 +13,6 @@
   top: 0;
   left: 0;
   z-index: 1;
-  margin: 10px;
 }
 
 .react-grid-item.react-draggable.react-resizable {

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

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

package/dist/lib/GridItem/GridItem.js

@@ -21,23 +21,23 @@ var __rest = (this && this.__rest) || function (s, e) {
     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";
+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 GridItem = function (_a) {
     var _b;
     var children = _a.children, props = __rest(_a, ["children"]);
-    var resizeHandle = props.resizeHandle, cols = props.cols, zOrder = props.zOrder, zOrderInternal = props.zOrderInternal, 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;
+    var resizeHandle = props.resizeHandle, cols = props.cols, zOrder = props.zOrder, zOrderInternal = props.zOrderInternal, 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;
     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");
+    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) {
@@ -47,10 +47,6 @@ var GridItem = function (_a) {
         if (!targetNode || isDragging || isResizing) {
             return;
         }
-        console.log("contains?:", targetNode.classList.contains("ccb-layout-box"));
-        if (targetNode.classList.contains("ccb-layout-box")) {
-            return;
-        }
         var prevPaddingL = parseFloat(getComputedStyle(targetNode).paddingLeft);
         var prevPaddingR = parseFloat(getComputedStyle(targetNode).paddingRight);
         var prevPaddingT = parseFloat(getComputedStyle(targetNode).paddingTop);
@@ -59,7 +55,7 @@ var GridItem = function (_a) {
         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 isCharacterChanged = mutation.type === 'characterData';
                 var keepWidth = true;
                 var hasPaddingChanged = false;
                 var height = isCharacterChanged
@@ -90,14 +86,14 @@ var GridItem = function (_a) {
                 var _a = calcWH(getPositionParams(), {
                     width: width,
                     height: height,
-                }, x, y, "e", props.w, props.h, false), w_1 = _a.w, h_1 = _a.h;
+                }, 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;
+                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;
                 }
@@ -113,221 +109,9 @@ var GridItem = function (_a) {
         observer.observe(targetNode, config);
         // 정리 함수에서 MutationObserver 해제
         return function () {
-            if (targetNode.classList.contains("ccb-layout-box")) {
-                return;
-            }
             observer.disconnect();
         };
     }, [autoResize, isSelected, isDragging, isResizing, props.w, props.h, x, y]);
-    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;
-        }
-        console.log("targetNode", targetNode);
-        if (!targetNode.classList.contains("ccb-layout-box")) {
-            return;
-        }
-        console.log("contains?:", targetNode.classList.contains("ccb-layout-box"));
-        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_2 = mutationsList; _i < mutationsList_2.length; _i++) {
-                var mutation = mutationsList_2[_i];
-                console.log("mutation", mutation);
-                // const isInitial = mutation.attributeName === "data-is-initialized";
-                var isSizeChanged = mutation.attributeName === "data-min-width" ||
-                    mutation.attributeName === "data-min-height";
-                var keepWidth = true;
-                var hasPaddingChanged = true;
-                var layoutBox = targetNode.children[0];
-                var contentsWrapper = layoutBox.children[0];
-                var oneComposition = contentsWrapper.querySelector(".composition-container");
-                console.log("layoutbox", layoutBox);
-                console.log("contentsWrapper", contentsWrapper);
-                console.log("oneComposition", oneComposition);
-                // const insetTop = Number(mutation.target.dataset.insetTop!);
-                // const insetBottom = Number(mutation.target.dataset.insetBottom!);
-                var minWidth = 0;
-                // const minHeight =
-                //   Number(mutation.target.dataset.minHeight) + insetTop + insetBottom;
-                // const contentsWrapper = mutation.target.querySelector(
-                //   ".cb-contentslist-wrapper"
-                // );
-                // const oneComposition = mutation.target.querySelector(
-                //   ".composition-container"
-                // );
-                var minHeight = 0;
-                if (contentsWrapper && oneComposition) {
-                    var minCellWidth = 10;
-                    var numberOfItems = Number(mutation.target.getAttribute("data-number-of-items"));
-                    var numberOfColumns = Number(mutation.target.getAttribute("data-number-of-columns"));
-                    var rowGap = Number(mutation.target.getAttribute("data-row-gap"));
-                    var columnGap = Number(mutation.target.getAttribute("data-column-gap"));
-                    var insetTop = Number(mutation.target.getAttribute("data-inset-top"));
-                    var insetBottom = Number(mutation.target.getAttribute("data-inset-bottom"));
-                    var compositionCols = Number(oneComposition.getAttribute("data-cols"));
-                    // const compositionRows = Number(
-                    //   oneComposition.getAttribute("data-rows")!
-                    // );
-                    var oneCompositionMinWidth = minCellWidth * compositionCols + 20; /* 20px padding */
-                    console.log("compositionCols", compositionCols);
-                    // let oneCompositionMinHeight =
-                    //   minColHeight * compositionRows + 20; /* 20px padding */
-                    if (contentsWrapper) {
-                        var gridWrapperInnerH = contentsWrapper.clientHeight;
-                        var oneCompositionH = oneComposition.clientHeight;
-                        var compositionBGwrapperPaddingT = Number(oneComposition.getAttribute("data-wrapper-paddingt"));
-                        var compositionBGwrapperPaddingB = Number(oneComposition.getAttribute("data-wrapper-paddingb"));
-                        var compositionBGwrapperPaddingL = Number(oneComposition.getAttribute("data-wrapper-paddingl"));
-                        var compositionBGwrapperPaddingR = Number(oneComposition.getAttribute("data-wrapper-paddingr"));
-                        var oneCompositionMinHeight = oneCompositionH +
-                            compositionBGwrapperPaddingT +
-                            compositionBGwrapperPaddingB;
-                        var styles = getComputedStyle(mutation.target);
-                        var paddingL = parseFloat(styles.paddingLeft);
-                        var paddingR = parseFloat(styles.paddingRight);
-                        var paddingT = parseFloat(styles.paddingTop);
-                        var paddingB = parseFloat(styles.paddingBottom);
-                        var paddingLR = paddingL + paddingR;
-                        var paddingTB = paddingT + paddingB;
-                        var compositionWrapperPaddingLR = (compositionBGwrapperPaddingL + compositionBGwrapperPaddingR) *
-                            numberOfColumns;
-                        var numberOfRows = Math.ceil(numberOfItems / numberOfColumns);
-                        var listMinWidth = oneCompositionMinWidth * numberOfColumns +
-                            (numberOfColumns - 1) * columnGap +
-                            paddingLR +
-                            compositionWrapperPaddingLR;
-                        console.log("oneCompositionMinWidth", oneCompositionMinWidth);
-                        console.log("cols", numberOfColumns);
-                        var gridWrapperTotalH = gridWrapperInnerH + insetTop + insetBottom;
-                        var listMinHeight = oneCompositionMinHeight * numberOfRows +
-                            (numberOfRows - 1) * rowGap +
-                            paddingTB +
-                            insetTop +
-                            insetBottom;
-                        if (listMinHeight > gridWrapperTotalH) {
-                            minHeight = listMinHeight;
-                        }
-                        minWidth = listMinWidth;
-                    }
-                }
-                // 필요가 없을 수도.
-                if (isNaN(minWidth) || isNaN(minHeight)) {
-                    return;
-                }
-                var width = targetNode.clientWidth;
-                if (!isSizeChanged && mutation.target instanceof Element) {
-                    var styles = getComputedStyle(mutation.target);
-                    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: minWidth,
-                    height: minHeight,
-                }, x, y, "e", props.w, props.h, true), w_2 = _a.w, h_2 = _a.h;
-                if (keepWidth) {
-                    w_2 = prevW;
-                }
-                if (prevH > h_2) {
-                    h_2 = prevH;
-                }
-                var _b = getResizableXYPosition("e", w_2, h_2, prevW, prevH), newX = _b.newX, newY = _b.newY;
-                if (prevH === h_2 && prevW === w_2 && newX === x && newY === y) {
-                    return;
-                }
-                props.onFitToContent &&
-                    props.onFitToContent(i, w_2, h_2, newX, newY, { hasPaddingChanged: hasPaddingChanged });
-            }
-        };
-        var callbackLater = function (mutationsList) {
-            setTimeout(function () {
-                callback(mutationsList);
-            }, 200);
-        };
-        // MutationObserver 인스턴스 생성
-        var observer = new MutationObserver(callbackLater);
-        // 관찰할 DOM 변이 설정
-        var config = { attributes: true, characterData: true };
-        // 대상 노드와 설정으로 관찰 시작
-        observer.observe(targetNode, config);
-        // 정리 함수에서 MutationObserver 해제
-        return function () {
-            if (!targetNode.classList.contains("ccb-layout-box")) {
-                return;
-            }
-            observer.disconnect();
-        };
-    }, [autoResize, isSelected, isDragging, isResizing, props.w, props.h, x, y]);
-    // useEffect(() => {
-    //   if (!isSelected || !autoResize) {
-    //     return;
-    //   }
-    //   const targetNode = elementRef.current?.children[0].children[0].children[0];
-    //   if (!targetNode || isDragging || isResizing) {
-    //     return;
-    //   }
-    //   if (targetNode.id !== "contentslist-box") {
-    //     return;
-    //   }
-    //   const minWidth = Number((targetNode as HTMLElement).dataset?.minWidth ?? 0);
-    //   const minHeight = Number(
-    //     (targetNode as HTMLElement).dataset?.minHeight ?? 0
-    //   );
-    //   const insetTop = Number((targetNode as HTMLElement).dataset.insetTop!);
-    //   const insetBottom = Number(
-    //     (targetNode as HTMLElement).dataset.insetBottom!
-    //   );
-    //   let { w, h } = calcWH(
-    //     getPositionParams(),
-    //     {
-    //       width: minWidth,
-    //       height: minHeight + insetTop + insetBottom,
-    //     },
-    //     x,
-    //     y,
-    //     "e",
-    //     props.w,
-    //     props.h,
-    //     true
-    //   );
-    //   const prevW = props.w;
-    //   const prevH = props.h;
-    //   if (prevW > w) {
-    //     w = prevW;
-    //   }
-    //   if (prevH > h) {
-    //     h = prevH;
-    //   }
-    //   if (prevH === h && prevW === w) {
-    //     console.log("cancelled 3");
-    //     return;
-    //   }
-    //   props.onFitToContent &&
-    //     props.onFitToContent(i, w, h, x, y, { hasPaddingChanged: true });
-    // }, [isSelected, isResizing]);
     // const moveDroppingItem = (prevProps: GridItemProps) => {
     //   const { droppingPosition } = props;
     //   if (!droppingPosition) return;
@@ -379,7 +163,7 @@ var GridItem = function (_a) {
             style = setTopLeft(pos);
             if (usePercentages) {
                 if (containerWidth == null) {
-                    throw new Error("Container width is missing!");
+                    throw new Error('Container width is missing!');
                 }
                 style.left = perc(pos.left / containerWidth);
                 style.width = perc(pos.width / containerWidth);
@@ -393,7 +177,7 @@ var GridItem = function (_a) {
      * @return {Element}          Child wrapped in Draggable.
      */
     var mixinDraggable = function (child, isDraggable) {
-        return (_jsx(DraggableCore, { disabled: !isDraggable, onStart: onDragStart, onDrag: onDrag, onStop: onDragStop, handle: handle, cancel: ".react-resizable-handle" + (cancel ? "," + cancel : ""), scale: transformScale, nodeRef: elementRef, children: child }));
+        return (_jsx(DraggableCore, { 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.
@@ -420,7 +204,7 @@ var GridItem = function (_a) {
         ];
         return (_jsx(Resizable, { draggableOpts: {
                 disabled: !isResizable,
-            }, className: isResizable ? undefined : "react-resizable-hide", width: position.width, height: position.height, top: position.top, left: position.left, resizeHandles: props.resizeHandles, onResizeStop: onResizeStop, onResizeStart: onResizeStart, onResize: onResize, minConstraints: minConstraints, maxConstraints: maxConstraints, transformScale: transformScale, handle: resizeHandle, isResizing: isResizing, autoResize: autoResize, colWidth: colWidth, margin: props.margin, children: child }));
+            }, className: isResizable ? undefined : 'react-resizable-hide', width: position.width, height: position.height, top: position.top, left: position.left, resizeHandles: props.resizeHandles, onResizeStop: onResizeStop, onResizeStart: onResizeStart, onResize: onResize, minConstraints: minConstraints, maxConstraints: maxConstraints, transformScale: transformScale, handle: resizeHandle, isResizing: isResizing, autoResize: autoResize, colWidth: colWidth, margin: props.margin, children: child }));
     };
     /**
      * onDragStart event handler
@@ -455,7 +239,7 @@ var GridItem = function (_a) {
     var onDrag = function (e, _a) {
         var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
         if (!dragging) {
-            throw new Error("onDrag called before onDragStart.");
+            throw new Error('onDrag called before onDragStart.');
         }
         setIsDragging(true);
         var top = dragging.top + deltaY;
@@ -488,7 +272,7 @@ var GridItem = function (_a) {
     var onDragStop = function (e, _a) {
         var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
         if (!dragging) {
-            throw new Error("onDragEnd called before onDragStart.");
+            throw new Error('onDragEnd called before onDragStart.');
         }
         var w = props.w, h = props.h, i = props.i;
         var left = dragging.left, top = dragging.top;
@@ -504,7 +288,7 @@ var GridItem = function (_a) {
     var getResizableXYPosition = function (handle, width, height, prevW, prevH) {
         var newX = x;
         var newY = y;
-        if (handle === "nw") {
+        if (handle === 'nw') {
             // NOTE - nw left(X)와 top(Y) 둘다 변경
             if (width > prevW) {
                 newX = x - (width - prevW);
@@ -519,7 +303,7 @@ var GridItem = function (_a) {
                 newY = y + (prevH - height);
             }
         }
-        if (handle === "n" || handle === "ne") {
+        if (handle === 'n' || handle === 'ne') {
             // NOTE - n, ne left(X) 고정 & top(Y) 변경
             if (height > prevH) {
                 newY = y - (height - prevH);
@@ -528,7 +312,7 @@ var GridItem = function (_a) {
                 newY = y + (prevH - height);
             }
         }
-        if (handle === "w" || handle === "sw") {
+        if (handle === 'w' || handle === 'sw') {
             // NOTE - s, sw left(X) 변경 top(Y) 고정
             if (width > prevW) {
                 newX = x - (width - prevW);
@@ -545,7 +329,7 @@ var GridItem = function (_a) {
      * @param  {Object} callbackData  an object with node and size information
      */
     var onResizeStart = function (e, callbackData) {
-        onResizeHandler(e, callbackData, "onResizeStart");
+        onResizeHandler(e, callbackData, 'onResizeStart');
     };
     /**
      * onResize event handler
@@ -554,7 +338,7 @@ var GridItem = function (_a) {
      */
     var onResize = function (e, callbackData) {
         setIsResizing(true);
-        onResizeHandler(e, callbackData, "onResize");
+        onResizeHandler(e, callbackData, 'onResize');
     };
     /**
      * onResizeStop event handler
@@ -563,7 +347,7 @@ var GridItem = function (_a) {
      */
     var onResizeStop = function (e, callbackData) {
         setIsResizing(false);
-        onResizeHandler(e, callbackData, "onResizeStop");
+        onResizeHandler(e, callbackData, 'onResizeStop');
     };
     /**
      * Wrapper around drag events to provide more useful data.
@@ -597,7 +381,7 @@ var GridItem = function (_a) {
         // maxW = Math.min(maxW, cols - x);
         w = clamp(w, minW, maxW);
         h = clamp(h, tempMinH, maxH);
-        setResizing(handlerName === "onResizeStop" ? undefined : size);
+        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);
     };
@@ -609,18 +393,18 @@ var GridItem = function (_a) {
     var newChild = React.cloneElement(child, {
         key: i,
         ref: elementRef,
-        "data-grid-id": i,
-        "data-z-index": z,
-        "data-z-order": zOrder,
-        "data-z-order-internal": zOrderInternal,
-        className: classNames("react-grid-item", child.props.className, className, {
+        'data-grid-id': i,
+        'data-z-index': z,
+        'data-z-order': zOrder,
+        'data-z-order-internal': zOrderInternal,
+        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,
-            "editable-grid-item": isResizable && isDraggable,
+            'react-draggable': isDraggable,
+            'editable-grid-item': isResizable && isDraggable,
             isDragging: Boolean(isDragging) && Boolean(dragging) && Boolean(isHiddenVisibility),
-            "react-draggable-dragging": Boolean(dragging),
+            'react-draggable-dragging': Boolean(dragging),
             // dropping: Boolean(droppingPosition),
             cssTransforms: useCSSTransforms,
         }),

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

@@ -1,6 +1,6 @@
-import React from "react";
-import { GridItemProps } from "./types";
-import { PropsWithChildren } from "../types";
+import React from 'react';
+import { GridItemProps } from './types';
+import { PropsWithChildren } from '../types';
 declare const GroupItem: ({ children, ...props }: PropsWithChildren<GridItemProps & {
     onContextGroup: (e: React.MouseEvent) => void;
     zOrder: number;