publ-echo-test 0.0.142 → 0.0.144

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.
@@ -30,7 +30,7 @@ import { Resizable } from '../Resizable';
30
30
  var GridItem = function (_a) {
31
31
  var _b;
32
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;
33
+ var resizeHandle = props.resizeHandle, cols = props.cols, zOrder = props.zOrder, 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
34
  var _l = useState(), resizing = _l[0], setResizing = _l[1];
35
35
  var _m = useState(), dragging = _m[0], setDragging = _m[1];
36
36
  var _o = useState(), dragStart = _o[0], setDragStart = _o[1];
@@ -396,6 +396,7 @@ var GridItem = function (_a) {
396
396
  ref: elementRef,
397
397
  'data-grid-id': i,
398
398
  'data-z-index': z,
399
+ 'data-z-order': zOrder,
399
400
  className: classNames('react-grid-item', child.props.className, className, {
400
401
  static: props.static,
401
402
  isResizing: Boolean(resizing) && Boolean(isResizing) && Boolean(isHiddenVisibility),
@@ -1,7 +1,8 @@
1
- import React from "react";
2
- import { GridItemProps } from "./types";
3
- import { PropsWithChildren } from "../types";
1
+ import React from 'react';
2
+ import { GridItemProps } from './types';
3
+ import { PropsWithChildren } from '../types';
4
4
  declare const GroupItem: ({ children, ...props }: PropsWithChildren<GridItemProps & {
5
5
  onContextGroup: (e: React.MouseEvent) => void;
6
+ zOrder: number;
6
7
  }>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
7
8
  export default GroupItem;
@@ -21,15 +21,15 @@ var __rest = (this && this.__rest) || function (s, e) {
21
21
  return t;
22
22
  };
23
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";
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
29
  var GroupItem = function (_a) {
30
30
  var _b;
31
31
  var children = _a.children, props = __rest(_a, ["children"]);
32
- 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, onContextGroup = props.onContextGroup;
32
+ var resizeHandle = props.resizeHandle, cols = props.cols, zOrder = props.zOrder, 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, onContextGroup = props.onContextGroup;
33
33
  var _l = useState(), resizing = _l[0], setResizing = _l[1];
34
34
  var _m = useState(), dragging = _m[0], setDragging = _m[1];
35
35
  var _o = useState(), dragStart = _o[0], setDragStart = _o[1];
@@ -57,7 +57,9 @@ var GroupItem = function (_a) {
57
57
  var isCharacterChanged = mutation.type === 'characterData';
58
58
  var keepWidth = true;
59
59
  var hasPaddingChanged = false;
60
- var height = isCharacterChanged ? mutation.target.parentNode.clientHeight : mutation.target.clientHeight;
60
+ var height = isCharacterChanged
61
+ ? mutation.target.parentNode.clientHeight
62
+ : mutation.target.clientHeight;
61
63
  var width = targetNode.clientWidth;
62
64
  if (!isCharacterChanged && mutation.target instanceof Element) {
63
65
  var styles = getComputedStyle(mutation.target);
@@ -70,7 +72,10 @@ var GroupItem = function (_a) {
70
72
  var paddingR = parseFloat(styles.paddingRight);
71
73
  var paddingT = parseFloat(styles.paddingTop);
72
74
  var paddingB = parseFloat(styles.paddingBottom);
73
- if (prevPaddingL !== paddingL || prevPaddingR !== paddingR || prevPaddingT !== paddingT || prevPaddingB !== paddingB) {
75
+ if (prevPaddingL !== paddingL ||
76
+ prevPaddingR !== paddingR ||
77
+ prevPaddingT !== paddingT ||
78
+ prevPaddingB !== paddingB) {
74
79
  hasPaddingChanged = true;
75
80
  keepWidth = false;
76
81
  }
@@ -91,7 +96,8 @@ var GroupItem = function (_a) {
91
96
  if (prevH === h_1 && prevW === w_1 && newX === x && newY === y) {
92
97
  return;
93
98
  }
94
- props.onFitToContent && props.onFitToContent(i, w_1, h_1, newX, newY, { hasPaddingChanged: hasPaddingChanged });
99
+ props.onFitToContent &&
100
+ props.onFitToContent(i, w_1, h_1, newX, newY, { hasPaddingChanged: hasPaddingChanged });
95
101
  }
96
102
  };
97
103
  // MutationObserver 인스턴스 생성
@@ -156,7 +162,7 @@ var GroupItem = function (_a) {
156
162
  style = setTopLeft(pos);
157
163
  if (usePercentages) {
158
164
  if (containerWidth == null) {
159
- throw new Error("Container width is missing!");
165
+ throw new Error('Container width is missing!');
160
166
  }
161
167
  style.left = perc(pos.left / containerWidth);
162
168
  style.width = perc(pos.width / containerWidth);
@@ -170,7 +176,7 @@ var GroupItem = function (_a) {
170
176
  * @return {Element} Child wrapped in Draggable.
171
177
  */
172
178
  var mixinDraggable = function (child, isDraggable) {
173
- 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 }));
179
+ 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 }));
174
180
  };
175
181
  // /**
176
182
  // * Mix a Resizable instance into a child.
@@ -257,7 +263,7 @@ var GroupItem = function (_a) {
257
263
  var onDrag = function (e, _a) {
258
264
  var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
259
265
  if (!dragging) {
260
- throw new Error("onDrag called before onDragStart.");
266
+ throw new Error('onDrag called before onDragStart.');
261
267
  }
262
268
  setIsDragging(true);
263
269
  var top = dragging.top + deltaY;
@@ -291,7 +297,7 @@ var GroupItem = function (_a) {
291
297
  var onDragStop = function (e, _a) {
292
298
  var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
293
299
  if (!dragging) {
294
- throw new Error("onDragEnd called before onDragStart.");
300
+ throw new Error('onDragEnd called before onDragStart.');
295
301
  }
296
302
  var w = props.w, h = props.h, i = props.i;
297
303
  var left = dragging.left, top = dragging.top;
@@ -307,7 +313,7 @@ var GroupItem = function (_a) {
307
313
  var getResizableXYPosition = function (handle, width, height, prevW, prevH) {
308
314
  var newX = x;
309
315
  var newY = y;
310
- if (handle === "nw") {
316
+ if (handle === 'nw') {
311
317
  // NOTE - nw left(X)와 top(Y) 둘다 변경
312
318
  if (width > prevW) {
313
319
  newX = x - (width - prevW);
@@ -322,7 +328,7 @@ var GroupItem = function (_a) {
322
328
  newY = y + (prevH - height);
323
329
  }
324
330
  }
325
- if (handle === "n" || handle === "ne") {
331
+ if (handle === 'n' || handle === 'ne') {
326
332
  // NOTE - n, ne left(X) 고정 & top(Y) 변경
327
333
  if (height > prevH) {
328
334
  newY = y - (height - prevH);
@@ -331,7 +337,7 @@ var GroupItem = function (_a) {
331
337
  newY = y + (prevH - height);
332
338
  }
333
339
  }
334
- if (handle === "w" || handle === "sw") {
340
+ if (handle === 'w' || handle === 'sw') {
335
341
  // NOTE - s, sw left(X) 변경 top(Y) 고정
336
342
  if (width > prevW) {
337
343
  newX = x - (width - prevW);
@@ -348,7 +354,7 @@ var GroupItem = function (_a) {
348
354
  * @param {Object} callbackData an object with node and size information
349
355
  */
350
356
  var onResizeStart = function (e, callbackData) {
351
- onResizeHandler(e, callbackData, "onResizeStart");
357
+ onResizeHandler(e, callbackData, 'onResizeStart');
352
358
  };
353
359
  /**
354
360
  * onResize event handler
@@ -357,7 +363,7 @@ var GroupItem = function (_a) {
357
363
  */
358
364
  var onResize = function (e, callbackData) {
359
365
  setIsResizing(true);
360
- onResizeHandler(e, callbackData, "onResize");
366
+ onResizeHandler(e, callbackData, 'onResize');
361
367
  };
362
368
  /**
363
369
  * onResizeStop event handler
@@ -366,7 +372,7 @@ var GroupItem = function (_a) {
366
372
  */
367
373
  var onResizeStop = function (e, callbackData) {
368
374
  setIsResizing(false);
369
- onResizeHandler(e, callbackData, "onResizeStop");
375
+ onResizeHandler(e, callbackData, 'onResizeStop');
370
376
  };
371
377
  /**
372
378
  * Wrapper around drag events to provide more useful data.
@@ -400,7 +406,7 @@ var GroupItem = function (_a) {
400
406
  // maxW = Math.min(maxW, cols - x);
401
407
  w = clamp(w, minW, maxW);
402
408
  h = clamp(h, tempMinH, maxH);
403
- setResizing(handlerName === "onResizeStop" ? undefined : size);
409
+ setResizing(handlerName === 'onResizeStop' ? undefined : size);
404
410
  var _d = getResizableXYPosition(handle, w, h, prevW, prevH), newX = _d.newX, newY = _d.newY;
405
411
  handler(i, w, h, { e: e, node: node, size: size }, newX, newY);
406
412
  };
@@ -410,13 +416,19 @@ var GroupItem = function (_a) {
410
416
  key: i,
411
417
  ref: elementRef,
412
418
  'data-group-block-id': i,
413
- className: classNames("react-group-block", child.props.className, className, {
419
+ 'data-z-index': z,
420
+ 'data-z-order': zOrder,
421
+ className: classNames('react-group-block', child.props.className, className, {
414
422
  static: props.static,
415
- isResizing: Boolean(resizing) && Boolean(isResizing) && Boolean(isHiddenVisibility),
423
+ isResizing: Boolean(resizing) &&
424
+ Boolean(isResizing) &&
425
+ Boolean(isHiddenVisibility),
416
426
  resizing: Boolean(resizing),
417
- "react-draggable": isDraggable,
418
- isDragging: Boolean(isDragging) && Boolean(dragging) && Boolean(isHiddenVisibility),
419
- "react-draggable-dragging": Boolean(dragging),
427
+ 'react-draggable': isDraggable,
428
+ isDragging: Boolean(isDragging) &&
429
+ Boolean(dragging) &&
430
+ Boolean(isHiddenVisibility),
431
+ 'react-draggable-dragging': Boolean(dragging),
420
432
  // dropping: Boolean(droppingPosition),
421
433
  cssTransforms: useCSSTransforms,
422
434
  }),
@@ -1,6 +1,6 @@
1
- import { DragEvent, SyntheticEvent } from "react";
2
- import { RowHeight } from "../GridLayoutEditor/types";
3
- import { ResizeHandleAxis, ResizeHandleType } from "../Resizable/types";
1
+ import { DragEvent, SyntheticEvent } from 'react';
2
+ import { RowHeight } from '../GridLayoutEditor/types';
3
+ import { ResizeHandleAxis, ResizeHandleType } from '../Resizable/types';
4
4
  export type PartialPosition = {
5
5
  top: number;
6
6
  left: number;
@@ -81,6 +81,7 @@ export type GridItemProps = {
81
81
  isHiddenVisibility?: boolean;
82
82
  customColWidth?: number;
83
83
  autoResize: boolean;
84
+ zOrder?: number;
84
85
  };
85
86
  export type GridItemDefaultProps = {
86
87
  className: string;
@@ -106,5 +107,5 @@ export type ReactDraggableCallbackData = {
106
107
  lastX: number;
107
108
  lastY: number;
108
109
  };
109
- export type ResizeHandlerNameType = "onResizeStart" | "onResize" | "onResizeStop";
110
+ export type ResizeHandlerNameType = 'onResizeStart' | 'onResize' | 'onResizeStop';
110
111
  export {};
@@ -587,7 +587,7 @@ var ReactGridLayout = function (_a) {
587
587
  'not-editable-grid-item': !isRoot && !editable,
588
588
  'bulk-child-item': isInBulk,
589
589
  'outside-of-editing-group': outsideOfEditingGroup,
590
- }), z: zIndex, isDraggable: editable && !isInBulk, isResizable: editable && !isInBulk, 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, 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));
590
+ }), z: zIndex, zOrder: zOrder, isDraggable: editable && !isInBulk, isResizable: editable && !isInBulk, 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, 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));
591
591
  };
592
592
  var onDragOverHandler = function (e) {
593
593
  var _a;
@@ -711,7 +711,7 @@ var ReactGridLayout = function (_a) {
711
711
  'grid-bulk-block': block.blockId === 'BULK',
712
712
  editing: editingGroupBlock === block.blockId,
713
713
  selected: selectedGroupBlock === block.blockId,
714
- }), z: zIndex, containerWidth: width, cols: cols, margin: margin, containerPadding: containerPadding || margin, maxRows: maxRows, rowHeight: rowHeight, cancel: draggableCancel, handle: draggableHandle, onDragStop: onDragStopGroupHandler, onDragStart: onDragStartHandler, onDrag: onDragHandler, onResizeStart: onResizeStartHandler, onResize: onResizeHandler, onResizeStop: onResizeStopHandler, onFitToContent: onFitToContentHandler, isDraggable: !viewOnly && !isEditingGroup && !isInBulk, isResizable: !viewOnly && !isEditingGroup && !isInBulk, isBounded: false, useCSSTransforms: useCSSTransforms && isMounted, usePercentages: !isMounted, transformScale: transformScale, w: groupItem.w, h: groupItem.h, x: groupItem.x, y: groupItem.y, i: block.blockId,
714
+ }), z: zIndex, zOrder: zOrder, containerWidth: width, cols: cols, margin: margin, containerPadding: containerPadding || margin, maxRows: maxRows, rowHeight: rowHeight, cancel: draggableCancel, handle: draggableHandle, onDragStop: onDragStopGroupHandler, onDragStart: onDragStartHandler, onDrag: onDragHandler, onResizeStart: onResizeStartHandler, onResize: onResizeHandler, onResizeStop: onResizeStopHandler, onFitToContent: onFitToContentHandler, isDraggable: !viewOnly && !isEditingGroup && !isInBulk, isResizable: !viewOnly && !isEditingGroup && !isInBulk, isBounded: false, useCSSTransforms: useCSSTransforms && isMounted, usePercentages: !isMounted, transformScale: transformScale, w: groupItem.w, h: groupItem.h, x: groupItem.x, y: groupItem.y, i: block.blockId,
715
715
  // minH={l.minH}
716
716
  // minW={l.minW}
717
717
  // maxH={l.maxH}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "publ-echo-test",
3
- "version": "0.0.142",
3
+ "version": "0.0.144",
4
4
  "private": false,
5
5
  "main": "dist/lib/index.js",
6
6
  "types": "dist/lib/index.d.js",