publ-echo-test 0.0.10 → 0.0.12

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.
@@ -58,7 +58,6 @@ var GridItem = function (_a) {
58
58
  console.log("mutation", mutation);
59
59
  var height = mutation.target.clientHeight;
60
60
  console.log("new height", height);
61
- var handler = props['onResize'];
62
61
  var prevW = props.w;
63
62
  var prevH = props.h;
64
63
  var _a = calcWH(getPositionParams(), {
@@ -66,8 +65,7 @@ var GridItem = function (_a) {
66
65
  height: height,
67
66
  }, x, y, 'e', props.w, props.h), w_1 = _a.w, h_1 = _a.h;
68
67
  var _b = getResizableXYPosition('e', w_1, h_1, prevW, prevH), newX = _b.newX, newY = _b.newY;
69
- handler && handler(i, w_1, h_1, {}, newX, newY);
70
- props.onResizeStop && props.onResizeStop(i, w_1, h_1, {}, newX, newY);
68
+ props.onFitToContent && props.onFitToContent(i, w_1, h_1, newX, newY);
71
69
  }
72
70
  };
73
71
  // MutationObserver 인스턴스 생성
@@ -173,7 +171,7 @@ var GridItem = function (_a) {
173
171
  ];
174
172
  return (_jsx(Resizable, { draggableOpts: {
175
173
  disabled: !isResizable,
176
- }, className: isResizable ? undefined : "react-resizable-hide", width: position.width, height: position.height, top: position.top, left: position.left, minConstraints: minConstraints, maxConstraints: maxConstraints, onResizeStop: onResizeStop, onResizeStart: onResizeStart, onResize: onResize, transformScale: transformScale, resizeHandles: props.resizeHandles, handle: resizeHandle, isResizing: isResizing, children: child }));
174
+ }, className: isResizable ? undefined : "react-resizable-hide", width: position.width, height: position.height, top: position.top, left: position.left, resizeHandles: props.resizeHandles, onResizeStop: onResizeStop, onResizeStart: onResizeStart, onResize: onResize, minConstraints: minConstraints, maxConstraints: maxConstraints, transformScale: transformScale, handle: resizeHandle, isResizing: isResizing, children: child }));
177
175
  };
178
176
  /**
179
177
  * onDragStart event handler
@@ -306,6 +304,7 @@ var GridItem = function (_a) {
306
304
  * @param {Object} callbackData an object with node and size information
307
305
  */
308
306
  var onResize = function (e, callbackData) {
307
+ console.log('setting resizing true');
309
308
  setIsResizing(true);
310
309
  onResizeHandler(e, callbackData, "onResize");
311
310
  };
