@antscorp/antsomi-ui 1.3.4 → 1.3.5-alpha.1

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

@@ -0,0 +1,749 @@
+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',
+    allowActive: true,
+};
+export const ResizeGrid = props => {
+    const { containerStyle, cellBorder, cellStyle, cellActiveStyle, isPreview, renderCell, grid: initGrid, image, imageSize, imagePosition, isCompact, onChange, delayUpdate, selectColor, reCalculateFlag, allowActive, } = 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);
+    const cachedMergeCellRef = useRef({});
+    // 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);
+    useDeepCompareEffect(() => {
+        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];
+        const insertArr = [];
+        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;
+                const insertIdx = cachedMergeCellRef.current[`${rStart}-${cStart}`] || idx;
+                // 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] = Object.assign(Object.assign({}, newChilds[idx]), newChild);
+                }
+                else if (rStart !== rowStart ||
+                    rEnd !== rowEnd ||
+                    cStart !== colStart ||
+                    cEnd !== colEnd) {
+                    insertArr.push({ idx: insertIdx, cell: newChild });
+                }
+            }
+        }
+        insertArr.sort((a, b) => a.idx - b.idx);
+        insertArr.forEach(({ idx, cell }) => {
+            newChilds.splice(idx, 0, cell);
+        });
+        setGrid(prev => (Object.assign(Object.assign({}, prev), { childs: newChilds })));
+    };
+    function resetBackgroundCellRef() {
+        Object.entries(cellsRef.current).forEach(([idx, r]) => {
+            if (r.current && grid.childs[idx] && !grid.childs[idx].active) {
+                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) {
+                    const deleteChild = newChilds[i];
+                    cachedMergeCellRef.current[`${deleteChild.rowStart}-${deleteChild.colStart}`] = i;
+                    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 }));
+        }
+        else {
+            if (!isPreview) {
+                !cell.active && activeCell({ idx });
+                // cellsRef.current[idx]?.style.background = cellActiveStyle?.background;
+            }
+        }
+        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, allowActive: allowActive })))));
+    };
+    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;