publ-echo-test 0.0.33 → 0.0.35

package/dist/lib/Draggable/DraggableCore.js

@@ -93,11 +93,6 @@ var DraggableCore = function (_a) {
         var _a, _b;
         return (_b = (_a = props === null || props === void 0 ? void 0 : props.nodeRef) === null || _a === void 0 ? void 0 : _a.current) !== null && _b !== void 0 ? _b : draggableCoreRef === null || draggableCoreRef === void 0 ? void 0 : draggableCoreRef.current;
     };
-    var findChildrenNode = function () {
-        var _a;
-        console.log(props.nodeRef);
-        return (_a = props === null || props === void 0 ? void 0 : props.nodeRef) === null || _a === void 0 ? void 0 : _a.current;
-    };
     // NOTE - event 발생 시 {x, y} position을 가져오는 함수
     var getControlPosition = function (e, touchIdentifier) {
         var _a;
@@ -187,7 +182,6 @@ var DraggableCore = function (_a) {
         setDraggableCoreState(function (prev) { return (__assign(__assign({}, prev), { dragging: true, lastX: x, lastY: y })); });
     }
     function handleDrag(e) {
-        // console.log(e.currentTarget)
         var _a;
         var position = getControlPosition(e, draggableCoreState.touchIdentifier);
         if (!position)
@@ -204,7 +198,6 @@ var DraggableCore = function (_a) {
         }
         var coreEvent = createCoreData(x, y);
         var thisNode = findDOMNode();
-        // const children = findChildrenNode()
         if (!coreEvent || !thisNode)
             return;
         var shouldUpdate = onDrag(e, coreEvent, thisNode);

package/dist/lib/GridItem/GridItem.js

@@ -47,12 +47,17 @@ var GridItem = function (_a) {
         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) {
@@ -61,6 +66,14 @@ var GridItem = function (_a) {
                     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;
+                    }
                 }
                 var prevW = props.w;
                 var prevH = props.h;
@@ -75,7 +88,10 @@ var GridItem = function (_a) {
                     h_1 = prevH;
                 }
                 var _b = getResizableXYPosition('e', w_1, h_1, prevW, prevH), newX = _b.newX, newY = _b.newY;
-                props.onFitToContent && props.onFitToContent(i, w_1, h_1, newX, 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 인스턴스 생성
@@ -315,16 +331,6 @@ var GridItem = function (_a) {
      */
     var onResize = function (e, callbackData) {
         setIsResizing(true);
-        // let { w, h } = calcWH(
-        //   getPositionParams(),
-        //   callbackData.size,
-        //   x,
-        //   y,
-        //   callbackData.handle,
-        //   undefined,
-        //   undefined,
-        //   callbackData.isOverMin
-        // );
         onResizeHandler(e, callbackData, "onResize");
     };
     /**
@@ -345,27 +351,31 @@ var GridItem = function (_a) {
      * @return {Function}           Handler function.
      */
     var onResizeHandler = function (e, _a, handlerName) {
-        var node = _a.node, size = _a.size, handle = _a.handle, minWidth = _a.minWidth;
+        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, false), w = _b.w, h = _b.h;
+        var tempMinH = minH;
         if (minWidth) {
-            var minW_1 = calcWH(getPositionParams(), __assign(__assign({}, size), { width: minWidth }), x, y, handle, prevW, prevH, true).w;
+            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, minH, maxH);
+        h = clamp(h, tempMinH, maxH);
         setResizing(handlerName === "onResizeStop" ? undefined : size);
-        var _c = getResizableXYPosition(handle, w, h, prevW, prevH), newX = _c.newX, newY = _c.newY;
+        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, {

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

@@ -75,7 +75,9 @@ export type GridItemProps = {
     onResize?: ResizeGridItemCallback<GridResizeEvent>;
     onResizeStart?: ResizeGridItemCallback<GridResizeEvent>;
     onResizeStop?: ResizeGridItemCallback<GridResizeEvent>;
-    onFitToContent?: (i: string, w: number, h: number, x: number, y: number) => void;
+    onFitToContent?: (i: string, w: number, h: number, x: number, y: number, { hasPaddingChanged }: {
+        hasPaddingChanged: boolean;
+    }) => void;
     isHiddenVisibility?: boolean;
     customColWidth?: number;
     autoResize: boolean;

package/dist/lib/GridLayoutEditor/ReactGridLayout.js

@@ -255,7 +255,6 @@ var ReactGridLayout = function (_a) {
         var l = getLayoutItem(layout, i);
         if (!l)
             return;
-        console.log(l);
         setOldResizeItem(cloneLayoutItem(l));
         setOldLayout(layout);
         props.onResizeStart &&
@@ -334,8 +333,9 @@ var ReactGridLayout = function (_a) {
         setOldLayout(undefined);
         onLayoutMaybeChanged(newLayout, oldLayout);
     };
-    var onFitToContentHandler = function (i, w, h, x, y) {
-        var _a = withLayoutItem(layout, i, function (l) {
+    var onFitToContentHandler = function (i, w, h, x, y, _a) {
+        var hasPaddingChanged = _a.hasPaddingChanged;
+        var _b = withLayoutItem(layout, i, function (l) {
             var hasCollisions;
             if (preventCollision && !allowOverlap) {
                 var collisions = getAllCollisions(layout, __assign(__assign({}, l), { w: x, h: y })).filter(function (layoutItem) { return layoutItem.i !== l.i; });
@@ -360,9 +360,10 @@ var ReactGridLayout = function (_a) {
                 l.h = h;
                 l.x = x;
                 l.y = y;
+                l.minH = h;
             }
             return l;
-        }), newLayout = _a[0], l = _a[1];
+        }), newLayout = _b[0], l = _b[1];
         if (!l)
             return;
         props.onFitToContent &&
@@ -370,6 +371,7 @@ var ReactGridLayout = function (_a) {
                 layout: newLayout,
                 prev: oldResizeItem,
                 item: l,
+                hasPaddingChanged: hasPaddingChanged
             });
         setLayout(allowOverlap ? newLayout : compact(newLayout, compactType, cols));
     };

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

@@ -71,7 +71,7 @@ export type ReactGridLayoutProps = {
     innerRef?: RefObject<HTMLDivElement>;
     minNbRow?: number;
     customColWidth?: number;
-    onFitToContent?: EventCallback;
+    onFitToContent?: OnFitContentCallBack;
 };
 export type DragOverEvent = MouseEvent & {
     nativeEvent: {
@@ -79,6 +79,15 @@ export type DragOverEvent = MouseEvent & {
         layerY: number;
     } & Event;
 };
+export type OnFitContentCallBack = (properties: {
+    layout: Layout;
+    prev?: LayoutItem;
+    item?: LayoutItem;
+    placeholder?: LayoutItem;
+    e?: ResizeEventType;
+    node?: HTMLElement;
+    hasPaddingChanged: boolean;
+}) => void;
 export type EventCallback = (properties: {
     layout: Layout;
     prev?: LayoutItem;

package/dist/lib/Resizable/Resizable.js

@@ -53,6 +53,7 @@ var Resizable = function (_a) {
     var className = props.className, draggableOpts = props.draggableOpts, width = props.width, height = props.height, handle = props.handle, onResize = props.onResize, onResizeStop = props.onResizeStop, onResizeStart = props.onResizeStart, restProps = __rest(props, ["className", "draggableOpts", "width", "height", "handle", "onResize", "onResizeStop", "onResizeStart"]);
     var elementRef = children.ref;
     var extendedHeightRef = useRef(null);
+    var shouldShrinkRef = useRef(false);
     var minWidth = useRef(0);
     useEffect(function () {
         var _a;
@@ -62,6 +63,7 @@ var Resizable = function (_a) {
         if (!isResizing) {
             extendedHeightRef.current = null;
             minWidth.current = 0;
+            shouldShrinkRef.current = false;
             return;
         }
         if (!elementRef.current) {
@@ -74,10 +76,14 @@ var Resizable = function (_a) {
         var target = (_a = placeholder.children[0].children[0].children[0]) !== null && _a !== void 0 ? _a : placeholder.children[0].children[0];
         if (target.clientHeight > elementRef.current.clientHeight) {
             extendedHeightRef.current = target.clientHeight;
+            shouldShrinkRef.current = true;
         }
         else {
             extendedHeightRef.current = null;
         }
+        if (shouldShrinkRef.current && target.clientHeight < elementRef.current.clientHeight) {
+            extendedHeightRef.current = target.clientHeight;
+        }
         var minWidthStyle = target.computedStyleMap().get('min-width');
         if (typeof minWidthStyle.value === 'number') {
             minWidth.current = minWidthStyle.value;
@@ -161,7 +167,7 @@ var Resizable = function (_a) {
     var resizeHandler = function (handlerName, handleAxis) {
         return function (e, _a) {
             var _b, _c;
-            var _d, _e, _f, _g, _h, _j;
+            var _d, _e, _f, _g, _h, _j, _k;
             var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
             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 };
@@ -222,7 +228,7 @@ var Resizable = function (_a) {
             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, minWidth: minWidth.current });
+                cb(e, { node: node, size: { width: width, height: height, top: top, left: left }, handle: handleAxis, minWidth: minWidth.current, minHeight: (_k = extendedHeightRef.current) !== null && _k !== void 0 ? _k : 0 });
             }
             if (handlerName === "onResizeStop") {
                 startPosition.current = null;

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

@@ -30,6 +30,7 @@ export type ResizeCallbackData = {
     };
     handle: ResizeHandleAxis;
     minWidth?: number;
+    minHeight?: number;
 };
 export type ResizableDefaultProps = {
     axis: Axis;

package/package.json

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