publ-echo 0.0.103 → 0.0.105

package/dist/lib/GridLayoutEditor/group.js

@@ -0,0 +1,340 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+export var zIndexMap = {
+    ISDRAGGING: 999999,
+    BULK: 20000,
+    EDITING_GROUP_CHILD: 10000,
+    EDITING_GROUP: 9000,
+    GROUP: 5000,
+    CB: 0,
+    ROOT: 0, //?
+};
+export function getBlockSpecificType(block) {
+    if (block.blockId === 'ROOT') {
+        return 'ROOT';
+    }
+    if (block.blockId === 'BULK') {
+        return 'BULK';
+    }
+    return block.type;
+}
+var deepClone = function (blocks) { return JSON.parse(JSON.stringify(blocks)); };
+var collectChildrenCbIds = function (block, depth) {
+    var ids = [];
+    if ('children' in block && block.children) {
+        for (var _i = 0, _a = block.children; _i < _a.length; _i++) {
+            var child = _a[_i];
+            if (child.type === 'COMPONENT_BLOCK') {
+                ids.push(child.componentBlockId);
+            }
+            if (depth === 'deep' && child.type === 'GROUP_BLOCK') {
+                ids = ids.concat(collectChildrenCbIds(child, depth));
+            }
+        }
+    }
+    return ids;
+};
+var collectChildrenBlockIds = function (block, depth) {
+    var ids = [];
+    if ('children' in block && block.children) {
+        for (var _i = 0, _a = block.children; _i < _a.length; _i++) {
+            var child = _a[_i];
+            ids.push(child.blockId);
+            if (depth === 'deep') {
+                ids = ids.concat(collectChildrenBlockIds(child, depth));
+            }
+        }
+    }
+    return ids;
+};
+export var findBlockByBlockId = function (block, blockId) {
+    if (block.type !== 'GROUP_BLOCK' || block.children.length === 0) {
+        return null;
+    }
+    if (block.blockId === 'ROOT' && blockId === 'ROOT') {
+        return block;
+    }
+    for (var _i = 0, _a = block.children; _i < _a.length; _i++) {
+        var child = _a[_i];
+        if (child.blockId === blockId) {
+            return child;
+        }
+        if (child.type === 'GROUP_BLOCK' && child.children) {
+            var found = findBlockByBlockId(child, blockId);
+            if (found) {
+                return found;
+            }
+        }
+    }
+    return null;
+};
+export var findDirectChildrenCbIds = function (block, targetId) {
+    var targetBlock = findBlockByBlockId(block, targetId);
+    if (!targetBlock || targetBlock.type !== 'GROUP_BLOCK') {
+        return [];
+    }
+    return collectChildrenCbIds(targetBlock, 'current');
+};
+export var findAllChildrenCbIds = function (block, targetId) {
+    var targetBlock = findBlockByBlockId(block, targetId);
+    if (!targetBlock || targetBlock.type !== 'GROUP_BLOCK') {
+        return [];
+    }
+    return collectChildrenCbIds(targetBlock, 'deep');
+};
+export var findAllChildrenBlockIds = function (block, targetId) {
+    var targetBlock = findBlockByBlockId(block, targetId);
+    if (!targetBlock || targetBlock.type !== 'GROUP_BLOCK') {
+        return [];
+    }
+    return collectChildrenBlockIds(targetBlock, 'deep');
+};
+export var findDirectChildrenBlockIds = function (block, targetId) {
+    var targetBlock = findBlockByBlockId(block, targetId);
+    if (!targetBlock || targetBlock.type !== 'GROUP_BLOCK') {
+        return [];
+    }
+    return collectChildrenBlockIds(targetBlock, 'current');
+};
+// NOTE: 타겟과 하위 모두.
+export var findGroupBlocks = function (block, targetId) {
+    var targetBlock = findBlockByBlockId(block, targetId);
+    if (!targetBlock) {
+        return [];
+    }
+    if (targetBlock.type !== 'GROUP_BLOCK') {
+        return [];
+    }
+    var groupBlocks = targetBlock.children.filter(function (child) { return child.type === 'GROUP_BLOCK'; });
+    var bulkInTarget = targetBlock.children.find(function (block) { return block.blockId === 'BULK'; });
+    if (bulkInTarget && bulkInTarget.type === 'GROUP_BLOCK') {
+        var groupInBulk = bulkInTarget.children.filter(function (child) { return child.type === 'GROUP_BLOCK'; });
+        if (targetBlock.blockId === 'ROOT') {
+            return groupBlocks.concat(groupInBulk);
+        }
+        if (groupInBulk && groupInBulk.length > 0) {
+            return [targetBlock].concat(groupBlocks).concat(groupInBulk);
+        }
+    }
+    if (targetBlock.blockId === 'ROOT') {
+        return groupBlocks;
+    }
+    return [targetBlock].concat(groupBlocks);
+};
+// export const findAllComponentBlockIds = (blockStructure: Block[]): number[] => {
+//   const collectComponentBlockIds = (blocks: Block[]): number[] => {
+//     let ids: number[] = [];
+//     for (const block of blocks) {
+//       if (block.type === 'COMPONENT_BLOCK') {
+//         ids.push(block.componentBlockId);
+//       }
+//       if ('children' in block && block.children) {
+//         ids = ids.concat(collectComponentBlockIds(block.children));
+//       }
+//     }
+//     return ids;
+//   };
+//   return collectComponentBlockIds(blockStructure);
+// };
+// export const findParentGroupByGroupId = (blockStructure: Block[], targetId: string): string | null => {
+//   const findParentGroup = (
+//     blocks: Block[],
+//     id: string,
+//     parent: GroupBlock | null = null
+//   ): string | null => {
+//     for (const block of blocks) {
+//       if (block.blockId === id && block.type === 'GROUP_BLOCK') {
+//         return parent ? parent.blockId : null;
+//       }
+//       if ('children' in block && block.children) {
+//         const result = findParentGroup(block.children, id, block.type === 'GROUP_BLOCK' ? block : parent);
+//         if (result) {
+//           return result;
+//         }
+//       }
+//     }
+//     return null;
+//   };
+//   return findParentGroup(blockStructure, targetId);
+// };
+// export const addBlockToRoot = (block: RootBlock, newBlock: Block): Block[] => {
+//   return block.map(block => {
+//     if (block.blockId === 'ROOT' && block.type === 'GROUP_BLOCK') {
+//       return {
+//         ...block,
+//         children: block.children ? [...block.children, newBlock] : [newBlock]
+//       };
+//     }
+//     return block;
+//   });
+// };
+export var addBulkToTarget = function (block, targetId, bulkBlockIds) {
+    var blockCopy = deepClone(block);
+    var targetBlock = findBlockByBlockId(blockCopy, targetId);
+    if (!targetBlock ||
+        targetBlock.type !== 'GROUP_BLOCK' ||
+        !targetBlock.children) {
+        return block;
+    }
+    var bulkBlocks = targetBlock.children.filter(function (child) {
+        if (child.type === 'COMPONENT_BLOCK' &&
+            bulkBlockIds.includes(child.blockId.toString())) {
+            return true;
+        }
+        if (child.type === 'GROUP_BLOCK' && bulkBlockIds.includes(child.blockId)) {
+            return true;
+        }
+        return false;
+    });
+    if (bulkBlocks.length !== bulkBlockIds.length) {
+        return block;
+    }
+    if (bulkBlocks.length === 0) {
+        return block;
+    }
+    // Remove bulk blocks from target's children
+    targetBlock.children = targetBlock.children.filter(function (child) { return !bulkBlockIds.includes(child.blockId); });
+    var zOrdersDesktop = bulkBlocks
+        .map(function (block) { return block.zOrderDesktopInternal; })
+        .filter(function (each) { return each !== null; });
+    var zOrdersMobile = bulkBlocks
+        .map(function (block) { return block.zOrderMobileInternal; })
+        .filter(function (each) { return each !== null; });
+    var zOrderDesktopInternal = Math.max.apply(Math, zOrdersDesktop);
+    var zOrderMobileInternal = Math.max.apply(Math, zOrdersMobile);
+    // Create the new bulkBlock
+    var bulkBlock = {
+        blockId: 'BULK',
+        type: 'GROUP_BLOCK',
+        zOrderDesktopInternal: zOrderDesktopInternal,
+        zOrderMobileInternal: zOrderMobileInternal,
+        children: bulkBlocks,
+    };
+    // Add the bulkBlock to the target's children
+    targetBlock.children.push(bulkBlock);
+    return blockCopy;
+};
+function findPathHelper(current, targetBlockId) {
+    if (current.blockId === targetBlockId) {
+        return [current.blockId];
+    }
+    if ('children' in current && Array.isArray(current.children)) {
+        for (var _i = 0, _a = current.children; _i < _a.length; _i++) {
+            var child = _a[_i];
+            var result = findPathHelper(child, targetBlockId);
+            if (result !== null) {
+                return __spreadArray([current.blockId], result, true);
+            }
+        }
+    }
+    return null;
+}
+export function getBlockWorkDirPath(blockStructure, targetBlockId) {
+    var path = findPathHelper(blockStructure, targetBlockId);
+    return path ? '/' + path.join('/') : '';
+}
+export function formatBlockIdToCbId(blockId) {
+    var match = blockId.match(/^CB_(\d+)$/);
+    return match ? parseInt(match[1], 10) : null;
+}
+export function formatCbIdToBlockId(cbId) {
+    return "CB_".concat(cbId);
+}
+// export const findAccessibleChildrenBlocks = (
+//   block: Block,
+//   targetGroupId: string,
+//   blockIds: string[]
+// ): string[] => {
+//   const targetBlock = findBlockByBlockId(block, targetGroupId);
+//   if (!targetBlock || !('children' in targetBlock) || !targetBlock.children) {
+//     return [];
+//   }
+//   const result = new Set<string>();
+//   const traverse = (block: Block, rootId: string): boolean => {
+//     if ('children' in block && block.children) {
+//       for (const child of block.children) {
+//         if (blockIds.includes(child.blockId)) {
+//           result.add(rootId);
+//           return true; // Stop traversal for this branch
+//         }
+//         if (traverse(child, rootId)) {
+//           result.add(rootId);
+//           return true; // Stop traversal for this branch
+//         }
+//       }
+//     }
+//     return false;
+//   };
+//   for (const child of targetBlock.children) {
+//     if (blockIds.includes(child.blockId)) {
+//       result.add(child.blockId);
+//     } else {
+//       traverse(child, child.blockId);
+//     }
+//   }
+//   return Array.from(result);
+// };
+export function findParentGroupBlock(current, targetBlockId) {
+    // 현재 블록이 그룹(또는 루트) 블록이고, 자식이 있다면 탐색합니다.
+    if ('children' in current && Array.isArray(current.children)) {
+        for (var _i = 0, _a = current.children; _i < _a.length; _i++) {
+            var child = _a[_i];
+            // 자식 중에 targetBlockId를 가진 블록이 있다면,
+            if (child.blockId === targetBlockId) {
+                // 현재 블록이 ROOT라면 부모가 ROOT이므로 null 반환
+                if (current.blockId === 'ROOT') {
+                    return null;
+                }
+                // 그렇지 않다면 현재 블록이 부모 그룹 블록이므로 반환
+                if (current.type === 'GROUP_BLOCK') {
+                    return current;
+                }
+            }
+            // 만약 자식이 그룹 블록이라면 재귀적으로 탐색
+            if (child.type === 'GROUP_BLOCK') {
+                var found = findParentGroupBlock(child, targetBlockId);
+                if (found !== null) {
+                    return found;
+                }
+            }
+        }
+    }
+    // 찾지 못하면 null 반환
+    return null;
+}
+export function findOneComponentBlock(current, targetBlockId) {
+    var targetBlock = findBlockByBlockId(current, targetBlockId);
+    if (!targetBlock) {
+        console.error('Target block not found');
+        return null;
+    }
+    if (targetBlock.type !== 'GROUP_BLOCK') {
+        console.error('Target block is not a group block');
+        return null;
+    }
+    // 직속 하위에서 먼저 찾기
+    for (var _i = 0, _a = targetBlock.children; _i < _a.length; _i++) {
+        var child = _a[_i];
+        if (child.type === 'COMPONENT_BLOCK') {
+            return child.componentBlockId;
+        }
+    }
+    // 직속 하위에 없다면 재귀적으로 찾기
+    for (var _b = 0, _c = targetBlock.children; _b < _c.length; _b++) {
+        var child = _c[_b];
+        if (child.type === 'GROUP_BLOCK') {
+            var found = findOneComponentBlock(child, child.blockId);
+            if (found !== null) {
+                return found;
+            }
+        }
+    }
+    return null;
+}

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

