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
- console.log('targetNode from mutation observer:', targetNode);
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 listMinWidth = Math.max(oneCompositionMinWidth * numberOfColumns + (numberOfColumns - 1) * columnGap, 0);
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 = Math.max(oneCompositionMinHeight * numberOfRows + (numberOfRows - 1) * rowGap, 0);
107
+ var listMinHeight = oneCompositionMinHeight * numberOfRows + (numberOfRows - 1) * rowGap + paddingTB;
101
108
  minWidth.current = listMinWidth;
102
109
  minHeight.current = listMinHeight;
103
110
  return;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "publ-echo-test",
3
- "version": "0.0.215",
3
+ "version": "0.0.218",
4
4
  "private": false,
5
5
  "main": "dist/lib/index.js",
6
6
  "types": "dist/lib/index.d.js",