@antscorp/antsomi-ui 1.3.5-beta.26 → 1.3.5-beta.261

package/es/components/molecules/ImageEditor/reducer.js

@@ -0,0 +1,51 @@
+import { IMAGE_COORDINATE } from './constants';
+const initialState = {
+    scribbles: [],
+    rectangles: [],
+    arrows: [],
+    circles: [],
+    image: undefined,
+    imageCoordinate: IMAGE_COORDINATE,
+};
+export const initialReducer = {
+    history: [initialState],
+    historyStep: 0,
+    current: initialState,
+};
+export const reducer = (state, action) => {
+    const { type, payload } = action;
+    switch (type) {
+        case 'SET_SCRIBBLES':
+        case 'SET_RECTANGLES':
+        case 'SET_CIRCLES':
+        case 'SET_ARROWS':
+        case 'SET_IMAGE':
+        case 'SET_IMAGE_COORDINATE':
+        case 'SET_NEW_STATE': {
+            const newHistoryStep = state.historyStep + 1;
+            const newState = Object.assign(Object.assign({}, state.current), payload);
+            return Object.assign(Object.assign({}, state), { history: payload.saveHistory
+                    ? state.history.slice(0, newHistoryStep).concat([newState])
+                    : state.history, historyStep: payload.saveHistory ? newHistoryStep : state.historyStep, current: newState });
+        }
+        case 'SAVE_HISTORY': {
+            return Object.assign(Object.assign({}, state), { historyStep: state.historyStep + 1, history: state.history.slice(0, state.historyStep + 1).concat([state.current]) });
+            break;
+        }
+        case 'UNDO': {
+            if (state.historyStep === 0) {
+                return state;
+            }
+            return Object.assign(Object.assign({}, state), { historyStep: state.historyStep - 1, current: state.history[state.historyStep - 1] });
+        }
+        case 'REDO': {
+            if (state.historyStep === state.history.length - 1) {
+                return state;
+            }
+            return Object.assign(Object.assign({}, state), { historyStep: state.historyStep + 1, current: state.history[state.historyStep + 1] });
+        }
+        default:
+            break;
+    }
+    return state;
+};

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const IconButtonStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
+    Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
+}, any, {}, never>;

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

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import { Button } from '../../atoms';
+export const IconButtonStyled = styled(Button) `
+  &.antsomi-btn-default.antsomi-btn-icon-only {
+    width: 30px !important;
+    height: 30px !important;
+  }
+`;

package/es/components/molecules/ImageEditor/types.d.ts

@@ -0,0 +1,35 @@
+export type Shape = {
+    id: string;
+    color: string;
+    x?: number;
+    y?: number;
+    rotation: number;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+};
+export type Rectangle = Shape & {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+};
+export type Circle = Shape & {
+    radius: number;
+    x: number;
+    y: number;
+};
+export type Scribble = Shape & {
+    points: number[];
+};
+export type Arrow = Shape & {
+    points: [number, number, number, number];
+};
+export type CropZone = {
+    id: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};

package/es/components/molecules/ImageEditor/types.js

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

package/es/components/molecules/ImageEditor/utils.d.ts

@@ -0,0 +1,23 @@
+import { KonvaEventObject } from 'konva/lib/Node';
+/**
+ * Creates a link with the specified URI and name, triggers a download, and removes the link from the document.
+ *
+ * @param {string | undefined} uri - The URI to download from.
+ * @param {string} name - The name to save the file as.
+ */
+export declare const downloadURI: (uri: string | undefined, name: string) => void;
+/**
+ * Returns an object with specific transformation data extracted from the Konva event object.
+ *
+ * @param e - The Konva event object containing transformation data.
+ * @return An object with x, y, rotation, scaleX, scaleY, skewX, and skewY properties.
+ */
+export declare const getTransformData: (e: KonvaEventObject<Event>) => {
+    x: any;
+    y: any;
+    rotation: any;
+    scaleX: any;
+    scaleY: any;
+    skewX: any;
+    skewY: any;
+};

package/es/components/molecules/ImageEditor/utils.js

