k-vtable 1.0.13 → 1.0.15

package/dist/vtable.js

@@ -9856,7 +9856,7 @@
       }
       removeChild(child) {
         const data = super.removeChild(child);
-        return child.stage = null, this.getGraphicService().onRemove(child), this.addUpdateBoundTag(), data;
+        return this.getGraphicService().onRemove(child), child.stage = null, this.addUpdateBoundTag(), data;
       }
       removeAllChild(deep = !1) {
         this.forEachChildren(child => {
@@ -12786,9 +12786,10 @@
         return super.needUpdateTag(key, POLYGON_UPDATE_TAG_KEY);
       }
       toCustomPath() {
-        const points = this.attribute.points,
-          path = new CustomPath2D();
-        return points.forEach((point, index) => {
+        let path = super.toCustomPath();
+        if (path) return path;
+        const points = this.attribute.points;
+        return path = new CustomPath2D(), points.forEach((point, index) => {
           0 === index ? path.moveTo(point.x, point.y) : path.lineTo(point.x, point.y);
         }), path.closePath(), path;
       }
@@ -16048,6 +16049,7 @@
         drawContext.updateBounds ? this.useDirtyBounds = !0 : this.useDirtyBounds = !drawContext.stage.params.optimize.disableCheckGraphicWidthOutRange;
       }
       draw(renderService, drawContext) {
+        var _a;
         this.prepareForDraw(renderService, drawContext), drawContext.drawContribution = this, this.currentRenderMap = this.styleRenderMap.get(drawContext.renderStyle) || this.defaultRenderMap, this.currentRenderService = renderService;
         const {
           context: context,
@@ -16062,7 +16064,7 @@
           dirtyBounds.x1 = Math.floor(b.x1), dirtyBounds.y1 = Math.floor(b.y1), dirtyBounds.x2 = Math.ceil(b.x2), dirtyBounds.y2 = Math.ceil(b.y2);
         }
         const d = context.dpr % 1;
-        (d || .5 !== d) && (dirtyBounds.x1 = Math.floor(dirtyBounds.x1 * context.dpr) / context.dpr, dirtyBounds.y1 = Math.floor(dirtyBounds.y1 * context.dpr) / context.dpr, dirtyBounds.x2 = Math.ceil(dirtyBounds.x2 * context.dpr) / context.dpr, dirtyBounds.y2 = Math.ceil(dirtyBounds.y2 * context.dpr) / context.dpr), this.backupDirtyBounds.copy(dirtyBounds), context.reset(!1), context.save(), context.setClearMatrix(transMatrix.a, transMatrix.b, transMatrix.c, transMatrix.d, transMatrix.e, transMatrix.f), context.clearMatrix(!1), context.translate(viewBox.x1, viewBox.y1, !0), context.beginPath(), context.rect(dirtyBounds.x1, dirtyBounds.y1, dirtyBounds.width(), dirtyBounds.height()), context.clip(), stage.camera && (this.dirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0), this.backupDirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0)), this.clearScreen(renderService, context, drawContext), renderService.renderTreeRoots.sort((a, b) => {
+        (d || .5 !== d) && (dirtyBounds.x1 = Math.floor(dirtyBounds.x1 * context.dpr) / context.dpr, dirtyBounds.y1 = Math.floor(dirtyBounds.y1 * context.dpr) / context.dpr, dirtyBounds.x2 = Math.ceil(dirtyBounds.x2 * context.dpr) / context.dpr, dirtyBounds.y2 = Math.ceil(dirtyBounds.y2 * context.dpr) / context.dpr), this.backupDirtyBounds.copy(dirtyBounds), context.reset(!1), context.save(), context.setClearMatrix(transMatrix.a, transMatrix.b, transMatrix.c, transMatrix.d, transMatrix.e, transMatrix.f), context.clearMatrix(!1), context.translate(viewBox.x1, viewBox.y1, !0), context.beginPath(), context.rect(dirtyBounds.x1, dirtyBounds.y1, dirtyBounds.width(), dirtyBounds.height()), context.clip(), stage.camera && (this.dirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0), this.backupDirtyBounds.setValue(-1 / 0, -1 / 0, 1 / 0, 1 / 0)), this.clearScreen(renderService, context, drawContext), (null === (_a = renderService.drawParams) || void 0 === _a ? void 0 : _a.stage) && renderService.drawParams.stage.hooks.afterClearScreen.call(renderService.drawParams), renderService.renderTreeRoots.sort((a, b) => {
           var _a, _b;
           return (null !== (_a = a.attribute.zIndex) && void 0 !== _a ? _a : DefaultAttribute.zIndex) - (null !== (_b = b.attribute.zIndex) && void 0 !== _b ? _b : DefaultAttribute.zIndex);
         }).forEach(group => {
@@ -16198,7 +16200,7 @@
         return data || this.currentRenderMap.get(type) || this.defaultRenderMap.get(type);
       }
       clearScreen(renderService, context, drawContext) {
-        var _a, _b;
+        var _a, _b, _c;
         const {
             clear: clear,
             viewBox: viewBox
@@ -16206,9 +16208,9 @@
           width = viewBox.width(),
           height = viewBox.height();
         if (clear) {
-          context.clearRect(0, 0, width, height);
-          const stage = null === (_a = renderService.drawParams) || void 0 === _a ? void 0 : _a.stage;
-          if (stage && (context.globalAlpha = null !== (_b = stage.attribute.opacity) && void 0 !== _b ? _b : 1), stage && stage.backgroundImg && stage.resources) {
+          context.clearRect(0, 0, width, height), (null === (_a = renderService.drawParams) || void 0 === _a ? void 0 : _a.stage) && renderService.drawParams.stage.hooks.afterClearRect.call(renderService.drawParams);
+          const stage = null === (_b = renderService.drawParams) || void 0 === _b ? void 0 : _b.stage;
+          if (stage && (context.globalAlpha = null !== (_c = stage.attribute.opacity) && void 0 !== _c ? _c : 1), stage && stage.backgroundImg && stage.resources) {
             const res = stage.resources.get(clear);
             res && "success" === res.state && res.data && context.drawImage(res.data, 0, 0, width, height);
           } else context.fillStyle = createColor(context, clear, {
@@ -16741,13 +16743,19 @@
           } else this._skipRender = 1;
         }, this.beforeRender = stage => {
           this._beforeRender && this._beforeRender(stage);
+        }, this.afterClearScreen = drawParams => {
+          this._afterClearScreen && this._afterClearScreen(drawParams);
+        }, this.afterClearRect = drawParams => {
+          this._afterClearRect && this._afterClearRect(drawParams);
         }, this.afterRender = stage => {
           this.renderCount++, this._afterRender && this._afterRender(stage), this._afterNextRenderCbs && this._afterNextRenderCbs.forEach(cb => cb(stage)), this._afterNextRenderCbs = null, this.tickedBeforeRender = !1;
         }, this.afterTickCb = () => {
           this.tickedBeforeRender = !0, "rendering" !== this.state && this.renderNextFrame();
         }, this.params = params, this.theme = new Theme(), this.hooks = {
           beforeRender: new SyncHook(["stage"]),
-          afterRender: new SyncHook(["stage"])
+          afterRender: new SyncHook(["stage"]),
+          afterClearScreen: new SyncHook(["stage"]),
+          afterClearRect: new SyncHook(["stage"])
         }, this.global = application.global, !this.global.env && isBrowserEnv() && this.global.setEnv("browser"), this.window = container.get(VWindow), this.renderService = container.get(RenderService), this.pluginService = container.get(PluginService), this.layerService = container.get(LayerService), this.graphicService = container.get(GraphicService), this.pluginService.active(this, params), this.window.create({
           width: params.width,
           height: params.height,
@@ -16759,7 +16767,7 @@
           canvas: params.canvas
         }), this.state = "normal", this.renderCount = 0, this.tryInitEventSystem(), this._background = null !== (_a = params.background) && void 0 !== _a ? _a : DefaultConfig.BACKGROUND, this.appendChild(this.layerService.createLayer(this, {
           main: !0
-        })), this.nextFrameRenderLayerSet = new Set(), this.willNextFrameRender = !1, this.stage = this, this.renderStyle = params.renderStyle, params.autoRender && this.enableAutoRender(), params.autoRefresh && this.enableAutoRefresh(), !1 === params.disableDirtyBounds && this.enableDirtyBounds(), params.enableHtmlAttribute && this.enableHtmlAttribute(params.enableHtmlAttribute), params.ReactDOM && this.enableReactAttribute(params.ReactDOM), params.enableLayout && this.enableLayout(), this.hooks.beforeRender.tap("constructor", this.beforeRender), this.hooks.afterRender.tap("constructor", this.afterRender), this._beforeRender = params.beforeRender, this._afterRender = params.afterRender, this.supportInteractiveLayer = !1 !== params.interactiveLayer, params.optimize || (params.optimize = {
+        })), this.nextFrameRenderLayerSet = new Set(), this.willNextFrameRender = !1, this.stage = this, this.renderStyle = params.renderStyle, params.autoRender && this.enableAutoRender(), params.autoRefresh && this.enableAutoRefresh(), !1 === params.disableDirtyBounds && this.enableDirtyBounds(), params.enableHtmlAttribute && this.enableHtmlAttribute(params.enableHtmlAttribute), params.ReactDOM && this.enableReactAttribute(params.ReactDOM), params.enableLayout && this.enableLayout(), this.hooks.beforeRender.tap("constructor", this.beforeRender), this.hooks.afterRender.tap("constructor", this.afterRender), this.hooks.afterClearScreen.tap("constructor", this.afterClearScreen), this.hooks.afterClearRect.tap("constructor", this.afterClearRect), this._beforeRender = params.beforeRender, this._afterRender = params.afterRender, this._afterClearScreen = params.afterClearScreen, this._afterClearRect = params.afterClearRect, this.supportInteractiveLayer = !1 !== params.interactiveLayer, params.optimize || (params.optimize = {
           tickRenderMode: "effect"
         }), this.optmize(params.optimize), params.background && isString$6(this._background) && this._background.includes("/") && this.setAttributes({
           background: this._background
@@ -17154,7 +17162,7 @@
         return this._cursor;
       }
       eventPointTransform(e) {
-        const point = this.global.mapToCanvasPoint(e, this.window.getContext().canvas.nativeCanvas);
+        const point = this.global.mapToCanvasPoint(e, this.window);
         return this.stage.window.pointTransform(point.x, point.y);
       }
       pauseTriggerEvent() {
@@ -24557,6 +24565,14 @@
           state.executor.stop();
         }), this.stateList = null;
       }
+      reApplyState(state) {
+        var _a;
+        const stateInfo = null === (_a = this.stateList) || void 0 === _a ? void 0 : _a.find(stateInfo => stateInfo.state === state);
+        if (stateInfo) {
+          const stateList = this.stateList.slice();
+          stateInfo.executor.stop(), this.stateList = stateList, stateInfo.executor.execute(stateInfo.animationConfig);
+        }
+      }
     }
 
     class GraphicStateExtension {
@@ -24587,11 +24603,20 @@
       applyUnhighlightState(animationConfig, callback) {
         return this._getAnimationStateManager(this).applyUnhighlightState(animationConfig, callback), this;
       }
-      stopAnimationState(state, type) {
-        return this._getAnimationStateManager(this).stopState(state, type), this;
+      stopAnimationState(state, type, deep = !1) {
+        return this._getAnimationStateManager(this).stopState(state, type), deep && this.isContainer && this.forEachChildren(child => {
+          child.stopAnimationState(state, type, deep);
+        }), this;
       }
       clearAnimationStates() {
-        return this._getAnimationStateManager(this).clearState(), this;
+        const stateManager = this._animationStateManager;
+        return stateManager && stateManager.clearState(), this;
+      }
+      reApplyAnimationState(state, deep = !1) {
+        const stateManager = this._animationStateManager;
+        return stateManager && stateManager.reApplyState(state), deep && this.isContainer && this.forEachChildren(child => {
+          child.reApplyAnimationState(state, deep);
+        }), this;
       }
       static extend(graphic) {
         return new GraphicStateExtension()._getAnimationStateManager(graphic), graphic;
@@ -24644,6 +24669,21 @@
       getGraphicAttribute(key, prev = !1) {
         return !prev && this.finalAttribute ? this.finalAttribute[key] : this.attribute[key];
       }
+      pauseAnimation(deep = !1) {
+        this.animates && this.animates.forEach(animate => animate.pause()), deep && this.isContainer && this.forEachChildren(child => {
+          child.pauseAnimation(deep);
+        });
+      }
+      resumeAnimation(deep = !1) {
+        this.animates && this.animates.forEach(animate => animate.resume()), deep && this.isContainer && this.forEachChildren(child => {
+          child.resumeAnimation(deep);
+        });
+      }
+      stopAnimation(deep = !1) {
+        this.animates && this.animates.forEach(animate => animate.stop()), deep && this.isContainer && this.forEachChildren(child => {
+          child.stopAnimation(deep);
+        });
+      }
     }
 
     function registerAnimate() {
@@ -25205,7 +25245,7 @@
         super(from, to, duration, easing, params);
       }
       onBind() {
-        var _a, _b;
+        var _a, _b, _c;
         super.onBind();
         const {
             from: from,
@@ -25214,7 +25254,7 @@
           fromAttrs = null !== (_b = null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.lastAttrs) && void 0 !== _b ? _b : from;
         this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to;
         const finalAttribute = this.target.getFinalAttribute();
-        finalAttribute && this.target.setAttributes(finalAttribute), this.target.setAttributes(fromAttrs);
+        finalAttribute && this.target.setAttributes(finalAttribute), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && this.target.setAttributes(fromAttrs);
       }
       onEnd(cb) {
         super.onEnd(cb);
@@ -25312,7 +25352,7 @@
         super(from, to, duration, easing, params);
       }
       onBind() {
-        var _a, _b;
+        var _a, _b, _c;
         super.onBind();
         const {
             from: from,
@@ -25321,7 +25361,7 @@
           fromAttrs = null !== (_b = null === (_a = this.target.context) || void 0 === _a ? void 0 : _a.lastAttrs) && void 0 !== _b ? _b : from;
         this.props = to, this.propKeys = Object.keys(to).filter(key => null != to[key]), this.from = fromAttrs, this.to = to;
         const finalAttribute = this.target.getFinalAttribute();
-        finalAttribute && this.target.setAttributes(finalAttribute), this.target.setAttributes(fromAttrs);
+        finalAttribute && this.target.setAttributes(finalAttribute), !1 !== (null === (_c = this.params.controlOptions) || void 0 === _c ? void 0 : _c.immediatelyApply) && this.target.setAttributes(fromAttrs);
       }
       onEnd(cb) {
         super.onEnd(cb);
@@ -27172,16 +27212,15 @@
         changedY = 0;
       "negative" === orient && (changedX = null !== (_a = layoutRect.width) && void 0 !== _a ? _a : graphic.stage.viewWidth, changedY = null !== (_b = layoutRect.height) && void 0 !== _b ? _b : graphic.stage.viewHeight), changedX += offset, changedY += offset;
       const point = isFunction$7(pointOpt) ? pointOpt.call(null, null === (_d = null === (_c = graphic.context) || void 0 === _c ? void 0 : _c.data) || void 0 === _d ? void 0 : _d[0], graphic, animationParameters) : pointOpt,
-        fromX = point && isValidNumber$3(point.x) ? point.x : changedX,
-        fromY = point && isValidNumber$3(point.y) ? point.y : changedY,
-        finalAttrs = graphic.getFinalAttribute(),
-        finalAttrsX = excludeChannels.includes("x") ? graphic.attribute.x : finalAttrs.x,
-        finalAttrsY = excludeChannels.includes("y") ? graphic.attribute.y : finalAttrs.y;
+        finalAttrsX = graphic.getGraphicAttribute("x"),
+        finalAttrsY = graphic.getGraphicAttribute("y"),
+        fromX = excludeChannels.includes("x") ? finalAttrsX : point && isValidNumber$3(point.x) ? point.x : changedX,
+        fromY = excludeChannels.includes("y") ? finalAttrsY : point && isValidNumber$3(point.y) ? point.y : changedY;
       switch (direction) {
         case "x":
           return {
             from: {
-              x: fromX
+              x: excludeChannels.includes("x") ? finalAttrsX : fromX
             },
             to: {
               x: finalAttrsX
@@ -27229,7 +27268,7 @@
         case "x":
           return {
             from: {
-              x: graphic.attribute.x
+              x: graphic.getGraphicAttribute("x")
             },
             to: {
               x: fromX
@@ -27238,7 +27277,7 @@
         case "y":
           return {
             from: {
-              y: graphic.attribute.y
+              y: graphic.getGraphicAttribute("y")
             },
             to: {
               y: fromY
@@ -27247,8 +27286,8 @@
         default:
           return {
             from: {
-              x: graphic.attribute.x,
-              y: graphic.attribute.y
+              x: graphic.getGraphicAttribute("x"),
+              y: graphic.getGraphicAttribute("y")
             },
             to: {
               x: fromX,
@@ -27466,9 +27505,8 @@
             w = Math.min(Math.min(currentX + maxLength, maxLength), streamLength - currentX),
             width = w + x > parentWidth ? Math.max(parentWidth - x, 0) : w;
           this.rect.setAttributes({
-            x: x,
-            width: width,
-            dx: Math.min(parentAttr.x1 - parentAttr.x, 0)
+            x: x + Math.min(parentAttr.x1 - parentAttr.x, 0),
+            width: width
           }, !1, {
             type: AttributeUpdateType.ANIMATE_PLAY,
             animationState: {
@@ -27485,9 +27523,8 @@
           const h = Math.min(parentHeight - currentY, maxLength);
           let height;
           y <= 0 ? (height = Math.max(y + h, 0), y = 0) : height = h, this.rect.setAttributes({
-            y: y,
-            height: height,
-            dy: Math.min(parentAttr.y1 - parentAttr.y, 0)
+            y: y + Math.min(parentAttr.y1 - parentAttr.y, 0),
+            height: height
           }, !1, {
             type: AttributeUpdateType.ANIMATE_PLAY,
             animationState: {
@@ -34868,6 +34905,7 @@
         MOUSEENTER_CELL: 'mouseenter_cell',
         MOUSELEAVE_CELL: 'mouseleave_cell',
         CONTEXTMENU_CELL: 'contextmenu_cell',
+        CONTEXTMENU_CANVAS: 'contextmenu_canvas',
         RESIZE_COLUMN: 'resize_column',
         RESIZE_COLUMN_END: 'resize_column_end',
         RESIZE_ROW: 'resize_row',
@@ -36365,6 +36403,9 @@
                     },
                     get verticalPadding() {
                         return scroll.verticalPadding ?? 0;
+                    },
+                    get ignoreFrozenCols() {
+                        return scroll.ignoreFrozenCols ?? false;
                     }
                 };
             }
@@ -37015,11 +37056,11 @@
         }
         initTreeHierarchyState() {
             this._sourceLength = this._source?.length || 0;
-            this.currentIndexedData = Array.from({ length: this._sourceLength }, (_, i) => i);
-            let nodeLength = this._sourceLength;
+            this.currentIndexedData = [];
+            const nodeLength = this._sourceLength;
             for (let i = 0; i < nodeLength; i++) {
-                const indexKey = this.currentIndexedData[i];
-                const nodeData = this.getOriginalRecord(indexKey);
+                this.currentIndexedData.push(i);
+                const nodeData = this.getOriginalRecord(i);
                 if (!nodeData) {
                     continue;
                 }
@@ -37035,9 +37076,7 @@
                     if (nodeData.hierarchyState === HierarchyState.collapse) {
                         continue;
                     }
-                    const childrenLength = this.initChildrenNodeHierarchy(indexKey, this.hierarchyExpandLevel, 2, nodeData);
-                    i += childrenLength;
-                    nodeLength += childrenLength;
+                    this.initChildrenNodeHierarchy(i, this.hierarchyExpandLevel, 2, nodeData);
                 }
                 else if (nodeData.children === true) {
                     !nodeData.hierarchyState && (nodeData.hierarchyState = HierarchyState.collapse);
@@ -37180,9 +37219,10 @@
                 aggregator.push(record);
             }
         }
-        initChildrenNodeHierarchy(indexKey, hierarchyExpandLevel, currentLevel, nodeData) {
+        initChildrenNodeHierarchy(indexKey, hierarchyExpandLevel, currentLevel, nodeData, insertKeys) {
             let childTotalLength = 0;
             const nodeLength = nodeData.filteredChildren ? nodeData.filteredChildren.length : nodeData.children?.length ?? 0;
+            const localInsertKeys = insertKeys ?? [];
             for (let j = 0; j < nodeLength; j++) {
                 if (currentLevel <= hierarchyExpandLevel || nodeData.hierarchyState === HierarchyState.expand) {
                     childTotalLength += 1;
@@ -37190,7 +37230,7 @@
                 const childNodeData = nodeData.filteredChildren ? nodeData.filteredChildren[j] : nodeData.children[j];
                 const childIndexKey = Array.isArray(indexKey) ? indexKey.concat(j) : [indexKey, j];
                 if (currentLevel <= hierarchyExpandLevel || nodeData.hierarchyState === HierarchyState.expand) {
-                    this.currentIndexedData.splice(this.currentIndexedData.indexOf(indexKey) + childTotalLength, 0, childIndexKey);
+                    localInsertKeys.push(childIndexKey);
                 }
                 if (childNodeData.filteredChildren ? childNodeData.filteredChildren.length > 0 : childNodeData.children?.length > 0) {
                     if (currentLevel < hierarchyExpandLevel || childNodeData.hierarchyState === HierarchyState.expand) {
@@ -37202,12 +37242,15 @@
                     }
                 }
                 if (childNodeData.hierarchyState === HierarchyState.expand) {
-                    childTotalLength += this.initChildrenNodeHierarchy(childIndexKey, hierarchyExpandLevel, currentLevel + 1, childNodeData);
+                    childTotalLength += this.initChildrenNodeHierarchy(childIndexKey, hierarchyExpandLevel, currentLevel + 1, childNodeData, localInsertKeys);
                 }
                 if (childNodeData.children === true) {
                     !childNodeData.hierarchyState && (childNodeData.hierarchyState = HierarchyState.collapse);
                 }
             }
+            if (!insertKeys && localInsertKeys.length > 0) {
+                this.currentIndexedData.push(...localInsertKeys);
+            }
             return childTotalLength;
         }
         updatePagination(pagination) {
@@ -39735,8 +39778,8 @@
             if (isValid$3(newRecord)) {
                 newRecord.hierarchyState = oldSource[i].hierarchyState;
             }
-            if (isArray$7(oldRecord.children) &&
-                isArray$7(newRecord.children) &&
+            if (isArray$7(oldRecord?.children) &&
+                isArray$7(newRecord?.children) &&
                 oldRecord.map.size !== 0 &&
                 newRecord.map.size !== 0) {
                 syncGroupCollapseState(oldRecord.children, newRecord.children, oldRecord.map, newRecord.map);
@@ -42613,6 +42656,9 @@
         });
     }
     function dealWithIcon(icon, mark, col, row, range, table, dealWithIconComputeVar) {
+        if (!icon) {
+            return undefined;
+        }
         const iconAttribute = {};
         if (icon.type === 'image') {
             if (icon.isGif) {
@@ -43625,7 +43671,7 @@
             if (vtableMerge) {
                 mayHaveIcon = true;
                 if (table.internalProps.groupTitleCustomLayout) {
-                    customResult = dealWithCustom(table.internalProps.groupTitleCustomLayout, undefined, range.start.col, range.start.row, table.getColsWidth(range.start.col, range.end.col), table.getRowsHeight(range.start.row, range.end.row), false, table.isAutoRowHeight(row), [0, 0, 0, 0], range, table);
+                    customResult = dealWithCustom(table.internalProps.groupTitleCustomLayout, undefined, col, row, table.getColsWidth(range.start.col, range.end.col), table.getRowsHeight(range.start.row, range.end.row), false, table.isAutoRowHeight(row), [0, 0, 0, 0], range, table);
                 }
                 if (table.internalProps.groupTitleFieldFormat) {
                     value = table.internalProps.groupTitleFieldFormat(rawRecord, col, row, table);
@@ -46268,7 +46314,6 @@
             const shadowWidth = theme.frozenColumnLine?.shadow?.width;
             const shadowStartColor = theme.frozenColumnLine?.shadow?.startColor;
             const shadowEndColor = theme.frozenColumnLine?.shadow?.endColor;
-            theme.cellBorder?.borderColor ?? 'red';
             const visible = theme.frozenColumnLine?.shadow?.visible;
             this.frozenShadowLine = createRect({
                 visible: visible === 'always',
@@ -46434,19 +46479,19 @@
             const visible1 = theme.scrollStyle?.visible;
             const horizontalVisible = theme.scrollStyle?.horizontalVisible ?? visible1;
             const verticalVisible = theme.scrollStyle?.verticalVisible ?? visible1;
-            const tableWidth = Math.ceil(this.table.scenegraph.tableGroup.attribute.width);
-            const tableHeight = Math.ceil(this.table.scenegraph.tableGroup.attribute.height);
+            const tableWidth = Math.ceil(this.table.tableNoFrameWidth);
+            const tableHeight = Math.ceil(this.table.tableNoFrameHeight);
             const totalHeight = this.table.getAllRowsHeight();
             const totalWidth = this.table.getAllColsWidth();
             const frozenRowsHeight = this.table.getFrozenRowsHeight();
             const frozenColsWidth = this.table.getFrozenColsWidth();
             const bottomFrozenRowsHeight = this.table.getBottomFrozenRowsHeight();
             const rightFrozenColsWidth = this.table.getRightFrozenColsWidth();
+            const hoverOn = this.table.theme.scrollStyle.hoverOn;
             const sizeTolerance = this.table.options.customConfig?._disableColumnAndRowSizeRound ? 1 : 0;
             if (totalWidth > tableWidth + sizeTolerance) {
                 const y = Math.min(tableHeight, totalHeight);
                 const rangeEnd = Math.max(0.05, (tableWidth - frozenColsWidth) / (totalWidth - frozenColsWidth));
-                const hoverOn = this.table.theme.scrollStyle.hoverOn;
                 let attrY = 0;
                 if (this.table.theme.scrollStyle.barToSide) {
                     attrY =
@@ -46457,10 +46502,21 @@
                 else {
                     attrY = y - (hoverOn ? width : -this.table.scenegraph.tableGroup.attribute.y);
                 }
+                let hScrollBarx = frozenColsWidth + (!hoverOn ? this.table.scenegraph.tableGroup.attribute.x : 0);
+                let hScrollBarWidth = tableWidth - frozenColsWidth - rightFrozenColsWidth;
+                const ignoreFrozenCols = this.table.theme.scrollStyle?.ignoreFrozenCols ?? false;
+                if (ignoreFrozenCols) {
+                    hScrollBarx = !hoverOn ? this.table.scenegraph.tableGroup.attribute.x : 0;
+                    hScrollBarWidth = tableWidth;
+                }
+                else {
+                    hScrollBarx = frozenColsWidth + (!hoverOn ? this.table.scenegraph.tableGroup.attribute.x : 0);
+                    hScrollBarWidth = tableWidth - frozenColsWidth - rightFrozenColsWidth;
+                }
                 this.hScrollBar.setAttributes({
-                    x: frozenColsWidth + (!hoverOn ? this.table.scenegraph.tableGroup.attribute.x : 0),
+                    x: hScrollBarx,
                     y: attrY,
-                    width: tableWidth - frozenColsWidth - rightFrozenColsWidth,
+                    width: hScrollBarWidth,
                     range: [0, rangeEnd],
                     visible: horizontalVisible === 'always'
                 });
@@ -46485,7 +46541,6 @@
                 const x = Math.min(tableWidth, totalWidth);
                 const rangeEnd = Math.max(0.05, (tableHeight - frozenRowsHeight) / (totalHeight - frozenRowsHeight));
                 let attrX = 0;
-                const hoverOn = this.table.theme.scrollStyle.hoverOn;
                 if (this.table.theme.scrollStyle.barToSide) {
                     attrX =
                         this.table.tableNoFrameWidth -
@@ -46700,7 +46755,8 @@
         }
         setTopFrozenColumnShadow() {
             const rowY = getRowTopY(this.table);
-            if (this.table.columnHeaderLevelCount === this.table.frozenRowCount || this.table.theme.frozenColumnLine?.shadow?.visible !== 'always') {
+            if (this.table.columnHeaderLevelCount === this.table.frozenRowCount ||
+                this.table.theme.frozenColumnLine?.shadow?.visible !== 'always') {
                 this.topFrozenShadowLine.setAttributes({
                     visible: false,
                     y: 0,
@@ -49239,11 +49295,10 @@
     });
 
     function computeColsWidth(table, colStart, colEnd, update) {
-        table.internalProps.columnWidthConfig &&
-            table._parseColumnWidthConfig(table.internalProps.columnWidthConfig);
+        table.internalProps.columnWidthConfig && _parseColumnWidthConfig(table, table.internalProps.columnWidthConfig);
         table.isPivotTable() &&
             table.internalProps.columnWidthConfigForRowHeader &&
-            table._parseColumnWidthConfigForRowHeader(table.internalProps.columnWidthConfigForRowHeader);
+            _parseColumnWidthConfigForPivotRowHeader(table, table.internalProps.columnWidthConfigForRowHeader);
         colStart = colStart ?? 0;
         colEnd = colEnd ?? table.colCount - 1;
         if (colStart === 0 && colEnd === table.colCount - 1) {
@@ -49801,6 +49856,83 @@
             }
         }
     }
+    function _parseColumnWidthConfig(table, columnWidthConfig) {
+        if (table.isPivotTable()) {
+            _parseColumnWidthConfigForPivotTable(table, columnWidthConfig);
+        }
+        else if (table.isListTable()) {
+            _parseColumnWidthConfigForListTable(table, columnWidthConfig);
+        }
+    }
+    function _parseColumnWidthConfigForListTable(table, columnWidthConfig) {
+        for (let i = 0; i < columnWidthConfig?.length; i++) {
+            const item = columnWidthConfig[i];
+            const key = item.key;
+            const width = item.width;
+            const columnData = table.internalProps.layoutMap.getColumnByKey(key);
+            if (columnData.columnDefine) {
+                const { col } = columnData;
+                if (!table.internalProps._widthResizedColMap.has(col)) {
+                    table._setColWidth(col, width);
+                    table.internalProps._widthResizedColMap.add(col);
+                }
+            }
+        }
+    }
+    function _parseColumnWidthConfigForPivotTable(table, columnWidthConfig) {
+        for (let i = 0; i < columnWidthConfig?.length; i++) {
+            const item = columnWidthConfig[i];
+            const dimensions = item.dimensions;
+            const width = item.width;
+            const cell = table.getCellAddressByHeaderPaths(dimensions);
+            if (cell && cell.col >= table.rowHeaderLevelCount) {
+                const cellPath = table.getCellHeaderPaths(cell.col, table.columnHeaderLevelCount);
+                if (cellPath.colHeaderPaths.length === dimensions.length) {
+                    let match = true;
+                    for (let i = 0; i < dimensions.length; i++) {
+                        const dimension = dimensions[i];
+                        const finded = cellPath.colHeaderPaths.findIndex((colPath, index) => {
+                            if (colPath.indicatorKey === dimension.indicatorKey) {
+                                return true;
+                            }
+                            if (colPath.dimensionKey === dimension.dimensionKey && colPath.value === dimension.value) {
+                                return true;
+                            }
+                            return false;
+                        });
+                        if (finded < 0) {
+                            match = false;
+                            break;
+                        }
+                    }
+                    if (match && !table.internalProps._widthResizedColMap.has(cell.col)) {
+                        table._setColWidth(cell.col, width);
+                        table.internalProps._widthResizedColMap.add(cell.col);
+                    }
+                }
+            }
+            else if (cell && cell.col < table.rowHeaderLevelCount) {
+                if (!table.internalProps._widthResizedColMap.has(cell.col)) {
+                    table._setColWidth(cell.col, width);
+                    table.internalProps._widthResizedColMap.add(cell.col);
+                }
+            }
+        }
+    }
+    function _parseColumnWidthConfigForPivotRowHeader(table, columnWidthConfig) {
+        for (let i = 0; i < columnWidthConfig?.length; i++) {
+            const item = columnWidthConfig[i];
+            const dimensions = item.dimensions;
+            const width = item.width;
+            const cell = table.getCellAddressByHeaderPaths(dimensions);
+            if (cell && cell.col < table.rowHeaderLevelCount) {
+                if (!table.internalProps._widthResizedColMap.has(cell.col)) {
+                    table._setColWidth(cell.col, width);
+                    table.internalProps._widthResizedColMap.add(cell.col);
+                }
+            }
+        }
+    }
 
     const emptyGroup = new Group$1({});
     emptyGroup.role = 'empty';
@@ -49816,6 +49948,9 @@
         else if (columnGroup.colHeight) {
             y = columnGroup.colHeight;
         }
+        else if (rowStart >= table.columnHeaderLevelCount && rowStart < table.rowCount - table.bottomFrozenRowCount) {
+            y = table.getRowsHeight(table.columnHeaderLevelCount, rowStart - 1);
+        }
         for (let j = rowStart; j <= rowEnd; j++) {
             const row = j;
             let cellLocation = table.getCellLocation(col, row);
@@ -49893,7 +50028,7 @@
                 if (vtableMerge) {
                     mayHaveIcon = true;
                     if (table.internalProps.groupTitleCustomLayout) {
-                        customResult = dealWithCustom(table.internalProps.groupTitleCustomLayout, undefined, range.start.col, range.start.row, table.getColsWidth(range.start.col, range.end.col), table.getRowsHeight(range.start.row, range.end.row), false, table.isAutoRowHeight(row), [0, 0, 0, 0], range, table);
+                        customResult = dealWithCustom(table.internalProps.groupTitleCustomLayout, undefined, col, row, table.getColsWidth(range.start.col, range.end.col), table.getRowsHeight(range.start.row, range.end.row), false, table.isAutoRowHeight(row), [0, 0, 0, 0], range, table);
                     }
                     if (table.internalProps.groupTitleFieldFormat) {
                         value = table.internalProps.groupTitleFieldFormat(rawRecord, col, row, table);
@@ -51820,17 +51955,32 @@
     }
 
     function updateAllSelectComponent(scene) {
+        const size0 = scene.customSelectedRangeComponents.size;
+        let index0 = 0;
         scene.customSelectedRangeComponents.forEach((selectComp, key) => {
-            updateComponent(selectComp, key, scene);
+            updateComponent(selectComp, key, scene, {
+                size: size0,
+                index: ++index0
+            });
         });
+        const size1 = scene.selectingRangeComponents.size;
+        let index1 = 0;
         scene.selectingRangeComponents.forEach((selectComp, key) => {
-            updateComponent(selectComp, key, scene);
+            updateComponent(selectComp, key, scene, {
+                size: size1,
+                index: ++index1
+            });
         });
+        const size2 = scene.selectedRangeComponents.size;
+        let index2 = 0;
         scene.selectedRangeComponents.forEach((selectComp, key) => {
-            updateComponent(selectComp, key, scene);
+            updateComponent(selectComp, key, scene, {
+                size: size2,
+                index: ++index2
+            });
         });
     }
-    function updateComponent(selectComp, key, scene) {
+    function updateComponent(selectComp, key, scene, other) {
         const table = scene.table;
         const [startColStr, startRowStr, endColStr, endRowStr] = key.split('-');
         const startCol = parseInt(startColStr, 10);
@@ -51893,12 +52043,20 @@
         const rowsHeight = table.getRowsHeight(computeRectCellRangeStartRow, computeRectCellRangeEndRow);
         const firstCellBound = scene.highPerformanceGetCell(computeRectCellRangeStartCol, computeRectCellRangeStartRow).globalAABBBounds;
         selectComp.rect.setAttributes({
-            x: firstCellBound.x1 - scene.tableGroup.attribute.x + 1,
-            y: firstCellBound.y1 - scene.tableGroup.attribute.y + 1,
-            width: colsWidth - 2,
-            height: rowsHeight - 2,
+            x: firstCellBound.x1 - scene.tableGroup.attribute.x,
+            y: firstCellBound.y1 - scene.tableGroup.attribute.y,
+            width: colsWidth,
+            height: rowsHeight,
             visible: true,
-            cornerRadius: 2
+            cornerRadius: other
+                ? other.size === 1
+                    ? 2
+                    : other.index === 1
+                        ? [2, 0, 0, 2]
+                        : other.index === other.size
+                            ? [0, 2, 2, 0]
+                            : 0
+                : 0
         });
         if (selectComp.fillhandle) {
             const fillHandle = scene.table.options.excelOptions?.fillHandle;
@@ -51907,18 +52065,26 @@
                 visible = fillHandle({ selectRanges: scene.table.stateManager.select.ranges, table: scene.table });
             }
             let lastCellBound;
-            if (computeRectCellRangeEndCol < table.colCount - 1) {
-                lastCellBound = scene.highPerformanceGetCell(computeRectCellRangeEndCol, computeRectCellRangeEndRow).globalAABBBounds;
+            let handlerX;
+            if (endCol < table.colCount - 1) {
+                lastCellBound = scene.highPerformanceGetCell(endCol, endRow).globalAABBBounds;
+                handlerX = lastCellBound.x2 - scene.tableGroup.attribute.x - 3;
             }
             else {
-                lastCellBound = scene.highPerformanceGetCell(computeRectCellRangeStartCol - 1, computeRectCellRangeEndRow).globalAABBBounds;
+                if (startCol === 0) {
+                    lastCellBound = scene.highPerformanceGetCell(0, endRow).globalAABBBounds;
+                    handlerX = lastCellBound.x1 - scene.tableGroup.attribute.x;
+                }
+                else {
+                    lastCellBound = scene.highPerformanceGetCell(startCol - 1, endRow).globalAABBBounds;
+                    handlerX = lastCellBound.x2 - scene.tableGroup.attribute.x - 3;
+                }
             }
-            const handlerX = lastCellBound.x2 - scene.tableGroup.attribute.x - 3;
-            if (computeRectCellRangeEndRow < table.rowCount - 1) {
-                lastCellBound = scene.highPerformanceGetCell(computeRectCellRangeEndCol, computeRectCellRangeEndRow).globalAABBBounds;
+            if (endRow < table.rowCount - 1) {
+                lastCellBound = scene.highPerformanceGetCell(endCol, endRow).globalAABBBounds;
             }
             else {
-                lastCellBound = scene.highPerformanceGetCell(computeRectCellRangeEndCol, computeRectCellRangeStartRow - 1).globalAABBBounds;
+                lastCellBound = scene.highPerformanceGetCell(endCol, startRow - 1).globalAABBBounds;
             }
             const handlerY = lastCellBound.y2 - scene.tableGroup.attribute.y - 3;
             selectComp.fillhandle?.setAttributes({
@@ -53057,10 +53223,11 @@
         const frozenRowsHeight = table.getFrozenRowsHeight();
         const bottomFrozenRowsHeight = table.getBottomFrozenRowsHeight();
         const totalFrozenRowsHeight = frozenRowsHeight + bottomFrozenRowsHeight;
-        const bodyHeight = Math.min(allRowsHeight - totalFrozenRowsHeight, tableNoFrameHeight - totalFrozenRowsHeight);
+        const h = table.tableNoFrameHeight - totalFrozenRowsHeight;
+        const hh = Math.min(allRowsHeight - totalFrozenRowsHeight, tableNoFrameHeight - totalFrozenRowsHeight);
+        const bodyHeight = hh < h ? h : hh;
         tableBodyDomContainer.style.width = `${tableNoFrameWidth}px`;
-        const tableHeight = Math.min(allRowsHeight - frozenRowsHeight, tableNoFrameHeight - frozenRowsHeight);
-        tableBodyDomContainer.style.height = `${tableHeight}px`;
+        tableBodyDomContainer.style.height = `${bodyHeight}px`;
         tableBodyDomContainer.style.top = `${table.tableY + frozenRowsHeight}px`;
         if (table.frozenColCount > 0) {
             headerDomContainer.style.left = `${table.tableX + frozenColsWidth}px`;
@@ -54269,7 +54436,7 @@
         }
         updateCellRangeIcon(col, row, (icon) => icon.attribute.funcType === IconFuncTypeEnum.collapse || icon.attribute.funcType === IconFuncTypeEnum.expand, (icon) => {
             dealWithIcon(iconConfig, icon);
-            icon.name = iconConfig.name;
+            icon.name = iconConfig?.name;
         }, scene);
     }
     function updateCellGroupIcon(cellGroup, filter, dealer) {
@@ -54855,6 +55022,22 @@
             this.isPivot = this.table.isPivotTable();
             initSceneGraph(this);
         }
+        canvasShowMenu() {
+            this.stage.addEventListener('rightdown', (e) => {
+                const eventArgsSet = getCellEventArgsSet(e);
+                if (!eventArgsSet.eventArgs) {
+                    this.table.stateManager.triggerContextMenu(-1, -1, eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y);
+                    this.table.fireListeners(TABLE_EVENT_TYPE.CONTEXTMENU_CANVAS, {
+                        event: e,
+                        x: eventArgsSet.abstractPos.x,
+                        y: eventArgsSet.abstractPos.y,
+                        col: -1,
+                        row: -1,
+                        target: undefined
+                    });
+                }
+            });
+        }
         clearCells() {
             this.table.animationManager.clear();
             if (this.table.isPivotChart() || this.table._hasCustomRenderOrLayout()) {
@@ -55703,6 +55886,9 @@
             if (this.table.options.animationAppear) {
                 dealWithAnimationAppear(this.table);
             }
+            if (this.table.options.menu?.contextMenuWorkOnlyCell === false) {
+                this.canvasShowMenu();
+            }
             this.updateNextFrame();
         }
         dealWidthMode() {
@@ -56210,9 +56396,11 @@
             this.component.updateScrollBar();
             this.updateNextFrame();
         }
-        updateCol(removeCells, addCells, updateCells = []) {
+        updateCol(removeCells, addCells, updateCells = [], recalculateColWidths = true) {
             updateCol(removeCells, addCells, updateCells, this.table);
-            this.recalculateColWidths();
+            if (recalculateColWidths) {
+                this.recalculateColWidths();
+            }
             this.recalculateRowHeights();
             this.table.stateManager.checkFrozen();
             if (!this.isPivot && !this.table.transpose) {
@@ -57559,6 +57747,7 @@
         }
         state.columnResize.x = xInTable;
         state.table.scenegraph.component.updateResizeCol(state.columnResize.col, yInTable, state.columnResize.isRightFrozen);
+        state.table._updateSize();
         if (state.columnResize.col < state.table.frozenColCount &&
             !state.table.isPivotTable() &&
             !state.table.transpose) {
@@ -58219,6 +58408,7 @@
         }
         state.rowResize.y = yInTable;
         state.table.scenegraph.component.updateResizeRow(state.rowResize.row, xInTable, state.rowResize.isBottomFrozen);
+        state.table._updateSize();
         state.table.scenegraph.updateNextFrame();
     }
     function updateResizeColForRow(detaY, state) {
@@ -60370,40 +60560,64 @@
             if (eventArgsSet.eventArgs) {
                 stateManager.triggerContextMenu(eventArgsSet.eventArgs.col, eventArgsSet.eventArgs.row, eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y);
                 const { col, row } = eventArgsSet.eventArgs;
-                if (table.hasListeners(TABLE_EVENT_TYPE.CONTEXTMENU_CELL)) {
-                    const cellInfo = table.getCellInfo(col, row);
-                    let icon;
-                    let position;
-                    if (eventArgsSet.eventArgs?.target) {
-                        const iconInfo = getIconAndPositionFromTarget(eventArgsSet.eventArgs?.target);
-                        if (iconInfo) {
-                            icon = iconInfo.icon;
-                            position = iconInfo.position;
+                if (col >= 0 && row >= 0) {
+                    const ranges = table.getSelectedCellRanges();
+                    let cellInRange = false;
+                    if (ranges.length > 0) {
+                        for (let i = 0; i < ranges.length; i++) {
+                            const range = ranges[i];
+                            const startCol = range.start.col;
+                            const endCol = range.end.col;
+                            const startRow = range.start.row;
+                            const endRow = range.end.row;
+                            if ((col >= startCol && col <= endCol && row >= startRow && row <= endRow) ||
+                                (col >= endCol && col <= startCol && row >= endRow && row <= startRow) ||
+                                (col >= startCol && col <= endCol && row >= endRow && row <= startRow) ||
+                                (col >= endCol && col <= startCol && row >= startRow && row <= endRow)) {
+                                cellInRange = true;
+                                break;
+                            }
                         }
                     }
-                    const cellsEvent = {
-                        ...cellInfo,
-                        event: e.nativeEvent,
-                        cells: [],
-                        targetIcon: icon
-                            ? {
-                                name: icon.name,
-                                position: position,
-                                funcType: icon.attribute.funcType
+                    const disableSelectOnContextMenu = table.options.select?.disableSelectOnContextMenu;
+                    if (!cellInRange && !disableSelectOnContextMenu) {
+                        table.selectCell(col, row);
+                    }
+                    if (table.hasListeners(TABLE_EVENT_TYPE.CONTEXTMENU_CELL)) {
+                        const cellInfo = table.getCellInfo(col, row);
+                        let icon;
+                        let position;
+                        if (eventArgsSet.eventArgs?.target) {
+                            const iconInfo = getIconAndPositionFromTarget(eventArgsSet.eventArgs?.target);
+                            if (iconInfo) {
+                                icon = iconInfo.icon;
+                                position = iconInfo.position;
                             }
-                            : undefined,
-                        target: eventArgsSet?.eventArgs?.target,
-                        mergeCellInfo: eventArgsSet.eventArgs?.mergeInfo
-                    };
-                    if (table.options.eventOptions?.contextmenuReturnAllSelectedCells ?? true) {
-                        if (cellInRanges(table.stateManager.select.ranges, col, row)) {
-                            cellsEvent.cells = table.getSelectedCellInfos();
                         }
-                        else {
-                            cellsEvent.cells = [[cellInfo]];
+                        const cellsEvent = {
+                            ...cellInfo,
+                            event: e.nativeEvent,
+                            cells: [],
+                            targetIcon: icon
+                                ? {
+                                    name: icon.name,
+                                    position: position,
+                                    funcType: icon.attribute.funcType
+                                }
+                                : undefined,
+                            target: eventArgsSet?.eventArgs?.target,
+                            mergeCellInfo: eventArgsSet.eventArgs?.mergeInfo
+                        };
+                        if (table.options.eventOptions?.contextmenuReturnAllSelectedCells ?? true) {
+                            if (cellInRanges(table.stateManager.select.ranges, col, row)) {
+                                cellsEvent.cells = table.getSelectedCellInfos();
+                            }
+                            else {
+                                cellsEvent.cells = [[cellInfo]];
+                            }
                         }
+                        table.fireListeners(TABLE_EVENT_TYPE.CONTEXTMENU_CELL, cellsEvent);
                     }
-                    table.fireListeners(TABLE_EVENT_TYPE.CONTEXTMENU_CELL, cellsEvent);
                 }
             }
         });
@@ -61628,8 +61842,12 @@
                         table.stateManager.updateInteractionState(InteractionState.grabing);
                         const targetCol = table.getTargetColAtConsiderRightFrozen(selectX, considerFrozenX);
                         const targetRow = table.getTargetRowAtConsiderBottomFrozen(selectY, considerFrozenY);
-                        if (!table.options.select?.disableDragSelect && isValid$3(targetCol) && isValid$3(targetRow) &&
-                            (!table.options.select?.disableSelect || !(typeof table.options.select?.disableSelect === 'function' && table.options.select?.disableSelect?.(targetCol.col, targetRow.row, table)))) {
+                        if (!table.options.select?.disableDragSelect &&
+                            isValid$3(targetCol) &&
+                            isValid$3(targetRow) &&
+                            (!table.options.select?.disableSelect ||
+                                !(typeof table.options.select?.disableSelect === 'function' &&
+                                    table.options.select?.disableSelect?.(targetCol.col, targetRow.row, table)))) {
                             table.stateManager.updateSelectPos(targetCol.col, targetRow.row, false, false, false, false);
                         }
                     });
@@ -62502,21 +62720,32 @@
                         const lastRow = Math.max(this.table.stateManager.select.ranges[this.table.stateManager.select.ranges.length - 1].start.row, this.table.stateManager.select.ranges[this.table.stateManager.select.ranges.length - 1].end.row);
                         const startCol = Math.min(this.table.stateManager.select.ranges[this.table.stateManager.select.ranges.length - 1].start.col, this.table.stateManager.select.ranges[this.table.stateManager.select.ranges.length - 1].end.col);
                         const startRow = Math.min(this.table.stateManager.select.ranges[this.table.stateManager.select.ranges.length - 1].start.row, this.table.stateManager.select.ranges[this.table.stateManager.select.ranges.length - 1].end.row);
-                        let lastCellBound;
+                        let lastCellBoundTargetX;
                         if (lastCol < this.table.colCount - 1) {
-                            lastCellBound = this.table.scenegraph.highPerformanceGetCell(lastCol, lastRow).globalAABBBounds;
+                            const lastCellBound = this.table.scenegraph.highPerformanceGetCell(lastCol, lastRow).globalAABBBounds;
+                            lastCellBoundTargetX = lastCellBound.x2;
                         }
                         else {
-                            lastCellBound = this.table.scenegraph.highPerformanceGetCell(startCol - 1, lastRow).globalAABBBounds;
+                            if (startCol === 0) {
+                                const lastCellBound = this.table.scenegraph.highPerformanceGetCell(0, lastRow).globalAABBBounds;
+                                lastCellBoundTargetX = lastCellBound.x1;
+                            }
+                            else {
+                                const lastCellBound = this.table.scenegraph.highPerformanceGetCell(startCol - 1, lastRow).globalAABBBounds;
+                                lastCellBoundTargetX = lastCellBound.x2;
+                            }
                         }
-                        const distanceX = Math.abs(eventArgsSet.abstractPos.x - lastCellBound.x2);
+                        const distanceX = Math.abs(eventArgsSet.abstractPos.x - lastCellBoundTargetX);
+                        let lastCellBoundTargetY;
                         if (lastRow < this.table.rowCount - 1) {
-                            lastCellBound = this.table.scenegraph.highPerformanceGetCell(lastCol, lastRow).globalAABBBounds;
+                            const lastCellBound = this.table.scenegraph.highPerformanceGetCell(lastCol, lastRow).globalAABBBounds;
+                            lastCellBoundTargetY = lastCellBound.y2;
                         }
                         else {
-                            lastCellBound = this.table.scenegraph.highPerformanceGetCell(lastCol, startRow - 1).globalAABBBounds;
+                            const lastCellBound = this.table.scenegraph.highPerformanceGetCell(lastCol, startRow - 1).globalAABBBounds;
+                            lastCellBoundTargetY = lastCellBound.y2;
                         }
-                        const distanceY = Math.abs(eventArgsSet.abstractPos.y - lastCellBound.y2);
+                        const distanceY = Math.abs(eventArgsSet.abstractPos.y - lastCellBoundTargetY);
                         const squareSize = 6 * 3;
                         if (this.table.stateManager.fillHandle?.isFilling ||
                             (distanceX <= squareSize / 2 && distanceY <= squareSize / 2)) {
@@ -63385,6 +63614,9 @@
             const rect = table.getCellRangeRelativeRect({ col, row });
             const element = table.internalProps.menu.parentElement ?? table.getElement();
             const { top, bottom, left, right } = rect;
+            if (col === -1 && row === -1) {
+                return true;
+            }
             if (table.isFrozenCell(col, row)) {
                 return true;
             }
@@ -64976,22 +65208,24 @@
         }
     }
     function generateLayoutTree(tree, children) {
-        children?.forEach((node) => {
-            const diemnsonNode = {
-                dimensionKey: node.dimensionKey,
-                indicatorKey: node.indicatorKey,
-                value: node.value,
-                hierarchyState: node.hierarchyState,
-                children: undefined,
-                virtual: node.virtual ?? false,
-                levelSpan: node.levelSpan ?? 1
-            };
-            tree.push(diemnsonNode);
-            if (node.children) {
-                diemnsonNode.children = [];
-                generateLayoutTree(diemnsonNode.children, node.children);
-            }
-        });
+        if (Array.isArray(children)) {
+            children?.forEach((node) => {
+                const diemnsonNode = {
+                    dimensionKey: node.dimensionKey,
+                    indicatorKey: node.indicatorKey,
+                    value: node.value,
+                    hierarchyState: node.hierarchyState,
+                    children: undefined,
+                    virtual: node.virtual ?? false,
+                    levelSpan: node.levelSpan ?? 1
+                };
+                tree.push(diemnsonNode);
+                if (node.children) {
+                    diemnsonNode.children = [];
+                    generateLayoutTree(diemnsonNode.children, node.children);
+                }
+            });
+        }
     }
     function countLayoutTree(children, countParentNode) {
         let count = 0;
@@ -67274,7 +67508,7 @@
             return TABLE_EVENT_TYPE;
         }
         options;
-        version = "1.0.13";
+        version = "1.0.15";
         pagination;
         id = `VTable${Date.now()}`;
         headerStyleCache;
@@ -67968,8 +68202,17 @@
                 widthP = this.canvasWidth - 1;
                 heightP = this.canvasHeight - 1;
             }
-            const width = Math.floor(widthP - getVerticalScrollBarSize(this.getTheme().scrollStyle));
-            const height = Math.floor(heightP - getHorizontalScrollBarSize(this.getTheme().scrollStyle));
+            const scrollStyle = this.getTheme().scrollStyle;
+            let vScrollBarWidth = 0;
+            let hScrollBarWidth = 0;
+            vScrollBarWidth = this.shouldVScrollBarWidthShow(widthP, heightP, scrollStyle)
+                ? getVerticalScrollBarSize(scrollStyle)
+                : 0;
+            hScrollBarWidth = this.shouldHScrollBarWidthShow(widthP, heightP, scrollStyle)
+                ? getHorizontalScrollBarSize(scrollStyle)
+                : 0;
+            const width = Math.floor(widthP - vScrollBarWidth);
+            const height = Math.floor(heightP - hScrollBarWidth);
             if (this.internalProps.theme?.frameStyle) {
                 const lineWidths = toBoxArray(this.internalProps.theme.frameStyle?.borderLineWidth ?? [null]);
                 const shadowWidths = toBoxArray(this.internalProps.theme.frameStyle?.shadowBlur ?? [0]);
@@ -67982,15 +68225,67 @@
                 else {
                     this.tableX = (lineWidths[3] ?? 0) + (shadowWidths[3] ?? 0);
                     this.tableY = (lineWidths[0] ?? 0) + (shadowWidths[0] ?? 0);
+                    const rightBorder = (lineWidths[1] ?? 0) + (shadowWidths[1] ?? 0);
                     this.tableNoFrameWidth =
-                        width - ((lineWidths[1] ?? 0) + (shadowWidths[1] ?? 0)) - ((lineWidths[3] ?? 0) + (shadowWidths[3] ?? 0));
+                        width -
+                            (rightBorder > vScrollBarWidth ? rightBorder - vScrollBarWidth : 0) -
+                            ((lineWidths[3] ?? 0) + (shadowWidths[3] ?? 0));
+                    const bottomBorder = (lineWidths[2] ?? 0) + (shadowWidths[2] ?? 0);
                     this.tableNoFrameHeight =
-                        height - ((lineWidths[0] ?? 0) + (shadowWidths[0] ?? 0)) - ((lineWidths[2] ?? 0) + (shadowWidths[2] ?? 0));
+                        height -
+                            (bottomBorder > hScrollBarWidth ? bottomBorder - hScrollBarWidth : 0) -
+                            ((lineWidths[0] ?? 0) + (shadowWidths[0] ?? 0));
                 }
             }
             this._clearColRangeWidthsMap();
             this._clearRowRangeHeightsMap();
         }
+        shouldVScrollBarWidthShow(tableWidth, tableHeight, scrollStyle) {
+            if (scrollStyle.hoverOn || scrollStyle.visible === 'none') {
+                return false;
+            }
+            const totalHeight = this.getAllRowsHeight();
+            const sizeTolerance = scrollStyle.visible ? getHorizontalScrollBarSize(scrollStyle) : 0;
+            const isHScrollBarDecideVScrollBar = totalHeight > tableHeight - sizeTolerance && totalHeight <= tableHeight;
+            if (isHScrollBarDecideVScrollBar) {
+                const totalWidth = this.getAllColsWidth();
+                const sizeTolerance = scrollStyle.visible ? getVerticalScrollBarSize(scrollStyle) : 0;
+                const isVScrollBarDecideHScrollBar = totalWidth > tableWidth - sizeTolerance && totalWidth <= tableWidth;
+                if (isVScrollBarDecideHScrollBar) {
+                    return false;
+                }
+                if (totalWidth > tableWidth) {
+                    return true;
+                }
+                if (totalWidth <= tableWidth - sizeTolerance) {
+                    return false;
+                }
+            }
+            return !(totalHeight <= tableHeight - sizeTolerance);
+        }
+        shouldHScrollBarWidthShow(tableWidth, tableHeight, scrollStyle) {
+            if (scrollStyle.hoverOn || scrollStyle.visible === 'none') {
+                return false;
+            }
+            const totalWidth = this.getAllColsWidth();
+            const sizeTolerance = scrollStyle.visible ? getVerticalScrollBarSize(scrollStyle) : 0;
+            const isVScrollBarDecideHScrollBar = totalWidth > tableWidth - sizeTolerance && totalWidth <= tableWidth;
+            if (isVScrollBarDecideHScrollBar) {
+                const totalHeight = this.getAllRowsHeight();
+                const sizeTolerance = scrollStyle.visible ? getHorizontalScrollBarSize(scrollStyle) : 0;
+                const isHScrollBarDecideVScrollBar = totalHeight > tableHeight - sizeTolerance && totalHeight <= tableHeight;
+                if (isHScrollBarDecideVScrollBar) {
+                    return false;
+                }
+                if (totalHeight > tableHeight) {
+                    return true;
+                }
+                if (totalHeight <= tableHeight - sizeTolerance) {
+                    return false;
+                }
+            }
+            return !(totalWidth <= tableWidth - sizeTolerance);
+        }
         updateViewBox(newViewBox) {
             const oldWidth = (this.options?.viewBox?.x2 ?? 0) - (this.options?.viewBox?.x1 ?? 0);
             const oldHeight = (this.options?.viewBox?.y2 ?? 0) - (this.options?.viewBox?.y1 ?? 0);
@@ -73128,7 +73423,7 @@
                 }
                 const expand = !hd.hierarchyState || hd.hierarchyState === HierarchyState.expand;
                 if (!!hd.columns && !!expand) {
-                    const isAllHided = hd.columns.every((c) => c.hide);
+                    const isAllHided = hd.columns.every((c) => c.hide) || hd.hide;
                     !isAllHided &&
                         this._addHeaders(maxRow + 1, hd.columns, [...roots, id], hd.hideColumnsSubHeader || hideColumnsSubHeader, hd.levelSpan).forEach(c => results.push(c));
                 }
@@ -74704,7 +74999,6 @@
             if (options.title) {
                 const Title = Factory.getComponent('title');
                 internalProps.title = new Title(options.title, this);
-                this.scenegraph.resize();
             }
             if (this.options.emptyTip) {
                 if (this.internalProps.emptyTip) {
@@ -74721,6 +75015,10 @@
                 this.listTreeStickCellPlugin = new ListTreeStickCellPlugin(this);
             }
             setTimeout(() => {
+                if (this.isReleased) {
+                    return;
+                }
+                this.resize();
                 this.fireListeners(TABLE_EVENT_TYPE.INITIALIZED, null);
             }, 0);
         }
@@ -74779,6 +75077,7 @@
             this.headerStyleCache = new Map();
             this.bodyStyleCache = new Map();
             this.bodyBottomStyleCache = new Map();
+            this._updateSize();
             this.scenegraph.createSceneGraph();
             this.stateManager.updateHoverPos(oldHoverState.col, oldHoverState.row);
             this.renderAsync();
@@ -75110,6 +75409,9 @@
                 table.colCount = layoutMap.colCount ?? 0;
                 table.rowCount = layoutMap.recordsCount * layoutMap.bodyRowSpanCount + layoutMap.headerLevelCount;
                 this.internalProps.frozenColCount = this.options.frozenColCount ?? 0;
+                if (this.options.frozenColCount >= this.colCount) {
+                    this.internalProps.frozenColCount = 0;
+                }
                 table.frozenRowCount = Math.max(layoutMap.headerLevelCount, this.options.frozenRowCount ?? 0);
                 if (table.bottomFrozenRowCount !== (this.options.bottomFrozenRowCount ?? 0)) {
                     table.bottomFrozenRowCount = this.options.bottomFrozenRowCount ?? 0;
@@ -75440,6 +75742,7 @@
             this.refreshRowColCount();
             this.stateManager.initCheckedState(this.records);
             this.scenegraph.createSceneGraph();
+            this.resize();
         }
         getCheckboxState(field) {
             if (this.stateManager.checkedState.size < this.rowCount - this.columnHeaderLevelCount) {
@@ -75554,11 +75857,11 @@
             this.clearCellStyleCache();
             this.scenegraph.createSceneGraph();
             this.stateManager.updateHoverPos(oldHoverState.col, oldHoverState.row);
+            this._updateSize();
             if (this.internalProps.title && !this.internalProps.title.isReleased) {
-                this._updateSize();
                 this.internalProps.title.resize();
-                this.scenegraph.resize();
             }
+            this.scenegraph.resize();
             if (this.options.emptyTip) {
                 if (this.internalProps.emptyTip) {
                     this.internalProps.emptyTip?.resetVisible();
@@ -75725,21 +76028,6 @@
             }
             return this.dataSource.getTableIndex(index);
         }
-        _parseColumnWidthConfig(columnWidthConfig) {
-            for (let i = 0; i < columnWidthConfig?.length; i++) {
-                const item = columnWidthConfig[i];
-                const key = item.key;
-                const width = item.width;
-                const columnData = this.internalProps.layoutMap.getColumnByKey(key);
-                if (columnData.columnDefine) {
-                    const { col } = columnData;
-                    if (!this.internalProps._widthResizedColMap.has(col)) {
-                        this._setColWidth(col, width);
-                        this.internalProps._widthResizedColMap.add(col);
-                    }
-                }
-            }
-        }
         release() {
             this.editorManager.release();
             super.release();
@@ -77872,10 +78160,11 @@
             if (!this.legendComponent || this.visible === false) {
                 return;
             }
-            this.legendComponent.setAttributes({
-                maxWidth: this.table.tableNoFrameWidth,
-                maxHeight: this.table.tableNoFrameHeight
+            const attrs = this.getLegendAttributes({
+                width: this.table.tableNoFrameWidth,
+                height: this.table.tableNoFrameHeight
             });
+            this.legendComponent.setAttributes(attrs);
             this.adjustTableSize(this.legendComponent.attribute);
         }
         adjustTableSize(attrs) {
@@ -78565,6 +78854,19 @@
         }
     };
     function getMenuInstanceInfo(table, col, row, type, dropDownMenuOptions) {
+        if (col === -1 && row === -1 && type === 'context-menu') {
+            if (dropDownMenuOptions?.content) {
+                return {
+                    type,
+                    position: dropDownMenuOptions.position,
+                    referencePosition: dropDownMenuOptions.referencePosition ?? {
+                        rect: { left: 0, right: 0, top: 0, bottom: 0, width: 0, height: 0 }
+                    },
+                    content: dropDownMenuOptions.content
+                };
+            }
+            return null;
+        }
         const { lineHeight, textBaseline, textStick } = table._getCellStyle(col, row);
         let rect = table.getCellRangeRelativeRect(table.getCellRange(col, row));
         if (textStick) {
@@ -78647,7 +78949,9 @@
             const { instance, info: menuInstanceInfo } = instanceInfo;
             const attach = instance && instance.bindMenuElement(col, row, menuInstanceInfo);
             if (attach) {
-                const range = this._table.getCellRange(col, row);
+                const range = col === -1 && row === -1
+                    ? { start: { col: -1, row: -1 }, end: { col: -1, row: -1 } }
+                    : this._table.getCellRange(col, row);
                 this._attachInfo = { range, instance };
             }
         }
@@ -78708,6 +79012,22 @@
                     });
                 }
             });
+            table.on(TABLE_EVENT_TYPE.CONTEXTMENU_CANVAS, e => {
+                if (table.internalProps.menu?.renderMode === 'html') {
+                    const abstractPos = table._getMouseAbstractPoint(e.event);
+                    let menu = null;
+                    if (abstractPos.inTable && typeof table.internalProps.menu?.contextMenuItems === 'function') {
+                        menu = table.internalProps.menu.contextMenuItems(table.getHeaderField(e.col, e.row), e.row, e.col, table);
+                    }
+                    else if (abstractPos.inTable && Array.isArray(table.internalProps.menu?.contextMenuItems)) {
+                        menu = table.internalProps.menu?.contextMenuItems;
+                    }
+                    this._bindToCell(-1, -1, 'context-menu', {
+                        content: menu,
+                        position: { x: abstractPos.x, y: abstractPos.y }
+                    });
+                }
+            });
         }
         _getMenuInstanceInfo(col, row, type, dropDownMenuOptions) {
             const table = this._table;
@@ -84807,10 +85127,10 @@
                 needLowestLevel_colPaths = true;
                 needLowestLevel_rowPaths = true;
             }
-            if (colHeaderPaths.length >= this._getColumnHeaderTreeExpandedMaxLevelCount()) {
+            if ((colHeaderPaths?.length ?? 0) && colHeaderPaths.length >= this._getColumnHeaderTreeExpandedMaxLevelCount()) {
                 needLowestLevel_colPaths = true;
             }
-            if (rowHeaderPaths.length >= this._getRowHeaderTreeExpandedMaxLevelCount()) {
+            if ((rowHeaderPaths?.length ?? 0) && rowHeaderPaths.length >= this._getRowHeaderTreeExpandedMaxLevelCount()) {
                 needLowestLevel_rowPaths = true;
             }
             let col;
@@ -87859,7 +88179,6 @@
                 if (options.title) {
                     const Title = Factory.getComponent('title');
                     this.internalProps.title = new Title(options.title, this);
-                    this.scenegraph.resize();
                 }
                 if (this.options.emptyTip) {
                     if (this.internalProps.emptyTip) {
@@ -87872,6 +88191,10 @@
                     }
                 }
                 setTimeout(() => {
+                    if (this.isReleased) {
+                        return;
+                    }
+                    this.resize();
                     this.fireListeners(TABLE_EVENT_TYPE.INITIALIZED, null);
                 }, 0);
             }
@@ -88110,7 +88433,7 @@
             if (sourceNode.value === targetNode.value && sourceNode.dimensionKey === targetNode.dimensionKey) {
                 targetNode.hierarchyState =
                     targetNode.hierarchyState ?? (targetNode?.children ? sourceNode.hierarchyState : undefined);
-                targetNode?.children?.forEach((targetChildNode, index) => {
+                targetNode?.children?.forEach?.((targetChildNode, index) => {
                     if (sourceNode?.children?.[index] && targetChildNode) {
                         const beforeRowDimension = sourceNode.children.find((item) => item.dimensionKey === targetChildNode.dimensionKey && item.value === targetChildNode.value);
                         if (beforeRowDimension) {
@@ -88579,60 +88902,6 @@
                 });
             }
         }
-        _parseColumnWidthConfig(columnWidthConfig) {
-            for (let i = 0; i < columnWidthConfig?.length; i++) {
-                const item = columnWidthConfig[i];
-                const dimensions = item.dimensions;
-                const width = item.width;
-                const cell = this.getCellAddressByHeaderPaths(dimensions);
-                if (cell && cell.col >= this.rowHeaderLevelCount) {
-                    const cellPath = this.getCellHeaderPaths(cell.col, this.columnHeaderLevelCount);
-                    if (cellPath.colHeaderPaths.length === dimensions.length) {
-                        let match = true;
-                        for (let i = 0; i < dimensions.length; i++) {
-                            const dimension = dimensions[i];
-                            const finded = cellPath.colHeaderPaths.findIndex((colPath, index) => {
-                                if (colPath.indicatorKey === dimension.indicatorKey) {
-                                    return true;
-                                }
-                                if (colPath.dimensionKey === dimension.dimensionKey && colPath.value === dimension.value) {
-                                    return true;
-                                }
-                                return false;
-                            });
-                            if (finded < 0) {
-                                match = false;
-                                break;
-                            }
-                        }
-                        if (match && !this.internalProps._widthResizedColMap.has(cell.col)) {
-                            this._setColWidth(cell.col, width);
-                            this.internalProps._widthResizedColMap.add(cell.col);
-                        }
-                    }
-                }
-                else if (cell && cell.col < this.rowHeaderLevelCount) {
-                    if (!this.internalProps._widthResizedColMap.has(cell.col)) {
-                        this._setColWidth(cell.col, width);
-                        this.internalProps._widthResizedColMap.add(cell.col);
-                    }
-                }
-            }
-        }
-        _parseColumnWidthConfigForRowHeader(columnWidthConfig) {
-            for (let i = 0; i < columnWidthConfig?.length; i++) {
-                const item = columnWidthConfig[i];
-                const dimensions = item.dimensions;
-                const width = item.width;
-                const cell = this.getCellAddressByHeaderPaths(dimensions);
-                if (cell && cell.col < this.rowHeaderLevelCount) {
-                    if (!this.internalProps._widthResizedColMap.has(cell.col)) {
-                        this._setColWidth(cell.col, width);
-                        this.internalProps._widthResizedColMap.add(cell.col);
-                    }
-                }
-            }
-        }
         updatePivotSortState(pivotSortStateConfig) {
             this.pivotSortState = pivotSortStateConfig;
         }
@@ -89504,6 +89773,8 @@
             this.internalProps.columnResizeType = options.resize?.columnResizeType ?? options.columnResizeType ?? 'column';
             this.internalProps.rowResizeType = options.resize?.rowResizeType ?? options.rowResizeType ?? 'row';
             this.internalProps.dataConfig = { isPivotChart: true };
+            this.internalProps.columnWidthConfig = options.columnWidthConfig;
+            this.internalProps.columnWidthConfigForRowHeader = options.columnWidthConfigForRowHeader;
             this._axes = isArray$7(options.axes) ? options.axes : [];
             let columnDimensionTree;
             let rowDimensionTree;
@@ -89601,7 +89872,6 @@
             if (options.title) {
                 const Title = Factory.getComponent('title');
                 this.internalProps.title = new Title(options.title, this);
-                this.scenegraph.resize();
             }
             if (this.options.emptyTip) {
                 if (this.internalProps.emptyTip) {
@@ -89614,6 +89884,10 @@
                 }
             }
             setTimeout(() => {
+                if (this.isReleased) {
+                    return;
+                }
+                this.resize();
                 this.fireListeners(TABLE_EVENT_TYPE.INITIALIZED, null);
             }, 0);
         }
@@ -89664,6 +89938,8 @@
             internalProps.columnResizeType = options.resize?.columnResizeType ?? options.columnResizeType ?? 'column';
             internalProps.rowResizeType = options.resize?.rowResizeType ?? options.rowResizeType ?? 'row';
             internalProps.dataConfig = { isPivotChart: true };
+            this.internalProps.columnWidthConfig = options.columnWidthConfig;
+            this.internalProps.columnWidthConfigForRowHeader = options.columnWidthConfigForRowHeader;
             this._axes = isArray$7(options.axes) ? options.axes : [];
             let columnDimensionTree;
             let rowDimensionTree;
@@ -91170,7 +91446,7 @@
     }
 
     registerForVrender();
-    const version = "1.0.13";
+    const version = "1.0.15";
     function getIcons() {
         return get$2();
     }