publ-echo-test 0.0.10 → 0.0.12

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 인스턴스 생성
@@ -173,7 +171,7 @@ var GridItem = function (_a) {
         ];
         return (_jsx(Resizable, { draggableOpts: {
                 disabled: !isResizable,
-            }, 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 }));
+            }, 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 }));
     };
     /**
      * onDragStart event handler
@@ -306,6 +304,7 @@ var GridItem = function (_a) {
      * @param  {Object} callbackData  an object with node and size information
      */
     var onResize = function (e, callbackData) {
+        console.log('setting resizing true');
         setIsResizing(true);
         onResizeHandler(e, callbackData, "onResize");
     };
@@ -329,6 +328,7 @@ var GridItem = function (_a) {
     var onResizeHandler = function (e, _a, handlerName) {
         var node = _a.node, size = _a.size, handle = _a.handle;
         var handler = props[handlerName];
+        console.log(handlerName);
         if (!handler)
             return;
         var prevW = props.w, prevH = props.h;

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/dist/lib/Resizable/Resizable.js

@@ -55,6 +55,7 @@ var Resizable = function (_a) {
     var extendedHeightRef = useRef(null);
     useEffect(function () {
         if (!isResizing) {
+            extendedHeightRef.current = null;
             return;
         }
         if (!elementRef.current) {
@@ -203,6 +204,7 @@ var Resizable = function (_a) {
             }
             if (extendedHeightRef.current) {
                 height = extendedHeightRef.current;
+                handleAxis = removeNorthHandle(handleAxis);
             }
             _b = checkConstraints(width, height), width = _b[0], height = _b[1];
             _c = checkTopLeft(deltaX, deltaY, top, left, width, height, handleAxis), top = _c[0], left = _c[1];
@@ -242,4 +244,14 @@ var Resizable = function (_a) {
             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)));
         }), true) }));
 };
+function removeNorthHandle(axis) {
+    switch (axis) {
+        case 'ne':
+            return 'e';
+        case 'nw':
+            return 'w';
+        default:
+            return axis;
+    }
+}
 export default Resizable;

package/package.json

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