publ-echo-test 0.0.1

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 (68) hide show
  1. package/README.md +29 -0
  2. package/css/gle-styles.css +169 -0
  3. package/css/resizable-styles.css +76 -0
  4. package/dist/external-lib/classnames/index.d.ts +5 -0
  5. package/dist/external-lib/classnames/index.js +60 -0
  6. package/dist/external-lib/lodash.isEqual/index.d.ts +30 -0
  7. package/dist/external-lib/lodash.isEqual/index.js +1661 -0
  8. package/dist/lib/Draggable/Draggable.d.ts +17 -0
  9. package/dist/lib/Draggable/Draggable.js +192 -0
  10. package/dist/lib/Draggable/DraggableCore.d.ts +5 -0
  11. package/dist/lib/Draggable/DraggableCore.js +266 -0
  12. package/dist/lib/Draggable/constants.d.ts +12 -0
  13. package/dist/lib/Draggable/constants.js +12 -0
  14. package/dist/lib/Draggable/index.d.ts +2 -0
  15. package/dist/lib/Draggable/index.js +2 -0
  16. package/dist/lib/Draggable/types.d.ts +55 -0
  17. package/dist/lib/Draggable/types.js +1 -0
  18. package/dist/lib/Draggable/utils/domHelpers.d.ts +22 -0
  19. package/dist/lib/Draggable/utils/domHelpers.js +222 -0
  20. package/dist/lib/Draggable/utils/getPrefix.d.ts +5 -0
  21. package/dist/lib/Draggable/utils/getPrefix.js +41 -0
  22. package/dist/lib/Draggable/utils/positionHelpers.d.ts +7 -0
  23. package/dist/lib/Draggable/utils/positionHelpers.js +32 -0
  24. package/dist/lib/Draggable/utils/types.d.ts +30 -0
  25. package/dist/lib/Draggable/utils/types.js +1 -0
  26. package/dist/lib/Draggable/utils/validationHelpers.d.ts +4 -0
  27. package/dist/lib/Draggable/utils/validationHelpers.js +16 -0
  28. package/dist/lib/GridItem/GridItem.d.ts +5 -0
  29. package/dist/lib/GridItem/GridItem.js +350 -0
  30. package/dist/lib/GridItem/index.d.ts +1 -0
  31. package/dist/lib/GridItem/index.js +1 -0
  32. package/dist/lib/GridItem/types.d.ts +107 -0
  33. package/dist/lib/GridItem/types.js +1 -0
  34. package/dist/lib/GridItem/utils/calculateUtils.d.ts +30 -0
  35. package/dist/lib/GridItem/utils/calculateUtils.js +108 -0
  36. package/dist/lib/GridLayoutEditor/ReactGridLayout.d.ts +6 -0
  37. package/dist/lib/GridLayoutEditor/ReactGridLayout.js +456 -0
  38. package/dist/lib/GridLayoutEditor/ResponsiveGridLayout.d.ts +4 -0
  39. package/dist/lib/GridLayoutEditor/ResponsiveGridLayout.js +117 -0
  40. package/dist/lib/GridLayoutEditor/index.d.ts +3 -0
  41. package/dist/lib/GridLayoutEditor/index.js +2 -0
  42. package/dist/lib/GridLayoutEditor/types.d.ts +133 -0
  43. package/dist/lib/GridLayoutEditor/types.js +1 -0
  44. package/dist/lib/GridLayoutEditor/utils/renderHelpers.d.ts +165 -0
  45. package/dist/lib/GridLayoutEditor/utils/renderHelpers.js +566 -0
  46. package/dist/lib/GridLayoutEditor/utils/responsiveUtils.d.ts +26 -0
  47. package/dist/lib/GridLayoutEditor/utils/responsiveUtils.js +77 -0
  48. package/dist/lib/Resizable/Resizable.d.ts +6 -0
  49. package/dist/lib/Resizable/Resizable.js +215 -0
  50. package/dist/lib/Resizable/ResizableBox.d.ts +7 -0
  51. package/dist/lib/Resizable/ResizableBox.js +57 -0
  52. package/dist/lib/Resizable/index.d.ts +1 -0
  53. package/dist/lib/Resizable/index.js +1 -0
  54. package/dist/lib/Resizable/types.d.ts +63 -0
  55. package/dist/lib/Resizable/types.js +1 -0
  56. package/dist/lib/Resizable/utils/cloneElement.d.ts +2 -0
  57. package/dist/lib/Resizable/utils/cloneElement.js +21 -0
  58. package/dist/lib/components/WidthProvider.d.ts +9 -0
  59. package/dist/lib/components/WidthProvider.js +65 -0
  60. package/dist/lib/components/index.d.ts +1 -0
  61. package/dist/lib/components/index.js +1 -0
  62. package/dist/lib/components/types.d.ts +13 -0
  63. package/dist/lib/components/types.js +1 -0
  64. package/dist/lib/index.d.ts +5 -0
  65. package/dist/lib/index.js +5 -0
  66. package/dist/lib/types.d.ts +4 -0
  67. package/dist/lib/types.js +1 -0
  68. package/package.json +56 -0
