publ-echo-test 0.0.58 → 0.0.59

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,6 +260,7 @@ var DraggableCore = function (_a) {
260
260
  onMouseDown: handleMouseDown,
261
261
  onMouseUp: handleMouseUp,
262
262
  onTouchEnd: handleTouchEnd,
263
+ onDoubleClick: props.onDoubleClick,
263
264
  ref: (_b = props.nodeRef) !== null && _b !== void 0 ? _b : draggableCoreRef,
264
265
  });
265
266
  };
@@ -23,6 +23,7 @@ export type DraggableCoreDefaultProps = {
23
23
  onDrag?: DraggableEventHandler | Function;
24
24
  onStop?: DraggableEventHandler | Function;
25
25
  onMouseDown?: (e: MouseEvent) => void;
26
+ onDoubleClick?: any;
26
27
  scale?: number;
27
28
  cancel?: string;
28
29
  children: ReactElement<any>;
@@ -384,6 +384,7 @@ var GridItem = function (_a) {
384
384
  resizing: resizing,
385
385
  }, colWidth);
386
386
  var child = React.Children.only(children);
387
+ // console.log(child.props.className, className)
387
388
  var newChild = React.cloneElement(child, {
388
389
  key: i,
389
390
  ref: elementRef,
@@ -0,0 +1,5 @@
1
+ import React from "react";
2
+ import { GridItemProps } from "./types";
3
+ import { PropsWithChildren } from "../types";
4
+ declare const GroupItem: ({ children, ...props }: PropsWithChildren<GridItemProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
5
+ export default GroupItem;
@@ -0,0 +1,411 @@
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
11
+ };
12
+ var __rest = (this && this.__rest) || function (s, e) {
13
+ var t = {};
14
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
15
+ t[p] = s[p];
16
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
17
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
18
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
19
+ t[p[i]] = s[p[i]];
20
+ }
21
+ return t;
22
+ };
23
+ import { jsx as _jsx } from "react/jsx-runtime";
24
+ import React, { useEffect, useRef, useState } from "react";
25
+ import { DraggableCore } from "../Draggable";
26
+ import classNames from "../../external-lib/classnames";
27
+ import { calcGridColWidth, calcGridItemPosition, calcGridItemWHPx, calcWH, calcXY, clamp, resolveRowHeight, } from "./utils/calculateUtils";
28
+ import { perc, setTopLeft, setTransform, } from "../GridLayoutEditor/utils/renderHelpers";
29
+ import { Resizable } from "../Resizable";
30
+ var GroupItem = function (_a) {
31
+ var _b;
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;
34
+ var _l = useState(), resizing = _l[0], setResizing = _l[1];
35
+ var _m = useState(), dragging = _m[0], setDragging = _m[1];
36
+ var _o = useState(), dragStart = _o[0], setDragStart = _o[1];
37
+ var _p = useState(false), isDragging = _p[0], setIsDragging = _p[1];
38
+ var _q = useState(false), isResizing = _q[0], setIsResizing = _q[1];
39
+ var elementRef = useRef(null);
40
+ var isSelected = (_b = elementRef.current) === null || _b === void 0 ? void 0 : _b.classList.contains('react-grid-item-selected');
41
+ useEffect(function () {
42
+ var _a;
43
+ if (!isSelected || !autoResize) {
44
+ return;
45
+ }
46
+ var targetNode = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.children[0].children[0].children[0];
47
+ if (!targetNode || isDragging || isResizing) {
48
+ return;
49
+ }
50
+ var prevPaddingL = parseFloat(getComputedStyle(targetNode).paddingLeft);
51
+ var prevPaddingR = parseFloat(getComputedStyle(targetNode).paddingRight);
52
+ var prevPaddingT = parseFloat(getComputedStyle(targetNode).paddingTop);
53
+ var prevPaddingB = parseFloat(getComputedStyle(targetNode).paddingBottom);
54
+ // MutationObserver 콜백 함수
55
+ var callback = function (mutationsList) {
56
+ for (var _i = 0, mutationsList_1 = mutationsList; _i < mutationsList_1.length; _i++) {
57
+ var mutation = mutationsList_1[_i];
58
+ var isCharacterChanged = mutation.type === 'characterData';
59
+ var keepWidth = true;
60
+ var hasPaddingChanged = false;
61
+ var height = isCharacterChanged ? mutation.target.parentNode.clientHeight : mutation.target.clientHeight;
62
+ var width = targetNode.clientWidth;
63
+ if (!isCharacterChanged && mutation.target instanceof Element) {
64
+ var styles = getComputedStyle(mutation.target);
65
+ var minWidth = parseFloat(styles.minWidth);
66
+ if (minWidth > width) {
67
+ keepWidth = false;
68
+ }
69
+ // NOTE: POC
70
+ var paddingL = parseFloat(styles.paddingLeft);
71
+ var paddingR = parseFloat(styles.paddingRight);
72
+ var paddingT = parseFloat(styles.paddingTop);
73
+ var paddingB = parseFloat(styles.paddingBottom);
74
+ if (prevPaddingL !== paddingL || prevPaddingR !== paddingR || prevPaddingT !== paddingT || prevPaddingB !== paddingB) {
75
+ hasPaddingChanged = true;
76
+ keepWidth = false;
77
+ }
78
+ }
79
+ var prevW = props.w;
80
+ var prevH = props.h;
81
+ var _a = calcWH(getPositionParams(), {
82
+ width: width,
83
+ height: height,
84
+ }, x, y, 'e', props.w, props.h, false), w_1 = _a.w, h_1 = _a.h;
85
+ if (keepWidth) {
86
+ w_1 = prevW;
87
+ }
88
+ if (prevH > h_1) {
89
+ h_1 = prevH;
90
+ }
91
+ var _b = getResizableXYPosition('e', w_1, h_1, prevW, prevH), newX = _b.newX, newY = _b.newY;
92
+ if (prevH === h_1 && prevW === w_1 && newX === x && newY === y) {
93
+ return;
94
+ }
95
+ props.onFitToContent && props.onFitToContent(i, w_1, h_1, newX, newY, { hasPaddingChanged: hasPaddingChanged });
96
+ }
97
+ };
98
+ // MutationObserver 인스턴스 생성
99
+ var observer = new MutationObserver(callback);
100
+ // 관찰할 DOM 변이 설정
101
+ var config = { characterData: true, attributes: true, subtree: true };
102
+ // 대상 노드와 설정으로 관찰 시작
103
+ observer.observe(targetNode, config);
104
+ // 정리 함수에서 MutationObserver 해제
105
+ return function () {
106
+ observer.disconnect();
107
+ };
108
+ }, [autoResize, isSelected, isDragging, isResizing, props.w, props.h, x, y]);
109
+ // const moveDroppingItem = (prevProps: GridItemProps) => {
110
+ // const { droppingPosition } = props;
111
+ // if (!droppingPosition) return;
112
+ // const node = elementRef.current;
113
+ // // Can't find DOM node (are we unmounted?)
114
+ // if (!node) return;
115
+ // const prevDroppingPosition = prevProps.droppingPosition || {
116
+ // left: 0,
117
+ // top: 0,
118
+ // };
119
+ // const shouldDrag =
120
+ // (dragging && droppingPosition.left !== prevDroppingPosition.left) ||
121
+ // droppingPosition.top !== prevDroppingPosition.top;
122
+ // if (!dragging) {
123
+ // onDragStart(droppingPosition.e, {
124
+ // node,
125
+ // deltaX: droppingPosition.left,
126
+ // deltaY: droppingPosition.top,
127
+ // });
128
+ // } else if (shouldDrag) {
129
+ // const deltaX = droppingPosition.left - dragging.left;
130
+ // const deltaY = droppingPosition.top - dragging.top;
131
+ // onDrag(droppingPosition.e, {
132
+ // node,
133
+ // deltaX,
134
+ // deltaY,
135
+ // });
136
+ // }
137
+ // };
138
+ var handleDoubleClick = function () {
139
+ (props === null || props === void 0 ? void 0 : props.onDoubleClick) && props.onDoubleClick(props.i);
140
+ };
141
+ var getPositionParams = function (prop) {
142
+ if (prop === void 0) { prop = props; }
143
+ return {
144
+ cols: prop.cols,
145
+ containerPadding: prop.containerPadding,
146
+ containerWidth: prop.containerWidth,
147
+ margin: prop.margin,
148
+ maxRows: prop.maxRows,
149
+ rowHeight: prop.rowHeight,
150
+ };
151
+ };
152
+ var colWidth = customColWidth !== null && customColWidth !== void 0 ? customColWidth : calcGridColWidth(getPositionParams());
153
+ var createStyle = function (pos) {
154
+ var usePercentages = props.usePercentages, containerWidth = props.containerWidth, useCSSTransforms = props.useCSSTransforms;
155
+ var style;
156
+ if (useCSSTransforms) {
157
+ style = setTransform(pos);
158
+ }
159
+ else {
160
+ style = setTopLeft(pos);
161
+ if (usePercentages) {
162
+ if (containerWidth == null) {
163
+ throw new Error("Container width is missing!");
164
+ }
165
+ style.left = perc(pos.left / containerWidth);
166
+ style.width = perc(pos.width / containerWidth);
167
+ }
168
+ }
169
+ return style;
170
+ };
171
+ /**
172
+ * Mix a Draggable instance into a child.
173
+ * @param {Element} child Child element.
174
+ * @return {Element} Child wrapped in Draggable.
175
+ */
176
+ var mixinDraggable = function (child, isDraggable) {
177
+ return (_jsx(DraggableCore, { onDoubleClick: handleDoubleClick, disabled: !isDraggable, onStart: onDragStart, onDrag: onDrag, onStop: onDragStop, handle: handle, cancel: ".react-resizable-handle" + (cancel ? "," + cancel : ""), scale: transformScale, nodeRef: elementRef, children: child }));
178
+ };
179
+ /**
180
+ * Mix a Resizable instance into a child.
181
+ * @param {Element} child Child element.
182
+ * @param {Object} position Position object (pixel values)
183
+ * @return {Element} Child wrapped in Resizable.
184
+ */
185
+ var mixinResizable = function (child, position, isResizable) {
186
+ var positionParams = getPositionParams();
187
+ // const maxWidth = calcGridItemPosition(
188
+ // positionParams,
189
+ // x,
190
+ // y,
191
+ // z,
192
+ // cols - x, // TODO - 수정 필요
193
+ // h
194
+ // ).width;
195
+ var mins = calcGridItemPosition(positionParams, x, y, z, minW, minH);
196
+ var maxes = calcGridItemPosition(positionParams, x, y, z, maxW, maxH);
197
+ var minConstraints = [mins.width, mins.height];
198
+ var maxConstraints = [
199
+ Math.min(maxes.width, containerWidth),
200
+ Math.min(maxes.height, Infinity),
201
+ ];
202
+ return (_jsx(Resizable, { draggableOpts: {
203
+ disabled: !isResizable,
204
+ }, className: "react-resizable-hide", width: position.width, height: position.height, top: position.top, left: position.left, onResizeStop: onResizeStop, onResizeStart: onResizeStart, onResize: onResize, minConstraints: minConstraints, maxConstraints: maxConstraints, transformScale: transformScale, isResizing: isResizing, autoResize: autoResize, colWidth: colWidth, margin: props.margin, children: child }));
205
+ };
206
+ /**
207
+ * onDragStart event handler
208
+ * @param {Event} e event data
209
+ * @param {Object} callbackData an object with node, delta and position information
210
+ */
211
+ var onDragStart = function (e, _a) {
212
+ var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
213
+ var newPosition = { top: 0, left: 0 };
214
+ var offsetParent = node.offsetParent;
215
+ if (!offsetParent)
216
+ return;
217
+ var parentRect = offsetParent.getBoundingClientRect();
218
+ var clientRect = node.getBoundingClientRect();
219
+ var cLeft = clientRect.left / transformScale;
220
+ var pLeft = parentRect.left / transformScale;
221
+ var cTop = clientRect.top / transformScale;
222
+ var pTop = parentRect.top / transformScale;
223
+ newPosition.left = cLeft - pLeft + offsetParent.scrollLeft;
224
+ newPosition.top = cTop - pTop + offsetParent.scrollTop;
225
+ setDragging(newPosition);
226
+ var _b = calcXY(getPositionParams(), newPosition.top, newPosition.left, props.w, props.h), x = _b.x, y = _b.y;
227
+ setDragStart({ x: x, y: y });
228
+ props.onDragStart &&
229
+ props.onDragStart(props.i, x, y, { e: e, node: node, newPosition: newPosition }, true);
230
+ };
231
+ /**
232
+ * onDrag event handler
233
+ * @param {Event} e event data
234
+ * @param {Object} callbackData an object with node, delta and position information
235
+ */
236
+ var onDrag = function (e, _a) {
237
+ var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
238
+ if (!dragging) {
239
+ throw new Error("onDrag called before onDragStart.");
240
+ }
241
+ setIsDragging(true);
242
+ var top = dragging.top + deltaY;
243
+ var left = dragging.left + deltaX;
244
+ var isBounded = props.isBounded, i = props.i, w = props.w, h = props.h, containerWidth = props.containerWidth;
245
+ var positionParams = getPositionParams();
246
+ if (isBounded) {
247
+ var offsetParent = node.offsetParent;
248
+ if (offsetParent) {
249
+ var margin = props.margin, rowHeight = props.rowHeight;
250
+ // const colWidth = calcGridColWidth(positionParams);
251
+ var rowHeightNumber = resolveRowHeight(rowHeight, colWidth);
252
+ var bottomBoundary = offsetParent.clientHeight -
253
+ calcGridItemWHPx(h, rowHeightNumber, margin[1]);
254
+ top = clamp(top, 0, bottomBoundary);
255
+ var rightBoundary = containerWidth - calcGridItemWHPx(w, colWidth, margin[0]);
256
+ left = clamp(left, 0, rightBoundary);
257
+ }
258
+ }
259
+ var newPosition = { top: top, left: left };
260
+ setDragging(newPosition);
261
+ var _b = calcXY(positionParams, top, left, w, h), x = _b.x, y = _b.y;
262
+ props.onDrag && props.onDrag(i, x, y, { e: e, node: node, newPosition: newPosition }, true);
263
+ };
264
+ /**
265
+ * onDragStop event handler
266
+ * @param {Event} e event data
267
+ * @param {Object} callbackData an object with node, delta and position information
268
+ */
269
+ var onDragStop = function (e, _a) {
270
+ var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
271
+ if (!dragging) {
272
+ throw new Error("onDragEnd called before onDragStart.");
273
+ }
274
+ var w = props.w, h = props.h, i = props.i;
275
+ var left = dragging.left, top = dragging.top;
276
+ var _b = calcXY(getPositionParams(), top, left, w, h), x = _b.x, y = _b.y;
277
+ var newPosition = { top: top, left: left };
278
+ var change = (dragStart === null || dragStart === void 0 ? void 0 : dragStart.x) !== x || (dragStart === null || dragStart === void 0 ? void 0 : dragStart.y) !== y;
279
+ setDragging(undefined);
280
+ setDragStart(undefined);
281
+ setIsDragging(false);
282
+ props.onDragStop &&
283
+ props.onDragStop(i, x, y, { e: e, node: node, newPosition: newPosition, change: change });
284
+ };
285
+ var getResizableXYPosition = function (handle, width, height, prevW, prevH) {
286
+ var newX = x;
287
+ var newY = y;
288
+ if (handle === "nw") {
289
+ // NOTE - nw left(X)와 top(Y) 둘다 변경
290
+ if (width > prevW) {
291
+ newX = x - (width - prevW);
292
+ }
293
+ else {
294
+ newX = x + (prevW - width);
295
+ }
296
+ if (height > prevH) {
297
+ newY = y - (height - prevH);
298
+ }
299
+ else {
300
+ newY = y + (prevH - height);
301
+ }
302
+ }
303
+ if (handle === "n" || handle === "ne") {
304
+ // NOTE - n, ne left(X) 고정 & top(Y) 변경
305
+ if (height > prevH) {
306
+ newY = y - (height - prevH);
307
+ }
308
+ else {
309
+ newY = y + (prevH - height);
310
+ }
311
+ }
312
+ if (handle === "w" || handle === "sw") {
313
+ // NOTE - s, sw left(X) 변경 top(Y) 고정
314
+ if (width > prevW) {
315
+ newX = x - (width - prevW);
316
+ }
317
+ else {
318
+ newX = x + (prevW - width);
319
+ }
320
+ }
321
+ return { newX: newX, newY: newY };
322
+ };
323
+ /**
324
+ * onResizeStart event handler
325
+ * @param {ResizeEventType} e event data
326
+ * @param {Object} callbackData an object with node and size information
327
+ */
328
+ var onResizeStart = function (e, callbackData) {
329
+ onResizeHandler(e, callbackData, "onResizeStart");
330
+ };
331
+ /**
332
+ * onResize event handler
333
+ * @param {ResizeEventType} e event data
334
+ * @param {Object} callbackData an object with node and size information
335
+ */
336
+ var onResize = function (e, callbackData) {
337
+ setIsResizing(true);
338
+ onResizeHandler(e, callbackData, "onResize");
339
+ };
340
+ /**
341
+ * onResizeStop event handler
342
+ * @param {ResizeEventType} e event data
343
+ * @param {Object} callbackData an object with node and size information
344
+ */
345
+ var onResizeStop = function (e, callbackData) {
346
+ setIsResizing(false);
347
+ onResizeHandler(e, callbackData, "onResizeStop");
348
+ };
349
+ /**
350
+ * Wrapper around drag events to provide more useful data.
351
+ * All drag events call the function with the given handler name,
352
+ * with the signature (index, x, y).
353
+ *
354
+ * @param {String} handlerName Handler name to wrap.
355
+ * @return {Function} Handler function.
356
+ */
357
+ var onResizeHandler = function (e, _a, handlerName) {
358
+ var node = _a.node, size = _a.size, handle = _a.handle, minWidth = _a.minWidth, minHeight = _a.minHeight;
359
+ var handler = props[handlerName];
360
+ if (!handler)
361
+ return;
362
+ var prevW = props.w, prevH = props.h;
363
+ // Get new XY
364
+ var _b = calcWH(getPositionParams(), size, x, y, handle, prevW, prevH, true), w = _b.w, h = _b.h;
365
+ var tempMinH = minH;
366
+ if (minWidth) {
367
+ var _c = calcWH(getPositionParams(), __assign(__assign({}, size), { width: minWidth, height: minHeight !== null && minHeight !== void 0 ? minHeight : 0 }), x, y, handle, prevW, prevH, true), minW_1 = _c.w, newMinH = _c.h;
368
+ if (minW_1 > w) {
369
+ w = minW_1;
370
+ }
371
+ if (minH > 1) {
372
+ tempMinH = Math.max(1, newMinH);
373
+ }
374
+ }
375
+ // minW should be at least 1
376
+ // minW = Math.max(minW, 1);
377
+ // maxW should be at most (cols - x)
378
+ // maxW = Math.min(maxW, cols - x);
379
+ w = clamp(w, minW, maxW);
380
+ h = clamp(h, tempMinH, maxH);
381
+ setResizing(handlerName === "onResizeStop" ? undefined : size);
382
+ var _d = getResizableXYPosition(handle, w, h, prevW, prevH), newX = _d.newX, newY = _d.newY;
383
+ handler(i, w, h, { e: e, node: node, size: size }, newX, newY);
384
+ };
385
+ var pos = calcGridItemPosition(getPositionParams(), x, y, z, w, h, {
386
+ dragging: dragging,
387
+ resizing: resizing,
388
+ }, colWidth);
389
+ var child = React.Children.only(children);
390
+ // console.log(child, className)
391
+ var newChild = React.cloneElement(child, {
392
+ key: i,
393
+ ref: elementRef,
394
+ 'data-grid-id': i,
395
+ className: classNames("react-grid-item", child.props.className, className, {
396
+ static: props.static,
397
+ isResizing: Boolean(resizing) && Boolean(isResizing) && Boolean(isHiddenVisibility),
398
+ resizing: Boolean(resizing),
399
+ "react-draggable": isDraggable,
400
+ isDragging: Boolean(isDragging) && Boolean(dragging) && Boolean(isHiddenVisibility),
401
+ "react-draggable-dragging": Boolean(dragging),
402
+ // dropping: Boolean(droppingPosition),
403
+ cssTransforms: useCSSTransforms,
404
+ }),
405
+ style: __assign(__assign(__assign({}, props.style), child.props.style), createStyle(pos)),
406
+ });
407
+ newChild = mixinResizable(newChild, pos, isResizable);
408
+ newChild = mixinDraggable(newChild, isDraggable);
409
+ return newChild;
410
+ };
411
+ export default GroupItem;
@@ -0,0 +1,7 @@
1
+ import React from 'react';
2
+ type OutsideClickHandlerProps = {
3
+ children: React.ReactNode;
4
+ onOutsideClick: () => void;
5
+ };
6
+ declare const OutsideClickHandler: React.FC<OutsideClickHandlerProps>;
7
+ export default OutsideClickHandler;
@@ -0,0 +1,23 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { useEffect, useRef } from 'react';
3
+ var OutsideClickHandler = function (_a) {
4
+ var children = _a.children, onOutsideClick = _a.onOutsideClick;
5
+ var wrapperRef = useRef(null);
6
+ useEffect(function () {
7
+ var handleClickOutside = function (e) {
8
+ var target = e.target;
9
+ if (target.closest('.editable-grid-item') || target.closest('.group') || target.closest('.placeholder')) {
10
+ return;
11
+ }
12
+ if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
13
+ onOutsideClick(); // div 외부를 클릭했을 때 실행
14
+ }
15
+ };
16
+ document.addEventListener('dblclick', handleClickOutside);
17
+ return function () {
18
+ document.removeEventListener('dblclick', handleClickOutside);
19
+ };
20
+ }, [onOutsideClick]);
21
+ return _jsx("div", { ref: wrapperRef, children: children });
22
+ };
23
+ export default OutsideClickHandler;
@@ -16,7 +16,7 @@ export type GridDragEvent = {
16
16
  node: HTMLElement;
17
17
  newPosition: PartialPosition;
18
18
  };
