publ-echo-test 0.0.261 → 0.0.262
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 +116 -79
- 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, { useEffect, useRef, } from "react";
|
|
34
|
+
import React, { useEffect, useLayoutEffect, 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,11 +57,55 @@ var Resizable = function (_a) {
|
|
|
57
57
|
var shouldShrinkRef = useRef(false);
|
|
58
58
|
var minWidth = useRef(0);
|
|
59
59
|
var minHeight = useRef(0);
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
60
|
+
useLayoutEffect(function () {
|
|
61
|
+
var _a;
|
|
62
|
+
if (!autoResize) {
|
|
63
|
+
return;
|
|
64
|
+
}
|
|
65
|
+
if (!isResizing) {
|
|
66
|
+
extendedHeightRef.current = null;
|
|
67
|
+
minWidth.current = 0;
|
|
68
|
+
shouldShrinkRef.current = false;
|
|
69
|
+
return;
|
|
70
|
+
}
|
|
71
|
+
if (!elementRef.current) {
|
|
72
|
+
return;
|
|
73
|
+
}
|
|
74
|
+
var placeholder = document.querySelector(".placeholder");
|
|
75
|
+
if (!placeholder) {
|
|
76
|
+
return;
|
|
77
|
+
}
|
|
78
|
+
var target = (_a = placeholder.children[0].children[0].children[0]) !== null && _a !== void 0 ? _a : placeholder.children[0].children[0];
|
|
79
|
+
var isContentsList = target.id === "contentslist-box";
|
|
80
|
+
if (isContentsList) {
|
|
81
|
+
return;
|
|
82
|
+
}
|
|
83
|
+
if (target.clientHeight && !isContentsList) {
|
|
84
|
+
minHeight.current = target.clientHeight;
|
|
85
|
+
}
|
|
86
|
+
// target.clientHeight -> 실제 "노드"의 height. (gridItem아닌)
|
|
87
|
+
if (target.clientHeight > elementRef.current.clientHeight) {
|
|
88
|
+
extendedHeightRef.current = target.clientHeight;
|
|
89
|
+
shouldShrinkRef.current = true;
|
|
90
|
+
}
|
|
91
|
+
else {
|
|
92
|
+
extendedHeightRef.current = null;
|
|
93
|
+
}
|
|
94
|
+
if (shouldShrinkRef.current &&
|
|
95
|
+
target.clientHeight < elementRef.current.clientHeight) {
|
|
96
|
+
minHeight.current = target.clientHeight;
|
|
97
|
+
}
|
|
98
|
+
var minWidthStyle = target.computedStyleMap().get("min-width");
|
|
99
|
+
if (typeof minWidthStyle.value === "number" && margin && colWidth) {
|
|
100
|
+
var minWidthBase = minWidthStyle.value;
|
|
101
|
+
var minColWidth = (minWidthBase + margin[0]) / (colWidth + margin[0]);
|
|
102
|
+
var minW = Math.ceil(minColWidth);
|
|
103
|
+
var minWidthPx = minW * colWidth + (minW - 1) * margin[0];
|
|
104
|
+
minWidth.current = Math.round(minWidthPx);
|
|
105
|
+
}
|
|
106
|
+
}, [isResizing, autoResize, children, elementRef]);
|
|
63
107
|
useEffect(function () {
|
|
64
|
-
var _a, _b
|
|
108
|
+
var _a, _b;
|
|
65
109
|
if (!autoResize) {
|
|
66
110
|
return;
|
|
67
111
|
}
|
|
@@ -78,94 +122,74 @@ var Resizable = function (_a) {
|
|
|
78
122
|
if (!placeholder) {
|
|
79
123
|
return;
|
|
80
124
|
}
|
|
81
|
-
var target = (
|
|
82
|
-
|
|
125
|
+
var target = (_a = placeholder.children[0].children[0].children[0]) !== null && _a !== void 0 ? _a : placeholder.children[0].children[0];
|
|
126
|
+
var oneComposition = target.querySelector(".composition-container");
|
|
127
|
+
var isContentsList = target.id === "contentslist-box";
|
|
128
|
+
if (!isContentsList || !oneComposition) {
|
|
83
129
|
return;
|
|
84
130
|
}
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
var
|
|
88
|
-
var
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
var
|
|
102
|
-
var
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
var CompositionBGwrapperPaddingB = Number(oneComposition.getAttribute("data-wrapper-paddingB"));
|
|
131
|
+
if (isContentsList && oneComposition) {
|
|
132
|
+
var minCellWidth = 10;
|
|
133
|
+
var minColHeight = 11;
|
|
134
|
+
var numberOfItems = Number(target.getAttribute("data-number-of-items"));
|
|
135
|
+
var numberOfColumns = Number(target.getAttribute("data-number-of-columns"));
|
|
136
|
+
var rowGap = Number(target.getAttribute("data-row-gap"));
|
|
137
|
+
var columnGap = Number(target.getAttribute("data-column-gap"));
|
|
138
|
+
var insetTop = Number(target.getAttribute("data-inset-top"));
|
|
139
|
+
var insetBottom = Number(target.getAttribute("data-inset-bottom"));
|
|
140
|
+
var compositionCols = Number(oneComposition.getAttribute("data-cols"));
|
|
141
|
+
var compositionRows = Number(oneComposition.getAttribute("data-rows"));
|
|
142
|
+
var oneCompositionMinWidth = minCellWidth * compositionCols + 20; /* 20px padding */
|
|
143
|
+
// let oneCompositionMinHeight =
|
|
144
|
+
// minColHeight * compositionRows + 20; /* 20px padding */
|
|
145
|
+
var contentsWrapper = placeholder.querySelector(".cb-contentslist-wrapper");
|
|
146
|
+
if (contentsWrapper) {
|
|
147
|
+
var wrapperH = contentsWrapper.clientHeight;
|
|
148
|
+
var tempCompositionH = oneComposition.clientHeight;
|
|
149
|
+
console.log("tempCompositionH", tempCompositionH);
|
|
150
|
+
console.log("parentH", (_b = oneComposition.parentElement) === null || _b === void 0 ? void 0 : _b.clientHeight);
|
|
151
|
+
var CompositionBGwrapperPaddingT = Number(oneComposition.getAttribute("data-wrapper-paddingT"));
|
|
152
|
+
var CompositionBGwrapperPaddingB = Number(oneComposition.getAttribute("data-wrapper-paddingB"));
|
|
153
|
+
if (tempCompositionH > wrapperH) {
|
|
109
154
|
var oneCompositionMinHeight = tempCompositionH +
|
|
110
155
|
CompositionBGwrapperPaddingT +
|
|
111
156
|
CompositionBGwrapperPaddingB;
|
|
112
157
|
var styles = getComputedStyle(target);
|
|
113
|
-
var
|
|
114
|
-
var
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
158
|
+
var paddingL = parseFloat(styles.paddingLeft);
|
|
159
|
+
var paddingR = parseFloat(styles.paddingRight);
|
|
160
|
+
var paddingT = parseFloat(styles.paddingTop);
|
|
161
|
+
var paddingB = parseFloat(styles.paddingBottom);
|
|
162
|
+
var paddingLR = paddingL + paddingR;
|
|
163
|
+
var paddingTB = paddingT + paddingB;
|
|
164
|
+
var listMinWidth = oneCompositionMinWidth * numberOfColumns +
|
|
165
|
+
(numberOfColumns - 1) * columnGap +
|
|
166
|
+
paddingLR;
|
|
119
167
|
var numberOfRows = Math.ceil(numberOfItems / numberOfColumns);
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
168
|
+
var listMinHeight = oneCompositionMinHeight * numberOfRows +
|
|
169
|
+
(numberOfRows - 1) * rowGap +
|
|
170
|
+
paddingTB +
|
|
171
|
+
insetTop +
|
|
172
|
+
insetBottom;
|
|
173
|
+
console.log("oneCompositionMinHeight", oneCompositionMinHeight);
|
|
174
|
+
console.log("listMinHeight", listMinHeight);
|
|
175
|
+
// minWidth.current = listMinWidth;
|
|
176
|
+
// minHeight.current = listMinHeight;
|
|
177
|
+
return;
|
|
126
178
|
}
|
|
127
|
-
return;
|
|
128
|
-
}
|
|
129
|
-
if (target.clientHeight > elementRef.current.clientHeight) {
|
|
130
|
-
extendedHeightRef.current = target.clientHeight;
|
|
131
|
-
shouldShrinkRef.current = true;
|
|
132
179
|
}
|
|
133
|
-
|
|
134
|
-
|
|
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]);
|
|
180
|
+
return;
|
|
181
|
+
}
|
|
182
|
+
}, [isResizing, autoResize, children, elementRef]);
|
|
162
183
|
var resetData = function () {
|
|
163
184
|
lastHandleRectRef.current = null;
|
|
164
185
|
slack.current = null;
|
|
165
186
|
};
|
|
187
|
+
// NOTE - 최소 또는 최대 제약 조건 width와 height 계산, 비율 고정 계산
|
|
166
188
|
var checkConstraints = function (width, height) {
|
|
167
189
|
var _a;
|
|
168
|
-
|
|
190
|
+
if (!minConstraints && !maxConstraints && !lockAspectRatio) {
|
|
191
|
+
return [width, height];
|
|
192
|
+
}
|
|
169
193
|
if (lockAspectRatio) {
|
|
170
194
|
var ratio = props.width / props.height;
|
|
171
195
|
var deltaWidth = width - props.width;
|
|
@@ -266,7 +290,19 @@ var Resizable = function (_a) {
|
|
|
266
290
|
return;
|
|
267
291
|
var axisV = handleAxis[0];
|
|
268
292
|
var axisH = handleAxis[handleAxis.length - 1];
|
|
269
|
-
|
|
293
|
+
var handleRect = node.getBoundingClientRect();
|
|
294
|
+
// if (lastHandleRectRef.current !== null) {
|
|
295
|
+
// if (axisH === "w") {
|
|
296
|
+
// const deltaLeftSinceLast = handleRect.left - lastHandleRectRef.current.left;
|
|
297
|
+
// console.log('delta, :', deltaLeftSinceLast);
|
|
298
|
+
// deltaX += deltaLeftSinceLast;
|
|
299
|
+
// }
|
|
300
|
+
// if (axisV === "n") {
|
|
301
|
+
// const deltaTopSinceLast = handleRect.top - lastHandleRectRef.current.top;
|
|
302
|
+
// deltaY += deltaTopSinceLast;
|
|
303
|
+
// }
|
|
304
|
+
// }
|
|
305
|
+
lastHandleRectRef.current = handleRect;
|
|
270
306
|
if (axisH === "w") {
|
|
271
307
|
deltaX = -deltaX;
|
|
272
308
|
}
|
|
@@ -313,6 +349,7 @@ var Resizable = function (_a) {
|
|
|
313
349
|
return React.cloneElement(handle, props);
|
|
314
350
|
};
|
|
315
351
|
return cloneElement(children, __assign(__assign({}, restProps), { className: classNames(className !== null && className !== void 0 ? className : "react-resizable"), children: __spreadArray([
|
|
352
|
+
// ...children.props.children,
|
|
316
353
|
React.Children.map(children.props.children, function (child) { return child; })
|
|
317
354
|
], resizeHandles.map(function (handleAxis) {
|
|
318
355
|
var ref = (handleRefs === null || handleRefs === void 0 ? void 0 : handleRefs.current) && handleRefs.current[handleAxis];
|