publ-echo-test 0.0.396 → 0.0.398

package/dist/lib/GridItem/GridItem.js

@@ -603,6 +603,7 @@ var GridItem = function (_a) {
         "data-grid-id": i,
         "data-z-index": z,
         "data-z-order": zOrder,
+        "data-parent-group-id": props.parentGroupId,
         "data-is-height-variable": props.isheightVariable,
         "data-height-fit-content": heightFitContent,
         "data-z-order-internal": zOrderInternal,

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

@@ -1,7 +1,9 @@
-import React from 'react';
+import React from "react";
 type OutsideClickHandlerProps = {
     children: React.ReactNode;
     onOutsideClick: () => void;
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
 };
 declare const OutsideClickHandler: React.FC<OutsideClickHandlerProps>;
 export default OutsideClickHandler;

package/dist/lib/GridItem/OutsideClickHandler.js

@@ -1,22 +1,21 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
-import { zIndexMap } from '../GridLayoutEditor/group';
+import { useEffect, useRef, useState } from "react";
 var OutsideClickHandler = function (_a) {
-    var children = _a.children, onOutsideClick = _a.onOutsideClick;
+    var children = _a.children, onOutsideClick = _a.onOutsideClick, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave;
     var wrapperRef = useRef(null);
     var _b = useState({
-        transform: '',
-        width: '0',
-        height: '0',
+        transform: "",
+        width: "0",
+        height: "0",
     }), childDimensions = _b[0], setChildDimensions = _b[1];
     var _c = useState(0), zIndex = _c[0], setZIndex = _c[1];
     useEffect(function () {
         var handleClickOutside = function (e) {
             var target = e.target;
-            if (target.closest('.editable-grid-item') ||
-                target.closest('.group') ||
-                target.closest('.placeholder') ||
-                target.closest('.react-group-block')) {
+            if (target.closest(".editable-grid-item") ||
+                target.closest(".group") ||
+                target.closest(".placeholder") ||
+                target.closest(".react-group-block")) {
                 return;
             }
             if (wrapperRef.current &&
@@ -24,14 +23,14 @@ var OutsideClickHandler = function (_a) {
                 onOutsideClick();
             }
         };
-        var selectedSection = document.querySelector('.editor-canvas');
+        var selectedSection = document.querySelector(".editor-canvas");
         // const selectedSection = document;
         if (selectedSection) {
-            selectedSection.addEventListener('dblclick', handleClickOutside);
+            selectedSection.addEventListener("dblclick", handleClickOutside);
         }
         return function () {
             if (selectedSection) {
-                selectedSection.removeEventListener('dblclick', handleClickOutside);
+                selectedSection.removeEventListener("dblclick", handleClickOutside);
             }
         };
     }, [onOutsideClick]);
@@ -41,7 +40,7 @@ var OutsideClickHandler = function (_a) {
             var childElement = wrapperRef.current.children[0];
             // Get computed style of the child element
             var computedStyle = window.getComputedStyle(childElement);
-            if (childElement.dataset['groupBlockId'] !== 'BULK') {
+            if (childElement.dataset["groupBlockId"] !== "BULK") {
                 return;
             }
             setChildDimensions({
@@ -49,15 +48,15 @@ var OutsideClickHandler = function (_a) {
                 width: computedStyle.width,
                 height: computedStyle.height,
             });
-            if (childElement.dataset['minZ']) {
-                setZIndex(Number(childElement.dataset['minZ']));
+            if (childElement.dataset["minZ"]) {
+                setZIndex(Number(childElement.dataset["minZ"]));
             }
         }
         return function () {
             setChildDimensions({
-                transform: '',
-                width: '0',
-                height: '0',
+                transform: "",
+                width: "0",
+                height: "0",
             });
             setZIndex(0);
         };
@@ -67,46 +66,47 @@ var OutsideClickHandler = function (_a) {
     var height = parseFloat(childDimensions.height) || 0;
     var borderThickness = 3; // 3px border thickness
     var shadowOffset = 3; // Match the child's shadow (0 0 0 3px #027aff)
-    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: wrapperRef, className: 'outside-click-wrapper', children: children }), width > 0 && height > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: 'border-top', style: {
-                            position: 'absolute',
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: wrapperRef, className: "outside-click-wrapper", onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: children }), width > 0 && height > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "border-top", style: {
+                            position: "absolute",
                             transform: childDimensions.transform,
                             width: "".concat(width + shadowOffset * 2, "px"),
                             height: "".concat(borderThickness, "px"),
-                            backgroundColor: '#027aff',
+                            backgroundColor: "#027aff",
                             marginLeft: "-".concat(shadowOffset, "px"),
                             marginTop: "-".concat(shadowOffset, "px"),
-                            pointerEvents: 'none',
-                            zIndex: zIndexMap.EDITING_GROUP + zIndex,
-                        } }), _jsx("div", { className: 'border-right', style: {
-                            position: 'absolute',
+                            pointerEvents: "none",
+                            // zIndex: zIndexMap.EDITING_GROUP + zIndex,
+                            zIndex: 0,
+                        } }), _jsx("div", { className: "border-right", style: {
+                            position: "absolute",
                             transform: childDimensions.transform,
                             width: "".concat(borderThickness, "px"),
                             height: "".concat(height + shadowOffset * 2, "px"),
-                            backgroundColor: '#027aff',
+                            backgroundColor: "#027aff",
                             marginLeft: "".concat(width + shadowOffset - borderThickness, "px"),
                             marginTop: "-".concat(shadowOffset, "px"),
-                            pointerEvents: 'none',
-                            zIndex: zIndexMap.EDITING_GROUP + zIndex,
-                        } }), _jsx("div", { className: 'border-bottom', style: {
-                            position: 'absolute',
+                            pointerEvents: "none",
+                            zIndex: 0,
+                        } }), _jsx("div", { className: "border-bottom", style: {
+                            position: "absolute",
                             transform: childDimensions.transform,
                             width: "".concat(width + shadowOffset * 2, "px"),
                             height: "".concat(borderThickness, "px"),
-                            backgroundColor: '#027aff',
+                            backgroundColor: "#027aff",
                             marginLeft: "-".concat(shadowOffset, "px"),
                             marginTop: "".concat(height + shadowOffset - borderThickness, "px"),
-                            pointerEvents: 'none',
-                            zIndex: zIndexMap.EDITING_GROUP + zIndex,
-                        } }), _jsx("div", { className: 'border-left', style: {
-                            position: 'absolute',
+                            pointerEvents: "none",
+                            zIndex: 0,
+                        } }), _jsx("div", { className: "border-left", style: {
+                            position: "absolute",
                             transform: childDimensions.transform,
                             width: "".concat(borderThickness, "px"),
                             height: "".concat(height + shadowOffset * 2, "px"),
-                            backgroundColor: '#027aff',
+                            backgroundColor: "#027aff",
                             marginLeft: "-".concat(shadowOffset, "px"),
                             marginTop: "-".concat(shadowOffset, "px"),
-                            pointerEvents: 'none',
-                            zIndex: zIndexMap.EDITING_GROUP + zIndex,
+                            pointerEvents: "none",
+                            zIndex: 0,
                         } })] }))] }));
 };
 export default OutsideClickHandler;

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

