publ-echo-test 0.0.37 → 0.0.38

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,8 +30,9 @@ 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, 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, droppingPosition = props.droppingPosition;
34
34
  var _l = useState(), resizing = _l[0], setResizing = _l[1];
35
+ var prevProps = useRef();
35
36
  var _m = useState(), dragging = _m[0], setDragging = _m[1];
36
37
  var _o = useState(), dragStart = _o[0], setDragStart = _o[1];
37
38
  var _p = useState(false), isDragging = _p[0], setIsDragging = _p[1];
@@ -81,14 +82,13 @@ var GridItem = function (_a) {
81
82
  var _a = calcWH(getPositionParams(), {
82
83
  width: width,
83
84
  height: height,
84
- }, x, y, 'e', props.w, props.h, true), w_1 = _a.w, h_1 = _a.h;
85
+ }, x, y, 'e', props.w, props.h, false), w_1 = _a.w, h_1 = _a.h;
85
86
  if (keepWidth) {
86
87
  w_1 = prevW;
87
88
  }
88
89
  if (prevH > h_1) {
89
90
  h_1 = prevH;
90
91
  }
91
- console.log('keep width?', keepWidth);
92
92
  var _b = getResizableXYPosition('e', w_1, h_1, prevW, prevH), newX = _b.newX, newY = _b.newY;
93
93
  if (prevH === h_1 && prevW === w_1 && newX === x && newY === y) {
94
94
  return;
@@ -107,35 +107,6 @@ var GridItem = function (_a) {
107
107
  observer.disconnect();
108
108
  };
109
109
  }, [autoResize, isSelected, isDragging, isResizing, props.w, props.h, x, y]);
