publ-echo-test 0.0.10 → 0.0.11

package/dist/lib/GridItem/GridItem.js

@@ -58,7 +58,6 @@ var GridItem = function (_a) {
                 console.log("mutation", mutation);
                 var height = mutation.target.clientHeight;
                 console.log("new height", height);
-                var handler = props['onResize'];
                 var prevW = props.w;
                 var prevH = props.h;
                 var _a = calcWH(getPositionParams(), {
@@ -66,8 +65,7 @@ var GridItem = function (_a) {
                     height: height,
                 }, x, y, 'e', props.w, props.h), w_1 = _a.w, h_1 = _a.h;
                 var _b = getResizableXYPosition('e', w_1, h_1, prevW, prevH), newX = _b.newX, newY = _b.newY;
-                handler && handler(i, w_1, h_1, {}, newX, newY);
-                props.onResizeStop && props.onResizeStop(i, w_1, h_1, {}, newX, newY);
+                props.onFitToContent && props.onFitToContent(i, w_1, h_1, newX, newY);
             }
         };
         // MutationObserver 인스턴스 생성

package/dist/lib/GridItem/types.d.ts

@@ -75,6 +75,7 @@ export type GridItemProps = {
     onResize?: ResizeGridItemCallback<GridResizeEvent>;
     onResizeStart?: ResizeGridItemCallback<GridResizeEvent>;
     onResizeStop?: ResizeGridItemCallback<GridResizeEvent>;
+    onFitToContent?: (i: string, w: number, h: number, x: number, y: number) => void;
     isHiddenVisibility?: boolean;
     customColWidth?: number;
     autoResize: boolean;

package/dist/lib/GridLayoutEditor/ReactGridLayout.js

@@ -317,8 +317,7 @@ var ReactGridLayout = function (_a) {
                 node: node,
             });
         setLayout(allowOverlap ? newLayout : compact(newLayout, compactType, cols));
-        // NOTE: 주의
-        e && setActiveDrag(placeholder);
+        setActiveDrag(placeholder);
     };
     var onResizeStopHandler = function (i, x, y, _a) {
         var e = _a.e, node = _a.node;
@@ -334,6 +333,45 @@ var ReactGridLayout = function (_a) {
         setOldLayout(undefined);
         onLayoutMaybeChanged(newLayout, oldLayout);
     };
+    var onFitToContentHandler = function (i, w, h, x, y) {
+        var _a = withLayoutItem(layout, i, function (l) {
+            var hasCollisions;
+            if (preventCollision && !allowOverlap) {
+                var collisions = getAllCollisions(layout, __assign(__assign({}, l), { w: x, h: y })).filter(function (layoutItem) { return layoutItem.i !== l.i; });
+                hasCollisions = collisions.length > 0;
+                if (hasCollisions) {
+                    var leastX_2 = Infinity, leastY_2 = Infinity;
+                    collisions.forEach(function (layoutItem) {
+                        if (layoutItem.x > l.x)
+                            leastX_2 = Math.min(leastX_2, layoutItem.x);
+                        if (layoutItem.y > l.y)
+                            leastY_2 = Math.min(leastY_2, layoutItem.y);
+                    });
+                    if (Number.isFinite(leastX_2))
+                        l.w = leastX_2 - l.x;
+                    if (Number.isFinite(leastY_2))
+                        l.h = leastY_2 - l.y;
+                }
+            }
+            if (!hasCollisions) {
+                // NOTE - 여기서 x, y를 추가적으로 세팅해줘야 nw, w, n, sw 방향에서 placeholder가 반대로 resize되지 않고 해당 element와 똑같이 resize
+                l.w = w;
+                l.h = h;
+                l.x = x;
+                l.y = y;
+            }
+            return l;
+        }), newLayout = _a[0], l = _a[1];
+        if (!l)
+            return;
+        props.onFitToContent &&
+            props.onFitToContent({
+                layout: newLayout,
+                prev: oldResizeItem,
+                item: l,
+            });
+        setLayout(allowOverlap ? newLayout : compact(newLayout, compactType, cols));
+    };
     /**
      * Create a placeholder object.
      * @return {Element} Placeholder div.
@@ -379,9 +417,7 @@ var ReactGridLayout = function (_a) {
             : !l.static && isResizable;
         var resizeHandlesOptions = l.resizeHandles || resizeHandles;
         var bounded = draggable && isBounded && l.isBounded !== false;
-        return (_jsx(GridItem, { containerWidth: width, 
-            // className={l.i === selected}
-            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));
+        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));
     };
     var onDragOverHandler = function (e) {
         var _a;

package/dist/lib/GridLayoutEditor/types.d.ts

@@ -71,6 +71,7 @@ export type ReactGridLayoutProps = {
     innerRef?: RefObject<HTMLDivElement>;
     minNbRow?: number;
     customColWidth?: number;
+    onFitToContent?: EventCallback;
 };
 export type DragOverEvent = MouseEvent & {
     nativeEvent: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "publ-echo-test",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "private": false,
   "main": "dist/lib/index.js",
   "types": "dist/lib/index.d.js",