publ-echo-test 0.0.34 → 0.0.36
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 +18 -2
- package/dist/lib/GridItem/types.d.ts +3 -1
- package/dist/lib/GridLayoutEditor/ReactGridLayout.js +5 -4
- package/dist/lib/GridLayoutEditor/types.d.ts +10 -1
- package/dist/lib/Resizable/Resizable.js +9 -1
- 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 인스턴스 생성
|
@@ -341,7 +357,7 @@ var GridItem = function (_a) {
|
|
341
357
|
return;
|
342
358
|
var prevW = props.w, prevH = props.h;
|
343
359
|
// Get new XY
|
344
|
-
var _b = calcWH(getPositionParams(), size, x, y, handle, prevW, prevH,
|
360
|
+
var _b = calcWH(getPositionParams(), size, x, y, handle, prevW, prevH, true), w = _b.w, h = _b.h;
|
345
361
|
var tempMinH = minH;
|
346
362
|
if (minWidth) {
|
347
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;
|
@@ -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; });
|
@@ -363,7 +363,7 @@ var ReactGridLayout = function (_a) {
|
|
363
363
|
l.minH = h;
|
364
364
|
}
|
365
365
|
return l;
|
366
|
-
}), newLayout =
|
366
|
+
}), newLayout = _b[0], l = _b[1];
|
367
367
|
if (!l)
|
368
368
|
return;
|
369
369
|
props.onFitToContent &&
|
@@ -371,6 +371,7 @@ var ReactGridLayout = function (_a) {
|
|
371
371
|
layout: newLayout,
|
372
372
|
prev: oldResizeItem,
|
373
373
|
item: l,
|
374
|
+
hasPaddingChanged: hasPaddingChanged
|
374
375
|
});
|
375
376
|
setLayout(allowOverlap ? newLayout : compact(newLayout, compactType, cols));
|
376
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,15 +53,17 @@ 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
|
-
var _a;
|
59
|
+
var _a, _b;
|
59
60
|
if (!autoResize) {
|
60
61
|
return;
|
61
62
|
}
|
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,16 @@ 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
|
+
console.log('startHeight', (_b = startSize.current) === null || _b === void 0 ? void 0 : _b.height);
|
85
|
+
console.log('height', height);
|
86
|
+
if (shouldShrinkRef.current && (target.clientHeight < elementRef.current.clientHeight)) {
|
87
|
+
extendedHeightRef.current = target.clientHeight;
|
88
|
+
}
|
81
89
|
var minWidthStyle = target.computedStyleMap().get('min-width');
|
82
90
|
if (typeof minWidthStyle.value === 'number') {
|
83
91
|
minWidth.current = minWidthStyle.value;
|