publ-echo-test 0.0.1

package/dist/lib/GridItem/GridItem.js

@@ -0,0 +1,350 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState } from "react";
+import { DraggableCore } from "../Draggable";
+import classNames from "../../external-lib/classnames";
+import { calcGridColWidth, calcGridItemPosition, calcGridItemWHPx, calcWH, calcXY, clamp, resolveRowHeight, } from "./utils/calculateUtils";
+import { perc, setTopLeft, setTransform, } from "../GridLayoutEditor/utils/renderHelpers";
+import { Resizable } from "../Resizable";
+var GridItem = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    var resizeHandle = props.resizeHandle, cols = props.cols, isDraggable = props.isDraggable, _b = props.transformScale, transformScale = _b === void 0 ? 1 : _b, isResizable = props.isResizable, useCSSTransforms = props.useCSSTransforms, className = props.className, _c = props.cancel, cancel = _c === void 0 ? "" : _c, _d = props.handle, handle = _d === void 0 ? "" : _d, x = props.x, y = props.y, z = props.z, w = props.w, h = props.h, _e = props.minH, minH = _e === void 0 ? 1 : _e, _f = props.minW, minW = _f === void 0 ? 1 : _f, _g = props.maxH, maxH = _g === void 0 ? Infinity : _g, _h = props.maxW, maxW = _h === void 0 ? Infinity : _h, i = props.i, _j = props.isHiddenVisibility, isHiddenVisibility = _j === void 0 ? false : _j, containerWidth = props.containerWidth, customColWidth = props.customColWidth;
+    var _k = useState(0), contentHeight = _k[0], setContentHeight = _k[1];
+    var _l = useState(0), contentWidth = _l[0], setContentWidth = _l[1];
+    var _m = useState(), resizing = _m[0], setResizing = _m[1];
+    var _o = useState(), dragging = _o[0], setDragging = _o[1];
+    var _p = useState(), dragStart = _p[0], setDragStart = _p[1];
+    var _q = useState(false), isDragging = _q[0], setIsDragging = _q[1];
+    var _r = useState(false), isResizing = _r[0], setIsResizing = _r[1];
+    var elementRef = useRef(null);
+    useEffect(function () {
+        if (!elementRef.current) {
+            return;
+        }
+        if ((className === null || className === void 0 ? void 0 : className.includes('placeholder')) || isResizing) {
+            if (i === 'whats-app-8') {
+                var target = elementRef.current.children[0].children[0];
+                var rect = target.getBoundingClientRect();
+                setContentHeight(rect.height);
+                setContentWidth(rect.width);
+                if (target.clientHeight > elementRef.current.clientHeight) {
+                    console.log('is overflowing');
+                    elementRef.current.style.height = target.clientHeight + 'px';
+                }
+                else {
+                    console.log('NOT overflowing');
+                }
+            }
+        }
+    }, [children, isResizing]);
+    // const moveDroppingItem = (prevProps: GridItemProps) => {
+    //   const { droppingPosition } = props;
+    //   if (!droppingPosition) return;
+    //   const node = elementRef.current;
+    //   // Can't find DOM node (are we unmounted?)
+    //   if (!node) return;
+    //   const prevDroppingPosition = prevProps.droppingPosition || {
+    //     left: 0,
+    //     top: 0,
+    //   };
+    //   const shouldDrag =
+    //     (dragging && droppingPosition.left !== prevDroppingPosition.left) ||
+    //     droppingPosition.top !== prevDroppingPosition.top;
+    //   if (!dragging) {
+    //     onDragStart(droppingPosition.e, {
+    //       node,
+    //       deltaX: droppingPosition.left,
+    //       deltaY: droppingPosition.top,
+    //     });
+    //   } else if (shouldDrag) {
+    //     const deltaX = droppingPosition.left - dragging.left;
+    //     const deltaY = droppingPosition.top - dragging.top;
+    //     onDrag(droppingPosition.e, {
+    //       node,
+    //       deltaX,
+    //       deltaY,
+    //     });
+    //   }
+    // };
+    var getPositionParams = function (prop) {
+        if (prop === void 0) { prop = props; }
+        return {
+            cols: prop.cols,
+            containerPadding: prop.containerPadding,
+            containerWidth: prop.containerWidth,
+            margin: prop.margin,
+            maxRows: prop.maxRows,
+            rowHeight: prop.rowHeight,
+        };
+    };
+    var colWidth = customColWidth !== null && customColWidth !== void 0 ? customColWidth : calcGridColWidth(getPositionParams());
+    var createStyle = function (pos) {
+        var usePercentages = props.usePercentages, containerWidth = props.containerWidth, useCSSTransforms = props.useCSSTransforms;
+        var style;
+        if (useCSSTransforms) {
+            style = setTransform(pos);
+        }
+        else {
+            style = setTopLeft(pos);
+            if (usePercentages) {
+                if (containerWidth == null) {
+                    throw new Error("Container width is missing!");
+                }
+                style.left = perc(pos.left / containerWidth);
+                style.width = perc(pos.width / containerWidth);
+            }
+        }
+        return style;
+    };
+    /**
+     * Mix a Draggable instance into a child.
+     * @param  {Element} child    Child element.
+     * @return {Element}          Child wrapped in Draggable.
+     */
+    var mixinDraggable = function (child, isDraggable) {
+        return (_jsx(DraggableCore, { disabled: !isDraggable, onStart: onDragStart, onDrag: onDrag, onStop: onDragStop, handle: handle, cancel: ".react-resizable-handle" + (cancel ? "," + cancel : ""), scale: transformScale, nodeRef: elementRef, children: child }));
+    };
+    /**
+     * Mix a Resizable instance into a child.
+     * @param  {Element} child    Child element.
+     * @param  {Object} position  Position object (pixel values)
+     * @return {Element}          Child wrapped in Resizable.
+     */
+    var mixinResizable = function (child, position, isResizable) {
+        var positionParams = getPositionParams();
+        // const maxWidth = calcGridItemPosition(
+        //   positionParams,
+        //   x,
+        //   y,
+        //   z,
+        //   cols - x, // TODO - 수정 필요
+        //   h
+        // ).width;
+        var mins = calcGridItemPosition(positionParams, x, y, z, minW, minH);
+        var maxes = calcGridItemPosition(positionParams, x, y, z, maxW, maxH);
+        var minConstraints = [mins.width, mins.height];
+        var maxConstraints = [
+            Math.min(maxes.width, containerWidth),
+            Math.min(maxes.height, Infinity),
+        ];
+        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, children: child }));
+    };
+    /**
+     * onDragStart event handler
+     * @param  {Event}  e             event data
+     * @param  {Object} callbackData  an object with node, delta and position information
+     */
+    var onDragStart = function (e, _a) {
+        var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
+        var newPosition = { top: 0, left: 0 };
+        var offsetParent = node.offsetParent;
+        if (!offsetParent)
+            return;
+        var parentRect = offsetParent.getBoundingClientRect();
+        var clientRect = node.getBoundingClientRect();
+        var cLeft = clientRect.left / transformScale;
+        var pLeft = parentRect.left / transformScale;
+        var cTop = clientRect.top / transformScale;
+        var pTop = parentRect.top / transformScale;
+        newPosition.left = cLeft - pLeft + offsetParent.scrollLeft;
+        newPosition.top = cTop - pTop + offsetParent.scrollTop;
+        setDragging(newPosition);
+        var _b = calcXY(getPositionParams(), newPosition.top, newPosition.left, props.w, props.h), x = _b.x, y = _b.y;
+        setDragStart({ x: x, y: y });
+        props.onDragStart &&
+            props.onDragStart(props.i, x, y, { e: e, node: node, newPosition: newPosition });
+    };
+    /**
+     * onDrag event handler
+     * @param  {Event}  e             event data
+     * @param  {Object} callbackData  an object with node, delta and position information
+     */
+    var onDrag = function (e, _a) {
+        var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
+        if (!dragging) {
+            throw new Error("onDrag called before onDragStart.");
+        }
+        setIsDragging(true);
+        var top = dragging.top + deltaY;
+        var left = dragging.left + deltaX;
+        var isBounded = props.isBounded, i = props.i, w = props.w, h = props.h, containerWidth = props.containerWidth;
+        var positionParams = getPositionParams();
+        if (isBounded) {
+            var offsetParent = node.offsetParent;
+            if (offsetParent) {
+                var margin = props.margin, rowHeight = props.rowHeight;
+                // const colWidth =  calcGridColWidth(positionParams);
+                var rowHeightNumber = resolveRowHeight(rowHeight, colWidth);
+                var bottomBoundary = offsetParent.clientHeight -
+                    calcGridItemWHPx(h, rowHeightNumber, margin[1]);
+                top = clamp(top, 0, bottomBoundary);
+                var rightBoundary = containerWidth - calcGridItemWHPx(w, colWidth, margin[0]);
+                left = clamp(left, 0, rightBoundary);
+            }
+        }
+        var newPosition = { top: top, left: left };
+        setDragging(newPosition);
+        var _b = calcXY(positionParams, top, left, w, h), x = _b.x, y = _b.y;
+        props.onDrag && props.onDrag(i, x, y, { e: e, node: node, newPosition: newPosition });
+    };
+    /**
+     * onDragStop event handler
+     * @param  {Event}  e             event data
+     * @param  {Object} callbackData  an object with node, delta and position information
+     */
+    var onDragStop = function (e, _a) {
+        var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
+        if (!dragging) {
+            throw new Error("onDragEnd called before onDragStart.");
+        }
+        var w = props.w, h = props.h, i = props.i;
+        var left = dragging.left, top = dragging.top;
+        var _b = calcXY(getPositionParams(), top, left, w, h), x = _b.x, y = _b.y;
+        var newPosition = { top: top, left: left };
+        var change = (dragStart === null || dragStart === void 0 ? void 0 : dragStart.x) !== x || (dragStart === null || dragStart === void 0 ? void 0 : dragStart.y) !== y;
+        setDragging(undefined);
+        setDragStart(undefined);
+        setIsDragging(false);
+        props.onDragStop &&
+            props.onDragStop(i, x, y, { e: e, node: node, newPosition: newPosition, change: change });
+    };
+    var getResizableXYPosition = function (handle, width, height, prevW, prevH) {
+        var newX = x;
+        var newY = y;
+        if (handle === "nw") {
+            // NOTE - nw left(X)와 top(Y) 둘다 변경
+            if (width > prevW) {
+                newX = x - (width - prevW);
+            }
+            else {
+                newX = x + (prevW - width);
+            }
+            if (height > prevH) {
+                newY = y - (height - prevH);
+            }
+            else {
+                newY = y + (prevH - height);
+            }
+        }
+        if (handle === "n" || handle === "ne") {
+            // NOTE - n, ne left(X) 고정 & top(Y) 변경
+            if (height > prevH) {
+                newY = y - (height - prevH);
+            }
+            else {
+                newY = y + (prevH - height);
+            }
+        }
+        if (handle === "w" || handle === "sw") {
+            // NOTE - s, sw left(X) 변경 top(Y) 고정
+            if (width > prevW) {
+                newX = x - (width - prevW);
+            }
+            else {
+                newX = x + (prevW - width);
+            }
+        }
+        return { newX: newX, newY: newY };
+    };
+    /**
+     * onResizeStart event handler
+     * @param  {ResizeEventType}  e             event data
+     * @param  {Object} callbackData  an object with node and size information
+     */
+    var onResizeStart = function (e, callbackData) {
+        onResizeHandler(e, callbackData, "onResizeStart");
+    };
+    /**
+     * onResize event handler
+     * @param  {ResizeEventType}  e             event data
+     * @param  {Object} callbackData  an object with node and size information
+     */
+    var onResize = function (e, callbackData) {
+        setIsResizing(true);
+        onResizeHandler(e, callbackData, "onResize");
+    };
+    /**
+     * onResizeStop event handler
+     * @param  {ResizeEventType}  e             event data
+     * @param  {Object} callbackData  an object with node and size information
+     */
+    var onResizeStop = function (e, callbackData) {
+        setIsResizing(false);
+        onResizeHandler(e, callbackData, "onResizeStop");
+    };
+    /**
+     * Wrapper around drag events to provide more useful data.
+     * All drag events call the function with the given handler name,
+     * with the signature (index, x, y).
+     *
+     * @param  {String} handlerName Handler name to wrap.
+     * @return {Function}           Handler function.
+     */
+    var onResizeHandler = function (e, _a, handlerName) {
+        var _b;
+        var node = _a.node, size = _a.size, handle = _a.handle;
+        var handler = props[handlerName];
+        if (!handler)
+            return;
+        var prevW = props.w, prevH = props.h;
+        // Get new XY
+        var _c = calcWH(getPositionParams(), __assign(__assign({}, size), { height: (_b = elementRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight }), x, y, handle, prevW, prevH), w = _c.w, h = _c.h;
+        // minW should be at least 1
+        // minW = Math.max(minW, 1);
+        // maxW should be at most (cols - x)
+        // maxW = Math.min(maxW, cols - x);
+        w = clamp(w, minW, maxW);
+        h = clamp(h, minH, maxH);
+        setResizing(handlerName === "onResizeStop" ? undefined : size);
+        var _d = getResizableXYPosition(handle, w, h, prevW, prevH), newX = _d.newX, newY = _d.newY;
+        handler(i, w, h, { e: e, node: node, size: size }, newX, newY);
+    };
+    var pos = calcGridItemPosition(getPositionParams(), x, y, z, w, h, {
+        dragging: dragging,
+        resizing: resizing,
+    }, colWidth);
+    var child = React.Children.only(children);
+    var newChild = React.cloneElement(child, {
+        key: i,
+        ref: elementRef,
+        'data-grid-id': i,
+        className: classNames("react-grid-item", child.props.className, className, {
+            static: props.static,
+            isResizing: Boolean(resizing) && Boolean(isResizing) && Boolean(isHiddenVisibility),
+            resizing: Boolean(resizing),
+            "react-draggable": isDraggable,
+            isDragging: Boolean(isDragging) && Boolean(dragging) && Boolean(isHiddenVisibility),
+            "react-draggable-dragging": Boolean(dragging),
+            // dropping: Boolean(droppingPosition),
+            cssTransforms: useCSSTransforms,
+        }),
+        style: __assign(__assign(__assign({}, props.style), child.props.style), createStyle(pos)),
+    });
+    newChild = mixinResizable(newChild, pos, isResizable);
+    newChild = mixinDraggable(newChild, isDraggable);
+    return newChild;
+};
+export default GridItem;

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

