publ-echo 0.0.97 → 0.0.99

package/dist/lib/GridItem/GridItem.js

@@ -81,7 +81,7 @@ var GridItem = function (_a) {
                 var _a = calcWH(getPositionParams(), {
                     width: width,
                     height: height,
-                }, x, y, 'e', props.w, props.h, true), w_1 = _a.w, h_1 = _a.h;
+                }, x, y, 'e', props.w, props.h, false), w_1 = _a.w, h_1 = _a.h;
                 if (keepWidth) {
                     w_1 = prevW;
                 }
@@ -198,7 +198,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, 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

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

@@ -58,8 +58,8 @@ export function calcWH(positionParams, _a, x, y, handleAxis, prevW, prevH, shoul
     var colWidth = calcGridColWidth(positionParams);
     var rowHeightNumber = resolveRowHeight(rowHeight, colWidth);
     var roundOrCeil = shouldCeil ? Math.ceil : Math.round;
-    var w = roundOrCeil((width + margin[0]) / (colWidth + margin[0]));
-    var h = roundOrCeil((height + margin[1]) / (rowHeightNumber + margin[1]));
+    var w = roundOrCeil(truncateToOneDecimal((width + margin[0]) / (colWidth + margin[0])));
+    var h = roundOrCeil(roundToOneDecimal((height + margin[1]) / (rowHeightNumber + margin[1])));
     // // Capping
     // w = clamp(w, 0, cols - x);
     // h = clamp(h, 0, maxRows - y);
@@ -107,3 +107,9 @@ export function calcWH(positionParams, _a, x, y, handleAxis, prevW, prevH, shoul
 export function clamp(num, lowerBound, upperBound) {
     return Math.max(Math.min(num, upperBound), lowerBound);
 }
+function roundToOneDecimal(num) {
+    return Math.floor(num * 10) / 10;
+}
+function truncateToOneDecimal(num) {
+    return Math.floor(num * 10) / 10;
+}

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

@@ -2,5 +2,5 @@ import React from "react";
 import { PropsWithChildren } from "../Draggable/types";
 import { ResizableProps } from "./types";
 type Props = ResizableProps;
-declare const Resizable: ({ children, axis, handleSize, lockAspectRatio, minConstraints, maxConstraints, resizeHandles, transformScale, isResizing, autoResize, ...props }: PropsWithChildren<Props>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+declare const Resizable: ({ children, axis, handleSize, lockAspectRatio, minConstraints, maxConstraints, resizeHandles, transformScale, isResizing, autoResize, colWidth, margin, ...props }: PropsWithChildren<Props>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export default Resizable;

package/dist/lib/Resizable/Resizable.js

@@ -32,10 +32,10 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import { createElement as _createElement } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useEffect, useRef } from "react";
-import DraggableCore from "../Draggable/DraggableCore";
 import { cloneElement } from "./utils/cloneElement";
+import { DraggableCore } from "../Draggable";
 var Resizable = function (_a) {
-    var children = _a.children, _b = _a.axis, axis = _b === void 0 ? "both" : _b, _c = _a.handleSize, handleSize = _c === void 0 ? [20, 20] : _c, _d = _a.lockAspectRatio, lockAspectRatio = _d === void 0 ? false : _d, _e = _a.minConstraints, minConstraints = _e === void 0 ? [20, 20] : _e, _f = _a.maxConstraints, maxConstraints = _f === void 0 ? [Infinity, Infinity] : _f, _g = _a.resizeHandles, resizeHandles = _g === void 0 ? ["se"] : _g, _h = _a.transformScale, transformScale = _h === void 0 ? 1 : _h, isResizing = _a.isResizing, autoResize = _a.autoResize, props = __rest(_a, ["children", "axis", "handleSize", "lockAspectRatio", "minConstraints", "maxConstraints", "resizeHandles", "transformScale", "isResizing", "autoResize"]);
+    var children = _a.children, _b = _a.axis, axis = _b === void 0 ? "both" : _b, _c = _a.handleSize, handleSize = _c === void 0 ? [20, 20] : _c, _d = _a.lockAspectRatio, lockAspectRatio = _d === void 0 ? false : _d, _e = _a.minConstraints, minConstraints = _e === void 0 ? [20, 20] : _e, _f = _a.maxConstraints, maxConstraints = _f === void 0 ? [Infinity, Infinity] : _f, _g = _a.resizeHandles, resizeHandles = _g === void 0 ? ["se"] : _g, _h = _a.transformScale, transformScale = _h === void 0 ? 1 : _h, isResizing = _a.isResizing, autoResize = _a.autoResize, colWidth = _a.colWidth, margin = _a.margin, props = __rest(_a, ["children", "axis", "handleSize", "lockAspectRatio", "minConstraints", "maxConstraints", "resizeHandles", "transformScale", "isResizing", "autoResize", "colWidth", "margin"]);
     var handleRefs = useRef({
         s: useRef(null),
         n: useRef(null),
@@ -48,13 +48,14 @@ var Resizable = function (_a) {
     });
     var startPosition = useRef(null);
     var startSize = useRef(null);
-    var lastHandleRect = null;
-    var slack = null;
+    var lastHandleRectRef = useRef(null);
+    var slack = useRef(null);
     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);
+    var minHeight = useRef(0);
     useEffect(function () {
         var _a;
         if (!autoResize) {
@@ -74,6 +75,10 @@ var Resizable = function (_a) {
             return;
         }
         var target = (_a = placeholder.children[0].children[0].children[0]) !== null && _a !== void 0 ? _a : placeholder.children[0].children[0];
+        if (target.clientHeight) {
+            minHeight.current = target.clientHeight;
+        }
+        // target.clientHeight -> 실제 "노드"의 height. (gridItem아닌)
         if (target.clientHeight > elementRef.current.clientHeight) {
             extendedHeightRef.current = target.clientHeight;
             shouldShrinkRef.current = true;
@@ -82,18 +87,24 @@ var Resizable = function (_a) {
             extendedHeightRef.current = null;
         }
         if (shouldShrinkRef.current && (target.clientHeight < elementRef.current.clientHeight)) {
-            extendedHeightRef.current = target.clientHeight;
+            minHeight.current = target.clientHeight;
         }
         var minWidthStyle = target.computedStyleMap().get('min-width');
-        if (typeof minWidthStyle.value === 'number') {
-            minWidth.current = minWidthStyle.value;
+        if (typeof minWidthStyle.value === 'number' && margin && colWidth) {
+            var minWidthBase = minWidthStyle.value;
+            var minColWidth = (minWidthBase + margin[0]) / (colWidth + margin[0]);
+            var minW = Math.ceil(minColWidth);
+            var minWidthPx = (minW * colWidth) + ((minW - 1) * margin[0]);
+            minWidth.current = Math.round(minWidthPx);
         }
     }, [isResizing, autoResize, children, elementRef]);
     var resetData = function () {
-        lastHandleRect = slack = null;
+        lastHandleRectRef.current = null;
+        slack.current = null;
     };
     // NOTE - 최소 또는 최대 제약 조건 width와 height 계산, 비율 고정 계산
     var checkConstraints = function (width, height) {
+        var _a;
         if (!minConstraints && !maxConstraints && !lockAspectRatio) {
             return [width, height];
         }
@@ -108,19 +119,30 @@ var Resizable = function (_a) {
                 width = height * ratio;
             }
         }
-        var _a = [width, height], oldW = _a[0], oldH = _a[1];
-        var _b = slack || [0, 0], slackW = _b[0], slackH = _b[1];
+        console.log('w: ', width);
+        console.log('minW: ', minWidth.current);
+        var _b = [width, height], oldW = _b[0], oldH = _b[1];
+        var _c = (_a = slack.current) !== null && _a !== void 0 ? _a : [0, 0], slackW = _c[0], slackH = _c[1];
         width += slackW;
         height += slackH;
-        if (minConstraints) {
-            width = Math.max(minConstraints[0], width);
-            height = Math.max(minConstraints[1], height);
+        if (autoResize) {
+            width = Math.max(minWidth.current, width);
+            height = Math.max(minHeight.current, height);
+        }
+        else {
+            if (minConstraints) {
+                width = Math.max(minConstraints[0], width);
+                height = Math.max(minConstraints[1], height);
+            }
+        }
+        if (shouldShrinkRef.current) {
+            height = minHeight.current;
         }
         if (maxConstraints) {
             width = Math.min(maxConstraints[0], width);
             height = Math.min(maxConstraints[1], height);
         }
-        slack = [slackW + (oldW - width), slackH + (oldH - height)];
+        slack.current = [slackW + (oldW - width), slackH + (oldH - height)];
         return [width, height];
     };
     var checkTopLeft = function (deltaX, deltaY, top, left, width, height, handleAxis) {
@@ -167,7 +189,7 @@ var Resizable = function (_a) {
     var resizeHandler = function (handlerName, handleAxis) {
         return function (e, _a) {
             var _b, _c;
-            var _d, _e, _f, _g, _h, _j, _k;
+            var _d, _e, _f, _g, _h, _j;
             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 };
@@ -189,23 +211,25 @@ var Resizable = function (_a) {
             var axisV = handleAxis[0];
             var axisH = handleAxis[handleAxis.length - 1];
             var handleRect = node.getBoundingClientRect();
-            // if (lastHandleRect !== null) {
+            // if (lastHandleRectRef.current !== null) {
             //   if (axisH === "w") {
-            //     const deltaLeftSinceLast = handleRect.left - lastHandleRect.left;
+            //     const deltaLeftSinceLast = handleRect.left - lastHandleRectRef.current.left;
+            //     console.log('delta, :', deltaLeftSinceLast);
             //     deltaX += deltaLeftSinceLast;
             //   }
             //   if (axisV === "n") {
-            //     const deltaTopSinceLast = handleRect.top - lastHandleRect.top;
+            //     const deltaTopSinceLast = handleRect.top - lastHandleRectRef.current.top;
             //     deltaY += deltaTopSinceLast;
             //   }
             // }
-            lastHandleRect = handleRect;
+            lastHandleRectRef.current = handleRect;
             if (axisH === "w") {
                 deltaX = -deltaX;
             }
             if (axisV === "n") {
                 deltaY = -deltaY;
             }
+            console.log(deltaX);
             var width = props.width + (canDragX ? deltaX / transformScale : 0);
             var height = props.height + (canDragY ? deltaY / transformScale : 0);
             var left = (_h = props === null || props === void 0 ? void 0 : props.left) !== null && _h !== void 0 ? _h : 0;
@@ -216,19 +240,16 @@ var Resizable = function (_a) {
             if (axisH === "w") {
                 left = left - deltaX;
             }
-            // width = Math.max(width, minWidth.current);
-            // const isOverMin = calcWH()
-            if (extendedHeightRef.current) {
-                height = extendedHeightRef.current;
+            _b = checkConstraints(width, height), width = _b[0], height = _b[1];
+            if (autoResize && minHeight.current === height) {
                 handleAxis = removeNorthHandle(handleAxis);
             }
-            _b = checkConstraints(width, height), width = _b[0], height = _b[1];
             _c = checkTopLeft(deltaX, deltaY, top, left, width, height, handleAxis), top = _c[0], left = _c[1];
             var isDimensionsChanged = width !== props.width || height !== props.height;
             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, minHeight: (_k = extendedHeightRef.current) !== null && _k !== void 0 ? _k : 0 });
+                cb(e, { node: node, size: { width: width, height: height, top: top, left: left }, handle: handleAxis });
             }
             if (handlerName === "onResizeStop") {
                 startPosition.current = null;

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

@@ -63,5 +63,7 @@ export type ResizableProps = {
     height: number;
     isResizing?: boolean;
     autoResize?: boolean;
+    colWidth?: number;
+    margin?: [number, number];
 };
 export type ResizeHandleType = ReactElement<any> | ((resizeHandleAxis: ResizeHandleAxis, ref: Ref<HTMLElement>) => ReactElement<any>);

package/package.json

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