publ-echo-test 0.0.287 → 0.0.288
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.
|
@@ -245,7 +245,7 @@ var GridItem = function (_a) {
|
|
|
245
245
|
var callbackLater = function (mutationsList) {
|
|
246
246
|
setTimeout(function () {
|
|
247
247
|
callback(mutationsList);
|
|
248
|
-
},
|
|
248
|
+
}, 200);
|
|
249
249
|
};
|
|
250
250
|
// MutationObserver 인스턴스 생성
|
|
251
251
|
var observer = new MutationObserver(callbackLater);
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { GridItemProps } from "./types";
|
|
3
|
+
import { PropsWithChildren } from "../types";
|
|
4
|
+
declare const GridItem: ({ children, ...props }: PropsWithChildren<GridItemProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
|
|
5
|
+
export default GridItem;
|
|
@@ -0,0 +1,614 @@
|
|
|
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 GridItem = function (_a) {
|
|
31
|
+
var _b;
|
|
32
|
+
var children = _a.children, props = __rest(_a, ["children"]);
|
|
33
|
+
var resizeHandle = props.resizeHandle, cols = props.cols, zOrder = props.zOrder, zOrderInternal = props.zOrderInternal, isDraggable = props.isDraggable, _c = props.transformScale, transformScale = _c === void 0 ? 1 : _c, isResizable = props.isResizable, useCSSTransforms = props.useCSSTransforms, className = props.className, _d = props.cancel, cancel = _d === void 0 ? "" : _d, _e = props.handle, handle = _e === void 0 ? "" : _e, x = props.x, y = props.y, z = props.z, w = props.w, h = props.h, _f = props.minH, minH = _f === void 0 ? 1 : _f, _g = props.minW, minW = _g === void 0 ? 1 : _g, _h = props.maxH, maxH = _h === void 0 ? Infinity : _h, _j = props.maxW, maxW = _j === void 0 ? Infinity : _j, i = props.i, _k = props.isHiddenVisibility, isHiddenVisibility = _k === void 0 ? false : _k, containerWidth = props.containerWidth, customColWidth = props.customColWidth, autoResize = props.autoResize;
|
|
34
|
+
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
|
+
if (targetNode.id === "contentslist-box") {
|
|
51
|
+
return;
|
|
52
|
+
}
|
|
53
|
+
var prevPaddingL = parseFloat(getComputedStyle(targetNode).paddingLeft);
|
|
54
|
+
var prevPaddingR = parseFloat(getComputedStyle(targetNode).paddingRight);
|
|
55
|
+
var prevPaddingT = parseFloat(getComputedStyle(targetNode).paddingTop);
|
|
56
|
+
var prevPaddingB = parseFloat(getComputedStyle(targetNode).paddingBottom);
|
|
57
|
+
// MutationObserver 콜백 함수
|
|
58
|
+
var callback = function (mutationsList) {
|
|
59
|
+
for (var _i = 0, mutationsList_1 = mutationsList; _i < mutationsList_1.length; _i++) {
|
|
60
|
+
var mutation = mutationsList_1[_i];
|
|
61
|
+
var isCharacterChanged = mutation.type === "characterData";
|
|
62
|
+
var keepWidth = true;
|
|
63
|
+
var hasPaddingChanged = false;
|
|
64
|
+
var height = isCharacterChanged
|
|
65
|
+
? mutation.target.parentNode.clientHeight
|
|
66
|
+
: mutation.target.clientHeight;
|
|
67
|
+
var width = targetNode.clientWidth;
|
|
68
|
+
if (!isCharacterChanged && mutation.target instanceof Element) {
|
|
69
|
+
var styles = getComputedStyle(mutation.target);
|
|
70
|
+
var minWidth = parseFloat(styles.minWidth);
|
|
71
|
+
if (minWidth > width) {
|
|
72
|
+
keepWidth = false;
|
|
73
|
+
}
|
|
74
|
+
// NOTE: POC
|
|
75
|
+
var paddingL = parseFloat(styles.paddingLeft);
|
|
76
|
+
var paddingR = parseFloat(styles.paddingRight);
|
|
77
|
+
var paddingT = parseFloat(styles.paddingTop);
|
|
78
|
+
var paddingB = parseFloat(styles.paddingBottom);
|
|
79
|
+
if (prevPaddingL !== paddingL ||
|
|
80
|
+
prevPaddingR !== paddingR ||
|
|
81
|
+
prevPaddingT !== paddingT ||
|
|
82
|
+
prevPaddingB !== paddingB) {
|
|
83
|
+
hasPaddingChanged = true;
|
|
84
|
+
keepWidth = false;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
var prevW = props.w;
|
|
88
|
+
var prevH = props.h;
|
|
89
|
+
var _a = calcWH(getPositionParams(), {
|
|
90
|
+
width: width,
|
|
91
|
+
height: height,
|
|
92
|
+
}, x, y, "e", props.w, props.h, false), w_1 = _a.w, h_1 = _a.h;
|
|
93
|
+
if (keepWidth) {
|
|
94
|
+
w_1 = prevW;
|
|
95
|
+
}
|
|
96
|
+
if (prevH > h_1) {
|
|
97
|
+
h_1 = prevH;
|
|
98
|
+
}
|
|
99
|
+
var _b = getResizableXYPosition("e", w_1, h_1, prevW, prevH), newX = _b.newX, newY = _b.newY;
|
|
100
|
+
if (prevH === h_1 && prevW === w_1 && newX === x && newY === y) {
|
|
101
|
+
return;
|
|
102
|
+
}
|
|
103
|
+
props.onFitToContent &&
|
|
104
|
+
props.onFitToContent(i, w_1, h_1, newX, newY, { hasPaddingChanged: hasPaddingChanged });
|
|
105
|
+
}
|
|
106
|
+
};
|
|
107
|
+
// MutationObserver 인스턴스 생성
|
|
108
|
+
var observer = new MutationObserver(callback);
|
|
109
|
+
// 관찰할 DOM 변이 설정
|
|
110
|
+
var config = { characterData: true, attributes: true, subtree: true };
|
|
111
|
+
// 대상 노드와 설정으로 관찰 시작
|
|
112
|
+
observer.observe(targetNode, config);
|
|
113
|
+
// 정리 함수에서 MutationObserver 해제
|
|
114
|
+
return function () {
|
|
115
|
+
if (targetNode.id === "contentslist-box") {
|
|
116
|
+
return;
|
|
117
|
+
}
|
|
118
|
+
observer.disconnect();
|
|
119
|
+
};
|
|
120
|
+
}, [autoResize, isSelected, isDragging, isResizing, props.w, props.h, x, y]);
|
|
121
|
+
useEffect(function () {
|
|
122
|
+
var _a;
|
|
123
|
+
if (!isSelected || !autoResize) {
|
|
124
|
+
return;
|
|
125
|
+
}
|
|
126
|
+
var targetNode = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.children[0].children[0].children[0];
|
|
127
|
+
if (!targetNode || isDragging || isResizing) {
|
|
128
|
+
return;
|
|
129
|
+
}
|
|
130
|
+
if (targetNode.id !== "contentslist-box") {
|
|
131
|
+
return;
|
|
132
|
+
}
|
|
133
|
+
var prevPaddingL = parseFloat(getComputedStyle(targetNode).paddingLeft);
|
|
134
|
+
var prevPaddingR = parseFloat(getComputedStyle(targetNode).paddingRight);
|
|
135
|
+
var prevPaddingT = parseFloat(getComputedStyle(targetNode).paddingTop);
|
|
136
|
+
var prevPaddingB = parseFloat(getComputedStyle(targetNode).paddingBottom);
|
|
137
|
+
// MutationObserver 콜백 함수
|
|
138
|
+
var callback = function (mutationsList) {
|
|
139
|
+
for (var _i = 0, mutationsList_2 = mutationsList; _i < mutationsList_2.length; _i++) {
|
|
140
|
+
var mutation = mutationsList_2[_i];
|
|
141
|
+
var isSizeChanged = mutation.attributeName === "data-min-width" ||
|
|
142
|
+
mutation.attributeName === "data-min-height";
|
|
143
|
+
var keepWidth = true;
|
|
144
|
+
var hasPaddingChanged = true;
|
|
145
|
+
// const insetTop = Number(mutation.target.dataset.insetTop!);
|
|
146
|
+
// const insetBottom = Number(mutation.target.dataset.insetBottom!);
|
|
147
|
+
var minWidth = 0;
|
|
148
|
+
// const minHeight =
|
|
149
|
+
// Number(mutation.target.dataset.minHeight) + insetTop + insetBottom;
|
|
150
|
+
console.log("mutation target", mutation.target);
|
|
151
|
+
var contentsWrapper = mutation.target.querySelector(".cb-contentslist-wrapper");
|
|
152
|
+
var oneComposition = mutation.target.querySelector(".composition-container");
|
|
153
|
+
var minHeight = 0;
|
|
154
|
+
if (contentsWrapper && oneComposition) {
|
|
155
|
+
var minCellWidth = 10;
|
|
156
|
+
var numberOfItems = Number(mutation.target.getAttribute("data-number-of-items"));
|
|
157
|
+
var numberOfColumns = Number(mutation.target.getAttribute("data-number-of-columns"));
|
|
158
|
+
var rowGap = Number(mutation.target.getAttribute("data-row-gap"));
|
|
159
|
+
var columnGap = Number(mutation.target.getAttribute("data-column-gap"));
|
|
160
|
+
var insetTop = Number(mutation.target.getAttribute("data-inset-top"));
|
|
161
|
+
var insetBottom = Number(mutation.target.getAttribute("data-inset-bottom"));
|
|
162
|
+
var compositionCols = Number(oneComposition.getAttribute("data-cols"));
|
|
163
|
+
var compositionRows = Number(oneComposition.getAttribute("data-rows"));
|
|
164
|
+
var oneCompositionMinWidth = minCellWidth * compositionCols + 20; /* 20px padding */
|
|
165
|
+
// let oneCompositionMinHeight =
|
|
166
|
+
// minColHeight * compositionRows + 20; /* 20px padding */
|
|
167
|
+
if (contentsWrapper) {
|
|
168
|
+
var gridWrapperInnerH = contentsWrapper.clientHeight;
|
|
169
|
+
var oneCompositionH = oneComposition.clientHeight;
|
|
170
|
+
var compositionBGwrapperPaddingT = Number(oneComposition.getAttribute("data-wrapper-paddingt"));
|
|
171
|
+
var compositionBGwrapperPaddingB = Number(oneComposition.getAttribute("data-wrapper-paddingb"));
|
|
172
|
+
var compositionBGwrapperPaddingL = Number(oneComposition.getAttribute("data-wrapper-paddingl"));
|
|
173
|
+
var compositionBGwrapperPaddingR = Number(oneComposition.getAttribute("data-wrapper-paddingr"));
|
|
174
|
+
var oneCompositionMinHeight = oneCompositionH +
|
|
175
|
+
compositionBGwrapperPaddingT +
|
|
176
|
+
compositionBGwrapperPaddingB;
|
|
177
|
+
var styles = getComputedStyle(mutation.target);
|
|
178
|
+
var paddingL = parseFloat(styles.paddingLeft);
|
|
179
|
+
var paddingR = parseFloat(styles.paddingRight);
|
|
180
|
+
var paddingT = parseFloat(styles.paddingTop);
|
|
181
|
+
var paddingB = parseFloat(styles.paddingBottom);
|
|
182
|
+
var paddingLR = paddingL + paddingR;
|
|
183
|
+
var paddingTB = paddingT + paddingB;
|
|
184
|
+
var compositionWrapperPaddingLR = (compositionBGwrapperPaddingL + compositionBGwrapperPaddingR) *
|
|
185
|
+
numberOfColumns;
|
|
186
|
+
var numberOfRows = Math.ceil(numberOfItems / numberOfColumns);
|
|
187
|
+
var listMinWidth = oneCompositionMinWidth * numberOfColumns +
|
|
188
|
+
(numberOfColumns - 1) * columnGap +
|
|
189
|
+
paddingLR +
|
|
190
|
+
compositionWrapperPaddingLR;
|
|
191
|
+
var gridWrapperTotalH = gridWrapperInnerH + insetTop + insetBottom;
|
|
192
|
+
var listMinHeight = oneCompositionMinHeight * numberOfRows +
|
|
193
|
+
(numberOfRows - 1) * rowGap +
|
|
194
|
+
paddingTB +
|
|
195
|
+
insetTop +
|
|
196
|
+
insetBottom;
|
|
197
|
+
if (listMinHeight > gridWrapperTotalH) {
|
|
198
|
+
minHeight = listMinHeight;
|
|
199
|
+
}
|
|
200
|
+
minWidth = listMinWidth;
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
// If minWidth or minHeight is NaN, return early to prevent errors
|
|
204
|
+
if (isNaN(minWidth) || isNaN(minHeight)) {
|
|
205
|
+
return;
|
|
206
|
+
}
|
|
207
|
+
var width = targetNode.clientWidth;
|
|
208
|
+
if (!isSizeChanged && mutation.target instanceof Element) {
|
|
209
|
+
var styles = getComputedStyle(mutation.target);
|
|
210
|
+
if (minWidth > width) {
|
|
211
|
+
keepWidth = false;
|
|
212
|
+
}
|
|
213
|
+
// NOTE: POC
|
|
214
|
+
var paddingL = parseFloat(styles.paddingLeft);
|
|
215
|
+
var paddingR = parseFloat(styles.paddingRight);
|
|
216
|
+
var paddingT = parseFloat(styles.paddingTop);
|
|
217
|
+
var paddingB = parseFloat(styles.paddingBottom);
|
|
218
|
+
if (prevPaddingL !== paddingL ||
|
|
219
|
+
prevPaddingR !== paddingR ||
|
|
220
|
+
prevPaddingT !== paddingT ||
|
|
221
|
+
prevPaddingB !== paddingB) {
|
|
222
|
+
hasPaddingChanged = true;
|
|
223
|
+
keepWidth = false;
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
var prevW = props.w;
|
|
227
|
+
var prevH = props.h;
|
|
228
|
+
var _a = calcWH(getPositionParams(), {
|
|
229
|
+
width: minWidth,
|
|
230
|
+
height: minHeight,
|
|
231
|
+
}, x, y, "e", props.w, props.h, true), w_2 = _a.w, h_2 = _a.h;
|
|
232
|
+
if (keepWidth) {
|
|
233
|
+
w_2 = prevW;
|
|
234
|
+
}
|
|
235
|
+
if (prevH > h_2) {
|
|
236
|
+
h_2 = prevH;
|
|
237
|
+
}
|
|
238
|
+
var _b = getResizableXYPosition("e", w_2, h_2, prevW, prevH), newX = _b.newX, newY = _b.newY;
|
|
239
|
+
if (prevH === h_2 && prevW === w_2 && newX === x && newY === y) {
|
|
240
|
+
return;
|
|
241
|
+
}
|
|
242
|
+
props.onFitToContent &&
|
|
243
|
+
props.onFitToContent(i, w_2, h_2, newX, newY, { hasPaddingChanged: hasPaddingChanged });
|
|
244
|
+
}
|
|
245
|
+
};
|
|
246
|
+
var callbackLater = function (mutationsList) {
|
|
247
|
+
setTimeout(function () {
|
|
248
|
+
callback(mutationsList);
|
|
249
|
+
}, 200);
|
|
250
|
+
};
|
|
251
|
+
// MutationObserver 인스턴스 생성
|
|
252
|
+
var observer = new MutationObserver(callbackLater);
|
|
253
|
+
// 관찰할 DOM 변이 설정
|
|
254
|
+
var config = { attributes: true, characterData: true };
|
|
255
|
+
// 대상 노드와 설정으로 관찰 시작
|
|
256
|
+
observer.observe(targetNode, config);
|
|
257
|
+
// 정리 함수에서 MutationObserver 해제
|
|
258
|
+
return function () {
|
|
259
|
+
if (targetNode.id !== "contentslist-box") {
|
|
260
|
+
return;
|
|
261
|
+
}
|
|
262
|
+
observer.disconnect();
|
|
263
|
+
};
|
|
264
|
+
}, [autoResize, isSelected, isDragging, isResizing, props.w, props.h, x, y]);
|
|
265
|
+
// useEffect(() => {
|
|
266
|
+
// if (!isSelected || !autoResize) {
|
|
267
|
+
// return;
|
|
268
|
+
// }
|
|
269
|
+
// const targetNode = elementRef.current?.children[0].children[0].children[0];
|
|
270
|
+
// if (!targetNode || isDragging || isResizing) {
|
|
271
|
+
// return;
|
|
272
|
+
// }
|
|
273
|
+
// if (targetNode.id !== "contentslist-box") {
|
|
274
|
+
// return;
|
|
275
|
+
// }
|
|
276
|
+
// const minWidth = Number((targetNode as HTMLElement).dataset?.minWidth ?? 0);
|
|
277
|
+
// const minHeight = Number(
|
|
278
|
+
// (targetNode as HTMLElement).dataset?.minHeight ?? 0
|
|
279
|
+
// );
|
|
280
|
+
// const insetTop = Number((targetNode as HTMLElement).dataset.insetTop!);
|
|
281
|
+
// const insetBottom = Number(
|
|
282
|
+
// (targetNode as HTMLElement).dataset.insetBottom!
|
|
283
|
+
// );
|
|
284
|
+
// let { w, h } = calcWH(
|
|
285
|
+
// getPositionParams(),
|
|
286
|
+
// {
|
|
287
|
+
// width: minWidth,
|
|
288
|
+
// height: minHeight + insetTop + insetBottom,
|
|
289
|
+
// },
|
|
290
|
+
// x,
|
|
291
|
+
// y,
|
|
292
|
+
// "e",
|
|
293
|
+
// props.w,
|
|
294
|
+
// props.h,
|
|
295
|
+
// true
|
|
296
|
+
// );
|
|
297
|
+
// const prevW = props.w;
|
|
298
|
+
// const prevH = props.h;
|
|
299
|
+
// if (prevW > w) {
|
|
300
|
+
// w = prevW;
|
|
301
|
+
// }
|
|
302
|
+
// if (prevH > h) {
|
|
303
|
+
// h = prevH;
|
|
304
|
+
// }
|
|
305
|
+
// if (prevH === h && prevW === w) {
|
|
306
|
+
// console.log("cancelled 3");
|
|
307
|
+
// return;
|
|
308
|
+
// }
|
|
309
|
+
// props.onFitToContent &&
|
|
310
|
+
// props.onFitToContent(i, w, h, x, y, { hasPaddingChanged: true });
|
|
311
|
+
// }, [isSelected, isResizing]);
|
|
312
|
+
// const moveDroppingItem = (prevProps: GridItemProps) => {
|
|
313
|
+
// const { droppingPosition } = props;
|
|
314
|
+
// if (!droppingPosition) return;
|
|
315
|
+
// const node = elementRef.current;
|
|
316
|
+
// // Can't find DOM node (are we unmounted?)
|
|
317
|
+
// if (!node) return;
|
|
318
|
+
// const prevDroppingPosition = prevProps.droppingPosition || {
|
|
319
|
+
// left: 0,
|
|
320
|
+
// top: 0,
|
|
321
|
+
// };
|
|
322
|
+
// const shouldDrag =
|
|
323
|
+
// (dragging && droppingPosition.left !== prevDroppingPosition.left) ||
|
|
324
|
+
// droppingPosition.top !== prevDroppingPosition.top;
|
|
325
|
+
// if (!dragging) {
|
|
326
|
+
// onDragStart(droppingPosition.e, {
|
|
327
|
+
// node,
|
|
328
|
+
// deltaX: droppingPosition.left,
|
|
329
|
+
// deltaY: droppingPosition.top,
|
|
330
|
+
// });
|
|
331
|
+
// } else if (shouldDrag) {
|
|
332
|
+
// const deltaX = droppingPosition.left - dragging.left;
|
|
333
|
+
// const deltaY = droppingPosition.top - dragging.top;
|
|
334
|
+
// onDrag(droppingPosition.e, {
|
|
335
|
+
// node,
|
|
336
|
+
// deltaX,
|
|
337
|
+
// deltaY,
|
|
338
|
+
// });
|
|
339
|
+
// }
|
|
340
|
+
// };
|
|
341
|
+
var getPositionParams = function (prop) {
|
|
342
|
+
if (prop === void 0) { prop = props; }
|
|
343
|
+
return {
|
|
344
|
+
cols: prop.cols,
|
|
345
|
+
containerPadding: prop.containerPadding,
|
|
346
|
+
containerWidth: prop.containerWidth,
|
|
347
|
+
margin: prop.margin,
|
|
348
|
+
maxRows: prop.maxRows,
|
|
349
|
+
rowHeight: prop.rowHeight,
|
|
350
|
+
};
|
|
351
|
+
};
|
|
352
|
+
var colWidth = customColWidth !== null && customColWidth !== void 0 ? customColWidth : calcGridColWidth(getPositionParams());
|
|
353
|
+
var createStyle = function (pos) {
|
|
354
|
+
var usePercentages = props.usePercentages, containerWidth = props.containerWidth, useCSSTransforms = props.useCSSTransforms;
|
|
355
|
+
var style;
|
|
356
|
+
if (useCSSTransforms) {
|
|
357
|
+
style = setTransform(pos);
|
|
358
|
+
}
|
|
359
|
+
else {
|
|
360
|
+
style = setTopLeft(pos);
|
|
361
|
+
if (usePercentages) {
|
|
362
|
+
if (containerWidth == null) {
|
|
363
|
+
throw new Error("Container width is missing!");
|
|
364
|
+
}
|
|
365
|
+
style.left = perc(pos.left / containerWidth);
|
|
366
|
+
style.width = perc(pos.width / containerWidth);
|
|
367
|
+
}
|
|
368
|
+
}
|
|
369
|
+
return style;
|
|
370
|
+
};
|
|
371
|
+
/**
|
|
372
|
+
* Mix a Draggable instance into a child.
|
|
373
|
+
* @param {Element} child Child element.
|
|
374
|
+
* @return {Element} Child wrapped in Draggable.
|
|
375
|
+
*/
|
|
376
|
+
var mixinDraggable = function (child, isDraggable) {
|
|
377
|
+
return (_jsx(DraggableCore, { disabled: !isDraggable, onStart: onDragStart, onDrag: onDrag, onStop: onDragStop, handle: handle, cancel: ".react-resizable-handle" + (cancel ? "," + cancel : ""), scale: transformScale, nodeRef: elementRef, children: child }));
|
|
378
|
+
};
|
|
379
|
+
/**
|
|
380
|
+
* Mix a Resizable instance into a child.
|
|
381
|
+
* @param {Element} child Child element.
|
|
382
|
+
* @param {Object} position Position object (pixel values)
|
|
383
|
+
* @return {Element} Child wrapped in Resizable.
|
|
384
|
+
*/
|
|
385
|
+
var mixinResizable = function (child, position, isResizable) {
|
|
386
|
+
var positionParams = getPositionParams();
|
|
387
|
+
// const maxWidth = calcGridItemPosition(
|
|
388
|
+
// positionParams,
|
|
389
|
+
// x,
|
|
390
|
+
// y,
|
|
391
|
+
// z,
|
|
392
|
+
// cols - x, // TODO - 수정 필요
|
|
393
|
+
// h
|
|
394
|
+
// ).width;
|
|
395
|
+
var mins = calcGridItemPosition(positionParams, x, y, z, minW, minH);
|
|
396
|
+
var maxes = calcGridItemPosition(positionParams, x, y, z, maxW, maxH);
|
|
397
|
+
var minConstraints = [mins.width, mins.height];
|
|
398
|
+
var maxConstraints = [
|
|
399
|
+
Math.min(maxes.width, containerWidth),
|
|
400
|
+
Math.min(maxes.height, Infinity),
|
|
401
|
+
];
|
|
402
|
+
return (_jsx(Resizable, { draggableOpts: {
|
|
403
|
+
disabled: !isResizable,
|
|
404
|
+
}, className: isResizable ? undefined : "react-resizable-hide", width: position.width, height: position.height, top: position.top, left: position.left, resizeHandles: props.resizeHandles, onResizeStop: onResizeStop, onResizeStart: onResizeStart, onResize: onResize, minConstraints: minConstraints, maxConstraints: maxConstraints, transformScale: transformScale, handle: resizeHandle, isResizing: isResizing, autoResize: autoResize, colWidth: colWidth, margin: props.margin, children: child }));
|
|
405
|
+
};
|
|
406
|
+
/**
|
|
407
|
+
* onDragStart event handler
|
|
408
|
+
* @param {Event} e event data
|
|
409
|
+
* @param {Object} callbackData an object with node, delta and position information
|
|
410
|
+
*/
|
|
411
|
+
var onDragStart = function (e, _a) {
|
|
412
|
+
var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
|
|
413
|
+
var newPosition = { top: 0, left: 0 };
|
|
414
|
+
var offsetParent = node.offsetParent;
|
|
415
|
+
if (!offsetParent)
|
|
416
|
+
return;
|
|
417
|
+
var parentRect = offsetParent.getBoundingClientRect();
|
|
418
|
+
var clientRect = node.getBoundingClientRect();
|
|
419
|
+
var cLeft = clientRect.left / transformScale;
|
|
420
|
+
var pLeft = parentRect.left / transformScale;
|
|
421
|
+
var cTop = clientRect.top / transformScale;
|
|
422
|
+
var pTop = parentRect.top / transformScale;
|
|
423
|
+
newPosition.left = cLeft - pLeft + offsetParent.scrollLeft;
|
|
424
|
+
newPosition.top = cTop - pTop + offsetParent.scrollTop;
|
|
425
|
+
setDragging(newPosition);
|
|
426
|
+
var _b = calcXY(getPositionParams(), newPosition.top, newPosition.left, props.w, props.h), x = _b.x, y = _b.y;
|
|
427
|
+
setDragStart({ x: x, y: y });
|
|
428
|
+
props.onDragStart &&
|
|
429
|
+
props.onDragStart(props.i, x, y, { e: e, node: node, newPosition: newPosition });
|
|
430
|
+
};
|
|
431
|
+
/**
|
|
432
|
+
* onDrag event handler
|
|
433
|
+
* @param {Event} e event data
|
|
434
|
+
* @param {Object} callbackData an object with node, delta and position information
|
|
435
|
+
*/
|
|
436
|
+
var onDrag = function (e, _a) {
|
|
437
|
+
var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
|
|
438
|
+
if (!dragging) {
|
|
439
|
+
throw new Error("onDrag called before onDragStart.");
|
|
440
|
+
}
|
|
441
|
+
setIsDragging(true);
|
|
442
|
+
var top = dragging.top + deltaY;
|
|
443
|
+
var left = dragging.left + deltaX;
|
|
444
|
+
var isBounded = props.isBounded, i = props.i, w = props.w, h = props.h, containerWidth = props.containerWidth;
|
|
445
|
+
var positionParams = getPositionParams();
|
|
446
|
+
if (isBounded) {
|
|
447
|
+
var offsetParent = node.offsetParent;
|
|
448
|
+
if (offsetParent) {
|
|
449
|
+
var margin = props.margin, rowHeight = props.rowHeight;
|
|
450
|
+
// const colWidth = calcGridColWidth(positionParams);
|
|
451
|
+
var rowHeightNumber = resolveRowHeight(rowHeight, colWidth);
|
|
452
|
+
var bottomBoundary = offsetParent.clientHeight -
|
|
453
|
+
calcGridItemWHPx(h, rowHeightNumber, margin[1]);
|
|
454
|
+
top = clamp(top, 0, bottomBoundary);
|
|
455
|
+
var rightBoundary = containerWidth - calcGridItemWHPx(w, colWidth, margin[0]);
|
|
456
|
+
left = clamp(left, 0, rightBoundary);
|
|
457
|
+
}
|
|
458
|
+
}
|
|
459
|
+
var newPosition = { top: top, left: left };
|
|
460
|
+
setDragging(newPosition);
|
|
461
|
+
var _b = calcXY(positionParams, top, left, w, h), x = _b.x, y = _b.y;
|
|
462
|
+
props.onDrag && props.onDrag(i, x, y, { e: e, node: node, newPosition: newPosition });
|
|
463
|
+
};
|
|
464
|
+
/**
|
|
465
|
+
* onDragStop event handler
|
|
466
|
+
* @param {Event} e event data
|
|
467
|
+
* @param {Object} callbackData an object with node, delta and position information
|
|
468
|
+
*/
|
|
469
|
+
var onDragStop = function (e, _a) {
|
|
470
|
+
var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
|
|
471
|
+
if (!dragging) {
|
|
472
|
+
throw new Error("onDragEnd called before onDragStart.");
|
|
473
|
+
}
|
|
474
|
+
var w = props.w, h = props.h, i = props.i;
|
|
475
|
+
var left = dragging.left, top = dragging.top;
|
|
476
|
+
var _b = calcXY(getPositionParams(), top, left, w, h), x = _b.x, y = _b.y;
|
|
477
|
+
var newPosition = { top: top, left: left };
|
|
478
|
+
var change = (dragStart === null || dragStart === void 0 ? void 0 : dragStart.x) !== x || (dragStart === null || dragStart === void 0 ? void 0 : dragStart.y) !== y;
|
|
479
|
+
setDragging(undefined);
|
|
480
|
+
setDragStart(undefined);
|
|
481
|
+
setIsDragging(false);
|
|
482
|
+
props.onDragStop &&
|
|
483
|
+
props.onDragStop(i, x, y, { e: e, node: node, newPosition: newPosition, change: change });
|
|
484
|
+
};
|
|
485
|
+
var getResizableXYPosition = function (handle, width, height, prevW, prevH) {
|
|
486
|
+
var newX = x;
|
|
487
|
+
var newY = y;
|
|
488
|
+
if (handle === "nw") {
|
|
489
|
+
// NOTE - nw left(X)와 top(Y) 둘다 변경
|
|
490
|
+
if (width > prevW) {
|
|
491
|
+
newX = x - (width - prevW);
|
|
492
|
+
}
|
|
493
|
+
else {
|
|
494
|
+
newX = x + (prevW - width);
|
|
495
|
+
}
|
|
496
|
+
if (height > prevH) {
|
|
497
|
+
newY = y - (height - prevH);
|
|
498
|
+
}
|
|
499
|
+
else {
|
|
500
|
+
newY = y + (prevH - height);
|
|
501
|
+
}
|
|
502
|
+
}
|
|
503
|
+
if (handle === "n" || handle === "ne") {
|
|
504
|
+
// NOTE - n, ne left(X) 고정 & top(Y) 변경
|
|
505
|
+
if (height > prevH) {
|
|
506
|
+
newY = y - (height - prevH);
|
|
507
|
+
}
|
|
508
|
+
else {
|
|
509
|
+
newY = y + (prevH - height);
|
|
510
|
+
}
|
|
511
|
+
}
|
|
512
|
+
if (handle === "w" || handle === "sw") {
|
|
513
|
+
// NOTE - s, sw left(X) 변경 top(Y) 고정
|
|
514
|
+
if (width > prevW) {
|
|
515
|
+
newX = x - (width - prevW);
|
|
516
|
+
}
|
|
517
|
+
else {
|
|
518
|
+
newX = x + (prevW - width);
|
|
519
|
+
}
|
|
520
|
+
}
|
|
521
|
+
return { newX: newX, newY: newY };
|
|
522
|
+
};
|
|
523
|
+
/**
|
|
524
|
+
* onResizeStart event handler
|
|
525
|
+
* @param {ResizeEventType} e event data
|
|
526
|
+
* @param {Object} callbackData an object with node and size information
|
|
527
|
+
*/
|
|
528
|
+
var onResizeStart = function (e, callbackData) {
|
|
529
|
+
onResizeHandler(e, callbackData, "onResizeStart");
|
|
530
|
+
};
|
|
531
|
+
/**
|
|
532
|
+
* onResize event handler
|
|
533
|
+
* @param {ResizeEventType} e event data
|
|
534
|
+
* @param {Object} callbackData an object with node and size information
|
|
535
|
+
*/
|
|
536
|
+
var onResize = function (e, callbackData) {
|
|
537
|
+
setIsResizing(true);
|
|
538
|
+
onResizeHandler(e, callbackData, "onResize");
|
|
539
|
+
};
|
|
540
|
+
/**
|
|
541
|
+
* onResizeStop event handler
|
|
542
|
+
* @param {ResizeEventType} e event data
|
|
543
|
+
* @param {Object} callbackData an object with node and size information
|
|
544
|
+
*/
|
|
545
|
+
var onResizeStop = function (e, callbackData) {
|
|
546
|
+
setIsResizing(false);
|
|
547
|
+
onResizeHandler(e, callbackData, "onResizeStop");
|
|
548
|
+
};
|
|
549
|
+
/**
|
|
550
|
+
* Wrapper around drag events to provide more useful data.
|
|
551
|
+
* All drag events call the function with the given handler name,
|
|
552
|
+
* with the signature (index, x, y).
|
|
553
|
+
*
|
|
554
|
+
* @param {String} handlerName Handler name to wrap.
|
|
555
|
+
* @return {Function} Handler function.
|
|
556
|
+
*/
|
|
557
|
+
var onResizeHandler = function (e, _a, handlerName) {
|
|
558
|
+
var node = _a.node, size = _a.size, handle = _a.handle, minWidth = _a.minWidth, minHeight = _a.minHeight;
|
|
559
|
+
var handler = props[handlerName];
|
|
560
|
+
if (!handler)
|
|
561
|
+
return;
|
|
562
|
+
var prevW = props.w, prevH = props.h;
|
|
563
|
+
// Get new XY
|
|
564
|
+
var _b = calcWH(getPositionParams(), size, x, y, handle, prevW, prevH, true), w = _b.w, h = _b.h;
|
|
565
|
+
var tempMinH = minH;
|
|
566
|
+
if (minWidth) {
|
|
567
|
+
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;
|
|
568
|
+
if (minW_1 > w) {
|
|
569
|
+
w = minW_1;
|
|
570
|
+
}
|
|
571
|
+
if (minH > 1) {
|
|
572
|
+
tempMinH = Math.max(1, newMinH);
|
|
573
|
+
}
|
|
574
|
+
}
|
|
575
|
+
// minW should be at least 1
|
|
576
|
+
// minW = Math.max(minW, 1);
|
|
577
|
+
// maxW should be at most (cols - x)
|
|
578
|
+
// maxW = Math.min(maxW, cols - x);
|
|
579
|
+
w = clamp(w, minW, maxW);
|
|
580
|
+
h = clamp(h, tempMinH, maxH);
|
|
581
|
+
setResizing(handlerName === "onResizeStop" ? undefined : size);
|
|
582
|
+
var _d = getResizableXYPosition(handle, w, h, prevW, prevH), newX = _d.newX, newY = _d.newY;
|
|
583
|
+
handler(i, w, h, { e: e, node: node, size: size }, newX, newY);
|
|
584
|
+
};
|
|
585
|
+
var pos = calcGridItemPosition(getPositionParams(), x, y, z, w, h, {
|
|
586
|
+
dragging: dragging,
|
|
587
|
+
resizing: resizing,
|
|
588
|
+
}, colWidth);
|
|
589
|
+
var child = React.Children.only(children);
|
|
590
|
+
var newChild = React.cloneElement(child, {
|
|
591
|
+
key: i,
|
|
592
|
+
ref: elementRef,
|
|
593
|
+
"data-grid-id": i,
|
|
594
|
+
"data-z-index": z,
|
|
595
|
+
"data-z-order": zOrder,
|
|
596
|
+
"data-z-order-internal": zOrderInternal,
|
|
597
|
+
className: classNames("react-grid-item", child.props.className, className, {
|
|
598
|
+
static: props.static,
|
|
599
|
+
isResizing: Boolean(resizing) && Boolean(isResizing) && Boolean(isHiddenVisibility),
|
|
600
|
+
resizing: Boolean(resizing),
|
|
601
|
+
"react-draggable": isDraggable,
|
|
602
|
+
"editable-grid-item": isResizable && isDraggable,
|
|
603
|
+
isDragging: Boolean(isDragging) && Boolean(dragging) && Boolean(isHiddenVisibility),
|
|
604
|
+
"react-draggable-dragging": Boolean(dragging),
|
|
605
|
+
// dropping: Boolean(droppingPosition),
|
|
606
|
+
cssTransforms: useCSSTransforms,
|
|
607
|
+
}),
|
|
608
|
+
style: __assign(__assign(__assign({}, props.style), child.props.style), createStyle(pos)),
|
|
609
|
+
});
|
|
610
|
+
newChild = mixinResizable(newChild, pos, isResizable);
|
|
611
|
+
newChild = mixinDraggable(newChild, isDraggable);
|
|
612
|
+
return newChild;
|
|
613
|
+
};
|
|
614
|
+
export default GridItem;
|
|
@@ -35,7 +35,8 @@ import { useState, useRef, useLayoutEffect } from "react";
|
|
|
35
35
|
import classNames from "../../external-lib/classnames";
|
|
36
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
|
+
// NOTE: 필수 변경하기
|
|
39
|
+
import GridItem from "../GridItem/GridItemCopy";
|
|
39
40
|
import isEqual from "../../external-lib/lodash.isEqual";
|
|
40
41
|
import { findAllChildrenCbIds, findBlockByBlockId, findDirectChildrenBlockIds, findDirectChildrenCbIds, findGroupBlocks, findParentGroupBlock, formatCbIdToBlockId, getBlockSpecificType, zIndexMap, } from "./group";
|
|
41
42
|
import GroupItem from "../GridItem/GroupItem";
|