publ-echo 0.0.45 → 0.0.46

package/dist/lib/GridItem/GridItem.js

@@ -27,15 +27,22 @@ 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 { useResizeObserver } from "../hooks/useResizeobserver";
+import { shouldAutoResize, shouldBlockResize } from "./utils/autoResizeUtils";
 var GridItem = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
-    var resizeHandle = props.resizeHandle, cols = props.cols, isDraggable = props.isDraggable, _b = props.transformScale, transformScale = _b === void 0 ? 1 : _b, isResizable = props.isResizable, useCSSTransforms = props.useCSSTransforms, className = props.className, _c = props.cancel, cancel = _c === void 0 ? "" : _c, _d = props.handle, handle = _d === void 0 ? "" : _d, x = props.x, y = props.y, z = props.z, w = props.w, h = props.h, _e = props.minH, minH = _e === void 0 ? 1 : _e, _f = props.minW, minW = _f === void 0 ? 1 : _f, _g = props.maxH, maxH = _g === void 0 ? Infinity : _g, _h = props.maxW, maxW = _h === void 0 ? Infinity : _h, i = props.i, _j = props.isHiddenVisibility, isHiddenVisibility = _j === void 0 ? false : _j, containerWidth = props.containerWidth, customColWidth = props.customColWidth;
+    var resizeHandle = props.resizeHandle, cols = props.cols, isDraggable = props.isDraggable, _b = props.transformScale, transformScale = _b === void 0 ? 1 : _b, isResizable = props.isResizable, useCSSTransforms = props.useCSSTransforms, className = props.className, _c = props.cancel, cancel = _c === void 0 ? "" : _c, _d = props.handle, handle = _d === void 0 ? "" : _d, x = props.x, y = props.y, z = props.z, w = props.w, h = props.h, _e = props.minH, minH = _e === void 0 ? 1 : _e, _f = props.minW, minW = _f === void 0 ? 1 : _f, _g = props.maxH, maxH = _g === void 0 ? Infinity : _g, _h = props.maxW, maxW = _h === void 0 ? Infinity : _h, i = props.i, _j = props.isHiddenVisibility, isHiddenVisibility = _j === void 0 ? false : _j, containerWidth = props.containerWidth, customColWidth = props.customColWidth, rowHeight = props.rowHeight;
+    var shouldAutoShrink = useRef({ shouldAutoShrink: false, initialHeight: 0 });
     var _k = useState(), resizing = _k[0], setResizing = _k[1];
     var _l = useState(), dragging = _l[0], setDragging = _l[1];
     var _m = useState(), dragStart = _m[0], setDragStart = _m[1];
     var _o = useState(false), isDragging = _o[0], setIsDragging = _o[1];
     var _p = useState(false), isResizing = _p[0], setIsResizing = _p[1];
     var elementRef = useRef(null);
+    var _q = useResizeObserver({
+        ref: elementRef,
+        box: 'border-box',
+    }, [isDragging, isResizing]), _r = _q.width, width = _r === void 0 ? 0 : _r, _s = _q.height, height = _s === void 0 ? 0 : _s, _t = _q.clientHeight, clientHeight = _t === void 0 ? 0 : _t, _u = _q.scrollHeight, scrollHeight = _u === void 0 ? 0 : _u, textContentHeight = _q.textContentHeight;
     // const moveDroppingItem = (prevProps: GridItemProps) => {
     //   const { droppingPosition } = props;
     //   if (!droppingPosition) return;
