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.
- package/dist/lib/GridItem/GridItem.js +1 -0
- package/dist/lib/GridItem/GroupItem.js +2 -2
- package/dist/lib/GridLayoutEditor/ReactGridLayout.js +49 -46
- package/dist/lib/GridLayoutEditor/group.d.ts +45 -9
- package/dist/lib/GridLayoutEditor/group.js +151 -101
- package/dist/lib/GridLayoutEditor/types.d.ts +2 -2
- package/dist/lib/Resizable/Resizable.js +2 -3
- package/dist/lib/utils/classNames.d.ts +3 -0
- package/dist/lib/utils/classNames.js +10 -0
- package/package.json +1 -1
@@ -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-
|
389
|
-
className: classNames("react-group-
|
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,
|
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 ? '
|
53
|
-
var
|
54
|
-
var
|
55
|
-
var
|
56
|
-
var
|
57
|
-
var
|
58
|
-
var
|
59
|
-
var
|
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
|
63
|
-
var
|
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 =
|
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
|
-
|
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.
|
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.
|
584
|
-
var type =
|
600
|
+
var isEditingGroup = block.blockId === editingGroupBlock;
|
601
|
+
var type = getBlockSpecificType(block);
|
602
|
+
var isRoot = editingGroupBlock === 'ROOT';
|
585
603
|
var z = (function () {
|
586
|
-
if (
|
587
|
-
return
|
604
|
+
if (!isRoot && type === 'GROUP_BLOCK') {
|
605
|
+
return zIndexMap.EDITING_GROUP;
|
588
606
|
}
|
589
|
-
if (type === '
|
590
|
-
return
|
607
|
+
if (type === 'GROUP_BLOCK') {
|
608
|
+
return zIndexMap.GROUP;
|
591
609
|
}
|
592
610
|
if (type === 'BULK') {
|
593
|
-
return
|
611
|
+
return zIndexMap.BULK;
|
594
612
|
}
|
595
|
-
return
|
613
|
+
return zIndexMap.CB;
|
596
614
|
})();
|
597
615
|
var handleClick = function (e) {
|
598
|
-
onClickGroup && onClickGroup(e, block.
|
616
|
+
onClickGroup && onClickGroup(e, block.blockId, type);
|
599
617
|
};
|
600
618
|
var handleDoubleClick = function (e) {
|
601
|
-
onDoubleClickGroup && onDoubleClickGroup(e, block.
|
619
|
+
onDoubleClickGroup && onDoubleClickGroup(e, block.blockId, type);
|
602
620
|
};
|
603
|
-
|
604
|
-
|
605
|
-
|
606
|
-
|
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.
|
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
|
-
|
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
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
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) =>
|
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) =>
|
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
|
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.
|
41
|
+
if (block.blockId === blockId) {
|
25
42
|
return block;
|
26
43
|
}
|
27
|
-
if (block.children) {
|
28
|
-
var found = findBlockById(block.children,
|
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 &&
|
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.
|
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.
|
61
|
-
return parents
|
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.
|
81
|
-
ids.push(child.
|
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 (
|
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.
|
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.
|
110
|
-
ids.push(block.
|
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.
|
126
|
-
return parent
|
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.
|
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.
|
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.
|
184
|
+
targetBlock.children = targetBlock.children.filter(function (child) { return !bulkIds.includes(child.blockId); });
|
163
185
|
// Create the new bulkBlock
|
164
186
|
var bulkBlock = {
|
165
|
-
|
166
|
-
|
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
|
-
|
189
|
-
|
199
|
+
blockId: 'ROOT',
|
200
|
+
type: 'GROUP_BLOCK',
|
201
|
+
zOrderDesktopInternal: null,
|
202
|
+
zOrderMobileInternal: null,
|
190
203
|
children: [
|
191
204
|
{
|
192
|
-
|
193
|
-
|
205
|
+
blockId: 'GB_2',
|
206
|
+
type: 'GROUP_BLOCK',
|
207
|
+
zOrderDesktopInternal: null,
|
208
|
+
zOrderMobileInternal: null,
|
194
209
|
children: [
|
195
210
|
{
|
196
|
-
|
197
|
-
|
211
|
+
blockId: 'GB_3',
|
212
|
+
type: 'GROUP_BLOCK',
|
213
|
+
zOrderDesktopInternal: null,
|
214
|
+
zOrderMobileInternal: null,
|
198
215
|
children: [
|
199
216
|
{
|
200
|
-
|
201
|
-
|
217
|
+
blockId: 'CB_4',
|
218
|
+
type: 'COMPONENT_BLOCK',
|
219
|
+
zOrderDesktopInternal: null,
|
220
|
+
zOrderMobileInternal: null,
|
221
|
+
componentBlockId: 4
|
202
222
|
},
|
203
223
|
{
|
204
|
-
|
205
|
-
|
224
|
+
blockId: 'CB_5',
|
225
|
+
type: 'COMPONENT_BLOCK',
|
226
|
+
zOrderDesktopInternal: null,
|
227
|
+
zOrderMobileInternal: null,
|
228
|
+
componentBlockId: 5
|
206
229
|
},
|
207
230
|
{
|
208
|
-
|
209
|
-
|
231
|
+
blockId: 'GB_6',
|
232
|
+
type: 'GROUP_BLOCK',
|
233
|
+
zOrderDesktopInternal: null,
|
234
|
+
zOrderMobileInternal: null,
|
210
235
|
children: [
|
211
236
|
{
|
212
|
-
|
213
|
-
|
237
|
+
blockId: 'CB_7',
|
238
|
+
type: 'COMPONENT_BLOCK',
|
239
|
+
zOrderDesktopInternal: null,
|
240
|
+
zOrderMobileInternal: null,
|
241
|
+
componentBlockId: 7
|
214
242
|
},
|
215
243
|
{
|
216
|
-
|
217
|
-
|
244
|
+
blockId: 'CB_8',
|
245
|
+
type: 'COMPONENT_BLOCK',
|
246
|
+
zOrderDesktopInternal: null,
|
247
|
+
zOrderMobileInternal: null,
|
248
|
+
componentBlockId: 8
|
218
249
|
},
|
219
250
|
{
|
220
|
-
|
221
|
-
|
251
|
+
blockId: 'GB_9',
|
252
|
+
type: 'GROUP_BLOCK',
|
253
|
+
zOrderDesktopInternal: null,
|
254
|
+
zOrderMobileInternal: null,
|
222
255
|
children: [
|
223
256
|
{
|
224
|
-
|
225
|
-
|
257
|
+
blockId: 'CB_10',
|
258
|
+
type: 'COMPONENT_BLOCK',
|
259
|
+
zOrderDesktopInternal: null,
|
260
|
+
zOrderMobileInternal: null,
|
261
|
+
componentBlockId: 10
|
226
262
|
},
|
227
263
|
{
|
228
|
-
|
229
|
-
|
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
|
-
|
239
|
-
|
277
|
+
blockId: 'GB_12',
|
278
|
+
type: 'GROUP_BLOCK',
|
279
|
+
zOrderDesktopInternal: null,
|
280
|
+
zOrderMobileInternal: null,
|
240
281
|
children: [
|
241
282
|
{
|
242
|
-
|
243
|
-
|
283
|
+
blockId: 'CB_13',
|
284
|
+
type: 'COMPONENT_BLOCK',
|
285
|
+
zOrderDesktopInternal: null,
|
286
|
+
zOrderMobileInternal: null,
|
287
|
+
componentBlockId: 13
|
244
288
|
},
|
245
289
|
{
|
246
|
-
|
247
|
-
|
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
|
-
|
253
|
-
|
299
|
+
blockId: 'CB_15',
|
300
|
+
type: 'COMPONENT_BLOCK',
|
301
|
+
zOrderDesktopInternal: null,
|
302
|
+
zOrderMobileInternal: null,
|
303
|
+
componentBlockId: 15
|
254
304
|
},
|
255
305
|
{
|
256
|
-
|
257
|
-
|
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
|
-
|
263
|
-
|
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
|
-
|
281
|
-
|
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
|
-
|
287
|
-
|
330
|
+
blockId: 'CB_19',
|
331
|
+
type: 'COMPONENT_BLOCK',
|
332
|
+
zOrderDesktopInternal: null,
|
333
|
+
zOrderMobileInternal: null,
|
334
|
+
componentBlockId: 19
|
288
335
|
},
|
289
336
|
{
|
290
|
-
|
291
|
-
|
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?:
|
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:
|
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) {
|