publ-echo-test 0.0.215 → 0.0.218
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.
|
@@ -47,7 +47,9 @@ var GridItem = function (_a) {
|
|
|
47
47
|
if (!targetNode || isDragging || isResizing) {
|
|
48
48
|
return;
|
|
49
49
|
}
|
|
50
|
-
|
|
50
|
+
if (targetNode.id === 'contentslist-box') {
|
|
51
|
+
return;
|
|
52
|
+
}
|
|
51
53
|
var prevPaddingL = parseFloat(getComputedStyle(targetNode).paddingLeft);
|
|
52
54
|
var prevPaddingR = parseFloat(getComputedStyle(targetNode).paddingRight);
|
|
53
55
|
var prevPaddingT = parseFloat(getComputedStyle(targetNode).paddingTop);
|
|
@@ -113,6 +115,85 @@ var GridItem = function (_a) {
|
|
|
113
115
|
observer.disconnect();
|
|
114
116
|
};
|
|
115
117
|
}, [autoResize, isSelected, isDragging, isResizing, props.w, props.h, x, y]);
|
|
118
|
+
useEffect(function () {
|
|
119
|
+
var _a;
|
|
120
|
+
if (!isSelected || !autoResize) {
|
|
121
|
+
return;
|
|
122
|
+
}
|
|
123
|
+
var targetNode = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.children[0].children[0].children[0];
|
|
124
|
+
if (!targetNode || isDragging || isResizing) {
|
|
125
|
+
return;
|
|
126
|
+
}
|
|
127
|
+
if (targetNode.id !== 'contentslist-box') {
|
|
128
|
+
return;
|
|
129
|
+
}
|
|
130
|
+
var prevPaddingL = parseFloat(getComputedStyle(targetNode).paddingLeft);
|
|
131
|
+
var prevPaddingR = parseFloat(getComputedStyle(targetNode).paddingRight);
|
|
132
|
+
var prevPaddingT = parseFloat(getComputedStyle(targetNode).paddingTop);
|
|
133
|
+
var prevPaddingB = parseFloat(getComputedStyle(targetNode).paddingBottom);
|
|
134
|
+
// MutationObserver 콜백 함수
|
|
135
|
+
var callback = function (mutationsList) {
|
|
136
|
+
for (var _i = 0, mutationsList_2 = mutationsList; _i < mutationsList_2.length; _i++) {
|
|
137
|
+
var mutation = mutationsList_2[_i];
|
|
138
|
+
var isSizeChanged = mutation.attributeName === 'data-min-width' || mutation.attributeName === 'data-min-height';
|
|
139
|
+
var keepWidth = true;
|
|
140
|
+
var hasPaddingChanged = false;
|
|
141
|
+
var minWidth = Number(mutation.target.dataset.minWidth);
|
|
142
|
+
var minHeight = Number(mutation.target.dataset.minHeight);
|
|
143
|
+
var height = isSizeChanged
|
|
144
|
+
? mutation.target.parentNode.clientHeight
|
|
145
|
+
: mutation.target.clientHeight;
|
|
146
|
+
var width = targetNode.clientWidth;
|
|
147
|
+
if (!isSizeChanged && mutation.target instanceof Element) {
|
|
148
|
+
var styles = getComputedStyle(mutation.target);
|
|
149
|
+
var minWidth_1 = parseFloat(styles.minWidth);
|
|
150
|
+
if (minWidth_1 > width) {
|
|
151
|
+
keepWidth = false;
|
|
152
|
+
}
|
|
153
|
+
// NOTE: POC
|
|
154
|
+
var paddingL = parseFloat(styles.paddingLeft);
|
|
155
|
+
var paddingR = parseFloat(styles.paddingRight);
|
|
156
|
+
var paddingT = parseFloat(styles.paddingTop);
|
|
157
|
+
var paddingB = parseFloat(styles.paddingBottom);
|
|
158
|
+
if (prevPaddingL !== paddingL ||
|
|
159
|
+
prevPaddingR !== paddingR ||
|
|
160
|
+
prevPaddingT !== paddingT ||
|
|
161
|
+
prevPaddingB !== paddingB) {
|
|
162
|
+
hasPaddingChanged = true;
|
|
163
|
+
keepWidth = false;
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
var prevW = props.w;
|
|
167
|
+
var prevH = props.h;
|
|
168
|
+
var _a = calcWH(getPositionParams(), {
|
|
169
|
+
width: minWidth,
|
|
170
|
+
height: minHeight,
|
|
171
|
+
}, x, y, 'e', props.w, props.h, false), w_2 = _a.w, h_2 = _a.h;
|
|
172
|
+
if (keepWidth) {
|
|
173
|
+
w_2 = prevW;
|
|
174
|
+
}
|
|
175
|
+
if (prevH > h_2) {
|
|
176
|
+
h_2 = prevH;
|
|
177
|
+
}
|
|
178
|
+
var _b = getResizableXYPosition('e', w_2, h_2, prevW, prevH), newX = _b.newX, newY = _b.newY;
|
|
179
|
+
if (prevH === h_2 && prevW === w_2 && newX === x && newY === y) {
|
|
180
|
+
return;
|
|
181
|
+
}
|
|
182
|
+
props.onFitToContent &&
|
|
183
|
+
props.onFitToContent(i, w_2, h_2, newX, newY, { hasPaddingChanged: hasPaddingChanged });
|
|
184
|
+
}
|
|
185
|
+
};
|
|
186
|
+
// MutationObserver 인스턴스 생성
|
|
187
|
+
var observer = new MutationObserver(callback);
|
|
188
|
+
// 관찰할 DOM 변이 설정
|
|
189
|
+
var config = { characterData: true, attributes: true, subtree: true };
|
|
190
|
+
// 대상 노드와 설정으로 관찰 시작
|
|
191
|
+
observer.observe(targetNode, config);
|
|
192
|
+
// 정리 함수에서 MutationObserver 해제
|
|
193
|
+
return function () {
|
|
194
|
+
observer.disconnect();
|
|
195
|
+
};
|
|
196
|
+
}, [autoResize, isSelected, isDragging, isResizing, props.w, props.h, x, y]);
|
|
116
197
|
// const moveDroppingItem = (prevProps: GridItemProps) => {
|
|
117
198
|
// const { droppingPosition } = props;
|
|
118
199
|
// if (!droppingPosition) return;
|
|
@@ -95,9 +95,16 @@ var Resizable = function (_a) {
|
|
|
95
95
|
// const compositionColWidth = Number(oneComposition.getAttribute('data-col-width')!);
|
|
96
96
|
var oneCompositionMinWidth = minCellWidth * compositionCols + 20 /* 20px padding */;
|
|
97
97
|
var oneCompositionMinHeight = minCollHeight * compositionRows + 20 /* 20px padding */;
|
|
98
|
-
var
|
|
98
|
+
var styles = getComputedStyle(target);
|
|
99
|
+
var paddingL = parseFloat(styles.paddingLeft);
|
|
100
|
+
var paddingR = parseFloat(styles.paddingRight);
|
|
101
|
+
var paddingT = parseFloat(styles.paddingTop);
|
|
102
|
+
var paddingB = parseFloat(styles.paddingBottom);
|
|
103
|
+
var paddingLR = paddingL + paddingR;
|
|
104
|
+
var paddingTB = paddingT + paddingB;
|
|
105
|
+
var listMinWidth = oneCompositionMinWidth * numberOfColumns + (numberOfColumns - 1) * columnGap + paddingLR;
|
|
99
106
|
var numberOfRows = Math.ceil(numberOfItems / numberOfColumns);
|
|
100
|
-
var listMinHeight =
|
|
107
|
+
var listMinHeight = oneCompositionMinHeight * numberOfRows + (numberOfRows - 1) * rowGap + paddingTB;
|
|
101
108
|
minWidth.current = listMinWidth;
|
|
102
109
|
minHeight.current = listMinHeight;
|
|
103
110
|
return;
|