publ-echo 0.0.103 → 0.0.105

package/dist/lib/Draggable/DraggableCore.js

@@ -30,12 +30,13 @@ var DraggableCore = function (_a) {
     var _c = _a.allowAnyClick, allowAnyClick = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.enableUserSelectHack, enableUserSelectHack = _e === void 0 ? true : _e, _f = _a.onStart, onStart = _f === void 0 ? function () { } : _f, _g = _a.onDrag, onDrag = _g === void 0 ? function () { } : _g, _h = _a.onStop, onStop = _h === void 0 ? function () { } : _h, _j = _a.onMouseDown, onMouseDown = _j === void 0 ? function () { } : _j, _k = _a.scale, scale = _k === void 0 ? 1 : _k, children = _a.children, props = __rest(_a, ["allowAnyClick", "disabled", "enableUserSelectHack", "onStart", "onDrag", "onStop", "onMouseDown", "scale", "children"]);
     var draggableCoreRef = useRef(null);
     var isMounted = useRef(false);
-    var _l = useState({
+    var _l = useState(false), pointerEventsNone = _l[0], setPointerEventsNone = _l[1];
+    var _m = useState({
         dragging: false,
         lastX: NaN,
         lastY: NaN,
         touchIdentifier: null,
-    }), draggableCoreState = _l[0], setDraggableCoreState = _l[1];
+    }), draggableCoreState = _m[0], setDraggableCoreState = _m[1];
     /**
      * @when DraggableCore가 랜더링 했을 때
      * @expected 해당 DOMNode에서 Drag가 동작할 수 있도록 event를 추가합니다.

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,21 +21,22 @@ 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, 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 _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 () {
@@ -58,7 +59,9 @@ var GridItem = function (_a) {
                 var isCharacterChanged = mutation.type === 'characterData';
                 var keepWidth = true;
                 var hasPaddingChanged = false;
-                var height = isCharacterChanged ? mutation.target.parentNode.clientHeight : mutation.target.clientHeight;
+                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);
@@ -71,7 +74,10 @@ var GridItem = function (_a) {
                     var paddingR = parseFloat(styles.paddingRight);
                     var paddingT = parseFloat(styles.paddingTop);
                     var paddingB = parseFloat(styles.paddingBottom);
-                    if (prevPaddingL !== paddingL || prevPaddingR !== paddingR || prevPaddingT !== paddingT || prevPaddingB !== paddingB) {
+                    if (prevPaddingL !== paddingL ||
+                        prevPaddingR !== paddingR ||
+                        prevPaddingT !== paddingT ||
+                        prevPaddingB !== paddingB) {
                         hasPaddingChanged = true;
                         keepWidth = false;
                     }
@@ -92,7 +98,8 @@ var GridItem = function (_a) {
                 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 });
+                props.onFitToContent &&
+                    props.onFitToContent(i, w_1, h_1, newX, newY, { hasPaddingChanged: hasPaddingChanged });
             }
         };
         // MutationObserver 인스턴스 생성
@@ -157,7 +164,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);
@@ -171,7 +178,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.
@@ -198,7 +205,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
@@ -233,7 +240,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;
@@ -266,7 +273,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;
@@ -282,7 +289,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);
@@ -297,7 +304,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);
@@ -306,7 +313,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);
@@ -323,7 +330,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
@@ -332,7 +339,7 @@ var GridItem = function (_a) {
      */
     var onResize = function (e, callbackData) {
         setIsResizing(true);
-        onResizeHandler(e, callbackData, "onResize");
+        onResizeHandler(e, callbackData, 'onResize');
     };
     /**
      * onResizeStop event handler
@@ -341,7 +348,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.
@@ -375,7 +382,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);
     };
@@ -388,13 +395,17 @@ var GridItem = function (_a) {
         key: i,
         ref: elementRef,
         'data-grid-id': i,
-        className: classNames("react-grid-item", child.props.className, className, {
+        '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,
+            '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

@@ -0,0 +1,10 @@
+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;
+    zOrderInternal: string;
+    minZ?: number | undefined;
+}>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export default GroupItem;