publ-echo-test 0.0.34 → 0.0.36

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 인스턴스 생성
@@ -341,7 +357,7 @@ var GridItem = function (_a) {
             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 _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;

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; });
@@ -363,7 +363,7 @@ var ReactGridLayout = function (_a) {
                 l.minH = h;
             }
             return l;
-        }), newLayout = _a[0], l = _a[1];
+        }), newLayout = _b[0], l = _b[1];
         if (!l)
             return;
         props.onFitToContent &&
@@ -371,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,15 +53,17 @@ 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;
+        var _a, _b;
         if (!autoResize) {
             return;
         }
         if (!isResizing) {
             extendedHeightRef.current = null;
             minWidth.current = 0;
+            shouldShrinkRef.current = false;
             return;
         }
         if (!elementRef.current) {
@@ -74,10 +76,16 @@ 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;
         }
+        console.log('startHeight', (_b = startSize.current) === null || _b === void 0 ? void 0 : _b.height);
+        console.log('height', height);
+        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;

package/package.json

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