publ-echo-test 0.0.279 → 0.0.280

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.
Files changed (2) hide show
  1. package/dist/lib/GridItem/GridItem.js +138 -175
  2. package/package.json +1 -1
package/dist/lib/GridItem/GridItem.js CHANGED
@@ -118,181 +118,144 @@ var GridItem = function (_a) {
118
118
  observer.disconnect();
119
119
  };
120
120
  }, [autoResize, isSelected, isDragging, isResizing, props.w, props.h, x, y]);
121
- // useEffect(() => {
122
- // if (!isSelected || !autoResize) {
123
- // return;
124
- // }
125
- // const targetNode = elementRef.current?.children[0].children[0].children[0];
126
- // if (!targetNode || isDragging || isResizing) {
127
- // return;
128
- // }
129
- // if (targetNode.id !== "contentslist-box") {
130
- // return;
131
- // }
132
- // const prevPaddingL = parseFloat(getComputedStyle(targetNode).paddingLeft);
133
- // const prevPaddingR = parseFloat(getComputedStyle(targetNode).paddingRight);
134
- // const prevPaddingT = parseFloat(getComputedStyle(targetNode).paddingTop);
135
- // const prevPaddingB = parseFloat(getComputedStyle(targetNode).paddingBottom);
136
- // // MutationObserver 콜백 함수
137
- // const callback = (mutationsList: any[]) => {
138
- // for (let mutation of mutationsList) {
139
- // const isSizeChanged =
140
- // mutation.attributeName === "data-min-width" ||
141
- // mutation.attributeName === "data-min-height";
142
- // console.log("mutation", mutation);
143
- // let keepWidth = true;
144
- // let hasPaddingChanged = true;
145
- // const insetTop = Number(mutation.target.dataset.insetTop!);
146
- // const insetBottom = Number(mutation.target.dataset.insetBottom!);
147
- // const minWidth = Number(mutation.target.dataset.minWidth);
148
- // // const minHeight =
149
- // // Number(mutation.target.dataset.minHeight) + insetTop + insetBottom;
150
- // const contentsWrapper = mutation.target.querySelector(
151
- // ".cb-contentslist-wrapper"
152
- // );
153
- // const oneComposition = mutation.target.querySelector(
154
- // ".composition-container"
155
- // );
156
- // let minHeight = 0;
157
- // if (contentsWrapper && oneComposition) {
158
- // const minCellWidth = 10;
159
- // const minColHeight = 11;
160
- // const numberOfItems = Number(
161
- // mutation.target.getAttribute("data-number-of-items")!
162
- // );
163
- // const numberOfColumns = Number(
164
- // mutation.target.getAttribute("data-number-of-columns")!
165
- // );
166
- // const rowGap = Number(mutation.target.getAttribute("data-row-gap")!);
167
- // const columnGap = Number(
168
- // mutation.target.getAttribute("data-column-gap")!
169
- // );
170
- // const insetTop = Number(
171
- // mutation.target.getAttribute("data-inset-top")!
172
- // );
173
- // const insetBottom = Number(
174
- // mutation.target.getAttribute("data-inset-bottom")!
175
- // );
176
- // const compositionCols = Number(
177
- // oneComposition.getAttribute("data-cols")!
178
- // );
179
- // const compositionRows = Number(
180
- // oneComposition.getAttribute("data-rows")!
181
- // );
182
- // const oneCompositionMinWidth =
183
- // minCellWidth * compositionCols + 20; /* 20px padding */
184
- // // let oneCompositionMinHeight =
185
- // // minColHeight * compositionRows + 20; /* 20px padding */
186
- // if (contentsWrapper) {
187
- // const gridWrapperInnerH = contentsWrapper.clientHeight;
188
- // const oneCompositionH = oneComposition.clientHeight;
189
- // const CompositionBGwrapperPaddingT = Number(
190
- // oneComposition.getAttribute("data-wrapper-paddingT")
191
- // );
192
- // const CompositionBGwrapperPaddingB = Number(
193
- // oneComposition.getAttribute("data-wrapper-paddingB")
194
- // );
195
- // const oneCompositionMinHeight =
196
- // oneCompositionH +
197
- // CompositionBGwrapperPaddingT +
198
- // CompositionBGwrapperPaddingB;
199
- // const styles = getComputedStyle(mutation.target as Element);
200
- // const paddingL = parseFloat(styles.paddingLeft);
201
- // const paddingR = parseFloat(styles.paddingRight);
202
- // const paddingT = parseFloat(styles.paddingTop);
203
- // const paddingB = parseFloat(styles.paddingBottom);
204
- // const paddingLR = paddingL + paddingR;
205
- // const paddingTB = paddingT + paddingB;
206
- // const listMinWidth =
207
- // oneCompositionMinWidth * numberOfColumns +
208
- // (numberOfColumns - 1) * columnGap +
209
- // paddingLR;
210
- // const numberOfRows = Math.ceil(numberOfItems / numberOfColumns);
211
- // const gridWrapperTotalH =
212
- // gridWrapperInnerH + insetTop + insetBottom;
213
- // const listMinHeight =
214
- // oneCompositionMinHeight * numberOfRows +
215
- // (numberOfRows - 1) * rowGap +
216
- // paddingTB +
217
- // insetTop +
218
- // insetBottom;
219
- // console.log("minH", listMinHeight);
220
- // console.log("oneCompositionMinHeight", oneCompositionMinHeight);
221
- // console.log("insetTop, insetBottom", insetTop, insetBottom);
222
- // if (listMinHeight > gridWrapperTotalH) {
223
- // minHeight = listMinHeight;
224
- // }
225
- // // minWidth = listMinWidth;
226
- // }
227
- // }
228
- // // If minWidth or minHeight is NaN, return early to prevent errors
229
- // if (isNaN(minWidth) || isNaN(minHeight)) {
230
- // return;
231
- // }
232
- // let width = targetNode.clientWidth;
233
- // if (!isSizeChanged && mutation.target instanceof Element) {
234
- // const styles = getComputedStyle(mutation.target as Element);
235
- // if (minWidth > width) {
236
- // keepWidth = false;
237
- // }
238
- // // NOTE: POC
239
- // const paddingL = parseFloat(styles.paddingLeft);
240
- // const paddingR = parseFloat(styles.paddingRight);
241
- // const paddingT = parseFloat(styles.paddingTop);
242
- // const paddingB = parseFloat(styles.paddingBottom);
243
- // if (
244
- // prevPaddingL !== paddingL ||
245
- // prevPaddingR !== paddingR ||
246
- // prevPaddingT !== paddingT ||
247
- // prevPaddingB !== paddingB
248
- // ) {
249
- // hasPaddingChanged = true;
250
- // keepWidth = false;
251
- // }
252
- // }
253
- // const prevW = props.w;
254
- // const prevH = props.h;
255
- // let { w, h } = calcWH(
256
- // getPositionParams(),
257
- // {
258
- // width: minWidth,
259
- // height: minHeight,
260
- // },
261
- // x,
262
- // y,
263
- // "e",
264
- // props.w,
265
- // props.h,
266
- // true
267
- // );
268
- // if (keepWidth) {
269
- // w = prevW;
270
- // }
271
- // if (prevH > h) {
272
- // h = prevH;
273
- // }
274
- // const { newX, newY } = getResizableXYPosition("e", w, h, prevW, prevH);
275
- // if (prevH === h && prevW === w && newX === x && newY === y) {
276
- // return;
277
- // }
278
- // props.onFitToContent &&
279
- // props.onFitToContent(i, w, h, newX, newY, { hasPaddingChanged });
280
- // }
281
- // };
282
- // // MutationObserver 인스턴스 생성
283
- // const observer = new MutationObserver(callback);
284
- // // 관찰할 DOM 변이 설정
285
- // const config = { attributes: true, characterData: true };
286
- // // 대상 노드와 설정으로 관찰 시작
287
- // observer.observe(targetNode, config);
288
- // // 정리 함수에서 MutationObserver 해제
289
- // return () => {
290
- // if (targetNode.id !== "contentslist-box") {
291
- // return;
292
- // }
293
- // observer.disconnect();
294
- // };
295
- // }, [autoResize, isSelected, isDragging, isResizing, props.w, props.h, x, y]);
121
+ useEffect(function () {
122
+ var _a;
123
+ if (!isSelected || !autoResize) {
124
+ return;
125
+ }
126
+ var targetNode = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.children[0].children[0].children[0];
127
+ if (!targetNode || isDragging || isResizing) {
128
+ return;
129
+ }
130
+ if (targetNode.id !== "contentslist-box") {
131
+ return;
132
+ }
133
+ var prevPaddingL = parseFloat(getComputedStyle(targetNode).paddingLeft);
134
+ var prevPaddingR = parseFloat(getComputedStyle(targetNode).paddingRight);
135
+ var prevPaddingT = parseFloat(getComputedStyle(targetNode).paddingTop);
136
+ var prevPaddingB = parseFloat(getComputedStyle(targetNode).paddingBottom);
137
+ // MutationObserver 콜백 함수
138
+ var callback = function (mutationsList) {
139
+ for (var _i = 0, mutationsList_2 = mutationsList; _i < mutationsList_2.length; _i++) {
140
+ var mutation = mutationsList_2[_i];
141
+ var isSizeChanged = mutation.attributeName === "data-min-width" ||
142
+ mutation.attributeName === "data-min-height";
143
+ console.log("mutation", mutation);
144
+ var keepWidth = true;
145
+ var hasPaddingChanged = true;
146
+ var insetTop = Number(mutation.target.dataset.insetTop);
147
+ var insetBottom = Number(mutation.target.dataset.insetBottom);
148
+ var minWidth = Number(mutation.target.dataset.minWidth);
149
+ // const minHeight =
150
+ // Number(mutation.target.dataset.minHeight) + insetTop + insetBottom;
151
+ var contentsWrapper = mutation.target.querySelector(".cb-contentslist-wrapper");
152
+ var oneComposition = mutation.target.querySelector(".composition-container");
153
+ var minHeight = 0;
154
+ if (contentsWrapper && oneComposition) {
155
+ var minCellWidth = 10;
156
+ var minColHeight = 11;
157
+ var numberOfItems = Number(mutation.target.getAttribute("data-number-of-items"));
158
+ var numberOfColumns = Number(mutation.target.getAttribute("data-number-of-columns"));
159
+ var rowGap = Number(mutation.target.getAttribute("data-row-gap"));
160
+ var columnGap = Number(mutation.target.getAttribute("data-column-gap"));
161
+ var insetTop_1 = Number(mutation.target.getAttribute("data-inset-top"));
162
+ var insetBottom_1 = Number(mutation.target.getAttribute("data-inset-bottom"));
163
+ var compositionCols = Number(oneComposition.getAttribute("data-cols"));
164
+ var compositionRows = Number(oneComposition.getAttribute("data-rows"));
165
+ var oneCompositionMinWidth = minCellWidth * compositionCols + 20; /* 20px padding */
166
+ // let oneCompositionMinHeight =
167
+ // minColHeight * compositionRows + 20; /* 20px padding */
168
+ if (contentsWrapper) {
169
+ var gridWrapperInnerH = contentsWrapper.clientHeight;
170
+ var oneCompositionH = oneComposition.clientHeight;
171
+ var CompositionBGwrapperPaddingT = Number(oneComposition.getAttribute("data-wrapper-paddingT"));
172
+ var CompositionBGwrapperPaddingB = Number(oneComposition.getAttribute("data-wrapper-paddingB"));
173
+ var oneCompositionMinHeight = oneCompositionH +
174
+ CompositionBGwrapperPaddingT +
175
+ CompositionBGwrapperPaddingB;
176
+ var styles = getComputedStyle(mutation.target);
177
+ var paddingL = parseFloat(styles.paddingLeft);
178
+ var paddingR = parseFloat(styles.paddingRight);
179
+ var paddingT = parseFloat(styles.paddingTop);
180
+ var paddingB = parseFloat(styles.paddingBottom);
181
+ var paddingLR = paddingL + paddingR;
182
+ var paddingTB = paddingT + paddingB;
183
+ var listMinWidth = oneCompositionMinWidth * numberOfColumns +
184
+ (numberOfColumns - 1) * columnGap +
185
+ paddingLR;
186
+ var numberOfRows = Math.ceil(numberOfItems / numberOfColumns);
187
+ var gridWrapperTotalH = gridWrapperInnerH + insetTop_1 + insetBottom_1;
188
+ var listMinHeight = oneCompositionMinHeight * numberOfRows +
189
+ (numberOfRows - 1) * rowGap +
190
+ paddingTB +
191
+ insetTop_1 +
192
+ insetBottom_1;
193
+ console.log("minH", listMinHeight);
194
+ console.log("oneCompositionMinHeight", oneCompositionMinHeight);
195
+ console.log("insetTop, insetBottom", insetTop_1, insetBottom_1);
196
+ if (listMinHeight > gridWrapperTotalH) {
197
+ minHeight = listMinHeight;
198
+ }
199
+ // minWidth = listMinWidth;
200
+ }
201
+ }
202
+ // If minWidth or minHeight is NaN, return early to prevent errors
203
+ if (isNaN(minWidth) || isNaN(minHeight)) {
204
+ return;
205
+ }
206
+ var width = targetNode.clientWidth;
207
+ if (!isSizeChanged && mutation.target instanceof Element) {
208
+ var styles = getComputedStyle(mutation.target);
209
+ if (minWidth > width) {
210
+ keepWidth = false;
211
+ }
212
+ // NOTE: POC
213
+ var paddingL = parseFloat(styles.paddingLeft);
214
+ var paddingR = parseFloat(styles.paddingRight);
215
+ var paddingT = parseFloat(styles.paddingTop);
216
+ var paddingB = parseFloat(styles.paddingBottom);
217
+ if (prevPaddingL !== paddingL ||
218
+ prevPaddingR !== paddingR ||
219
+ prevPaddingT !== paddingT ||
220
+ prevPaddingB !== paddingB) {
221
+ hasPaddingChanged = true;
222
+ keepWidth = false;
223
+ }
224
+ }
225
+ var prevW = props.w;
226
+ var prevH = props.h;
227
+ var _a = calcWH(getPositionParams(), {
228
+ width: minWidth,
229
+ height: minHeight,
230
+ }, x, y, "e", props.w, props.h, true), w_2 = _a.w, h_2 = _a.h;
231
+ if (keepWidth) {
232
+ w_2 = prevW;
233
+ }
234
+ if (prevH > h_2) {
235
+ h_2 = prevH;
236
+ }
237
+ var _b = getResizableXYPosition("e", w_2, h_2, prevW, prevH), newX = _b.newX, newY = _b.newY;
238
+ if (prevH === h_2 && prevW === w_2 && newX === x && newY === y) {
239
+ return;
240
+ }
241
+ props.onFitToContent &&
242
+ props.onFitToContent(i, w_2, h_2, newX, newY, { hasPaddingChanged: hasPaddingChanged });
243
+ }
244
+ };
245
+ // MutationObserver 인스턴스 생성
246
+ var observer = new MutationObserver(callback);
247
+ // 관찰할 DOM 변이 설정
248
+ var config = { attributes: true, characterData: true };
249
+ // 대상 노드와 설정으로 관찰 시작
250
+ observer.observe(targetNode, config);
251
+ // 정리 함수에서 MutationObserver 해제
252
+ return function () {
253
+ if (targetNode.id !== "contentslist-box") {
254
+ return;
255
+ }
256
+ observer.disconnect();
257
+ };
258
+ }, [autoResize, isSelected, isDragging, isResizing, props.w, props.h, x, y]);
296
259
  // useEffect(() => {
297
260
  // if (!isSelected || !autoResize) {
298
261
  // return;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "publ-echo-test",
3
- "version": "0.0.279",
3
+ "version": "0.0.280",
4
4
  "private": false,
5
5
  "main": "dist/lib/index.js",
6
6
  "types": "dist/lib/index.d.js",