@@ -0,0 +1,29 @@
+/**
+ * Creates a link with the specified URI and name, triggers a download, and removes the link from the document.
+ *
+ * @param {string | undefined} uri - The URI to download from.
+ * @param {string} name - The name to save the file as.
+ */
+export const downloadURI = (uri, name) => {
+    const link = document.createElement('a');
+    link.download = name;
+    link.href = uri || '';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+};
+/**
+ * Returns an object with specific transformation data extracted from the Konva event object.
+ *
+ * @param e - The Konva event object containing transformation data.
+ * @return An object with x, y, rotation, scaleX, scaleY, skewX, and skewY properties.
+ */
+export const getTransformData = (e) => ({
+    x: e.target.attrs.x,
+    y: e.target.attrs.y,
+    rotation: e.target.attrs.rotation,
+    scaleX: e.target.attrs.scaleX,
+    scaleY: e.target.attrs.scaleY,
+    skewX: e.target.attrs.skewX,
+    skewY: e.target.attrs.skewY,
+});

package/es/components/molecules/Modal/Modal.js

@@ -7,10 +7,12 @@ import { StyledModal, WrapperSpin } from './styled';
 export const OriginalModal = memo(props => {
     // Props
     const { loading } = props;
-    return (React.createElement(StyledModal, Object.assign({}, Object.assign(Object.assign({ closeIcon: React.createElement(Icon, { disabled: loading, type: "icon-ants-remove-slim", size: 15 }), footer: (React.createElement(React.Fragment, null,
+    return (React.createElement(StyledModal, Object.assign({ closeIcon: React.createElement(Icon, { disabled: loading, type: "icon-ants-remove-slim", size: 15 }),
+        footer: (React.createElement(React.Fragment, null,
             React.createElement(Button, Object.assign({ type: "primary", onClick: props.onOk }, props.okButtonProps), props.okText ? props.okText : 'OK'),
-            React.createElement(Button, Object.assign({ onClick: props.onCancel }, props.cancelButtonProps), props.cancelText ? props.cancelText : 'Cancel'))), modalRender: node => loading ? (React.createElement(WrapperSpin, null,
-            React.createElement(Spin, { spinning: loading }, node))) : (node) }, props), { maskClosable: loading ? false : props.maskClosable })),
+            React.createElement(Button, Object.assign({ onClick: props.onCancel }, props.cancelButtonProps), props.cancelText ? props.cancelText : 'Cancel'))),
+        modalRender: node => loading ? (React.createElement(WrapperSpin, null,
+            React.createElement(Spin, { spinning: loading }, node))) : (node) }, props, { maskClosable: loading ? false : props.maskClosable }),
         props.header || null,
         props.children || null));
 });

package/es/components/molecules/ModalSelect/Card.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { CardProps } from 'antd';
+import { CardDefinationProps, CardRecommendedProps } from './types';
+export declare const Card: (props: CardProps) => React.JSX.Element;
+export declare const CardDefination: (props: CardDefinationProps) => React.JSX.Element;
+export declare const CardRecommended: (props: CardRecommendedProps) => React.JSX.Element;

package/es/components/molecules/ModalSelect/Card.js

@@ -0,0 +1,41 @@
+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 from 'react';
+import { CardDefinationContainer, CardRecommendedContainer, RecommendItem, StyledCard, } from './styled';
+import { Typography } from 'antd';
+import clsx from 'clsx';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+const { Text, Paragraph } = Typography;
+export const Card = (props) => {
+    const { children, bordered = false } = props, rest = __rest(props, ["children", "bordered"]);
+    return (React.createElement(StyledCard, Object.assign({ bordered: bordered }, rest), children));
+};
+export const CardDefination = (props) => {
+    const { title, description, descriptionEllipsis = {
+        rows: 3,
+        symbol: 'Learn more',
+        expandable: true,
+        tooltip: true,
+    }, } = props;
+    return (React.createElement(CardDefinationContainer, null,
+        title && React.createElement(Text, { className: "title" }, title),
+        description && (React.createElement(Paragraph, { ellipsis: descriptionEllipsis, className: "description" }, description))));
+};
+export const CardRecommended = (props) => {
+    const { title, recomendations = [] } = props;
+    return (React.createElement(CardRecommendedContainer, null,
+        title && React.createElement(Text, { className: "title" }, title),
+        React.createElement("div", { className: "recomendations" }, recomendations.map(i => {
+            const { className, color = globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue2, bordered = false } = i;
+            return (React.createElement(RecommendItem, Object.assign({}, i, { key: i.key, color: color, bordered: bordered, className: clsx('item', className) })));
+        }))));
+};

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ModalSelectProps } from './types';
+export declare const ModalSelect: (props: ModalSelectProps) => React.JSX.Element;

package/es/components/molecules/ModalSelect/ModalSelect.js

@@ -0,0 +1,55 @@
+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, { useCallback, useEffect, useState } from 'react';
+import { Menu } from 'antd';
+import { StyledModal } from './styled';
+import { isFunction } from 'lodash';
+export const ModalSelect = (props) => {
+    const { value, content, options = [], okButtonProps = {}, cancelButtonProps = {}, title, open: openProp, menuRef: menuRefProp, onChange, onOk } = props, rest = __rest(props, ["value", "content", "options", "okButtonProps", "cancelButtonProps", "title", "open", "menuRef", "onChange", "onOk"]);
+    const [selected, setSelected] = useState(null);
+    const [open, setOpen] = useState(false);
+    const handleSetMenuRef = useCallback((ref) => {
+        var _a;
+        if (!((_a = ref === null || ref === void 0 ? void 0 : ref.menu) === null || _a === void 0 ? void 0 : _a.list))
+            return;
+        if (menuRefProp) {
+            menuRefProp(ref.menu.list);
+        }
+    }, [menuRefProp]);
+    useEffect(() => {
+        if (value === undefined)
+            return;
+        setSelected(value);
+    }, [value]);
+    useEffect(() => {
+        if (openProp === undefined)
+            return;
+        setOpen(openProp);
+    }, [openProp]);
+    const renderContent = () => {
+        if (!isFunction(content))
+            return null;
+        return content(selected || null);
+    };
+    const handleClickItem = (key) => {
+        setSelected(key);
+        if (onChange)
+            onChange(key);
+    };
+    const handleOk = (e) => {
+        if (onOk)
+            onOk(e, selected);
+    };
+    return (React.createElement(StyledModal, Object.assign({}, rest, { open: open, onOk: handleOk, okButtonProps: Object.assign(Object.assign({}, okButtonProps), { className: `${okButtonProps.className} ok-btn` }), cancelButtonProps: Object.assign(Object.assign({}, cancelButtonProps), { className: `${cancelButtonProps.className} cancel-btn` }), title: title || 'Select' }),
+        React.createElement(Menu, { ref: handleSetMenuRef, items: options, selectedKeys: [selected || ''], onClick: info => handleClickItem(info.key) }),
+        React.createElement("div", { className: "content" }, renderContent())));
+};

package/es/components/molecules/ModalSelect/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const ModalSelect: {
+    Modal: (props: import("./types").ModalSelectProps) => import("react").JSX.Element;
+    Card: (props: import("antd").CardProps) => import("react").JSX.Element;
+    CardRecommended: (props: import("./types").CardRecommendedProps) => import("react").JSX.Element;
+    CardDefination: (props: import("./types").CardDefinationProps) => import("react").JSX.Element;
+};
+export type { ModalSelectProps } from './types';

package/es/components/molecules/ModalSelect/index.js

@@ -0,0 +1,8 @@
+import { ModalSelect as Modal } from './ModalSelect';
+import { Card, CardDefination, CardRecommended } from './Card';
+export const ModalSelect = {
+    Modal,
+    Card,
+    CardRecommended,
+    CardDefination,
+};

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const StyledModal: import("styled-components").StyledComponent<import("react").FC<import("antd").ModalProps> & import("antd/es/modal/confirm").ModalStaticFunctions & {
+    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) => import("react").JSX.Element;
+}, any, {}, never>;
+export declare const StyledCard: import("styled-components").StyledComponent<import("antd/es/card").CardInterface, any, {}, never>;
+export declare const CardDefinationContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardRecommendedContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RecommendItem: import("styled-components").StyledComponent<import("antd").TagType, any, {}, never>;

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

