publ-echo-test 0.0.33 → 0.0.35
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.
- package/dist/lib/Draggable/DraggableCore.js +0 -7
- package/dist/lib/GridItem/GridItem.js +25 -15
- package/dist/lib/GridItem/types.d.ts +3 -1
- package/dist/lib/GridLayoutEditor/ReactGridLayout.js +6 -4
- package/dist/lib/GridLayoutEditor/types.d.ts +10 -1
- package/dist/lib/Resizable/Resizable.js +8 -2
- package/dist/lib/Resizable/types.d.ts +1 -0
- package/package.json +1 -1
@@ -93,11 +93,6 @@ var DraggableCore = function (_a) {
|
|
93
93
|
var _a, _b;
|
94
94
|
return (_b = (_a = props === null || props === void 0 ? void 0 : props.nodeRef) === null || _a === void 0 ? void 0 : _a.current) !== null && _b !== void 0 ? _b : draggableCoreRef === null || draggableCoreRef === void 0 ? void 0 : draggableCoreRef.current;
|
95
95
|
};
|
96
|
-
var findChildrenNode = function () {
|
97
|
-
var _a;
|
98
|
-
console.log(props.nodeRef);
|
99
|
-
return (_a = props === null || props === void 0 ? void 0 : props.nodeRef) === null || _a === void 0 ? void 0 : _a.current;
|
100
|
-
};
|
101
96
|
// NOTE - event 발생 시 {x, y} position을 가져오는 함수
|
102
97
|
var getControlPosition = function (e, touchIdentifier) {
|
103
98
|
var _a;
|
@@ -187,7 +182,6 @@ var DraggableCore = function (_a) {
|
|
187
182
|
setDraggableCoreState(function (prev) { return (__assign(__assign({}, prev), { dragging: true, lastX: x, lastY: y })); });
|
188
183
|
}
|
189
184
|
function handleDrag(e) {
|
190
|
-
// console.log(e.currentTarget)
|
191
185
|
var _a;
|
192
186
|
var position = getControlPosition(e, draggableCoreState.touchIdentifier);
|
193
187
|
if (!position)
|
@@ -204,7 +198,6 @@ var DraggableCore = function (_a) {
|
|
204
198
|
}
|
205
199
|
var coreEvent = createCoreData(x, y);
|
206
200
|
var thisNode = findDOMNode();
|
207
|
-
// const children = findChildrenNode()
|
208
201
|
if (!coreEvent || !thisNode)
|
209
202
|
return;
|
210
203
|
var shouldUpdate = onDrag(e, coreEvent, thisNode);
|
@@ -47,12 +47,17 @@ var GridItem = function (_a) {
|
|
47
47
|
if (!targetNode || isDragging || isResizing) {
|
48
48
|
return;
|
49
49
|
}
|
50
|
+
var prevPaddingL = parseFloat(getComputedStyle(targetNode).paddingLeft);
|
51
|
+
var prevPaddingR = parseFloat(getComputedStyle(targetNode).paddingRight);
|
52
|
+
var prevPaddingT = parseFloat(getComputedStyle(targetNode).paddingTop);
|
53
|
+
var prevPaddingB = parseFloat(getComputedStyle(targetNode).paddingBottom);
|
50
54
|
// MutationObserver 콜백 함수
|
51
55
|
var callback = function (mutationsList) {
|
52
56
|
for (var _i = 0, mutationsList_1 = mutationsList; _i < mutationsList_1.length; _i++) {
|
53
57
|
var mutation = mutationsList_1[_i];
|
54
58
|
var isCharacterChanged = mutation.type === 'characterData';
|
55
59
|
var keepWidth = true;
|
60
|
+
var hasPaddingChanged = false;
|
56
61
|
var height = isCharacterChanged ? mutation.target.parentNode.clientHeight : mutation.target.clientHeight;
|
57
62
|
var width = targetNode.clientWidth;
|
58
63
|
if (!isCharacterChanged && mutation.target instanceof Element) {
|
@@ -61,6 +66,14 @@ var GridItem = function (_a) {
|
|
61
66
|
if (minWidth > width) {
|
62
67
|
keepWidth = false;
|
63
68
|
}
|
69
|
+
// NOTE: POC
|
70
|
+
var paddingL = parseFloat(styles.paddingLeft);
|
71
|
+
var paddingR = parseFloat(styles.paddingRight);
|
72
|
+
var paddingT = parseFloat(styles.paddingTop);
|
73
|
+
var paddingB = parseFloat(styles.paddingBottom);
|
74
|
+
if (prevPaddingL !== paddingL || prevPaddingR !== paddingR || prevPaddingT !== paddingT || prevPaddingB !== paddingB) {
|
75
|
+
hasPaddingChanged = true;
|
76
|
+
}
|
64
77
|
}
|
65
78
|
var prevW = props.w;
|
66
79
|
var prevH = props.h;
|
@@ -75,7 +88,10 @@ var GridItem = function (_a) {
|
|
75
88
|
h_1 = prevH;
|
76
89
|
}
|
77
90
|
var _b = getResizableXYPosition('e', w_1, h_1, prevW, prevH), newX = _b.newX, newY = _b.newY;
|
78
|
-
|
91
|
+
if (prevH === h_1 && prevW === w_1 && newX === x && newY === y) {
|
92
|
+
return;
|
93
|
+
}
|
94
|
+
props.onFitToContent && props.onFitToContent(i, w_1, h_1, newX, newY, { hasPaddingChanged: hasPaddingChanged });
|
79
95
|
}
|
80
96
|
};
|
81
97
|
// MutationObserver 인스턴스 생성
|
@@ -315,16 +331,6 @@ var GridItem = function (_a) {
|
|
315
331
|
*/
|
316
332
|
var onResize = function (e, callbackData) {
|
317
333
|
setIsResizing(true);
|
318
|
-
// let { w, h } = calcWH(
|
319
|
-
// getPositionParams(),
|
320
|
-
// callbackData.size,
|
321
|
-
// x,
|
322
|
-
// y,
|
323
|
-
// callbackData.handle,
|
324
|
-
// undefined,
|
325
|
-
// undefined,
|
326
|
-
// callbackData.isOverMin
|
327
|
-
// );
|
328
334
|
onResizeHandler(e, callbackData, "onResize");
|
329
335
|
};
|
330
336
|
/**
|
@@ -345,27 +351,31 @@ var GridItem = function (_a) {
|
|
345
351
|
* @return {Function} Handler function.
|
346
352
|
*/
|
347
353
|
var onResizeHandler = function (e, _a, handlerName) {
|
348
|
-
var node = _a.node, size = _a.size, handle = _a.handle, minWidth = _a.minWidth;
|
354
|
+
var node = _a.node, size = _a.size, handle = _a.handle, minWidth = _a.minWidth, minHeight = _a.minHeight;
|
349
355
|
var handler = props[handlerName];
|
350
356
|
if (!handler)
|
351
357
|
return;
|
352
358
|
var prevW = props.w, prevH = props.h;
|
353
359
|
// Get new XY
|
354
360
|
var _b = calcWH(getPositionParams(), size, x, y, handle, prevW, prevH, false), w = _b.w, h = _b.h;
|
361
|
+
var tempMinH = minH;
|
355
362
|
if (minWidth) {
|
356
|
-
var
|
363
|
+
var _c = calcWH(getPositionParams(), __assign(__assign({}, size), { width: minWidth, height: minHeight !== null && minHeight !== void 0 ? minHeight : 0 }), x, y, handle, prevW, prevH, true), minW_1 = _c.w, newMinH = _c.h;
|
357
364
|
if (minW_1 > w) {
|
358
365
|
w = minW_1;
|
359
366
|
}
|
367
|
+
if (minH > 1) {
|
368
|
+
tempMinH = Math.max(1, newMinH);
|
369
|
+
}
|
360
370
|
}
|
361
371
|
// minW should be at least 1
|
362
372
|
// minW = Math.max(minW, 1);
|
363
373
|
// maxW should be at most (cols - x)
|
364
374
|
// maxW = Math.min(maxW, cols - x);
|
365
375
|
w = clamp(w, minW, maxW);
|
366
|
-
h = clamp(h,
|
376
|
+
h = clamp(h, tempMinH, maxH);
|
367
377
|
setResizing(handlerName === "onResizeStop" ? undefined : size);
|
368
|
-
var
|
378
|
+
var _d = getResizableXYPosition(handle, w, h, prevW, prevH), newX = _d.newX, newY = _d.newY;
|
369
379
|
handler(i, w, h, { e: e, node: node, size: size }, newX, newY);
|
370
380
|
};
|
371
381
|
var pos = calcGridItemPosition(getPositionParams(), x, y, z, w, h, {
|
@@ -75,7 +75,9 @@ export type GridItemProps = {
|
|
75
75
|
onResize?: ResizeGridItemCallback<GridResizeEvent>;
|
76
76
|
onResizeStart?: ResizeGridItemCallback<GridResizeEvent>;
|
77
77
|
onResizeStop?: ResizeGridItemCallback<GridResizeEvent>;
|
78
|
-
onFitToContent?: (i: string, w: number, h: number, x: number, y: number
|
78
|
+
onFitToContent?: (i: string, w: number, h: number, x: number, y: number, { hasPaddingChanged }: {
|
79
|
+
hasPaddingChanged: boolean;
|
80
|
+
}) => void;
|
79
81
|
isHiddenVisibility?: boolean;
|
80
82
|
customColWidth?: number;
|
81
83
|
autoResize: boolean;
|
@@ -255,7 +255,6 @@ var ReactGridLayout = function (_a) {
|
|
255
255
|
var l = getLayoutItem(layout, i);
|
256
256
|
if (!l)
|
257
257
|
return;
|
258
|
-
console.log(l);
|
259
258
|
setOldResizeItem(cloneLayoutItem(l));
|
260
259
|
setOldLayout(layout);
|
261
260
|
props.onResizeStart &&
|
@@ -334,8 +333,9 @@ var ReactGridLayout = function (_a) {
|
|
334
333
|
setOldLayout(undefined);
|
335
334
|
onLayoutMaybeChanged(newLayout, oldLayout);
|
336
335
|
};
|
337
|
-
var onFitToContentHandler = function (i, w, h, x, y) {
|
338
|
-
var
|
336
|
+
var onFitToContentHandler = function (i, w, h, x, y, _a) {
|
337
|
+
var hasPaddingChanged = _a.hasPaddingChanged;
|
338
|
+
var _b = withLayoutItem(layout, i, function (l) {
|
339
339
|
var hasCollisions;
|
340
340
|
if (preventCollision && !allowOverlap) {
|
341
341
|
var collisions = getAllCollisions(layout, __assign(__assign({}, l), { w: x, h: y })).filter(function (layoutItem) { return layoutItem.i !== l.i; });
|
@@ -360,9 +360,10 @@ var ReactGridLayout = function (_a) {
|
|
360
360
|
l.h = h;
|
361
361
|
l.x = x;
|
362
362
|
l.y = y;
|
363
|
+
l.minH = h;
|
363
364
|
}
|
364
365
|
return l;
|
365
|
-
}), newLayout =
|
366
|
+
}), newLayout = _b[0], l = _b[1];
|
366
367
|
if (!l)
|
367
368
|
return;
|
368
369
|
props.onFitToContent &&
|
@@ -370,6 +371,7 @@ var ReactGridLayout = function (_a) {
|
|
370
371
|
layout: newLayout,
|
371
372
|
prev: oldResizeItem,
|
372
373
|
item: l,
|
374
|
+
hasPaddingChanged: hasPaddingChanged
|
373
375
|
});
|
374
376
|
setLayout(allowOverlap ? newLayout : compact(newLayout, compactType, cols));
|
375
377
|
};
|
@@ -71,7 +71,7 @@ export type ReactGridLayoutProps = {
|
|
71
71
|
innerRef?: RefObject<HTMLDivElement>;
|
72
72
|
minNbRow?: number;
|
73
73
|
customColWidth?: number;
|
74
|
-
onFitToContent?:
|
74
|
+
onFitToContent?: OnFitContentCallBack;
|
75
75
|
};
|
76
76
|
export type DragOverEvent = MouseEvent & {
|
77
77
|
nativeEvent: {
|
@@ -79,6 +79,15 @@ export type DragOverEvent = MouseEvent & {
|
|
79
79
|
layerY: number;
|
80
80
|
} & Event;
|
81
81
|
};
|
82
|
+
export type OnFitContentCallBack = (properties: {
|
83
|
+
layout: Layout;
|
84
|
+
prev?: LayoutItem;
|
85
|
+
item?: LayoutItem;
|
86
|
+
placeholder?: LayoutItem;
|
87
|
+
e?: ResizeEventType;
|
88
|
+
node?: HTMLElement;
|
89
|
+
hasPaddingChanged: boolean;
|
90
|
+
}) => void;
|
82
91
|
export type EventCallback = (properties: {
|
83
92
|
layout: Layout;
|
84
93
|
prev?: LayoutItem;
|
@@ -53,6 +53,7 @@ var Resizable = function (_a) {
|
|
53
53
|
var className = props.className, draggableOpts = props.draggableOpts, width = props.width, height = props.height, handle = props.handle, onResize = props.onResize, onResizeStop = props.onResizeStop, onResizeStart = props.onResizeStart, restProps = __rest(props, ["className", "draggableOpts", "width", "height", "handle", "onResize", "onResizeStop", "onResizeStart"]);
|
54
54
|
var elementRef = children.ref;
|
55
55
|
var extendedHeightRef = useRef(null);
|
56
|
+
var shouldShrinkRef = useRef(false);
|
56
57
|
var minWidth = useRef(0);
|
57
58
|
useEffect(function () {
|
58
59
|
var _a;
|
@@ -62,6 +63,7 @@ var Resizable = function (_a) {
|
|
62
63
|
if (!isResizing) {
|
63
64
|
extendedHeightRef.current = null;
|
64
65
|
minWidth.current = 0;
|
66
|
+
shouldShrinkRef.current = false;
|
65
67
|
return;
|
66
68
|
}
|
67
69
|
if (!elementRef.current) {
|
@@ -74,10 +76,14 @@ var Resizable = function (_a) {
|
|
74
76
|
var target = (_a = placeholder.children[0].children[0].children[0]) !== null && _a !== void 0 ? _a : placeholder.children[0].children[0];
|
75
77
|
if (target.clientHeight > elementRef.current.clientHeight) {
|
76
78
|
extendedHeightRef.current = target.clientHeight;
|
79
|
+
shouldShrinkRef.current = true;
|
77
80
|
}
|
78
81
|
else {
|
79
82
|
extendedHeightRef.current = null;
|
80
83
|
}
|
84
|
+
if (shouldShrinkRef.current && target.clientHeight < elementRef.current.clientHeight) {
|
85
|
+
extendedHeightRef.current = target.clientHeight;
|
86
|
+
}
|
81
87
|
var minWidthStyle = target.computedStyleMap().get('min-width');
|
82
88
|
if (typeof minWidthStyle.value === 'number') {
|
83
89
|
minWidth.current = minWidthStyle.value;
|
@@ -161,7 +167,7 @@ var Resizable = function (_a) {
|
|
161
167
|
var resizeHandler = function (handlerName, handleAxis) {
|
162
168
|
return function (e, _a) {
|
163
169
|
var _b, _c;
|
164
|
-
var _d, _e, _f, _g, _h, _j;
|
170
|
+
var _d, _e, _f, _g, _h, _j, _k;
|
165
171
|
var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
|
166
172
|
if (handlerName === "onResizeStart") {
|
167
173
|
var position = { top: (_d = props.top) !== null && _d !== void 0 ? _d : 0, left: (_e = props.left) !== null && _e !== void 0 ? _e : 0 };
|
@@ -222,7 +228,7 @@ var Resizable = function (_a) {
|
|
222
228
|
var cb = typeof props[handlerName] === "function" ? props[handlerName] : null;
|
223
229
|
var isCbSkipped = handlerName === "onResize" && !isDimensionsChanged;
|
224
230
|
if (cb && !isCbSkipped) {
|
225
|
-
cb(e, { node: node, size: { width: width, height: height, top: top, left: left }, handle: handleAxis, minWidth: minWidth.current });
|
231
|
+
cb(e, { node: node, size: { width: width, height: height, top: top, left: left }, handle: handleAxis, minWidth: minWidth.current, minHeight: (_k = extendedHeightRef.current) !== null && _k !== void 0 ? _k : 0 });
|
226
232
|
}
|
227
233
|
if (handlerName === "onResizeStop") {
|
228
234
|
startPosition.current = null;
|