@visactor/vtable 1.26.6 → 1.26.8

package/es/scenegraph/group-creater/cell-helper.d.ts

@@ -2,10 +2,12 @@ import type { IThemeSpec, Group as VGroup } from './../../vrender';
 import type { CellRange, ColumnDefine, ColumnTypeOption } from '../../ts-types';
 import type { Group } from '../graphic/group';
 import type { BaseTableAPI } from '../../ts-types/base-table';
-export declare function createCell(type: ColumnTypeOption, value: string, define: ColumnDefine, table: BaseTableAPI, col: number, row: number, colWidth: number, cellWidth: number, cellHeight: number, columnGroup: Group, y: number, padding: [number, number, number, number], textAlign: CanvasTextAlign, textBaseline: CanvasTextBaseline, mayHaveIcon: boolean, cellTheme: IThemeSpec, range: CellRange | undefined, customResult?: {
+export declare function nextPromiseCellUpdateToken(cellGroup: Group): number;
+export declare function isPromiseCellUpdateCurrent(table: BaseTableAPI, col: number, row: number, cellGroup: Group, token: number): boolean;
+export declare function createCell(type: ColumnTypeOption, value: any, define: ColumnDefine, table: BaseTableAPI, col: number, row: number, colWidth: number, cellWidth: number, cellHeight: number, columnGroup: Group, y: number, padding: [number, number, number, number], textAlign: CanvasTextAlign, textBaseline: CanvasTextBaseline, mayHaveIcon: boolean, cellTheme: IThemeSpec, range: CellRange | undefined, customResult?: {
     elementsGroup?: VGroup;
     renderDefault: boolean;
-}): Group;
+}, cellValue?: any): Group;
 export declare function updateCell(col: number, row: number, table: BaseTableAPI, addNew?: boolean, isShadow?: boolean, forceFastUpdate?: boolean): Group;
 export declare function dealWithMergeCellSize(range: CellRange, cellWidth: number, cellHeight: number, padding: [number, number, number, number], textAlign: CanvasTextAlign, textBaseline: CanvasTextBaseline, table: BaseTableAPI): void;
 export declare function dealWithMergeCellSizeForShadow(range: CellRange, cellWidth: number, cellHeight: number, padding: [number, number, number, number], textAlign: CanvasTextAlign, textBaseline: CanvasTextBaseline, table: BaseTableAPI, cellGroup: Group): void;

package/es/scenegraph/group-creater/cell-helper.js

@@ -4,6 +4,8 @@ import { CUSTOM_CONTAINER_NAME, dealWithCustom } from "../component/custom";
 
 import { getProp } from "../utils/get-prop";
 
+import { removeCellMediaChildren } from "./cell-type/media-cell-helper";
+
 import { getCellCornerRadius, getStyleTheme } from "../../core/tableHelper";
 
 import { getOrApply, isPromise } from "../../tools/helper";
@@ -26,15 +28,31 @@ import { onBeforeAttributeUpdateForInvertHighlight } from "../../plugins/invert-
 
 import { getCellBorderStrokeWidth } from "../utils/cell-border-stroke-width";
 
