publ-echo-test 0.0.358 → 0.0.360

package/dist/lib/GridItem/GridItem.js

@@ -603,7 +603,7 @@ var GridItem = function (_a) {
         "data-grid-id": i,
         "data-z-index": z,
         "data-z-order": zOrder,
-        "data-is-pinned": props.isPinned,
+        "data-is-height-variable": props.isheightVariable,
         "data-height-fit-content": heightFitContent,
         "data-z-order-internal": zOrderInternal,
         className: classNames("react-grid-item", child.props.className, className, {

package/dist/lib/GridItem/GroupItem.js

@@ -29,7 +29,7 @@ import { perc, setTopLeft, setTransform, } from "../GridLayoutEditor/utils/rende
 var GroupItem = function (_a) {
     var _b;
     var children = _a.children, props = __rest(_a, ["children"]);
-    var resizeHandle = props.resizeHandle, cols = props.cols, zOrder = props.zOrder, zOrderInternal = props.zOrderInternal, isDraggable = props.isDraggable, _c = props.transformScale, transformScale = _c === void 0 ? 1 : _c, isResizable = props.isResizable, useCSSTransforms = props.useCSSTransforms, className = props.className, _d = props.cancel, cancel = _d === void 0 ? "" : _d, _e = props.handle, handle = _e === void 0 ? "" : _e, x = props.x, y = props.y, z = props.z, w = props.w, h = props.h, _f = props.minH, minH = _f === void 0 ? 1 : _f, _g = props.minW, minW = _g === void 0 ? 1 : _g, _h = props.maxH, maxH = _h === void 0 ? Infinity : _h, _j = props.maxW, maxW = _j === void 0 ? Infinity : _j, i = props.i, _k = props.isHiddenVisibility, isHiddenVisibility = _k === void 0 ? false : _k, containerWidth = props.containerWidth, customColWidth = props.customColWidth, autoResize = props.autoResize, minZ = props.minZ, onContextGroup = props.onContextGroup, isPinned = props.isPinned;
+    var resizeHandle = props.resizeHandle, cols = props.cols, zOrder = props.zOrder, zOrderInternal = props.zOrderInternal, isDraggable = props.isDraggable, _c = props.transformScale, transformScale = _c === void 0 ? 1 : _c, isResizable = props.isResizable, useCSSTransforms = props.useCSSTransforms, className = props.className, _d = props.cancel, cancel = _d === void 0 ? "" : _d, _e = props.handle, handle = _e === void 0 ? "" : _e, x = props.x, y = props.y, z = props.z, w = props.w, h = props.h, _f = props.minH, minH = _f === void 0 ? 1 : _f, _g = props.minW, minW = _g === void 0 ? 1 : _g, _h = props.maxH, maxH = _h === void 0 ? Infinity : _h, _j = props.maxW, maxW = _j === void 0 ? Infinity : _j, i = props.i, _k = props.isHiddenVisibility, isHiddenVisibility = _k === void 0 ? false : _k, containerWidth = props.containerWidth, customColWidth = props.customColWidth, autoResize = props.autoResize, minZ = props.minZ, onContextGroup = props.onContextGroup, isheightVariable = props.isheightVariable;
     var _l = useState(), resizing = _l[0], setResizing = _l[1];
     var _m = useState(), dragging = _m[0], setDragging = _m[1];
     var _o = useState(), dragStart = _o[0], setDragStart = _o[1];
@@ -419,7 +419,7 @@ var GroupItem = function (_a) {
         "data-z-order": zOrder,
         "data-z-order-internal": zOrderInternal,
         "data-min-z": minZ,
-        "data-is-pinned": isPinned,
+        "data-is-height-variable": isheightVariable,
         className: classNames("react-group-block", child.props.className, className, {
             static: props.static,
             isResizing: Boolean(resizing) &&

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

@@ -83,7 +83,7 @@ export type GridItemProps = {
     autoResize: boolean;
     zOrder?: number;
     zOrderInternal?: string;
-    isPinned: boolean;
+    isheightVariable: boolean;
     heightFitContent: boolean;
 };
 export type GridItemDefaultProps = {

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

@@ -1,5 +1,5 @@
 import { ResizeHandleAxis } from "../../Resizable/types";
-import { Position, PositionParams } from "../../GridLayoutEditor/types";
+import { Layout, Position, PositionParams } from "../../GridLayoutEditor/types";
 export type RowHeight = number | ((width: number) => number);
 export declare function calcGridColWidth(positionParams: PositionParams): number;
 export declare function calcGridItemWHPx(gridUnits: number, colOrRowSize: number, marginPx: number): number;
@@ -28,3 +28,11 @@ export declare function calcWH(positionParams: PositionParams, { width, height }
     h: number;
 };
 export declare function clamp(num: number, lowerBound: number, upperBound: number): number;
+/**
+ * layout 배열을 분석하여 'heightFitContent'가 true인 모든 아이템이
+ * 차지하고 있는 Row 인덱스 배열을 반환합니다.
+ *
+ * @param layout - 현재 그리드 레이아웃 (LayoutItem 배열)
+ * @returns 중복이 제거되고 정렬된 Row 인덱스 배열 (예: [0, 1, 2, 5, 6])
+ */
+export declare const getRowsForHeightFitContentItems: (layout: Layout) => number[];

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

@@ -113,3 +113,30 @@ function roundToOneDecimal(num) {
 function truncateToOneDecimal(num) {
     return Math.floor(num * 10) / 10;
 }
+// ReactGridLayout.tsx 파일 상단이나, 임포트하는 유틸리티 파일에
+/**
+ * layout 배열을 분석하여 'heightFitContent'가 true인 모든 아이템이
+ * 차지하고 있는 Row 인덱스 배열을 반환합니다.
+ *
+ * @param layout - 현재 그리드 레이아웃 (LayoutItem 배열)
+ * @returns 중복이 제거되고 정렬된 Row 인덱스 배열 (예: [0, 1, 2, 5, 6])
+ */
+export var getRowsForHeightFitContentItems = function (layout) {
+    // Set을 사용하여 Row 인덱스의 중복을 자동으로 처리합니다.
+    var activeRows = new Set();
+    // 1. heightFitContent가 true인 아이템들만 필터링합니다.
+    var fitContentItems = layout.filter(function (item) { return item.heightFitContent === true; });
+    // 2. 필터링된 각 아이템을 순회합니다.
+    for (var _i = 0, fitContentItems_1 = fitContentItems; _i < fitContentItems_1.length; _i++) {
+        var item = fitContentItems_1[_i];
+        // 3. 아이템이 차지하는 모든 Row를 Set에 추가합니다.
+        // (예: y=2, h=3 이면 2, 3, 4 행을 추가)
+        var startRow = item.y;
+        var endRow = item.y + item.h;
+        for (var row = startRow; row < endRow; row++) {
+            activeRows.add(row);
+        }
+    }
+    // 4. Set을 배열로 변환하고 오름차순으로 정렬하여 반환합니다.
+    return Array.from(activeRows).sort(function (a, b) { return a - b; });
+};

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

@@ -8,6 +8,7 @@ type PlaceholderProps = {
     activeDrag: LayoutItem;
     selectedBlockId: string | null;
     totalCols: number;
+    activeRows: number[];
 };
-export declare function GridBackgroundPlaceholder({ margin, rowHeight, colWidth, backgroundWidth, backgroundHeight, activeDrag, selectedBlockId, totalCols, }: PlaceholderProps): import("react/jsx-runtime").JSX.Element;
+export declare function GridBackgroundPlaceholder({ margin, rowHeight, colWidth, backgroundWidth, backgroundHeight, activeDrag, selectedBlockId, activeRows, totalCols, }: PlaceholderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/lib/GridLayoutEditor/Placeholder.js

@@ -1,10 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function GridBackgroundPlaceholder(_a) {
+    // 활성화된 행(row) 인덱스 배열
+    // const activeRows = Array.from(
+    //   { length: activeDrag.h },
+    //   (_, i) => activeDrag.y + i
+    // );
     var margin = _a.margin, 
     // width, // 🚨 제거
-    rowHeight = _a.rowHeight, colWidth = _a.colWidth, backgroundWidth = _a.backgroundWidth, backgroundHeight = _a.backgroundHeight, activeDrag = _a.activeDrag, selectedBlockId = _a.selectedBlockId, totalCols = _a.totalCols;
-    // 활성화된 행(row) 인덱스 배열
-    var activeRows = Array.from({ length: activeDrag.h }, function (_, i) { return activeDrag.y + i; });
+    rowHeight = _a.rowHeight, colWidth = _a.colWidth, backgroundWidth = _a.backgroundWidth, backgroundHeight = _a.backgroundHeight, activeDrag = _a.activeDrag, selectedBlockId = _a.selectedBlockId, activeRows = _a.activeRows, totalCols = _a.totalCols;
     // 🚨 activeCols도 totalCols prop으로 받아서 사용
     // const activeCols = Array.from({ length: 24 }, (_, i) => 0 + i);
     var activeCols = Array.from({ length: totalCols }, function (_, i) { return 0 + i; });

package/dist/lib/GridLayoutEditor/ReactGridLayout.js

@@ -34,7 +34,7 @@ import * as React from "react";
 import { useState, useRef, useLayoutEffect } from "react";
 import classNames from "../../external-lib/classnames";
 import { bottom, cloneLayoutItem, compact, getAllCollisions, getBoundingArea, getLayoutItem, moveElement, noop, synchronizeLayoutWithChildren, withLayoutItem, } from "./utils/renderHelpers";
-import { calcGridColWidth, calcXY, resolveRowHeight, } from "../GridItem/utils/calculateUtils";
+import { calcGridColWidth, calcXY, getRowsForHeightFitContentItems, resolveRowHeight, } from "../GridItem/utils/calculateUtils";
 // NOTE: 필수 변경하기
 import GridItem from "../GridItem/GridItem";
 import isEqual from "../../external-lib/lodash.isEqual";
@@ -535,7 +535,7 @@ var ReactGridLayout = function (_a) {
         if (!item) {
             return null;
         }
-        return (_jsx(GridItem, { isPinned: false, w: activeDrag.w, h: activeDrag.h, x: activeDrag.x, y: activeDrag.y, z: zIndexMap.ISDRAGGING, i: activeDrag.i, heightFitContent: false, 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, autoResize: !!l.autoResize, minH: l.minH, minW: l.minW, children: item && item }));
+        return (_jsx(GridItem, { isheightVariable: false, w: activeDrag.w, h: activeDrag.h, x: activeDrag.x, y: activeDrag.y, z: zIndexMap.ISDRAGGING, i: activeDrag.i, heightFitContent: false, 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, autoResize: !!l.autoResize, minH: l.minH, minW: l.minW, children: item && item }));
     };
     /**
      * Given a grid item, set its style attributes & surround in a <Draggable>.
@@ -617,9 +617,9 @@ var ReactGridLayout = function (_a) {
             y: l.y,
             i: l.i,
         });
-        return (_jsx(GridItem, { heightFitContent: !!(l === null || l === void 0 ? void 0 : l.heightFitContent), isPinned: device === "DESKTOP"
-                ? !!block.isPinnedDesktop
-                : !!block.isPinnedMobile, className: classNames({
+        return (_jsx(GridItem, { heightFitContent: !!(l === null || l === void 0 ? void 0 : l.heightFitContent), isheightVariable: device === "DESKTOP"
+                ? !!block.isHeightVariableDesktop
+                : !!block.isHeightVariableMobile, className: classNames({
                 "editable-grid-item": !isRoot && editable,
                 "not-editable-grid-item": !isRoot && !editable,
                 "bulk-child-item": isInBulk,
@@ -749,9 +749,9 @@ var ReactGridLayout = function (_a) {
         var parent = blockStructure
             ? findParentGroupBlock(blockStructure, block.blockId)
             : null;
-        return (_jsx(OutsideClickHandler, { onOutsideClick: onDoubleClickOutsideGroup, children: _jsx(GroupItem, { heightFitContent: false, isPinned: device === "DESKTOP"
-                    ? !!block.isPinnedDesktop
-                    : !!block.isPinnedMobile, className: classNames({
+        return (_jsx(OutsideClickHandler, { onOutsideClick: onDoubleClickOutsideGroup, children: _jsx(GroupItem, { heightFitContent: false, isheightVariable: device === "DESKTOP"
+                    ? !!block.isHeightVariableDesktop
+                    : !!block.isHeightVariableMobile, className: classNames({
                     "bulk-child-item": isInBulk,
                     "grid-bulk-block": block.blockId === "BULK",
                     editing: editingGroupBlock === block.blockId,
@@ -780,8 +780,13 @@ var ReactGridLayout = function (_a) {
     var activeDragItemOrSelectedItem = activeDrag || selectedLayoutItem;
     var activeRows = activeDragItemOrSelectedItem &&
         Array.from({ length: activeDragItemOrSelectedItem.h }, function (_, i) { return activeDragItemOrSelectedItem.y + i; });
+    var heightVariableRows = getRowsForHeightFitContentItems(layout);
+    var shouldShowAllHeightVariableRows = activeDragItemOrSelectedItem === null || activeDragItemOrSelectedItem === void 0 ? void 0 : activeDragItemOrSelectedItem.isHeightVariable;
+    var activeRowsFiltered = shouldShowAllHeightVariableRows
+        ? heightVariableRows
+        : activeRows;
     return (_jsxs("div", { ref: innerRef, className: mergedClassName, style: mergedStyle, onDrop: isDroppable ? onDropHandler : noop, onDragLeave: isDroppable ? onDragLeaveHandler : noop, onDragEnter: isDroppable ? onDragEnterHandler : noop, onDragOver: isDroppable ? onDragOverHandler : noop, "data-grid-row-height": rowHeight, "data-grid-cols": cols, "data-section-id": sectionId, children: [currentGroupBlocks.map(function (each) { return processGroup(each); }), React.Children.map(children, function (child) { return processGridItem(child); }), placeholder(), activeDrag && _jsx("div", { className: "grid-guide-line-center" }), activeDragItemOrSelectedItem && (_jsx(GridBackgroundPlaceholder, { backgroundWidth: getBackgroundWidth(), backgroundHeight: getBackgroundHeight(), margin: margin, 
                 // width={width}
-                rowHeight: rowHeight, colWidth: colWidth, activeDrag: activeDragItemOrSelectedItem, selectedBlockId: selectedBlockId, totalCols: cols }))] }));
+                rowHeight: rowHeight, activeRows: activeRowsFiltered !== null && activeRowsFiltered !== void 0 ? activeRowsFiltered : [], colWidth: colWidth, activeDrag: activeDragItemOrSelectedItem, selectedBlockId: selectedBlockId, totalCols: cols }))] }));
 };
 export default ReactGridLayout;

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

@@ -22,8 +22,8 @@ export type ComponentBlock = {
     zOrderDesktopInternal: number | null;
     zOrderMobileInternal: number | null;
     componentBlockId: number;
-    isPinnedDesktop: boolean;
-    isPinnedMobile: boolean;
+    isHeightVariableDesktop: boolean;
+    isHeightVariableMobile: boolean;
 };
 export type GroupBlock = {
     blockId: string;
@@ -31,8 +31,8 @@ export type GroupBlock = {
     zOrderDesktopInternal: number | null;
     zOrderMobileInternal: number | null;
     children: (ComponentBlock | GroupBlock)[];
-    isPinnedDesktop: boolean;
-    isPinnedMobile: boolean;
+    isHeightVariableDesktop: boolean;
+    isHeightVariableMobile: boolean;
 };
 export type RootBlock = {
     blockId: "ROOT";
@@ -40,8 +40,8 @@ export type RootBlock = {
     zOrderDesktopInternal: number | null;
     zOrderMobileInternal: number | null;
     children: (ComponentBlock | GroupBlock)[];
-    isPinnedDesktop: boolean;
-    isPinnedMobile: boolean;
+    isHeightVariableDesktop: boolean;
+    isHeightVariableMobile: boolean;
 };
 export type BulkBlockInternal = {
     blockId: "BULK";
@@ -49,8 +49,8 @@ export type BulkBlockInternal = {
     zOrderDesktopInternal: number;
     zOrderMobileInternal: number;
     children: (ComponentBlock | GroupBlock)[];
-    isPinnedDesktop: boolean;
-    isPinnedMobile: boolean;
+    isHeightVariableDesktop: boolean;
+    isHeightVariableMobile: boolean;
 };
 export declare const findBlockByBlockId: (block: Block, blockId: string) => Block | null;
 export declare const findDirectChildrenCbIds: (block: Block, targetId: string) => number[];

package/dist/lib/GridLayoutEditor/group.js

@@ -217,8 +217,8 @@ export var addBulkToTarget = function (block, targetId, bulkBlockIds) {
         zOrderDesktopInternal: zOrderDesktopInternal,
         zOrderMobileInternal: zOrderMobileInternal,
         children: bulkBlocks,
-        isPinnedDesktop: false,
-        isPinnedMobile: false,
+        isHeightVariableDesktop: false,
+        isHeightVariableMobile: false,
     };
     // Add the bulkBlock to the target's children
     targetBlock.children.push(bulkBlock);

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

@@ -22,7 +22,7 @@ export type LayoutItem = {
     isBounded?: boolean;
     groupLayouts?: LayoutItem[];
     autoResize?: boolean;
-    isPinned?: boolean;
+    isHeightVariable?: boolean;
     heightFitContent?: boolean;
 };
 export type Layout = LayoutItem[];

package/package.json

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