publ-echo 0.0.122 → 0.0.124

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,22 @@
 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";
+import { zIndexMap } from "../GridLayoutEditor/group";
 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 +24,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 +41,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 +49,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,45 +67,45 @@ 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',
+                            pointerEvents: "none",
                             zIndex: zIndexMap.EDITING_GROUP + zIndex,
-                        } }), _jsx("div", { className: 'border-right', style: {
-                            position: 'absolute',
+                        } }), _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',
+                            pointerEvents: "none",
                             zIndex: zIndexMap.EDITING_GROUP + zIndex,
-                        } }), _jsx("div", { className: 'border-bottom', style: {
-                            position: 'absolute',
+                        } }), _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',
+                            pointerEvents: "none",
                             zIndex: zIndexMap.EDITING_GROUP + zIndex,
-                        } }), _jsx("div", { className: 'border-left', style: {
-                            position: 'absolute',
+                        } }), _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',
+                            pointerEvents: "none",
                             zIndex: zIndexMap.EDITING_GROUP + zIndex,
                         } })] }))] }));
 };

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);
@@ -616,6 +617,7 @@ var ReactGridLayout = function (_a) {
                 "outside-of-editing-group": !isInsideOfEditingGroup,
                 "show-block-data": showBlockData,
                 "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"
@@ -704,6 +706,7 @@ var ReactGridLayout = function (_a) {
         var isRoot = editingGroupBlock === "ROOT";
         var isInBulk = bulkIds === null || bulkIds === void 0 ? void 0 : bulkIds.includes(block.blockId);
         var isBulk = block.blockId === "BULK";
+        console.log("id", block.blockId, "isBulk", isBulk, "isInBulk", isInBulk, "isEditingGroup", isEditingGroup);
         var baseZ = (function () {
             if (isBulk) {
                 // groupItem.z : 그룹 내 CB중 가장 큰 zorder
@@ -740,7 +743,11 @@ 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"
+        return (_jsx(OutsideClickHandler, { onOutsideClick: onDoubleClickOutsideGroup, onMouseEnter: function () {
+                setHoveredGroupId(block.blockId);
+            }, onMouseLeave: function () {
+                setHoveredGroupId(null);
+            }, children: _jsx(GroupItem, { heightFitContent: false, isheightVariable: device === "DESKTOP"
                     ? !!block.isHeightVariableDesktop
                     : !!block.isHeightVariableMobile, className: classNames({
                     "bulk-child-item": isInBulk,

package/package.json

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