110
- // const moveDroppingItem = (prevProps: GridItemProps) => {
111
- // const { droppingPosition } = props;
112
- // if (!droppingPosition) return;
113
- // const node = elementRef.current;
114
- // // Can't find DOM node (are we unmounted?)
115
- // if (!node) return;
116
- // const prevDroppingPosition = prevProps.droppingPosition || {
117
- // left: 0,
118
- // top: 0,
119
- // };
120
- // const shouldDrag =
121
- // (dragging && droppingPosition.left !== prevDroppingPosition.left) ||
122
- // droppingPosition.top !== prevDroppingPosition.top;
123
- // if (!dragging) {
124
- // onDragStart(droppingPosition.e, {
125
- // node,
126
- // deltaX: droppingPosition.left,
127
- // deltaY: droppingPosition.top,
128
- // });
129
- // } else if (shouldDrag) {
130
- // const deltaX = droppingPosition.left - dragging.left;
131
- // const deltaY = droppingPosition.top - dragging.top;
132
- // onDrag(droppingPosition.e, {
133
- // node,
134
- // deltaX,
135
- // deltaY,
136
- // });
137
- // }
138
- // };
139
110
  var getPositionParams = function (prop) {
140
111
  if (prop === void 0) { prop = props; }
141
112
  return {
@@ -207,7 +178,7 @@ var GridItem = function (_a) {
207
178
  * @param {Object} callbackData an object with node, delta and position information
208
179
  */
209
180
  var onDragStart = function (e, _a) {
210
- var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
181
+ var node = _a.node;
211
182
  var newPosition = { top: 0, left: 0 };
212
183
  var offsetParent = node.offsetParent;
213
184
  if (!offsetParent)
@@ -380,8 +351,45 @@ var GridItem = function (_a) {
380
351
  var _d = getResizableXYPosition(handle, w, h, prevW, prevH), newX = _d.newX, newY = _d.newY;
381
352
  handler(i, w, h, { e: e, node: node, size: size }, newX, newY);
382
353
  };
354
+ useEffect(function () {
355
+ var moveDroppingItem = function (prevProps) {
356
+ var droppingPosition = props.droppingPosition;
357
+ if (!droppingPosition)
358
+ return;
359
+ var node = elementRef.current;
360
+ if (!node)
361
+ return;
362
+ var prevDroppingPosition = prevProps.droppingPosition || {
363
+ left: 0,
364
+ top: 0,
365
+ };
366
+ var shouldDrag = (dragging && droppingPosition.left !== prevDroppingPosition.left) ||
367
+ droppingPosition.top !== prevDroppingPosition.top;
368
+ // const shouldDrag = true;
369
+ if (!dragging) {
370
+ onDragStart(droppingPosition.e, {
371
+ node: node,
372
+ deltaX: droppingPosition.left,
373
+ deltaY: droppingPosition.top,
374
+ });
375
+ }
376
+ else if (shouldDrag) {
377
+ var deltaX = droppingPosition.left - dragging.left;
378
+ var deltaY = droppingPosition.top - dragging.top;
379
+ onDrag(droppingPosition.e, {
380
+ node: node,
381
+ deltaX: deltaX,
382
+ deltaY: deltaY,
383
+ });
384
+ }
385
+ };
386
+ if (prevProps.current) {
387
+ moveDroppingItem(prevProps.current);
388
+ }
389
+ prevProps.current = props;
390
+ }, [props, dragging, onDragStart, onDrag]);
383
391
  var pos = calcGridItemPosition(getPositionParams(), x, y, z, w, h, {
384
- dragging: dragging,
392
+ // dragging,
385
393
  resizing: resizing,
386
394
  }, colWidth);
387
395
  var child = React.Children.only(children);
@@ -394,7 +402,8 @@ var GridItem = function (_a) {
394
402
  isResizing: Boolean(resizing) && Boolean(isResizing) && Boolean(isHiddenVisibility),
395
403
  resizing: Boolean(resizing),
396
404
  "react-draggable": isDraggable,
397
- isDragging: Boolean(isDragging) && Boolean(dragging) && Boolean(isHiddenVisibility),
405
+ // isDragging:
406
+ // Boolean(isDragging) && Boolean(dragging) && Boolean(isHiddenVisibility),
398
407
  "react-draggable-dragging": Boolean(dragging),
399
408
  // dropping: Boolean(droppingPosition),
400
409
  cssTransforms: useCSSTransforms,
@@ -99,12 +99,12 @@ export type DroppingPosition = {
99
99
  };
100
100
  export type ReactDraggableCallbackData = {
101
101
  node: HTMLElement;
102
- x: number;
103
- y: number;
102
+ x?: number;
103
+ y?: number;
104
104
  deltaX: number;
105
105
  deltaY: number;
106
- lastX: number;
107
- lastY: number;
106
+ lastX?: number;
107
+ lastY?: number;
108
108
  };
109
109
  export type ResizeHandlerNameType = "onResizeStart" | "onResize" | "onResizeStop";
110
110
  export {};
@@ -59,7 +59,7 @@ export function calcWH(positionParams, _a, x, y, handleAxis, prevW, prevH, shoul
59
59
  var rowHeightNumber = resolveRowHeight(rowHeight, colWidth);
60
60
  var roundOrCeil = shouldCeil ? Math.ceil : Math.round;
61
61
  var w = roundOrCeil((width + margin[0]) / (colWidth + margin[0]));
62
- var h = roundOrCeil((height + margin[1]) / (rowHeightNumber + margin[1]));
62
+ var h = roundOrCeil(roundToOneDecimal((height + margin[1]) / (rowHeightNumber + margin[1])));
63
63
  // // Capping
64
64
  // w = clamp(w, 0, cols - x);
65
65
  // h = clamp(h, 0, maxRows - y);
@@ -107,3 +107,6 @@ export function calcWH(positionParams, _a, x, y, handleAxis, prevW, prevH, shoul
107
107
  export function clamp(num, lowerBound, upperBound) {
108
108
  return Math.max(Math.min(num, upperBound), lowerBound);
109
109
  }
110
+ function roundToOneDecimal(num) {
111
+ return Math.floor(num * 10) / 10;
112
+ }
@@ -434,16 +434,17 @@ var ReactGridLayout = function (_a) {
434
434
  return false;
435
435
  }
436
436
  var finalDroppingItem = __assign(__assign({}, droppingItem), onDragOverResult);
437
- var _b = e.nativeEvent, layerX = _b.layerX, layerY = _b.layerY; // TODO fix
438
- var droppingPosition = {
439
- left: layerX / transformScale,
440
- top: layerY / transformScale,
441
- e: e,
442
- };
437
+ var gridRect = e.currentTarget.getBoundingClientRect();
438
+ var layerX = e.clientX - gridRect.left;
439
+ var layerY = e.clientY - gridRect.top;
443
440
  if (!droppingDOMNode) {
444
441
  var calculatedPosition = calcXY(getPositionParams(), layerY, layerX, finalDroppingItem.w, finalDroppingItem.h);
445
- setDroppingDOMNode(_jsx("div", {}, finalDroppingItem.i));
446
- setDroppingPosition(droppingPosition);
442
+ setDroppingDOMNode(_jsx("div", { children: "\uC5EC\uAE30\uC5D0 \uB4DC\uB889" }, finalDroppingItem.i));
443
+ setDroppingPosition({
444
+ left: layerX / transformScale,
445
+ top: layerY / transformScale,
446
+ e: e,
447
+ });
447
448
  setLayout(__spreadArray(__spreadArray([], layout, true), [
448
449
  __assign(__assign({}, finalDroppingItem), { x: calculatedPosition.x, y: calculatedPosition.y, static: false, isDraggable: true }),
449
450
  ], false));
@@ -452,7 +453,11 @@ var ReactGridLayout = function (_a) {
452
453
  var left = droppingPosition.left, top_1 = droppingPosition.top;
453
454
  var shouldUpdatePosition = left != layerX || top_1 != layerY;
454
455
  if (shouldUpdatePosition) {
455
- setDroppingPosition(droppingPosition);
456
+ setDroppingPosition({
457
+ left: layerX / transformScale,
458
+ top: layerY / transformScale,
459
+ e: e,
460
+ });
456
461
  }
457
462
  }
458
463
  };
@@ -488,7 +493,7 @@ var ReactGridLayout = function (_a) {
488
493
  };
489
494
  var mergedClassName = classNames(layoutClassName, className);
490
495
  var mergedStyle = __assign({ height: containerHeight() }, style);
491
- return (_jsxs("div", { ref: innerRef, className: mergedClassName, style: mergedStyle, onDrop: isDroppable ? onDropHandler : noop, onDragLeave: isDroppable ? onDragLeaveHandler : noop, onDragEnter: isDroppable ? onDragEnterHandler : noop, onDragOver: isDroppable ? onDragOverHandler : noop, children: [React.Children.map(children, function (child) { return processGridItem(child); }), placeholder(), activeDrag && _jsx("div", { className: "grid-guide-line-center" }), activeDrag && (_jsx("div", { className: "grid-placeholder", style: {
496
+ return (_jsxs("div", { ref: innerRef, className: mergedClassName, style: mergedStyle, onDrop: isDroppable ? onDropHandler : noop, onDragLeave: isDroppable ? onDragLeaveHandler : noop, onDragEnter: isDroppable ? onDragEnterHandler : noop, onDragOver: isDroppable ? onDragOverHandler : noop, children: [React.Children.map(children, function (child) { return processGridItem(child); }), placeholder(), droppingDOMNode && processGridItem(droppingDOMNode, true), activeDrag && _jsx("div", { className: "grid-guide-line-center" }), activeDrag && (_jsx("div", { className: "grid-placeholder", style: {
492
497
  marginTop: margin[1] + "px",
493
498
  marginBottom: margin[1] + "px",
494
499
  marginLeft: margin[0] + "px",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "publ-echo-test",
3
- "version": "0.0.37",
3
+ "version": "0.0.38",
4
4
  "private": false,
5
5
  "main": "dist/lib/index.js",
6
6
  "types": "dist/lib/index.d.js",