-export function createCell(type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult) {
+import { createCornerCustomMergeContainer, isCornerCustomMergeRange, shouldRenderCornerCustomMergeContent } from "../utils/corner-custom-merge";
+
+const PROMISE_CELL_UPDATE_TOKEN_KEY = "__vtable_promise_cell_update_token__";
+
+export function nextPromiseCellUpdateToken(cellGroup) {
+    var _a;
+    const token = (null !== (_a = cellGroup[PROMISE_CELL_UPDATE_TOKEN_KEY]) && void 0 !== _a ? _a : 0) + 1;
+    return cellGroup[PROMISE_CELL_UPDATE_TOKEN_KEY] = token, token;
+}
+
+export function isPromiseCellUpdateCurrent(table, col, row, cellGroup, token) {
+    return table.scenegraph.highPerformanceGetCell(col, row, !0) === cellGroup && cellGroup[PROMISE_CELL_UPDATE_TOKEN_KEY] === token;
+}
+
+export function createCell(type, value, define, table, col, row, colWidth, cellWidth, cellHeight, columnGroup, y, padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult, cellValue) {
     var _a, _b;
     let cellGroup, isAsync = !1;
+    const hasCellValue = arguments.length >= 19;
+    let renderValue = hasCellValue ? cellValue : value;
     if (isPromise(value)) {
         if ("cell" !== table.scenegraph.highPerformanceGetCell(col, row).role) return cellGroup;
-        value = table.getCellValue(col, row), isAsync = !0;
+        hasCellValue || (renderValue = table.getCellValue(col, row)), isAsync = !0;
     }
-    if ("checkbox" === type && define.tree) {
-        cellGroup = Factory.getFunction("createCheckboxCellGroup")(null, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, define, range, isAsync, !0);
+    if (value = renderValue, "checkbox" === type && define.tree) {
+        cellGroup = Factory.getFunction("createCheckboxCellGroup")(null, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, define, range, isAsync, !0, value);
     } else if ("text" === type || "link" === type || customResult) {
         if ("link" === type) {
             const cellValue = value, cellOriginValue = table.getCellOriginValue(col, row), headerStyle = table._getCellStyle(col, row);
@@ -66,9 +84,11 @@ export function createCell(type, value, define, table, col, row, colWidth, cellW
             stroke: !1
         }), cellGroup.clear()) : table.internalProps.layoutMap.isAxisCell(col, row) && cellGroup.clear();
     } else if ("image" === type) {
-        cellGroup = Factory.getFunction("createImageCellGroup")(columnGroup, 0, y, col, row, cellWidth, cellHeight, define.keepAspectRatio, define.imageAutoSizing, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, range, isAsync);
+        cellGroup = Factory.getFunction("createImageCellGroup")(columnGroup, 0, y, col, row, cellWidth, cellHeight, define.keepAspectRatio, define.imageAutoSizing, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, range, isAsync, value);
+    } else if ("audio" === type) {
+        cellGroup = Factory.getFunction("createAudioCellGroup")(columnGroup, 0, y, col, row, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, range, isAsync, value);
     } else if ("video" === type) {
-        cellGroup = Factory.getFunction("createVideoCellGroup")(columnGroup, 0, y, col, row, cellWidth, cellHeight, define.keepAspectRatio, define.imageAutoSizing, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, range, isAsync);
+        cellGroup = Factory.getFunction("createVideoCellGroup")(columnGroup, 0, y, col, row, cellWidth, cellHeight, define.keepAspectRatio, define.imageAutoSizing, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, range, isAsync, value);
     } else if ("chart" === type) {
         const chartInstance = table.internalProps.layoutMap.getChartInstance(col, row);
         cellGroup = Factory.getFunction("createChartCellGroup")(null, columnGroup, 0, y, col, row, cellWidth, cellHeight, padding, value, define.chartModule, table.internalProps.layoutMap.getChartSpec(col, row), chartInstance, null !== (_b = table.internalProps.layoutMap.getChartDataId(col, row)) && void 0 !== _b ? _b : "data", table, cellTheme, table.internalProps.layoutMap.isShareChartSpec(col, row), isAsync, table.internalProps.layoutMap.isNoChartDataRenderNothing(col, row));
@@ -78,23 +98,23 @@ export function createCell(type, value, define, table, col, row, colWidth, cellW
         const progressBarGroup = Factory.getFunction("createProgressBarCell")(define, style, colWidth, value, dataValue, col, row, padding, table, range);
         cellGroup.firstChild ? cellGroup.insertBefore(progressBarGroup, cellGroup.firstChild) : cellGroup.appendChild(progressBarGroup);
     } else if ("sparkline" === type) {
-        cellGroup = Factory.getFunction("createSparkLineCellGroup")(null, columnGroup, 0, y, col, row, cellWidth, cellHeight, padding, table, cellTheme, isAsync);
+        cellGroup = Factory.getFunction("createSparkLineCellGroup")(null, columnGroup, 0, y, col, row, cellWidth, cellHeight, padding, table, cellTheme, isAsync, value);
     } else if ("checkbox" === type) {
         if ("isAggregation" in table.internalProps.layoutMap && table.internalProps.layoutMap.isAggregation(col, row)) {
             cellGroup = Factory.getFunction("createTextCellGroup")(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, !1, void 0, !0, cellTheme, range, isAsync);
         } else {
-            cellGroup = Factory.getFunction("createCheckboxCellGroup")(null, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, define, range, isAsync, !1);
+            cellGroup = Factory.getFunction("createCheckboxCellGroup")(null, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, define, range, isAsync, !1, value);
         }
     } else if ("radio" === type) {
         if ("isAggregation" in table.internalProps.layoutMap && table.internalProps.layoutMap.isAggregation(col, row)) {
             cellGroup = Factory.getFunction("createTextCellGroup")(table, value, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, !1, void 0, !0, cellTheme, range, isAsync);
         } else {
-            cellGroup = Factory.getFunction("createRadioCellGroup")(null, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, table, cellTheme, define, range);
+            cellGroup = Factory.getFunction("createRadioCellGroup")(null, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, table, cellTheme, define, range, isAsync, value);
         }
     } else if ("switch" === type) {
-        cellGroup = Factory.getFunction("createSwitchCellGroup")(null, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, define, range, isAsync);
+        cellGroup = Factory.getFunction("createSwitchCellGroup")(null, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, define, range, isAsync, value);
     } else if ("button" === type) {
-        cellGroup = Factory.getFunction("createButtonCellGroup")(null, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, define, range, isAsync);
+        cellGroup = Factory.getFunction("createButtonCellGroup")(null, columnGroup, 0, y, col, row, colWidth, cellWidth, cellHeight, padding, textAlign, textBaseline, mayHaveIcon, table, cellTheme, define, range, isAsync, value);
     }
     return cellGroup.onBeforeAttributeUpdate = onBeforeAttributeUpdateForInvertHighlight, 
     cellGroup;
@@ -102,13 +122,19 @@ export function createCell(type, value, define, table, col, row, colWidth, cellW
 
 function _generateCustomElementsGroup(table, define, col, row, cellWidth, cellHeight, padding, range, customResult) {
     let customElementsGroup, renderDefault = !0;
-    if (customResult) customElementsGroup = customResult.elementsGroup, renderDefault = customResult.renderDefault; else if ((null == range ? void 0 : range.isCustom) && !table.isCornerHeader(col, row)) ; else {
+    if (!shouldRenderCornerCustomMergeContent(col, row, range, table)) return {
+        customElementsGroup: customElementsGroup,
+        renderDefault: !1
+    };
+    if (customResult) customElementsGroup = createCornerCustomMergeContainer(customResult.elementsGroup, cellWidth, cellHeight, range, table), 
+    renderDefault = customResult.renderDefault; else if ((null == range ? void 0 : range.isCustom) && !table.isCornerHeader(col, row)) ; else {
         let customRender, customLayout;
         if ("body" !== table.getCellLocation(col, row) ? (customRender = null == define ? void 0 : define.headerCustomRender, 
         customLayout = null == define ? void 0 : define.headerCustomLayout) : (customRender = (null == define ? void 0 : define.customRender) || table.customRender, 
         customLayout = null == define ? void 0 : define.customLayout), customLayout || customRender) {
-            const customResult = dealWithCustom(customLayout, customRender, col, row, cellWidth, cellHeight, !1, table.isAutoRowHeight(row), padding, range, table);
-            customElementsGroup = customResult.elementsGroup, renderDefault = customResult.renderDefault;
+            const customCol = range && isCornerCustomMergeRange(range, table) ? range.start.col : col, customRow = range && isCornerCustomMergeRange(range, table) ? range.start.row : row, customResult = dealWithCustom(customLayout, customRender, customCol, customRow, cellWidth, cellHeight, !1, table.isAutoRowHeight(row), padding, range, table);
+            customElementsGroup = createCornerCustomMergeContainer(customResult.elementsGroup, cellWidth, cellHeight, range, table), 
+            renderDefault = customResult.renderDefault;
         }
     }
     return {
@@ -128,7 +154,7 @@ export function updateCell(col, row, table, addNew, isShadow, forceFastUpdate) {
         if (customMerge) {
             const {range: customMergeRange, text: customMergeText, style: customMergeStyle, customLayout: customLayout, customRender: customRender} = customMerge;
             range = customMergeRange, isMerge = range.start.col !== range.end.col || range.start.row !== range.end.row, 
-            value = customMergeText, customStyle = customMergeStyle, (customLayout || customRender) && (customResult = dealWithCustom(customLayout, customRender, customMergeRange.start.col, customMergeRange.start.row, table.getColsWidth(customMergeRange.start.col, customMergeRange.end.col), table.getRowsHeight(customMergeRange.start.row, customMergeRange.end.row), !1, table.isAutoRowHeight(row), [ 0, 0, 0, 0 ], range, table)), 
+            value = customMergeText, customStyle = customMergeStyle, (customLayout || customRender) && shouldRenderCornerCustomMergeContent(col, row, customMergeRange, table) && (customResult = dealWithCustom(customLayout, customRender, customMergeRange.start.col, customMergeRange.start.row, table.getColsWidth(customMergeRange.start.col, customMergeRange.end.col), table.getRowsHeight(customMergeRange.start.row, customMergeRange.end.row), !1, table.isAutoRowHeight(row), [ 0, 0, 0, 0 ], range, table)), 
             isCustomMerge = !0;
         }
     }
@@ -207,27 +233,30 @@ export function updateCell(col, row, table, addNew, isShadow, forceFastUpdate) {
     const type = isVtableMerge || isCustomMerge ? "text" : table.getCellType(col, row), padding = cellTheme._vtable.padding, textAlign = cellTheme.text.textAlign, textBaseline = cellTheme.text.textBaseline;
     let newCellGroup, cellWidth, cellHeight;
     if (range ? (cellWidth = table.getColsWidth(range.start.col, range.end.col), cellHeight = table.getRowsHeight(range.start.row, range.end.row)) : (cellWidth = table.getColWidth(col), 
-    cellHeight = table.getRowHeight(row)), isPromise(value) ? (oldCellGroup.removeAllChild(), 
-    dealPromiseData(value, table, callUpdateCellContentForPromiseValue.bind(null, {
-        type: type,
-        value: value,
-        define: define,
-        table: table,
-        col: col,
-        row: row,
-        cellWidth: cellWidth,
-        cellHeight: cellHeight,
-        oldCellGroup: oldCellGroup,
-        padding: padding,
-        textAlign: textAlign,
-        textBaseline: textBaseline,
-        mayHaveIcon: mayHaveIcon,
-        addNew: addNew,
-        range: range,
-        customResult: customResult,
-        customStyle: customStyle
-    }))) : newCellGroup = updateCellContent(type, value, define, table, col, row, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme, range, customResult), 
-    isMerge) {
+    cellHeight = table.getRowHeight(row)), isPromise(value)) {
+        const updateToken = nextPromiseCellUpdateToken(oldCellGroup);
+        removeCellMediaChildren(oldCellGroup), oldCellGroup.removeAllChild(), dealPromiseData(value, table, callUpdateCellContentForPromiseValue.bind(null, {
+            type: type,
+            define: define,
+            table: table,
+            col: col,
+            row: row,
+            cellWidth: cellWidth,
+            cellHeight: cellHeight,
+            oldCellGroup: oldCellGroup,
+            padding: padding,
+            textAlign: textAlign,
+            textBaseline: textBaseline,
+            mayHaveIcon: mayHaveIcon,
+            addNew: addNew,
+            range: range,
+            customResult: customResult,
+            customStyle: customStyle,
+            promiseValue: value,
+            updateToken: updateToken
+        }));
+    } else newCellGroup = updateCellContent(type, value, define, table, col, row, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme, range, customResult);
+    if (isMerge) {
         const {width: contentWidth} = newCellGroup.attribute, {height: contentHeight} = newCellGroup.attribute;
         newCellGroup.contentWidth = contentWidth, newCellGroup.contentHeight = contentHeight, 
         isShadow ? dealWithMergeCellSizeForShadow(range, cellWidth, cellHeight, padding, textAlign, textBaseline, table, newCellGroup) : dealWithMergeCellSize(range, cellWidth, cellHeight, padding, textAlign, textBaseline, table);
@@ -235,9 +264,10 @@ export function updateCell(col, row, table, addNew, isShadow, forceFastUpdate) {
     return newCellGroup;
 }
 
-function updateCellContent(type, value, define, table, col, row, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme, range, customResult) {
+function updateCellContent(type, value, define, table, col, row, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme, range, customResult, cellValue) {
     var _a, _b;
-    if (isPromise(value) && (value = table.getCellValue(col, row)), !addNew && (oldCellGroup.row !== row || oldCellGroup.col !== col)) return null;
+    const hasCellValue = arguments.length >= 18;
+    if (!addNew && (oldCellGroup.row !== row || oldCellGroup.col !== col)) return null;
     if (!addNew && oldCellGroup.parent && table.reactCustomLayout) {
         const reactGroup = oldCellGroup.getChildByName(CUSTOM_CONTAINER_NAME);
         if (reactGroup) {
@@ -245,9 +275,12 @@ function updateCellContent(type, value, define, table, col, row, cellWidth, cell
             isNumber(col) && isNumber(row) && table.reactCustomLayout.removeCustomCell(col, row);
         }
     }
-    const newCellGroup = createCell(type, value, define, table, col, row, table.getColWidth(col), cellWidth, cellHeight, addNew ? table.scenegraph.getColGroup(col) : oldCellGroup.parent, addNew ? 0 : table.scenegraph.getCellGroupY(row), padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult);
-    return !addNew && oldCellGroup.parent && (oldCellGroup.parent.insertAfter(newCellGroup, oldCellGroup), 
-    oldCellGroup.parent.removeChild(oldCellGroup), oldCellGroup.release(!0), (null === (_a = table.scenegraph) || void 0 === _a ? void 0 : _a.proxy.cellCache.get(col)) && (null === (_b = table.scenegraph) || void 0 === _b || _b.proxy.cellCache.set(col, newCellGroup))), 
+    const createCellArgs = [ type, value, define, table, col, row, table.getColWidth(col), cellWidth, cellHeight, addNew ? table.scenegraph.getColGroup(col) : oldCellGroup.parent, addNew ? 0 : table.scenegraph.getCellGroupY(row), padding, textAlign, textBaseline, mayHaveIcon, cellTheme, range, customResult ];
+    hasCellValue && createCellArgs.push(cellValue);
+    const newCellGroup = createCell(...createCellArgs);
+    return !addNew && oldCellGroup.parent && newCellGroup !== oldCellGroup && (oldCellGroup.parent.insertAfter(newCellGroup, oldCellGroup), 
+    oldCellGroup.parent.removeChild(oldCellGroup), removeCellMediaChildren(oldCellGroup), 
+    oldCellGroup.release(!0), (null === (_a = table.scenegraph) || void 0 === _a ? void 0 : _a.proxy.cellCache.get(col)) && (null === (_b = table.scenegraph) || void 0 === _b || _b.proxy.cellCache.set(col, newCellGroup))), 
     newCellGroup;
 }
 
@@ -257,9 +290,11 @@ function canUseFastUpdate(col, row, oldCellGroup, autoWrapText, mayHaveIcon, tab
     return !(table.isHeader(col, row) || "cell" !== oldCellGroup.role || "text" !== cellType || autoWrapText || autoRowHeight || mayHaveIcon || "text" !== (null === (_a = oldCellGroup.firstChild) || void 0 === _a ? void 0 : _a.type) || isPromise(value));
 }
 
-function callUpdateCellContentForPromiseValue(updateCellArgs) {
-    const {type: type, value: value, define: define, table: table, col: col, row: row, cellWidth: cellWidth, cellHeight: cellHeight, oldCellGroup: oldCellGroup, padding: padding, textAlign: textAlign, textBaseline: textBaseline, mayHaveIcon: mayHaveIcon, addNew: addNew, range: range, customResult: customResult, customStyle: customStyle} = updateCellArgs, cellStyle = customStyle || table._getCellStyle(range ? range.start.col : col, range ? range.start.row : row), cellTheme = getStyleTheme(cellStyle, table, range ? range.start.col : col, range ? range.start.row : row, getProp).theme;
-    cellTheme.group.cornerRadius = getCellCornerRadius(col, row, table), updateCellContent(type, value, define, table, col, row, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme, range, customResult);
+function callUpdateCellContentForPromiseValue(updateCellArgs, resolvedValue) {
+    const {type: type, define: define, table: table, col: col, row: row, cellWidth: cellWidth, cellHeight: cellHeight, oldCellGroup: oldCellGroup, padding: padding, textAlign: textAlign, textBaseline: textBaseline, mayHaveIcon: mayHaveIcon, addNew: addNew, range: range, customResult: customResult, customStyle: customStyle, promiseValue: promiseValue, updateToken: updateToken} = updateCellArgs;
+    if (!isPromiseCellUpdateCurrent(table, col, row, oldCellGroup, updateToken)) return;
+    const cellStyle = customStyle || table._getCellStyle(range ? range.start.col : col, range ? range.start.row : row), cellTheme = getStyleTheme(cellStyle, table, range ? range.start.col : col, range ? range.start.row : row, getProp).theme;
+    cellTheme.group.cornerRadius = getCellCornerRadius(col, row, table), updateCellContent(type, promiseValue, define, table, col, row, cellWidth, cellHeight, oldCellGroup, padding, textAlign, textBaseline, mayHaveIcon, addNew, cellTheme, range, customResult, resolvedValue);
 }
 
 export function dealWithMergeCellSize(range, cellWidth, cellHeight, padding, textAlign, textBaseline, table) {
@@ -326,11 +361,17 @@ export function getCustomCellMergeCustom(col, row, cellGroup, table) {
         if (customMerge) {
             const {range: customMergeRange, text: customMergeText, style: customMergeStyle, customLayout: customMergeLayout, customRender: customMergeRender} = customMerge;
             if (customMergeLayout || customMergeRender) {
-                const customElementsGroup = dealWithCustom(customMergeLayout, customMergeRender, customMergeRange.start.col, customMergeRange.start.row, table.getColsWidth(customMergeRange.start.col, customMergeRange.end.col), table.getRowsHeight(customMergeRange.start.row, customMergeRange.end.row), !1, table.isAutoRowHeight(row), [ 0, 0, 0, 0 ], customMergeRange, table).elementsGroup;
-                cellGroup.childrenCount > 0 && customElementsGroup ? cellGroup.insertBefore(customElementsGroup, cellGroup.firstChild) : customElementsGroup && cellGroup.appendChild(customElementsGroup);
-                const rangeHeight = table.getRowHeight(row), rangeWidth = table.getColWidth(col), {width: contentWidth} = cellGroup.attribute, {height: contentHeight} = cellGroup.attribute;
-                return cellGroup.contentWidth = contentWidth, cellGroup.contentHeight = contentHeight, 
-                resizeCellGroup(cellGroup, rangeWidth, rangeHeight, customMergeRange, table), customMergeRange;
+                const rangeHeight = table.getRowHeight(row), rangeWidth = table.getColWidth(col), contentWidth = table.getColsWidth(customMergeRange.start.col, customMergeRange.end.col), contentHeight = table.getRowsHeight(customMergeRange.start.row, customMergeRange.end.row);
+                if (cellGroup.contentWidth = contentWidth, cellGroup.contentHeight = contentHeight, 
+                !shouldRenderCornerCustomMergeContent(col, row, customMergeRange, table)) {
+                    const customContainer = cellGroup.getChildByName(CUSTOM_CONTAINER_NAME);
+                    return customContainer && cellGroup.removeChild(customContainer), cellGroup.setAttribute("clip", !0), 
+                    resizeCellGroup(cellGroup, rangeWidth, rangeHeight, customMergeRange, table), customMergeRange;
+                }
+                const customResult = dealWithCustom(customMergeLayout, customMergeRender, customMergeRange.start.col, customMergeRange.start.row, table.getColsWidth(customMergeRange.start.col, customMergeRange.end.col), table.getRowsHeight(customMergeRange.start.row, customMergeRange.end.row), !1, table.isAutoRowHeight(row), [ 0, 0, 0, 0 ], customMergeRange, table), customElementsGroup = createCornerCustomMergeContainer(customResult.elementsGroup, contentWidth, contentHeight, customMergeRange, table);
+                return cellGroup.childrenCount > 0 && customElementsGroup ? cellGroup.insertBefore(customElementsGroup, cellGroup.firstChild) : customElementsGroup && cellGroup.appendChild(customElementsGroup), 
+                resizeCellGroup(cellGroup, rangeWidth, rangeHeight, customMergeRange, table), isCornerCustomMergeRange(customMergeRange, table) && cellGroup.setAttribute("clip", !1), 
+                customMergeRange;
             }
         }
     }