@@ -0,0 +1,154 @@
+import { Modal, Card, Tag } from 'antd';
+import styled from 'styled-components';
+import { get } from 'lodash';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+export const StyledModal = styled(Modal) `
+  --modal-padding: 20px;
+
+  &.antsomi-modal {
+    .antsomi-modal-content {
+      max-height: 70vh;
+      overflow: auto;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .antsomi-modal-close {
+      &:hover {
+        background-color: transparent;
+      }
+
+      .antsomi-modal-close-x {
+        padding: 10px;
+        font-size: 16px;
+      }
+    }
+
+    .antsomi-modal-header {
+      padding-inline: var(--modal-padding);
+      padding-top: var(--modal-padding);
+      margin-bottom: calc(var(--modal-padding) - 5px);
+
+      .antsomi-modal-title {
+        font-weight: 400;
+        font-size: 14px;
+      }
+    }
+
+    .antsomi-modal-body {
+      flex: 1;
+      overflow: hidden;
+
+      &:hover {
+        overflow: auto;
+      }
+
+      padding-inline: var(--modal-padding);
+      padding-bottom: var(--modal-padding);
+      margin-bottom: 10px;
+      display: flex;
+
+      > .antsomi-menu {
+        flex-shrink: 0;
+        overflow: hidden;
+
+        &:hover {
+          overflow-y: auto;
+        }
+
+        .antsomi-menu-item {
+          width: 200px;
+          padding-inline: 10px;
+          font-weight: bold;
+        }
+      }
+
+      > .content {
+        overflow: hidden;
+        margin-left: 80px;
+
+        &:hover {
+          overflow: auto;
+        }
+      }
+    }
+
+    .antsomi-modal-footer {
+      padding: var(--modal-padding) !important;
+      margin-top: 0;
+      text-align: start;
+      display: flex;
+      justify-content: start;
+      gap: 10px;
+      flex-direction: row-reverse;
+
+      .antsomi-btn + .antsomi-btn {
+        margin: 0;
+      }
+    }
+  }
+`;
+export const StyledCard = styled(Card) `
+  font-size: 12px;
+
+  &.antsomi-card {
+    padding: 15px;
+    background-color: ${get(globalToken, 'blue1_3')};
+
+    > .antsomi-card-cover {
+      padding: 20px;
+    }
+
+    > .antsomi-card-body {
+      display: flex;
+      flex-direction: column;
+      gap: 15px;
+      background-color: transparent;
+      padding: 0px;
+    }
+  }
+`;
+export const CardDefinationContainer = styled.div `
+  > .title {
+    font-size: 16px;
+    font-weight: normal;
+    margin-bottom: 8px;
+    display: block;
+  }
+
+  > .description.antsomi-typography {
+    margin-bottom: 0;
+    color: ${get(globalToken, 'bw8')};
+
+    .antsomi-typography-expand {
+      font-weight: 500;
+    }
+  }
+`;
+export const CardRecommendedContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+
+  > .title {
+    margin-bottom: 8px;
+  }
+
+  > .recomendations {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 8px;
+
+    > .item {
+      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorText};
+      line-height: 14px;
+      font-size: 12px;
+      padding: 5px 10px;
+      border-radius: 24px;
+
+      &.antsomi-tag-borderless {
+        border-width: 0;
+      }
+    }
+  }
+`;
+export const RecommendItem = styled(Tag) ``;

package/es/components/molecules/ModalSelect/types.d.ts

@@ -0,0 +1,26 @@
+import React, { RefCallback } from 'react';
+import { MenuProps, ModalProps, TagProps } from 'antd';
+import { EllipsisConfig } from 'antd/es/typography/Base';
+export type ModalSelectProps = {
+    open?: boolean;
+    value?: string;
+    options?: MenuProps['items'];
+    content?: (active: string | null) => React.ReactNode;
+    onChange?: (active: string) => void;
+    menuRef?: RefCallback<HTMLUListElement>;
+    onOk?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, active: string | null) => void;
+} & Omit<ModalProps, 'onOk'>;
+export type CardProps = {
+    children?: React.ReactNode;
+};
+export type CardDefinationProps = {
+    title?: string;
+    description?: string;
+    descriptionEllipsis?: EllipsisConfig;
+};
+export type CardRecommendedProps = {
+    title?: string;
+    recomendations?: (TagProps & {
+        key?: React.Key;
+    })[];
+};

package/es/components/molecules/ModalSelect/types.js

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

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-export declare const StyledModal: import("styled-components").StyledComponent<import("react").FC<import("../ModalV2").ModalV2Props>, any, {}, never>;
+export declare const StyledModal: import("styled-components").StyledComponent<import("react").FC<import("@antscorp/antsomi-ui/es/components/molecules/ModalV2/ModalV2").ModalV2Props>, any, {}, never>;
 export declare const ModalHeader: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 export declare const ModalBody: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -32,9 +32,10 @@ const defaultProps = {
     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, } = 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);
@@ -54,6 +55,7 @@ export const ResizeGrid = props => {
     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) {
@@ -103,7 +105,7 @@ export const ResizeGrid = props => {
         : (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(() => {
+    useDeepCompareEffect(() => {
         handleChangeGrid();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [grid, reCalculateFlag]);
@@ -158,9 +160,7 @@ export const ResizeGrid = props => {
                                     }
                                 }
                                 else {
-                                    child.transformY &&
-                                        !child.movedBottom &&
-                                        (child.sizeY = +child.sizeY + yDistant);
+                                    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) {
@@ -560,9 +560,8 @@ export const ResizeGrid = props => {
     };
     const downSelect = (idx, cell) => {
         // console.log('dow select', idx, cell);
-        if (isPreview)
-            return;
-        !cell.active && activeCell({ idx });
+        // if (isPreview) return;
+        // !cell.active && activeCell({ idx });
         selectRef.current = { idx, cell };
         gridRef.current = grid;
     };
@@ -574,12 +573,14 @@ export const ResizeGrid = props => {
             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,
@@ -588,21 +589,25 @@ export const ResizeGrid = props => {
                     rowEnd: rEnd,
                 };
                 if (i === rowStart && j === colStart) {
-                    newChilds[idx] = newChild;
+                    newChilds[idx] = Object.assign(Object.assign({}, newChilds[idx]), newChild);
                 }
                 else if (rStart !== rowStart ||
                     rEnd !== rowEnd ||
                     cStart !== colStart ||
                     cEnd !== colEnd) {
-                    newChilds.splice(idx, 0, newChild);
+                    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.values(cellsRef.current).forEach(r => {
-            if (r.current) {
+        Object.entries(cellsRef.current).forEach(([idx, r]) => {
+            if (r.current && grid.childs[idx] && !grid.childs[idx].active) {
                 r.current.style.background = 'unset';
             }
         });
@@ -628,6 +633,8 @@ export const ResizeGrid = props => {
             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];
@@ -636,6 +643,12 @@ export const ResizeGrid = props => {
             });
             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;
     };
@@ -698,7 +711,7 @@ export const ResizeGrid = props => {
     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 })))));
+        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);

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, isPreview, 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, setCordinate, rowPercentage, colPercentage, ctrlKeyRef, allowActive, }) => {
     const { objectFit, image } = cell;
     const downRef = useRef(false);
     const timeoutRef = useRef();
@@ -72,7 +72,7 @@ export const Cell = ({ cell, idx, down, downCell, up, setRef, downSelect, upSele
     // console.log('TRANSFORM', idx, buildTranform(cell))
     return (React.createElement(StyledCell, { ref: cellRef, className: "cell", 
         // onClick={handleActiveCell}
-        onMouseOver: handleHoverSelect, onFocus: e => e, onMouseDown: handleDownCell, onMouseUp: handleUpCell, onDoubleClick: handlUnMerge, borderStyle: borderStyle || 'unset', style: Object.assign(Object.assign({ gridArea: buildGridArea(cell), width: cell.sizeX ? `${cell.sizeX}px` : 'unset', height: cell.sizeY ? `${cell.sizeY}px` : 'unset', transform: buildTranform(cell) }, (cell.active &&
+        onMouseOver: handleHoverSelect, onFocus: e => e, onMouseDown: handleDownCell, onMouseUp: handleUpCell, onDoubleClick: handlUnMerge, borderStyle: borderStyle || 'unset', style: Object.assign(Object.assign({ gridArea: buildGridArea(cell), width: cell.sizeX ? `${cell.sizeX}px` : 'unset', height: cell.sizeY ? `${cell.sizeY}px` : 'unset', transform: buildTranform(cell) }, (allowActive && cell.active &&
             !isPreview &&
             (activeStyle || {
                 outline: '1px solid #005eb8',