19
- export type GridItemCallback<Data extends GridDragEvent | GridResizeEvent> = (i: string, x: number, y: number, data: Data) => void;
19
+ export type GridItemCallback<Data extends GridDragEvent | GridResizeEvent> = (i: string, x: number, y: number, data: Data, isGroup?: boolean) => void;
20
20
  type ResizeGridItemCallback<Data extends GridDragEvent | GridResizeEvent> = (i: string, w: number, h: number, data: Data, x: number, y: number) => void;
21
21
  export type GridDragStopEvent = GridDragEvent & {
22
22
  change: boolean;
@@ -78,6 +78,7 @@ export type GridItemProps = {
78
78
  onFitToContent?: (i: string, w: number, h: number, x: number, y: number, { hasPaddingChanged }: {
79
79
  hasPaddingChanged: boolean;
80
80
  }) => void;
81
+ onDoubleClick?: (id: string) => void;
81
82
  isHiddenVisibility?: boolean;
82
83
  customColWidth?: number;
83
84
  autoResize: boolean;
@@ -29,14 +29,16 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
29
29
  }
30
30
  return to.concat(ar || Array.prototype.slice.call(from));
31
31
  };
32
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
32
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
33
33
  import * as React from "react";
34
34
  import { useState, useRef, useLayoutEffect } from "react";