@@ -329,6 +328,7 @@ var GridItem = function (_a) {
329
328
  var onResizeHandler = function (e, _a, handlerName) {
330
329
  var node = _a.node, size = _a.size, handle = _a.handle;
331
330
  var handler = props[handlerName];
331
+ console.log(handlerName);
332
332
  if (!handler)
333
333
  return;
334
334
  var prevW = props.w, prevH = props.h;
@@ -75,6 +75,7 @@ export type GridItemProps = {
75
75
  onResize?: ResizeGridItemCallback<GridResizeEvent>;
76
76
  onResizeStart?: ResizeGridItemCallback<GridResizeEvent>;
77
77
  onResizeStop?: ResizeGridItemCallback<GridResizeEvent>;
78
+ onFitToContent?: (i: string, w: number, h: number, x: number, y: number) => void;
78
79
  isHiddenVisibility?: boolean;
79
80
  customColWidth?: number;
80
81
  autoResize: boolean;
@@ -317,8 +317,7 @@ var ReactGridLayout = function (_a) {
317
317
  node: node,
318
318
  });
319
319
  setLayout(allowOverlap ? newLayout : compact(newLayout, compactType, cols));
320
- // NOTE: 주의
321
- e && setActiveDrag(placeholder);
320
+ setActiveDrag(placeholder);
322
321
  };
323
322
  var onResizeStopHandler = function (i, x, y, _a) {
324
323
  var e = _a.e, node = _a.node;
@@ -334,6 +333,45 @@ var ReactGridLayout = function (_a) {
334
333
  setOldLayout(undefined);
335
334
  onLayoutMaybeChanged(newLayout, oldLayout);
336
335
  };
336
+ var onFitToContentHandler = function (i, w, h, x, y) {
337
+ var _a = withLayoutItem(layout, i, function (l) {
338
+ var hasCollisions;
339
+ if (preventCollision && !allowOverlap) {
340
+ var collisions = getAllCollisions(layout, __assign(__assign({}, l), { w: x, h: y })).filter(function (layoutItem) { return layoutItem.i !== l.i; });
341
+ hasCollisions = collisions.length > 0;
342
+ if (hasCollisions) {
343
+ var leastX_2 = Infinity, leastY_2 = Infinity;
344
+ collisions.forEach(function (layoutItem) {
345
+ if (layoutItem.x > l.x)
346
+ leastX_2 = Math.min(leastX_2, layoutItem.x);
347
+ if (layoutItem.y > l.y)
348
+ leastY_2 = Math.min(leastY_2, layoutItem.y);
349
+ });
350
+ if (Number.isFinite(leastX_2))
351
+ l.w = leastX_2 - l.x;
352
+ if (Number.isFinite(leastY_2))
353
+ l.h = leastY_2 - l.y;
354
+ }
355
+ }
356
+ if (!hasCollisions) {
357
+ // NOTE - 여기서 x, y를 추가적으로 세팅해줘야 nw, w, n, sw 방향에서 placeholder가 반대로 resize되지 않고 해당 element와 똑같이 resize
358
+ l.w = w;
359
+ l.h = h;
360
+ l.x = x;
361
+ l.y = y;
362
+ }
363
+ return l;
364
+ }), newLayout = _a[0], l = _a[1];
365
+ if (!l)
366
+ return;
367
+ props.onFitToContent &&
368
+ props.onFitToContent({
369
+ layout: newLayout,
370
+ prev: oldResizeItem,
371
+ item: l,
372
+ });
373
+ setLayout(allowOverlap ? newLayout : compact(newLayout, compactType, cols));
374
+ };
337
375
  /**
338
376
  * Create a placeholder object.
339
377
  * @return {Element} Placeholder div.
@@ -379,9 +417,7 @@ var ReactGridLayout = function (_a) {
379
417
  : !l.static && isResizable;
380
418
  var resizeHandlesOptions = l.resizeHandles || resizeHandles;
381
419
  var bounded = draggable && isBounded && l.isBounded !== false;
382
- return (_jsx(GridItem, { containerWidth: width,
383
- // className={l.i === selected}
384
- cols: cols, margin: margin, containerPadding: containerPadding || margin, maxRows: maxRows, rowHeight: rowHeight, cancel: draggableCancel, handle: draggableHandle, onDragStop: onDragStopHandler, onDragStart: onDragStartHandler, onDrag: onDragHandler, onResizeStart: onResizeStartHandler, onResize: onResizeHandler, onResizeStop: onResizeStopHandler, isDraggable: draggable, isResizable: resizable, isBounded: bounded, useCSSTransforms: useCSSTransforms && isMounted, usePercentages: !isMounted, transformScale: transformScale, w: l.w, h: l.h, x: l.x, y: l.y, z: l.z || 0, i: l.i, minH: l.minH, minW: l.minW, maxH: l.maxH, maxW: l.maxW, static: l.static, droppingPosition: isDroppingItem ? droppingPosition : undefined, resizeHandles: resizeHandlesOptions, resizeHandle: resizeHandle, isHiddenVisibility: isHiddenVisibility, customColWidth: colWidth, autoResize: !!l.autoResize, children: child }, l.i));
420
+ return (_jsx(GridItem, { containerWidth: width, cols: cols, margin: margin, containerPadding: containerPadding || margin, maxRows: maxRows, rowHeight: rowHeight, cancel: draggableCancel, handle: draggableHandle, onDragStop: onDragStopHandler, onDragStart: onDragStartHandler, onDrag: onDragHandler, onResizeStart: onResizeStartHandler, onResize: onResizeHandler, onResizeStop: onResizeStopHandler, onFitToContent: onFitToContentHandler, isDraggable: draggable, isResizable: resizable, isBounded: bounded, useCSSTransforms: useCSSTransforms && isMounted, usePercentages: !isMounted, transformScale: transformScale, w: l.w, h: l.h, x: l.x, y: l.y, z: l.z || 0, i: l.i, minH: l.minH, minW: l.minW, maxH: l.maxH, maxW: l.maxW, static: l.static, droppingPosition: isDroppingItem ? droppingPosition : undefined, resizeHandles: resizeHandlesOptions, resizeHandle: resizeHandle, isHiddenVisibility: isHiddenVisibility, customColWidth: colWidth, autoResize: !!l.autoResize, children: child }, l.i));
385
421
  };
386
422
  var onDragOverHandler = function (e) {
387
423
  var _a;
@@ -71,6 +71,7 @@ export type ReactGridLayoutProps = {
71
71
  innerRef?: RefObject<HTMLDivElement>;
72
72
  minNbRow?: number;
73
73
  customColWidth?: number;
74
+ onFitToContent?: EventCallback;
74
75
  };
75
76
  export type DragOverEvent = MouseEvent & {
76
77
  nativeEvent: {
@@ -55,6 +55,7 @@ var Resizable = function (_a) {
55
55
  var extendedHeightRef = useRef(null);
56
56
  useEffect(function () {
57
57
  if (!isResizing) {
58
+ extendedHeightRef.current = null;
58
59
  return;
59
60
  }
60
61
  if (!elementRef.current) {
@@ -203,6 +204,7 @@ var Resizable = function (_a) {
203
204
  }
204
205
  if (extendedHeightRef.current) {
205
206
  height = extendedHeightRef.current;
207
+ handleAxis = removeNorthHandle(handleAxis);
206
208
  }
207
209
  _b = checkConstraints(width, height), width = _b[0], height = _b[1];
208
210
  _c = checkTopLeft(deltaX, deltaY, top, left, width, height, handleAxis), top = _c[0], left = _c[1];
@@ -242,4 +244,14 @@ var Resizable = function (_a) {
242
244
  return (_createElement(DraggableCore, __assign({}, draggableOpts, { nodeRef: ref, key: "resizableHandle-".concat(handleAxis), onStop: resizeHandler("onResizeStop", handleAxis), onStart: resizeHandler("onResizeStart", handleAxis), onDrag: resizeHandler("onResize", handleAxis) }), renderResizeHandle(handleAxis, ref)));
243
245
  }), true) }));
244
246
  };
247
+ function removeNorthHandle(axis) {
248
+ switch (axis) {
249
+ case 'ne':
250
+ return 'e';
251
+ case 'nw':
252
+ return 'w';
253
+ default:
254
+ return axis;
255
+ }
256
+ }
245
257
  export default Resizable;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "publ-echo-test",
3
- "version": "0.0.10",
3
+ "version": "0.0.12",
4
4
  "private": false,
5
5
  "main": "dist/lib/index.js",
6
6
  "types": "dist/lib/index.d.js",