publ-echo-test 0.0.59 → 0.0.60

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

@@ -23,7 +23,8 @@ export type DraggableCoreDefaultProps = {
     onDrag?: DraggableEventHandler | Function;
     onStop?: DraggableEventHandler | Function;
     onMouseDown?: (e: MouseEvent) => void;
-    onDoubleClick?: any;
+    onDoubleClick?: () => void;
+    onClick?: () => void;
     scale?: number;
     cancel?: string;
     children: ReactElement<any>;

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

@@ -1,5 +1,9 @@
 import React from "react";
 import { GridItemProps } from "./types";
 import { PropsWithChildren } from "../types";
-declare const GroupItem: ({ children, ...props }: PropsWithChildren<GridItemProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+type GroupItemProp = {
+    onDoubleClick: (id: string) => void;
+    onClick: (id: string) => void;
+};
+declare const GroupItem: ({ children, ...props }: PropsWithChildren<GridItemProps & GroupItemProp>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export default GroupItem;

package/dist/lib/GridItem/GroupItem.js

@@ -30,7 +30,7 @@ import { Resizable } from "../Resizable";
 var GroupItem = function (_a) {
     var _b;
     var children = _a.children, props = __rest(_a, ["children"]);
-    var resizeHandle = props.resizeHandle, cols = props.cols, 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, onDoubleClick = props.onDoubleClick;
+    var resizeHandle = props.resizeHandle, cols = props.cols, 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, onDoubleClick = props.onDoubleClick, onClick = props.onClick;
     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];
@@ -136,7 +136,10 @@ var GroupItem = function (_a) {
     //   }
     // };
     var handleDoubleClick = function () {
-        (props === null || props === void 0 ? void 0 : props.onDoubleClick) && props.onDoubleClick(props.i);
+        onDoubleClick(props.i);
+    };
+    var handleClick = function () {
+        onClick(props.i);
     };
     var getPositionParams = function (prop) {
         if (prop === void 0) { prop = props; }
@@ -174,7 +177,7 @@ var GroupItem = function (_a) {
      * @return {Element}          Child wrapped in Draggable.
      */
     var mixinDraggable = function (child, isDraggable) {
-        return (_jsx(DraggableCore, { onDoubleClick: handleDoubleClick, disabled: !isDraggable, onStart: onDragStart, onDrag: onDrag, onStop: onDragStop, handle: handle, cancel: ".react-resizable-handle" + (cancel ? "," + cancel : ""), scale: transformScale, nodeRef: elementRef, children: child }));
+        return (_jsx(DraggableCore, { onClick: handleClick, onDoubleClick: handleDoubleClick, disabled: !isDraggable, onStart: onDragStart, onDrag: onDrag, onStop: onDragStop, handle: handle, cancel: ".react-resizable-handle" + (cancel ? "," + cancel : ""), scale: transformScale, nodeRef: elementRef, children: child }));
     };
     /**
      * Mix a Resizable instance into a child.

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

@@ -78,7 +78,6 @@ export type GridItemProps = {
     onFitToContent?: (i: string, w: number, h: number, x: number, y: number, { hasPaddingChanged }: {
         hasPaddingChanged: boolean;
     }) => void;
-    onDoubleClick?: (id: string) => void;
     isHiddenVisibility?: boolean;
     customColWidth?: number;
     autoResize: boolean;

package/dist/lib/GridLayoutEditor/ReactGridLayout.js

@@ -37,7 +37,7 @@ import { bottom, cloneLayoutItem, compact, getAllCollisions, getBoundingArea, ge
 import { calcGridColWidth, calcXY, resolveRowHeight, } from "../GridItem/utils/calculateUtils";
 import GridItem from "../GridItem/GridItem";
 import isEqual from "../../external-lib/lodash.isEqual";
-import { findAllChildrenButGroup, findAllChildrenIds, findChildrenIds, findGroupBlocks } from "./group";
+import { findAllChildrenButGroup, findAllChildrenIds, findChildrenIds, findGroupBlocks, getBlockType } from "./group";
 import GroupItem from "../GridItem/GroupItem";
 var layoutClassName = "react-grid-layout";
 var ReactGridLayout = function (_a) {
@@ -48,7 +48,7 @@ var ReactGridLayout = function (_a) {
         w: 1,
     } : _w, // TODO fix
     _x = props.resizeHandles, // TODO fix
-    resizeHandles = _x === void 0 ? ["se"] : _x, _y = props.width, width = _y === void 0 ? 0 : _y, resizeHandle = props.resizeHandle, _z = props.isHiddenVisibility, isHiddenVisibility = _z === void 0 ? true : _z, innerRef = props.innerRef, minNbRow = props.minNbRow, customColWidth = props.customColWidth, blockStructure = props.blockStructure, onDoubleClickGroup = props.onDoubleClickGroup, _0 = props.selectedGroupBlock, selectedGroupBlock = _0 === void 0 ? '1' : _0, onClickGroup = props.onClickGroup;
+    resizeHandles = _x === void 0 ? ["se"] : _x, _y = props.width, width = _y === void 0 ? 0 : _y, resizeHandle = props.resizeHandle, _z = props.isHiddenVisibility, isHiddenVisibility = _z === void 0 ? true : _z, innerRef = props.innerRef, minNbRow = props.minNbRow, customColWidth = props.customColWidth, blockStructure = props.blockStructure, onDoubleClickGroup = props.onDoubleClickGroup, _0 = props.selectedGroupBlock, selectedGroupBlock = _0 === void 0 ? '1' : _0, onClickGroup = props.onClickGroup, bulkIds = props.bulkIds;
     var _1 = useState(), activeDrag = _1[0], setActiveDrag = _1[1];
     var _2 = useState(), oldDragItem = _2[0], setOldDragItem = _2[1];
     var _3 = useState(), oldLayout = _3[0], setOldLayout = _3[1];
@@ -490,7 +490,8 @@ var ReactGridLayout = function (_a) {
         var bounded = draggable && isBounded && l.isBounded !== false;
         var editable = editableItems.includes(l.i);
         var z = l.z || 0;
-        return (_jsx(GridItem, { className: editable ? 'editable-grid-item' : 'not-editable-grid-item', isDraggable: editable, isResizable: editable, containerWidth: width, cols: cols, margin: margin, containerPadding: containerPadding || margin, maxRows: maxRows, rowHeight: rowHeight, cancel: draggableCancel, handle: draggableHandle, onDragStop: onDragStopHandler, onDragStart: onDragStartHandler, onDrag: onDragHandler, onResizeStart: onResizeStartHandler, onResize: onResizeHandler, onResizeStop: onResizeStopHandler, onFitToContent: onFitToContentHandler, isBounded: bounded, useCSSTransforms: useCSSTransforms && isMounted, usePercentages: !isMounted, transformScale: transformScale, w: l.w, h: l.h, x: l.x, y: l.y, z: editable ? 100009 + z : z, i: l.i, minH: l.minH, minW: l.minW, maxH: l.maxH, maxW: l.maxW, static: l.static, droppingPosition: isDroppingItem ? droppingPosition : undefined, resizeHandles: resizeHandlesOptions, resizeHandle: resizeHandle, isHiddenVisibility: isHiddenVisibility, customColWidth: colWidth, autoResize: !!l.autoResize, children: child }, l.i));
+        var isInBulk = bulkIds === null || bulkIds === void 0 ? void 0 : bulkIds.includes(l.i);
+        return (_jsx(GridItem, { className: editable ? 'editable-grid-item' : isInBulk ? 'bulk-grid-item' : 'not-editable-grid-item', isDraggable: editable, isResizable: editable, containerWidth: width, cols: cols, margin: margin, containerPadding: containerPadding || margin, maxRows: maxRows, rowHeight: rowHeight, cancel: draggableCancel, handle: draggableHandle, onDragStop: onDragStopHandler, onDragStart: onDragStartHandler, onDrag: onDragHandler, onResizeStart: onResizeStartHandler, onResize: onResizeHandler, onResizeStop: onResizeStopHandler, onFitToContent: onFitToContentHandler, isBounded: bounded, useCSSTransforms: useCSSTransforms && isMounted, usePercentages: !isMounted, transformScale: transformScale, w: l.w, h: l.h, x: l.x, y: l.y, z: editable ? 1000 + z : z, i: l.i, minH: l.minH, minW: l.minW, maxH: l.maxH, maxW: l.maxW, static: l.static, droppingPosition: isDroppingItem ? droppingPosition : undefined, resizeHandles: resizeHandlesOptions, resizeHandle: resizeHandle, isHiddenVisibility: isHiddenVisibility, customColWidth: colWidth, autoResize: !!l.autoResize, children: child }, l.i));
     };
     var onDragOverHandler = function (e) {
         var _a;
@@ -578,6 +579,27 @@ var ReactGridLayout = function (_a) {
             return _jsx(_Fragment, {});
         }
         var isEditingGroup = block.id === selectedGroupBlock;
+        var type = getBlockType(block.id);
+        var z = (function () {
+            if (isEditingGroup && type === 'GROUP') {
+                return 1000 + groupItem.z;
+            }
+            if (type === 'GROUP') {
+                return 1000;
+            }
+            if (type === 'BULK') {
+                return 9999;
+            }
+            return 1000;
+        })();
+        var handleClick = function (id) {
+            onClickGroup && onClickGroup(id);
+        };
+        var handleDoubleClick = function (id) {
+            if (type === 'GROUP') {
+                onDoubleClickGroup && onDoubleClickGroup(id);
+            }
+        };
         return (
         // <OutsideClickHandler  onOutsideClick={() => {
         //   if (isEditingGroup) {
@@ -588,7 +610,7 @@ var ReactGridLayout = function (_a) {
         //    }
         //   }
         // }}>
-        _jsx(GroupItem, { className: isEditingGroup ? 'group editing' : 'group', onDoubleClick: onDoubleClickGroup, containerWidth: width, cols: cols, margin: margin, containerPadding: containerPadding || margin, maxRows: maxRows, rowHeight: rowHeight, cancel: draggableCancel, handle: draggableHandle, onDragStop: onDragStopHandler, onDragStart: onDragStartHandler, onDrag: onDragHandler, onResizeStart: onResizeStartHandler, onResize: onResizeHandler, onResizeStop: onResizeStopHandler, onFitToContent: onFitToContentHandler, isDraggable: !viewOnly || !isEditingGroup, isResizable: !viewOnly || !isEditingGroup, isBounded: true, useCSSTransforms: useCSSTransforms && isMounted, usePercentages: !isMounted, transformScale: transformScale, w: groupItem.w, h: groupItem.h, x: groupItem.x, y: groupItem.y, z: (isEditingGroup) ? 100009 : 100009 + groupItem.z, i: block.id.toString(), 
+        _jsx(GroupItem, { className: isEditingGroup ? 'group editing' : type.toLocaleLowerCase(), onClick: handleClick, onDoubleClick: handleDoubleClick, containerWidth: width, cols: cols, margin: margin, containerPadding: containerPadding || margin, maxRows: maxRows, rowHeight: rowHeight, cancel: draggableCancel, handle: draggableHandle, onDragStop: onDragStopHandler, onDragStart: onDragStartHandler, onDrag: onDragHandler, onResizeStart: onResizeStartHandler, onResize: onResizeHandler, onResizeStop: onResizeStopHandler, onFitToContent: onFitToContentHandler, isDraggable: !viewOnly || !isEditingGroup, isResizable: !viewOnly || !isEditingGroup, isBounded: true, useCSSTransforms: useCSSTransforms && isMounted, usePercentages: !isMounted, transformScale: transformScale, w: groupItem.w, h: groupItem.h, x: groupItem.x, y: groupItem.y, z: z, i: block.id.toString(), 
             // minH={l.minH}
             // minW={l.minW}
             // maxH={l.maxH}
@@ -597,12 +619,14 @@ var ReactGridLayout = function (_a) {
             // droppingPosition={isDroppingItem ? droppingPosition : undefined}
             // resizeHandles={resizeHandlesOptions}
             // resizeHandle={resizeHandle}
-            isHiddenVisibility: isHiddenVisibility, customColWidth: colWidth, autoResize: false, children: _jsx("div", { onClick: function () { onClickGroup && onClickGroup(block.id); } }) }, block.id)
+            isHiddenVisibility: isHiddenVisibility, customColWidth: colWidth, autoResize: false, children: _jsx("div", {}) }, block.id)
         // </OutsideClickHandler>
         );
     };
     var currentGroupBlocks = blockStructure ? findGroupBlocks(blockStructure, selectedGroupBlock) : [];
     // const groupsParentsGroups = findAllParentGroups(blockStructure, selectedGroup);
+    console.log('bs', blockStructure);
+    console.log('current', currentGroupBlocks);
     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, 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" }), activeDrag && (_jsx("div", { className: "grid-placeholder", style: {
                     marginTop: margin[1] + "px",
                     marginBottom: margin[1] + "px",

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

@@ -13,4 +13,5 @@ export declare const findAllComponentBlockIds: (blockStructure: Block[]) => stri
 export declare const findParentGroupByGroupId: (blockStructure: Block[], targetId: string) => string | null;
 export declare const addBlockToRoot: (blockStructure: Block[], newBlock: Block) => Block[];
 export declare const addBulkToTarget: (blockStructure: Block[], targetId: string, bulkIds: string[]) => Block[];
+export declare const getBlockType: (id: string) => 'GROUP' | 'BULK' | 'COMPONENT_BLOCK' | 'UNKNOWN';
 export declare const blockStructure: Block[];

package/dist/lib/GridLayoutEditor/group.js

@@ -92,11 +92,11 @@ export var findGroupBlocks = function (blockStructure, targetId) {
     var targetBlock = findBlockById(blockStructure, targetId);
     var groupBlocks = [];
     if (targetBlock) {
-        if (targetBlock.name === 'GroupBlock') {
+        if (targetBlock.name === 'GroupBlock' || targetBlock.name === 'BulkBlock') {
             groupBlocks.push(targetBlock);
         }
         if (targetBlock.children) {
-            groupBlocks.push.apply(groupBlocks, targetBlock.children.filter(function (child) { return child.name === 'GroupBlock'; }));
+            groupBlocks.push.apply(groupBlocks, targetBlock.children.filter(function (child) { return child.name === 'GroupBlock' || child.name === 'BulkBlock'; }));
         }
     }
     return groupBlocks;
@@ -149,7 +149,7 @@ export var addBulkToTarget = function (blockStructure, targetId, bulkIds) {
     var structure = deepClone(blockStructure);
     var targetBlock = findBlockById(structure, targetId);
     if (!targetBlock || !targetBlock.children) {
-        throw new Error("Target block with id ".concat(targetId, " not found or has no children."));
+        return blockStructure;
     }
     var bulkBlocks = targetBlock.children.filter(function (child) { return bulkIds.includes(child.id); });
     if (bulkBlocks.length !== bulkIds.length) {
@@ -159,14 +159,26 @@ export var addBulkToTarget = function (blockStructure, targetId, bulkIds) {
     targetBlock.children = targetBlock.children.filter(function (child) { return !bulkIds.includes(child.id); });
     // Create the new bulkBlock
     var bulkBlock = {
-        id: "bulk",
-        name: 'GroupBlock',
+        id: "BULK",
+        name: 'BulkBlock',
         children: bulkBlocks,
     };
     // Add the bulkBlock to the target's children
     targetBlock.children.push(bulkBlock);
     return structure;
 };
+export var getBlockType = function (id) {
+    if (id.startsWith('GB_')) {
+        return 'GROUP';
+    }
+    else if (id.startsWith('CB_')) {
+        return 'COMPONENT_BLOCK';
+    }
+    else if (id === 'BULK') {
+        return 'BULK';
+    }
+    return 'UNKNOWN'; // 잘못된 ID 형식의 경우
+};
 // 사용 예시:
 export var blockStructure = [
     {
@@ -174,43 +186,43 @@ export var blockStructure = [
         name: 'RootBlock',
         children: [
             {
-                id: '2',
+                id: 'GB_2',
                 name: 'GroupBlock',
                 children: [
                     {
-                        id: '3',
+                        id: 'GB_3',
                         name: 'GroupBlock',
                         children: [
                             {
-                                id: '4',
+                                id: 'CB_4',
                                 name: 'ComponentBlock'
                             },
                             {
-                                id: '5',
+                                id: 'CB_5',
                                 name: 'ComponentBlock'
                             },
                             {
-                                id: '6',
+                                id: 'GB_6',
                                 name: 'GroupBlock',
                                 children: [
                                     {
-                                        id: '7',
+                                        id: 'CB_7',
                                         name: 'ComponentBlock'
                                     },
                                     {
-                                        id: '8',
+                                        id: 'CB_8',
                                         name: 'ComponentBlock'
                                     },
                                     {
-                                        id: '9',
+                                        id: 'GB_9',
                                         name: 'GroupBlock',
                                         children: [
                                             {
-                                                id: '10',
+                                                id: 'CB_10',
                                                 name: 'ComponentBlock'
                                             },
                                             {
-                                                id: '11',
+                                                id: 'CB_11',
                                                 name: 'ComponentBlock'
                                             }
                                         ]
@@ -220,31 +232,31 @@ export var blockStructure = [
                         ]
                     },
                     {
-                        id: '12',
+                        id: 'GB_12',
                         name: 'GroupBlock',
                         children: [
                             {
-                                id: '13',
+                                id: 'CB_13',
                                 name: 'ComponentBlock'
                             },
                             {
-                                id: '14',
+                                id: 'CB_14',
                                 name: 'ComponentBlock'
                             }
                         ]
                     },
                     {
-                        id: '15',
+                        id: 'CB_15',
                         name: 'ComponentBlock'
                     },
                     {
-                        id: '16',
+                        id: 'CB_16',
                         name: 'ComponentBlock'
                     }
                 ]
             },
             {
-                id: '17',
+                id: 'GB_17',
                 name: 'GroupBlock',
                 children: [
                     // {
@@ -262,17 +274,17 @@ export var blockStructure = [
                     //   ]
                     // },
                     {
-                        id: '18',
+                        id: 'CB_18',
                         name: 'ComponentBlock'
                     }
                 ]
             },
             {
-                id: '19',
+                id: 'CB_19',
                 name: 'ComponentBlock'
             },
             {
-                id: '20',
+                id: 'CB_20',
                 name: 'ComponentBlock'
             }
         ]

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

@@ -77,6 +77,7 @@ export type ReactGridLayoutProps = {
     onDoubleClickGroup?: (id: string) => void;
     selectedGroupBlock?: string;
     onClickGroup?: (id: string) => void;
+    bulkIds?: string[];
 };
 export type DragOverEvent = MouseEvent & {
     nativeEvent: {

package/package.json

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