35
35
  import classNames from "../../external-lib/classnames";
36
- import { bottom, cloneLayoutItem, compact, getAllCollisions, getLayoutItem, moveElement, noop, synchronizeLayoutWithChildren, withLayoutItem, } from "./utils/renderHelpers";
36
+ import { bottom, cloneLayoutItem, compact, getAllCollisions, getBoundingArea, getLayoutItem, moveElement, noop, synchronizeLayoutWithChildren, withLayoutItem, } from "./utils/renderHelpers";
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 } from "./group";
41
+ import GroupItem from "../GridItem/GroupItem";
40
42
  var layoutClassName = "react-grid-layout";
41
43
  var ReactGridLayout = function (_a) {
42
44
  var children = _a.children, props = __rest(_a, ["children"]);
@@ -46,17 +48,20 @@ var ReactGridLayout = function (_a) {
46
48
  w: 1,
47
49
  } : _w, // TODO fix
48
50
  _x = props.resizeHandles, // TODO fix
49
- 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;
50
- var _0 = useState(), activeDrag = _0[0], setActiveDrag = _0[1];
51
- var _1 = useState(), oldDragItem = _1[0], setOldDragItem = _1[1];
52
- var _2 = useState(), oldLayout = _2[0], setOldLayout = _2[1];
53
- var _3 = useState(), oldResizeItem = _3[0], setOldResizeItem = _3[1];
54
- var _4 = useState(), droppingDOMNode = _4[0], setDroppingDOMNode = _4[1];
55
- var _5 = useState(), droppingPosition = _5[0], setDroppingPosition = _5[1];
56
- var _6 = useState(false), isMounted = _6[0], setIsMounted = _6[1];
57
- var _7 = useState(function () {
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;
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];
59
+ // 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 () {
58
63
  return synchronizeLayoutWithChildren(props.layout || [], children, cols, compactType, allowOverlap);
59
- }), layout = _7[0], setLayout = _7[1];
64
+ }), layout = _9[0], setLayout = _9[1];
60
65
  var dragEnterCounter = useRef(0);