@@ -0,0 +1 @@
+export { default as GridItem } from "./GridItem";

package/dist/lib/GridItem/index.js

@@ -0,0 +1 @@
+export { default as GridItem } from "./GridItem";

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

@@ -0,0 +1,107 @@
+import { DragEvent, SyntheticEvent } from "react";
+import { RowHeight } from "../GridLayoutEditor/types";
+import { ResizeHandleAxis, ResizeHandleType } from "../Resizable/types";
+export type PartialPosition = {
+    top: number;
+    left: number;
+};
+export type ResizeEventType = SyntheticEvent | MouseEvent | TouchEvent;
+export type GridResizeEvent = {
+    e: ResizeEventType;
+    node: HTMLElement;
+    size: Size;
+};
+export type GridDragEvent = {
+    e: ResizeEventType;
+    node: HTMLElement;
+    newPosition: PartialPosition;
+};
+export type GridItemCallback<Data extends GridDragEvent | GridResizeEvent> = (i: string, x: number, y: number, data: Data) => void;
+type ResizeGridItemCallback<Data extends GridDragEvent | GridResizeEvent> = (i: string, w: number, h: number, data: Data, x: number, y: number) => void;
+export type GridDragStopEvent = GridDragEvent & {
+    change: boolean;
+};
+export type Size = {
+    width: number;
+    height: number;
+    top: number;
+    left: number;
+};
+export type GridItemStateType = {
+    resizing?: {
+        width: number;
+        height: number;
+    };
+    dragging?: {
+        top: number;
+        left: number;
+    };
+    className: string;
+};
+export type GridItemProps = {
+    margin: [number, number];
+    containerPadding: [number, number];
+    rowHeight: RowHeight;
+    maxRows: number;
+    isDraggable: boolean;
+    isResizable: boolean;
+    isBounded: boolean;
+    static?: boolean;
+    useCSSTransforms?: boolean;
+    usePercentages?: boolean;
+    transformScale?: number;
+    droppingPosition?: DroppingPosition;
+    cols: number;
+    containerWidth: number;
+    className?: string;
+    style?: Object;
+    cancel?: string;
+    handle?: string;
+    minW?: number;
+    maxW?: number;
+    minH?: number;
+    maxH?: number;
+    x: number;
+    y: number;
+    z: number;
+    w: number;
+    h: number;
+    i: string;
+    resizeHandles?: ResizeHandleAxis[];
+    resizeHandle?: ResizeHandleType;
+    onDrag?: GridItemCallback<GridDragEvent>;
+    onDragStart?: GridItemCallback<GridDragEvent>;
+    onDragStop?: GridItemCallback<GridDragStopEvent>;
+    onResize?: ResizeGridItemCallback<GridResizeEvent>;
+    onResizeStart?: ResizeGridItemCallback<GridResizeEvent>;
+    onResizeStop?: ResizeGridItemCallback<GridResizeEvent>;
+    isHiddenVisibility?: boolean;
+    customColWidth?: number;
+    autoResize: boolean;
+};
+export type GridItemDefaultProps = {
+    className: string;
+    cancel: string;
+    handle: string;
+    minH: number;
+    minW: number;
+    maxH: number;
+    maxW: number;
+    transformScale: number;
+};
+export type DroppingPosition = {
+    left: number;
+    top: number;
+    e: DragEvent<HTMLDivElement>;
+};
+export type ReactDraggableCallbackData = {
+    node: HTMLElement;
+    x: number;
+    y: number;
+    deltaX: number;
+    deltaY: number;
+    lastX: number;
+    lastY: number;
+};
+export type ResizeHandlerNameType = "onResizeStart" | "onResize" | "onResizeStop";
+export {};

