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,
|
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
|
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
|
-
|
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:
|
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
|
103
|
-
y
|
102
|
+
x?: number;
|
103
|
+
y?: number;
|
104
104
|
deltaX: number;
|
105
105
|
deltaY: number;
|
106
|
-
lastX
|
107
|
-
lastY
|
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
|
438
|
-
var
|
439
|
-
|
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(
|
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(
|
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",
|