@antscorp/antsomi-ui 1.3.5-beta.13 → 1.3.5-beta.14

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

@@ -1,736 +1,736 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-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 React, { useState, useRef, useEffect } from 'react';
-import { Cell } from './components/Cell';
-import { GRID_TEMPLATE, MIN_SIZE, THREADHOLD, buildGrid } from './constant';
-import { StyledGrid, StyledMiddleLayer, StyledBGLayer, StyledLine } from './styled';
-import { useDeepCompareEffect } from '../../../hooks/useDeepCompareEffect';
-const defaultProps = {
-    containerStyle: {},
-    cellBorder: '1px dotted',
-    cellStyle: {},
-    cellActiveStyle: { background: '#2f79bf80' },
-    isPreview: false,
-    isCompact: false,
-    delayUpdate: 200,
-    selectColor: '#2f79bf80',
-};
-export const ResizeGrid = props => {
-    const { containerStyle, cellBorder, cellStyle, cellActiveStyle, isPreview, renderCell, grid: initGrid, image, imageSize, imagePosition, isCompact, onChange, delayUpdate, selectColor, reCalculateFlag, } = 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 verticalLineRef = useRef(null);
-    const horizontalLineRef = useRef(null);
-    const layersRef = useRef(null);
-    const cellsRef = useRef({});
-    const cordinatesRef = useRef({});
-    const onChangeTimoutRef = useRef();
-    const onChangeDelayRef = useRef();
-    const acceptUpdateRef = useRef(false);
-    const firstChangeRef = useRef(true);
-    const ctrlKeyRef = useRef(false);
-    const initRef = useRef(0);
-    const initDoneRef = useRef(false);
-    // console.log('grid', grid)
-    function lineVertical(isShow = true, left = 0) {
-        if (verticalLineRef.current && layersRef.current) {
-            verticalLineRef.current.style.display = isShow ? 'block' : 'none';
-            layersRef.current.style.opacity = isShow ? '.5' : '1';
-            verticalLineRef.current.style.left = `${left}px`;
-        }
-    }
-    function lineHorizontal(isShow = true, top = 0) {
-        if (horizontalLineRef.current && layersRef.current) {
-            horizontalLineRef.current.style.display = isShow ? 'block' : 'none';
-            layersRef.current.style.opacity = isShow ? '.5' : '1';
-            horizontalLineRef.current.style.top = `${top}px`;
-        }
-    }
-    const handleChangeGrid = () => {
-        clearTimeout(onChangeTimoutRef.current);
-        onChangeTimoutRef.current = setTimeout(() => {
-            if (containerRef.current && cellsRef.current && cellsRef.current[0]) {
-                const container = containerRef.current.getBoundingClientRect();
-                // Object.values(cordinatesRef.current);
-                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, firstChangeRef.current ? 'system' : 'user');
-                    acceptUpdateRef.current = false;
-                    firstChangeRef.current = false;
-                    clearTimeout(onChangeDelayRef.current);
-                    onChangeDelayRef.current = setTimeout(() => {
-                        acceptUpdateRef.current = true;
-                    }, delayUpdate);
-                }
-            }
-        }, 300);
-    };
-    const isFollow = (cell, line, isCol = true) => isCol
-        ? (cell.colEnd !== line || !cell.sizeX) && (cell.colStart !== line || !cell.sizeX)
-        : (cell.rowEnd !== line || !cell.sizeY) && (cell.rowStart !== line || !cell.sizeY);
-    const notFollow = (cell, line, isCol = true) => !isFollow(cell, line, isCol);
-    const floorSize = size => Math.floor(size);
-    useEffect(() => {
-        handleChangeGrid();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [grid, reCalculateFlag]);
-    useDeepCompareEffect(() => {
-        // console.log('changed grid', initGrid, acceptUpdateRef.current, initGrid?.rows, initGrid?.cols)
-        // console.log(initRef.current < 2,!initDoneRef.current, acceptUpdateRef.current)
-        if ((initRef.current < 2 || !initDoneRef.current || acceptUpdateRef.current) &&
-            (initGrid === null || initGrid === void 0 ? void 0 : initGrid.rows) &&
-            (initGrid === null || initGrid === void 0 ? void 0 : initGrid.cols)) {
-            // console.log('apply change...', buildGrid(initGrid))
-            initRef.current += 1;
-            firstChangeRef.current = true;
-            setGrid(buildGrid(initGrid));
-            resetBackgroundCellRef();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [initGrid]);
-    useEffect(() => {
-        setTimeout(() => {
-            initDoneRef.current = true;
-        }, 3000);
-        const handleMove = e => {
-            // Resize Grid
-            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, idx) => {
-                            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.sizeY = +child.sizeY - yDistant;
-                                    }
-                                }
-                                else {
-                                    child.transformY &&
-                                        !child.movedBottom &&
-                                        (child.sizeY = +child.sizeY + yDistant);
-                                }
-                                // console.log('check...', startRef.current.line, child.transformY, yDistant, +child.transformY - yDistant)
-                                if (child.sizeY < 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.sizeX = +child.sizeX - xDistant;
-                                    }
-                                }
-                                else {
-                                    child.transformX && !child.movedRight && (child.sizeX = +child.sizeX + xDistant);
-                                }
-                                // console.log('check...', startRef.current.line, child.transformX, xDistant, +child.transformX - xDistant)
-                                if (child.sizeX < MIN_SIZE) {
-                                    isValidChildSize = false;
-                                }
-                            }
-                        });
-                        isValidChildSize &&
-                            setGrid(Object.assign(Object.assign({}, gridRef.current), { gridTemplateColumns: newArr, childs: newChilds }));
-                    }
-                }
-            }
-            //-------------------------------------------
-            // Resize Cell
-            if (startCellRef.current && gridRef.current) {
-                const { clientX: startClientX, clientY: startClientY, direction, isRevert, leftCells, rightCells, } = 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;
-                    let yDistant = clientY - startClientY;
-                    // console.log('move Y', clientY, yDistant);
-                    if (Math.abs(yDistant) > THREADHOLD) {
-                        startCellRef.current.fallback = true;
-                    }
-                    let isValid = true;
-                    const mapNewSizeTop = {};
-                    const mapNewSizeBottom = {};
-                    const leftKeys = Object.keys(leftCells);
-                    leftKeys.forEach(cellIdx => {
-                        const cell = leftCells[cellIdx];
-                        let newHeight = (cell.sizeY || 0) + yDistant;
-                        if (newHeight < MIN_SIZE) {
-                            isValid = false;
-                        }
-                        else {
-                            const cellCordinate = cordinatesRef.current[cellIdx];
-                            // const cell = gridRef.current.childs[cellIdx];
-                            const newYEnd = cellCordinate.y + newHeight;
-                            const nearestCells = Object.entries(cordinatesRef.current).filter(cor => gridRef.current &&
-                                gridRef.current.childs[cor[0]] &&
-                                !leftKeys.includes(cor[0]) &&
-                                gridRef.current.childs[cor[0]].colStart !== cell.colStart &&
-                                Math.abs(cor[1].yEnd - newYEnd) <= THREADHOLD);
-                            // console.log('nearestCells', nearestCells, newXEnd, leftKeys, cordinatesRef.current);
-                            if (nearestCells.length && startCellRef.current) {
-                                const nearestY = Math.abs(nearestCells[0][1].y - newYEnd) <= THREADHOLD
-                                    ? nearestCells[0][1].y
-                                    : nearestCells[0][1].yEnd;
-                                const delta = nearestY - newYEnd;
-                                if (startCellRef.current.fallback ||
-                                    floorSize(cellCordinate.height) !== floorSize(newHeight + delta)) {
-                                    newHeight += delta;
-                                    yDistant += delta;
-                                    lineHorizontal(true, nearestY - 1);
-                                }
-                            }
-                            else {
-                                lineHorizontal(false);
-                            }
-                            mapNewSizeTop[cellIdx] = newHeight;
-                        }
-                    });
-                    Object.keys(rightCells).forEach(cellIdx => {
-                        const nextCell = rightCells[cellIdx];
-                        const newHeightNextCell = (nextCell.sizeY || 0) - yDistant;
-                        if (newHeightNextCell < MIN_SIZE) {
-                            isValid = false;
-                        }
-                        mapNewSizeBottom[cellIdx] = [newHeightNextCell, nextCell];
-                    });
-                    if (isValid) {
-                        const newChilds = [...gridRef.current.childs];
-                        Object.keys(mapNewSizeTop).forEach(cellIdx => {
-                            newChilds[cellIdx] = Object.assign(Object.assign({}, newChilds[cellIdx]), { sizeY: mapNewSizeTop[cellIdx], movedBottom: true });
-                        });
-                        Object.keys(mapNewSizeBottom).forEach(cellIdx => {
-                            newChilds[cellIdx] = Object.assign(Object.assign({}, newChilds[cellIdx]), { sizeY: mapNewSizeBottom[cellIdx][0], transformY: (mapNewSizeBottom[cellIdx][1].transformY || 0) + yDistant, movedTop: true });
-                        });
-                        setGrid(Object.assign(Object.assign({}, gridRef.current), { childs: newChilds }));
-                    }
-                }
-                else {
-                    // const cellWidth = cellRef.current.offsetWidth;
-                    let xDistant = clientX - startClientX;
-                    // console.log('move X', clientX, xDistant);
-                    if (Math.abs(xDistant) > THREADHOLD) {
-                        startCellRef.current.fallback = true;
-                    }
-                    let isValid = true;
-                    const mapNewSizeLeft = {};
-                    const mapNewSizeRight = {};
-                    const mapReset = {};
-                    const leftKeys = Object.keys(leftCells);
-                    leftKeys.forEach(cellIdx => {
-                        const cell = leftCells[cellIdx];
-                        let newWidth = (cell.sizeX || 0) + xDistant;
-                        if (newWidth < MIN_SIZE) {
-                            isValid = false;
-                        }
-                        else if (gridRef.current) {
-                            const cellCordinate = cordinatesRef.current[cellIdx];
-                            // const cell = gridRef.current.childs[cellIdx];
-                            const newXEnd = cellCordinate.x + newWidth;
-                            const nearestCells = Object.entries(cordinatesRef.current).filter(cor => gridRef.current &&
-                                gridRef.current.childs[cor[0]] &&
-                                !leftKeys.includes(cor[0]) &&
-                                gridRef.current.childs[cor[0]].rowStart !== cell.rowStart &&
-                                Math.abs(cor[1].xEnd - newXEnd) <= THREADHOLD);
-                            // console.log('nearestCells', nearestCells, newXEnd, leftKeys, cordinatesRef.current);
-                            if (nearestCells.length && startCellRef.current) {
-                                const nearestX = Math.abs(nearestCells[0][1].x - newXEnd) <= THREADHOLD
-                                    ? nearestCells[0][1].x
-                                    : nearestCells[0][1].xEnd;
-                                const delta = nearestX - newXEnd;
-                                if (startCellRef.current.fallback ||
-                                    floorSize(cellCordinate.width) !== floorSize(newWidth + delta)) {
-                                    newWidth += delta;
-                                    xDistant += delta;
-                                    lineVertical(true, nearestX - 1);
-                                }
-                            }
-                            else {
-                                lineVertical(false);
-                            }
-                            mapNewSizeLeft[cellIdx] = newWidth;
-                        }
-                    });
-                    Object.keys(rightCells).forEach(cellIdx => {
-                        const nextCell = rightCells[cellIdx];
-                        const newWidthNextCell = (nextCell.sizeX || 0) - xDistant;
-                        if (newWidthNextCell < MIN_SIZE) {
-                            isValid = false;
-                        }
-                        mapNewSizeRight[cellIdx] = [newWidthNextCell, nextCell];
-                    });
-                    if (isValid) {
-                        const newChilds = [...gridRef.current.childs];
-                        Object.keys(mapNewSizeLeft).forEach(cellIdx => {
-                            newChilds[cellIdx] = Object.assign(Object.assign({}, newChilds[cellIdx]), { sizeX: mapNewSizeLeft[cellIdx], movedRight: true });
-                        });
-                        Object.keys(mapNewSizeRight).forEach(cellIdx => {
-                            newChilds[cellIdx] = Object.assign(Object.assign({}, newChilds[cellIdx]), { sizeX: mapNewSizeRight[cellIdx][0], transformX: (mapNewSizeRight[cellIdx][1].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;
-            lineVertical(false);
-            lineHorizontal(false);
-        };
-        const isMac = () => navigator.platform.indexOf('Mac') >= 0;
-        window.addEventListener('mousemove', handleMove);
-        window.addEventListener('mouseup', handleUp);
-        const handleKeyDown = e => {
-            if (!ctrlKeyRef.current && ((isMac() && e.metaKey) || (!isMac() && e.key === 'Control'))) {
-                ctrlKeyRef.current = true;
-                // console.log('ctrlKeyRef', ctrlKeyRef.current);
-            }
-        };
-        const handleKeyUp = () => {
-            ctrlKeyRef.current = false;
-            // console.log('ctrlKeyRef', ctrlKeyRef.current);
-        };
-        window.addEventListener('keydown', handleKeyDown);
-        window.addEventListener('keyup', handleKeyUp);
-        return () => {
-            window.removeEventListener('mousemove', handleMove);
-            window.removeEventListener('mouseup', handleUp);
-            window.removeEventListener('keydown', handleKeyDown);
-            window.removeEventListener('keyup', handleKeyUp);
-        };
-    }, []);
-    // const rebaseCordinate = (x, y, ...rest) => {
-    //   if (containerRef.current) {
-    //     const container = containerRef.current.getBoundingClientRect();
-    //     console.log('rebased', x - container.x, y - container.y, ...rest);
-    //   }
-    // };
-    const activeCell = ({ idx }) => {
-        setGrid(prev => (Object.assign(Object.assign({}, prev), { childs: prev.childs.map((c, i) => (Object.assign(Object.assign({}, c), { active: i === idx }))) })));
-    };
-    const findResizeCells = ({ type, line, direction, idx, 
-    // cell,
-    isRevert, leftCols = [], rightCols = [], dones = [], level = 0, }) => {
-        // left is current cell and right is the opposite
-        if (dones.includes(idx)) {
-            return null;
-        }
-        const { childs } = grid;
-        const cellBox = cordinatesRef.current[idx];
-        dones.push(idx);
-        if (level === 0 && !leftCols.length) {
-            leftCols.push(idx);
-        }
-        let isEnd = true;
-        if (type === 'column') {
-            childs.forEach((cell, i) => {
-                if (((direction === 'left' &&
-                    cell.colEnd === line &&
-                    Math.abs(cellBox.x - cordinatesRef.current[i].xEnd) < 1) ||
-                    (direction === 'right' &&
-                        cell.colStart === line &&
-                        Math.abs(cellBox.xEnd - cordinatesRef.current[i].x) < 1)) &&
-                    !(floorSize(cordinatesRef.current[i].y) >= floorSize(cellBox.yEnd) ||
-                        floorSize(cordinatesRef.current[i].yEnd) <= floorSize(cellBox.y))) {
-                    if (!rightCols.includes(i)) {
-                        rightCols.push(i);
-                        // const cellIRef = cellsRef.current[i];
-                        // if (cellIRef.current) {
-                        //   cellIRef.current.style.background = 'green';
-                        // }
-                        isEnd = false;
-                    }
-                    // else if (direction === 'right' && !leftCols.includes(i)) {
-                    //   leftCols.push(i);
-                    //   const cellIRef = cellsRef.current[i];
-                    //   if (cellIRef.current) {
-                    //     cellIRef.current.style.background = 'blue';
-                    //   }
-                    //   isEnd = false;
-                    // }
-                }
-            });
-        }
-        else {
-            childs.forEach((cell, i) => {
-                if (((direction === 'top' &&
-                    cell.rowEnd === line &&
-                    Math.abs(cellBox.y - cordinatesRef.current[i].yEnd) < 1) ||
-                    (direction === 'bottom' &&
-                        cell.rowStart === line &&
-                        Math.abs(cellBox.yEnd - cordinatesRef.current[i].y) < 1)) &&
-                    !(floorSize(cordinatesRef.current[i].x) >= floorSize(cellBox.xEnd) ||
-                        floorSize(cordinatesRef.current[i].xEnd) <= floorSize(cellBox.x))) {
-                    if (!rightCols.includes(i)) {
-                        rightCols.push(i);
-                        // const cellIRef = cellsRef.current[i];
-                        // if (cellIRef.current) {
-                        //   cellIRef.current.style.background = 'green';
-                        // }
-                        isEnd = false;
-                    }
-                    // else if (direction === 'bottom' && !leftCols.includes(i)) {
-                    //   leftCols.push(i);
-                    //   const cellIRef = cellsRef.current[i];
-                    //   if (cellIRef.current) {
-                    //     cellIRef.current.style.background = 'blue';
-                    //   }
-                    //   isEnd = false;
-                    // }
-                }
-            });
-        }
-        // console.log(' find', direction, idx, leftCols, rightCols, dones, cordinatesRef.current);
-        if (!isEnd) {
-            // console.log('continue find', leftCols, rightCols);
-            rightCols
-                .filter(i => !dones.includes(i))
-                .forEach(i => {
-                findResizeCells({
-                    type,
-                    line,
-                    direction: { left: 'right', right: 'left', top: 'bottom', bottom: 'top' }[direction] || '',
-                    idx: i,
-                    isRevert,
-                    leftCols: rightCols,
-                    rightCols: leftCols,
-                    dones,
-                    level: level + 1,
-                });
-            });
-        }
-        return { leftCols, rightCols };
-    };
-    const handleDownCell = (e, type, line, idx, direction, cell, cellRef) => {
-        const { clientX, clientY } = e;
-        // rebaseCordinate(clientX, clientY, type, line);
-        const isRevert = ['top', 'left'].includes(direction);
-        // let newIdx = isRevert ? idx - 1 : idx;
-        // let nextCellIdx = isRevert ? idx - 1 : idx + 1;
-        const leftCols = [idx];
-        const rightCols = [];
-        findResizeCells({ type, line, direction, idx, isRevert, leftCols, rightCols });
-        // console.log('change cell', leftCols, rightCols);
-        // 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;
-        if (!leftCols.length || !rightCols.length)
-            return;
-        const leftCells = {};
-        const rightCells = {};
-        leftCols.forEach(i => {
-            var _a, _b;
-            const cell = grid.childs[i];
-            const cellRef = cellsRef.current[i];
-            leftCells[i] = Object.assign({ sizeX: cell.sizeX || ((_a = cellRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0, sizeY: cell.sizeY || ((_b = cellRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight) || 0, transformX: cell.transformX || 0, transformY: cell.transformY || 0, idx: i, cellRef }, cell);
-        });
-        rightCols.forEach(i => {
-            var _a, _b;
-            const cell = grid.childs[i];
-            const cellRef = cellsRef.current[i];
-            rightCells[i] = Object.assign({ sizeX: cell.sizeX || ((_a = cellRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0, sizeY: cell.sizeY || ((_b = cellRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight) || 0, transformX: cell.transformX || 0, transformY: cell.transformY || 0, idx: i, cellRef }, cell);
-        });
-        const newDirection = isRevert
-            ? {
-                left: 'right',
-                right: 'left',
-                top: 'bottom',
-                bottom: 'top',
-            }[direction]
-            : direction;
-        startCellRef.current = {
-            clientX,
-            clientY,
-            // idx: newIdx,
-            direction: newDirection,
-            isRevert,
-            leftCells: isRevert ? rightCells : leftCells,
-            rightCells: !isRevert ? rightCells : leftCells,
-        };
-        // console.log('down cell', clientX, clientY, idx, direction, cell, cellRef);
-        gridRef.current = grid;
-    };
-    const handleDown = (e, type, line, idx, direction, cell, cellRef) => {
-        const { clientX, clientY } = e;
-        // rebaseCordinate(clientX, clientY, type, line);
-        startRef.current = { clientX, clientY, type, line };
-        // const isRevert = ['top', 'left'].includes(direction);
-        // const { leftCols, rightCols } = findResizeCells({ type, line, direction, idx, isRevert });
-        // console.log('change cell', leftCols, rightCols);
-        // 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;
-        lineVertical(false);
-        lineHorizontal(false);
-    };
-    const downSelect = (idx, cell) => {
-        // console.log('dow select', idx, cell);
-        if (isPreview)
-            return;
-        !cell.active && activeCell({ idx });
-        selectRef.current = { idx, cell };
-        gridRef.current = grid;
-    };
-    const unMerge = (cell, idx) => {
-        if (isPreview)
-            return;
-        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 })));
-    };
-    function resetBackgroundCellRef() {
-        Object.values(cellsRef.current).forEach(r => {
-            if (r.current) {
-                r.current.style.background = 'unset';
-            }
-        });
-    }
-    const upSelect = (idx, cell) => {
-        if (isPreview)
-            return;
-        // console.log('up select', idx, cell);
-        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)) {
-            resetBackgroundCellRef();
-            // console.log('merge', selectRef.current, selectEndRef.current)
-            const { cell: cellStart, idx: idxStart } = selectRef.current;
-            const { cell: cellEnd, idx: idxEnd, hCells } = selectEndRef.current;
-            const newChilds = JSON.parse(JSON.stringify(gridRef.current.childs));
-            newChilds[idxStart].rowEnd = cellEnd.rowEnd;
-            newChilds[idxStart].colEnd = cellEnd.colEnd;
-            delete newChilds[idxStart].sizeX;
-            delete newChilds[idxStart].sizeY;
-            hCells.reverse().forEach(i => {
-                if (i !== idxStart) {
-                    newChilds.splice(i, 1);
-                    delete cellsRef.current[i];
-                    delete cordinatesRef.current[i];
-                    // console.log('del corr', i, cordinatesRef.current)
-                }
-            });
-            setGrid(Object.assign(Object.assign({}, gridRef.current), { childs: newChilds }));
-        }
-        selectRef.current = null;
-        selectEndRef.current = null;
-    };
-    const hoverSelect = (idx, cell) => {
-        if (isPreview)
-            return;
-        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 = selectColor || 'unset';
-                }
-            });
-            selectEndRef.current = { cell, idx, hCells };
-            gridRef.current = grid;
-        }
-    };
-    const setRef = (idx, ref) => {
-        cellsRef.current[idx] = ref;
-        // console.log('cellsRef.current', cellsRef.current)
-    };
-    const setCordinate = (idx) => __awaiter(void 0, void 0, void 0, function* () {
-        // while(!cellsRef[idx]) {
-        //   await new Promise(r => {setTimeout(r, 100)});
-        //   console.log('wait', idx, cellsRef[idx])
-        // }
-        var _b;
-        if (containerRef.current) {
-            const container = containerRef.current.getBoundingClientRect();
-            const childRef = cellsRef.current[idx];
-            const childBox = (_b = childRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
-            if (childBox) {
-                const cordinate = {
-                    width: childBox.width,
-                    height: childBox.height,
-                    x: childBox.x - container.x,
-                    y: childBox.y - container.y,
-                    xEnd: childBox.x - container.x + childBox.width,
-                    yEnd: childBox.y - container.y + childBox.height,
-                };
-                cordinatesRef.current[idx] = cordinate;
-                // console.log('set cor', idx, cordinate);
-            }
-        }
-        // console.log('set corr', idx, cordinatesRef.current)
-    });
-    const renderGrid = (style) => {
-        const { gridTemplateColumns, gridTemplateRows, childs } = grid;
-        // console.log('grid', { gridTemplateColumns, gridTemplateRows, childs });
-        return (React.createElement("div", { className: "grid-container", ref: containerRef, style: Object.assign({ gridTemplateColumns: gridTemplateColumns.map(fr => `${fr}%`).join(' '), gridTemplateRows: gridTemplateRows.map(fr => `${fr}%`).join(' ') }, style) }, childs.map((cell, idx) => (React.createElement(Cell, { key: `${cell.rowStart}-${cell.colStart}-${cell.rowEnd}-${cell.colEnd}`, idx: idx, cell: cell, down: handleDown, downCell: handleDownCell, up: handleUp, setRef: setRef, setCordinate: setCordinate, downSelect: downSelect, upSelect: upSelect, hoverSelect: hoverSelect, unMerge: unMerge, renderCell: renderCell, borderStyle: cellBorder, style: cellStyle, activeStyle: cellActiveStyle, isPreview: isPreview, rowPercentage: grid.gridTemplateRows[cell.rowStart - 1], colPercentage: grid.gridTemplateColumns[cell.colStart - 1], ctrlKeyRef: ctrlKeyRef })))));
-    };
-    const handleUpLine = () => {
-        lineVertical(false);
-        lineHorizontal(false);
-    };
-    const _a = containerStyle || {}, { borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius, borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth, borderStyle, borderColor } = _a, rest = __rest(_a, ["borderTopLeftRadius", "borderTopRightRadius", "borderBottomRightRadius", "borderBottomLeftRadius", "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth", "borderStyle", "borderColor"]);
-    const renderLines = () => (React.createElement(React.Fragment, null,
-        React.createElement(StyledLine, { ref: verticalLineRef, className: "vertical", onMouseUp: handleUpLine }),
-        React.createElement(StyledLine, { ref: horizontalLineRef, className: "horizontal", onMouseUp: handleUpLine })));
-    return (React.createElement(StyledGrid, { className: "grid-wrapper", isCompact: !!isCompact },
-        React.createElement("div", { className: "layers", ref: layersRef },
-            React.createElement(StyledBGLayer, { style: {
-                    backgroundImage: image ? `url(${image})` : 'unset',
-                    backgroundSize: imageSize === 'fill' ? '100% 100%' : imageSize,
-                    backgroundPosition: imagePosition,
-                } }),
-            React.createElement(StyledMiddleLayer, { style: {
-                    borderTopLeftRadius,
-                    borderTopRightRadius,
-                    borderBottomRightRadius,
-                    borderBottomLeftRadius,
-                    borderTopWidth,
-                    borderRightWidth,
-                    borderBottomWidth,
-                    borderLeftWidth,
-                    borderStyle,
-                    borderColor,
-                } }),
-            renderGrid(Object.assign(Object.assign({}, rest), { borderTopLeftRadius,
-                borderTopRightRadius,
-                borderBottomRightRadius,
-                borderBottomLeftRadius }))),
-        renderLines()));
-};
-ResizeGrid.defaultProps = defaultProps;
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+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 React, { useState, useRef, useEffect } from 'react';
+import { Cell } from './components/Cell';
+import { GRID_TEMPLATE, MIN_SIZE, THREADHOLD, buildGrid } from './constant';
+import { StyledGrid, StyledMiddleLayer, StyledBGLayer, StyledLine } from './styled';
+import { useDeepCompareEffect } from '../../../hooks/useDeepCompareEffect';
+const defaultProps = {
+    containerStyle: {},
+    cellBorder: '1px dotted',
+    cellStyle: {},
+    cellActiveStyle: { background: '#2f79bf80' },
+    isPreview: false,
+    isCompact: false,
+    delayUpdate: 200,
+    selectColor: '#2f79bf80',
+};
+export const ResizeGrid = props => {
+    const { containerStyle, cellBorder, cellStyle, cellActiveStyle, isPreview, renderCell, grid: initGrid, image, imageSize, imagePosition, isCompact, onChange, delayUpdate, selectColor, reCalculateFlag, } = 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 verticalLineRef = useRef(null);
+    const horizontalLineRef = useRef(null);
+    const layersRef = useRef(null);
+    const cellsRef = useRef({});
+    const cordinatesRef = useRef({});
+    const onChangeTimoutRef = useRef();
+    const onChangeDelayRef = useRef();
+    const acceptUpdateRef = useRef(false);
+    const firstChangeRef = useRef(true);
+    const ctrlKeyRef = useRef(false);
+    const initRef = useRef(0);
+    const initDoneRef = useRef(false);
+    // console.log('grid', grid)
+    function lineVertical(isShow = true, left = 0) {
+        if (verticalLineRef.current && layersRef.current) {
+            verticalLineRef.current.style.display = isShow ? 'block' : 'none';
+            layersRef.current.style.opacity = isShow ? '.5' : '1';
+            verticalLineRef.current.style.left = `${left}px`;
+        }
+    }
+    function lineHorizontal(isShow = true, top = 0) {
+        if (horizontalLineRef.current && layersRef.current) {
+            horizontalLineRef.current.style.display = isShow ? 'block' : 'none';
+            layersRef.current.style.opacity = isShow ? '.5' : '1';
+            horizontalLineRef.current.style.top = `${top}px`;
+        }
+    }
+    const handleChangeGrid = () => {
+        clearTimeout(onChangeTimoutRef.current);
+        onChangeTimoutRef.current = setTimeout(() => {
+            if (containerRef.current && cellsRef.current && cellsRef.current[0]) {
+                const container = containerRef.current.getBoundingClientRect();
+                // Object.values(cordinatesRef.current);
+                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, firstChangeRef.current ? 'system' : 'user');
+                    acceptUpdateRef.current = false;
+                    firstChangeRef.current = false;
+                    clearTimeout(onChangeDelayRef.current);
+                    onChangeDelayRef.current = setTimeout(() => {
+                        acceptUpdateRef.current = true;
+                    }, delayUpdate);
+                }
+            }
+        }, 300);
+    };
+    const isFollow = (cell, line, isCol = true) => isCol
+        ? (cell.colEnd !== line || !cell.sizeX) && (cell.colStart !== line || !cell.sizeX)
+        : (cell.rowEnd !== line || !cell.sizeY) && (cell.rowStart !== line || !cell.sizeY);
+    const notFollow = (cell, line, isCol = true) => !isFollow(cell, line, isCol);
+    const floorSize = size => Math.floor(size);
+    useEffect(() => {
+        handleChangeGrid();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [grid, reCalculateFlag]);
+    useDeepCompareEffect(() => {
+        // console.log('changed grid', initGrid, acceptUpdateRef.current, initGrid?.rows, initGrid?.cols)
+        // console.log(initRef.current < 2,!initDoneRef.current, acceptUpdateRef.current)
+        if ((initRef.current < 2 || !initDoneRef.current || acceptUpdateRef.current) &&
+            (initGrid === null || initGrid === void 0 ? void 0 : initGrid.rows) &&
+            (initGrid === null || initGrid === void 0 ? void 0 : initGrid.cols)) {
+            // console.log('apply change...', buildGrid(initGrid))
+            initRef.current += 1;
+            firstChangeRef.current = true;
+            setGrid(buildGrid(initGrid));
+            resetBackgroundCellRef();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [initGrid]);
+    useEffect(() => {
+        setTimeout(() => {
+            initDoneRef.current = true;
+        }, 3000);
+        const handleMove = e => {
+            // Resize Grid
+            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, idx) => {
+                            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.sizeY = +child.sizeY - yDistant;
+                                    }
+                                }
+                                else {
+                                    child.transformY &&
+                                        !child.movedBottom &&
+                                        (child.sizeY = +child.sizeY + yDistant);
+                                }
+                                // console.log('check...', startRef.current.line, child.transformY, yDistant, +child.transformY - yDistant)
+                                if (child.sizeY < 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.sizeX = +child.sizeX - xDistant;
+                                    }
+                                }
+                                else {
+                                    child.transformX && !child.movedRight && (child.sizeX = +child.sizeX + xDistant);
+                                }
+                                // console.log('check...', startRef.current.line, child.transformX, xDistant, +child.transformX - xDistant)
+                                if (child.sizeX < MIN_SIZE) {
+                                    isValidChildSize = false;
+                                }
+                            }
+                        });
+                        isValidChildSize &&
+                            setGrid(Object.assign(Object.assign({}, gridRef.current), { gridTemplateColumns: newArr, childs: newChilds }));
+                    }
+                }
+            }
+            //-------------------------------------------
+            // Resize Cell
+            if (startCellRef.current && gridRef.current) {
+                const { clientX: startClientX, clientY: startClientY, direction, isRevert, leftCells, rightCells, } = 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;
+                    let yDistant = clientY - startClientY;
+                    // console.log('move Y', clientY, yDistant);
+                    if (Math.abs(yDistant) > THREADHOLD) {
+                        startCellRef.current.fallback = true;
+                    }
+                    let isValid = true;
+                    const mapNewSizeTop = {};
+                    const mapNewSizeBottom = {};
+                    const leftKeys = Object.keys(leftCells);
+                    leftKeys.forEach(cellIdx => {
+                        const cell = leftCells[cellIdx];
+                        let newHeight = (cell.sizeY || 0) + yDistant;
+                        if (newHeight < MIN_SIZE) {
+                            isValid = false;
+                        }
+                        else {
+                            const cellCordinate = cordinatesRef.current[cellIdx];
+                            // const cell = gridRef.current.childs[cellIdx];
+                            const newYEnd = cellCordinate.y + newHeight;
+                            const nearestCells = Object.entries(cordinatesRef.current).filter(cor => gridRef.current &&
+                                gridRef.current.childs[cor[0]] &&
+                                !leftKeys.includes(cor[0]) &&
+                                gridRef.current.childs[cor[0]].colStart !== cell.colStart &&
+                                Math.abs(cor[1].yEnd - newYEnd) <= THREADHOLD);
+                            // console.log('nearestCells', nearestCells, newXEnd, leftKeys, cordinatesRef.current);
+                            if (nearestCells.length && startCellRef.current) {
+                                const nearestY = Math.abs(nearestCells[0][1].y - newYEnd) <= THREADHOLD
+                                    ? nearestCells[0][1].y
+                                    : nearestCells[0][1].yEnd;
+                                const delta = nearestY - newYEnd;
+                                if (startCellRef.current.fallback ||
+                                    floorSize(cellCordinate.height) !== floorSize(newHeight + delta)) {
+                                    newHeight += delta;
+                                    yDistant += delta;
+                                    lineHorizontal(true, nearestY - 1);
+                                }
+                            }
+                            else {
+                                lineHorizontal(false);
+                            }
+                            mapNewSizeTop[cellIdx] = newHeight;
+                        }
+                    });
+                    Object.keys(rightCells).forEach(cellIdx => {
+                        const nextCell = rightCells[cellIdx];
+                        const newHeightNextCell = (nextCell.sizeY || 0) - yDistant;
+                        if (newHeightNextCell < MIN_SIZE) {
+                            isValid = false;
+                        }
+                        mapNewSizeBottom[cellIdx] = [newHeightNextCell, nextCell];
+                    });
+                    if (isValid) {
+                        const newChilds = [...gridRef.current.childs];
+                        Object.keys(mapNewSizeTop).forEach(cellIdx => {
+                            newChilds[cellIdx] = Object.assign(Object.assign({}, newChilds[cellIdx]), { sizeY: mapNewSizeTop[cellIdx], movedBottom: true });
+                        });
+                        Object.keys(mapNewSizeBottom).forEach(cellIdx => {
+                            newChilds[cellIdx] = Object.assign(Object.assign({}, newChilds[cellIdx]), { sizeY: mapNewSizeBottom[cellIdx][0], transformY: (mapNewSizeBottom[cellIdx][1].transformY || 0) + yDistant, movedTop: true });
+                        });
+                        setGrid(Object.assign(Object.assign({}, gridRef.current), { childs: newChilds }));
+                    }
+                }
+                else {
+                    // const cellWidth = cellRef.current.offsetWidth;
+                    let xDistant = clientX - startClientX;
+                    // console.log('move X', clientX, xDistant);
+                    if (Math.abs(xDistant) > THREADHOLD) {
+                        startCellRef.current.fallback = true;
+                    }
+                    let isValid = true;
+                    const mapNewSizeLeft = {};
+                    const mapNewSizeRight = {};
+                    const mapReset = {};
+                    const leftKeys = Object.keys(leftCells);
+                    leftKeys.forEach(cellIdx => {
+                        const cell = leftCells[cellIdx];
+                        let newWidth = (cell.sizeX || 0) + xDistant;
+                        if (newWidth < MIN_SIZE) {
+                            isValid = false;
+                        }
+                        else if (gridRef.current) {
+                            const cellCordinate = cordinatesRef.current[cellIdx];
+                            // const cell = gridRef.current.childs[cellIdx];
+                            const newXEnd = cellCordinate.x + newWidth;
+                            const nearestCells = Object.entries(cordinatesRef.current).filter(cor => gridRef.current &&
+                                gridRef.current.childs[cor[0]] &&
+                                !leftKeys.includes(cor[0]) &&
+                                gridRef.current.childs[cor[0]].rowStart !== cell.rowStart &&
+                                Math.abs(cor[1].xEnd - newXEnd) <= THREADHOLD);
+                            // console.log('nearestCells', nearestCells, newXEnd, leftKeys, cordinatesRef.current);
+                            if (nearestCells.length && startCellRef.current) {
+                                const nearestX = Math.abs(nearestCells[0][1].x - newXEnd) <= THREADHOLD
+                                    ? nearestCells[0][1].x
+                                    : nearestCells[0][1].xEnd;
+                                const delta = nearestX - newXEnd;
+                                if (startCellRef.current.fallback ||
+                                    floorSize(cellCordinate.width) !== floorSize(newWidth + delta)) {
+                                    newWidth += delta;
+                                    xDistant += delta;
+                                    lineVertical(true, nearestX - 1);
+                                }
+                            }
+                            else {
+                                lineVertical(false);
+                            }
+                            mapNewSizeLeft[cellIdx] = newWidth;
+                        }
+                    });
+                    Object.keys(rightCells).forEach(cellIdx => {
+                        const nextCell = rightCells[cellIdx];
+                        const newWidthNextCell = (nextCell.sizeX || 0) - xDistant;
+                        if (newWidthNextCell < MIN_SIZE) {
+                            isValid = false;
+                        }
+                        mapNewSizeRight[cellIdx] = [newWidthNextCell, nextCell];
+                    });
+                    if (isValid) {
+                        const newChilds = [...gridRef.current.childs];
+                        Object.keys(mapNewSizeLeft).forEach(cellIdx => {
+                            newChilds[cellIdx] = Object.assign(Object.assign({}, newChilds[cellIdx]), { sizeX: mapNewSizeLeft[cellIdx], movedRight: true });
+                        });
+                        Object.keys(mapNewSizeRight).forEach(cellIdx => {
+                            newChilds[cellIdx] = Object.assign(Object.assign({}, newChilds[cellIdx]), { sizeX: mapNewSizeRight[cellIdx][0], transformX: (mapNewSizeRight[cellIdx][1].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;
+            lineVertical(false);
+            lineHorizontal(false);
+        };
+        const isMac = () => navigator.platform.indexOf('Mac') >= 0;
+        window.addEventListener('mousemove', handleMove);
+        window.addEventListener('mouseup', handleUp);
+        const handleKeyDown = e => {
+            if (!ctrlKeyRef.current && ((isMac() && e.metaKey) || (!isMac() && e.key === 'Control'))) {
+                ctrlKeyRef.current = true;
+                // console.log('ctrlKeyRef', ctrlKeyRef.current);
+            }
+        };
+        const handleKeyUp = () => {
+            ctrlKeyRef.current = false;
+            // console.log('ctrlKeyRef', ctrlKeyRef.current);
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        window.addEventListener('keyup', handleKeyUp);
+        return () => {
+            window.removeEventListener('mousemove', handleMove);
+            window.removeEventListener('mouseup', handleUp);
+            window.removeEventListener('keydown', handleKeyDown);
+            window.removeEventListener('keyup', handleKeyUp);
+        };
+    }, []);
+    // const rebaseCordinate = (x, y, ...rest) => {
+    //   if (containerRef.current) {
+    //     const container = containerRef.current.getBoundingClientRect();
+    //     console.log('rebased', x - container.x, y - container.y, ...rest);
+    //   }
+    // };
+    const activeCell = ({ idx }) => {
+        setGrid(prev => (Object.assign(Object.assign({}, prev), { childs: prev.childs.map((c, i) => (Object.assign(Object.assign({}, c), { active: i === idx }))) })));
+    };
+    const findResizeCells = ({ type, line, direction, idx, 
+    // cell,
+    isRevert, leftCols = [], rightCols = [], dones = [], level = 0, }) => {
+        // left is current cell and right is the opposite
+        if (dones.includes(idx)) {
+            return null;
+        }
+        const { childs } = grid;
+        const cellBox = cordinatesRef.current[idx];
+        dones.push(idx);
+        if (level === 0 && !leftCols.length) {
+            leftCols.push(idx);
+        }
+        let isEnd = true;
+        if (type === 'column') {
+            childs.forEach((cell, i) => {
+                if (((direction === 'left' &&
+                    cell.colEnd === line &&
+                    Math.abs(cellBox.x - cordinatesRef.current[i].xEnd) < 1) ||
+                    (direction === 'right' &&
+                        cell.colStart === line &&
+                        Math.abs(cellBox.xEnd - cordinatesRef.current[i].x) < 1)) &&
+                    !(floorSize(cordinatesRef.current[i].y) >= floorSize(cellBox.yEnd) ||
+                        floorSize(cordinatesRef.current[i].yEnd) <= floorSize(cellBox.y))) {
+                    if (!rightCols.includes(i)) {
+                        rightCols.push(i);
+                        // const cellIRef = cellsRef.current[i];
+                        // if (cellIRef.current) {
+                        //   cellIRef.current.style.background = 'green';
+                        // }
+                        isEnd = false;
+                    }
+                    // else if (direction === 'right' && !leftCols.includes(i)) {
+                    //   leftCols.push(i);
+                    //   const cellIRef = cellsRef.current[i];
+                    //   if (cellIRef.current) {
+                    //     cellIRef.current.style.background = 'blue';
+                    //   }
+                    //   isEnd = false;
+                    // }
+                }
+            });
+        }
+        else {
+            childs.forEach((cell, i) => {
+                if (((direction === 'top' &&
+                    cell.rowEnd === line &&
+                    Math.abs(cellBox.y - cordinatesRef.current[i].yEnd) < 1) ||
+                    (direction === 'bottom' &&
+                        cell.rowStart === line &&
+                        Math.abs(cellBox.yEnd - cordinatesRef.current[i].y) < 1)) &&
+                    !(floorSize(cordinatesRef.current[i].x) >= floorSize(cellBox.xEnd) ||
+                        floorSize(cordinatesRef.current[i].xEnd) <= floorSize(cellBox.x))) {
+                    if (!rightCols.includes(i)) {
+                        rightCols.push(i);
+                        // const cellIRef = cellsRef.current[i];
+                        // if (cellIRef.current) {
+                        //   cellIRef.current.style.background = 'green';
+                        // }
+                        isEnd = false;
+                    }
+                    // else if (direction === 'bottom' && !leftCols.includes(i)) {
+                    //   leftCols.push(i);
+                    //   const cellIRef = cellsRef.current[i];
+                    //   if (cellIRef.current) {
+                    //     cellIRef.current.style.background = 'blue';
+                    //   }
+                    //   isEnd = false;
+                    // }
+                }
+            });
+        }
+        // console.log(' find', direction, idx, leftCols, rightCols, dones, cordinatesRef.current);
+        if (!isEnd) {
+            // console.log('continue find', leftCols, rightCols);
+            rightCols
+                .filter(i => !dones.includes(i))
+                .forEach(i => {
+                findResizeCells({
+                    type,
+                    line,
+                    direction: { left: 'right', right: 'left', top: 'bottom', bottom: 'top' }[direction] || '',
+                    idx: i,
+                    isRevert,
+                    leftCols: rightCols,
+                    rightCols: leftCols,
+                    dones,
+                    level: level + 1,
+                });
+            });
+        }
+        return { leftCols, rightCols };
+    };
+    const handleDownCell = (e, type, line, idx, direction, cell, cellRef) => {
+        const { clientX, clientY } = e;
+        // rebaseCordinate(clientX, clientY, type, line);
+        const isRevert = ['top', 'left'].includes(direction);
+        // let newIdx = isRevert ? idx - 1 : idx;
+        // let nextCellIdx = isRevert ? idx - 1 : idx + 1;
+        const leftCols = [idx];
+        const rightCols = [];
+        findResizeCells({ type, line, direction, idx, isRevert, leftCols, rightCols });
+        // console.log('change cell', leftCols, rightCols);
+        // 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;
+        if (!leftCols.length || !rightCols.length)
+            return;
+        const leftCells = {};
+        const rightCells = {};
+        leftCols.forEach(i => {
+            var _a, _b;
+            const cell = grid.childs[i];
+            const cellRef = cellsRef.current[i];
+            leftCells[i] = Object.assign({ sizeX: cell.sizeX || ((_a = cellRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0, sizeY: cell.sizeY || ((_b = cellRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight) || 0, transformX: cell.transformX || 0, transformY: cell.transformY || 0, idx: i, cellRef }, cell);
+        });
+        rightCols.forEach(i => {
+            var _a, _b;
+            const cell = grid.childs[i];
+            const cellRef = cellsRef.current[i];
+            rightCells[i] = Object.assign({ sizeX: cell.sizeX || ((_a = cellRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0, sizeY: cell.sizeY || ((_b = cellRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight) || 0, transformX: cell.transformX || 0, transformY: cell.transformY || 0, idx: i, cellRef }, cell);
+        });
+        const newDirection = isRevert
+            ? {
+                left: 'right',
+                right: 'left',
+                top: 'bottom',
+                bottom: 'top',
+            }[direction]
+            : direction;
+        startCellRef.current = {
+            clientX,
+            clientY,
+            // idx: newIdx,
+            direction: newDirection,
+            isRevert,
+            leftCells: isRevert ? rightCells : leftCells,
+            rightCells: !isRevert ? rightCells : leftCells,
+        };
+        // console.log('down cell', clientX, clientY, idx, direction, cell, cellRef);
+        gridRef.current = grid;
+    };
+    const handleDown = (e, type, line, idx, direction, cell, cellRef) => {
+        const { clientX, clientY } = e;
+        // rebaseCordinate(clientX, clientY, type, line);
+        startRef.current = { clientX, clientY, type, line };
+        // const isRevert = ['top', 'left'].includes(direction);
+        // const { leftCols, rightCols } = findResizeCells({ type, line, direction, idx, isRevert });
+        // console.log('change cell', leftCols, rightCols);
+        // 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;
+        lineVertical(false);
+        lineHorizontal(false);
+    };
+    const downSelect = (idx, cell) => {
+        // console.log('dow select', idx, cell);
+        if (isPreview)
+            return;
+        !cell.active && activeCell({ idx });
+        selectRef.current = { idx, cell };
+        gridRef.current = grid;
+    };
+    const unMerge = (cell, idx) => {
+        if (isPreview)
+            return;
+        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 })));
+    };
+    function resetBackgroundCellRef() {
+        Object.values(cellsRef.current).forEach(r => {
+            if (r.current) {
+                r.current.style.background = 'unset';
+            }
+        });
+    }
+    const upSelect = (idx, cell) => {
+        if (isPreview)
+            return;
+        // console.log('up select', idx, cell);
+        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)) {
+            resetBackgroundCellRef();
+            // console.log('merge', selectRef.current, selectEndRef.current)
+            const { cell: cellStart, idx: idxStart } = selectRef.current;
+            const { cell: cellEnd, idx: idxEnd, hCells } = selectEndRef.current;
+            const newChilds = JSON.parse(JSON.stringify(gridRef.current.childs));
+            newChilds[idxStart].rowEnd = cellEnd.rowEnd;
+            newChilds[idxStart].colEnd = cellEnd.colEnd;
+            delete newChilds[idxStart].sizeX;
+            delete newChilds[idxStart].sizeY;
+            hCells.reverse().forEach(i => {
+                if (i !== idxStart) {
+                    newChilds.splice(i, 1);
+                    delete cellsRef.current[i];
+                    delete cordinatesRef.current[i];
+                    // console.log('del corr', i, cordinatesRef.current)
+                }
+            });
+            setGrid(Object.assign(Object.assign({}, gridRef.current), { childs: newChilds }));
+        }
+        selectRef.current = null;
+        selectEndRef.current = null;
+    };
+    const hoverSelect = (idx, cell) => {
+        if (isPreview)
+            return;
+        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 = selectColor || 'unset';
+                }
+            });
+            selectEndRef.current = { cell, idx, hCells };
+            gridRef.current = grid;
+        }
+    };
+    const setRef = (idx, ref) => {
+        cellsRef.current[idx] = ref;
+        // console.log('cellsRef.current', cellsRef.current)
+    };
+    const setCordinate = (idx) => __awaiter(void 0, void 0, void 0, function* () {
+        // while(!cellsRef[idx]) {
+        //   await new Promise(r => {setTimeout(r, 100)});
+        //   console.log('wait', idx, cellsRef[idx])
+        // }
+        var _b;
+        if (containerRef.current) {
+            const container = containerRef.current.getBoundingClientRect();
+            const childRef = cellsRef.current[idx];
+            const childBox = (_b = childRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+            if (childBox) {
+                const cordinate = {
+                    width: childBox.width,
+                    height: childBox.height,
+                    x: childBox.x - container.x,
+                    y: childBox.y - container.y,
+                    xEnd: childBox.x - container.x + childBox.width,
+                    yEnd: childBox.y - container.y + childBox.height,
+                };
+                cordinatesRef.current[idx] = cordinate;
+                // console.log('set cor', idx, cordinate);
+            }
+        }
+        // console.log('set corr', idx, cordinatesRef.current)
+    });
+    const renderGrid = (style) => {
+        const { gridTemplateColumns, gridTemplateRows, childs } = grid;
+        // console.log('grid', { gridTemplateColumns, gridTemplateRows, childs });
+        return (React.createElement("div", { className: "grid-container", ref: containerRef, style: Object.assign({ gridTemplateColumns: gridTemplateColumns.map(fr => `${fr}%`).join(' '), gridTemplateRows: gridTemplateRows.map(fr => `${fr}%`).join(' ') }, style) }, childs.map((cell, idx) => (React.createElement(Cell, { key: `${cell.rowStart}-${cell.colStart}-${cell.rowEnd}-${cell.colEnd}`, idx: idx, cell: cell, down: handleDown, downCell: handleDownCell, up: handleUp, setRef: setRef, setCordinate: setCordinate, downSelect: downSelect, upSelect: upSelect, hoverSelect: hoverSelect, unMerge: unMerge, renderCell: renderCell, borderStyle: cellBorder, style: cellStyle, activeStyle: cellActiveStyle, isPreview: isPreview, rowPercentage: grid.gridTemplateRows[cell.rowStart - 1], colPercentage: grid.gridTemplateColumns[cell.colStart - 1], ctrlKeyRef: ctrlKeyRef })))));
+    };
+    const handleUpLine = () => {
+        lineVertical(false);
+        lineHorizontal(false);
+    };
+    const _a = containerStyle || {}, { borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius, borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth, borderStyle, borderColor } = _a, rest = __rest(_a, ["borderTopLeftRadius", "borderTopRightRadius", "borderBottomRightRadius", "borderBottomLeftRadius", "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth", "borderStyle", "borderColor"]);
+    const renderLines = () => (React.createElement(React.Fragment, null,
+        React.createElement(StyledLine, { ref: verticalLineRef, className: "vertical", onMouseUp: handleUpLine }),
+        React.createElement(StyledLine, { ref: horizontalLineRef, className: "horizontal", onMouseUp: handleUpLine })));
+    return (React.createElement(StyledGrid, { className: "grid-wrapper", isCompact: !!isCompact },
+        React.createElement("div", { className: "layers", ref: layersRef },
+            React.createElement(StyledBGLayer, { style: {
+                    backgroundImage: image ? `url(${image})` : 'unset',
+                    backgroundSize: imageSize === 'fill' ? '100% 100%' : imageSize,
+                    backgroundPosition: imagePosition,
+                } }),
+            React.createElement(StyledMiddleLayer, { style: {
+                    borderTopLeftRadius,
+                    borderTopRightRadius,
+                    borderBottomRightRadius,
+                    borderBottomLeftRadius,
+                    borderTopWidth,
+                    borderRightWidth,
+                    borderBottomWidth,
+                    borderLeftWidth,
+                    borderStyle,
+                    borderColor,
+                } }),
+            renderGrid(Object.assign(Object.assign({}, rest), { borderTopLeftRadius,
+                borderTopRightRadius,
+                borderBottomRightRadius,
+                borderBottomLeftRadius }))),
+        renderLines()));
+};
+ResizeGrid.defaultProps = defaultProps;