package/dist/lib/GridItem/types.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/GridItem/utils/calculateUtils.d.ts

@@ -0,0 +1,30 @@
+import { ResizeHandleAxis } from "../../Resizable/types";
+import { Position, PositionParams } from "../../GridLayoutEditor/types";
+export type RowHeight = number | ((width: number) => number);
+export declare function calcGridColWidth(positionParams: PositionParams): number;
+export declare function calcGridItemWHPx(gridUnits: number, colOrRowSize: number, marginPx: number): number;
+export declare const resolveRowHeight: (rowHeight: RowHeight, width: number) => number;
+export declare function calcGridItemPosition(positionParams: PositionParams, x: number, y: number, z: number, w: number, h: number, state?: {
+    resizing?: {
+        width: number;
+        height: number;
+        top: number;
+        left: number;
+    };
+    dragging?: {
+        top: number;
+        left: number;
+    };
+}, customColWidth?: number): Position;
+export declare function calcXY(positionParams: PositionParams, top: number, left: number, w: number, h: number): {
+    x: number;
+    y: number;
+};
+export declare function calcWH(positionParams: PositionParams, { width, height }: {
+    width: number;
+    height: number;
+}, x: number, y: number, handleAxis?: ResizeHandleAxis, prevW?: number, prevH?: number): {
+    w: number;
+    h: number;
+};
+export declare function clamp(num: number, lowerBound: number, upperBound: number): number;

