publ-echo-test 0.0.260 → 0.0.261
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/Resizable/Resizable.js +80 -96
- package/package.json +1 -1
|
@@ -31,7 +31,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
|
31
31
|
};
|
|
32
32
|
import { createElement as _createElement } from "react";
|
|
33
33
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
34
|
-
import React, {
|
|
34
|
+
import React, { useEffect, useRef, } from "react";
|
|
35
35
|
import { cloneElement } from "./utils/cloneElement";
|
|
36
36
|
import { DraggableCore } from "../Draggable";
|
|
37
37
|
import classNames from "../../external-lib/classnames";
|
|
@@ -57,8 +57,11 @@ var Resizable = function (_a) {
|
|
|
57
57
|
var shouldShrinkRef = useRef(false);
|
|
58
58
|
var minWidth = useRef(0);
|
|
59
59
|
var minHeight = useRef(0);
|
|
60
|
-
|
|
61
|
-
|
|
60
|
+
// #################################################################
|
|
61
|
+
// ## 여기가 `useLayoutEffect`에서 `ResizeObserver`로 변경된 부분입니다. ##
|
|
62
|
+
// #################################################################
|
|
63
|
+
useEffect(function () {
|
|
64
|
+
var _a, _b, _c, _d;
|
|
62
65
|
if (!autoResize) {
|
|
63
66
|
return;
|
|
64
67
|
}
|
|
@@ -75,100 +78,94 @@ var Resizable = function (_a) {
|
|
|
75
78
|
if (!placeholder) {
|
|
76
79
|
return;
|
|
77
80
|
}
|
|
78
|
-
var target = (_a = placeholder.children[0].children[0].children[0]) !== null &&
|
|
79
|
-
|
|
80
|
-
var isContentsList = target.id === "contentslist-box";
|
|
81
|
-
if (isContentsList && !oneComposition) {
|
|
81
|
+
var target = (_c = (_b = (_a = placeholder.children[0]) === null || _a === void 0 ? void 0 : _a.children[0]) === null || _b === void 0 ? void 0 : _b.children[0]) !== null && _c !== void 0 ? _c : (_d = placeholder.children[0]) === null || _d === void 0 ? void 0 : _d.children[0];
|
|
82
|
+
if (!target) {
|
|
82
83
|
return;
|
|
83
84
|
}
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
console.log("parentH", (_b = oneComposition.parentElement) === null || _b === void 0 ? void 0 : _b.clientHeight);
|
|
109
|
-
var CompositionBGwrapperPaddingT = Number(oneComposition.getAttribute("data-wrapper-paddingT"));
|
|
110
|
-
var CompositionBGwrapperPaddingB = Number(oneComposition.getAttribute("data-wrapper-paddingB"));
|
|
111
|
-
if (tempCompositionH > wrapperH) {
|
|
85
|
+
// 크기를 측정하고 제약 조건을 설정하는 로직을 함수로 분리
|
|
86
|
+
var measureAndSetConstraints = function () {
|
|
87
|
+
var oneComposition = target.querySelector(".composition-container");
|
|
88
|
+
var isContentsList = target.id === "contentslist-box";
|
|
89
|
+
if (isContentsList && !oneComposition)
|
|
90
|
+
return;
|
|
91
|
+
if (target.clientHeight && !isContentsList) {
|
|
92
|
+
minHeight.current = target.clientHeight;
|
|
93
|
+
}
|
|
94
|
+
if (isContentsList && oneComposition) {
|
|
95
|
+
var minCellWidth = 10;
|
|
96
|
+
var numberOfItems = Number(target.getAttribute("data-number-of-items"));
|
|
97
|
+
var numberOfColumns = Number(target.getAttribute("data-number-of-columns"));
|
|
98
|
+
var rowGap = Number(target.getAttribute("data-row-gap"));
|
|
99
|
+
var columnGap = Number(target.getAttribute("data-column-gap"));
|
|
100
|
+
var insetTop = Number(target.getAttribute("data-inset-top"));
|
|
101
|
+
var insetBottom = Number(target.getAttribute("data-inset-bottom"));
|
|
102
|
+
var compositionCols = Number(oneComposition.getAttribute("data-cols"));
|
|
103
|
+
var oneCompositionMinWidth = minCellWidth * compositionCols + 20;
|
|
104
|
+
var contentsWrapper = placeholder.querySelector(".cb-contentslist-wrapper");
|
|
105
|
+
if (contentsWrapper) {
|
|
106
|
+
var tempCompositionH = oneComposition.clientHeight;
|
|
107
|
+
var CompositionBGwrapperPaddingT = Number(oneComposition.getAttribute("data-wrapper-paddingT"));
|
|
108
|
+
var CompositionBGwrapperPaddingB = Number(oneComposition.getAttribute("data-wrapper-paddingB"));
|
|
112
109
|
var oneCompositionMinHeight = tempCompositionH +
|
|
113
110
|
CompositionBGwrapperPaddingT +
|
|
114
111
|
CompositionBGwrapperPaddingB;
|
|
115
112
|
var styles = getComputedStyle(target);
|
|
116
|
-
var
|
|
117
|
-
var
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
var listMinWidth = oneCompositionMinWidth * numberOfColumns +
|
|
123
|
-
(numberOfColumns - 1) * columnGap +
|
|
124
|
-
paddingLR;
|
|
113
|
+
var paddingLR = parseFloat(styles.paddingLeft) + parseFloat(styles.paddingRight);
|
|
114
|
+
var paddingTB = parseFloat(styles.paddingTop) + parseFloat(styles.paddingBottom);
|
|
115
|
+
minWidth.current =
|
|
116
|
+
oneCompositionMinWidth * numberOfColumns +
|
|
117
|
+
(numberOfColumns - 1) * columnGap +
|
|
118
|
+
paddingLR;
|
|
125
119
|
var numberOfRows = Math.ceil(numberOfItems / numberOfColumns);
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
console.log("listMinHeight", listMinHeight);
|
|
133
|
-
// minWidth.current = listMinWidth;
|
|
134
|
-
// minHeight.current = listMinHeight;
|
|
135
|
-
return;
|
|
120
|
+
minHeight.current =
|
|
121
|
+
oneCompositionMinHeight * numberOfRows +
|
|
122
|
+
(numberOfRows - 1) * rowGap +
|
|
123
|
+
paddingTB +
|
|
124
|
+
insetTop +
|
|
125
|
+
insetBottom;
|
|
136
126
|
}
|
|
127
|
+
return;
|
|
137
128
|
}
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
129
|
+
if (target.clientHeight > elementRef.current.clientHeight) {
|
|
130
|
+
extendedHeightRef.current = target.clientHeight;
|
|
131
|
+
shouldShrinkRef.current = true;
|
|
132
|
+
}
|
|
133
|
+
else {
|
|
134
|
+
extendedHeightRef.current = null;
|
|
135
|
+
}
|
|
136
|
+
if (shouldShrinkRef.current &&
|
|
137
|
+
target.clientHeight < elementRef.current.clientHeight) {
|
|
138
|
+
minHeight.current = target.clientHeight;
|
|
139
|
+
}
|
|
140
|
+
var minWidthStyle = target
|
|
141
|
+
.computedStyleMap()
|
|
142
|
+
.get("min-width");
|
|
143
|
+
if (typeof (minWidthStyle === null || minWidthStyle === void 0 ? void 0 : minWidthStyle.value) === "number" && margin && colWidth) {
|
|
144
|
+
var minWidthBase = minWidthStyle.value;
|
|
145
|
+
var minColWidth = (minWidthBase + margin[0]) / (colWidth + margin[0]);
|
|
146
|
+
var minW = Math.ceil(minColWidth);
|
|
147
|
+
minWidth.current = Math.round(minW * colWidth + (minW - 1) * margin[0]);
|
|
148
|
+
}
|
|
149
|
+
};
|
|
150
|
+
// ResizeObserver를 생성하고, target 요소의 크기 변경을 감지
|
|
151
|
+
var observer = new ResizeObserver(function () {
|
|
152
|
+
measureAndSetConstraints();
|
|
153
|
+
});
|
|
154
|
+
observer.observe(target);
|
|
155
|
+
// 초기 렌더링 시점에도 한번 실행하여 초기값을 설정
|
|
156
|
+
measureAndSetConstraints();
|
|
157
|
+
// 클린업 함수: 컴포넌트가 언마운트되거나 의존성이 변경될 때 observer 연결을 해제
|
|
158
|
+
return function () {
|
|
159
|
+
observer.disconnect();
|
|
160
|
+
};
|
|
161
|
+
}, [isResizing, autoResize, children, elementRef, colWidth, margin]);
|
|
162
162
|
var resetData = function () {
|
|
163
163
|
lastHandleRectRef.current = null;
|
|
164
164
|
slack.current = null;
|
|
165
165
|
};
|
|
166
|
-
// NOTE - 최소 또는 최대 제약 조건 width와 height 계산, 비율 고정 계산
|
|
167
166
|
var checkConstraints = function (width, height) {
|
|
168
167
|
var _a;
|
|
169
|
-
|
|
170
|
-
return [width, height];
|
|
171
|
-
}
|
|
168
|
+
// ... (이하 동일)
|
|
172
169
|
if (lockAspectRatio) {
|
|
173
170
|
var ratio = props.width / props.height;
|
|
174
171
|
var deltaWidth = width - props.width;
|
|
@@ -269,19 +266,7 @@ var Resizable = function (_a) {
|
|
|
269
266
|
return;
|
|
270
267
|
var axisV = handleAxis[0];
|
|
271
268
|
var axisH = handleAxis[handleAxis.length - 1];
|
|
272
|
-
|
|
273
|
-
// if (lastHandleRectRef.current !== null) {
|
|
274
|
-
// if (axisH === "w") {
|
|
275
|
-
// const deltaLeftSinceLast = handleRect.left - lastHandleRectRef.current.left;
|
|
276
|
-
// console.log('delta, :', deltaLeftSinceLast);
|
|
277
|
-
// deltaX += deltaLeftSinceLast;
|
|
278
|
-
// }
|
|
279
|
-
// if (axisV === "n") {
|
|
280
|
-
// const deltaTopSinceLast = handleRect.top - lastHandleRectRef.current.top;
|
|
281
|
-
// deltaY += deltaTopSinceLast;
|
|
282
|
-
// }
|
|
283
|
-
// }
|
|
284
|
-
lastHandleRectRef.current = handleRect;
|
|
269
|
+
lastHandleRectRef.current = node.getBoundingClientRect();
|
|
285
270
|
if (axisH === "w") {
|
|
286
271
|
deltaX = -deltaX;
|
|
287
272
|
}
|
|
@@ -328,7 +313,6 @@ var Resizable = function (_a) {
|
|
|
328
313
|
return React.cloneElement(handle, props);
|
|
329
314
|
};
|
|
330
315
|
return cloneElement(children, __assign(__assign({}, restProps), { className: classNames(className !== null && className !== void 0 ? className : "react-resizable"), children: __spreadArray([
|
|
331
|
-
// ...children.props.children,
|
|
332
316
|
React.Children.map(children.props.children, function (child) { return child; })
|
|
333
317
|
], resizeHandles.map(function (handleAxis) {
|
|
334
318
|
var ref = (handleRefs === null || handleRefs === void 0 ? void 0 : handleRefs.current) && handleRefs.current[handleAxis];
|