publ-echo-test 0.0.210 → 0.0.211

package/dist/lib/GridItem/GridItem.js

@@ -36,7 +36,6 @@ var GridItem = function (_a) {
     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 _r = useState(false), pointerEventsNone = _r[0], setPointerEventsNone = _r[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 () {

package/dist/lib/GridLayoutEditor/ReactGridLayout.js

@@ -565,12 +565,13 @@ var ReactGridLayout = function (_a) {
             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 (isInBulk) {
-                return zIndexMap.EDITING_GROUP_CHILD + z;
+            if (isRoot && isInBulk) {
+                return z;
             }
-            if (!isRoot && editable) {
-                return zIndexMap.EDITING_GROUP_CHILD + z;
+            if (!isRoot && isInsideOfEditingGroup) {
+                return zIndexMap.CB_IN_EDITING_GROUP + z;
             }
             if (isRoot && editable) {
                 return zIndexMap.ROOT + z;
@@ -583,13 +584,12 @@ var ReactGridLayout = function (_a) {
             }
             return z;
         })();
-        var outsideOfEditingGroup = !editingGroupAllChildren.includes(l.i);
         var zIndex = editorMode === 'EDIT' ? editorZIndex : z;
         return (_jsx(GridItem, { className: classNames({
                 'editable-grid-item': !isRoot && editable,
                 'not-editable-grid-item': !isRoot && !editable,
                 'bulk-child-item': isInBulk,
-                'outside-of-editing-group': outsideOfEditingGroup,
+                'outside-of-editing-group': !isInsideOfEditingGroup,
             }), z: zIndex, zOrder: l.z, zOrderInternal: parent
                 ? "".concat(parent[device === 'DESKTOP'
                     ? 'zOrderDesktopInternal'
@@ -672,37 +672,35 @@ var ReactGridLayout = function (_a) {
         if (!groupItem) {
             return _jsx(_Fragment, {});
         }
-        var zOrder = (_a = block[device === 'DESKTOP' ? 'zOrderDesktopInternal' : 'zOrderMobileInternal']) !== null && _a !== void 0 ? _a : 0;
+        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 (isEditingGroup) {
-                return zIndexMap.EDITING_GROUP;
-            }
             if (isBulk) {
-                return zIndexMap.EDITING_GROUP_CHILD + groupItem.z;
+                // groupItem.z : 그룹 내 CB중 가장 큰 zorder
+                return zIndexMap.BULK + groupItem.z;
             }
             if (isInBulk) {
-                // 위와 같지만 이것은 not-editable이긴 함.
-                // const bulkBlock = findBlockByBlockId(blockStructure, 'BULK');
-                // const bulkZOrder = bulkBlock?.[device === 'DESKTOP' ? 'zOrderDesktopInternal' : 'zOrderMobileInternal'] ?? 0;
-                return zIndexMap.EDITING_GROUP_CHILD + zOrder;
+                if (!isRoot) {
+                    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.EDITING_GROUP_CHILD + zOrder;
+                return zIndexMap.EDITABLE_GROUP + internalZOrder;
             }
             if (type === 'GROUP_BLOCK') {
                 return zIndexMap.GROUP;
             }
-            if (type === 'BULK') {
-                return zIndexMap.BULK;
-            }
-            return zIndexMap.CB;
+            return -1; // NOTE: ERROR
         })();
-        var zIndex = editorMode === 'EDIT' ? baseZ : zOrder;
+        var zIndex = editorMode === 'EDIT' ? baseZ : internalZOrder;
         var handleClick = function (e) {
             onClickGroup && onClickGroup(e, block.blockId, type);
         };
@@ -721,11 +719,11 @@ var ReactGridLayout = function (_a) {
                     'grid-bulk-block': block.blockId === 'BULK',
                     editing: editingGroupBlock === block.blockId,
                     selected: selectedGroupBlock === block.blockId,
-                }), z: zIndex, minZ: groupItem.minZ, zOrder: zOrder, zOrderInternal: parent
+                }), z: zIndex, minZ: groupItem.minZ, zOrder: internalZOrder, zOrderInternal: parent
                     ? "".concat(parent[device === 'DESKTOP'
                         ? 'zOrderDesktopInternal'
-                        : 'zOrderMobileInternal'], " > ").concat(zOrder)
-                    : zOrder.toString(), containerWidth: width, cols: cols, margin: margin, containerPadding: containerPadding || margin, maxRows: maxRows, rowHeight: rowHeight, cancel: draggableCancel, handle: draggableHandle, onDragStop: onDragStopGroupHandler, onDragStart: onDragStartHandler, onDrag: onDragHandler, onResizeStart: onResizeStartHandler, onResize: onResizeHandler, onResizeStop: onResizeStopHandler, onFitToContent: onFitToContentHandler, isDraggable: !viewOnly && !isEditingGroup && !isInBulk, isResizable: !viewOnly && !isEditingGroup && !isInBulk, isBounded: false, useCSSTransforms: useCSSTransforms && isMounted, usePercentages: !isMounted, transformScale: transformScale, w: groupItem.w, h: groupItem.h, x: groupItem.x, y: groupItem.y, i: block.blockId, 
+                        : '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}

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

@@ -1,4 +1,4 @@
-import { ResponsiveGridLayoutProps } from "./types";
-import { PropsWithChildren } from "../types";
+import { ResponsiveGridLayoutProps } from './types';
+import { PropsWithChildren } from '../types';
 export declare const ResponsiveGridLayout: ({ children, ...props }: PropsWithChildren<ResponsiveGridLayoutProps>) => React.ReactElement;
 export default ResponsiveGridLayout;

package/dist/lib/GridLayoutEditor/ResponsiveGridLayout.js

@@ -21,11 +21,11 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useLayoutEffect, useRef, useState } from "react";
-import { cloneLayout, noop, synchronizeLayoutWithChildren, } from "./utils/renderHelpers";
-import { findOrGenerateResponsiveLayout, getBreakpointFromWidth, getColsFromBreakpoint, } from "./utils/responsiveUtils";
-import isEqual from "../../external-lib/lodash.isEqual";
-import ReactGridLayout from "./ReactGridLayout";
+import { useLayoutEffect, useRef, useState } from 'react';
+import { cloneLayout, noop, synchronizeLayoutWithChildren, } from './utils/renderHelpers';
+import { findOrGenerateResponsiveLayout, getBreakpointFromWidth, getColsFromBreakpoint, } from './utils/responsiveUtils';
+import isEqual from '../../external-lib/lodash.isEqual';
+import ReactGridLayout from './ReactGridLayout';
 /**
  * Get a value of margin or containerPadding.
  *
@@ -44,7 +44,7 @@ export var ResponsiveGridLayout = function (_a) {
         var breakpoint = getBreakpointFromWidth(breakpoints, width);
         var colNo = getColsFromBreakpoint(breakpoint, cols);
         var compactType = props.compactType;
-        var initialLayout = findOrGenerateResponsiveLayout(layouts, breakpoints, breakpoint, breakpoint, colNo, compactType || "vertical", false);
+        var initialLayout = findOrGenerateResponsiveLayout(layouts, breakpoints, breakpoint, breakpoint, colNo, compactType || 'vertical', false);
         return {
             layout: initialLayout,
             layouts: layouts,
@@ -95,8 +95,8 @@ export var ResponsiveGridLayout = function (_a) {
                 breakpoints[newBreakpoint] > breakpoints[lastBreakpoint];
             var isNewLayout = layouts[newBreakpoint] == null;
             var overlap = !!props.allowOverlap && (!isNewLayout || newBreakpointIsBiggerOrEqual); //  allow resize overlap only if we are going into a larger screen
-            var layout = findOrGenerateResponsiveLayout(newLayouts, breakpoints, newBreakpoint, lastBreakpoint, newCols, compactType || "vertical", overlap);
-            layout = synchronizeLayoutWithChildren(layout, children, newCols, compactType || "vertical", overlap);
+            var layout = findOrGenerateResponsiveLayout(newLayouts, breakpoints, newBreakpoint, lastBreakpoint, newCols, compactType || 'vertical', overlap);
+            layout = synchronizeLayoutWithChildren(layout, children, newCols, compactType || 'vertical', overlap);
             newLayouts[newBreakpoint] = layout;
             setState({
                 breakpoint: newBreakpoint,

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

@@ -1,7 +1,8 @@
 export declare const zIndexMap: {
     ISDRAGGING: number;
     BULK: number;
-    EDITING_GROUP_CHILD: number;
+    EDITABLE_GROUP: number;
+    CB_IN_EDITING_GROUP: number;
     EDITING_GROUP: number;
     GROUP: number;
     CB: number;

package/dist/lib/GridLayoutEditor/group.js

@@ -9,8 +9,9 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 export var zIndexMap = {
     ISDRAGGING: 999999,
-    BULK: 20000,
-    EDITING_GROUP_CHILD: 10000,
+    BULK: 30000,
+    EDITABLE_GROUP: 20000,
+    CB_IN_EDITING_GROUP: 10000,
     EDITING_GROUP: 9000,
     GROUP: 5000,
     CB: 0,

package/dist/lib/Resizable/Resizable.d.ts

@@ -1,6 +1,6 @@
-import React from "react";
-import { PropsWithChildren } from "../Draggable/types";
-import { ResizableProps } from "./types";
+import React from 'react';
+import { PropsWithChildren } from '../Draggable/types';
+import { ResizableProps } from './types';
 type Props = ResizableProps;
 declare const Resizable: ({ children, axis, handleSize, lockAspectRatio, minConstraints, maxConstraints, resizeHandles, transformScale, isResizing, autoResize, colWidth, margin, ...props }: PropsWithChildren<Props>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export default Resizable;

package/dist/lib/Resizable/Resizable.js

@@ -31,12 +31,12 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import { createElement as _createElement } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useEffect, useRef } from "react";
-import { cloneElement } from "./utils/cloneElement";
-import { DraggableCore } from "../Draggable";
-import classNames from "../../external-lib/classnames";
+import React, { useEffect, useRef, } from 'react';
+import { cloneElement } from './utils/cloneElement';
+import { DraggableCore } from '../Draggable';
+import classNames from '../../external-lib/classnames';
 var Resizable = function (_a) {
-    var children = _a.children, _b = _a.axis, axis = _b === void 0 ? "both" : _b, _c = _a.handleSize, handleSize = _c === void 0 ? [20, 20] : _c, _d = _a.lockAspectRatio, lockAspectRatio = _d === void 0 ? false : _d, _e = _a.minConstraints, minConstraints = _e === void 0 ? [20, 20] : _e, _f = _a.maxConstraints, maxConstraints = _f === void 0 ? [Infinity, Infinity] : _f, _g = _a.resizeHandles, resizeHandles = _g === void 0 ? ["se"] : _g, _h = _a.transformScale, transformScale = _h === void 0 ? 1 : _h, isResizing = _a.isResizing, autoResize = _a.autoResize, colWidth = _a.colWidth, margin = _a.margin, props = __rest(_a, ["children", "axis", "handleSize", "lockAspectRatio", "minConstraints", "maxConstraints", "resizeHandles", "transformScale", "isResizing", "autoResize", "colWidth", "margin"]);
+    var children = _a.children, _b = _a.axis, axis = _b === void 0 ? 'both' : _b, _c = _a.handleSize, handleSize = _c === void 0 ? [20, 20] : _c, _d = _a.lockAspectRatio, lockAspectRatio = _d === void 0 ? false : _d, _e = _a.minConstraints, minConstraints = _e === void 0 ? [20, 20] : _e, _f = _a.maxConstraints, maxConstraints = _f === void 0 ? [Infinity, Infinity] : _f, _g = _a.resizeHandles, resizeHandles = _g === void 0 ? ['se'] : _g, _h = _a.transformScale, transformScale = _h === void 0 ? 1 : _h, isResizing = _a.isResizing, autoResize = _a.autoResize, colWidth = _a.colWidth, margin = _a.margin, props = __rest(_a, ["children", "axis", "handleSize", "lockAspectRatio", "minConstraints", "maxConstraints", "resizeHandles", "transformScale", "isResizing", "autoResize", "colWidth", "margin"]);
     var handleRefs = useRef({
         s: useRef(null),
         n: useRef(null),
@@ -79,6 +79,20 @@ var Resizable = function (_a) {
         if (target.clientHeight) {
             minHeight.current = target.clientHeight;
         }
+        // NOTE: composition을 위한 작업중..
+        console.log('target', target);
+        var oneComposition = target.querySelector('.composition-container');
+        console.log('oneComposition', oneComposition);
+        if (oneComposition) {
+            var compositionCols = oneComposition.getAttribute('data-cols');
+            var compositionRows = oneComposition.getAttribute('data-rows');
+            var compositionRowHeight = oneComposition.getAttribute('data-row-height');
+            var compositionColWidth = oneComposition.getAttribute('data-col-width');
+            console.log('compositionCols', compositionCols);
+            console.log('compositionRows', compositionRows);
+            console.log('compositionRowHeight', compositionRowHeight);
+            console.log('compositionColWidth', compositionColWidth);
+        }
         // target.clientHeight -> 실제 "노드"의 height. (gridItem아닌)
         if (target.clientHeight > elementRef.current.clientHeight) {
             extendedHeightRef.current = target.clientHeight;
@@ -87,7 +101,8 @@ var Resizable = function (_a) {
         else {
             extendedHeightRef.current = null;
         }
-        if (shouldShrinkRef.current && (target.clientHeight < elementRef.current.clientHeight)) {
+        if (shouldShrinkRef.current &&
+            target.clientHeight < elementRef.current.clientHeight) {
             minHeight.current = target.clientHeight;
         }
         var minWidthStyle = target.computedStyleMap().get('min-width');
@@ -95,7 +110,7 @@ var Resizable = function (_a) {
             var minWidthBase = minWidthStyle.value;
             var minColWidth = (minWidthBase + margin[0]) / (colWidth + margin[0]);
             var minW = Math.ceil(minColWidth);
-            var minWidthPx = (minW * colWidth) + ((minW - 1) * margin[0]);
+            var minWidthPx = minW * colWidth + (minW - 1) * margin[0];
             minWidth.current = Math.round(minWidthPx);
         }
     }, [isResizing, autoResize, children, elementRef]);
@@ -156,28 +171,28 @@ var Resizable = function (_a) {
         var resizableLeft = startPosition.current.left + (startSize.current.width - width);
         var resizableTop = startPosition.current.top + (startSize.current.height - height);
         if (deltaX < 0) {
-            if (handleAxis === "nw" || handleAxis === "w" || handleAxis === "sw") {
+            if (handleAxis === 'nw' || handleAxis === 'w' || handleAxis === 'sw') {
                 if (currentSumOfLeftAndWidth > startSumOfLeftAndWidth) {
                     newLeft = Math.min(left, resizableLeft);
                 }
             }
         }
         if (deltaY < 0) {
-            if (handleAxis === "nw" || handleAxis === "n" || handleAxis === "ne") {
+            if (handleAxis === 'nw' || handleAxis === 'n' || handleAxis === 'ne') {
                 if (currentSumOfTopAndHeight > startSumOfTopAndHeight) {
                     newTop = Math.min(top, resizableTop);
                 }
             }
         }
         if (deltaX > 0) {
-            if (handleAxis === "nw" || handleAxis === "w" || handleAxis === "sw") {
+            if (handleAxis === 'nw' || handleAxis === 'w' || handleAxis === 'sw') {
                 if (width >= minConstraints[0]) {
                     newLeft = Math.max(left, resizableLeft);
                 }
             }
         }
         if (deltaY > 0) {
-            if (handleAxis === "nw" || handleAxis === "n" || handleAxis === "ne") {
+            if (handleAxis === 'nw' || handleAxis === 'n' || handleAxis === 'ne') {
                 if (height >= minConstraints[1]) {
                     newTop = Math.max(top, resizableTop);
                 }
@@ -190,7 +205,7 @@ var Resizable = function (_a) {
             var _b, _c;
             var _d, _e, _f, _g, _h, _j;
             var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
-            if (handlerName === "onResizeStart") {
+            if (handlerName === 'onResizeStart') {
                 var position = { top: (_d = props.top) !== null && _d !== void 0 ? _d : 0, left: (_e = props.left) !== null && _e !== void 0 ? _e : 0 };
                 startPosition.current = position;
                 startSize.current = {
@@ -199,12 +214,12 @@ var Resizable = function (_a) {
                 };
                 resetData();
             }
-            var canDragX = (axis === "both" || axis === "x") &&
-                handleAxis !== "n" &&
-                handleAxis !== "s";
-            var canDragY = (axis === "both" || axis === "y") &&
-                handleAxis !== "e" &&
-                handleAxis !== "w";
+            var canDragX = (axis === 'both' || axis === 'x') &&
+                handleAxis !== 'n' &&
+                handleAxis !== 's';
+            var canDragY = (axis === 'both' || axis === 'y') &&
+                handleAxis !== 'e' &&
+                handleAxis !== 'w';
             if (!canDragX && !canDragY)
                 return;
             var axisV = handleAxis[0];
@@ -222,21 +237,20 @@ var Resizable = function (_a) {
             //   }
             // }
             lastHandleRectRef.current = handleRect;
-            if (axisH === "w") {
+            if (axisH === 'w') {
                 deltaX = -deltaX;
             }
-            if (axisV === "n") {
+            if (axisV === 'n') {
                 deltaY = -deltaY;
             }
-            console.log(deltaX);
             var width = props.width + (canDragX ? deltaX / transformScale : 0);
             var height = props.height + (canDragY ? deltaY / transformScale : 0);
             var left = (_h = props === null || props === void 0 ? void 0 : props.left) !== null && _h !== void 0 ? _h : 0;
             var top = (_j = props === null || props === void 0 ? void 0 : props.top) !== null && _j !== void 0 ? _j : 0;
-            if (axisV === "n") {
+            if (axisV === 'n') {
                 top = top - deltaY;
             }
-            if (axisH === "w") {
+            if (axisH === 'w') {
                 left = left - deltaX;
             }
             _b = checkConstraints(width, height), width = _b[0], height = _b[1];
@@ -245,12 +259,12 @@ var Resizable = function (_a) {
             }
             _c = checkTopLeft(deltaX, deltaY, top, left, width, height, handleAxis), top = _c[0], left = _c[1];
             var isDimensionsChanged = width !== props.width || height !== props.height;
-            var cb = typeof props[handlerName] === "function" ? props[handlerName] : null;
-            var isCbSkipped = handlerName === "onResize" && !isDimensionsChanged;
+            var cb = typeof props[handlerName] === 'function' ? props[handlerName] : null;
+            var isCbSkipped = handlerName === 'onResize' && !isDimensionsChanged;
             if (cb && !isCbSkipped) {
                 cb(e, { node: node, size: { width: width, height: height, top: top, left: left }, handle: handleAxis });
             }
-            if (handlerName === "onResizeStop") {
+            if (handlerName === 'onResizeStop') {
                 startPosition.current = null;
                 startSize.current = null;
                 resetData();
@@ -261,10 +275,10 @@ var Resizable = function (_a) {
         if (!handle) {
             return (_jsx("span", { className: "react-resizable-handle react-resizable-handle-".concat(handleAxis), ref: ref }));
         }
-        if (typeof handle === "function") {
+        if (typeof handle === 'function') {
             return handle(handleAxis, ref);
         }
-        var isDOMElement = typeof handle.type === "string";
+        var isDOMElement = typeof handle.type === 'string';
         var props = __assign({ ref: ref }, (isDOMElement ? {} : { handleAxis: handleAxis }));
         return React.cloneElement(handle, props);
     };
@@ -273,7 +287,7 @@ var Resizable = function (_a) {
             React.Children.map(children.props.children, function (child) { return child; })
         ], resizeHandles.map(function (handleAxis) {
             var ref = (handleRefs === null || handleRefs === void 0 ? void 0 : handleRefs.current) && handleRefs.current[handleAxis];
-            return (_createElement(DraggableCore, __assign({}, draggableOpts, { nodeRef: ref, key: "resizableHandle-".concat(handleAxis), onStop: resizeHandler("onResizeStop", handleAxis), onStart: resizeHandler("onResizeStart", handleAxis), onDrag: resizeHandler("onResize", handleAxis) }), renderResizeHandle(handleAxis, ref)));
+            return (_createElement(DraggableCore, __assign({}, draggableOpts, { nodeRef: ref, key: "resizableHandle-".concat(handleAxis), onStop: resizeHandler('onResizeStop', handleAxis), onStart: resizeHandler('onResizeStart', handleAxis), onDrag: resizeHandler('onResize', handleAxis) }), renderResizeHandle(handleAxis, ref)));
         }), true) }));
 };
 function removeNorthHandle(axis) {

package/package.json

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