publ-echo-test 0.0.214 → 0.0.217
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,6 +47,9 @@ var GridItem = function (_a) {
|
|
|
47
47
|
if (!targetNode || isDragging || isResizing) {
|
|
48
48
|
return;
|
|
49
49
|
}
|
|
50
|
+
if (targetNode.id === 'contentslist-box') {
|
|
51
|
+
return;
|
|
52
|
+
}
|
|
50
53
|
var prevPaddingL = parseFloat(getComputedStyle(targetNode).paddingLeft);
|
|
51
54
|
var prevPaddingR = parseFloat(getComputedStyle(targetNode).paddingRight);
|
|
52
55
|
var prevPaddingT = parseFloat(getComputedStyle(targetNode).paddingTop);
|
|
@@ -112,6 +115,84 @@ var GridItem = function (_a) {
|
|
|
112
115
|
observer.disconnect();
|
|
113
116
|
};
|
|
114
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 isCharacterChanged = mutation.type === 'characterData';
|
|
139
|
+
console.log('mutation', mutation);
|
|
140
|
+
var keepWidth = true;
|
|
141
|
+
var hasPaddingChanged = false;
|
|
142
|
+
var height = isCharacterChanged
|
|
143
|
+
? mutation.target.parentNode.clientHeight
|
|
144
|
+
: mutation.target.clientHeight;
|
|
145
|
+
var width = targetNode.clientWidth;
|
|
146
|
+
if (!isCharacterChanged && mutation.target instanceof Element) {
|
|
147
|
+
var styles = getComputedStyle(mutation.target);
|
|
148
|
+
var minWidth = parseFloat(styles.minWidth);
|
|
149
|
+
if (minWidth > width) {
|
|
150
|
+
keepWidth = false;
|
|
151
|
+
}
|
|
152
|
+
// NOTE: POC
|
|
153
|
+
var paddingL = parseFloat(styles.paddingLeft);
|
|
154
|
+
var paddingR = parseFloat(styles.paddingRight);
|
|
155
|
+
var paddingT = parseFloat(styles.paddingTop);
|
|
156
|
+
var paddingB = parseFloat(styles.paddingBottom);
|
|
157
|
+
if (prevPaddingL !== paddingL ||
|
|
158
|
+
prevPaddingR !== paddingR ||
|
|
159
|
+
prevPaddingT !== paddingT ||
|
|
160
|
+
prevPaddingB !== paddingB) {
|
|
161
|
+
hasPaddingChanged = true;
|
|
162
|
+
keepWidth = false;
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
var prevW = props.w;
|
|
166
|
+
var prevH = props.h;
|
|
167
|
+
var _a = calcWH(getPositionParams(), {
|
|
168
|
+
width: width,
|
|
169
|
+
height: height,
|
|
170
|
+
}, x, y, 'e', props.w, props.h, false), w_2 = _a.w, h_2 = _a.h;
|
|
171
|
+
if (keepWidth) {
|
|
172
|
+
w_2 = prevW;
|
|
173
|
+
}
|
|
174
|
+
if (prevH > h_2) {
|
|
175
|
+
h_2 = prevH;
|
|
176
|
+
}
|
|
177
|
+
var _b = getResizableXYPosition('e', w_2, h_2, prevW, prevH), newX = _b.newX, newY = _b.newY;
|
|
178
|
+
if (prevH === h_2 && prevW === w_2 && newX === x && newY === y) {
|
|
179
|
+
return;
|
|
180
|
+
}
|
|
181
|
+
props.onFitToContent &&
|
|
182
|
+
props.onFitToContent(i, w_2, h_2, newX, newY, { hasPaddingChanged: hasPaddingChanged });
|
|
183
|
+
}
|
|
184
|
+
};
|
|
185
|
+
// MutationObserver 인스턴스 생성
|
|
186
|
+
var observer = new MutationObserver(callback);
|
|
187
|
+
// 관찰할 DOM 변이 설정
|
|
188
|
+
var config = { characterData: true, attributes: true, subtree: true };
|
|
189
|
+
// 대상 노드와 설정으로 관찰 시작
|
|
190
|
+
observer.observe(targetNode, config);
|
|
191
|
+
// 정리 함수에서 MutationObserver 해제
|
|
192
|
+
return function () {
|
|
193
|
+
observer.disconnect();
|
|
194
|
+
};
|
|
195
|
+
}, [autoResize, isSelected, isDragging, isResizing, props.w, props.h, x, y]);
|
|
115
196
|
// const moveDroppingItem = (prevProps: GridItemProps) => {
|
|
116
197
|
// const { droppingPosition } = props;
|
|
117
198
|
// if (!droppingPosition) return;
|
|
@@ -95,15 +95,18 @@ 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
|
-
console.log('compositionMinWidth', oneCompositionMinWidth);
|
|
104
|
-
console.log('compositionMinHeight', oneCompositionMinHeight);
|
|
105
|
-
console.log('minWidth.current', minWidth.current);
|
|
106
|
-
console.log('minHeight.current', minHeight.current);
|
|
107
110
|
return;
|
|
108
111
|
}
|
|
109
112
|
// target.clientHeight -> 실제 "노드"의 height. (gridItem아닌)
|