@@ -173,9 +180,9 @@ var GridItem = function (_a) {
         if (isBounded) {
             var offsetParent = node.offsetParent;
             if (offsetParent) {
-                var margin = props.margin, rowHeight = props.rowHeight;
+                var margin = props.margin, rowHeight_1 = props.rowHeight;
                 // const colWidth =  calcGridColWidth(positionParams);
-                var rowHeightNumber = resolveRowHeight(rowHeight, colWidth);
+                var rowHeightNumber = resolveRowHeight(rowHeight_1, colWidth);
                 var bottomBoundary = offsetParent.clientHeight -
                     calcGridItemWHPx(h, rowHeightNumber, margin[1]);
                 top = clamp(top, 0, bottomBoundary);
@@ -253,7 +260,16 @@ var GridItem = function (_a) {
      * @param  {Object} callbackData  an object with node and size information
      */
     var onResizeStart = function (e, callbackData) {
+        var _a;
+        var isOverflowingVertically = scrollHeight > clientHeight;
+        var isHandleVertical = callbackData.handle.includes('n') || callbackData.handle.includes('s');
+        // const isOverflowingHorizontally = scrollWidth > clientWidth;
+        if (isOverflowingVertically && isHandleVertical) {
+            (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.classList.add("resize-notallowed-".concat(callbackData.handle));
+            return;
+        }
         onResizeHandler(e, callbackData, "onResizeStart");
+        shouldAutoShrink.current.initialHeight = height;
     };
     /**
      * onResize event handler
@@ -262,6 +278,53 @@ var GridItem = function (_a) {
      */
     var onResize = function (e, callbackData) {
         setIsResizing(true);
+        var _a = getDirectionOfMouseEvent(e), dirX = _a.dirX, dirY = _a.dirY;
+        var shouldBlock = shouldBlockResize({
+            handle: callbackData.handle,
+            direction: dirY,
+            contentHeight: textContentHeight,
+            gridItemHeight: callbackData.size.height,
+            shouldAutoShrink: shouldAutoShrink.current.shouldAutoShrink,
+            initialHeight: shouldAutoShrink.current.initialHeight,
+            colHeight: rowHeight
+        });
+        if (resizing === null || resizing === void 0 ? void 0 : resizing.top) {
+            console.log(resizing === null || resizing === void 0 ? void 0 : resizing.top);
+            callbackData.size.top = resizing === null || resizing === void 0 ? void 0 : resizing.top;
+        }
+        var shouldResize = shouldAutoResize({
+            handle: callbackData.handle,
+            dirX: dirX,
+            dirY: dirY,
+            contentHeight: textContentHeight,
+            gridItemHeight: callbackData.size.height,
+            shouldAutoShrink: shouldAutoShrink.current.shouldAutoShrink,
+            initialHeight: shouldAutoShrink.current.initialHeight
+        });
+        if (shouldResize !== 'EXPAND' && shouldBlock === 'BLOCK') {
+            callbackData.size.height = textContentHeight;
+        }
+        if (shouldResize === 'EXPAND') {
+            callbackData.size.height = textContentHeight;
+            shouldAutoShrink.current.shouldAutoShrink = true;
+            // NOTE: 배포전에 무조건 변경
+            if (callbackData.handle === 'nw') {
+                callbackData.handle = 'w';
+            }
+            if (callbackData.handle === 'ne') {
+                callbackData.handle = 'se';
+            }
+        }
+        if (shouldResize === 'SHRINK') {
+            callbackData.size.height = Math.max(shouldAutoShrink.current.initialHeight, textContentHeight);
+            // NOTE: 배포전에 무조건 변경
+            if (callbackData.handle === 'nw') {
+                callbackData.handle = 'sw';
+            }
+            if (callbackData.handle === 'ne') {
+                callbackData.handle = 'se';
+            }
+        }
         onResizeHandler(e, callbackData, "onResize");
     };
     /**
@@ -272,6 +335,10 @@ var GridItem = function (_a) {
     var onResizeStop = function (e, callbackData) {
         setIsResizing(false);
         onResizeHandler(e, callbackData, "onResizeStop");
+        shouldAutoShrink.current = {
+            shouldAutoShrink: false,
+            initialHeight: 0,
+        };
     };
     /**
      * Wrapper around drag events to provide more useful data.
@@ -297,6 +364,11 @@ var GridItem = function (_a) {
         h = clamp(h, minH, maxH);
         setResizing(handlerName === "onResizeStop" ? undefined : size);
         var _c = getResizableXYPosition(handle, w, h, prevW, prevH), newX = _c.newX, newY = _c.newY;
+        if (newY !== y) {
+            // Y 변화가 있다면 자동줄이기는 하지않는다.
+            shouldAutoShrink.current.shouldAutoShrink = false;
+            shouldAutoShrink.current.initialHeight = 0;
+        }
         handler(i, w, h, { e: e, node: node, size: size }, newX, newY);
     };
     var pos = calcGridItemPosition(getPositionParams(), x, y, z, w, h, {
@@ -325,3 +397,12 @@ var GridItem = function (_a) {
     return newChild;
 };
 export default GridItem;
+// NOTE: 이동해야할 util
+var getDirectionOfMouseEvent = function (e) {
+    var dirX = e.movementX > 0 ? 'right' : e.movementX < 0 ? 'left' : null;
+    var dirY = e.movementY > 0 ? 'down' : e.movementY < 0 ? 'up' : null;
+    return {
+        dirX: dirX,
+        dirY: dirY
+    };
+};

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

@@ -0,0 +1,24 @@
+export type Handle = 'n' | 's' | 'w' | 'e' | 'nw' | 'ne' | 'sw' | 'se';
+export type DirectionX = 'right' | 'left';
+export type DirectionY = 'up' | 'down';
+type Props = {
+    handle: Handle;
+    dirX: DirectionX;
+    dirY: DirectionY;
+    contentHeight: number;
+    gridItemHeight: number;
+    shouldAutoShrink: boolean;
+    initialHeight: number;
+};
+export declare function shouldAutoResize({ handle, dirX, dirY, contentHeight, gridItemHeight, shouldAutoShrink, initialHeight }: Props): "SHRINK" | "EXPAND" | "NONE";
+type BlockDetectProp = {
+    handle: Handle;
+    direction: DirectionY;
+    contentHeight: number;
+    gridItemHeight: number;
+    shouldAutoShrink: boolean;
+    initialHeight: number;
+    colHeight: number;
+};
+export declare function shouldBlockResize({ handle, direction, contentHeight, gridItemHeight, shouldAutoShrink, initialHeight, colHeight }: BlockDetectProp): "NONE" | "BLOCK";
+export {};

package/dist/lib/GridItem/utils/autoResizeUtils.js

@@ -0,0 +1,51 @@
+export function shouldAutoResize(_a) {
+    var handle = _a.handle, dirX = _a.dirX, dirY = _a.dirY, contentHeight = _a.contentHeight, gridItemHeight = _a.gridItemHeight, shouldAutoShrink = _a.shouldAutoShrink, initialHeight = _a.initialHeight;
+    var shouldExpand = contentHeight > gridItemHeight;
+    var shouldShrink = gridItemHeight > contentHeight;
+    if (handle === 'nw') {
+        // if (dirY === 'up' || dirY === 'down') {
+        //   return 'NONE'
+        // }
+        if (dirX === 'left' && shouldShrink && shouldAutoShrink) {
+            return 'SHRINK';
+        }
+        if (dirX === 'right' && shouldExpand) {
+            return 'EXPAND';
+        }
+    }
+    if (handle.includes('e') && dirX === 'left' && shouldExpand) {
+        return 'EXPAND';
+    }
+    if (handle.includes('e') && dirX === 'right' && shouldShrink && shouldAutoShrink) {
+        return 'SHRINK';
+    }
+    if (handle.includes('w') && dirX === 'right' && shouldExpand) {
+        return 'EXPAND';
+    }
+    if (handle.includes('w') && dirX === 'left' && shouldShrink && shouldAutoShrink) {
+        return 'SHRINK';
+    }
+    return 'NONE';
+}
+export function shouldBlockResize(_a) {
+    var handle = _a.handle, direction = _a.direction, contentHeight = _a.contentHeight, gridItemHeight = _a.gridItemHeight, shouldAutoShrink = _a.shouldAutoShrink, initialHeight = _a.initialHeight, colHeight = _a.colHeight;
+    var nextGridHeight = gridItemHeight - colHeight;
+    var shouldBlock = contentHeight > nextGridHeight;
+    var shouldShrink = gridItemHeight > contentHeight;
+    if (handle.includes('n') && direction === 'down' && shouldBlock) {
+        return 'BLOCK';
+    }
+    if (handle.includes('s') && direction === 'up' && shouldBlock) {
+        return 'BLOCK';
+    }
+    // if (handle.includes('e') && direction === 'right' && shouldShrink && shouldAutoShrink) {
+    //   return 'SHRINK';
+    // }
+    // if (handle.includes('w') && direction === 'right' && shouldExpand) {
+    //   return 'EXPAND';
+    // }
+    // if (handle.includes('w') && direction === 'left' && shouldShrink && shouldAutoShrink) {
+    //   return 'SHRINK';
+    // }
+    return 'NONE';
+}

package/dist/lib/GridLayoutEditor/ReactGridLayout.js

@@ -357,6 +357,26 @@ var ReactGridLayout = function (_a) {
         }
         return (_jsx(GridItem, { w: activeDrag.w, h: activeDrag.h, x: activeDrag.x, y: activeDrag.y, z: activeDrag.z || 0, i: activeDrag.i, className: "placeholder", containerWidth: width, cols: cols, margin: margin, containerPadding: containerPadding || margin, maxRows: maxRows, rowHeight: rowHeight, isDraggable: false, isResizable: false, isBounded: false, useCSSTransforms: useCSSTransforms, transformScale: transformScale, children: item && item }));
     };
+    var placeholder2 = function () {
+        if (!activeDrag)
+            return;
+        // {...activeDrag} is pretty slow, actually
+        var l = getLayoutItem(props.layout, String(activeDrag.i));
+        if (!l) {
+            return null;
+        }
+        // NOTE: toChildren changes key
+        // LINK: https://legacy.reactjs.org/docs/react-api.html
+        var items = React.Children.toArray(children);
+        var item = items.find(function (child) {
+            var originalKey = String(child.key).split(".$");
+            return originalKey[1] === l.i;
+        });
+        if (!item) {
+            return null;
+        }
+        return (_jsx(GridItem, { w: activeDrag.w, h: activeDrag.h, x: activeDrag.x, y: activeDrag.y, z: activeDrag.z || 0, i: activeDrag.i, className: "placeholder", containerWidth: width, cols: cols, margin: margin, containerPadding: containerPadding || margin, maxRows: maxRows, rowHeight: rowHeight, isDraggable: false, isResizable: false, isBounded: false, useCSSTransforms: useCSSTransforms, transformScale: transformScale, children: item && item }));
+    };
     /**
      * Given a grid item, set its style attributes & surround in a <Draggable>.
      * @param  {Element} child React element.

package/dist/lib/hooks/useIsMounted.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Custom hook for determining if the component is currently mounted.
+ * @returns {() => boolean} A function that returns a boolean value indicating whether the component is mounted.
+ * @see [Documentation](https://usehooks-ts.com/react-hook/use-is-mounted)
+ * @example
+ * const isComponentMounted = useIsMounted();
+ * // Use isComponentMounted() to check if the component is currently mounted before performing certain actions.
+ */
+export declare function useIsMounted(): () => boolean;

package/dist/lib/hooks/useIsMounted.js

@@ -0,0 +1,19 @@
+import { useCallback, useEffect, useRef } from 'react';
+/**
+ * Custom hook for determining if the component is currently mounted.
+ * @returns {() => boolean} A function that returns a boolean value indicating whether the component is mounted.
+ * @see [Documentation](https://usehooks-ts.com/react-hook/use-is-mounted)
+ * @example
+ * const isComponentMounted = useIsMounted();
+ * // Use isComponentMounted() to check if the component is currently mounted before performing certain actions.
+ */
+export function useIsMounted() {
+    var isMounted = useRef(false);
+    useEffect(function () {
+        isMounted.current = true;
+        return function () {
+            isMounted.current = false;
+        };
+    }, []);
+    return useCallback(function () { return isMounted.current; }, []);
+}

package/dist/lib/hooks/useResizeobserver.d.ts

@@ -0,0 +1,38 @@
+import type { RefObject } from 'react';
+type Size = {
+    width: number | undefined;
+    height: number | undefined;
+    scrollHeight: number | undefined;
+    clientHeight: number | undefined;
+    textContentHeight: number | undefined;
+};
+type ResizeHandler = (size: Size) => void;
+type BoxOptions = 'border-box' | 'content-box' | 'device-pixel-content-box';
+type UseResizeObserverOptions<T extends HTMLElement = HTMLElement> = {
+    ref: RefObject<T>;
+    onResize?: ResizeHandler;
+    box?: BoxOptions;
+};
+type UseResizeObserverResult = Size;
+/**
+ * Custom hook for observing the size of an element using the ResizeObserver API.
+ *
+ * @template T - The type of the element to observe.
+ * @param {UseResizeObserverOptions<T>} options - The options for the ResizeObserver. (default is `{}`).
+ * @param {RefObject<T>} options.ref - The ref of the element to observe.
+ * @param {ResizeHandler} [options.onResize] - When using `onResize`, the hook doesn't re-render on element size changes; it delegates handling to the provided callback . (default is `undefined`).
+ * @param {string} [options.box] - The box model to use for the ResizeObserver. (default is `'content-box'`).
+ * @returns {UseResizeObserverResult} - The size of the observed element.
+ * @see [Documentation](https://usehooks-ts.com/react-hook/use-resize-observer)
+ * @see [MDN ResizeObserver API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
+ * @example
+ * const myRef = useRef(null);
+ * const { width = 0, height = 0 } = useResizeObserver({
+ *   ref: myRef,
+ *   box: 'content-box',
+ * });
+ *
+ * <div ref={myRef}>Hello, world!</div>
+ */
+export declare function useResizeObserver<T extends HTMLElement = HTMLElement>(options: UseResizeObserverOptions<T>, deps: any[]): UseResizeObserverResult;
+export {};

package/dist/lib/hooks/useResizeobserver.js

@@ -0,0 +1,116 @@
+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));
+};
+import { useEffect, useRef, useState } from 'react';
+import { useIsMounted } from './useIsMounted';
+var initialSize = {
+    width: undefined,
+    height: undefined,
+    scrollHeight: undefined,
+    clientHeight: undefined,
+    textContentHeight: undefined,
+};
+/**
+ * Custom hook for observing the size of an element using the ResizeObserver API.
+ *
+ * @template T - The type of the element to observe.
+ * @param {UseResizeObserverOptions<T>} options - The options for the ResizeObserver. (default is `{}`).
+ * @param {RefObject<T>} options.ref - The ref of the element to observe.
+ * @param {ResizeHandler} [options.onResize] - When using `onResize`, the hook doesn't re-render on element size changes; it delegates handling to the provided callback . (default is `undefined`).
+ * @param {string} [options.box] - The box model to use for the ResizeObserver. (default is `'content-box'`).
+ * @returns {UseResizeObserverResult} - The size of the observed element.
+ * @see [Documentation](https://usehooks-ts.com/react-hook/use-resize-observer)
+ * @see [MDN ResizeObserver API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
+ * @example
+ * const myRef = useRef(null);
+ * const { width = 0, height = 0 } = useResizeObserver({
+ *   ref: myRef,
+ *   box: 'content-box',
+ * });
+ *
+ * <div ref={myRef}>Hello, world!</div>
+ */
+export function useResizeObserver(options, deps) {
+    var ref = options.ref, _a = options.box, box = _a === void 0 ? 'content-box' : _a;
+    var _b = useState(initialSize), _c = _b[0], width = _c.width, height = _c.height, scrollHeight = _c.scrollHeight, clientHeight = _c.clientHeight, textContentHeight = _c.textContentHeight, setSize = _b[1];
+    var isMounted = useIsMounted();
+    var previousSize = useRef(__assign({}, initialSize));
+    var onResize = useRef(undefined);
+    onResize.current = options === null || options === void 0 ? void 0 : options.onResize;
+    useEffect(function () {
+        if (!(ref === null || ref === void 0 ? void 0 : ref.current))
+            return;
+        var placeholder = document.querySelector('.placeholder');
+        if (!placeholder) {
+            return;
+        }
+        if (typeof window === 'undefined' || !('ResizeObserver' in window))
+            return;
+        var observer = new ResizeObserver(function (_a) {
+            var _b, _c, _d;
+            var entry = _a[0];
+            var boxProp = box === 'border-box'
+                ? 'borderBoxSize'
+                : box === 'device-pixel-content-box'
+                    ? 'devicePixelContentBoxSize'
+                    : 'contentBoxSize';
+            var newWidth = extractSize(entry, boxProp, 'inlineSize');
+            var newHeight = extractSize(entry, boxProp, 'blockSize');
+            var newScrollHeight = entry.target.scrollHeight;
+            var newClientHeight = entry.target.clientHeight;
+            var newTextContentHeight = (_d = (_c = (_b = entry.target.children[0]) === null || _b === void 0 ? void 0 : _b.children[0]) === null || _c === void 0 ? void 0 : _c.clientHeight) !== null && _d !== void 0 ? _d : 0;
+            var hasChanged = previousSize.current.width !== newWidth ||
+                previousSize.current.height !== newHeight ||
+                previousSize.current.scrollHeight !== newScrollHeight ||
+                previousSize.current.clientHeight !== newClientHeight ||
+                previousSize.current.textContentHeight !== newTextContentHeight;
+            if (hasChanged) {
+                var newSize = { width: newWidth, height: newHeight, scrollHeight: newScrollHeight, clientHeight: newClientHeight, textContentHeight: newTextContentHeight };
+                previousSize.current.width = newWidth;
+                previousSize.current.height = newHeight;
+                if (onResize === null || onResize === void 0 ? void 0 : onResize.current) {
+                    onResize.current(newSize);
+                }
+                else {
+                    if (isMounted()) {
+                        setSize(newSize);
+                    }
+                }
+            }
+        });
+        observer.observe(placeholder.children[0], { box: box });
+        return function () {
+            observer.disconnect();
+        };
+    }, __spreadArray([box, ref, isMounted], deps, true));
+    return { width: width, height: height, scrollHeight: scrollHeight, clientHeight: clientHeight, textContentHeight: textContentHeight };
+}
+function extractSize(entry, box, sizeType) {
+    if (!entry[box]) {
+        if (box === 'contentBoxSize') {
+            return entry.contentRect[sizeType === 'inlineSize' ? 'width' : 'height'];
+        }
+        return undefined;
+    }
+    return Array.isArray(entry[box])
+        ? entry[box][0][sizeType]
+        : // @ts-ignore Support Firefox's non-standard behavior
+            entry[box][sizeType];
+}

package/package.json

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