@@ -1,7 +1,8 @@
-import { DragEvent, ReactElement, RefObject } from "react";
-import { ResizeHandleAxis, ResizeHandleType } from "../Resizable/types";
-import { ResizeEventType } from "../GridItem/types";
-export type CompactType = "vertical" | "horizontal";
+import { DragEvent, ReactElement, RefObject } from 'react';
+import { ResizeHandleAxis, ResizeHandleType } from '../Resizable/types';
+import { ResizeEventType } from '../GridItem/types';
+import { Block } from './group';
+export type CompactType = 'vertical' | 'horizontal';
 export type LayoutItem = {
     w: number;
     h: number;
@@ -28,7 +29,13 @@ export type DroppedEvent = {
     item?: LayoutItem;
     event?: DragEvent<HTMLDivElement>;
 };
+export type UpdatedItem = {
+    id: string;
+    x: number;
+    y: number;
+};
 export type ReactGridLayoutProps = {
+    sectionId: string;
     children: ReactElement<any> | ReactElement[];
     className?: string;
     style?: Object;
@@ -59,6 +66,7 @@ export type ReactGridLayoutProps = {
     onDrag?: EventCallback;
     onDragStart?: EventCallback;
     onDragStop?: EventCallback;
+    onDragStopForGroup?: EventCallbackForGroup;
     onResize?: EventCallback;
     onResizeStart?: EventCallback;
     onResizeStop?: EventCallback;
@@ -72,6 +80,14 @@ export type ReactGridLayoutProps = {
     minNbRow?: number;
     customColWidth?: number;
     onFitToContent?: OnFitContentCallBack;
+    blockStructure?: Block;
+    onDoubleClickGroup?: (e: React.MouseEvent, id: string, type: string) => void;
+    selectedGroupBlock?: 'ROOT' | string;
+    editingGroupBlock?: 'ROOT' | string;
+    onClickGroup?: (e: React.MouseEvent, id: string, type: string) => void;
+    bulkIds?: string[];
+    onDoubleClickOutsideGroup: () => void;
+    onContextGroup?: (e: React.MouseEvent, blockId: string, isEditingGroup: boolean) => void;
 };
 export type DragOverEvent = MouseEvent & {
     nativeEvent: {
@@ -96,6 +112,15 @@ export type EventCallback = (properties: {
     e?: ResizeEventType;
     node?: HTMLElement;
 }) => void;
+export type EventCallbackForGroup = (properties: {
+    layout: Layout;
+    prev?: LayoutItem;
+    item?: LayoutItem;
+    placeholder?: LayoutItem;
+    e?: ResizeEventType;
+    node?: HTMLElement;
+    updatedItems: UpdatedItem[];
+}) => void;
 export type RowHeight = number | ((width: number) => number);
 export type Position = {
     left: number;
@@ -118,7 +143,7 @@ export type ResponsiveGridLayoutStateType = {
     layout: Layout;
     layouts?: ResponsiveLayout<string>;
 };
-type CoreType = Omit<ReactGridLayoutProps, "cols" | "layout" | "margin" | "containerPadding" | "onLayoutChange" | "isHiddenVisibility">;
+type CoreType = Omit<ReactGridLayoutProps, 'cols' | 'layout' | 'margin' | 'containerPadding' | 'transformScale' | 'onLayoutChange' | 'isHiddenVisibility'>;
 export type ResponsiveGridLayoutProps = {
     breakpoint?: Breakpoint;
     breakpoints?: Breakpoints<Breakpoint>;
@@ -129,9 +154,10 @@ export type ResponsiveGridLayoutProps = {
     onBreakpointChange?: OnBreakpointChangeCallback;
     onLayoutChange?: OnLayoutChangeCallback;
     onWidthChange?: OnWidthChangeCallback;
+    zoom?: number;
 } & CoreType;
 export type Breakpoint = string;
-export type DefaultBreakpoints = "lg" | "md" | "sm" | "xs" | "xxs";
+export type DefaultBreakpoints = 'lg' | 'md' | 'sm' | 'xs' | 'xxs';
 export type ResponsiveLayout<T extends Breakpoint> = Record<T, Layout>;
 export type Breakpoints<T extends Breakpoint> = Record<T, number>;
 export type OnLayoutChangeCallback = (properties: {

package/dist/lib/GridLayoutEditor/utils/renderHelpers.d.ts

@@ -163,3 +163,11 @@ export declare function synchronizeLayoutWithChildren(initialLayout: Layout, chi
  */
 export declare function validateLayout(layout: Layout, contextName?: string): void;
 export declare const noop: (args: any) => any;
+export declare function getBoundingArea(layout: Layout, ids: string[]): {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    z: number;
+    minZ: number;
+} | null;

package/dist/lib/GridLayoutEditor/utils/renderHelpers.js

@@ -564,3 +564,44 @@ function log() {
     console.log.apply(console, args);
 }
 export var noop = function (_args) { return undefined; };
+export function getBoundingArea(layout, ids) {
+    var layoutItems = ids.map(function (id) { return getLayoutItem(layout, id); }).filter(function (item) { return item !== undefined; });
+    if (layoutItems.length === 0) {
+        return null;
+    }
+    if (layoutItems.length === 1) {
+        return {
+            x: layoutItems[0].x,
+            y: layoutItems[0].y,
+            w: layoutItems[0].w,
+            h: layoutItems[0].h,
+            z: layoutItems[0].z,
+            minZ: layoutItems[0].z,
+        };
+    }
+    var _a = layoutItems.reduce(function (acc, elem, idx, arr) {
+        var _a, _b, _c, _d;
+        if (idx === arr.length - 1) {
+            return acc;
+        }
+        var elem1 = idx === 0 ? elem : acc;
+        var elem2 = arr[idx + 1];
+        var minX = Math.min(elem1.x, elem2.x);
+        var minY = Math.min(elem1.y, elem2.y);
+        var elem1W = elem1.x - minX + elem1.w;
+        var elem2W = elem2.x - minX + elem2.w;
+        var elem1H = elem1.y - minY + elem1.h;
+        var elem2H = elem2.y - minY + elem2.h;
+        var maxZ = Math.max((_a = elem1 === null || elem1 === void 0 ? void 0 : elem1.z) !== null && _a !== void 0 ? _a : 0, (_b = elem2 === null || elem2 === void 0 ? void 0 : elem2.z) !== null && _b !== void 0 ? _b : 0);
+        var minZ = Math.min((_c = elem1 === null || elem1 === void 0 ? void 0 : elem1.z) !== null && _c !== void 0 ? _c : 0, (_d = elem2 === null || elem2 === void 0 ? void 0 : elem2.z) !== null && _d !== void 0 ? _d : 0);
+        return {
+            x: Math.min(elem1.x, elem2.x),
+            y: Math.min(elem1.y, elem2.y),
+            w: Math.max(elem1W, elem2W),
+            h: Math.max(elem1H, elem2H),
+            z: maxZ,
+            minZ: minZ,
+        };
+    }, { x: 0, y: 0, w: 0, h: 0, z: 0, minZ: 0 }), minX = _a.x, minY = _a.y, maxW = _a.w, maxH = _a.h, maxZ = _a.z, minZ = _a.minZ;
+    return { x: minX, y: minY, w: maxW, h: maxH, z: maxZ, minZ: minZ };
+}

package/dist/lib/Resizable/Resizable.js

@@ -34,6 +34,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useEffect, useRef } from "react";
 import { cloneElement } from "./utils/cloneElement";
 import { DraggableCore } from "../Draggable";
+import classNames from "../../external-lib/classnames";
 var Resizable = function (_a) {
     var children = _a.children, _b = _a.axis, axis = _b === void 0 ? "both" : _b, _c = _a.handleSize, handleSize = _c === void 0 ? [20, 20] : _c, _d = _a.lockAspectRatio, lockAspectRatio = _d === void 0 ? false : _d, _e = _a.minConstraints, minConstraints = _e === void 0 ? [20, 20] : _e, _f = _a.maxConstraints, maxConstraints = _f === void 0 ? [Infinity, Infinity] : _f, _g = _a.resizeHandles, resizeHandles = _g === void 0 ? ["se"] : _g, _h = _a.transformScale, transformScale = _h === void 0 ? 1 : _h, isResizing = _a.isResizing, autoResize = _a.autoResize, colWidth = _a.colWidth, margin = _a.margin, props = __rest(_a, ["children", "axis", "handleSize", "lockAspectRatio", "minConstraints", "maxConstraints", "resizeHandles", "transformScale", "isResizing", "autoResize", "colWidth", "margin"]);
     var handleRefs = useRef({
@@ -119,8 +120,6 @@ var Resizable = function (_a) {
                 width = height * ratio;
             }
         }
-        console.log('w: ', width);
-        console.log('minW: ', minWidth.current);
         var _b = [width, height], oldW = _b[0], oldH = _b[1];
         var _c = (_a = slack.current) !== null && _a !== void 0 ? _a : [0, 0], slackW = _c[0], slackH = _c[1];
         width += slackW;
@@ -269,7 +268,7 @@ var Resizable = function (_a) {
         var props = __assign({ ref: ref }, (isDOMElement ? {} : { handleAxis: handleAxis }));
         return React.cloneElement(handle, props);
     };
-    return cloneElement(children, __assign(__assign({}, restProps), { className: "".concat(className ? "".concat(className, " ") : "", "react-resizable"), children: __spreadArray([
+    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) {

package/dist/lib/utils/classNames.d.ts

@@ -0,0 +1,3 @@
+type ClassValue = string | number | boolean | null | undefined;
+declare function clsx(...classes: ClassValue[]): string;
+export default clsx;

package/dist/lib/utils/classNames.js

@@ -0,0 +1,10 @@
+function clsx() {
+    var classes = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        classes[_i] = arguments[_i];
+    }
+    return classes
+        .filter(function (cls) { return Boolean(cls); })
+        .join(" ");
+}
+export default clsx;

package/package.json

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