61
66
  useLayoutEffect(function () {
62
67
  setIsMounted(true);
@@ -129,13 +134,25 @@ var ReactGridLayout = function (_a) {
129
134
  * @param {Event} e The mousedown event
130
135
  * @param {Element} node The current dragging DOM element
131
136
  */
132
- var onDragStartHandler = function (i, x, y, _a) {
137
+ var onDragStartHandler = function (i, x, y, _a, isGroup) {
138
+ var _b;
133
139
  var e = _a.e, node = _a.node;
134
- var l = getLayoutItem(layout, i);
140
+ var l = (_b = getLayoutItem(layout, i)) !== null && _b !== void 0 ? _b : { i: i, x: x, y: y, w: 1, h: 1 };
135
141
  if (!l)
136
142
  return;
137
143
  setOldDragItem(cloneLayoutItem(l));
138
144
  setOldLayout(layout);
145
+ if (isGroup) {
146
+ if (!blockStructure) {
147
+ return;
148
+ }
149
+ var childrenIds = findAllChildrenButGroup(blockStructure, i);
150
+ var children_1 = childrenIds.map(function (id) {
151
+ var item = getLayoutItem(layout, id);
152
+ return cloneLayoutItem(item);
153
+ });
154
+ setOldGroupChildren(children_1);
155
+ }
139
156
  props.onDragStart &&
140
157
  props.onDragStart({
141
158
  layout: layout,
@@ -146,6 +163,32 @@ var ReactGridLayout = function (_a) {
146
163
  node: node,
147
164
  });
148
165
  };
166
+ var onDragStartHandlerGroup = function (i, x, y, _a, isGroup) {
167
+ // const l = getLayoutItem(layout, i);
168
+ var e = _a.e, node = _a.node;
169
+ // if (!l) return;
170
+ // setOldDragItem(cloneLayoutItem(l));
171
+ setOldLayout(layout);
172
+ if (isGroup) {
173
+ if (!blockStructure) {
174
+ return;
175
+ }
176
+ var children_2 = findChildrenIds(blockStructure, i).map(function (id) {
177
+ var item = getLayoutItem(layout, id);
178
+ return cloneLayoutItem(item);
179
+ });
180
+ setOldGroupChildren(children_2);
181
+ }
182
+ // props.onDragStart &&
183
+ // props.onDragStart({
184
+ // layout,
185
+ // prev: l,
186
+ // item: l,
187
+ // placeholder: undefined,
188
+ // e,
189
+ // node,
190
+ // });
191
+ };
149
192
  /**
150
193
  * Each drag movement create a new dragelement and move the element to the dragged location
151
194
  * @param {String} i Id of the child
@@ -154,11 +197,18 @@ var ReactGridLayout = function (_a) {
154
197
  * @param {Event} e The mousedown event
155
198
  * @param {Element} node The current dragging DOM element
156
199
  */
157
- var onDragHandler = function (i, x, y, _a) {
200
+ var onDragHandler = function (i, x, y, _a, isGroup) {
201
+ var _b;
158
202
  var e = _a.e, node = _a.node;
159
- var l = getLayoutItem(layout, i);
203
+ var l = (_b = getLayoutItem(layout, i)) !== null && _b !== void 0 ? _b : { i: i, x: x, y: y, w: 10, h: 10 };
160
204
  if (!l)
161
205
  return;
206
+ if (!oldDragItem) {
207
+ return;
208
+ }
209
+ // console.log(x, y)
210
+ var xgap = x - oldDragItem.x;
211
+ var ygap = y - oldDragItem.y;
162
212
  var placeholder = {
163
213
  w: l.w,
164
214
  h: l.h,
@@ -169,7 +219,7 @@ var ReactGridLayout = function (_a) {
169
219
  i: i,
170
220
  };
171
221
  var isUserAction = true;
172
- var newLayout = moveElement({
222
+ var newLayout = isGroup ? layout : moveElement({
173
223
  layout: layout,
174
224
  l: l,
175
225
  x: x,
@@ -180,6 +230,22 @@ var ReactGridLayout = function (_a) {
180
230
  cols: cols,
181
231
  allowOverlap: allowOverlap,
182
232
  });
233
+ if (isGroup) {
234
+ oldGroupChildren.forEach(function (item) {
235
+ var layoutItem = getLayoutItem(layout, item.i);
236
+ newLayout = moveElement({
237
+ layout: layout,
238
+ l: layoutItem,
239
+ x: item.x + xgap,
240
+ y: item.y + ygap,
241
+ isUserAction: isUserAction,
242
+ preventCollision: preventCollision,
243
+ compactType: compactType,
244
+ cols: cols,
245
+ allowOverlap: allowOverlap,
246
+ });
247
+ });
248
+ }
183
249
  props.onDrag &&
184
250
  props.onDrag({
185
251
  layout: newLayout,
@@ -201,12 +267,13 @@ var ReactGridLayout = function (_a) {
201
267
  * @param {Element} node The current dragging DOM element
202
268
  */
203
269
  var onDragStopHandler = function (i, x, y, _a) {
270
+ var _b;
204
271
  var e = _a.e, node = _a.node;
205
272
  if (!activeDrag || !oldDragItem) {
206
273
  return;
207
274
  }
208
275
  ;
209
- var l = getLayoutItem(layout, i);
276
+ var l = (_b = getLayoutItem(layout, i)) !== null && _b !== void 0 ? _b : { i: i, x: x, y: y, w: 10, h: 10 };
210
277
  if (!l)
211
278
  return;
212
279
  // NOTE: z-index 원래대로 복귀
@@ -240,6 +307,7 @@ var ReactGridLayout = function (_a) {
240
307
  setLayout(newLayout);
241
308
  setOldDragItem(undefined);
242
309
  setOldLayout(undefined);
310
+ setOldGroupChildren([]);
243
311
  props.onLayoutChange && props.onLayoutChange(newLayout);
244
312
  };
245
313
  var onLayoutMaybeChanged = function (newLayout, oldLayout) {
@@ -420,7 +488,9 @@ var ReactGridLayout = function (_a) {
420
488
  : !l.static && isResizable;
421
489
  var resizeHandlesOptions = l.resizeHandles || resizeHandles;
422
490
  var bounded = draggable && isBounded && l.isBounded !== false;
423
- return (_jsx(GridItem, { 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: draggable, isResizable: resizable, isBounded: bounded, useCSSTransforms: useCSSTransforms && isMounted, usePercentages: !isMounted, transformScale: transformScale, w: l.w, h: l.h, x: l.x, y: l.y, z: l.z || 0, 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));
491
+ var editable = editableItems.includes(l.i);
492
+ var z = l.z || 0;
493
+ return (_jsx(GridItem, { className: editable ? 'editable-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 ? 100009 + 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));
424
494
  };
425
495
  var onDragOverHandler = function (e) {
426
496
  var _a;
@@ -488,7 +558,52 @@ var ReactGridLayout = function (_a) {
488
558
  };
489
559
  var mergedClassName = classNames(layoutClassName, className);
490
560
  var mergedStyle = __assign({ height: containerHeight() }, style);
491
- 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: [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: {
561
+ var processGroup = function (block, viewOnly) {
562
+ if (!blockStructure) {
563
+ return;
564
+ }
565
+ var childrenIds = findAllChildrenIds(blockStructure, block.id);
566
+ var groupItem = getBoundingArea(layout, childrenIds);
567
+ // const draggable =
568
+ // typeof l.isDraggable === "boolean"
569
+ // ? l.isDraggable
570
+ // : !l.static && isDraggable;
571
+ // const resizable =
572
+ // typeof l.isResizable === "boolean"
573
+ // ? l.isResizable
574
+ // : !l.static && isResizable;
575
+ // const resizeHandlesOptions = l.resizeHandles || resizeHandles;
576
+ // const bounded = draggable && isBounded && l.isBounded !== false;
577
+ if (!groupItem) {
578
+ return _jsx(_Fragment, {});
579
+ }
580
+ var isEditingGroup = block.id === selectedGroupBlock;
581
+ return (
582
+ // <OutsideClickHandler onOutsideClick={() => {
583
+ // if (isEditingGroup) {
584
+ // const parent = findParentGroupByGroupId(blockStructure, block.id)
585
+ // parent && setSelectedGroup(parent)
586
+ // if (parent === null) {
587
+ // setSelectedGroup('1')
588
+ // }
589
+ // }
590
+ // }}>
591
+ _jsx(GroupItem, { className: isEditingGroup ? 'group editing' : 'group', onDoubleClick: onDoubleClickGroup, 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: (isEditingGroup) ? 100009 : 100009 + groupItem.z, i: block.id.toString(),
592
+ // minH={l.minH}
593
+ // minW={l.minW}
594
+ // maxH={l.maxH}
595
+ // maxW={l.maxW}
596
+ // static={l.static}
597
+ // droppingPosition={isDroppingItem ? droppingPosition : undefined}
598
+ // resizeHandles={resizeHandlesOptions}
599
+ // resizeHandle={resizeHandle}
600
+ isHiddenVisibility: isHiddenVisibility, customColWidth: colWidth, autoResize: false, children: _jsx("div", { onClick: function () { onClickGroup && onClickGroup(block.id); } }) }, block.id)
601
+ // </OutsideClickHandler>
602
+ );
603
+ };
604
+ var currentGroupBlocks = blockStructure ? findGroupBlocks(blockStructure, selectedGroupBlock) : [];
605
+ // const groupsParentsGroups = findAllParentGroups(blockStructure, selectedGroup);
606
+ 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: {
492
607
  marginTop: margin[1] + "px",
493
608
  marginBottom: margin[1] + "px",
494
609
  marginLeft: margin[0] + "px",
@@ -38,7 +38,7 @@ function getIndentationValue(param, breakpoint) {
38
38
  }
39
39
  export var ResponsiveGridLayout = function (_a) {
40
40
  var children = _a.children, props = __rest(_a, ["children"]);
41
- var breakpoint = props.breakpoint, compactType = props.compactType, _b = props.breakpoints, breakpoints = _b === void 0 ? { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 } : _b, _c = props.cols, cols = _c === void 0 ? { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 } : _c, _d = props.containerPadding, containerPadding = _d === void 0 ? {} : _d, _e = props.layouts, layouts = _e === void 0 ? {} : _e, _f = props.width, width = _f === void 0 ? 0 : _f, _g = props.margin, margin = _g === void 0 ? [10, 10] : _g, _h = props.onBreakpointChange, onBreakpointChange = _h === void 0 ? noop : _h, _j = props.onLayoutChange, onLayoutChange = _j === void 0 ? noop : _j, _k = props.onWidthChange, onWidthChange = _k === void 0 ? noop : _k, restProps = __rest(props, ["breakpoint", "compactType", "breakpoints", "cols", "containerPadding", "layouts", "width", "margin", "onBreakpointChange", "onLayoutChange", "onWidthChange"]);
41
+ var breakpoint = props.breakpoint, compactType = props.compactType, _b = props.breakpoints, breakpoints = _b === void 0 ? { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 } : _b, _c = props.cols, cols = _c === void 0 ? { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 } : _c, _d = props.containerPadding, containerPadding = _d === void 0 ? {} : _d, _e = props.layouts, layouts = _e === void 0 ? {} : _e, _f = props.width, width = _f === void 0 ? 0 : _f, _g = props.margin, margin = _g === void 0 ? [10, 10] : _g, _h = props.onBreakpointChange, onBreakpointChange = _h === void 0 ? noop : _h, _j = props.onLayoutChange, onLayoutChange = _j === void 0 ? noop : _j, _k = props.onWidthChange, onWidthChange = _k === void 0 ? noop : _k, zoom = props.zoom, restProps = __rest(props, ["breakpoint", "compactType", "breakpoints", "cols", "containerPadding", "layouts", "width", "margin", "onBreakpointChange", "onLayoutChange", "onWidthChange", "zoom"]);
42
42
  var _l = useState({ width: width, breakpoints: breakpoints, cols: cols }), prevProps = _l[0], setPrevProps = _l[1];
43
43
  var generateInitialState = function () {
44
44
  var breakpoint = getBreakpointFromWidth(breakpoints, width);
@@ -112,6 +112,6 @@ export var ResponsiveGridLayout = function (_a) {
112
112
  var containerPaddingModified = getIndentationValue(containerPadding, newBreakpoint);
113
113
  onWidthChange(width, modifiedMargin, newCols, containerPaddingModified);
114
114
  };
115
- return (_jsx(ReactGridLayout, __assign({}, restProps, { children: children, width: width, margin: getIndentationValue(margin, state.breakpoint), containerPadding: getIndentationValue(containerPadding, state.breakpoint), onLayoutChange: onLayoutChangeHandler, layout: state.layout, cols: state.cols })));
115
+ return (_jsx(ReactGridLayout, __assign({}, restProps, { children: children, width: width, margin: getIndentationValue(margin, state.breakpoint), containerPadding: getIndentationValue(containerPadding, state.breakpoint), onLayoutChange: onLayoutChangeHandler, layout: state.layout, cols: state.cols, transformScale: zoom !== null && zoom !== void 0 ? zoom : 1 })));
116
116
  };
117
117
  export default ResponsiveGridLayout;
@@ -0,0 +1,16 @@
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;
7
+ export declare const findChildrenIds: (blockStructure: Block[], targetId: string) => string[];
8
+ export declare const findAllChildrenIds: (blockStructure: Block[], targetId: string) => string[];
9
+ export declare const findAllParentGroups: (blockStructure: Block[], targetId: string) => Block[];
10
+ export declare const findAllChildrenButGroup: (blockStructure: Block[], targetId: string) => string[];
11
+ export declare const findGroupBlocks: (blockStructure: Block[], targetId: string) => Block[];
12
+ export declare const findAllComponentBlockIds: (blockStructure: Block[]) => string[];
13
+ export declare const findParentGroupByGroupId: (blockStructure: Block[], targetId: string) => string | null;
14
+ export declare const addBlockToRoot: (blockStructure: Block[], newBlock: Block) => Block[];
15
+ export declare const addBulkToTarget: (blockStructure: Block[], targetId: string, bulkIds: string[]) => Block[];
16
+ export declare const blockStructure: Block[];
@@ -0,0 +1,280 @@
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
11
+ };
12
+ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
13
+ if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
14
+ if (ar || !(i in from)) {
15
+ if (!ar) ar = Array.prototype.slice.call(from, 0, i);
16
+ ar[i] = from[i];
17
+ }
18
+ }
19
+ return to.concat(ar || Array.prototype.slice.call(from));
20
+ };
21
+ export var findBlockById = function (blocks, id) {
22
+ for (var _i = 0, blocks_1 = blocks; _i < blocks_1.length; _i++) {
23
+ var block = blocks_1[_i];
24
+ if (block.id === id) {
25
+ return block;
26
+ }
27
+ if (block.children) {
28
+ var found = findBlockById(block.children, id);
29
+ if (found) {
30
+ return found;
31
+ }
32
+ }
33
+ }
34
+ return null;
35
+ };
36
+ export var findChildrenIds = function (blockStructure, targetId) {
37
+ var targetBlock = findBlockById(blockStructure, targetId);
38
+ return targetBlock && targetBlock.children ? targetBlock.children.map(function (child) { return child.id; }) : [];
39
+ };
40
+ export var findAllChildrenIds = function (blockStructure, targetId) {
41
+ var collectChildrenIds = function (block) {
42
+ var ids = [];
43
+ if (block.children) {
44
+ for (var _i = 0, _a = block.children; _i < _a.length; _i++) {
45
+ var child = _a[_i];
46
+ ids.push(child.id);
47
+ ids = ids.concat(collectChildrenIds(child));
48
+ }
49
+ }
50
+ return ids;
51
+ };
52
+ var targetBlock = findBlockById(blockStructure, targetId);
53
+ return targetBlock ? collectChildrenIds(targetBlock) : [];
54
+ };
55
+ export var findAllParentGroups = function (blockStructure, targetId) {
56
+ var findParentGroups = function (blocks, id, parents) {
57
+ if (parents === void 0) { parents = []; }
58
+ for (var _i = 0, blocks_2 = blocks; _i < blocks_2.length; _i++) {
59
+ var block = blocks_2[_i];
60
+ if (block.id === id && block.name === 'GroupBlock') {
61
+ return parents.filter(function (parent) { return parent.name === 'GroupBlock'; });
62
+ }
63
+ if (block.children) {
64
+ var result = findParentGroups(block.children, id, __spreadArray(__spreadArray([], parents, true), [block], false));
65
+ if (result) {
66
+ return result;
67
+ }
68
+ }
69
+ }
70
+ return null;
71
+ };
72
+ return findParentGroups(blockStructure, targetId) || [];
73
+ };
74
+ export var findAllChildrenButGroup = function (blockStructure, targetId) {
75
+ var collectChildrenIds = function (block) {
76
+ var ids = [];
77
+ if (block.children) {
78
+ for (var _i = 0, _a = block.children; _i < _a.length; _i++) {
79
+ var child = _a[_i];
80
+ if (child.name !== 'GroupBlock') {
81
+ ids.push(child.id);
82
+ }
83
+ ids = ids.concat(collectChildrenIds(child));
84
+ }
85
+ }
86
+ return ids;
87
+ };
88
+ var targetBlock = findBlockById(blockStructure, targetId);
89
+ return targetBlock ? collectChildrenIds(targetBlock) : [];
90
+ };
91
+ export var findGroupBlocks = function (blockStructure, targetId) {
92
+ var targetBlock = findBlockById(blockStructure, targetId);
93
+ var groupBlocks = [];
94
+ if (targetBlock) {
95
+ if (targetBlock.name === 'GroupBlock') {
96
+ groupBlocks.push(targetBlock);
97
+ }
98
+ if (targetBlock.children) {
99
+ groupBlocks.push.apply(groupBlocks, targetBlock.children.filter(function (child) { return child.name === 'GroupBlock'; }));
100
+ }
101
+ }
102
+ return groupBlocks;
103
+ };
104
+ export var findAllComponentBlockIds = function (blockStructure) {
105
+ var collectComponentBlockIds = function (blocks) {
106
+ var ids = [];
107
+ for (var _i = 0, blocks_3 = blocks; _i < blocks_3.length; _i++) {
108
+ var block = blocks_3[_i];
109
+ if (block.name === 'ComponentBlock') {
110
+ ids.push(block.id);
111
+ }
112
+ if (block.children) {
113
+ ids = ids.concat(collectComponentBlockIds(block.children));
114
+ }
115
+ }
116
+ return ids;
117
+ };
118
+ return collectComponentBlockIds(blockStructure);
119
+ };
120
+ export var findParentGroupByGroupId = function (blockStructure, targetId) {
121
+ var findParentGroup = function (blocks, id, parent) {
122
+ if (parent === void 0) { parent = null; }
123
+ for (var _i = 0, blocks_4 = blocks; _i < blocks_4.length; _i++) {
124
+ var block = blocks_4[_i];
125
+ if (block.id === id && (block.name === 'GroupBlock')) {
126
+ return parent && parent.name === 'GroupBlock' ? parent.id : null;
127
+ }
128
+ if (block.children) {
129
+ var result = findParentGroup(block.children, id, block);
130
+ if (result) {
131
+ return result;
132
+ }
133
+ }
134
+ }
135
+ return null;
136
+ };
137
+ return findParentGroup(blockStructure, targetId);
138
+ };
139
+ export var addBlockToRoot = function (blockStructure, newBlock) {
140
+ return blockStructure.map(function (block) {
141
+ if (block.name === 'RootBlock') {
142
+ return __assign(__assign({}, block), { children: block.children ? __spreadArray(__spreadArray([], block.children, true), [newBlock], false) : [newBlock] });
143
+ }
144
+ return block;
145
+ });
146
+ };
147
+ var deepClone = function (blocks) { return JSON.parse(JSON.stringify(blocks)); };
148
+ export var addBulkToTarget = function (blockStructure, targetId, bulkIds) {
149
+ var structure = deepClone(blockStructure);
150
+ var targetBlock = findBlockById(structure, targetId);
151
+ if (!targetBlock || !targetBlock.children) {
152
+ throw new Error("Target block with id ".concat(targetId, " not found or has no children."));
153
+ }
154
+ var bulkBlocks = targetBlock.children.filter(function (child) { return bulkIds.includes(child.id); });
155
+ if (bulkBlocks.length !== bulkIds.length) {
156
+ throw new Error("Some bulkIds do not exist as children of the target block.");
157
+ }
158
+ // Remove bulk blocks from target's children
159
+ targetBlock.children = targetBlock.children.filter(function (child) { return !bulkIds.includes(child.id); });
160
+ // Create the new bulkBlock
161
+ var bulkBlock = {
162
+ id: "bulk",
163
+ name: 'GroupBlock',
164
+ children: bulkBlocks,
165
+ };
166
+ // Add the bulkBlock to the target's children
167
+ targetBlock.children.push(bulkBlock);
168
+ return structure;
169
+ };
170
+ // 사용 예시:
171
+ export var blockStructure = [
172
+ {
173
+ id: '1',
174
+ name: 'RootBlock',
175
+ children: [
176
+ {
177
+ id: '2',
178
+ name: 'GroupBlock',
179
+ children: [
180
+ {
181
+ id: '3',
182
+ name: 'GroupBlock',
183
+ children: [
184
+ {
185
+ id: '4',
186
+ name: 'ComponentBlock'
187
+ },
188
+ {
189
+ id: '5',
190
+ name: 'ComponentBlock'
191
+ },
192
+ {
193
+ id: '6',
194
+ name: 'GroupBlock',
195
+ children: [
196
+ {
197
+ id: '7',
198
+ name: 'ComponentBlock'
199
+ },
200
+ {
201
+ id: '8',
202
+ name: 'ComponentBlock'
203
+ },
204
+ {
205
+ id: '9',
206
+ name: 'GroupBlock',
207
+ children: [
208
+ {
209
+ id: '10',
210
+ name: 'ComponentBlock'
211
+ },
212
+ {
213
+ id: '11',
214
+ name: 'ComponentBlock'
215
+ }
216
+ ]
217
+ },
218
+ ]
219
+ },
220
+ ]
221
+ },
222
+ {
223
+ id: '12',
224
+ name: 'GroupBlock',
225
+ children: [
226
+ {
227
+ id: '13',
228
+ name: 'ComponentBlock'
229
+ },
230
+ {
231
+ id: '14',
232
+ name: 'ComponentBlock'
233
+ }
234
+ ]
235
+ },
236
+ {
237
+ id: '15',
238
+ name: 'ComponentBlock'
239
+ },
240
+ {
241
+ id: '16',
242
+ name: 'ComponentBlock'
243
+ }
244
+ ]
245
+ },
246
+ {
247
+ id: '17',
248
+ name: 'GroupBlock',
249
+ children: [
250
+ // {
251
+ // id: '6',
252
+ // name: 'GroupBlock',
253
+ // children: [
254
+ // {
255
+ // id: '7',
256
+ // name: 'ComponentBlock'
257
+ // },
258
+ // {
259
+ // id: '8',
260
+ // name: 'ComponentBlock'
261
+ // }
262
+ // ]
263
+ // },
264
+ {
265
+ id: '18',
266
+ name: 'ComponentBlock'
267
+ }
268
+ ]
269
+ },
270
+ {
271
+ id: '19',
272
+ name: 'ComponentBlock'
273
+ },
274
+ {
275
+ id: '20',
276
+ name: 'ComponentBlock'
277
+ }
278
+ ]
279
+ }
280
+ ];
@@ -1,6 +1,7 @@
1
1
  import { DragEvent, ReactElement, RefObject } from "react";
2
2
  import { ResizeHandleAxis, ResizeHandleType } from "../Resizable/types";
3
3
  import { ResizeEventType } from "../GridItem/types";
4
+ import { Block } from "./group";
4
5
  export type CompactType = "vertical" | "horizontal";
5
6
  export type LayoutItem = {
6
7
  w: number;
@@ -72,6 +73,10 @@ export type ReactGridLayoutProps = {
72
73
  minNbRow?: number;
73
74
  customColWidth?: number;
74
75
  onFitToContent?: OnFitContentCallBack;
76
+ blockStructure?: Block[];
77
+ onDoubleClickGroup?: (id: string) => void;
78
+ selectedGroupBlock?: string;
79
+ onClickGroup?: (id: string) => void;
75
80
  };
76
81
  export type DragOverEvent = MouseEvent & {
77
82
  nativeEvent: {
@@ -129,6 +134,7 @@ export type ResponsiveGridLayoutProps = {
129
134
  onBreakpointChange?: OnBreakpointChangeCallback;
130
135
  onLayoutChange?: OnLayoutChangeCallback;
131
136
  onWidthChange?: OnWidthChangeCallback;
137
+ zoom?: number;
132
138
  } & CoreType;
133
139
  export type Breakpoint = string;
134
140
  export type DefaultBreakpoints = "lg" | "md" | "sm" | "xs" | "xxs";
@@ -163,3 +163,10 @@ export declare function synchronizeLayoutWithChildren(initialLayout: Layout, chi
163
163
  */
164
164
  export declare function validateLayout(layout: Layout, contextName?: string): void;
165
165
  export declare const noop: (args: any) => any;
166
+ export declare function getBoundingArea(layout: Layout, ids: string[]): {
167
+ x: number;
168
+ y: number;
169
+ w: number;
170
+ h: number;
171
+ z: number;
172
+ } | null;
@@ -564,3 +564,41 @@ function log() {
564
564
  console.log.apply(console, args);
565
565
  }
566
566
  export var noop = function (_args) { return undefined; };
567
+ export function getBoundingArea(layout, ids) {
568
+ var layoutItems = ids.map(function (id) { return getLayoutItem(layout, id); }).filter(function (item) { return item !== undefined; });
569
+ if (layoutItems.length === 0) {
570
+ return null;
571
+ }
572
+ if (layoutItems.length === 1) {
573
+ return {
574
+ x: layoutItems[0].x,
575
+ y: layoutItems[0].y,
576
+ w: layoutItems[0].w,
577
+ h: layoutItems[0].h,
578
+ z: layoutItems[0].z,
579
+ };
580
+ }
581
+ var _a = layoutItems.reduce(function (acc, elem, idx, arr) {
582
+ var _a, _b;
583
+ if (idx === arr.length - 1) {
584
+ return acc;
585
+ }
586
+ var elem1 = idx === 0 ? elem : acc;
587
+ var elem2 = arr[idx + 1];
588
+ var minX = Math.min(elem1.x, elem2.x);
589
+ var minY = Math.min(elem1.y, elem2.y);
590
+ var elem1W = elem1.x - minX + elem1.w;
591
+ var elem2W = elem2.x - minX + elem2.w;
592
+ var elem1H = elem1.y - minY + elem1.h;
593
+ var elem2H = elem2.y - minY + elem2.h;
594
+ var maxZ = Math.max((_a = elem1 === null || elem1 === void 0 ? void 0 : elem1.z) !== null && _a !== void 0 ? _a : 0, (_b = elem2 === null || elem2 === void 0 ? void 0 : elem2.z) !== null && _b !== void 0 ? _b : 0);
595
+ return {
596
+ x: Math.min(elem1.x, elem2.x),
597
+ y: Math.min(elem1.y, elem2.y),
598
+ w: Math.max(elem1W, elem2W),
599
+ h: Math.max(elem1H, elem2H),
600
+ z: maxZ
601
+ };
602
+ }, { x: 0, y: 0, w: 0, h: 0, z: 0 }), minX = _a.x, minY = _a.y, maxW = _a.w, maxH = _a.h, maxZ = _a.z;
603
+ return { x: minX, y: minY, w: maxW, h: maxH, z: maxZ };
604
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "publ-echo-test",
3
- "version": "0.0.58",
3
+ "version": "0.0.59",
4
4
  "private": false,
5
5
  "main": "dist/lib/index.js",
6
6
  "types": "dist/lib/index.d.js",