@@ -86,6 +86,7 @@ export type GridItemProps = {
     isheightVariable: boolean;
     heightFitContent: boolean;
     isGroupChild?: boolean;
+    parentGroupId?: string;
 };
 export type GridItemDefaultProps = {
     className: string;

package/dist/lib/GridLayoutEditor/Placeholder.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getIsHeightVariable } from "./ReactGridLayout";
 import { getLayoutItem } from "./utils/renderHelpers";
 export function GridBackgroundPlaceholder(_a) {
     // 활성화된 행(row) 인덱스 배열
@@ -19,10 +20,11 @@ export function GridBackgroundPlaceholder(_a) {
     // 패턴은 colWidth + margin[0] 단위로 반복되므로, 마지막 열에서는 margin[0]이 필요 없습니다.
     // 또는, 마지막 요소에는 margin[0]이 없다고 가정하고 계산합니다.
     var gridContentWidth = totalCols * (colWidth + margin[0]) - margin[0];
-    var isHeightVariable = device === "DESKTOP"
-        ? !!(activeBlock === null || activeBlock === void 0 ? void 0 : activeBlock.isHeightVariableDesktop)
-        : !!(activeBlock === null || activeBlock === void 0 ? void 0 : activeBlock.isHeightVariableMobile);
-    // const showActiveRows = !!activeDrag.heightFitContent || isHeightVariable;
+    var isHeightVariable = activeBlock
+        ? getIsHeightVariable(activeBlock, device)
+        : false;
+    console.log("activeBlock", activeBlock);
+    console.log("isHeightVariable", isHeightVariable);
     var showActiveRows = activeBlock && activeBlock.type === "GROUP_BLOCK"
         ? getShowActiveRows(activeBlock, layout)
         : !!activeDrag.heightFitContent || isHeightVariable;

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

@@ -2,5 +2,7 @@ import * as React from "react";
 import type { ReactElement } from "react";
 import { PropsWithChildren } from "../types";
 import { ReactGridLayoutProps } from "./types";
+import { Block } from "./group";
 declare const ReactGridLayout: ({ children, ...props }: PropsWithChildren<ReactGridLayoutProps>) => React.ReactElement;
+export declare function getIsHeightVariable(block: Block, device: "DESKTOP" | "MOBILE"): boolean;
 export default ReactGridLayout;

package/dist/lib/GridLayoutEditor/ReactGridLayout.js

@@ -60,6 +60,7 @@ var ReactGridLayout = function (_a) {
     var _6 = useState(), droppingDOMNode = _6[0], setDroppingDOMNode = _6[1];
     var _7 = useState(), droppingPosition = _7[0], setDroppingPosition = _7[1];
     var _8 = useState(false), isMounted = _8[0], setIsMounted = _8[1];
+    var _9 = useState(null), hoveredGroupId = _9[0], setHoveredGroupId = _9[1];
     var editorMode = props.isDraggable && props.isResizable ? "EDIT" : "VIEW";
     var editableBlockIds = blockStructure
         ? findDirectChildrenCbIds(blockStructure, editingGroupBlock)
@@ -69,10 +70,10 @@ var ReactGridLayout = function (_a) {
             return i.toString();
         })
         : [];
-    var _9 = useState([]), oldGroupChildren = _9[0], setOldGroupChildren = _9[1];
-    var _10 = useState(function () {
+    var _10 = useState([]), oldGroupChildren = _10[0], setOldGroupChildren = _10[1];
+    var _11 = useState(function () {
         return synchronizeLayoutWithChildren(props.layout || [], children, cols, compactType, allowOverlap);
-    }), layout = _10[0], setLayout = _10[1];
+    }), layout = _11[0], setLayout = _11[1];
     var dragEnterCounter = useRef(0);
     useLayoutEffect(function () {
         setIsMounted(true);
@@ -556,7 +557,7 @@ var ReactGridLayout = function (_a) {
         var isInsideOfEditingGroup = editingGroupAllChildren.includes(l.i);
         var editorZIndex = (function () {
             if (isRoot && isInBulk) {
-                return z;
+                return zIndexMap.ROOT + z;
             }
             if (!isRoot && isInsideOfEditingGroup) {
                 return zIndexMap.CB_IN_EDITING_GROUP + z;
@@ -607,15 +608,15 @@ var ReactGridLayout = function (_a) {
             i: l.i,
         });
         var showBlockData = editable && !isInBulk && overlapsActiveRows;
-        return (_jsx(GridItem, { heightFitContent: !!(l === null || l === void 0 ? void 0 : l.heightFitContent), isheightVariable: device === "DESKTOP"
-                ? !!block.isHeightVariableDesktop
-                : !!block.isHeightVariableMobile, className: classNames({
+        return (_jsx(GridItem, { heightFitContent: !!(l === null || l === void 0 ? void 0 : l.heightFitContent), isheightVariable: getIsHeightVariable(block, device), parentGroupId: parent ? parent.blockId : undefined, className: classNames({
                 "editable-grid-item": !isRoot && editable,
                 "not-editable-grid-item": !isRoot && !editable,
                 "bulk-child-item": isInBulk,
                 "outside-of-editing-group": !isInsideOfEditingGroup,
-                "show-block-data": showBlockData,
+                // "show-block-data": showBlockData,
+                "show-block-data": true,
                 "is-in-group": isInGroup,
+                "is-hovered-group-child": hoveredGroupId === (parent ? parent.blockId : undefined),
             }), z: zIndex, zOrder: l.z, zOrderInternal: parent
                 ? "".concat(parent[device === "DESKTOP"
                     ? "zOrderDesktopInternal"
@@ -740,13 +741,50 @@ var ReactGridLayout = function (_a) {
         var parent = blockStructure
             ? findParentGroupBlock(blockStructure, block.blockId)
             : null;
-        return (_jsx(OutsideClickHandler, { onOutsideClick: onDoubleClickOutsideGroup, children: _jsx(GroupItem, { heightFitContent: false, isheightVariable: device === "DESKTOP"
-                    ? !!block.isHeightVariableDesktop
-                    : !!block.isHeightVariableMobile, className: classNames({
+        // Check if a layout item overlaps any of the activeRows (vertical overlap)
+        var isOverlappingActiveRows = function (item) {
+            if ((activeBlock === null || activeBlock === void 0 ? void 0 : activeBlock.type) === "COMPONENT_BLOCK") {
+                if ((parsedSelectedBlockId === null || parsedSelectedBlockId === void 0 ? void 0 : parsedSelectedBlockId.cbId) === item.i) {
+                    return false;
+                }
+                if (!(activeDragItemOrSelectedItem === null || activeDragItemOrSelectedItem === void 0 ? void 0 : activeDragItemOrSelectedItem.heightFitContent)) {
+                    return false;
+                }
+            }
+            if ((activeBlock === null || activeBlock === void 0 ? void 0 : activeBlock.type) === "GROUP_BLOCK") {
+                var hasFitContentCB = getShowActiveRows(activeBlock, layout);
+                if (!hasFitContentCB) {
+                    return false;
+                }
+            }
+            if (!activeRows || activeRows.length === 0) {
+                return false;
+            }
+            var minActive = Math.min.apply(Math, activeRows);
+            var maxActive = Math.max.apply(Math, activeRows);
+            var itemTop = item.y;
+            var itemBottom = item.y + item.h - 1;
+            // overlap if ranges [itemTop, itemBottom] and [minActive, maxActive] intersect
+            return !(itemBottom < minActive || itemTop > maxActive);
+        };
+        var overlapsActiveRows = isOverlappingActiveRows({
+            w: groupItem.w,
+            h: groupItem.h,
+            x: groupItem.x,
+            y: groupItem.y,
+            i: block.blockId,
+        });
+        var showBlockData = !isInBulk && overlapsActiveRows;
+        return (_jsx(OutsideClickHandler, { onOutsideClick: onDoubleClickOutsideGroup, onMouseEnter: function () {
+                setHoveredGroupId(block.blockId);
+            }, onMouseLeave: function () {
+                setHoveredGroupId(null);
+            }, children: _jsx(GroupItem, { heightFitContent: false, isheightVariable: getIsHeightVariable(block, device), className: classNames({
                     "bulk-child-item": isInBulk,
                     "grid-bulk-block": block.blockId === "BULK",
                     editing: editingGroupBlock === block.blockId,
                     selected: selectedGroupBlock === block.blockId,
+                    "show-block-data": showBlockData,
                 }), z: zIndex, minZ: groupItem.minZ, zOrder: internalZOrder, zOrderInternal: parent
                     ? "".concat(parent[device === "DESKTOP"
                         ? "zOrderDesktopInternal"
@@ -782,6 +820,7 @@ var ReactGridLayout = function (_a) {
             ? generateGrouplayout(parsedSelectedBlockId.blockId)
             : null;
     var activeDragItemOrSelectedItem = activeDrag || selectedLayoutItem;
+    console.log("activeDragItemOrSelectedItem", parsedSelectedBlockId);
     var activeBlock = activeDragItemOrSelectedItem && parsedSelectedBlockId
         ? blockStructure
             ? findBlockByBlockId(blockStructure, parsedSelectedBlockId.blockId)
@@ -790,9 +829,7 @@ var ReactGridLayout = function (_a) {
     var activeRows = activeDragItemOrSelectedItem &&
         Array.from({ length: activeDragItemOrSelectedItem.h }, function (_, i) { return activeDragItemOrSelectedItem.y + i; });
     var heightVariableRows = getRowsForHeightFitContentItems(layout);
-    var shouldShowAllHeightVariableRows = device === "DESKTOP"
-        ? activeBlock === null || activeBlock === void 0 ? void 0 : activeBlock.isHeightVariableDesktop
-        : activeBlock === null || activeBlock === void 0 ? void 0 : activeBlock.isHeightVariableMobile;
+    var shouldShowAllHeightVariableRows = getIsHeightVariable(activeBlock, device);
     var activeRowsFiltered = shouldShowAllHeightVariableRows
         ? heightVariableRows
         : activeRows;
@@ -800,4 +837,13 @@ var ReactGridLayout = function (_a) {
                 // width={width}
                 rowHeight: rowHeight, activeRows: activeRowsFiltered !== null && activeRowsFiltered !== void 0 ? activeRowsFiltered : [], colWidth: colWidth, activeDrag: activeDragItemOrSelectedItem, activeBlock: activeBlock, selectedBlockId: selectedBlockId, totalCols: cols, layout: layout }))] }));
 };
+export function getIsHeightVariable(block, device) {
+    var heightVariable = device === "DESKTOP"
+        ? block === null || block === void 0 ? void 0 : block.isHeightVariableDesktop
+        : block === null || block === void 0 ? void 0 : block.isHeightVariableMobile;
+    if (heightVariable === undefined || heightVariable === null) {
+        return true;
+    }
+    return heightVariable;
+}
 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;
-    isHeightVariableDesktop: boolean;
-    isHeightVariableMobile: boolean;
+    isHeightVariableDesktop: boolean | null;
+    isHeightVariableMobile: boolean | null;
 };
 export type GroupBlock = {
     blockId: string;
@@ -31,8 +31,8 @@ export type GroupBlock = {
     zOrderDesktopInternal: number | null;
     zOrderMobileInternal: number | null;
     children: (ComponentBlock | GroupBlock)[];
-    isHeightVariableDesktop: boolean;
-    isHeightVariableMobile: boolean;
+    isHeightVariableDesktop: boolean | null;
+    isHeightVariableMobile: boolean | null;
 };
 export type RootBlock = {
     blockId: "ROOT";
@@ -40,8 +40,8 @@ export type RootBlock = {
     zOrderDesktopInternal: number | null;
     zOrderMobileInternal: number | null;
     children: (ComponentBlock | GroupBlock)[];
-    isHeightVariableDesktop: boolean;
-    isHeightVariableMobile: boolean;
+    isHeightVariableDesktop: boolean | null;
+    isHeightVariableMobile: boolean | null;
 };
 export type BulkBlockInternal = {
     blockId: "BULK";
@@ -49,8 +49,8 @@ export type BulkBlockInternal = {
     zOrderDesktopInternal: number;
     zOrderMobileInternal: number;
     children: (ComponentBlock | GroupBlock)[];
-    isHeightVariableDesktop: boolean;
-    isHeightVariableMobile: boolean;
+    isHeightVariableDesktop: boolean | null;
+    isHeightVariableMobile: boolean | null;
 };
 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

@@ -265,6 +265,13 @@ export function getBlockIdKind(blockId) {
             blockId: blockId,
         };
     }
+    if (Number.isInteger(Number(blockId))) {
+        return {
+            type: "CB",
+            cbId: Number(blockId).toString(),
+            blockId: formatCbIdToBlockId(Number(blockId)),
+        };
+    }
     return null;
 }
 // export const findAccessibleChildrenBlocks = (

package/package.json

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