@@ -0,0 +1,350 @@
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 children = _a.children, props = __rest(_a, ["children"]);
32
+ var resizeHandle = props.resizeHandle, cols = props.cols, isDraggable = props.isDraggable, _b = props.transformScale, transformScale = _b === void 0 ? 1 : _b, isResizable = props.isResizable, useCSSTransforms = props.useCSSTransforms, className = props.className, _c = props.cancel, cancel = _c === void 0 ? "" : _c, _d = props.handle, handle = _d === void 0 ? "" : _d, x = props.x, y = props.y, z = props.z, w = props.w, h = props.h, _e = props.minH, minH = _e === void 0 ? 1 : _e, _f = props.minW, minW = _f === void 0 ? 1 : _f, _g = props.maxH, maxH = _g === void 0 ? Infinity : _g, _h = props.maxW, maxW = _h === void 0 ? Infinity : _h, i = props.i, _j = props.isHiddenVisibility, isHiddenVisibility = _j === void 0 ? false : _j, containerWidth = props.containerWidth, customColWidth = props.customColWidth;
33
+ var _k = useState(0), contentHeight = _k[0], setContentHeight = _k[1];
34
+ var _l = useState(0), contentWidth = _l[0], setContentWidth = _l[1];
35
+ var _m = useState(), resizing = _m[0], setResizing = _m[1];
36
+ var _o = useState(), dragging = _o[0], setDragging = _o[1];
37
+ var _p = useState(), dragStart = _p[0], setDragStart = _p[1];
38
+ var _q = useState(false), isDragging = _q[0], setIsDragging = _q[1];
39
+ var _r = useState(false), isResizing = _r[0], setIsResizing = _r[1];
40
+ var elementRef = useRef(null);
41
+ useEffect(function () {
42
+ if (!elementRef.current) {
43
+ return;
44
+ }
45
+ if ((className === null || className === void 0 ? void 0 : className.includes('placeholder')) || isResizing) {
46
+ if (i === 'whats-app-8') {
47
+ var target = elementRef.current.children[0].children[0];
48
+ var rect = target.getBoundingClientRect();
49
+ setContentHeight(rect.height);
50
+ setContentWidth(rect.width);
51
+ if (target.clientHeight > elementRef.current.clientHeight) {
52
+ console.log('is overflowing');
53
+ elementRef.current.style.height = target.clientHeight + 'px';
54
+ }
55
+ else {
56
+ console.log('NOT overflowing');
57
+ }
58
+ }
59
+ }
60
+ }, [children, isResizing]);
61
+ // const moveDroppingItem = (prevProps: GridItemProps) => {
62
+ // const { droppingPosition } = props;
63
+ // if (!droppingPosition) return;
64
+ // const node = elementRef.current;
65
+ // // Can't find DOM node (are we unmounted?)
66
+ // if (!node) return;
67
+ // const prevDroppingPosition = prevProps.droppingPosition || {
68
+ // left: 0,
69
+ // top: 0,
70
+ // };
71
+ // const shouldDrag =
72
+ // (dragging && droppingPosition.left !== prevDroppingPosition.left) ||
73
+ // droppingPosition.top !== prevDroppingPosition.top;
74
+ // if (!dragging) {
75
+ // onDragStart(droppingPosition.e, {
76
+ // node,
77
+ // deltaX: droppingPosition.left,
78
+ // deltaY: droppingPosition.top,
79
+ // });
80
+ // } else if (shouldDrag) {
81
+ // const deltaX = droppingPosition.left - dragging.left;
82
+ // const deltaY = droppingPosition.top - dragging.top;
83
+ // onDrag(droppingPosition.e, {
84
+ // node,
85
+ // deltaX,
86
+ // deltaY,
87
+ // });
88
+ // }
89
+ // };
90
+ var getPositionParams = function (prop) {
91
+ if (prop === void 0) { prop = props; }
92
+ return {
93
+ cols: prop.cols,
94
+ containerPadding: prop.containerPadding,
95
+ containerWidth: prop.containerWidth,
96
+ margin: prop.margin,
97
+ maxRows: prop.maxRows,
98
+ rowHeight: prop.rowHeight,
99
+ };
100
+ };
101
+ var colWidth = customColWidth !== null && customColWidth !== void 0 ? customColWidth : calcGridColWidth(getPositionParams());
102
+ var createStyle = function (pos) {
103
+ var usePercentages = props.usePercentages, containerWidth = props.containerWidth, useCSSTransforms = props.useCSSTransforms;
104
+ var style;
105
+ if (useCSSTransforms) {
106
+ style = setTransform(pos);
107
+ }
108
+ else {
109
+ style = setTopLeft(pos);
110
+ if (usePercentages) {
111
+ if (containerWidth == null) {
112
+ throw new Error("Container width is missing!");
113
+ }
114
+ style.left = perc(pos.left / containerWidth);
115
+ style.width = perc(pos.width / containerWidth);
116
+ }
117
+ }
118
+ return style;
119
+ };
120
+ /**
121
+ * Mix a Draggable instance into a child.
122
+ * @param {Element} child Child element.
123
+ * @return {Element} Child wrapped in Draggable.
124
+ */
125
+ var mixinDraggable = function (child, isDraggable) {
126
+ 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 }));
127
+ };
128
+ /**
129
+ * Mix a Resizable instance into a child.
130
+ * @param {Element} child Child element.
131
+ * @param {Object} position Position object (pixel values)
132
+ * @return {Element} Child wrapped in Resizable.
133
+ */
134
+ var mixinResizable = function (child, position, isResizable) {
135
+ var positionParams = getPositionParams();
136
+ // const maxWidth = calcGridItemPosition(
137
+ // positionParams,
138
+ // x,
139
+ // y,
140
+ // z,
141
+ // cols - x, // TODO - 수정 필요
142
+ // h
143
+ // ).width;
144
+ var mins = calcGridItemPosition(positionParams, x, y, z, minW, minH);
145
+ var maxes = calcGridItemPosition(positionParams, x, y, z, maxW, maxH);
146
+ var minConstraints = [mins.width, mins.height];
147
+ var maxConstraints = [
148
+ Math.min(maxes.width, containerWidth),
149
+ Math.min(maxes.height, Infinity),
150
+ ];
151
+ return (_jsx(Resizable, { draggableOpts: {
152
+ disabled: !isResizable,
153
+ }, className: isResizable ? undefined : "react-resizable-hide", width: position.width, height: position.height, top: position.top, left: position.left, minConstraints: minConstraints, maxConstraints: maxConstraints, onResizeStop: onResizeStop, onResizeStart: onResizeStart, onResize: onResize, transformScale: transformScale, resizeHandles: props.resizeHandles, handle: resizeHandle, children: child }));
154
+ };
155
+ /**
156
+ * onDragStart event handler
157
+ * @param {Event} e event data
158
+ * @param {Object} callbackData an object with node, delta and position information
159
+ */
160
+ var onDragStart = function (e, _a) {
161
+ var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
162
+ var newPosition = { top: 0, left: 0 };
163
+ var offsetParent = node.offsetParent;
164
+ if (!offsetParent)
165
+ return;
166
+ var parentRect = offsetParent.getBoundingClientRect();
167
+ var clientRect = node.getBoundingClientRect();
168
+ var cLeft = clientRect.left / transformScale;
169
+ var pLeft = parentRect.left / transformScale;
170
+ var cTop = clientRect.top / transformScale;
171
+ var pTop = parentRect.top / transformScale;
172
+ newPosition.left = cLeft - pLeft + offsetParent.scrollLeft;
173
+ newPosition.top = cTop - pTop + offsetParent.scrollTop;
174
+ setDragging(newPosition);
175
+ var _b = calcXY(getPositionParams(), newPosition.top, newPosition.left, props.w, props.h), x = _b.x, y = _b.y;
176
+ setDragStart({ x: x, y: y });
177
+ props.onDragStart &&
178
+ props.onDragStart(props.i, x, y, { e: e, node: node, newPosition: newPosition });
179
+ };
180
+ /**
181
+ * onDrag event handler
182
+ * @param {Event} e event data
183
+ * @param {Object} callbackData an object with node, delta and position information
184
+ */
185
+ var onDrag = function (e, _a) {
186
+ var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
187
+ if (!dragging) {
188
+ throw new Error("onDrag called before onDragStart.");
189
+ }
190
+ setIsDragging(true);
191
+ var top = dragging.top + deltaY;
192
+ var left = dragging.left + deltaX;
193
+ var isBounded = props.isBounded, i = props.i, w = props.w, h = props.h, containerWidth = props.containerWidth;
194
+ var positionParams = getPositionParams();
195
+ if (isBounded) {
196
+ var offsetParent = node.offsetParent;
197
+ if (offsetParent) {
198
+ var margin = props.margin, rowHeight = props.rowHeight;
199
+ // const colWidth = calcGridColWidth(positionParams);
200
+ var rowHeightNumber = resolveRowHeight(rowHeight, colWidth);
201
+ var bottomBoundary = offsetParent.clientHeight -
202
+ calcGridItemWHPx(h, rowHeightNumber, margin[1]);
203
+ top = clamp(top, 0, bottomBoundary);
204
+ var rightBoundary = containerWidth - calcGridItemWHPx(w, colWidth, margin[0]);
205
+ left = clamp(left, 0, rightBoundary);
206
+ }
207
+ }
208
+ var newPosition = { top: top, left: left };
209
+ setDragging(newPosition);
210
+ var _b = calcXY(positionParams, top, left, w, h), x = _b.x, y = _b.y;
211
+ props.onDrag && props.onDrag(i, x, y, { e: e, node: node, newPosition: newPosition });
212
+ };
213
+ /**
214
+ * onDragStop event handler
215
+ * @param {Event} e event data
216
+ * @param {Object} callbackData an object with node, delta and position information
217
+ */
218
+ var onDragStop = function (e, _a) {
219
+ var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
220
+ if (!dragging) {
221
+ throw new Error("onDragEnd called before onDragStart.");
222
+ }
223
+ var w = props.w, h = props.h, i = props.i;
224
+ var left = dragging.left, top = dragging.top;
225
+ var _b = calcXY(getPositionParams(), top, left, w, h), x = _b.x, y = _b.y;
226
+ var newPosition = { top: top, left: left };
227
+ var change = (dragStart === null || dragStart === void 0 ? void 0 : dragStart.x) !== x || (dragStart === null || dragStart === void 0 ? void 0 : dragStart.y) !== y;
228
+ setDragging(undefined);
229
+ setDragStart(undefined);
230
+ setIsDragging(false);
231
+ props.onDragStop &&
232
+ props.onDragStop(i, x, y, { e: e, node: node, newPosition: newPosition, change: change });
233
+ };
234
+ var getResizableXYPosition = function (handle, width, height, prevW, prevH) {
235
+ var newX = x;
236
+ var newY = y;
237
+ if (handle === "nw") {
238
+ // NOTE - nw left(X)와 top(Y) 둘다 변경
239
+ if (width > prevW) {
240
+ newX = x - (width - prevW);
241
+ }
242
+ else {
243
+ newX = x + (prevW - width);
244
+ }
245
+ if (height > prevH) {
246
+ newY = y - (height - prevH);
247
+ }
248
+ else {
249
+ newY = y + (prevH - height);
250
+ }
251
+ }
252
+ if (handle === "n" || handle === "ne") {
253
+ // NOTE - n, ne left(X) 고정 & top(Y) 변경
254
+ if (height > prevH) {
255
+ newY = y - (height - prevH);
256
+ }
257
+ else {
258
+ newY = y + (prevH - height);
259
+ }
260
+ }
261
+ if (handle === "w" || handle === "sw") {
262
+ // NOTE - s, sw left(X) 변경 top(Y) 고정
263
+ if (width > prevW) {
264
+ newX = x - (width - prevW);
265
+ }
266
+ else {
267
+ newX = x + (prevW - width);
268
+ }
269
+ }
270
+ return { newX: newX, newY: newY };
271
+ };
272
+ /**
273
+ * onResizeStart event handler
274
+ * @param {ResizeEventType} e event data
275
+ * @param {Object} callbackData an object with node and size information
276
+ */
277
+ var onResizeStart = function (e, callbackData) {
278
+ onResizeHandler(e, callbackData, "onResizeStart");
279
+ };
280
+ /**
281
+ * onResize event handler
282
+ * @param {ResizeEventType} e event data
283
+ * @param {Object} callbackData an object with node and size information
284
+ */
285
+ var onResize = function (e, callbackData) {
286
+ setIsResizing(true);
287
+ onResizeHandler(e, callbackData, "onResize");
288
+ };
289
+ /**
290
+ * onResizeStop event handler
291
+ * @param {ResizeEventType} e event data
292
+ * @param {Object} callbackData an object with node and size information
293
+ */
294
+ var onResizeStop = function (e, callbackData) {
295
+ setIsResizing(false);
296
+ onResizeHandler(e, callbackData, "onResizeStop");
297
+ };
298
+ /**
299
+ * Wrapper around drag events to provide more useful data.
300
+ * All drag events call the function with the given handler name,
301
+ * with the signature (index, x, y).
302
+ *
303
+ * @param {String} handlerName Handler name to wrap.
304
+ * @return {Function} Handler function.
305
+ */
306
+ var onResizeHandler = function (e, _a, handlerName) {
307
+ var _b;
308
+ var node = _a.node, size = _a.size, handle = _a.handle;
309
+ var handler = props[handlerName];
310
+ if (!handler)
311
+ return;
312
+ var prevW = props.w, prevH = props.h;
313
+ // Get new XY
314
+ var _c = calcWH(getPositionParams(), __assign(__assign({}, size), { height: (_b = elementRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight }), x, y, handle, prevW, prevH), w = _c.w, h = _c.h;
315
+ // minW should be at least 1
316
+ // minW = Math.max(minW, 1);
317
+ // maxW should be at most (cols - x)
318
+ // maxW = Math.min(maxW, cols - x);
319
+ w = clamp(w, minW, maxW);
320
+ h = clamp(h, minH, maxH);
321
+ setResizing(handlerName === "onResizeStop" ? undefined : size);
322
+ var _d = getResizableXYPosition(handle, w, h, prevW, prevH), newX = _d.newX, newY = _d.newY;
323
+ handler(i, w, h, { e: e, node: node, size: size }, newX, newY);
324
+ };
325
+ var pos = calcGridItemPosition(getPositionParams(), x, y, z, w, h, {
326
+ dragging: dragging,
327
+ resizing: resizing,
328
+ }, colWidth);
329
+ var child = React.Children.only(children);
330
+ var newChild = React.cloneElement(child, {
331
+ key: i,
332
+ ref: elementRef,
333
+ 'data-grid-id': i,
334
+ className: classNames("react-grid-item", child.props.className, className, {
335
+ static: props.static,
336
+ isResizing: Boolean(resizing) && Boolean(isResizing) && Boolean(isHiddenVisibility),
337
+ resizing: Boolean(resizing),
338
+ "react-draggable": isDraggable,
339
+ isDragging: Boolean(isDragging) && Boolean(dragging) && Boolean(isHiddenVisibility),
340
+ "react-draggable-dragging": Boolean(dragging),
341
+ // dropping: Boolean(droppingPosition),
342
+ cssTransforms: useCSSTransforms,
343
+ }),
344
+ style: __assign(__assign(__assign({}, props.style), child.props.style), createStyle(pos)),
345
+ });
346
+ newChild = mixinResizable(newChild, pos, isResizable);
347
+ newChild = mixinDraggable(newChild, isDraggable);
348
+ return newChild;
349
+ };
350
+ export default GridItem;
@@ -0,0 +1 @@
1
+ export { default as GridItem } from "./GridItem";
@@ -0,0 +1 @@
1
+ export { default as GridItem } from "./GridItem";
@@ -0,0 +1,107 @@
1
+ import { DragEvent, SyntheticEvent } from "react";
2
+ import { RowHeight } from "../GridLayoutEditor/types";
3
+ import { ResizeHandleAxis, ResizeHandleType } from "../Resizable/types";
4
+ export type PartialPosition = {
5
+ top: number;
6
+ left: number;
7
+ };
8
+ export type ResizeEventType = SyntheticEvent | MouseEvent | TouchEvent;
9
+ export type GridResizeEvent = {
10
+ e: ResizeEventType;
11
+ node: HTMLElement;
12
+ size: Size;
13
+ };
14
+ export type GridDragEvent = {
15
+ e: ResizeEventType;
16
+ node: HTMLElement;
17
+ newPosition: PartialPosition;
18
+ };
19
+ export type GridItemCallback<Data extends GridDragEvent | GridResizeEvent> = (i: string, x: number, y: number, data: Data) => void;
20
+ type ResizeGridItemCallback<Data extends GridDragEvent | GridResizeEvent> = (i: string, w: number, h: number, data: Data, x: number, y: number) => void;
21
+ export type GridDragStopEvent = GridDragEvent & {
22
+ change: boolean;
23
+ };
24
+ export type Size = {
25
+ width: number;
26
+ height: number;
27
+ top: number;
28
+ left: number;
29
+ };
30
+ export type GridItemStateType = {
31
+ resizing?: {
32
+ width: number;
33
+ height: number;
34
+ };
35
+ dragging?: {
36
+ top: number;
37
+ left: number;
38
+ };
39
+ className: string;
40
+ };
41
+ export type GridItemProps = {
42
+ margin: [number, number];
43
+ containerPadding: [number, number];
44
+ rowHeight: RowHeight;
45
+ maxRows: number;
46
+ isDraggable: boolean;
47
+ isResizable: boolean;
48
+ isBounded: boolean;
49
+ static?: boolean;
50
+ useCSSTransforms?: boolean;
51
+ usePercentages?: boolean;
52
+ transformScale?: number;
53
+ droppingPosition?: DroppingPosition;
54
+ cols: number;
55
+ containerWidth: number;
56
+ className?: string;
57
+ style?: Object;
58
+ cancel?: string;
59
+ handle?: string;
60
+ minW?: number;
61
+ maxW?: number;
62
+ minH?: number;
63
+ maxH?: number;
64
+ x: number;
65
+ y: number;
66
+ z: number;
67
+ w: number;
68
+ h: number;
69
+ i: string;
70
+ resizeHandles?: ResizeHandleAxis[];
71
+ resizeHandle?: ResizeHandleType;
72
+ onDrag?: GridItemCallback<GridDragEvent>;
73
+ onDragStart?: GridItemCallback<GridDragEvent>;
74
+ onDragStop?: GridItemCallback<GridDragStopEvent>;
75
+ onResize?: ResizeGridItemCallback<GridResizeEvent>;
76
+ onResizeStart?: ResizeGridItemCallback<GridResizeEvent>;
77
+ onResizeStop?: ResizeGridItemCallback<GridResizeEvent>;
78
+ isHiddenVisibility?: boolean;
79
+ customColWidth?: number;
80
+ autoResize: boolean;
81
+ };
82
+ export type GridItemDefaultProps = {
83
+ className: string;
84
+ cancel: string;
85
+ handle: string;
86
+ minH: number;
87
+ minW: number;
88
+ maxH: number;
89
+ maxW: number;
90
+ transformScale: number;
91
+ };
92
+ export type DroppingPosition = {
93
+ left: number;
94
+ top: number;
95
+ e: DragEvent<HTMLDivElement>;
96
+ };
97
+ export type ReactDraggableCallbackData = {
98
+ node: HTMLElement;
99
+ x: number;
100
+ y: number;
101
+ deltaX: number;
102
+ deltaY: number;
103
+ lastX: number;
104
+ lastY: number;
105
+ };
106
+ export type ResizeHandlerNameType = "onResizeStart" | "onResize" | "onResizeStop";
107
+ export {};
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,30 @@
1
+ import { ResizeHandleAxis } from "../../Resizable/types";
2
+ import { Position, PositionParams } from "../../GridLayoutEditor/types";
3
+ export type RowHeight = number | ((width: number) => number);
4
+ export declare function calcGridColWidth(positionParams: PositionParams): number;
5
+ export declare function calcGridItemWHPx(gridUnits: number, colOrRowSize: number, marginPx: number): number;
6
+ export declare const resolveRowHeight: (rowHeight: RowHeight, width: number) => number;
7
+ export declare function calcGridItemPosition(positionParams: PositionParams, x: number, y: number, z: number, w: number, h: number, state?: {
8
+ resizing?: {
9
+ width: number;
10
+ height: number;
11
+ top: number;
12
+ left: number;
13
+ };
14
+ dragging?: {
15
+ top: number;
16
+ left: number;
17
+ };
18
+ }, customColWidth?: number): Position;
19
+ export declare function calcXY(positionParams: PositionParams, top: number, left: number, w: number, h: number): {
20
+ x: number;
21
+ y: number;
22
+ };
23
+ export declare function calcWH(positionParams: PositionParams, { width, height }: {
24
+ width: number;
25
+ height: number;
26
+ }, x: number, y: number, handleAxis?: ResizeHandleAxis, prevW?: number, prevH?: number): {
27
+ w: number;
28
+ h: number;
29
+ };
30
+ export declare function clamp(num: number, lowerBound: number, upperBound: number): number;
@@ -0,0 +1,108 @@
1
+ export function calcGridColWidth(positionParams) {
2
+ var margin = positionParams.margin, containerPadding = positionParams.containerPadding, containerWidth = positionParams.containerWidth, cols = positionParams.cols;
3
+ return ((containerWidth - margin[0] * (cols - 1) - containerPadding[0] * 2) / cols);
4
+ }
5
+ export function calcGridItemWHPx(gridUnits, colOrRowSize, marginPx) {
6
+ if (!Number.isFinite(gridUnits))
7
+ return gridUnits;
8
+ return Number((colOrRowSize * gridUnits + Math.max(0, gridUnits - 1) * marginPx).toFixed(1));
9
+ }
10
+ export var resolveRowHeight = function (rowHeight, width) {
11
+ return typeof rowHeight === "number" ? rowHeight : rowHeight(width);
12
+ };
13
+ export function calcGridItemPosition(positionParams, x, y, z, w, h, state, customColWidth) {
14
+ var margin = positionParams.margin, containerPadding = positionParams.containerPadding, rowHeight = positionParams.rowHeight;
15
+ var colWidth = customColWidth !== null && customColWidth !== void 0 ? customColWidth : calcGridColWidth(positionParams);
16
+ var rowHeightNumber = resolveRowHeight(rowHeight, colWidth);
17
+ var result = {
18
+ left: Math.round((colWidth + margin[0]) * x + containerPadding[0]),
19
+ top: Math.round((rowHeightNumber + margin[1]) * y + containerPadding[1]),
20
+ width: w === Infinity ? w : calcGridItemWHPx(w, colWidth, margin[0]),
21
+ height: h === Infinity ? h : calcGridItemWHPx(h, rowHeightNumber, margin[1]),
22
+ z: z,
23
+ };
24
+ if (state && state.resizing) {
25
+ result.width = Math.round(state.resizing.width);
26
+ result.height = Math.round(state.resizing.height);
27
+ result.top = Math.round(state.resizing.top);
28
+ result.left = Math.round(state.resizing.left);
29
+ }
30
+ else {
31
+ result.width = calcGridItemWHPx(w, colWidth, margin[0]);
32
+ result.height = calcGridItemWHPx(h, rowHeightNumber, margin[1]);
33
+ }
34
+ if (state && state.dragging) {
35
+ result.top = Math.round(state.dragging.top);
36
+ result.left = Math.round(state.dragging.left);
37
+ }
38
+ else {
39
+ result.top = Math.round((rowHeightNumber + margin[1]) * y + containerPadding[1]);
40
+ result.left = Math.round((colWidth + margin[0]) * x + containerPadding[0]);
41
+ }
42
+ return result;
43
+ }
44
+ export function calcXY(positionParams, top, left, w, h) {
45
+ var margin = positionParams.margin, cols = positionParams.cols, rowHeight = positionParams.rowHeight, maxRows = positionParams.maxRows;
46
+ var colWidth = calcGridColWidth(positionParams);
47
+ var rowHeightNumber = resolveRowHeight(rowHeight, colWidth);
48
+ var x = Math.round((left - margin[0]) / (colWidth + margin[0]));
49
+ var y = Math.round((top - margin[1]) / (rowHeightNumber + margin[1]));
50
+ // Capping
51
+ x = clamp(x, 0, cols - w);
52
+ y = clamp(y, 0, maxRows - h);
53
+ return { x: x, y: y };
54
+ }
55
+ export function calcWH(positionParams, _a, x, y, handleAxis, prevW, prevH) {
56
+ var width = _a.width, height = _a.height;
57
+ var margin = positionParams.margin, maxRows = positionParams.maxRows, cols = positionParams.cols, rowHeight = positionParams.rowHeight;
58
+ var colWidth = calcGridColWidth(positionParams);
59
+ var rowHeightNumber = resolveRowHeight(rowHeight, colWidth);
60
+ var w = Math.round((width + margin[0]) / (colWidth + margin[0]));
61
+ var h = Math.round((height + margin[1]) / (rowHeightNumber + margin[1]));
62
+ // // Capping
63
+ // w = clamp(w, 0, cols - x);
64
+ // h = clamp(h, 0, maxRows - y);
65
+ if (handleAxis === "nw") {
66
+ if (x <= 0 && y <= 0 && prevW && prevH) {
67
+ w = Math.max(Math.min(w, prevW), 0);
68
+ h = Math.max(Math.min(h, prevH), 0);
69
+ }
70
+ if (x <= 0 && prevW) {
71
+ w = Math.max(Math.min(w, prevW), 0);
72
+ h = Math.max(Math.min(h, maxRows - y), 0);
73
+ }
74
+ if (y <= 0 && prevH) {
75
+ h = Math.max(Math.min(h, prevH), 0);
76
+ }
77
+ }
78
+ if (handleAxis === "w" || handleAxis === "sw") {
79
+ if (x <= 0 && prevW) {
80
+ w = Math.max(Math.min(w, prevW), 0);
81
+ h = Math.max(Math.min(h, maxRows - y), 0);
82
+ }
83
+ }
84
+ if (handleAxis === "n") {
85
+ if (y <= 0 && prevH) {
86
+ w = Math.max(Math.min(w, cols - x), 0);
87
+ h = Math.max(Math.min(h, prevH), 0);
88
+ }
89
+ }
90
+ if (handleAxis === "ne") {
91
+ if (y <= 0 && prevH) {
92
+ w = Math.max(Math.min(w, cols - x), 0);
93
+ h = Math.max(Math.min(h, prevH), 0);
94
+ }
95
+ else {
96
+ w = Math.max(Math.min(w, cols - x), 0);
97
+ h = Math.max(Math.min(h, maxRows - y), 0);
98
+ }
99
+ }
100
+ if (handleAxis === "e" || handleAxis === "se") {
101
+ w = Math.max(Math.min(w, cols - x), 0);
102
+ h = Math.max(Math.min(h, maxRows - y), 0);
103
+ }
104
+ return { w: w, h: h };
105
+ }
106
+ export function clamp(num, lowerBound, upperBound) {
107
+ return Math.max(Math.min(num, upperBound), lowerBound);
108
+ }
@@ -0,0 +1,6 @@
1
+ import * as React from "react";
2
+ import type { ReactElement } from "react";
3
+ import { PropsWithChildren } from "../types";
4
+ import { ReactGridLayoutProps } from "./types";
5
+ declare const ReactGridLayout: ({ children, ...props }: PropsWithChildren<ReactGridLayoutProps>) => React.ReactElement;
6
+ export default ReactGridLayout;