publ-echo-test 0.0.60 → 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/Draggable/DraggableCore.js +0 -1
- package/dist/lib/Draggable/types.d.ts +0 -2
- package/dist/lib/GridItem/GridItem.js +2 -0
- package/dist/lib/GridItem/GroupItem.d.ts +1 -5
- package/dist/lib/GridItem/GroupItem.js +6 -15
- package/dist/lib/GridLayoutEditor/ReactGridLayout.js +62 -55
- package/dist/lib/GridLayoutEditor/group.d.ts +45 -9
- package/dist/lib/GridLayoutEditor/group.js +154 -101
- package/dist/lib/GridLayoutEditor/types.d.ts +5 -3
- 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
@@ -260,7 +260,6 @@ var DraggableCore = function (_a) {
|
|
260
260
|
onMouseDown: handleMouseDown,
|
261
261
|
onMouseUp: handleMouseUp,
|
262
262
|
onTouchEnd: handleTouchEnd,
|
263
|
-
onDoubleClick: props.onDoubleClick,
|
264
263
|
ref: (_b = props.nodeRef) !== null && _b !== void 0 ? _b : draggableCoreRef,
|
265
264
|
});
|
266
265
|
};
|
@@ -23,8 +23,6 @@ export type DraggableCoreDefaultProps = {
|
|
23
23
|
onDrag?: DraggableEventHandler | Function;
|
24
24
|
onStop?: DraggableEventHandler | Function;
|
25
25
|
onMouseDown?: (e: MouseEvent) => void;
|
26
|
-
onDoubleClick?: () => void;
|
27
|
-
onClick?: () => void;
|
28
26
|
scale?: number;
|
29
27
|
cancel?: string;
|
30
28
|
children: ReactElement<any>;
|
@@ -248,6 +248,7 @@ var GridItem = function (_a) {
|
|
248
248
|
var rowHeightNumber = resolveRowHeight(rowHeight, colWidth);
|
249
249
|
var bottomBoundary = offsetParent.clientHeight -
|
250
250
|
calcGridItemWHPx(h, rowHeightNumber, margin[1]);
|
251
|
+
console.log('bb', bottomBoundary);
|
251
252
|
top = clamp(top, 0, bottomBoundary);
|
252
253
|
var rightBoundary = containerWidth - calcGridItemWHPx(w, colWidth, margin[0]);
|
253
254
|
left = clamp(left, 0, rightBoundary);
|
@@ -394,6 +395,7 @@ var GridItem = function (_a) {
|
|
394
395
|
isResizing: Boolean(resizing) && Boolean(isResizing) && Boolean(isHiddenVisibility),
|
395
396
|
resizing: Boolean(resizing),
|
396
397
|
"react-draggable": isDraggable,
|
398
|
+
"editable-grid-item": isResizable && isDraggable,
|
397
399
|
isDragging: Boolean(isDragging) && Boolean(dragging) && Boolean(isHiddenVisibility),
|
398
400
|
"react-draggable-dragging": Boolean(dragging),
|
399
401
|
// dropping: Boolean(droppingPosition),
|
@@ -1,9 +1,5 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import { GridItemProps } from "./types";
|
3
3
|
import { PropsWithChildren } from "../types";
|
4
|
-
|
5
|
-
onDoubleClick: (id: string) => void;
|
6
|
-
onClick: (id: string) => void;
|
7
|
-
};
|
8
|
-
declare const GroupItem: ({ children, ...props }: PropsWithChildren<GridItemProps & GroupItemProp>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
|
4
|
+
declare const GroupItem: ({ children, ...props }: PropsWithChildren<GridItemProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
|
9
5
|
export default GroupItem;
|
@@ -30,7 +30,7 @@ import { Resizable } from "../Resizable";
|
|
30
30
|
var GroupItem = function (_a) {
|
31
31
|
var _b;
|
32
32
|
var children = _a.children, props = __rest(_a, ["children"]);
|
33
|
-
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
|
33
|
+
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;
|
34
34
|
var _l = useState(), resizing = _l[0], setResizing = _l[1];
|
35
35
|
var _m = useState(), dragging = _m[0], setDragging = _m[1];
|
36
36
|
var _o = useState(), dragStart = _o[0], setDragStart = _o[1];
|
@@ -135,12 +135,6 @@ var GroupItem = function (_a) {
|
|
135
135
|
// });
|
136
136
|
// }
|
137
137
|
// };
|
138
|
-
var handleDoubleClick = function () {
|
139
|
-
onDoubleClick(props.i);
|
140
|
-
};
|
141
|
-
var handleClick = function () {
|
142
|
-
onClick(props.i);
|
143
|
-
};
|
144
138
|
var getPositionParams = function (prop) {
|
145
139
|
if (prop === void 0) { prop = props; }
|
146
140
|
return {
|
@@ -177,7 +171,7 @@ var GroupItem = function (_a) {
|
|
177
171
|
* @return {Element} Child wrapped in Draggable.
|
178
172
|
*/
|
179
173
|
var mixinDraggable = function (child, isDraggable) {
|
180
|
-
return (_jsx(DraggableCore, {
|
174
|
+
return (_jsx(DraggableCore, { disabled: !isDraggable, onStart: onDragStart, onDrag: onDrag, onStop: onDragStop, handle: handle, cancel: ".react-resizable-handle" + (cancel ? "," + cancel : ""), scale: transformScale, nodeRef: elementRef, children: child }));
|
181
175
|
};
|
182
176
|
/**
|
183
177
|
* Mix a Resizable instance into a child.
|
@@ -254,6 +248,7 @@ var GroupItem = function (_a) {
|
|
254
248
|
var rowHeightNumber = resolveRowHeight(rowHeight, colWidth);
|
255
249
|
var bottomBoundary = offsetParent.clientHeight -
|
256
250
|
calcGridItemWHPx(h, rowHeightNumber, margin[1]);
|
251
|
+
console.log('bb', bottomBoundary);
|
257
252
|
top = clamp(top, 0, bottomBoundary);
|
258
253
|
var rightBoundary = containerWidth - calcGridItemWHPx(w, colWidth, margin[0]);
|
259
254
|
left = clamp(left, 0, rightBoundary);
|
@@ -385,17 +380,13 @@ var GroupItem = function (_a) {
|
|
385
380
|
var _d = getResizableXYPosition(handle, w, h, prevW, prevH), newX = _d.newX, newY = _d.newY;
|
386
381
|
handler(i, w, h, { e: e, node: node, size: size }, newX, newY);
|
387
382
|
};
|
388
|
-
var pos = calcGridItemPosition(getPositionParams(), x, y, z, w, h, {
|
389
|
-
dragging: dragging,
|
390
|
-
resizing: resizing,
|
391
|
-
}, colWidth);
|
383
|
+
var pos = calcGridItemPosition(getPositionParams(), x, y, z, w, h, {}, colWidth);
|
392
384
|
var child = React.Children.only(children);
|
393
|
-
// console.log(child, className)
|
394
385
|
var newChild = React.cloneElement(child, {
|
395
386
|
key: i,
|
396
387
|
ref: elementRef,
|
397
|
-
'data-
|
398
|
-
className: classNames("react-
|
388
|
+
'data-group-block-id': i,
|
389
|
+
className: classNames("react-group-block", child.props.className, className, {
|
399
390
|
static: props.static,
|
400
391
|
isResizing: Boolean(resizing) && Boolean(isResizing) && Boolean(isHiddenVisibility),
|
401
392
|
resizing: Boolean(resizing),
|
@@ -37,8 +37,9 @@ 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
|
+
import OutsideClickHandler from "../GridItem/OutsideClickHandler";
|
42
43
|
var layoutClassName = "react-grid-layout";
|
43
44
|
var ReactGridLayout = function (_a) {
|
44
45
|
var children = _a.children, props = __rest(_a, ["children"]);
|
@@ -48,20 +49,20 @@ var ReactGridLayout = function (_a) {
|
|
48
49
|
w: 1,
|
49
50
|
} : _w, // TODO fix
|
50
51
|
_x = props.resizeHandles, // TODO fix
|
51
|
-
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.
|
52
|
-
var
|
53
|
-
var
|
54
|
-
var
|
55
|
-
var
|
56
|
-
var
|
57
|
-
var
|
58
|
-
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];
|
59
60
|
// const [selectedGroup, setSelectedGroup] = useState<string>('1');
|
60
|
-
var editableItems = blockStructure ? findChildrenIds(blockStructure,
|
61
|
-
var
|
62
|
-
var
|
61
|
+
var editableItems = blockStructure ? findChildrenIds(blockStructure, editingGroupBlock) : [];
|
62
|
+
var _9 = useState([]), oldGroupChildren = _9[0], setOldGroupChildren = _9[1];
|
63
|
+
var _10 = useState(function () {
|
63
64
|
return synchronizeLayoutWithChildren(props.layout || [], children, cols, compactType, allowOverlap);
|
64
|
-
}), layout =
|
65
|
+
}), layout = _10[0], setLayout = _10[1];
|
65
66
|
var dragEnterCounter = useRef(0);
|
66
67
|
useLayoutEffect(function () {
|
67
68
|
setIsMounted(true);
|
@@ -491,7 +492,25 @@ var ReactGridLayout = function (_a) {
|
|
491
492
|
var editable = editableItems.includes(l.i);
|
492
493
|
var z = l.z || 0;
|
493
494
|
var isInBulk = bulkIds === null || bulkIds === void 0 ? void 0 : bulkIds.includes(l.i);
|
494
|
-
|
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));
|
495
514
|
};
|
496
515
|
var onDragOverHandler = function (e) {
|
497
516
|
var _a;
|
@@ -563,7 +582,7 @@ var ReactGridLayout = function (_a) {
|
|
563
582
|
if (!blockStructure) {
|
564
583
|
return;
|
565
584
|
}
|
566
|
-
var childrenIds = findAllChildrenIds(blockStructure, block.
|
585
|
+
var childrenIds = findAllChildrenIds(blockStructure, block.blockId);
|
567
586
|
var groupItem = getBoundingArea(layout, childrenIds);
|
568
587
|
// const draggable =
|
569
588
|
// typeof l.isDraggable === "boolean"
|
@@ -578,55 +597,43 @@ var ReactGridLayout = function (_a) {
|
|
578
597
|
if (!groupItem) {
|
579
598
|
return _jsx(_Fragment, {});
|
580
599
|
}
|
581
|
-
var isEditingGroup = block.
|
582
|
-
var type =
|
600
|
+
var isEditingGroup = block.blockId === editingGroupBlock;
|
601
|
+
var type = getBlockSpecificType(block);
|
602
|
+
var isRoot = editingGroupBlock === 'ROOT';
|
583
603
|
var z = (function () {
|
584
|
-
if (
|
585
|
-
return
|
604
|
+
if (!isRoot && type === 'GROUP_BLOCK') {
|
605
|
+
return zIndexMap.EDITING_GROUP;
|
586
606
|
}
|
587
|
-
if (type === '
|
588
|
-
return
|
607
|
+
if (type === 'GROUP_BLOCK') {
|
608
|
+
return zIndexMap.GROUP;
|
589
609
|
}
|
590
610
|
if (type === 'BULK') {
|
591
|
-
return
|
611
|
+
return zIndexMap.BULK;
|
592
612
|
}
|
593
|
-
return
|
613
|
+
return zIndexMap.CB;
|
594
614
|
})();
|
595
|
-
var handleClick = function (
|
596
|
-
onClickGroup && onClickGroup(
|
615
|
+
var handleClick = function (e) {
|
616
|
+
onClickGroup && onClickGroup(e, block.blockId, type);
|
597
617
|
};
|
598
|
-
var handleDoubleClick = function (
|
599
|
-
|
600
|
-
onDoubleClickGroup && onDoubleClickGroup(id);
|
601
|
-
}
|
618
|
+
var handleDoubleClick = function (e) {
|
619
|
+
onDoubleClickGroup && onDoubleClickGroup(e, block.blockId, type);
|
602
620
|
};
|
603
|
-
return (
|
604
|
-
|
605
|
-
|
606
|
-
|
607
|
-
|
608
|
-
|
609
|
-
|
610
|
-
|
611
|
-
|
612
|
-
|
613
|
-
|
614
|
-
|
615
|
-
|
616
|
-
// maxH={l.maxH}
|
617
|
-
// maxW={l.maxW}
|
618
|
-
// static={l.static}
|
619
|
-
// droppingPosition={isDroppingItem ? droppingPosition : undefined}
|
620
|
-
// resizeHandles={resizeHandlesOptions}
|
621
|
-
// resizeHandle={resizeHandle}
|
622
|
-
isHiddenVisibility: isHiddenVisibility, customColWidth: colWidth, autoResize: false, children: _jsx("div", {}) }, block.id)
|
623
|
-
// </OutsideClickHandler>
|
624
|
-
);
|
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,
|
625
|
+
// minH={l.minH}
|
626
|
+
// minW={l.minW}
|
627
|
+
// maxH={l.maxH}
|
628
|
+
// maxW={l.maxW}
|
629
|
+
// static={l.static}
|
630
|
+
// droppingPosition={isDroppingItem ? droppingPosition : undefined}
|
631
|
+
// resizeHandles={resizeHandlesOptions}
|
632
|
+
// resizeHandle={resizeHandle}
|
633
|
+
isHiddenVisibility: isHiddenVisibility, customColWidth: colWidth, autoResize: false, children: _jsx("div", { onClick: handleClick, onDoubleClick: handleDoubleClick }) }, block.blockId) }));
|
625
634
|
};
|
626
|
-
var currentGroupBlocks = blockStructure ? findGroupBlocks(blockStructure,
|
627
|
-
|
628
|
-
console.log('bs', blockStructure);
|
629
|
-
console.log('current', currentGroupBlocks);
|
635
|
+
var currentGroupBlocks = blockStructure ? findGroupBlocks(blockStructure, editingGroupBlock) : [];
|
636
|
+
console.log(currentGroupBlocks);
|
630
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: {
|
631
638
|
marginTop: margin[1] + "px",
|
632
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,154 +161,184 @@ 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
|
}
|
180
|
+
if (bulkBlocks.length === 0) {
|
181
|
+
return blockStructure;
|
182
|
+
}
|
158
183
|
// Remove bulk blocks from target's children
|
159
|
-
targetBlock.children = targetBlock.children.filter(function (child) { return !bulkIds.includes(child.
|
184
|
+
targetBlock.children = targetBlock.children.filter(function (child) { return !bulkIds.includes(child.blockId); });
|
160
185
|
// Create the new bulkBlock
|
161
186
|
var bulkBlock = {
|
162
|
-
|
163
|
-
|
187
|
+
blockId: 'BULK',
|
188
|
+
type: 'GROUP_BLOCK',
|
189
|
+
zOrderDesktopInternal: zIndexMap.BULK,
|
190
|
+
zOrderMobileInternal: zIndexMap.BULK,
|
164
191
|
children: bulkBlocks,
|
165
192
|
};
|
166
193
|
// Add the bulkBlock to the target's children
|
167
194
|
targetBlock.children.push(bulkBlock);
|
168
195
|
return structure;
|
169
196
|
};
|
170
|
-
export var getBlockType = function (id) {
|
171
|
-
if (id.startsWith('GB_')) {
|
172
|
-
return 'GROUP';
|
173
|
-
}
|
174
|
-
else if (id.startsWith('CB_')) {
|
175
|
-
return 'COMPONENT_BLOCK';
|
176
|
-
}
|
177
|
-
else if (id === 'BULK') {
|
178
|
-
return 'BULK';
|
179
|
-
}
|
180
|
-
return 'UNKNOWN'; // 잘못된 ID 형식의 경우
|
181
|
-
};
|
182
|
-
// 사용 예시:
|
183
197
|
export var blockStructure = [
|
184
198
|
{
|
185
|
-
|
186
|
-
|
199
|
+
blockId: 'ROOT',
|
200
|
+
type: 'GROUP_BLOCK',
|
201
|
+
zOrderDesktopInternal: null,
|
202
|
+
zOrderMobileInternal: null,
|
187
203
|
children: [
|
188
204
|
{
|
189
|
-
|
190
|
-
|
205
|
+
blockId: 'GB_2',
|
206
|
+
type: 'GROUP_BLOCK',
|
207
|
+
zOrderDesktopInternal: null,
|
208
|
+
zOrderMobileInternal: null,
|
191
209
|
children: [
|
192
210
|
{
|
193
|
-
|
194
|
-
|
211
|
+
blockId: 'GB_3',
|
212
|
+
type: 'GROUP_BLOCK',
|
213
|
+
zOrderDesktopInternal: null,
|
214
|
+
zOrderMobileInternal: null,
|
195
215
|
children: [
|
196
216
|
{
|
197
|
-
|
198
|
-
|
217
|
+
blockId: 'CB_4',
|
218
|
+
type: 'COMPONENT_BLOCK',
|
219
|
+
zOrderDesktopInternal: null,
|
220
|
+
zOrderMobileInternal: null,
|
221
|
+
componentBlockId: 4
|
199
222
|
},
|
200
223
|
{
|
201
|
-
|
202
|
-
|
224
|
+
blockId: 'CB_5',
|
225
|
+
type: 'COMPONENT_BLOCK',
|
226
|
+
zOrderDesktopInternal: null,
|
227
|
+
zOrderMobileInternal: null,
|
228
|
+
componentBlockId: 5
|
203
229
|
},
|
204
230
|
{
|
205
|
-
|
206
|
-
|
231
|
+
blockId: 'GB_6',
|
232
|
+
type: 'GROUP_BLOCK',
|
233
|
+
zOrderDesktopInternal: null,
|
234
|
+
zOrderMobileInternal: null,
|
207
235
|
children: [
|
208
236
|
{
|
209
|
-
|
210
|
-
|
237
|
+
blockId: 'CB_7',
|
238
|
+
type: 'COMPONENT_BLOCK',
|
239
|
+
zOrderDesktopInternal: null,
|
240
|
+
zOrderMobileInternal: null,
|
241
|
+
componentBlockId: 7
|
211
242
|
},
|
212
243
|
{
|
213
|
-
|
214
|
-
|
244
|
+
blockId: 'CB_8',
|
245
|
+
type: 'COMPONENT_BLOCK',
|
246
|
+
zOrderDesktopInternal: null,
|
247
|
+
zOrderMobileInternal: null,
|
248
|
+
componentBlockId: 8
|
215
249
|
},
|
216
250
|
{
|
217
|
-
|
218
|
-
|
251
|
+
blockId: 'GB_9',
|
252
|
+
type: 'GROUP_BLOCK',
|
253
|
+
zOrderDesktopInternal: null,
|
254
|
+
zOrderMobileInternal: null,
|
219
255
|
children: [
|
220
256
|
{
|
221
|
-
|
222
|
-
|
257
|
+
blockId: 'CB_10',
|
258
|
+
type: 'COMPONENT_BLOCK',
|
259
|
+
zOrderDesktopInternal: null,
|
260
|
+
zOrderMobileInternal: null,
|
261
|
+
componentBlockId: 10
|
223
262
|
},
|
224
263
|
{
|
225
|
-
|
226
|
-
|
264
|
+
blockId: 'CB_11',
|
265
|
+
type: 'COMPONENT_BLOCK',
|
266
|
+
zOrderDesktopInternal: null,
|
267
|
+
zOrderMobileInternal: null,
|
268
|
+
componentBlockId: 11
|
227
269
|
}
|
228
270
|
]
|
229
|
-
}
|
271
|
+
}
|
230
272
|
]
|
231
|
-
}
|
273
|
+
}
|
232
274
|
]
|
233
275
|
},
|
234
276
|
{
|
235
|
-
|
236
|
-
|
277
|
+
blockId: 'GB_12',
|
278
|
+
type: 'GROUP_BLOCK',
|
279
|
+
zOrderDesktopInternal: null,
|
280
|
+
zOrderMobileInternal: null,
|
237
281
|
children: [
|
238
282
|
{
|
239
|
-
|
240
|
-
|
283
|
+
blockId: 'CB_13',
|
284
|
+
type: 'COMPONENT_BLOCK',
|
285
|
+
zOrderDesktopInternal: null,
|
286
|
+
zOrderMobileInternal: null,
|
287
|
+
componentBlockId: 13
|
241
288
|
},
|
242
289
|
{
|
243
|
-
|
244
|
-
|
290
|
+
blockId: 'CB_14',
|
291
|
+
type: 'COMPONENT_BLOCK',
|
292
|
+
zOrderDesktopInternal: null,
|
293
|
+
zOrderMobileInternal: null,
|
294
|
+
componentBlockId: 14
|
245
295
|
}
|
246
296
|
]
|
247
297
|
},
|
248
298
|
{
|
249
|
-
|
250
|
-
|
299
|
+
blockId: 'CB_15',
|
300
|
+
type: 'COMPONENT_BLOCK',
|
301
|
+
zOrderDesktopInternal: null,
|
302
|
+
zOrderMobileInternal: null,
|
303
|
+
componentBlockId: 15
|
251
304
|
},
|
252
305
|
{
|
253
|
-
|
254
|
-
|
306
|
+
blockId: 'CB_16',
|
307
|
+
type: 'COMPONENT_BLOCK',
|
308
|
+
zOrderDesktopInternal: null,
|
309
|
+
zOrderMobileInternal: null,
|
310
|
+
componentBlockId: 16
|
255
311
|
}
|
256
312
|
]
|
257
313
|
},
|
258
314
|
{
|
259
|
-
|
260
|
-
|
315
|
+
blockId: 'GB_17',
|
316
|
+
type: 'GROUP_BLOCK',
|
317
|
+
zOrderDesktopInternal: null,
|
318
|
+
zOrderMobileInternal: null,
|
261
319
|
children: [
|
262
|
-
// {
|
263
|
-
// id: '6',
|
264
|
-
// name: 'GroupBlock',
|
265
|
-
// children: [
|
266
|
-
// {
|
267
|
-
// id: '7',
|
268
|
-
// name: 'ComponentBlock'
|
269
|
-
// },
|
270
|
-
// {
|
271
|
-
// id: '8',
|
272
|
-
// name: 'ComponentBlock'
|
273
|
-
// }
|
274
|
-
// ]
|
275
|
-
// },
|
276
320
|
{
|
277
|
-
|
278
|
-
|
321
|
+
blockId: 'CB_18',
|
322
|
+
type: 'COMPONENT_BLOCK',
|
323
|
+
zOrderDesktopInternal: null,
|
324
|
+
zOrderMobileInternal: null,
|
325
|
+
componentBlockId: 18
|
279
326
|
}
|
280
327
|
]
|
281
328
|
},
|
282
329
|
{
|
283
|
-
|
284
|
-
|
330
|
+
blockId: 'CB_19',
|
331
|
+
type: 'COMPONENT_BLOCK',
|
332
|
+
zOrderDesktopInternal: null,
|
333
|
+
zOrderMobileInternal: null,
|
334
|
+
componentBlockId: 19
|
285
335
|
},
|
286
336
|
{
|
287
|
-
|
288
|
-
|
337
|
+
blockId: 'CB_20',
|
338
|
+
type: 'COMPONENT_BLOCK',
|
339
|
+
zOrderDesktopInternal: null,
|
340
|
+
zOrderMobileInternal: null,
|
341
|
+
componentBlockId: 20
|
289
342
|
}
|
290
343
|
]
|
291
344
|
}
|
@@ -74,10 +74,12 @@ export type ReactGridLayoutProps = {
|
|
74
74
|
customColWidth?: number;
|
75
75
|
onFitToContent?: OnFitContentCallBack;
|
76
76
|
blockStructure?: Block[];
|
77
|
-
onDoubleClickGroup?: (id: string) => void;
|
78
|
-
selectedGroupBlock?: string;
|
79
|
-
|
77
|
+
onDoubleClickGroup?: (e: React.MouseEvent, id: string, type: string) => void;
|
78
|
+
selectedGroupBlock?: 'ROOT' | string;
|
79
|
+
editingGroupBlock?: 'ROOT' | string;
|
80
|
+
onClickGroup?: (e: React.MouseEvent, id: string, type: string) => void;
|
80
81
|
bulkIds?: string[];
|
82
|
+
onDoubleClickOutsideGroup: () => void;
|
81
83
|
};
|
82
84
|
export type DragOverEvent = MouseEvent & {
|
83
85
|
nativeEvent: {
|
@@ -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) {
|