publ-echo-test 0.0.261 → 0.0.263

package/dist/lib/Resizable/Resizable.js

@@ -57,11 +57,8 @@ var Resizable = function (_a) {
     var shouldShrinkRef = useRef(false);
     var minWidth = useRef(0);
     var minHeight = useRef(0);
-    // #################################################################
-    // ## 여기가 `useLayoutEffect`에서 `ResizeObserver`로 변경된 부분입니다. ##
-    // #################################################################
     useEffect(function () {
-        var _a, _b, _c, _d;
+        var _a;
         if (!autoResize) {
             return;
         }
@@ -78,21 +75,63 @@ var Resizable = function (_a) {
         if (!placeholder) {
             return;
         }
-        var target = (_c = (_b = (_a = placeholder.children[0]) === null || _a === void 0 ? void 0 : _a.children[0]) === null || _b === void 0 ? void 0 : _b.children[0]) !== null && _c !== void 0 ? _c : (_d = placeholder.children[0]) === null || _d === void 0 ? void 0 : _d.children[0];
-        if (!target) {
+        var target = (_a = placeholder.children[0].children[0].children[0]) !== null && _a !== void 0 ? _a : placeholder.children[0].children[0];
+        var isContentsList = target.id === "contentslist-box";
+        if (isContentsList) {
+            return;
+        }
+        if (target.clientHeight && !isContentsList) {
+            minHeight.current = target.clientHeight;
+        }
+        // target.clientHeight -> 실제 "노드"의 height. (gridItem아닌)
+        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) {
+            minHeight.current = target.clientHeight;
+        }
+        var minWidthStyle = target.computedStyleMap().get("min-width");
+        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]);
+    useEffect(function () {
+        if (!autoResize) {
             return;
         }
-        // 크기를 측정하고 제약 조건을 설정하는 로직을 함수로 분리
-        var measureAndSetConstraints = function () {
+        if (!isResizing) {
+            extendedHeightRef.current = null;
+            minWidth.current = 0;
+            shouldShrinkRef.current = false;
+            return;
+        }
+        if (!elementRef.current) {
+            return;
+        }
+        setTimeout(function () {
+            var _a, _b;
+            var placeholder = document.querySelector(".placeholder");
+            if (!placeholder) {
+                return;
+            }
+            var target = (_a = placeholder.children[0].children[0].children[0]) !== null && _a !== void 0 ? _a : placeholder.children[0].children[0];
             var oneComposition = target.querySelector(".composition-container");
             var isContentsList = target.id === "contentslist-box";
-            if (isContentsList && !oneComposition)
+            if (!isContentsList || !oneComposition) {
                 return;
-            if (target.clientHeight && !isContentsList) {
-                minHeight.current = target.clientHeight;
             }
             if (isContentsList && oneComposition) {
                 var minCellWidth = 10;
+                var minColHeight = 11;
                 var numberOfItems = Number(target.getAttribute("data-number-of-items"));
                 var numberOfColumns = Number(target.getAttribute("data-number-of-columns"));
                 var rowGap = Number(target.getAttribute("data-row-gap"));
@@ -100,72 +139,59 @@ var Resizable = function (_a) {
                 var insetTop = Number(target.getAttribute("data-inset-top"));
                 var insetBottom = Number(target.getAttribute("data-inset-bottom"));
                 var compositionCols = Number(oneComposition.getAttribute("data-cols"));
-                var oneCompositionMinWidth = minCellWidth * compositionCols + 20;
+                var compositionRows = Number(oneComposition.getAttribute("data-rows"));
+                var oneCompositionMinWidth = minCellWidth * compositionCols + 20; /* 20px padding */
+                // let oneCompositionMinHeight =
+                //   minColHeight * compositionRows + 20; /* 20px padding */
                 var contentsWrapper = placeholder.querySelector(".cb-contentslist-wrapper");
                 if (contentsWrapper) {
+                    var wrapperH = contentsWrapper.clientHeight;
                     var tempCompositionH = oneComposition.clientHeight;
+                    console.log("tempCompositionH", tempCompositionH);
+                    console.log("parentH", (_b = oneComposition.parentElement) === null || _b === void 0 ? void 0 : _b.clientHeight);
                     var CompositionBGwrapperPaddingT = Number(oneComposition.getAttribute("data-wrapper-paddingT"));
                     var CompositionBGwrapperPaddingB = Number(oneComposition.getAttribute("data-wrapper-paddingB"));
-                    var oneCompositionMinHeight = tempCompositionH +
-                        CompositionBGwrapperPaddingT +
-                        CompositionBGwrapperPaddingB;
-                    var styles = getComputedStyle(target);
-                    var paddingLR = parseFloat(styles.paddingLeft) + parseFloat(styles.paddingRight);
-                    var paddingTB = parseFloat(styles.paddingTop) + parseFloat(styles.paddingBottom);
-                    minWidth.current =
-                        oneCompositionMinWidth * numberOfColumns +
+                    if (tempCompositionH > wrapperH) {
+                        var oneCompositionMinHeight = tempCompositionH +
+                            CompositionBGwrapperPaddingT +
+                            CompositionBGwrapperPaddingB;
+                        var styles = getComputedStyle(target);
+                        var paddingL = parseFloat(styles.paddingLeft);
+                        var paddingR = parseFloat(styles.paddingRight);
+                        var paddingT = parseFloat(styles.paddingTop);
+                        var paddingB = parseFloat(styles.paddingBottom);
+                        var paddingLR = paddingL + paddingR;
+                        var paddingTB = paddingT + paddingB;
+                        var listMinWidth = oneCompositionMinWidth * numberOfColumns +
                             (numberOfColumns - 1) * columnGap +
                             paddingLR;
-                    var numberOfRows = Math.ceil(numberOfItems / numberOfColumns);
-                    minHeight.current =
-                        oneCompositionMinHeight * numberOfRows +
+                        var numberOfRows = Math.ceil(numberOfItems / numberOfColumns);
+                        var listMinHeight = oneCompositionMinHeight * numberOfRows +
                             (numberOfRows - 1) * rowGap +
                             paddingTB +
                             insetTop +
                             insetBottom;
+                        console.log("oneCompositionMinHeight", oneCompositionMinHeight);
+                        console.log("listMinHeight", listMinHeight);
+                        // minWidth.current = listMinWidth;
+                        // minHeight.current = listMinHeight;
+                        return;
+                    }
                 }
                 return;
             }
-            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) {
-                minHeight.current = target.clientHeight;
-            }
-            var minWidthStyle = target
-                .computedStyleMap()
-                .get("min-width");
-            if (typeof (minWidthStyle === null || minWidthStyle === void 0 ? void 0 : minWidthStyle.value) === "number" && margin && colWidth) {
-                var minWidthBase = minWidthStyle.value;
-                var minColWidth = (minWidthBase + margin[0]) / (colWidth + margin[0]);
-                var minW = Math.ceil(minColWidth);
-                minWidth.current = Math.round(minW * colWidth + (minW - 1) * margin[0]);
-            }
-        };
-        // ResizeObserver를 생성하고, target 요소의 크기 변경을 감지
-        var observer = new ResizeObserver(function () {
-            measureAndSetConstraints();
-        });
-        observer.observe(target);
-        // 초기 렌더링 시점에도 한번 실행하여 초기값을 설정
-        measureAndSetConstraints();
-        // 클린업 함수: 컴포넌트가 언마운트되거나 의존성이 변경될 때 observer 연결을 해제
-        return function () {
-            observer.disconnect();
-        };
-    }, [isResizing, autoResize, children, elementRef, colWidth, margin]);
+        }, 0);
+    }, [isResizing, autoResize, children, elementRef]);
     var resetData = function () {
         lastHandleRectRef.current = null;
         slack.current = null;
     };
+    // NOTE - 최소 또는 최대 제약 조건 width와 height 계산, 비율 고정 계산
     var checkConstraints = function (width, height) {
         var _a;
-        // ... (이하 동일)
+        if (!minConstraints && !maxConstraints && !lockAspectRatio) {
+            return [width, height];
+        }
         if (lockAspectRatio) {
             var ratio = props.width / props.height;
             var deltaWidth = width - props.width;
@@ -266,7 +292,19 @@ var Resizable = function (_a) {
                 return;
             var axisV = handleAxis[0];
             var axisH = handleAxis[handleAxis.length - 1];
-            lastHandleRectRef.current = node.getBoundingClientRect();
+            var handleRect = node.getBoundingClientRect();
+            // if (lastHandleRectRef.current !== null) {
+            //   if (axisH === "w") {
+            //     const deltaLeftSinceLast = handleRect.left - lastHandleRectRef.current.left;
+            //     console.log('delta, :', deltaLeftSinceLast);
+            //     deltaX += deltaLeftSinceLast;
+            //   }
+            //   if (axisV === "n") {
+            //     const deltaTopSinceLast = handleRect.top - lastHandleRectRef.current.top;
+            //     deltaY += deltaTopSinceLast;
+            //   }
+            // }
+            lastHandleRectRef.current = handleRect;
             if (axisH === "w") {
                 deltaX = -deltaX;
             }
@@ -313,6 +351,7 @@ var Resizable = function (_a) {
         return React.cloneElement(handle, props);
     };
     return cloneElement(children, __assign(__assign({}, restProps), { className: classNames(className !== null && className !== void 0 ? className : "react-resizable"), children: __spreadArray([
+            // ...children.props.children,
             React.Children.map(children.props.children, function (child) { return child; })
         ], resizeHandles.map(function (handleAxis) {
             var ref = (handleRefs === null || handleRefs === void 0 ? void 0 : handleRefs.current) && handleRefs.current[handleAxis];

package/package.json

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