@antscorp/antsomi-ui 1.3.3-beta.20 → 1.3.3-beta.21

package/es/components/molecules/ResizeGrid/ResizeGrid.js

@@ -1,353 +1,353 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { Cell } from './components/Cell';
-import { GRID_TEMPLATE, MIN_SIZE, buildGrid } from './constant';
-import { StyledGrid } from './styled';
-import { useDeepCompareEffect } from '../../../hooks/useDeepCompareEffect';
-const defaultProps = {
-    containerStyle: {},
-    cellBorderStyle: '1px dashed',
-    cellStyle: {},
-    cellActiveStyle: {},
-    isPreviewMode: false,
-    isCompact: false,
-};
-export const ResizeGrid = props => {
-    const { containerStyle, cellBorderStyle, cellStyle, cellActiveStyle, isPreviewMode, renderCell, grid: initGrid, image, imageSize, imagePosition, isCompact, } = props;
-    const [grid, setGrid] = useState(buildGrid(initGrid || GRID_TEMPLATE.GRID_2_3));
-    const startRef = useRef(null);
-    const startCellRef = useRef(null);
-    const selectRef = useRef(null);
-    const selectEndRef = useRef(null);
-    const gridRef = useRef();
-    const containerRef = useRef(null);
-    const cellsRef = useRef({});
-    const onChangeTimout = useRef();
-    // console.log('grid', grid)
-    const onChangeGrid = () => {
-        clearTimeout(onChangeTimout.current);
-        onChangeTimout.current = setTimeout(() => {
-            if (containerRef.current && cellsRef.current && cellsRef.current[0]) {
-                const container = containerRef.current.getBoundingClientRect();
-                const childs = Object.values(cellsRef.current).map(cell => {
-                    if (!cell || !cell.current)
-                        return;
-                    const childBox = cell.current.getBoundingClientRect();
-                    return {
-                        width: childBox.width,
-                        height: childBox.height,
-                        x: childBox.x - container.x,
-                        y: childBox.y - container.y,
-                    };
-                });
-                if (typeof props.onChangeGrid === 'function') {
-                    props.onChangeGrid(grid, childs);
-                }
-            }
-        }, 300);
-    };
-    const isFollow = (cell, line, isCol = true) => isCol
-        ? (cell.colEnd !== line || !cell.width) && (cell.colStart !== line || !cell.width)
-        : (cell.rowEnd !== line || !cell.height) && (cell.rowStart !== line || !cell.height);
-    const notFollow = (cell, line, isCol = true) => !isFollow(cell, line, isCol);
-    useEffect(() => {
-        onChangeGrid();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [grid]);
-    useDeepCompareEffect(() => {
-        if ((initGrid === null || initGrid === void 0 ? void 0 : initGrid.rows) && (initGrid === null || initGrid === void 0 ? void 0 : initGrid.cols)) {
-            setGrid(buildGrid(initGrid));
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [initGrid === null || initGrid === void 0 ? void 0 : initGrid.rows, initGrid === null || initGrid === void 0 ? void 0 : initGrid.cols, initGrid === null || initGrid === void 0 ? void 0 : initGrid.gridTemplateColumns, initGrid === null || initGrid === void 0 ? void 0 : initGrid.gridTemplateRows]);
-    useEffect(() => {
-        const handleMove = e => {
-            if (startRef.current && gridRef.current && containerRef.current) {
-                const { type, line } = startRef.current;
-                const idx = line - 1;
-                const { gridTemplateRows, gridTemplateColumns, rows, cols, childs } = gridRef.current;
-                if (idx <= 0 || (type === 'row' && idx >= rows) || (type === 'column' && idx >= cols))
-                    return;
-                const { clientX, clientY } = e;
-                if (type === 'row') {
-                    const gridHeight = containerRef.current.offsetHeight;
-                    const yDistant = clientY - startRef.current.clientY;
-                    const yPercentDistant = (100 * yDistant) / gridHeight;
-                    const minPercent = (100 * MIN_SIZE) / gridHeight;
-                    // console.log('move Y', clientY, yDistant, yPercentDistant);
-                    const newArr = [...gridTemplateRows];
-                    newArr[idx - 1] += yPercentDistant;
-                    newArr[idx] -= yPercentDistant;
-                    if (newArr[idx - 1] >= minPercent && newArr[idx] >= minPercent) {
-                        const newChilds = JSON.parse(JSON.stringify(childs));
-                        let isValidChildSize = true;
-                        newChilds.forEach(child => {
-                            var _a, _b;
-                            if (isValidChildSize && notFollow(child, (_a = startRef.current) === null || _a === void 0 ? void 0 : _a.line, false)) {
-                                if (child.rowStart === ((_b = startRef.current) === null || _b === void 0 ? void 0 : _b.line)) {
-                                    if (child.transformY) {
-                                        child.transformY = +child.transformY - yDistant;
-                                    }
-                                    else {
-                                        child.height = +child.height - yDistant;
-                                    }
-                                }
-                                else {
-                                    child.transformY && (child.height = +child.height + yDistant);
-                                }
-                                // console.log('check...', startRef.current.line, child.transformY, yDistant, +child.transformY - yDistant)
-                                if (child.height < MIN_SIZE) {
-                                    isValidChildSize = false;
-                                }
-                            }
-                        });
-                        isValidChildSize &&
-                            setGrid(Object.assign(Object.assign({}, gridRef.current), { gridTemplateRows: newArr, childs: newChilds }));
-                    }
-                }
-                else {
-                    const xDistant = clientX - startRef.current.clientX;
-                    const gridWidth = containerRef.current.offsetWidth;
-                    const xPercentDistant = (100 * xDistant) / gridWidth;
-                    const minPercent = (100 * MIN_SIZE) / gridWidth;
-                    // console.log('move X', clientX, xDistant, xPercentDistant);
-                    const newArr = [...gridTemplateColumns];
-                    newArr[idx - 1] += xPercentDistant;
-                    newArr[idx] -= xPercentDistant;
-                    if (newArr[idx - 1] >= minPercent && newArr[idx] >= minPercent) {
-                        const newChilds = JSON.parse(JSON.stringify(childs));
-                        let isValidChildSize = true;
-                        newChilds.forEach(child => {
-                            if (isValidChildSize && notFollow(child, line)) {
-                                if (child.colStart === line) {
-                                    if (child.transformX) {
-                                        child.transformX = +child.transformX - xDistant;
-                                    }
-                                    else {
-                                        child.width = +child.width - xDistant;
-                                    }
-                                }
-                                else {
-                                    child.transformX && !child.movedRight && (child.width = +child.width + xDistant);
-                                }
-                                // console.log('check...', startRef.current.line, child.transformX, xDistant, +child.transformX - xDistant)
-                                if (child.width < MIN_SIZE) {
-                                    isValidChildSize = false;
-                                }
-                            }
-                        });
-                        isValidChildSize &&
-                            setGrid(Object.assign(Object.assign({}, gridRef.current), { gridTemplateColumns: newArr, childs: newChilds }));
-                    }
-                }
-            }
-            //-------------------------------------------
-            if (startCellRef.current && gridRef.current) {
-                const { clientX: startClientX, clientY: startClientY, idx, direction, isRevert, cell, nextCell, } = startCellRef.current;
-                const { rowStart, rowEnd, colStart, colEnd, transformX, transformY } = cell;
-                const { gridTemplateRows, gridTemplateColumns, rows, cols, childs } = gridRef.current;
-                if (idx < 0 ||
-                    (direction === 'top' && rowStart === 1) ||
-                    (direction === 'right' && colEnd === cols + 1) ||
-                    (direction === 'bottom' && rowEnd === rows + 1) ||
-                    (direction === 'left' && colStart === 1))
-                    return;
-                const { clientX, clientY } = e;
-                if (['top', 'bottom'].includes(direction)) {
-                    // const cellHeight = cellRef.current.offsetHeight;
-                    const yDistant = clientY - startClientY;
-                    // console.log('move Y', clientY, yDistant);
-                    const newHeight = (cell.height || 0) + yDistant;
-                    const newHeightNextCell = (nextCell.height || 0) - yDistant;
-                    if (newHeight >= MIN_SIZE && newHeightNextCell >= MIN_SIZE) {
-                        const newChilds = [...childs];
-                        newChilds[idx] = Object.assign(Object.assign({}, childs[idx]), { height: newHeight, movedBottom: true });
-                        newChilds[nextCell.idx] = Object.assign(Object.assign({}, childs[nextCell.idx]), { height: newHeightNextCell, transformY: (nextCell.transformY || 0) + yDistant, movedTop: true });
-                        setGrid(Object.assign(Object.assign({}, gridRef.current), { childs: newChilds }));
-                    }
-                }
-                else {
-                    // const cellWidth = cellRef.current.offsetWidth;
-                    const xDistant = clientX - startClientX;
-                    // console.log('move X', clientX, xDistant);
-                    const newWidth = (cell.width || 0) + xDistant;
-                    const newWidthNextCell = (nextCell.width || 0) - xDistant;
-                    if (newWidth >= MIN_SIZE && newWidthNextCell >= MIN_SIZE) {
-                        const newChilds = [...childs];
-                        newChilds[idx] = Object.assign(Object.assign({}, childs[idx]), { width: newWidth, movedRight: true });
-                        newChilds[idx + 1] = Object.assign(Object.assign({}, childs[idx + 1]), { width: newWidthNextCell, transformX: (nextCell.transformX || 0) + xDistant, movedLeft: true });
-                        setGrid(Object.assign(Object.assign({}, gridRef.current), { childs: newChilds }));
-                    }
-                }
-            }
-            //------------------------------------------
-            // if (selectRef.current) {}
-        };
-        const handleUp = () => {
-            startRef.current = null;
-            startCellRef.current = null;
-        };
-        window.addEventListener('mousemove', handleMove);
-        window.addEventListener('mouseup', handleUp);
-        return () => {
-            window.removeEventListener('mousemove', handleMove);
-            window.removeEventListener('mouseup', handleUp);
-        };
-    }, []);
-    const handleDownCell = (e, idx, direction, cell, cellRef) => {
-        const { clientX, clientY } = e;
-        const isRevert = ['top', 'left'].includes(direction);
-        let newIdx = isRevert ? idx - 1 : idx;
-        let nextCellIdx = isRevert ? idx - 1 : idx + 1;
-        if (['top', 'bottom'].includes(direction)) {
-            nextCellIdx = grid.childs.findIndex(b => b.colStart === cell.colStart &&
-                ((isRevert && b.rowEnd === cell.rowStart) || (!isRevert && b.rowStart === cell.rowEnd)));
-            newIdx = isRevert ? nextCellIdx : idx;
-        }
-        if (nextCellIdx < 0)
-            return;
-        const nextCell = grid.childs[nextCellIdx];
-        const nextCellRef = cellsRef.current[nextCellIdx];
-        if (nextCell && nextCellRef && nextCellRef.current) {
-            const newDirection = isRevert
-                ? {
-                    left: 'right',
-                    top: 'bottom',
-                }[direction]
-                : direction;
-            const cellInfo = Object.assign({ width: cell.width || cellRef.current.clientWidth, height: cell.height || cellRef.current.clientHeight, transformX: cell.transformX || 0, transformY: cell.transformY || 0, idx,
-                cellRef }, cell);
-            const nextCellInfo = Object.assign({ width: nextCell.width || nextCellRef.current.clientWidth, height: nextCell.height || nextCellRef.current.clientHeight, transformX: nextCell.transformX || 0, transformY: nextCell.transformY || 0, cellRef: nextCellRef, idx: nextCellIdx }, nextCell);
-            // console.log({cellInfo, nextCellInfo})
-            startCellRef.current = {
-                clientX,
-                clientY,
-                idx: newIdx,
-                direction: newDirection,
-                isRevert,
-                cell: isRevert ? nextCellInfo : cellInfo,
-                nextCell: !isRevert ? nextCellInfo : cellInfo,
-            };
-            // console.log('down cell', clientX, clientY, idx, direction, cell, cellRef);
-            gridRef.current = grid;
-        }
-    };
-    const handleDown = (e, type, line) => {
-        const { clientX, clientY } = e;
-        startRef.current = { clientX, clientY, type, line };
-        // console.log('down', type, line, clientX, clientY);
-        gridRef.current = JSON.parse(JSON.stringify(grid));
-    };
-    const handleUp = (e, direction, idx) => {
-        // console.log('up', direction, idx, e);
-        startRef.current = null;
-        startCellRef.current = null;
-    };
-    const downSelect = (idx, cell) => {
-        // console.log('dow select', idx, cell);
-        selectRef.current = { idx, cell };
-        gridRef.current = grid;
-    };
-    const unMerge = (cell, idx) => {
-        const { colStart, colEnd, rowStart, rowEnd } = cell;
-        if (colStart + 1 === colEnd && rowStart + 1 === rowEnd) {
-            return;
-        }
-        const newChilds = [...grid.childs];
-        for (let i = rowStart; i < rowEnd; i++) {
-            for (let j = colStart; j < colEnd; j++) {
-                const rStart = i;
-                const cStart = j;
-                const rEnd = rStart + 1;
-                const cEnd = cStart + 1;
-                // console.log('merge', i, j, rStart, cStart, rEnd, cEnd)
-                const newChild = {
-                    colStart: cStart,
-                    colEnd: cEnd,
-                    rowStart: rStart,
-                    rowEnd: rEnd,
-                };
-                if (i === rowStart && j === colStart) {
-                    newChilds[idx] = newChild;
-                }
-                else if (rStart !== rowStart ||
-                    rEnd !== rowEnd ||
-                    cStart !== colStart ||
-                    cEnd !== colEnd) {
-                    newChilds.splice(idx, 0, newChild);
-                }
-            }
-        }
-        setGrid(prev => (Object.assign(Object.assign({}, prev), { childs: newChilds })));
-    };
-    const resetBackgroundCellRef = () => {
-        Object.values(cellsRef.current).forEach(r => {
-            if (r.current) {
-                r.current.style.background = 'unset';
-            }
-        });
-    };
-    const upSelect = (idx, cell) => {
-        // console.log('up select', idx, cell);
-        resetBackgroundCellRef();
-        if (selectRef.current &&
-            selectEndRef.current &&
-            gridRef.current &&
-            selectRef.current.idx !== selectEndRef.current.idx &&
-            (selectEndRef.current.cell.rowEnd > selectRef.current.cell.rowEnd ||
-                selectEndRef.current.cell.colEnd > selectRef.current.cell.colEnd)) {
-            // console.log('merge', selectRef.current, selectEndRef.current)
-            const { cell: cellStart, idx: idxStart } = selectRef.current;
-            const { cell: cellEnd, idx: idxEnd, hCells } = selectEndRef.current;
-            const newChilds = [...gridRef.current.childs];
-            newChilds[idxStart].rowEnd = cellEnd.rowEnd;
-            newChilds[idxStart].colEnd = cellEnd.colEnd;
-            delete newChilds[idxStart].width;
-            delete newChilds[idxStart].height;
-            hCells.reverse().forEach(i => {
-                if (i !== idxStart) {
-                    newChilds.splice(i, 1);
-                    delete cellsRef.current[i];
-                }
-            });
-            setGrid(Object.assign(Object.assign({}, gridRef.current), { childs: newChilds }));
-        }
-        selectRef.current = null;
-        selectEndRef.current = null;
-    };
-    const hoverSelect = (idx, cell) => {
-        if (selectRef.current && gridRef.current) {
-            // console.log('hover select', idx, cell);
-            const { cell: cellStart, idx: idxStart } = selectRef.current;
-            const hCells = [];
-            gridRef.current.childs.forEach((child, i) => {
-                if (child.rowStart >= cellStart.rowStart &&
-                    child.rowEnd <= cell.rowEnd &&
-                    child.colStart >= cellStart.colStart &&
-                    child.colEnd <= cell.colEnd) {
-                    hCells.push(i);
-                }
-            });
-            // console.log('hCells', hCells)
-            resetBackgroundCellRef();
-            hCells.forEach(i => {
-                const cellRef = cellsRef.current[i];
-                if (cellRef && cellRef.current) {
-                    cellRef.current.style.background = 'rgba(255, 0, 255, .5)';
-                }
-            });
-            selectEndRef.current = { cell, idx, hCells };
-            gridRef.current = grid;
-        }
-    };
-    const setRef = (idx, ref) => {
-        cellsRef.current[idx] = ref;
-        // console.log('cellsRef.current', cellsRef.current)
-    };
-    const renderGrid = () => {
-        const { gridTemplateColumns, gridTemplateRows, childs } = grid;
-        // console.log('grid', { gridTemplateColumns, gridTemplateRows, childs });
-        return (React.createElement("div", { className: "grid-container", ref: containerRef, style: Object.assign({ backgroundImage: `url(${image})`, backgroundSize: imageSize, backgroundPosition: imagePosition, gridTemplateColumns: gridTemplateColumns.map(fr => `${fr}%`).join(' '), gridTemplateRows: gridTemplateRows.map(fr => `${fr}%`).join(' ') }, containerStyle) }, childs.map((cell, idx) => (React.createElement(Cell, { key: idx, idx: idx, cell: cell, down: handleDown, downCell: handleDownCell, up: handleUp, setRef: setRef, downSelect: downSelect, upSelect: upSelect, hoverSelect: hoverSelect, unMerge: unMerge, renderCell: renderCell, borderStyle: cellBorderStyle, style: cellStyle, activeStyle: cellActiveStyle, isPreviewMode: isPreviewMode })))));
-    };
-    return (React.createElement(StyledGrid, { className: "grid-wrapper", isCompact: !!isCompact }, renderGrid()));
-};
-ResizeGrid.defaultProps = defaultProps;
+import React, { useState, useRef, useEffect } from 'react';
+import { Cell } from './components/Cell';
+import { GRID_TEMPLATE, MIN_SIZE, buildGrid } from './constant';
+import { StyledGrid } from './styled';
+import { useDeepCompareEffect } from '../../../hooks/useDeepCompareEffect';
+const defaultProps = {
+    containerStyle: {},
+    cellBorderStyle: '1px dashed',
+    cellStyle: {},
+    cellActiveStyle: {},
+    isPreviewMode: false,
+    isCompact: false,
+};
+export const ResizeGrid = props => {
+    const { containerStyle, cellBorderStyle, cellStyle, cellActiveStyle, isPreviewMode, renderCell, grid: initGrid, image, imageSize, imagePosition, isCompact, onChange, } = props;
+    const [grid, setGrid] = useState(buildGrid(initGrid || GRID_TEMPLATE.GRID_2_3));
+    const startRef = useRef(null);
+    const startCellRef = useRef(null);
+    const selectRef = useRef(null);
+    const selectEndRef = useRef(null);
+    const gridRef = useRef();
+    const containerRef = useRef(null);
+    const cellsRef = useRef({});
+    const onChangeTimout = useRef();
+    // console.log('grid', grid)
+    const handleChangeGrid = () => {
+        clearTimeout(onChangeTimout.current);
+        onChangeTimout.current = setTimeout(() => {
+            if (containerRef.current && cellsRef.current && cellsRef.current[0]) {
+                const container = containerRef.current.getBoundingClientRect();
+                const childs = Object.values(cellsRef.current).map(cell => {
+                    if (!cell || !cell.current)
+                        return;
+                    const childBox = cell.current.getBoundingClientRect();
+                    return {
+                        width: childBox.width,
+                        height: childBox.height,
+                        x: childBox.x - container.x,
+                        y: childBox.y - container.y,
+                    };
+                });
+                if (typeof onChange === 'function') {
+                    onChange(grid, childs);
+                }
+            }
+        }, 300);
+    };
+    const isFollow = (cell, line, isCol = true) => isCol
+        ? (cell.colEnd !== line || !cell.width) && (cell.colStart !== line || !cell.width)
+        : (cell.rowEnd !== line || !cell.height) && (cell.rowStart !== line || !cell.height);
+    const notFollow = (cell, line, isCol = true) => !isFollow(cell, line, isCol);
+    useEffect(() => {
+        handleChangeGrid();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [grid]);
+    useDeepCompareEffect(() => {
+        if ((initGrid === null || initGrid === void 0 ? void 0 : initGrid.rows) && (initGrid === null || initGrid === void 0 ? void 0 : initGrid.cols)) {
+            setGrid(buildGrid(initGrid));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [initGrid]);
+    useEffect(() => {
+        const handleMove = e => {
+            if (startRef.current && gridRef.current && containerRef.current) {
+                const { type, line } = startRef.current;
+                const idx = line - 1;
+                const { gridTemplateRows, gridTemplateColumns, rows, cols, childs } = gridRef.current;
+                if (idx <= 0 || (type === 'row' && idx >= rows) || (type === 'column' && idx >= cols))
+                    return;
+                const { clientX, clientY } = e;
+                if (type === 'row') {
+                    const gridHeight = containerRef.current.offsetHeight;
+                    const yDistant = clientY - startRef.current.clientY;
+                    const yPercentDistant = (100 * yDistant) / gridHeight;
+                    const minPercent = (100 * MIN_SIZE) / gridHeight;
+                    // console.log('move Y', clientY, yDistant, yPercentDistant);
+                    const newArr = [...gridTemplateRows];
+                    newArr[idx - 1] += yPercentDistant;
+                    newArr[idx] -= yPercentDistant;
+                    if (newArr[idx - 1] >= minPercent && newArr[idx] >= minPercent) {
+                        const newChilds = JSON.parse(JSON.stringify(childs));
+                        let isValidChildSize = true;
+                        newChilds.forEach(child => {
+                            var _a, _b;
+                            if (isValidChildSize && notFollow(child, (_a = startRef.current) === null || _a === void 0 ? void 0 : _a.line, false)) {
+                                if (child.rowStart === ((_b = startRef.current) === null || _b === void 0 ? void 0 : _b.line)) {
+                                    if (child.transformY) {
+                                        child.transformY = +child.transformY - yDistant;
+                                    }
+                                    else {
+                                        child.height = +child.height - yDistant;
+                                    }
+                                }
+                                else {
+                                    child.transformY && (child.height = +child.height + yDistant);
+                                }
+                                // console.log('check...', startRef.current.line, child.transformY, yDistant, +child.transformY - yDistant)
+                                if (child.height < MIN_SIZE) {
+                                    isValidChildSize = false;
+                                }
+                            }
+                        });
+                        isValidChildSize &&
+                            setGrid(Object.assign(Object.assign({}, gridRef.current), { gridTemplateRows: newArr, childs: newChilds }));
+                    }
+                }
+                else {
+                    const xDistant = clientX - startRef.current.clientX;
+                    const gridWidth = containerRef.current.offsetWidth;
+                    const xPercentDistant = (100 * xDistant) / gridWidth;
+                    const minPercent = (100 * MIN_SIZE) / gridWidth;
+                    // console.log('move X', clientX, xDistant, xPercentDistant);
+                    const newArr = [...gridTemplateColumns];
+                    newArr[idx - 1] += xPercentDistant;
+                    newArr[idx] -= xPercentDistant;
+                    if (newArr[idx - 1] >= minPercent && newArr[idx] >= minPercent) {
+                        const newChilds = JSON.parse(JSON.stringify(childs));
+                        let isValidChildSize = true;
+                        newChilds.forEach(child => {
+                            if (isValidChildSize && notFollow(child, line)) {
+                                if (child.colStart === line) {
+                                    if (child.transformX) {
+                                        child.transformX = +child.transformX - xDistant;
+                                    }
+                                    else {
+                                        child.width = +child.width - xDistant;
+                                    }
+                                }
+                                else {
+                                    child.transformX && !child.movedRight && (child.width = +child.width + xDistant);
+                                }
+                                // console.log('check...', startRef.current.line, child.transformX, xDistant, +child.transformX - xDistant)
+                                if (child.width < MIN_SIZE) {
+                                    isValidChildSize = false;
+                                }
+                            }
+                        });
+                        isValidChildSize &&
+                            setGrid(Object.assign(Object.assign({}, gridRef.current), { gridTemplateColumns: newArr, childs: newChilds }));
+                    }
+                }
+            }
+            //-------------------------------------------
+            if (startCellRef.current && gridRef.current) {
+                const { clientX: startClientX, clientY: startClientY, idx, direction, isRevert, cell, nextCell, } = startCellRef.current;
+                const { rowStart, rowEnd, colStart, colEnd, transformX, transformY } = cell;
+                const { gridTemplateRows, gridTemplateColumns, rows, cols, childs } = gridRef.current;
+                if (idx < 0 ||
+                    (direction === 'top' && rowStart === 1) ||
+                    (direction === 'right' && colEnd === cols + 1) ||
+                    (direction === 'bottom' && rowEnd === rows + 1) ||
+                    (direction === 'left' && colStart === 1))
+                    return;
+                const { clientX, clientY } = e;
+                if (['top', 'bottom'].includes(direction)) {
+                    // const cellHeight = cellRef.current.offsetHeight;
+                    const yDistant = clientY - startClientY;
+                    // console.log('move Y', clientY, yDistant);
+                    const newHeight = (cell.height || 0) + yDistant;
+                    const newHeightNextCell = (nextCell.height || 0) - yDistant;
+                    if (newHeight >= MIN_SIZE && newHeightNextCell >= MIN_SIZE) {
+                        const newChilds = [...childs];
+                        newChilds[idx] = Object.assign(Object.assign({}, childs[idx]), { height: newHeight, movedBottom: true });
+                        newChilds[nextCell.idx] = Object.assign(Object.assign({}, childs[nextCell.idx]), { height: newHeightNextCell, transformY: (nextCell.transformY || 0) + yDistant, movedTop: true });
+                        setGrid(Object.assign(Object.assign({}, gridRef.current), { childs: newChilds }));
+                    }
+                }
+                else {
+                    // const cellWidth = cellRef.current.offsetWidth;
+                    const xDistant = clientX - startClientX;
+                    // console.log('move X', clientX, xDistant);
+                    const newWidth = (cell.width || 0) + xDistant;
+                    const newWidthNextCell = (nextCell.width || 0) - xDistant;
+                    if (newWidth >= MIN_SIZE && newWidthNextCell >= MIN_SIZE) {
+                        const newChilds = [...childs];
+                        newChilds[idx] = Object.assign(Object.assign({}, childs[idx]), { width: newWidth, movedRight: true });
+                        newChilds[idx + 1] = Object.assign(Object.assign({}, childs[idx + 1]), { width: newWidthNextCell, transformX: (nextCell.transformX || 0) + xDistant, movedLeft: true });
+                        setGrid(Object.assign(Object.assign({}, gridRef.current), { childs: newChilds }));
+                    }
+                }
+            }
+            //------------------------------------------
+            // if (selectRef.current) {}
+        };
+        const handleUp = () => {
+            startRef.current = null;
+            startCellRef.current = null;
+        };
+        window.addEventListener('mousemove', handleMove);
+        window.addEventListener('mouseup', handleUp);
+        return () => {
+            window.removeEventListener('mousemove', handleMove);
+            window.removeEventListener('mouseup', handleUp);
+        };
+    }, []);
+    const handleDownCell = (e, idx, direction, cell, cellRef) => {
+        const { clientX, clientY } = e;
+        const isRevert = ['top', 'left'].includes(direction);
+        let newIdx = isRevert ? idx - 1 : idx;
+        let nextCellIdx = isRevert ? idx - 1 : idx + 1;
+        if (['top', 'bottom'].includes(direction)) {
+            nextCellIdx = grid.childs.findIndex(b => b.colStart === cell.colStart &&
+                ((isRevert && b.rowEnd === cell.rowStart) || (!isRevert && b.rowStart === cell.rowEnd)));
+            newIdx = isRevert ? nextCellIdx : idx;
+        }
+        if (nextCellIdx < 0)
+            return;
+        const nextCell = grid.childs[nextCellIdx];
+        const nextCellRef = cellsRef.current[nextCellIdx];
+        if (nextCell && nextCellRef && nextCellRef.current) {
+            const newDirection = isRevert
+                ? {
+                    left: 'right',
+                    top: 'bottom',
+                }[direction]
+                : direction;
+            const cellInfo = Object.assign({ width: cell.width || cellRef.current.clientWidth, height: cell.height || cellRef.current.clientHeight, transformX: cell.transformX || 0, transformY: cell.transformY || 0, idx,
+                cellRef }, cell);
+            const nextCellInfo = Object.assign({ width: nextCell.width || nextCellRef.current.clientWidth, height: nextCell.height || nextCellRef.current.clientHeight, transformX: nextCell.transformX || 0, transformY: nextCell.transformY || 0, cellRef: nextCellRef, idx: nextCellIdx }, nextCell);
+            // console.log({cellInfo, nextCellInfo})
+            startCellRef.current = {
+                clientX,
+                clientY,
+                idx: newIdx,
+                direction: newDirection,
+                isRevert,
+                cell: isRevert ? nextCellInfo : cellInfo,
+                nextCell: !isRevert ? nextCellInfo : cellInfo,
+            };
+            // console.log('down cell', clientX, clientY, idx, direction, cell, cellRef);
+            gridRef.current = grid;
+        }
+    };
+    const handleDown = (e, type, line) => {
+        const { clientX, clientY } = e;
+        startRef.current = { clientX, clientY, type, line };
+        // console.log('down', type, line, clientX, clientY);
+        gridRef.current = JSON.parse(JSON.stringify(grid));
+    };
+    const handleUp = (e, direction, idx) => {
+        // console.log('up', direction, idx, e);
+        startRef.current = null;
+        startCellRef.current = null;
+    };
+    const downSelect = (idx, cell) => {
+        // console.log('dow select', idx, cell);
+        selectRef.current = { idx, cell };
+        gridRef.current = grid;
+    };
+    const unMerge = (cell, idx) => {
+        const { colStart, colEnd, rowStart, rowEnd } = cell;
+        if (colStart + 1 === colEnd && rowStart + 1 === rowEnd) {
+            return;
+        }
+        const newChilds = [...grid.childs];
+        for (let i = rowStart; i < rowEnd; i++) {
+            for (let j = colStart; j < colEnd; j++) {
+                const rStart = i;
+                const cStart = j;
+                const rEnd = rStart + 1;
+                const cEnd = cStart + 1;
+                // console.log('merge', i, j, rStart, cStart, rEnd, cEnd)
+                const newChild = {
+                    colStart: cStart,
+                    colEnd: cEnd,
+                    rowStart: rStart,
+                    rowEnd: rEnd,
+                };
+                if (i === rowStart && j === colStart) {
+                    newChilds[idx] = newChild;
+                }
+                else if (rStart !== rowStart ||
+                    rEnd !== rowEnd ||
+                    cStart !== colStart ||
+                    cEnd !== colEnd) {
+                    newChilds.splice(idx, 0, newChild);
+                }
+            }
+        }
+        setGrid(prev => (Object.assign(Object.assign({}, prev), { childs: newChilds })));
+    };
+    const resetBackgroundCellRef = () => {
+        Object.values(cellsRef.current).forEach(r => {
+            if (r.current) {
+                r.current.style.background = 'unset';
+            }
+        });
+    };
+    const upSelect = (idx, cell) => {
+        // console.log('up select', idx, cell);
+        resetBackgroundCellRef();
+        if (selectRef.current &&
+            selectEndRef.current &&
+            gridRef.current &&
+            selectRef.current.idx !== selectEndRef.current.idx &&
+            (selectEndRef.current.cell.rowEnd > selectRef.current.cell.rowEnd ||
+                selectEndRef.current.cell.colEnd > selectRef.current.cell.colEnd)) {
+            // console.log('merge', selectRef.current, selectEndRef.current)
+            const { cell: cellStart, idx: idxStart } = selectRef.current;
+            const { cell: cellEnd, idx: idxEnd, hCells } = selectEndRef.current;
+            const newChilds = [...gridRef.current.childs];
+            newChilds[idxStart].rowEnd = cellEnd.rowEnd;
+            newChilds[idxStart].colEnd = cellEnd.colEnd;
+            delete newChilds[idxStart].width;
+            delete newChilds[idxStart].height;
+            hCells.reverse().forEach(i => {
+                if (i !== idxStart) {
+                    newChilds.splice(i, 1);
+                    delete cellsRef.current[i];
+                }
+            });
+            setGrid(Object.assign(Object.assign({}, gridRef.current), { childs: newChilds }));
+        }
+        selectRef.current = null;
+        selectEndRef.current = null;
+    };
+    const hoverSelect = (idx, cell) => {
+        if (selectRef.current && gridRef.current) {
+            // console.log('hover select', idx, cell);
+            const { cell: cellStart, idx: idxStart } = selectRef.current;
+            const hCells = [];
+            gridRef.current.childs.forEach((child, i) => {
+                if (child.rowStart >= cellStart.rowStart &&
+                    child.rowEnd <= cell.rowEnd &&
+                    child.colStart >= cellStart.colStart &&
+                    child.colEnd <= cell.colEnd) {
+                    hCells.push(i);
+                }
+            });
+            // console.log('hCells', hCells)
+            resetBackgroundCellRef();
+            hCells.forEach(i => {
+                const cellRef = cellsRef.current[i];
+                if (cellRef && cellRef.current) {
+                    cellRef.current.style.background = 'rgba(255, 0, 255, .5)';
+                }
+            });
+            selectEndRef.current = { cell, idx, hCells };
+            gridRef.current = grid;
+        }
+    };
+    const setRef = (idx, ref) => {
+        cellsRef.current[idx] = ref;
+        // console.log('cellsRef.current', cellsRef.current)
+    };
+    const renderGrid = () => {
+        const { gridTemplateColumns, gridTemplateRows, childs } = grid;
+        // console.log('grid', { gridTemplateColumns, gridTemplateRows, childs });
+        return (React.createElement("div", { className: "grid-container", ref: containerRef, style: Object.assign({ backgroundImage: `url(${image})`, backgroundSize: imageSize, backgroundPosition: imagePosition, gridTemplateColumns: gridTemplateColumns.map(fr => `${fr}%`).join(' '), gridTemplateRows: gridTemplateRows.map(fr => `${fr}%`).join(' ') }, containerStyle) }, childs.map((cell, idx) => (React.createElement(Cell, { key: idx, idx: idx, cell: cell, down: handleDown, downCell: handleDownCell, up: handleUp, setRef: setRef, downSelect: downSelect, upSelect: upSelect, hoverSelect: hoverSelect, unMerge: unMerge, renderCell: renderCell, borderStyle: cellBorderStyle, style: cellStyle, activeStyle: cellActiveStyle, isPreviewMode: isPreviewMode })))));
+    };
+    return (React.createElement(StyledGrid, { className: "grid-wrapper", isCompact: !!isCompact }, renderGrid()));
+};
+ResizeGrid.defaultProps = defaultProps;