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.
- package/dist/lib/Draggable/DraggableCore.js +1 -0
- package/dist/lib/Draggable/types.d.ts +1 -0
- package/dist/lib/GridItem/GridItem.js +1 -0
- package/dist/lib/GridItem/GroupItem.d.ts +5 -0
- package/dist/lib/GridItem/GroupItem.js +411 -0
- package/dist/lib/GridItem/OutsideClickHandler.d.ts +7 -0
- package/dist/lib/GridItem/OutsideClickHandler.js +23 -0
- package/dist/lib/GridItem/types.d.ts +2 -1
- package/dist/lib/GridLayoutEditor/ReactGridLayout.js +135 -20
- package/dist/lib/GridLayoutEditor/ResponsiveGridLayout.js +2 -2
- package/dist/lib/GridLayoutEditor/group.d.ts +16 -0
- package/dist/lib/GridLayoutEditor/group.js +280 -0
- package/dist/lib/GridLayoutEditor/types.d.ts +6 -0
- package/dist/lib/GridLayoutEditor/utils/renderHelpers.d.ts +7 -0
- package/dist/lib/GridLayoutEditor/utils/renderHelpers.js +38 -0
- package/package.json +1 -1
@@ -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>;
|
@@ -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,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
|
51
|
-
var
|
52
|
-
var
|
53
|
-
var
|
54
|
-
var
|
55
|
-
var
|
56
|
-
var
|
57
|
-
|
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 =
|
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
|
-
|
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
|
-
|
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
|
+
}
|