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.
@@ -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
- type GroupItemProp = {
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, onDoubleClick = props.onDoubleClick, onClick = props.onClick;
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, { onClick: handleClick, onDoubleClick: handleDoubleClick, disabled: !isDraggable, onStart: onDragStart, onDrag: onDrag, onStop: onDragStop, handle: handle, cancel: ".react-resizable-handle" + (cancel ? "," + cancel : ""), scale: transformScale, nodeRef: elementRef, children: child }));
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-grid-id': i,
398
- className: classNames("react-grid-item", child.props.className, className, {
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, getBlockType } from "./group";
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.selectedGroupBlock, selectedGroupBlock = _0 === void 0 ? '1' : _0, onClickGroup = props.onClickGroup, bulkIds = props.bulkIds;
52
- var _1 = useState(), activeDrag = _1[0], setActiveDrag = _1[1];
53
- var _2 = useState(), oldDragItem = _2[0], setOldDragItem = _2[1];
54
- var _3 = useState(), oldLayout = _3[0], setOldLayout = _3[1];
55
- var _4 = useState(), oldResizeItem = _4[0], setOldResizeItem = _4[1];
56
- var _5 = useState(), droppingDOMNode = _5[0], setDroppingDOMNode = _5[1];
57
- var _6 = useState(), droppingPosition = _6[0], setDroppingPosition = _6[1];
58
- 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];
59
60
  // const [selectedGroup, setSelectedGroup] = useState<string>('1');
