@antscorp/antsomi-ui 1.3.3-beta.30 → 1.3.3-beta.32

package/es/components/atoms/InputDynamic/InputDynamic.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { DisableShortLinkTypeProps } from './PopupShortLink';
 export type KeyTagType = 'shortlink' | 'shortlink_static';
 export type SelectedPropertiesProps = {
@@ -16,7 +17,7 @@ export type InputDynamicProps = {
     addMessageToQueue?: Function;
 };
 export declare const InputDynamic: {
-    (props: InputDynamicProps): JSX.Element;
+    (props: InputDynamicProps): React.JSX.Element;
     defaultProps: {
         value: string;
         isViewMode: boolean;

package/es/components/atoms/InputDynamic/styled.d.ts

@@ -4,7 +4,7 @@ export declare const SpanIcon: import("styled-components").StyledComponent<"span
     isDisabled?: boolean | undefined;
 }, never>;
 export declare const InputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const InputShortLink: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof JSX.IntrinsicElements, any, import("../Input/Input").InputProps, any>;
+export declare const InputShortLink: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, import("../Input/Input").InputProps, any>;
 export declare const TooltipHover: import("styled-components").StyledComponent<"div", any, {
     top: number;
     left: number;

package/es/components/atoms/InputDynamic/styled.js

@@ -257,7 +257,9 @@ export const TooltipHover = styled.div `
   left: ${props => `${props.left}px`};
   top: ${props => `${props.top}px`};
 
-  display: ${props => (props.isShow ? 'block' : 'none')};
+  display: ${props => (props.isShow ? 'flex' : 'none')};
+  justify-content: center;
+  align-items: center;
 
   background: rgba(0, 0, 0, 0.62);
   transition: opacity 186ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,

package/es/components/atoms/Spin/Spin.d.ts

@@ -1,9 +1,10 @@
+import React from 'react';
 import { SpinProps as AntdSpinProps } from 'antd';
 export interface TSpinProps extends AntdSpinProps {
     indicatorSize?: number;
     children?: any;
 }
 export declare const Spin: {
-    (props: TSpinProps): JSX.Element;
+    (props: TSpinProps): React.JSX.Element;
     defaultProps: {};
 };

package/es/components/common/ConfigProvider/GlobalStyle.js

@@ -504,10 +504,10 @@ export const GlobalStyle = () => {
           }
         }
         .antsomi-modal-footer {
-          padding: 15px;
+          padding: 15px !important;
           text-align: right;
           background: transparent;
-          border-top: 1px solid #f0f0f0;
+          border-top: 1px solid #f0f0f0 !important;
           border-radius: 0 0 2px 2px;
         }
       }

package/es/components/icons/ArrowGrowIcon.d.ts

@@ -1 +1,2 @@
-export declare const ArrowGrowIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const ArrowGrowIcon: (props: any) => React.JSX.Element;

package/es/components/icons/AudioRecordIcon.d.ts

@@ -1 +1,2 @@
-export declare const AudioRecordIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const AudioRecordIcon: (props: any) => React.JSX.Element;

package/es/components/icons/BugIcon.d.ts

@@ -1 +1,2 @@
-export declare const BugIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const BugIcon: (props: any) => React.JSX.Element;

package/es/components/icons/CameraIcon.d.ts

@@ -1 +1,2 @@
-export declare const CameraIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const CameraIcon: (props: any) => React.JSX.Element;

package/es/components/icons/CaptureIcon.d.ts

@@ -1 +1,2 @@
-export declare const CaptureIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const CaptureIcon: (props: any) => React.JSX.Element;

package/es/components/icons/CheckSlimIcon.d.ts

@@ -1 +1,2 @@
-export declare const CheckSlimIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const CheckSlimIcon: (props: any) => React.JSX.Element;

package/es/components/icons/CloseIcon.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export declare const CloseIcon: ({ ...props }: {
     [x: string]: any;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/es/components/icons/CommentIcon.d.ts

@@ -1 +1,2 @@
-export declare const CommentIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const CommentIcon: (props: any) => React.JSX.Element;

package/es/components/icons/EventIcon.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export declare const EventIcon: ({ ...props }: {
     [x: string]: any;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/es/components/icons/FreeDrawIcon.d.ts

@@ -1 +1,2 @@
-export declare const FreeDrawIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const FreeDrawIcon: (props: any) => React.JSX.Element;

package/es/components/icons/GPTIcon.d.ts

@@ -1 +1,2 @@
-export declare const GPTIcon: () => JSX.Element;
+import React from 'react';
+export declare const GPTIcon: () => React.JSX.Element;

package/es/components/icons/GPTIconV2.d.ts

@@ -1 +1,2 @@
-export declare const GPTIconV2: () => JSX.Element;
+import React from 'react';
+export declare const GPTIconV2: () => React.JSX.Element;

package/es/components/icons/GPTIconV3.d.ts

@@ -1 +1,2 @@
-export declare const GPTIconV3: (props: any) => JSX.Element;
+import React from 'react';
+export declare const GPTIconV3: (props: any) => React.JSX.Element;

package/es/components/icons/HighlightIcon.d.ts

@@ -1 +1,2 @@
-export declare const HighlightIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const HighlightIcon: (props: any) => React.JSX.Element;

package/es/components/icons/IdeaIcon.d.ts

@@ -1 +1,2 @@
-export declare const IdeaIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const IdeaIcon: (props: any) => React.JSX.Element;

package/es/components/icons/InvisibleIcon.d.ts

@@ -1 +1,2 @@
-export declare const InvisibleIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const InvisibleIcon: (props: any) => React.JSX.Element;

package/es/components/icons/MuteIcon.d.ts

@@ -1 +1,2 @@
-export declare const MuteIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const MuteIcon: (props: any) => React.JSX.Element;

package/es/components/icons/OpenUrlIcon.d.ts

@@ -1 +1,2 @@
-export declare const OpenUrlIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const OpenUrlIcon: (props: any) => React.JSX.Element;

package/es/components/icons/PauseIcon.d.ts

@@ -1 +1,2 @@
-export declare const PauseIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const PauseIcon: (props: any) => React.JSX.Element;

package/es/components/icons/PlaneIcon.d.ts

@@ -1 +1,2 @@
-export declare const PlaneIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const PlaneIcon: (props: any) => React.JSX.Element;

package/es/components/icons/RequestIcon.d.ts

@@ -1 +1,2 @@
-export declare const RequestIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const RequestIcon: (props: any) => React.JSX.Element;

package/es/components/icons/StopRecordIcon.d.ts

@@ -1 +1,2 @@
-export declare const StopRecordIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const StopRecordIcon: (props: any) => React.JSX.Element;

package/es/components/icons/UserIcon.d.ts

@@ -1 +1,2 @@
-export declare const UserIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const UserIcon: (props: any) => React.JSX.Element;

package/es/components/icons/VerticalDotsIcon.d.ts

@@ -1 +1,2 @@
-export declare const VerticalDotsIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const VerticalDotsIcon: (props: any) => React.JSX.Element;

package/es/components/icons/WarningIcon.d.ts

@@ -1 +1,2 @@
-export declare const WarningIcon: (props: any) => JSX.Element;
+import React from 'react';
+export declare const WarningIcon: (props: any) => React.JSX.Element;

package/es/components/molecules/CaptureScreen/CaptureScreen.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 import { IImageEditorProps } from './types';
 declare const CaptureScreen: {
-    (props: IImageEditorProps): JSX.Element;
+    (props: IImageEditorProps): React.JSX.Element;
     defaultProps: {
         isOpen: boolean;
         src: string;

package/es/components/molecules/CaptureScreen/components/CommentBox/CommentBox.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 import { CommentBoxProps } from './types';
 declare const CommentBox: {
-    (props: CommentBoxProps): JSX.Element;
+    (props: CommentBoxProps): React.JSX.Element;
     defaultProps: {
         info: {
             id: string;

package/es/components/molecules/CaptureScreen/components/Cursor/Cursor.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { CursorProps } from './types';
-declare const Cursor: (props: CursorProps) => JSX.Element | null;
+declare const Cursor: (props: CursorProps) => React.JSX.Element | null;
 export { Cursor };

package/es/components/molecules/Modal/styled.d.ts

@@ -10,6 +10,6 @@ export declare const StyledModal: import("styled-components").StyledComponent<im
     useModal: typeof import("antd/es/modal/useModal").default;
     destroyAll: () => void;
     config: typeof import("antd/es/modal/confirm").modalGlobalConfig;
-    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/modal/PurePanel").PurePanelProps) => React.JSX.Element;
+    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/modal/PurePanel").PurePanelProps) => import("react").JSX.Element;
 }, any, CustomModalProps, never>;
 export declare const WrapperSpin: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/molecules/ModalV2/styled.d.ts

@@ -3,5 +3,5 @@ export declare const StyledModal: import("styled-components").StyledComponent<im
     useModal: typeof import("antd/es/modal/useModal").default;
     destroyAll: () => void;
     config: typeof import("antd/es/modal/confirm").modalGlobalConfig;
-    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/modal/PurePanel").PurePanelProps) => React.JSX.Element;
+    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/modal/PurePanel").PurePanelProps) => import("react").JSX.Element;
 }, any, {}, never>;

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

@@ -28,13 +28,13 @@ const defaultProps = {
     cellBorder: '1px dotted',
     cellStyle: {},
     cellActiveStyle: { background: '#2f79bf80' },
-    isPreviewMode: false,
+    isPreview: false,
     isCompact: false,
     delayUpdate: 100,
     selectColor: '#2f79bf80',
 };
 export const ResizeGrid = props => {
-    const { containerStyle, cellBorder, cellStyle, cellActiveStyle, isPreviewMode, renderCell, grid: initGrid, image, imageSize, imagePosition, isCompact, onChange, delayUpdate, selectColor, } = props;
+    const { containerStyle, cellBorder, cellStyle, cellActiveStyle, isPreview, renderCell, grid: initGrid, image, imageSize, imagePosition, isCompact, onChange, delayUpdate, selectColor, } = props;
     const [grid, setGrid] = useState(buildGrid(initGrid || GRID_TEMPLATE.GRID_2_3));
     const startRef = useRef(null);
     const startCellRef = useRef(null);
@@ -44,13 +44,29 @@ export const ResizeGrid = props => {
     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);
     // 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(() => {
@@ -69,8 +85,9 @@ export const ResizeGrid = props => {
                     };
                 });
                 if (typeof onChange === 'function') {
-                    onChange(grid, childs);
+                    onChange(grid, childs, firstChangeRef.current ? 'system' : 'user');
                     acceptUpdateRef.current = false;
+                    firstChangeRef.current = false;
                     clearTimeout(onChangeDelayRef.current);
                     onChangeDelayRef.current = setTimeout(() => {
                         acceptUpdateRef.current = true;
@@ -83,6 +100,7 @@ export const ResizeGrid = props => {
         ? (cell.colEnd !== line || !cell.width) && (cell.colStart !== line || !cell.width)
         : (cell.rowEnd !== line || !cell.height) && (cell.rowStart !== line || !cell.height);
     const notFollow = (cell, line, isCol = true) => !isFollow(cell, line, isCol);
+    const floorSize = size => Math.floor(size);
     useEffect(() => {
         handleChangeGrid();
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -128,7 +146,9 @@ export const ResizeGrid = props => {
                                     }
                                 }
                                 else {
-                                    child.transformY && !child.movedBottom && (child.height = +child.height + yDistant);
+                                    child.transformY &&
+                                        !child.movedBottom &&
+                                        (child.height = +child.height + yDistant);
                                 }
                                 // console.log('check...', startRef.current.line, child.transformY, yDistant, +child.transformY - yDistant)
                                 if (child.height < MIN_SIZE) {
@@ -193,18 +213,48 @@ export const ResizeGrid = props => {
                 const { clientX, clientY } = e;
                 if (['top', 'bottom'].includes(direction)) {
                     // const cellHeight = cellRef.current.offsetHeight;
-                    const yDistant = clientY - startClientY;
+                    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 = {};
-                    Object.keys(leftCells).forEach(cellIdx => {
+                    const leftKeys = Object.keys(leftCells);
+                    leftKeys.forEach(cellIdx => {
                         const cell = leftCells[cellIdx];
-                        const newHeight = (cell.height || 0) + yDistant;
+                        let newHeight = (cell.height || 0) + yDistant;
                         if (newHeight < MIN_SIZE) {
                             isValid = false;
                         }
-                        mapNewSizeTop[cellIdx] = newHeight;
+                        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];
@@ -227,15 +277,19 @@ export const ResizeGrid = props => {
                 }
                 else {
                     // const cellWidth = cellRef.current.offsetWidth;
-                    const xDistant = clientX - startClientX;
+                    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];
-                        const newWidth = (cell.width || 0) + xDistant;
+                        let newWidth = (cell.width || 0) + xDistant;
                         if (newWidth < MIN_SIZE) {
                             isValid = false;
                         }
@@ -244,20 +298,26 @@ export const ResizeGrid = props => {
                             // 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].x - newXEnd) <= THREADHOLD ||
-                                    Math.abs(cor[1].xEnd - newXEnd) <= THREADHOLD));
+                                Math.abs(cor[1].xEnd - newXEnd) <= THREADHOLD);
                             // console.log('nearestCells', nearestCells, newXEnd, leftKeys, cordinatesRef.current);
-                            // if (nearestCells.length) {
-                            //   const nearestX =
-                            //     Math.abs(nearestCells[0][1].x - newXEnd) <= THREADHOLD
-                            //       ? nearestCells[0][1].x
-                            //       : nearestCells[0][1].xEnd;
-                            //   lineVertical(true, nearestX);
-                            // } else {
-                            //   lineVertical(false);
-                            // }
+                            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;
                         }
                     });
@@ -287,6 +347,8 @@ export const ResizeGrid = props => {
         const handleUp = () => {
             startRef.current = null;
             startCellRef.current = null;
+            lineVertical(false);
+            lineHorizontal(false);
         };
         const isMac = () => navigator.platform.indexOf('Mac') >= 0;
         window.addEventListener('mousemove', handleMove);
@@ -319,7 +381,6 @@ export const ResizeGrid = props => {
     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 floorSize = size => Math.floor(size);
     const findResizeCells = ({ type, line, direction, idx, 
     // cell,
     isRevert, leftCols = [], rightCols = [], dones = [], level = 0, }) => {
@@ -474,6 +535,8 @@ export const ResizeGrid = props => {
         // 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);
@@ -542,6 +605,7 @@ export const ResizeGrid = props => {
                     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 }));
@@ -579,12 +643,11 @@ export const ResizeGrid = props => {
         // console.log('cellsRef.current', cellsRef.current)
     };
     const setCordinate = (idx) => __awaiter(void 0, void 0, void 0, function* () {
-        var _b;
         // while(!cellsRef[idx]) {
         //   await new Promise(r => {setTimeout(r, 100)});
         //   console.log('wait', idx, cellsRef[idx])
         // }
-        // console.log('set corr', idx, cellsRef.current[idx], cellsRef)
+        var _b;
         if (containerRef.current) {
             const container = containerRef.current.getBoundingClientRect();
             const childRef = cellsRef.current[idx];
@@ -602,39 +665,44 @@ export const ResizeGrid = props => {
                 // 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, isPreviewMode: isPreviewMode, rowPercentage: grid.gridTemplateRows[cell.rowStart - 1], colPercentage: grid.gridTemplateColumns[cell.colStart - 1], ctrlKeyRef: ctrlKeyRef })))));
+        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 })))));
     };
-    function lineVertical(isShow = true, left = 0) {
-        if (verticalLineRef.current) {
-            verticalLineRef.current.style.display = isShow ? 'block' : 'none';
-            if (isShow) {
-                verticalLineRef.current.style.left = `${left}px`;
-            }
-        }
-    }
-    function lineHorizontal(isShow = true, top = 0) {
-        if (horizontalLineRef.current) {
-            horizontalLineRef.current.style.display = isShow ? 'block' : 'none';
-            if (isShow) {
-                horizontalLineRef.current.style.top = `${top}px`;
-            }
-        }
-    }
-    const _a = containerStyle || {}, { border, borderTop, borderRight, borderBottom, borderLeft } = _a, rest = __rest(_a, ["border", "borderTop", "borderRight", "borderBottom", "borderLeft"]);
+    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" }),
-        React.createElement(StyledLine, { ref: horizontalLineRef, className: "horizontal" })));
+        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(StyledBGLayer, { style: {
-                backgroundImage: image ? `url(${image})` : 'unset',
-                backgroundSize: imageSize === 'fill' ? '100% 100%' : imageSize,
-                backgroundPosition: imagePosition,
-            } }),
-        React.createElement(StyledMiddleLayer, { style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (border && { border })), (borderTop && { borderTop })), (borderRight && { borderRight })), (borderBottom && { borderBottom })), (borderLeft && { borderLeft })) }),
-        renderGrid(rest)));
+        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;

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

@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from 'react';
 import { buildGridArea, buildTranform } from '../../constant';
 import { StyledCell } from './styled';
 import { useDeepCompareEffect } from '../../../../../hooks/useDeepCompareEffect';
-export const Cell = ({ cell, idx, down, downCell, up, setRef, downSelect, upSelect, hoverSelect, unMerge, renderCell, style, isPreviewMode, borderStyle, activeStyle, activeCell, setCordinate, rowPercentage, colPercentage, ctrlKeyRef, }) => {
+export const Cell = ({ cell, idx, down, downCell, up, setRef, downSelect, upSelect, hoverSelect, unMerge, renderCell, style, isPreview, borderStyle, activeStyle, activeCell, setCordinate, rowPercentage, colPercentage, ctrlKeyRef, }) => {
     const { objectFit, image } = cell;
     const downRef = useRef(false);
     const timeoutRef = useRef();
@@ -80,6 +80,7 @@ export const Cell = ({ cell, idx, down, downCell, up, setRef, downSelect, upSele
         React.createElement("div", { className: "cell-border", style: {
                 borderTop: cell.rowStart === 1 ? borderStyle : 'unset',
                 borderLeft: cell.colStart === 1 ? borderStyle : 'unset',
+                display: isPreview ? 'none' : 'block',
             } }),
         ['top', 'right', 'bottom', 'left'].map(direction => (React.createElement("div", { key: direction, className: `resize-${direction}`, onMouseDown: e => handleDown(e, direction, idx), onMouseUp: e => handleUp(e, direction, idx) })))));
 };

package/es/components/molecules/ResizeGrid/constant.d.ts

@@ -31,5 +31,5 @@ export declare const buildGrid: (inputGrid: Partial<TGrid>) => TGrid;
 export declare const buildGridArea: (box: any) => string;
 export declare const buildTranform: (box: any) => string;
 export declare const MIN_SIZE = 32;
-export declare const THREADHOLD = 3;
+export declare const THREADHOLD = 5;
 export declare const getSafety: (fn: any, defaultValue?: string) => any;

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

@@ -100,7 +100,7 @@ export const buildTranform = box => {
     return 'unset';
 };
 export const MIN_SIZE = 32;
-export const THREADHOLD = 3;
+export const THREADHOLD = 5;
 export const getSafety = (fn, defaultValue = '') => {
     try {
         return fn();

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

@@ -45,6 +45,7 @@ export const StyledLine = styled.div `
   top: -1px;
   left: -1px;
   background: red;
+  display: none;
 
   &.vertical {
     width: 1px;