publ-echo-test 0.0.332 → 0.0.333

package/dist/lib/GridItem/GridItem.js

@@ -0,0 +1,417 @@
+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 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 _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 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, { 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: 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
+     * @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 });
+    };
+    /**
+     * 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 });
+    };
+    /**
+     * 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);
+    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, {
+            static: props.static,
+            isResizing: Boolean(resizing) && Boolean(isResizing) && Boolean(isHiddenVisibility),
+            resizing: Boolean(resizing),
+            'react-draggable': isDraggable,
+            'editable-grid-item': isResizable && 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 GridItem;

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;