60
- var editableItems = blockStructure ? findChildrenIds(blockStructure, selectedGroupBlock) : [];
61
- var _8 = useState([]), oldGroupChildren = _8[0], setOldGroupChildren = _8[1];
62
- var _9 = useState(function () {
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 = _9[0], setLayout = _9[1];
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
- 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));
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.id);
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.id === selectedGroupBlock;
582
- var type = getBlockType(block.id);
600
+ var isEditingGroup = block.blockId === editingGroupBlock;
601
+ var type = getBlockSpecificType(block);
602
+ var isRoot = editingGroupBlock === 'ROOT';
583
603
  var z = (function () {
584
- if (isEditingGroup && type === 'GROUP') {
585
- return 1000 + groupItem.z;
604
+ if (!isRoot && type === 'GROUP_BLOCK') {
605
+ return zIndexMap.EDITING_GROUP;
586
606
  }
587
- if (type === 'GROUP') {
588
- return 1000;
607
+ if (type === 'GROUP_BLOCK') {
608
+ return zIndexMap.GROUP;
589
609
  }
590
610
  if (type === 'BULK') {
591
- return 9999;
611
+ return zIndexMap.BULK;
592
612
  }
593
- return 1000;
613
+ return zIndexMap.CB;
594
614
  })();
595
- var handleClick = function (id) {
596
- onClickGroup && onClickGroup(id);
615
+ var handleClick = function (e) {
616
+ onClickGroup && onClickGroup(e, block.blockId, type);
597
617
  };
598
- var handleDoubleClick = function (id) {
599
- if (type === 'GROUP') {
600
- onDoubleClickGroup && onDoubleClickGroup(id);
601
- }
618
+ var handleDoubleClick = function (e) {
619
+ onDoubleClickGroup && onDoubleClickGroup(e, block.blockId, type);
602
620
  };
603
- return (
604
- // <OutsideClickHandler onOutsideClick={() => {
605
- // if (isEditingGroup) {
606
- // const parent = findParentGroupByGroupId(blockStructure, block.id)
607
- // parent && setSelectedGroup(parent)
608
- // if (parent === null) {
609
- // setSelectedGroup('1')
610
- // }
611
- // }
612
- // }}>
613
- _jsx(GroupItem, { className: isEditingGroup ? 'group editing' : type.toLocaleLowerCase(), onClick: handleClick, onDoubleClick: handleDoubleClick, containerWidth: width, cols: cols, margin: margin, containerPadding: containerPadding || margin, maxRows: maxRows, rowHeight: rowHeight, cancel: draggableCancel, handle: draggableHandle, onDragStop: onDragStopHandler, onDragStart: onDragStartHandler, onDrag: onDragHandler, onResizeStart: onResizeStartHandler, onResize: onResizeHandler, onResizeStop: onResizeStopHandler, onFitToContent: onFitToContentHandler, isDraggable: !viewOnly || !isEditingGroup, isResizable: !viewOnly || !isEditingGroup, isBounded: true, useCSSTransforms: useCSSTransforms && isMounted, usePercentages: !isMounted, transformScale: transformScale, w: groupItem.w, h: groupItem.h, x: groupItem.x, y: groupItem.y, z: z, i: block.id.toString(),
614
- // minH={l.minH}
615
- // minW={l.minW}
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, selectedGroupBlock) : [];
627
- // const groupsParentsGroups = findAllParentGroups(blockStructure, selectedGroup);
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 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,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.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
  }
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.id); });
184
+ targetBlock.children = targetBlock.children.filter(function (child) { return !bulkIds.includes(child.blockId); });
160
185
  // Create the new bulkBlock
161
186
  var bulkBlock = {
162
- id: "BULK",
163
- name: 'BulkBlock',
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
- id: '1',
186
- name: 'RootBlock',
199
+ blockId: 'ROOT',
200
+ type: 'GROUP_BLOCK',
201
+ zOrderDesktopInternal: null,
202
+ zOrderMobileInternal: null,
187
203
  children: [
188
204
  {
189
- id: 'GB_2',
190
- name: 'GroupBlock',
205
+ blockId: 'GB_2',
206
+ type: 'GROUP_BLOCK',
207
+ zOrderDesktopInternal: null,
208
+ zOrderMobileInternal: null,
191
209
  children: [
192
210
  {
193
- id: 'GB_3',
194
- name: 'GroupBlock',
211
+ blockId: 'GB_3',
212
+ type: 'GROUP_BLOCK',
213
+ zOrderDesktopInternal: null,
214
+ zOrderMobileInternal: null,
195
215
  children: [
196
216
  {
197
- id: 'CB_4',
198
- name: 'ComponentBlock'
217
+ blockId: 'CB_4',
218
+ type: 'COMPONENT_BLOCK',
219
+ zOrderDesktopInternal: null,
220
+ zOrderMobileInternal: null,
221
+ componentBlockId: 4
199
222
  },
200
223
  {
201
- id: 'CB_5',
202
- name: 'ComponentBlock'
224
+ blockId: 'CB_5',
225
+ type: 'COMPONENT_BLOCK',
226
+ zOrderDesktopInternal: null,
227
+ zOrderMobileInternal: null,
228
+ componentBlockId: 5
203
229
  },
204
230
  {
205
- id: 'GB_6',
206
- name: 'GroupBlock',
231
+ blockId: 'GB_6',
232
+ type: 'GROUP_BLOCK',
233
+ zOrderDesktopInternal: null,
234
+ zOrderMobileInternal: null,
207
235
  children: [
208
236
  {
209
- id: 'CB_7',
210
- name: 'ComponentBlock'
237
+ blockId: 'CB_7',
238
+ type: 'COMPONENT_BLOCK',
239
+ zOrderDesktopInternal: null,
240
+ zOrderMobileInternal: null,
241
+ componentBlockId: 7
211
242
  },
212
243
  {
213
- id: 'CB_8',
214
- name: 'ComponentBlock'
244
+ blockId: 'CB_8',
245
+ type: 'COMPONENT_BLOCK',
246
+ zOrderDesktopInternal: null,
247
+ zOrderMobileInternal: null,
248
+ componentBlockId: 8
215
249
  },
216
250
  {
217
- id: 'GB_9',
218
- name: 'GroupBlock',
251
+ blockId: 'GB_9',
252
+ type: 'GROUP_BLOCK',
253
+ zOrderDesktopInternal: null,
254
+ zOrderMobileInternal: null,
219
255
  children: [
220
256
  {
221
- id: 'CB_10',
222
- name: 'ComponentBlock'
257
+ blockId: 'CB_10',
258
+ type: 'COMPONENT_BLOCK',
259
+ zOrderDesktopInternal: null,
260
+ zOrderMobileInternal: null,
261
+ componentBlockId: 10
223
262
  },
224
263
  {
225
- id: 'CB_11',
226
- name: 'ComponentBlock'
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
- id: 'GB_12',
236
- name: 'GroupBlock',
277
+ blockId: 'GB_12',
278
+ type: 'GROUP_BLOCK',
279
+ zOrderDesktopInternal: null,
280
+ zOrderMobileInternal: null,
237
281
  children: [
238
282
  {
239
- id: 'CB_13',
240
- name: 'ComponentBlock'
283
+ blockId: 'CB_13',
284
+ type: 'COMPONENT_BLOCK',
285
+ zOrderDesktopInternal: null,
286
+ zOrderMobileInternal: null,
287
+ componentBlockId: 13
241
288
  },
242
289
  {
243
- id: 'CB_14',
244
- name: 'ComponentBlock'
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
- id: 'CB_15',
250
- name: 'ComponentBlock'
299
+ blockId: 'CB_15',
300
+ type: 'COMPONENT_BLOCK',
301
+ zOrderDesktopInternal: null,
302
+ zOrderMobileInternal: null,
303
+ componentBlockId: 15
251
304
  },
252
305
  {
253
- id: 'CB_16',
254
- name: 'ComponentBlock'
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
- id: 'GB_17',
260
- name: 'GroupBlock',
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
- id: 'CB_18',
278
- name: 'ComponentBlock'
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
- id: 'CB_19',
284
- name: 'ComponentBlock'
330
+ blockId: 'CB_19',
331
+ type: 'COMPONENT_BLOCK',
332
+ zOrderDesktopInternal: null,
333
+ zOrderMobileInternal: null,
334
+ componentBlockId: 19
285
335
  },
286
336
  {
287
- id: 'CB_20',
288
- name: 'ComponentBlock'
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
- onClickGroup?: (id: string) => void;
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: "".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.60",
3
+ "version": "0.0.62",
4
4
  "private": false,
5
5
  "main": "dist/lib/index.js",
6
6
  "types": "dist/lib/index.d.js",