publ-echo-test 0.0.331 → 0.0.333

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