publ-echo-test 0.0.61 → 0.0.62

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -395,6 +395,7 @@ var GridItem = function (_a) {
395
395
  isResizing: Boolean(resizing) && Boolean(isResizing) && Boolean(isHiddenVisibility),
396
396
  resizing: Boolean(resizing),
397
397
  "react-draggable": isDraggable,
398
+ "editable-grid-item": isResizable && isDraggable,
398
399
  isDragging: Boolean(isDragging) && Boolean(dragging) && Boolean(isHiddenVisibility),
399
400
  "react-draggable-dragging": Boolean(dragging),
400
401
  // dropping: Boolean(droppingPosition),
@@ -385,8 +385,8 @@ var GroupItem = function (_a) {
385
385
  var newChild = React.cloneElement(child, {
386
386
  key: i,
387
387
  ref: elementRef,
388
- 'data-grid-id': i,
389
- className: classNames("react-group-item", child.props.className, className, {
388
+ 'data-group-block-id': i,
389
+ className: classNames("react-group-block", child.props.className, className, {
390
390
  static: props.static,
391
391
  isResizing: Boolean(resizing) && Boolean(isResizing) && Boolean(isHiddenVisibility),
392
392
  resizing: Boolean(resizing),
@@ -37,7 +37,7 @@ import { bottom, cloneLayoutItem, compact, getAllCollisions, getBoundingArea, ge
37
37
  import { calcGridColWidth, calcXY, resolveRowHeight, } from "../GridItem/utils/calculateUtils";
38
38
  import GridItem from "../GridItem/GridItem";
39
39
  import isEqual from "../../external-lib/lodash.isEqual";
40
- import { findAllChildrenButGroup, findAllChildrenIds, findChildrenIds, findGroupBlocks, getBlockType } from "./group";
40
+ import { findAllChildrenButGroup, findAllChildrenIds, findChildrenIds, findGroupBlocks, getBlockSpecificType, zIndexMap } from "./group";
41
41
  import GroupItem from "../GridItem/GroupItem";
42
42
  import OutsideClickHandler from "../GridItem/OutsideClickHandler";
43
43
  var layoutClassName = "react-grid-layout";
@@ -49,20 +49,20 @@ var ReactGridLayout = function (_a) {
49
49
  w: 1,
50
50
  } : _w, // TODO fix
51
51
  _x = props.resizeHandles, // TODO fix
52
- 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.editingGroupBlock, editingGroupBlock = _0 === void 0 ? '1' : _0, onClickGroup = props.onClickGroup, bulkIds = props.bulkIds, onDoubleClickOutsideGroup = props.onDoubleClickOutsideGroup, selectedGroupBlock = props.selectedGroupBlock;
53
- var _1 = useState(), activeDrag = _1[0], setActiveDrag = _1[1];
54
- var _2 = useState(), oldDragItem = _2[0], setOldDragItem = _2[1];
55
- var _3 = useState(), oldLayout = _3[0], setOldLayout = _3[1];
56
- var _4 = useState(), oldResizeItem = _4[0], setOldResizeItem = _4[1];
57
- var _5 = useState(), droppingDOMNode = _5[0], setDroppingDOMNode = _5[1];
58
- var _6 = useState(), droppingPosition = _6[0], setDroppingPosition = _6[1];
59
- var _7 = useState(false), isMounted = _7[0], setIsMounted = _7[1];
52
+ 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.editingGroupBlock, editingGroupBlock = _0 === void 0 ? 'ROOT' : _0, _1 = props.selectedGroupBlock, selectedGroupBlock = _1 === void 0 ? 'ROOT' : _1, onClickGroup = props.onClickGroup, bulkIds = props.bulkIds, onDoubleClickOutsideGroup = props.onDoubleClickOutsideGroup;
53
+ var _2 = useState(), activeDrag = _2[0], setActiveDrag = _2[1];
54
+ var _3 = useState(), oldDragItem = _3[0], setOldDragItem = _3[1];
55
+ var _4 = useState(), oldLayout = _4[0], setOldLayout = _4[1];
56
+ var _5 = useState(), oldResizeItem = _5[0], setOldResizeItem = _5[1];
57
+ var _6 = useState(), droppingDOMNode = _6[0], setDroppingDOMNode = _6[1];
58
+ var _7 = useState(), droppingPosition = _7[0], setDroppingPosition = _7[1];
59
+ var _8 = useState(false), isMounted = _8[0], setIsMounted = _8[1];
60
60
  // const [selectedGroup, setSelectedGroup] = useState<string>('1');
61
61
  var editableItems = blockStructure ? findChildrenIds(blockStructure, editingGroupBlock) : [];
62
- var _8 = useState([]), oldGroupChildren = _8[0], setOldGroupChildren = _8[1];
63
- var _9 = useState(function () {
62
+ var _9 = useState([]), oldGroupChildren = _9[0], setOldGroupChildren = _9[1];
63
+ var _10 = useState(function () {
64
64
  return synchronizeLayoutWithChildren(props.layout || [], children, cols, compactType, allowOverlap);
65
- }), layout = _9[0], setLayout = _9[1];
65
+ }), layout = _10[0], setLayout = _10[1];
66
66
  var dragEnterCounter = useRef(0);
67
67
  useLayoutEffect(function () {
68
68
  setIsMounted(true);
@@ -202,7 +202,6 @@ var ReactGridLayout = function (_a) {
202
202
  var _b;
203
203
  var e = _a.e, node = _a.node;
204
204
  var l = (_b = getLayoutItem(layout, i)) !== null && _b !== void 0 ? _b : { i: i, x: x, y: y, w: 10, h: 10 };
205
- console.log(y);
206
205
  if (!l)
207
206
  return;
208
207
  if (!oldDragItem) {
@@ -493,7 +492,25 @@ var ReactGridLayout = function (_a) {
493
492
  var editable = editableItems.includes(l.i);
494
493
  var z = l.z || 0;
495
494
  var isInBulk = bulkIds === null || bulkIds === void 0 ? void 0 : bulkIds.includes(l.i);
496
- 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));
495
+ var isRoot = editingGroupBlock === 'ROOT';
496
+ var baseZ = function () {
497
+ if (!isRoot && editable) {
498
+ return zIndexMap.EDITING_GROUP;
499
+ }
500
+ if (isRoot && editable) {
501
+ return zIndexMap.ROOT;
502
+ }
503
+ if (!editable) {
504
+ return 0;
505
+ }
506
+ return 0;
507
+ };
508
+ return (_jsx(GridItem, { className: classNames({
509
+ 'editable-grid-item': (!isRoot && editable),
510
+ 'not-editable-grid-item': (!isRoot && !editable)
511
+ }),
512
+ // className={editable ? 'editable-grid-item' : isInBulk ? 'bulk-grid-item': 'not-editable-grid-item'}
513
+ z: baseZ() + z, 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, 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));
497
514
  };
498
515
  var onDragOverHandler = function (e) {
499
516
  var _a;
@@ -565,7 +582,7 @@ var ReactGridLayout = function (_a) {
565
582
  if (!blockStructure) {
566
583
  return;
567
584
  }
568
- var childrenIds = findAllChildrenIds(blockStructure, block.id);
585
+ var childrenIds = findAllChildrenIds(blockStructure, block.blockId);
569
586
  var groupItem = getBoundingArea(layout, childrenIds);
570
587
  // const draggable =
571
588
  // typeof l.isDraggable === "boolean"
@@ -580,45 +597,31 @@ var ReactGridLayout = function (_a) {
580
597
  if (!groupItem) {
581
598
  return _jsx(_Fragment, {});
582
599
  }
583
- var isEditingGroup = block.id === editingGroupBlock;
584
- var type = getBlockType(block.id);
600
+ var isEditingGroup = block.blockId === editingGroupBlock;
601
+ var type = getBlockSpecificType(block);
602
+ var isRoot = editingGroupBlock === 'ROOT';
585
603
  var z = (function () {
586
- if (isEditingGroup && type === 'GROUP') {
587
- return 1000;
604
+ if (!isRoot && type === 'GROUP_BLOCK') {
605
+ return zIndexMap.EDITING_GROUP;
588
606
  }
589
- if (type === 'GROUP') {
590
- return 1000;
607
+ if (type === 'GROUP_BLOCK') {
608
+ return zIndexMap.GROUP;
591
609
  }
592
610
  if (type === 'BULK') {
593
- return 9999;
611
+ return zIndexMap.BULK;
594
612
  }
595
- return 1000;
613
+ return zIndexMap.CB;
596
614
  })();
597
615
  var handleClick = function (e) {
598
- onClickGroup && onClickGroup(e, block.id, type);
616
+ onClickGroup && onClickGroup(e, block.blockId, type);
599
617
  };
600
618
  var handleDoubleClick = function (e) {
601
- onDoubleClickGroup && onDoubleClickGroup(e, block.id, type);
619
+ onDoubleClickGroup && onDoubleClickGroup(e, block.blockId, type);
602
620
  };
603
- // () => {
604
- // if (isEditingGroup) {
605
- // const parent = findParentGroupByGroupId(blockStructure, block.id)
606
- // parent && setSelectedGroup(parent)
607
- // if (parent === null) {
608
- // setSelectedGroup('1')
609
- // }
610
- // }
611
- // }
612
- var classname = (function () {
613
- if (editingGroupBlock === block.id) {
614
- return 'group editing';
615
- }
616
- if (selectedGroupBlock === block.id) {
617
- return 'group selected';
618
- }
619
- return type.toLowerCase();
620
- })();
621
- return (_jsx(OutsideClickHandler, { onOutsideClick: onDoubleClickOutsideGroup, children: _jsx(GroupItem, { className: classname, 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: false, 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(),
621
+ return (_jsx(OutsideClickHandler, { onOutsideClick: onDoubleClickOutsideGroup, children: _jsx(GroupItem, { className: classNames({
622
+ 'editing': editingGroupBlock === block.blockId,
623
+ 'selected': selectedGroupBlock === block.blockId
624
+ }), 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: false, useCSSTransforms: useCSSTransforms && isMounted, usePercentages: !isMounted, transformScale: transformScale, w: groupItem.w, h: groupItem.h, x: groupItem.x, y: groupItem.y, z: z, i: block.blockId,
622
625
  // minH={l.minH}
623
626
  // minW={l.minW}
624
627
  // maxH={l.maxH}
@@ -627,10 +630,10 @@ var ReactGridLayout = function (_a) {
627
630
  // droppingPosition={isDroppingItem ? droppingPosition : undefined}
628
631
  // resizeHandles={resizeHandlesOptions}
629
632
  // resizeHandle={resizeHandle}
630
- isHiddenVisibility: isHiddenVisibility, customColWidth: colWidth, autoResize: false, children: _jsx("div", { onClick: handleClick, onDoubleClick: handleDoubleClick }) }, block.id) }));
633
+ isHiddenVisibility: isHiddenVisibility, customColWidth: colWidth, autoResize: false, children: _jsx("div", { onClick: handleClick, onDoubleClick: handleDoubleClick }) }, block.blockId) }));
631
634
  };
632
635
  var currentGroupBlocks = blockStructure ? findGroupBlocks(blockStructure, editingGroupBlock) : [];
633
- // const groupsParentsGroups = findAllParentGroups(blockStructure, selectedGroup);
636
+ console.log(currentGroupBlocks);
634
637
  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: {
635
638
  marginTop: margin[1] + "px",
636
639
  marginBottom: margin[1] + "px",
@@ -1,17 +1,53 @@
1
- export interface Block {
2
- id: string;
3
- name: string;
4
- children?: Block[];
5
- }
6
- export declare const findBlockById: (blocks: Block[], id: string) => Block | null;
1
+ export declare const zIndexMap: {
2
+ BULK: number;
3
+ EDITING_GROUP: number;
4
+ GROUP: number;
5
+ CB: number;
6
+ ROOT: number;
7
+ };
8
+ export declare function getBlockSpecificType(block: Block): "ROOT" | "BULK" | "COMPONENT_BLOCK" | "GROUP_BLOCK";
9
+ export type Block = ComponentBlock | GroupBlock | RootBlock;
10
+ export type ZOrder = {
11
+ [platform in "mobile" | "desktop"]: {
12
+ [componentBlockId: string]: number;
13
+ };
14
+ };
15
+ export type ComponentBlock = {
16
+ blockId: string;
17
+ type: "COMPONENT_BLOCK";
18
+ zOrderDesktopInternal: number | null;
19
+ zOrderMobileInternal: number | null;
20
+ componentBlockId: number;
21
+ };
22
+ export type GroupBlock = {
23
+ blockId: string;
24
+ type: "GROUP_BLOCK";
25
+ zOrderDesktopInternal: number | null;
26
+ zOrderMobileInternal: number | null;
27
+ children: (ComponentBlock | GroupBlock)[];
28
+ };
29
+ export type RootBlock = {
30
+ blockId: "ROOT";
31
+ type: "GROUP_BLOCK";
32
+ zOrderDesktopInternal: number | null;
33
+ zOrderMobileInternal: number | null;
34
+ children: (ComponentBlock | GroupBlock)[];
35
+ };
36
+ export type BulkBlockInternal = {
37
+ blockId: "BULK";
38
+ type: "GROUP_BLOCK";
39
+ zOrderDesktopInternal: number;
40
+ zOrderMobileInternal: number;
41
+ children: (ComponentBlock | GroupBlock)[];
42
+ };
43
+ export declare const findBlockById: (blocks: Block[], blockId: string) => Block | null;
7
44
  export declare const findChildrenIds: (blockStructure: Block[], targetId: string) => string[];
8
45
  export declare const findAllChildrenIds: (blockStructure: Block[], targetId: string) => string[];
9
- export declare const findAllParentGroups: (blockStructure: Block[], targetId: string) => Block[];
46
+ export declare const findAllParentGroups: (blockStructure: Block[], targetId: string) => GroupBlock[];
10
47
  export declare const findAllChildrenButGroup: (blockStructure: Block[], targetId: string) => string[];
11
- export declare const findGroupBlocks: (blockStructure: Block[], targetId: string) => Block[];
48
+ export declare const findGroupBlocks: (blockStructure: Block[], targetId: string) => GroupBlock[];
12
49
  export declare const findAllComponentBlockIds: (blockStructure: Block[]) => string[];
13
50
  export declare const findParentGroupByGroupId: (blockStructure: Block[], targetId: string) => string | null;
14
51
  export declare const addBlockToRoot: (blockStructure: Block[], newBlock: Block) => Block[];
15
52
  export declare const addBulkToTarget: (blockStructure: Block[], targetId: string, bulkIds: string[]) => Block[];
16
- export declare const getBlockType: (id: string) => 'GROUP' | 'BULK' | 'COMPONENT_BLOCK' | 'UNKNOWN';
17
53
  export declare const blockStructure: Block[];
@@ -18,14 +18,31 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
18
18
  }
19
19
  return to.concat(ar || Array.prototype.slice.call(from));
20
20
  };
21
- export var findBlockById = function (blocks, id) {
21
+ export var zIndexMap = {
22
+ 'BULK': 20000,
23
+ 'EDITING_GROUP': 10000,
24
+ 'GROUP': 5000,
25
+ 'CB': 500,
26
+ 'ROOT': 500, //?
27
+ };
28
+ export function getBlockSpecificType(block) {
29
+ if (block.blockId === 'ROOT') {
30
+ return 'ROOT';
31
+ }
32
+ if (block.blockId === 'BULK') {
33
+ return 'BULK';
34
+ }
35
+ return block.type;
36
+ }
37
+ var deepClone = function (blocks) { return JSON.parse(JSON.stringify(blocks)); };
38
+ export var findBlockById = function (blocks, blockId) {
22
39
  for (var _i = 0, blocks_1 = blocks; _i < blocks_1.length; _i++) {
23
40
  var block = blocks_1[_i];
24
- if (block.id === id) {
41
+ if (block.blockId === blockId) {
25
42
  return block;
26
43
  }
27
- if (block.children) {
28
- var found = findBlockById(block.children, id);
44
+ if (block.type === 'GROUP_BLOCK' && block.children) {
45
+ var found = findBlockById(block.children, blockId);
29
46
  if (found) {
30
47
  return found;
31
48
  }
@@ -35,15 +52,17 @@ export var findBlockById = function (blocks, id) {
35
52
  };
36
53
  export var findChildrenIds = function (blockStructure, targetId) {
37
54
  var targetBlock = findBlockById(blockStructure, targetId);
38
- return targetBlock && targetBlock.children ? targetBlock.children.map(function (child) { return child.id; }) : [];
55
+ return targetBlock && 'children' in targetBlock && targetBlock.children
56
+ ? targetBlock.children.map(function (child) { return child.blockId; })
57
+ : [];
39
58
  };
40
59
  export var findAllChildrenIds = function (blockStructure, targetId) {
41
60
  var collectChildrenIds = function (block) {
42
61
  var ids = [];
43
- if (block.children) {
62
+ if ('children' in block && block.children) {
44
63
  for (var _i = 0, _a = block.children; _i < _a.length; _i++) {
45
64
  var child = _a[_i];
46
- ids.push(child.id);
65
+ ids.push(child.blockId);
47
66
  ids = ids.concat(collectChildrenIds(child));
48
67
  }
49
68
  }
@@ -57,11 +76,11 @@ export var findAllParentGroups = function (blockStructure, targetId) {
57
76
  if (parents === void 0) { parents = []; }
58
77
  for (var _i = 0, blocks_2 = blocks; _i < blocks_2.length; _i++) {
59
78
  var block = blocks_2[_i];
60
- if (block.id === id && block.name === 'GroupBlock') {
61
- return parents.filter(function (parent) { return parent.name === 'GroupBlock'; });
79
+ if (block.blockId === id && block.type === 'GROUP_BLOCK') {
80
+ return parents;
62
81
  }
63
- if (block.children) {
64
- var result = findParentGroups(block.children, id, __spreadArray(__spreadArray([], parents, true), [block], false));
82
+ if ('children' in block && block.children) {
83
+ var result = findParentGroups(block.children, id, block.type === 'GROUP_BLOCK' ? __spreadArray(__spreadArray([], parents, true), [block], false) : parents);
65
84
  if (result) {
66
85
  return result;
67
86
  }
@@ -74,11 +93,11 @@ export var findAllParentGroups = function (blockStructure, targetId) {
74
93
  export var findAllChildrenButGroup = function (blockStructure, targetId) {
75
94
  var collectChildrenIds = function (block) {
76
95
  var ids = [];
77
- if (block.children) {
96
+ if ('children' in block && block.children) {
78
97
  for (var _i = 0, _a = block.children; _i < _a.length; _i++) {
79
98
  var child = _a[_i];
80
- if (child.name !== 'GroupBlock') {
81
- ids.push(child.id);
99
+ if (child.type !== 'GROUP_BLOCK') {
100
+ ids.push(child.blockId);
82
101
  }
83
102
  ids = ids.concat(collectChildrenIds(child));
84
103
  }
@@ -91,12 +110,16 @@ export var findAllChildrenButGroup = function (blockStructure, targetId) {
91
110
  export var findGroupBlocks = function (blockStructure, targetId) {
92
111
  var targetBlock = findBlockById(blockStructure, targetId);
93
112
  var groupBlocks = [];
94
- if (targetBlock) {
95
- if (targetBlock.name === 'GroupBlock' || targetBlock.name === 'BulkBlock') {
96
- groupBlocks.push(targetBlock);
113
+ if (targetBlock && targetBlock.blockId === 'ROOT') {
114
+ if ('children' in targetBlock) {
115
+ groupBlocks.push.apply(groupBlocks, targetBlock.children.filter(function (child) { return child.type === 'GROUP_BLOCK'; }));
116
+ return groupBlocks;
97
117
  }
118
+ }
119
+ if (targetBlock && targetBlock.type === 'GROUP_BLOCK') {
120
+ groupBlocks.push(targetBlock);
98
121
  if (targetBlock.children) {
99
- groupBlocks.push.apply(groupBlocks, targetBlock.children.filter(function (child) { return child.name === 'GroupBlock' || child.name === 'BulkBlock'; }));
122
+ groupBlocks.push.apply(groupBlocks, targetBlock.children.filter(function (child) { return child.type === 'GROUP_BLOCK'; }));
100
123
  }
101
124
  }
102
125
  return groupBlocks;
@@ -106,10 +129,10 @@ export var findAllComponentBlockIds = function (blockStructure) {
106
129
  var ids = [];
107
130
  for (var _i = 0, blocks_3 = blocks; _i < blocks_3.length; _i++) {
108
131
  var block = blocks_3[_i];
109
- if (block.name === 'ComponentBlock') {
110
- ids.push(block.id);
132
+ if (block.type === 'COMPONENT_BLOCK') {
133
+ ids.push(block.blockId);
111
134
  }
112
- if (block.children) {
135
+ if ('children' in block && block.children) {
113
136
  ids = ids.concat(collectComponentBlockIds(block.children));
114
137
  }
115
138
  }
@@ -122,11 +145,11 @@ export var findParentGroupByGroupId = function (blockStructure, targetId) {
122
145
  if (parent === void 0) { parent = null; }
123
146
  for (var _i = 0, blocks_4 = blocks; _i < blocks_4.length; _i++) {
124
147
  var block = blocks_4[_i];
125
- if (block.id === id && (block.name === 'GroupBlock')) {
126
- return parent && parent.name === 'GroupBlock' ? parent.id : null;
148
+ if (block.blockId === id && block.type === 'GROUP_BLOCK') {
149
+ return parent ? parent.blockId : null;
127
150
  }
128
- if (block.children) {
129
- var result = findParentGroup(block.children, id, block);
151
+ if ('children' in block && block.children) {
152
+ var result = findParentGroup(block.children, id, block.type === 'GROUP_BLOCK' ? block : parent);
130
153
  if (result) {
131
154
  return result;
132
155
  }
@@ -138,20 +161,19 @@ export var findParentGroupByGroupId = function (blockStructure, targetId) {
138
161
  };
139
162
  export var addBlockToRoot = function (blockStructure, newBlock) {
140
163
  return blockStructure.map(function (block) {
141
- if (block.name === 'RootBlock') {
164
+ if (block.blockId === 'ROOT' && block.type === 'GROUP_BLOCK') {
142
165
  return __assign(__assign({}, block), { children: block.children ? __spreadArray(__spreadArray([], block.children, true), [newBlock], false) : [newBlock] });
143
166
  }
144
167
  return block;
145
168
  });
146
169
  };
147
- var deepClone = function (blocks) { return JSON.parse(JSON.stringify(blocks)); };
148
170
  export var addBulkToTarget = function (blockStructure, targetId, bulkIds) {
149
171
  var structure = deepClone(blockStructure);
150
172
  var targetBlock = findBlockById(structure, targetId);
151
- if (!targetBlock || !targetBlock.children) {
173
+ if (!targetBlock || targetBlock.type !== 'GROUP_BLOCK' || !targetBlock.children) {
152
174
  return blockStructure;
153
175
  }
154
- var bulkBlocks = targetBlock.children.filter(function (child) { return bulkIds.includes(child.id); });
176
+ var bulkBlocks = targetBlock.children.filter(function (child) { return bulkIds.includes(child.blockId); });
155
177
  if (bulkBlocks.length !== bulkIds.length) {
156
178
  throw new Error("Some bulkIds do not exist as children of the target block.");
157
179
  }
@@ -159,136 +181,164 @@ export var addBulkToTarget = function (blockStructure, targetId, bulkIds) {
159
181
  return blockStructure;
160
182
  }
161
183
  // Remove bulk blocks from target's children
162
- targetBlock.children = targetBlock.children.filter(function (child) { return !bulkIds.includes(child.id); });
184
+ targetBlock.children = targetBlock.children.filter(function (child) { return !bulkIds.includes(child.blockId); });
163
185
  // Create the new bulkBlock
164
186
  var bulkBlock = {
165
- id: "BULK",
166
- name: 'BulkBlock',
187
+ blockId: 'BULK',
188
+ type: 'GROUP_BLOCK',
189
+ zOrderDesktopInternal: zIndexMap.BULK,
190
+ zOrderMobileInternal: zIndexMap.BULK,
167
191
  children: bulkBlocks,
168
192
  };
169
193
  // Add the bulkBlock to the target's children
170
194
  targetBlock.children.push(bulkBlock);
171
195
  return structure;
172
196
  };
173
- export var getBlockType = function (id) {
174
- if (id.startsWith('GB_')) {
175
- return 'GROUP';
176
- }
177
- else if (id.startsWith('CB_')) {
178
- return 'COMPONENT_BLOCK';
179
- }
180
- else if (id === 'BULK') {
181
- return 'BULK';
182
- }
183
- return 'UNKNOWN'; // 잘못된 ID 형식의 경우
184
- };
185
- // 사용 예시:
186
197
  export var blockStructure = [
187
198
  {
188
- id: '1',
189
- name: 'RootBlock',
199
+ blockId: 'ROOT',
200
+ type: 'GROUP_BLOCK',
201
+ zOrderDesktopInternal: null,
202
+ zOrderMobileInternal: null,
190
203
  children: [
191
204
  {
192
- id: 'GB_2',
193
- name: 'GroupBlock',
205
+ blockId: 'GB_2',
206
+ type: 'GROUP_BLOCK',
207
+ zOrderDesktopInternal: null,
208
+ zOrderMobileInternal: null,
194
209
  children: [
195
210
  {
196
- id: 'GB_3',
197
- name: 'GroupBlock',
211
+ blockId: 'GB_3',
212
+ type: 'GROUP_BLOCK',
213
+ zOrderDesktopInternal: null,
214
+ zOrderMobileInternal: null,
198
215
  children: [
199
216
  {
200
- id: 'CB_4',
201
- name: 'ComponentBlock'
217
+ blockId: 'CB_4',
218
+ type: 'COMPONENT_BLOCK',
219
+ zOrderDesktopInternal: null,
220
+ zOrderMobileInternal: null,
221
+ componentBlockId: 4
202
222
  },
203
223
  {
204
- id: 'CB_5',
205
- name: 'ComponentBlock'
224
+ blockId: 'CB_5',
225
+ type: 'COMPONENT_BLOCK',
226
+ zOrderDesktopInternal: null,
227
+ zOrderMobileInternal: null,
228
+ componentBlockId: 5
206
229
  },
207
230
  {
208
- id: 'GB_6',
209
- name: 'GroupBlock',
231
+ blockId: 'GB_6',
232
+ type: 'GROUP_BLOCK',
233
+ zOrderDesktopInternal: null,
234
+ zOrderMobileInternal: null,
210
235
  children: [
211
236
  {
212
- id: 'CB_7',
213
- name: 'ComponentBlock'
237
+ blockId: 'CB_7',
238
+ type: 'COMPONENT_BLOCK',
239
+ zOrderDesktopInternal: null,
240
+ zOrderMobileInternal: null,
241
+ componentBlockId: 7
214
242
  },
215
243
  {
216
- id: 'CB_8',
217
- name: 'ComponentBlock'
244
+ blockId: 'CB_8',
245
+ type: 'COMPONENT_BLOCK',
246
+ zOrderDesktopInternal: null,
247
+ zOrderMobileInternal: null,
248
+ componentBlockId: 8
218
249
  },
219
250
  {
220
- id: 'GB_9',
221
- name: 'GroupBlock',
251
+ blockId: 'GB_9',
252
+ type: 'GROUP_BLOCK',
253
+ zOrderDesktopInternal: null,
254
+ zOrderMobileInternal: null,
222
255
  children: [
223
256
  {
224
- id: 'CB_10',
225
- name: 'ComponentBlock'
257
+ blockId: 'CB_10',
258
+ type: 'COMPONENT_BLOCK',
259
+ zOrderDesktopInternal: null,
260
+ zOrderMobileInternal: null,
261
+ componentBlockId: 10
226
262
  },
227
263
  {
228
- id: 'CB_11',
229
- name: 'ComponentBlock'
264
+ blockId: 'CB_11',
265
+ type: 'COMPONENT_BLOCK',
266
+ zOrderDesktopInternal: null,
267
+ zOrderMobileInternal: null,
268
+ componentBlockId: 11
230
269
  }
231
270
  ]
232
- },
271
+ }
233
272
  ]
234
- },
273
+ }
235
274
  ]
236
275
  },
237
276
  {
238
- id: 'GB_12',
239
- name: 'GroupBlock',
277
+ blockId: 'GB_12',
278
+ type: 'GROUP_BLOCK',
279
+ zOrderDesktopInternal: null,
280
+ zOrderMobileInternal: null,
240
281
  children: [
241
282
  {
242
- id: 'CB_13',
243
- name: 'ComponentBlock'
283
+ blockId: 'CB_13',
284
+ type: 'COMPONENT_BLOCK',
285
+ zOrderDesktopInternal: null,
286
+ zOrderMobileInternal: null,
287
+ componentBlockId: 13
244
288
  },
245
289
  {
246
- id: 'CB_14',
247
- name: 'ComponentBlock'
290
+ blockId: 'CB_14',
291
+ type: 'COMPONENT_BLOCK',
292
+ zOrderDesktopInternal: null,
293
+ zOrderMobileInternal: null,
294
+ componentBlockId: 14
248
295
  }
249
296
  ]
250
297
  },
251
298
  {
252
- id: 'CB_15',
253
- name: 'ComponentBlock'
299
+ blockId: 'CB_15',
300
+ type: 'COMPONENT_BLOCK',
301
+ zOrderDesktopInternal: null,
302
+ zOrderMobileInternal: null,
303
+ componentBlockId: 15
254
304
  },
255
305
  {
256
- id: 'CB_16',
257
- name: 'ComponentBlock'
306
+ blockId: 'CB_16',
307
+ type: 'COMPONENT_BLOCK',
308
+ zOrderDesktopInternal: null,
309
+ zOrderMobileInternal: null,
310
+ componentBlockId: 16
258
311
  }
259
312
  ]
260
313
  },
261
314
  {
262
- id: 'GB_17',
263
- name: 'GroupBlock',
315
+ blockId: 'GB_17',
316
+ type: 'GROUP_BLOCK',
317
+ zOrderDesktopInternal: null,
318
+ zOrderMobileInternal: null,
264
319
  children: [
265
- // {
266
- // id: '6',
267
- // name: 'GroupBlock',
268
- // children: [
269
- // {
270
- // id: '7',
271
- // name: 'ComponentBlock'
272
- // },
273
- // {
274
- // id: '8',
275
- // name: 'ComponentBlock'
276
- // }
277
- // ]
278
- // },
279
320
  {
280
- id: 'CB_18',
281
- name: 'ComponentBlock'
321
+ blockId: 'CB_18',
322
+ type: 'COMPONENT_BLOCK',
323
+ zOrderDesktopInternal: null,
324
+ zOrderMobileInternal: null,
325
+ componentBlockId: 18
282
326
  }
283
327
  ]
284
328
  },
285
329
  {
286
- id: 'CB_19',
287
- name: 'ComponentBlock'
330
+ blockId: 'CB_19',
331
+ type: 'COMPONENT_BLOCK',
332
+ zOrderDesktopInternal: null,
333
+ zOrderMobileInternal: null,
334
+ componentBlockId: 19
288
335
  },
289
336
  {
290
- id: 'CB_20',
291
- name: 'ComponentBlock'
337
+ blockId: 'CB_20',
338
+ type: 'COMPONENT_BLOCK',
339
+ zOrderDesktopInternal: null,
340
+ zOrderMobileInternal: null,
341
+ componentBlockId: 20
292
342
  }
293
343
  ]
294
344
  }
@@ -75,8 +75,8 @@ export type ReactGridLayoutProps = {
75
75
  onFitToContent?: OnFitContentCallBack;
76
76
  blockStructure?: Block[];
77
77
  onDoubleClickGroup?: (e: React.MouseEvent, id: string, type: string) => void;
78
- selectedGroupBlock?: string | null;
79
- editingGroupBlock?: string;
78
+ selectedGroupBlock?: 'ROOT' | string;
79
+ editingGroupBlock?: 'ROOT' | string;
80
80
  onClickGroup?: (e: React.MouseEvent, id: string, type: string) => void;
81
81
  bulkIds?: string[];
82
82
  onDoubleClickOutsideGroup: () => void;
@@ -34,6 +34,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
34
34
  import React, { useEffect, useRef } from "react";
35
35
  import { cloneElement } from "./utils/cloneElement";
36
36
  import { DraggableCore } from "../Draggable";
37
+ import classNames from "../../external-lib/classnames";
37
38
  var Resizable = function (_a) {
38
39
  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"]);
39
40
  var handleRefs = useRef({
@@ -119,8 +120,6 @@ var Resizable = function (_a) {
119
120
  width = height * ratio;
120
121
  }
121
122
  }
122
- console.log('w: ', width);
123
- console.log('minW: ', minWidth.current);
124
123
  var _b = [width, height], oldW = _b[0], oldH = _b[1];
125
124
  var _c = (_a = slack.current) !== null && _a !== void 0 ? _a : [0, 0], slackW = _c[0], slackH = _c[1];
126
125
  width += slackW;
@@ -269,7 +268,7 @@ var Resizable = function (_a) {
269
268
  var props = __assign({ ref: ref }, (isDOMElement ? {} : { handleAxis: handleAxis }));
270
269
  return React.cloneElement(handle, props);
271
270
  };
272
- return cloneElement(children, __assign(__assign({}, restProps), { className: "".concat(className ? "".concat(className, " ") : "", "react-resizable"), children: __spreadArray([
271
+ return cloneElement(children, __assign(__assign({}, restProps), { className: classNames(className !== null && className !== void 0 ? className : 'react-resizable'), children: __spreadArray([
273
272
  // ...children.props.children,
274
273
  React.Children.map(children.props.children, function (child) { return child; })
275
274
  ], resizeHandles.map(function (handleAxis) {
@@ -0,0 +1,3 @@
1
+ type ClassValue = string | number | boolean | null | undefined;
2
+ declare function clsx(...classes: ClassValue[]): string;
3
+ export default clsx;
@@ -0,0 +1,10 @@
1
+ function clsx() {
2
+ var classes = [];
3
+ for (var _i = 0; _i < arguments.length; _i++) {
4
+ classes[_i] = arguments[_i];
5
+ }
6
+ return classes
7
+ .filter(function (cls) { return Boolean(cls); })
8
+ .join(" ");
9
+ }
10
+ export default clsx;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "publ-echo-test",
3
- "version": "0.0.61",
3
+ "version": "0.0.62",
4
4
  "private": false,
5
5
  "main": "dist/lib/index.js",
6
6
  "types": "dist/lib/index.d.js",