package/dist/lib/GridItem/utils/calculateUtils.js

@@ -0,0 +1,108 @@
+export function calcGridColWidth(positionParams) {
+    var margin = positionParams.margin, containerPadding = positionParams.containerPadding, containerWidth = positionParams.containerWidth, cols = positionParams.cols;
+    return ((containerWidth - margin[0] * (cols - 1) - containerPadding[0] * 2) / cols);
+}
+export function calcGridItemWHPx(gridUnits, colOrRowSize, marginPx) {
+    if (!Number.isFinite(gridUnits))
+        return gridUnits;
+    return Number((colOrRowSize * gridUnits + Math.max(0, gridUnits - 1) * marginPx).toFixed(1));
+}
+export var resolveRowHeight = function (rowHeight, width) {
+    return typeof rowHeight === "number" ? rowHeight : rowHeight(width);
+};
+export function calcGridItemPosition(positionParams, x, y, z, w, h, state, customColWidth) {
+    var margin = positionParams.margin, containerPadding = positionParams.containerPadding, rowHeight = positionParams.rowHeight;
+    var colWidth = customColWidth !== null && customColWidth !== void 0 ? customColWidth : calcGridColWidth(positionParams);
+    var rowHeightNumber = resolveRowHeight(rowHeight, colWidth);
+    var result = {
+        left: Math.round((colWidth + margin[0]) * x + containerPadding[0]),
+        top: Math.round((rowHeightNumber + margin[1]) * y + containerPadding[1]),
+        width: w === Infinity ? w : calcGridItemWHPx(w, colWidth, margin[0]),
+        height: h === Infinity ? h : calcGridItemWHPx(h, rowHeightNumber, margin[1]),
+        z: z,
+    };
+    if (state && state.resizing) {
+        result.width = Math.round(state.resizing.width);
+        result.height = Math.round(state.resizing.height);
+        result.top = Math.round(state.resizing.top);
+        result.left = Math.round(state.resizing.left);
+    }
+    else {
+        result.width = calcGridItemWHPx(w, colWidth, margin[0]);
+        result.height = calcGridItemWHPx(h, rowHeightNumber, margin[1]);
+    }
+    if (state && state.dragging) {
+        result.top = Math.round(state.dragging.top);
+        result.left = Math.round(state.dragging.left);
+    }
+    else {
+        result.top = Math.round((rowHeightNumber + margin[1]) * y + containerPadding[1]);
+        result.left = Math.round((colWidth + margin[0]) * x + containerPadding[0]);
+    }
+    return result;
+}
+export function calcXY(positionParams, top, left, w, h) {
+    var margin = positionParams.margin, cols = positionParams.cols, rowHeight = positionParams.rowHeight, maxRows = positionParams.maxRows;
+    var colWidth = calcGridColWidth(positionParams);
+    var rowHeightNumber = resolveRowHeight(rowHeight, colWidth);
+    var x = Math.round((left - margin[0]) / (colWidth + margin[0]));
+    var y = Math.round((top - margin[1]) / (rowHeightNumber + margin[1]));
+    // Capping
+    x = clamp(x, 0, cols - w);
+    y = clamp(y, 0, maxRows - h);
+    return { x: x, y: y };
+}
+export function calcWH(positionParams, _a, x, y, handleAxis, prevW, prevH) {
+    var width = _a.width, height = _a.height;
+    var margin = positionParams.margin, maxRows = positionParams.maxRows, cols = positionParams.cols, rowHeight = positionParams.rowHeight;
+    var colWidth = calcGridColWidth(positionParams);
+    var rowHeightNumber = resolveRowHeight(rowHeight, colWidth);
+    var w = Math.round((width + margin[0]) / (colWidth + margin[0]));
+    var h = Math.round((height + margin[1]) / (rowHeightNumber + margin[1]));
+    // // Capping
+    // w = clamp(w, 0, cols - x);
+    // h = clamp(h, 0, maxRows - y);
+    if (handleAxis === "nw") {
+        if (x <= 0 && y <= 0 && prevW && prevH) {
+            w = Math.max(Math.min(w, prevW), 0);
+            h = Math.max(Math.min(h, prevH), 0);
+        }
+        if (x <= 0 && prevW) {
+            w = Math.max(Math.min(w, prevW), 0);
+            h = Math.max(Math.min(h, maxRows - y), 0);
+        }
+        if (y <= 0 && prevH) {
+            h = Math.max(Math.min(h, prevH), 0);
+        }
+    }
+    if (handleAxis === "w" || handleAxis === "sw") {
+        if (x <= 0 && prevW) {
+            w = Math.max(Math.min(w, prevW), 0);
+            h = Math.max(Math.min(h, maxRows - y), 0);
+        }
+    }
+    if (handleAxis === "n") {
+        if (y <= 0 && prevH) {
+            w = Math.max(Math.min(w, cols - x), 0);
+            h = Math.max(Math.min(h, prevH), 0);
+        }
+    }
+    if (handleAxis === "ne") {
+        if (y <= 0 && prevH) {
+            w = Math.max(Math.min(w, cols - x), 0);
+            h = Math.max(Math.min(h, prevH), 0);
+        }
+        else {
+            w = Math.max(Math.min(w, cols - x), 0);
+            h = Math.max(Math.min(h, maxRows - y), 0);
+        }
+    }
+    if (handleAxis === "e" || handleAxis === "se") {
+        w = Math.max(Math.min(w, cols - x), 0);
+        h = Math.max(Math.min(h, maxRows - y), 0);
+    }
+    return { w: w, h: h };
+}
+export function clamp(num, lowerBound, upperBound) {
+    return Math.max(Math.min(num, upperBound), lowerBound);
+}

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

@@ -0,0 +1,6 @@
+import * as React from "react";
+import type { ReactElement } from "react";
+import { PropsWithChildren } from "../types";
+import { ReactGridLayoutProps } from "./types";
+declare const ReactGridLayout: ({ children, ...props }: PropsWithChildren<ReactGridLayoutProps>) => React.ReactElement;
+export default ReactGridLayout;