publ-echo-test 0.0.38 → 0.0.39
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,9 +30,8 @@ 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;
|
34
34
|
var _l = useState(), resizing = _l[0], setResizing = _l[1];
|
35
|
-
var prevProps = useRef();
|
36
35
|
var _m = useState(), dragging = _m[0], setDragging = _m[1];
|
37
36
|
var _o = useState(), dragStart = _o[0], setDragStart = _o[1];
|
38
37
|
var _p = useState(false), isDragging = _p[0], setIsDragging = _p[1];
|
@@ -107,6 +106,35 @@ var GridItem = function (_a) {
|
|
107
106
|
observer.disconnect();
|
108
107
|
};
|
109
108
|
}, [autoResize, isSelected, isDragging, isResizing, props.w, props.h, x, y]);
|
109
|
+
// const moveDroppingItem = (prevProps: GridItemProps) => {
|
110
|
+
// const { droppingPosition } = props;
|
111
|
+
// if (!droppingPosition) return;
|
112
|
+
// const node = elementRef.current;
|
113
|
+
// // Can't find DOM node (are we unmounted?)
|
114
|
+
// if (!node) return;
|
115
|
+
// const prevDroppingPosition = prevProps.droppingPosition || {
|
116
|
+
// left: 0,
|
117
|
+
// top: 0,
|
118
|
+
// };
|
119
|
+
// const shouldDrag =
|
120
|
+
// (dragging && droppingPosition.left !== prevDroppingPosition.left) ||
|
121
|
+
// droppingPosition.top !== prevDroppingPosition.top;
|
122
|
+
// if (!dragging) {
|
123
|
+
// onDragStart(droppingPosition.e, {
|
124
|
+
// node,
|
125
|
+
// deltaX: droppingPosition.left,
|
126
|
+
// deltaY: droppingPosition.top,
|
127
|
+
// });
|
128
|
+
// } else if (shouldDrag) {
|
129
|
+
// const deltaX = droppingPosition.left - dragging.left;
|
130
|
+
// const deltaY = droppingPosition.top - dragging.top;
|
131
|
+
// onDrag(droppingPosition.e, {
|
132
|
+
// node,
|
133
|
+
// deltaX,
|
134
|
+
// deltaY,
|
135
|
+
// });
|
136
|
+
// }
|
137
|
+
// };
|
110
138
|
var getPositionParams = function (prop) {
|
111
139
|
if (prop === void 0) { prop = props; }
|
112
140
|
return {
|
@@ -178,7 +206,7 @@ var GridItem = function (_a) {
|
|
178
206
|
* @param {Object} callbackData an object with node, delta and position information
|
179
207
|
*/
|
180
208
|
var onDragStart = function (e, _a) {
|
181
|
-
var node = _a.node;
|
209
|
+
var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
|
182
210
|
var newPosition = { top: 0, left: 0 };
|
183
211
|
var offsetParent = node.offsetParent;
|
184
212
|
if (!offsetParent)
|
@@ -349,47 +377,16 @@ var GridItem = function (_a) {
|
|
349
377
|
h = clamp(h, tempMinH, maxH);
|
350
378
|
setResizing(handlerName === "onResizeStop" ? undefined : size);
|
351
379
|
var _d = getResizableXYPosition(handle, w, h, prevW, prevH), newX = _d.newX, newY = _d.newY;
|
352
|
-
|
353
|
-
|
354
|
-
|
355
|
-
|
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
|
-
});
|
380
|
+
// NOTE: test to fix
|
381
|
+
if (handle === 'nw' || handle === 'ne' || handle === 'sw' || handle === 'se') {
|
382
|
+
if (prevH === h) {
|
383
|
+
newX = x;
|
375
384
|
}
|
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
385
|
}
|
389
|
-
|
390
|
-
}
|
386
|
+
handler(i, w, h, { e: e, node: node, size: size }, newX, newY);
|
387
|
+
};
|
391
388
|
var pos = calcGridItemPosition(getPositionParams(), x, y, z, w, h, {
|
392
|
-
|
389
|
+
dragging: dragging,
|
393
390
|
resizing: resizing,
|
394
391
|
}, colWidth);
|
395
392
|
var child = React.Children.only(children);
|
@@ -402,8 +399,7 @@ var GridItem = function (_a) {
|
|
402
399
|
isResizing: Boolean(resizing) && Boolean(isResizing) && Boolean(isHiddenVisibility),
|
403
400
|
resizing: Boolean(resizing),
|
404
401
|
"react-draggable": isDraggable,
|
405
|
-
|
406
|
-
// Boolean(isDragging) && Boolean(dragging) && Boolean(isHiddenVisibility),
|
402
|
+
isDragging: Boolean(isDragging) && Boolean(dragging) && Boolean(isHiddenVisibility),
|
407
403
|
"react-draggable-dragging": Boolean(dragging),
|
408
404
|
// dropping: Boolean(droppingPosition),
|
409
405
|
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 {};
|
@@ -434,17 +434,16 @@ var ReactGridLayout = function (_a) {
|
|
434
434
|
return false;
|
435
435
|
}
|
436
436
|
var finalDroppingItem = __assign(__assign({}, droppingItem), onDragOverResult);
|
437
|
-
var
|
438
|
-
var
|
439
|
-
|
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
|
+
};
|
440
443
|
if (!droppingDOMNode) {
|
441
444
|
var calculatedPosition = calcXY(getPositionParams(), layerY, layerX, finalDroppingItem.w, finalDroppingItem.h);
|
442
|
-
setDroppingDOMNode(_jsx("div", {
|
443
|
-
setDroppingPosition(
|
444
|
-
left: layerX / transformScale,
|
445
|
-
top: layerY / transformScale,
|
446
|
-
e: e,
|
447
|
-
});
|
445
|
+
setDroppingDOMNode(_jsx("div", {}, finalDroppingItem.i));
|
446
|
+
setDroppingPosition(droppingPosition);
|
448
447
|
setLayout(__spreadArray(__spreadArray([], layout, true), [
|
449
448
|
__assign(__assign({}, finalDroppingItem), { x: calculatedPosition.x, y: calculatedPosition.y, static: false, isDraggable: true }),
|
450
449
|
], false));
|
@@ -453,11 +452,7 @@ var ReactGridLayout = function (_a) {
|
|
453
452
|
var left = droppingPosition.left, top_1 = droppingPosition.top;
|
454
453
|
var shouldUpdatePosition = left != layerX || top_1 != layerY;
|
455
454
|
if (shouldUpdatePosition) {
|
456
|
-
setDroppingPosition(
|
457
|
-
left: layerX / transformScale,
|
458
|
-
top: layerY / transformScale,
|
459
|
-
e: e,
|
460
|
-
});
|
455
|
+
setDroppingPosition(droppingPosition);
|
461
456
|
}
|
462
457
|
}
|
463
458
|
};
|
@@ -493,7 +488,7 @@ var ReactGridLayout = function (_a) {
|
|
493
488
|
};
|
494
489
|
var mergedClassName = classNames(layoutClassName, className);
|
495
490
|
var mergedStyle = __assign({ height: containerHeight() }, 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(),
|
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: {
|
497
492
|
marginTop: margin[1] + "px",
|
498
493
|
marginBottom: margin[1] + "px",
|
499
494
|
marginLeft: margin[0] + "px",
|