@visactor/vtable-gantt 1.5.4 → 1.6.0-alpha.4

package/dist/vtable-gantt.js

@@ -29202,6 +29202,10 @@
             },
             get inlineRowBgColor() {
               return null == selectionStyle ? void 0 : selectionStyle.inlineRowBgColor;
+            },
+            get selectionFillMode() {
+              var _a;
+              return null !== (_a = null == selectionStyle ? void 0 : selectionStyle.selectionFillMode) && void 0 !== _a ? _a : "overlay";
             }
           };
         }
@@ -29322,6 +29326,10 @@
               get inlineRowBgColor() {
                 var _a, _b, _c, _d, _e;
                 return null !== (_e = null !== (_c = null !== (_b = null === (_a = style.select) || void 0 === _a ? void 0 : _a.inlineRowBgColor) && void 0 !== _b ? _b : that.selectionStyle.inlineRowBgColor) && void 0 !== _c ? _c : (null === (_d = that.selectionStyle) || void 0 === _d ? void 0 : _d.cellBgColor) && "string" == typeof that.selectionStyle.cellBgColor ? changeColor(that.selectionStyle.cellBgColor, .1, !1) : void 0) && void 0 !== _e ? _e : void 0;
+              },
+              get cellBgColor() {
+                var _a, _b, _c;
+                if ("replace" === that.selectionStyle.selectionFillMode) return null !== (_c = null !== (_b = null === (_a = style.select) || void 0 === _a ? void 0 : _a.cellBgColor) && void 0 !== _b ? _b : that.selectionStyle.cellBgColor) && void 0 !== _c ? _c : void 0;
               }
             };
           },
@@ -30911,8 +30919,8 @@
       };
     }
     class ReactCustomLayout {
-      constructor(table) {
-        this.table = table, this.customLayoutFuncCache = new Map(), this.reactRemoveGraphicCache = new Map(), this.headerCustomLayoutFuncCache = new Map(), this.headerReactRemoveGraphicCache = new Map();
+      constructor(removeAllContainer, table) {
+        this.removeAllContainer = removeAllContainer, this.table = table, this.customLayoutFuncCache = new Map(), this.reactRemoveGraphicCache = new Map(), this.headerCustomLayoutFuncCache = new Map(), this.headerReactRemoveGraphicCache = new Map();
       }
       hasReactCreateGraphic(componentId, isHeaderCustomLayout) {
         return isHeaderCustomLayout ? this.headerCustomLayoutFuncCache.has(componentId) : this.customLayoutFuncCache.has(componentId);
@@ -30967,6 +30975,9 @@
         }
         removeFun && removeFun(col, row);
       }
+      clearCache() {
+        this.removeAllContainer();
+      }
     }
     function getUpdateCustomCellRangeInListTable(componentId, table, isHeaderCustomLayout) {
       const rowSeriesNumber = table.internalProps.rowSeriesNumber ? 1 : 0;
@@ -32017,7 +32028,8 @@
             x: 0,
             y: 0,
             fill: !1,
-            stroke: !1
+            stroke: !1,
+            pickable: !1
           });
           cellContent.name = "content", cellContent.setCellContentOption({
             autoWidth: autoColWidth,
@@ -32113,10 +32125,10 @@
         let newHeight = Math.max(leftIconHeight, contentHeight, rightIconHeight);
         if (isCellHeightUpdate(scene, cellGroup, Math.round(newHeight + padding[0] + padding[2]), oldCellHeight)) return !0;
         newHeight = (null !== (_d = cellGroup.contentHeight) && void 0 !== _d ? _d : cellHeight) - (padding[0] + padding[2]), cellGroup.forEachChildren(child => {
-          "rect" !== child.type && "chart" !== child.type && ("mark" === child.name ? child.setAttribute("y", 0) : "middle" === textBaseline ? child.setAttribute("y", padding[0] + (newHeight - child.AABBBounds.height()) / 2) : "bottom" === textBaseline ? child.setAttribute("y", padding[0] + newHeight - child.AABBBounds.height()) : child.setAttribute("y", padding[0]));
+          "rect" !== child.type && "chart" !== child.type && child.name !== CUSTOM_CONTAINER_NAME && ("mark" === child.name ? child.setAttribute("y", 0) : "middle" === textBaseline ? child.setAttribute("y", padding[0] + (newHeight - child.AABBBounds.height()) / 2) : "bottom" === textBaseline ? child.setAttribute("y", padding[0] + newHeight - child.AABBBounds.height()) : child.setAttribute("y", padding[0]));
         });
       } else "middle" !== textBaseline && "bottom" !== textBaseline || cellGroup.forEachChildren(child => {
-        "rect" !== child.type && "chart" !== child.type && ("mark" === child.name ? child.setAttribute("y", 0) : "middle" === textBaseline ? child.setAttribute("y", (cellHeight - padding[2] + padding[0] - child.AABBBounds.height()) / 2) : "bottom" === textBaseline ? child.setAttribute("y", cellHeight - child.AABBBounds.height() - padding[2]) : child.setAttribute("y", padding[0]));
+        "rect" !== child.type && "chart" !== child.type && child.name !== CUSTOM_CONTAINER_NAME && ("mark" === child.name ? child.setAttribute("y", 0) : "middle" === textBaseline ? child.setAttribute("y", (cellHeight - padding[2] + padding[0] - child.AABBBounds.height()) / 2) : "bottom" === textBaseline ? child.setAttribute("y", cellHeight - child.AABBBounds.height() - padding[2]) : child.setAttribute("y", padding[0]));
       });
       return !1;
     }
@@ -32131,7 +32143,7 @@
         cellGroup.getChildByName("content").updateHeight(newHeight);
       }
       cellGroup.forEachChildren(child => {
-        child.setAttribute("dy", 0), "rect" === child.type || "chart" === child.type || ("mark" === child.name ? child.setAttribute("y", 0) : "middle" === textBaseline ? child.setAttribute("y", padding[0] + (newHeight - child.AABBBounds.height()) / 2) : "bottom" === textBaseline ? child.setAttribute("y", padding[0] + newHeight - child.AABBBounds.height()) : child.setAttribute("y", padding[0]));
+        child.setAttribute("dy", 0), "rect" === child.type || "chart" === child.type || child.name === CUSTOM_CONTAINER_NAME || ("mark" === child.name ? child.setAttribute("y", 0) : "middle" === textBaseline ? child.setAttribute("y", padding[0] + (newHeight - child.AABBBounds.height()) / 2) : "bottom" === textBaseline ? child.setAttribute("y", padding[0] + newHeight - child.AABBBounds.height()) : child.setAttribute("y", padding[0]));
       });
     }
     function isCellHeightUpdate(scene, cellGroup, newHeight, oldHeight) {
@@ -33344,7 +33356,7 @@
           if (customMergeRange) for (let mergeRow = customMergeRange.start.row; mergeRow <= customMergeRange.end.row; mergeRow++) {
             if (mergeRow === row) continue;
             const mergedCell = scene.getCell(col, mergeRow),
-              customContainer = cell.getChildByName(CUSTOM_CONTAINER_NAME) || cell.getChildByName(CUSTOM_MERGE_CONTAINER_NAME);
+              customContainer = mergedCell.getChildByName(CUSTOM_CONTAINER_NAME) || mergedCell.getChildByName(CUSTOM_MERGE_CONTAINER_NAME);
             customContainer.removeAllChild(), mergedCell.removeChild(customContainer), getCustomCellMergeCustom(col, mergeRow, mergedCell, scene.table);
           } else {
             let customRender, customLayout;
@@ -33539,7 +33551,7 @@
           if (customMergeRange) for (let mergeCol = customMergeRange.start.col; mergeCol <= customMergeRange.end.col; mergeCol++) {
             if (mergeCol === col) continue;
             const mergedCell = scene.getCell(mergeCol, row),
-              customContainer = mergedCell.getChildByName(CUSTOM_CONTAINER_NAME) || cell.getChildByName(CUSTOM_MERGE_CONTAINER_NAME);
+              customContainer = mergedCell.getChildByName(CUSTOM_CONTAINER_NAME) || mergedCell.getChildByName(CUSTOM_MERGE_CONTAINER_NAME);
             customContainer.removeAllChild(), mergedCell.removeChild(customContainer), getCustomCellMergeCustom(mergeCol, row, mergedCell, scene.table);
           } else {
             let customRender, customLayout;
@@ -34826,18 +34838,39 @@
       return isHandlingChartQueue;
     }
     function renderChart(chart) {
-      var _a, _b, _c, _d, _e, _f;
+      var _a, _b, _c, _d;
       const {
-          axes: axes,
-          dataId: dataId,
-          data: data,
-          spec: spec
-        } = chart.attribute,
-        {
-          chartInstance: chartInstance
-        } = chart,
-        viewBox = chart.getViewBox();
-      viewBox.x2 <= viewBox.x1 && (viewBox.x2 = viewBox.x1 + 1), viewBox.y2 <= viewBox.y1 && (viewBox.y2 = viewBox.y1 + 1), null == axes || axes.forEach((axis, index) => {
+        axes: axes,
+        dataId: dataId,
+        data: data,
+        spec: spec,
+        ClassType: ClassType,
+        canvas: canvas,
+        mode: mode,
+        modeParams: modeParams,
+        dpr: dpr
+      } = chart.attribute;
+      let {
+        chartInstance: chartInstance
+      } = chart;
+      chartInstance || (chartInstance = new ClassType(spec, {
+        renderCanvas: canvas,
+        mode: "node" === mode ? "node" : "desktop-browser",
+        modeParams: modeParams,
+        canvasControled: !1,
+        viewBox: {
+          x1: 0,
+          x2: 0,
+          y1: 0,
+          y2: 0
+        },
+        dpr: dpr,
+        interactive: !1,
+        animation: !1,
+        autoFit: !1
+      }), chartInstance.renderSync(), chart.chartInstance = chartInstance);
+      const viewBox = chart.getViewBox();
+      if (viewBox.x2 <= viewBox.x1 && (viewBox.x2 = viewBox.x1 + 1), viewBox.y2 <= viewBox.y1 && (viewBox.y2 = viewBox.y1 + 1), null == axes || axes.forEach((axis, index) => {
         var _a, _b, _c, _d;
         "band" === axis.type ? chartInstance.updateModelSpec({
           type: "axes",
@@ -34856,8 +34889,7 @@
         x2: viewBox.x2 - chart.getRootNode().table.scrollLeft,
         y1: viewBox.y1 - chart.getRootNode().table.scrollTop,
         y2: viewBox.y2 - chart.getRootNode().table.scrollTop
-      }, !1, !1);
-      if (null === (_b = null === (_a = chart.getRootNode().table.internalProps.layoutMap) || void 0 === _a ? void 0 : _a.updateDataStateToActiveChartInstance) || void 0 === _b || _b.call(_a, chartInstance), "string" == typeof dataId) chartInstance.updateDataSync(dataId, null != data ? data : []);else {
+      }, !1, !1), "string" == typeof dataId) chartInstance.updateDataSync(dataId, null != data ? data : []);else {
         const dataBatch = [];
         for (const dataIdStr in dataId) {
           const dataIdAndField = dataId[dataIdStr],
@@ -34867,11 +34899,11 @@
             });
           dataBatch.push({
             id: dataIdStr,
-            values: dataIdAndField ? null !== (_c = null == data ? void 0 : data.filter(item => item.hasOwnProperty(dataIdAndField))) && void 0 !== _c ? _c : [] : null != data ? data : [],
-            fields: null === (_d = null == series ? void 0 : series.data) || void 0 === _d ? void 0 : _d.fields
-          }), chartInstance.updateFullDataSync || chartInstance.updateDataSync(dataIdStr, dataIdAndField ? null !== (_e = null == data ? void 0 : data.filter(item => item.hasOwnProperty(dataIdAndField))) && void 0 !== _e ? _e : [] : null != data ? data : []);
+            values: dataIdAndField ? null !== (_a = null == data ? void 0 : data.filter(item => item.hasOwnProperty(dataIdAndField))) && void 0 !== _a ? _a : [] : null != data ? data : [],
+            fields: null === (_b = null == series ? void 0 : series.data) || void 0 === _b ? void 0 : _b.fields
+          }), chartInstance.updateFullDataSync || chartInstance.updateDataSync(dataIdStr, dataIdAndField ? null !== (_c = null == data ? void 0 : data.filter(item => item.hasOwnProperty(dataIdAndField))) && void 0 !== _c ? _c : [] : null != data ? data : []);
         }
-        null === (_f = chartInstance.updateFullDataSync) || void 0 === _f || _f.call(chartInstance, dataBatch);
+        null === (_d = chartInstance.updateFullDataSync) || void 0 === _d || _d.call(chartInstance, dataBatch);
       }
       cacheStageCanvas(chartInstance.getStage(), chart);
     }
@@ -35111,6 +35143,12 @@
           }
           cellDisable && (selectMode = void 0);
         }
+      } else if ("replace" === state.table.theme.selectionStyle.selectionFillMode) for (let i = 0; i < ranges.length; i++) {
+        const range = ranges[i];
+        if (range.start.col <= col && range.start.row <= row && range.end.col >= col && range.end.row >= row) {
+          selectMode = "cellBgColor";
+          break;
+        }
       }
       return selectMode;
     }
@@ -37371,7 +37409,7 @@
     }
 
     function createCellSelectBorder(scene, start_Col, start_Row, end_Col, end_Row, selectRangeType, selectId, strokes) {
-      var _a, _b, _c, _d, _e, _f, _g;
+      var _a, _b, _c, _d, _e, _f, _g, _h;
       let isHasFillHandleRect = !!(null === (_a = scene.table.options.excelOptions) || void 0 === _a ? void 0 : _a.fillHandle);
       if ((null === (_b = scene.table.stateManager.select.ranges) || void 0 === _b ? void 0 : _b.length) > 1) isHasFillHandleRect = !1, scene.removeFillHandleFromSelectComponents();else if (1 === (null === (_c = scene.table.stateManager.select.ranges) || void 0 === _c ? void 0 : _c.length)) {
         const maxRow = Math.max(scene.table.stateManager.select.ranges[0].start.row, scene.table.stateManager.select.ranges[0].end.row),
@@ -37390,7 +37428,7 @@
         bodyClickLineWidth = null === (_e = theme.selectionStyle) || void 0 === _e ? void 0 : _e.cellBorderLineWidth,
         rect = createRect({
           pickable: !1,
-          fill: null !== (_g = null === (_f = theme.selectionStyle) || void 0 === _f ? void 0 : _f.cellBgColor) && void 0 !== _g ? _g : "rgba(0, 0, 255,0.1)",
+          fill: "replace" !== (null === (_f = theme.selectionStyle) || void 0 === _f ? void 0 : _f.selectionFillMode) && (null !== (_h = null === (_g = theme.selectionStyle) || void 0 === _g ? void 0 : _g.cellBgColor) && void 0 !== _h ? _h : "rgba(0, 0, 255,0.1)"),
           lineWidth: bodyClickLineWidth,
           stroke: strokes.map(stroke => !!stroke && bodyClickBorderColor),
           x: firstCellBound.x1 - scene.tableGroup.attribute.x,
@@ -37887,7 +37925,7 @@
       newNode && container && (targetGroup ? container.insertBefore(newNode, targetGroup) : container.appendChild(newNode));
     }
 
-    function updateChartSize(scenegraph, col) {
+    function updateChartSizeForResizeColWidth(scenegraph, col) {
       var _a, _b;
       for (let c = col; c <= scenegraph.proxy.colEnd; c++) {
         const columnGroup = scenegraph.getColGroup(c);
@@ -37910,6 +37948,19 @@
         });
       }
     }
+    function updateChartSizeForResizeRowHeight(scenegraph, row) {
+      const updateCellNode = (c, r) => {
+        const cellNode = scenegraph.getCell(c, r),
+          width = scenegraph.table.getColWidth(cellNode.col),
+          height = scenegraph.table.getRowHeight(cellNode.row);
+        cellNode.children.forEach(node => {
+          "chart" === node.type && (node.cacheCanvas = null, node.setAttribute("width", Math.ceil(width - node.attribute.cellPadding[3] - node.attribute.cellPadding[1])), node.setAttribute("height", Math.ceil(height - node.attribute.cellPadding[0] - node.attribute.cellPadding[2])));
+        });
+      };
+      for (let c = scenegraph.proxy.colStart; c <= scenegraph.proxy.colEnd; c++) for (let r = row; r <= scenegraph.proxy.rowEnd; r++) updateCellNode(c, r);
+      if (scenegraph.table.rightFrozenColCount >= 1) for (let c = scenegraph.table.colCount - scenegraph.table.rightFrozenColCount; c <= scenegraph.table.colCount - 1; c++) for (let r = row; r <= scenegraph.proxy.rowEnd; r++) updateCellNode(c, r);
+      if (scenegraph.table.frozenColCount >= 1) for (let c = 0; c <= scenegraph.table.frozenColCount - 1; c++) for (let r = row; r <= scenegraph.proxy.rowEnd; r++) updateCellNode(c, r);
+    }
     function clearChartCacheImage(scenegraph) {
       var _a;
       for (let c = scenegraph.proxy.colStart; c <= scenegraph.proxy.colEnd; c++) {
@@ -38433,7 +38484,7 @@
         this.isPivot = this.table.isPivotTable(), initSceneGraph(this);
       }
       clearCells() {
-        var _a;
+        var _a, _b;
         (this.table.isPivotChart() || this.table._hasCustomRenderOrLayout()) && this.stage.pluginService.findPluginsByName("poptipForText").forEach(plugin => {
           plugin.deactivate(this.stage.pluginService);
         }), this.clear = !0, this.hasFrozen = !1, this.mergeMap.clear(), this.colHeaderGroup.clear(), this.rowHeaderGroup.clear(), this.cornerHeaderGroup.clear(), this.bodyGroup.clear(), this.bottomFrozenGroup.clear(), this.rightFrozenGroup.clear(), this.rightTopCornerGroup.clear(), this.rightBottomCornerGroup.clear(), this.leftBottomCornerGroup.clear(), this.colHeaderGroup.setAttributes({
@@ -38489,7 +38540,7 @@
           y: this.table.tableY,
           width: 0,
           height: 0
-        }), this.tableGroup.border && (this.tableGroup.parent.removeChild(this.tableGroup.border), delete this.tableGroup.border), null === (_a = this.proxy) || void 0 === _a || _a.release();
+        }), this.tableGroup.border && (this.tableGroup.parent.removeChild(this.tableGroup.border), delete this.tableGroup.border), null === (_a = this.proxy) || void 0 === _a || _a.release(), null === (_b = this.table.reactCustomLayout) || void 0 === _b || _b.clearCache();
       }
       updateStageBackground() {
         this.stage.background = this.table.theme.underlayBackgroundColor, this.stage.renderNextFrame();
@@ -38502,7 +38553,7 @@
       }
       createSceneGraph() {
         let skipRowHeightClear = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !1;
-        skipRowHeightClear || this.table.rowHeightsMap.clear(), (this.table.isPivotChart() || this.table._hasCustomRenderOrLayout()) && this.stage.pluginService.autoEnablePlugins.getContributions().forEach(p => {
+        skipRowHeightClear || (this.table.rowHeightsMap.clear(), this.table.internalProps.layoutMap.clearCellRangeMap()), (this.table.isPivotChart() || this.table._hasCustomRenderOrLayout()) && this.stage.pluginService.autoEnablePlugins.getContributions().forEach(p => {
           "poptipForText" === p.name && this.stage.pluginService.register(p);
         }), this.clear = !1, this.frozenColCount = this.table.frozenColCount, this.frozenRowCount = this.table.frozenRowCount, this.proxy = new SceneProxy(this.table), createFrameBorder(this.tableGroup, this.table.theme.frameStyle, this.tableGroup.role, void 0, !0), this.table.isPivotChart() && (createCornerCell(this.rightTopCornerGroup, this.table.theme.cornerRightTopCellStyle || this.table.theme.cornerHeaderStyle || {}), createCornerCell(this.leftBottomCornerGroup, this.table.theme.cornerLeftBottomCellStyle || this.table.theme.cornerHeaderStyle || {}), createCornerCell(this.rightBottomCornerGroup, this.table.theme.cornerRightBottomCellStyle || this.table.theme.cornerHeaderStyle || {})), this.proxy.createGroupForFirstScreen(this.cornerHeaderGroup, this.colHeaderGroup, this.rowHeaderGroup, this.rightFrozenGroup, this.bottomFrozenGroup, this.bodyGroup, 0, 0), this.afterScenegraphCreated();
       }
@@ -38617,7 +38668,7 @@
         deleteLastSelectedRangeComponents(this);
       }
       deleteAllSelectBorder() {
-        deleteAllSelectBorder(this);
+        deleteAllSelectBorder(this), deleteAllSelectingBorder(this);
       }
       updateCellSelectBorder(selectRange) {
         let extendSelectRange = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
@@ -38634,8 +38685,11 @@
       updateColWidth(col, detaX, skipUpdateContainer, skipTableWidthMap) {
         updateColWidth(this, col, Math.round(detaX), skipTableWidthMap), skipUpdateContainer || this.updateContainer(!0);
       }
-      updateChartSize(col) {
-        updateChartSize(this, col);
+      updateChartSizeForResizeColWidth(col) {
+        updateChartSizeForResizeColWidth(this, col);
+      }
+      updateChartSizeForResizeRowHeight(col) {
+        updateChartSizeForResizeRowHeight(this, col);
       }
       updateChartState(datum) {
         this.table.isPivotChart() && updateChartState(this, datum);
@@ -38683,7 +38737,7 @@
         table.internalProps.useOneRowHeightFillAll = !1, "adaptive" === table.heightMode || table.autoFillHeight ? computeRowsHeight(this.table, 0, this.table.rowCount - 1, !0, !0) : (table.frozenRowCount > 0 && computeRowsHeight(this.table, 0, table.frozenRowCount - 1, !0, !0), table.bottomFrozenRowCount > 0 && computeRowsHeight(this.table, table.bottomFrozenRowCount, table.rowCount - 1, !0, !0), computeRowsHeight(table, this.proxy.rowStart, this.proxy.rowEnd, !0, !0));
       }
       resize() {
-        this.proxy.resize(), ("adaptive" === this.table.widthMode || this.table.autoFillWidth) && (0 === this.table.internalProps._widthResizedColMap.size ? this.recalculateColWidths() : this.dealWidthMode()), "adaptive" === this.table.heightMode ? 0 === this.table.internalProps._heightResizedRowMap.size ? this.recalculateRowHeights() : this.dealHeightMode() : this.table.autoFillHeight && this.dealHeightMode(), this.resetFrozen(), this.updateTableSize(), this.updateBorderSizeAndPosition(), this.component.updateScrollBar(), ("adaptive" === this.table.widthMode || "adaptive" === this.table.heightMode || this.table.autoFillWidth || this.table.autoFillHeight) && this.updateChartSize(this.table.rowHeaderLevelCount), this.proxy.progress(), this.updateNextFrame();
+        this.proxy.resize(), ("adaptive" === this.table.widthMode || this.table.autoFillWidth) && (0 === this.table.internalProps._widthResizedColMap.size ? this.recalculateColWidths() : this.dealWidthMode()), "adaptive" === this.table.heightMode ? 0 === this.table.internalProps._heightResizedRowMap.size ? this.recalculateRowHeights() : this.dealHeightMode() : this.table.autoFillHeight && this.dealHeightMode(), this.resetFrozen(), this.updateTableSize(), this.updateBorderSizeAndPosition(), this.component.updateScrollBar(), ("adaptive" === this.table.widthMode || "adaptive" === this.table.heightMode || this.table.autoFillWidth || this.table.autoFillHeight) && this.updateChartSizeForResizeColWidth(this.table.rowHeaderLevelCount), this.proxy.progress(), this.updateNextFrame();
       }
       updateTableSize() {
         var _a, _b, _c, _d;
@@ -39554,17 +39608,18 @@
         col: col,
         row: row
       }, state.table);
-      state.columnMove.x = x - state.table.tableX, state.columnMove.y = y - state.table.tableY, state.columnMove.colTarget = targetCell.col, state.columnMove.rowTarget = targetCell.row;
-      let lineX, backX, lineY, backY;
-      state.table.internalProps.layoutMap.canMoveHeaderPosition({
+      if (state.table.internalProps.layoutMap.canMoveHeaderPosition({
         col: state.columnMove.colSource,
         row: state.columnMove.rowSource
       }, {
-        col: state.columnMove.colTarget,
-        row: state.columnMove.rowTarget
-      }) ? state.updateCursor("grabbing") : state.updateCursor("not-allowed");
-      const cellLocation = state.table.getCellLocation(state.columnMove.colSource, state.columnMove.rowSource);
-      "columnHeader" === cellLocation ? (backX = state.columnMove.x, lineX = state.table.isLeftFrozenColumn(col) ? state.columnMove.colTarget >= state.columnMove.colSource ? state.table.getColsWidth(0, state.columnMove.colTarget) : state.table.getColsWidth(0, state.columnMove.colTarget - 1) : state.table.isRightFrozenColumn(col) ? state.table.tableNoFrameWidth - state.table.getColsWidth(targetCell.col + 1, state.table.colCount - 1) : (state.columnMove.colTarget >= state.columnMove.colSource ? state.table.getColsWidth(0, state.columnMove.colTarget) : state.table.getColsWidth(0, state.columnMove.colTarget - 1)) - state.table.stateManager.scroll.horizontalBarPos) : ("rowHeader" === cellLocation || state.table.internalProps.layoutMap.isSeriesNumberInBody(col, row)) && (backY = state.columnMove.y, lineY = state.table.isFrozenRow(row) ? state.columnMove.rowTarget >= state.columnMove.rowSource ? state.table.getRowsHeight(0, state.columnMove.rowTarget) : state.table.getRowsHeight(0, state.columnMove.rowTarget - 1) : state.table.isBottomFrozenRow(row) ? state.table.tableNoFrameHeight - state.table.getRowsHeight(targetCell.row + 1, state.table.rowCount - 1) : (state.columnMove.rowTarget >= state.columnMove.rowSource ? state.table.getRowsHeight(0, state.columnMove.rowTarget) : state.table.getRowsHeight(0, state.columnMove.rowTarget - 1)) - state.table.stateManager.scroll.verticalBarPos), state.table.scenegraph.component.updateMoveCol(backX, lineX, backY, lineY), state.table.scenegraph.updateNextFrame();
+        col: targetCell.col,
+        row: targetCell.row
+      })) {
+        let lineX, backX, lineY, backY;
+        state.columnMove.x = x - state.table.tableX, state.columnMove.y = y - state.table.tableY, state.columnMove.colTarget = targetCell.col, state.columnMove.rowTarget = targetCell.row, state.updateCursor("grabbing");
+        const cellLocation = state.table.getCellLocation(state.columnMove.colSource, state.columnMove.rowSource);
+        "columnHeader" === cellLocation ? (backX = state.columnMove.x, lineX = state.table.isLeftFrozenColumn(col) ? state.columnMove.colTarget >= state.columnMove.colSource ? state.table.getColsWidth(0, state.columnMove.colTarget) : state.table.getColsWidth(0, state.columnMove.colTarget - 1) : state.table.isRightFrozenColumn(col) ? state.table.tableNoFrameWidth - state.table.getColsWidth(targetCell.col + 1, state.table.colCount - 1) : (state.columnMove.colTarget >= state.columnMove.colSource ? state.table.getColsWidth(0, state.columnMove.colTarget) : state.table.getColsWidth(0, state.columnMove.colTarget - 1)) - state.table.stateManager.scroll.horizontalBarPos) : ("rowHeader" === cellLocation || state.table.internalProps.layoutMap.isSeriesNumberInBody(col, row)) && (backY = state.columnMove.y, lineY = state.table.isFrozenRow(row) ? state.columnMove.rowTarget >= state.columnMove.rowSource ? state.table.getRowsHeight(0, state.columnMove.rowTarget) : state.table.getRowsHeight(0, state.columnMove.rowTarget - 1) : state.table.isBottomFrozenRow(row) ? state.table.tableNoFrameHeight - state.table.getRowsHeight(targetCell.row + 1, state.table.rowCount - 1) : (state.columnMove.rowTarget >= state.columnMove.rowSource ? state.table.getRowsHeight(0, state.columnMove.rowTarget) : state.table.getRowsHeight(0, state.columnMove.rowTarget - 1)) - state.table.stateManager.scroll.verticalBarPos), state.table.scenegraph.component.updateMoveCol(backX, lineX, backY, lineY), state.table.scenegraph.updateNextFrame();
+      } else state.updateCursor("not-allowed"), state.columnMove.colTarget = state.columnMove.colSource, state.columnMove.rowTarget = state.columnMove.rowSource;
     }
     function endMoveCol(state) {
       if ("canMoveHeaderPosition" in state.table.internalProps.layoutMap && state.columnMove.moving && state.columnMove.colSource >= 0 && state.columnMove.rowSource >= 0 && state.columnMove.colTarget >= 0 && state.columnMove.rowTarget >= 0) {
@@ -40169,7 +40224,7 @@
       endResizeCol() {
         setTimeout(() => {
           this.columnResize.resizing = !1;
-        }, 0), this.table.scenegraph.updateChartSize(this.columnResize.col), this.checkFrozen(), this.table.scenegraph.component.hideResizeCol(), this.table.scenegraph.updateNextFrame();
+        }, 0), this.table.scenegraph.updateChartSizeForResizeColWidth(this.columnResize.col), this.checkFrozen(), this.table.scenegraph.component.hideResizeCol(), this.table.scenegraph.updateNextFrame();
       }
       startResizeCol(col, x, y, isRightFrozen) {
         var _a;
@@ -40183,7 +40238,7 @@
       endResizeRow() {
         setTimeout(() => {
           this.rowResize.resizing = !1;
-        }, 0), this.table.scenegraph.updateChartSize(this.rowResize.row), this.table.scenegraph.component.hideResizeRow(), this.table.scenegraph.updateNextFrame();
+        }, 0), this.table.scenegraph.updateChartSizeForResizeColWidth(this.rowResize.row), this.table.scenegraph.component.hideResizeRow(), this.table.scenegraph.updateNextFrame();
       }
       startResizeRow(row, x, y, isBottomFrozen) {
         var _a;
@@ -40337,7 +40392,8 @@
       }
       showVerticalScrollBar(autoHide) {
         this.table.scenegraph.component.showVerticalScrollBar(), autoHide && (clearTimeout(this._clearVerticalScrollBar), this._clearVerticalScrollBar = setTimeout(() => {
-          this.table.scenegraph.component.hideVerticalScrollBar();
+          var _a;
+          null === (_a = this.table.scenegraph) || void 0 === _a || _a.component.hideVerticalScrollBar();
         }, 1e3));
       }
       hideHorizontalScrollBar() {
@@ -40345,7 +40401,8 @@
       }
       showHorizontalScrollBar(autoHide) {
         this.table.scenegraph.component.showHorizontalScrollBar(), autoHide && (clearTimeout(this._clearHorizontalScrollBar), this._clearHorizontalScrollBar = setTimeout(() => {
-          this.table.scenegraph.component.hideHorizontalScrollBar();
+          var _a;
+          null === (_a = this.table.scenegraph) || void 0 === _a || _a.component.hideHorizontalScrollBar();
         }, 1e3));
       }
       triggerContextMenu(col, row, x, y) {
@@ -41253,27 +41310,49 @@
       handler.on(table.getElement(), "blur", e => {
         eventManager.dealTableHover();
       }), handler.on(table.getElement(), "wheel", e => {
-        table.eventManager._enableTableScroll && handleWhell$1(e, stateManager);
+        var _a;
+        null === (_a = table.editorManager) || void 0 === _a || _a.completeEdit(), table.eventManager._enableTableScroll && handleWhell$1(e, stateManager);
       }), handler.on(table.getElement(), "keydown", e => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
         if ("a" === e.key && (e.ctrlKey || e.metaKey)) (null === (_a = table.keyboardOptions) || void 0 === _a ? void 0 : _a.selectAllOnCtrlA) && (e.preventDefault(), eventManager.deelTableSelectAll());else if (stateManager.select.cellPos.col >= 0 && stateManager.select.cellPos.row >= 0 && ("ArrowUp" === e.key || "ArrowDown" === e.key || "ArrowLeft" === e.key || "ArrowRight" === e.key)) {
           if ((null === (_c = null === (_b = table.options.keyboardOptions) || void 0 === _b ? void 0 : _b.moveEditCellOnArrowKeys) || void 0 === _c || !_c) && (null === (_d = table.editorManager) || void 0 === _d ? void 0 : _d.editingEditor)) return;
           let targetCol, targetRow;
           if (e.preventDefault(), e.stopPropagation(), "ArrowUp" === e.key ? e.ctrlKey || e.metaKey ? (targetCol = stateManager.select.cellPos.col, targetRow = 0) : (e.shiftKey, targetCol = stateManager.select.cellPos.col, targetRow = Math.min(table.rowCount - 1, Math.max(0, stateManager.select.cellPos.row - 1))) : "ArrowDown" === e.key ? e.ctrlKey || e.metaKey ? (targetCol = stateManager.select.cellPos.col, targetRow = table.rowCount - 1) : (e.shiftKey, targetCol = stateManager.select.cellPos.col, targetRow = Math.min(table.rowCount - 1, Math.max(0, stateManager.select.cellPos.row + 1))) : "ArrowLeft" === e.key ? e.ctrlKey || e.metaKey ? (targetCol = 0, targetRow = stateManager.select.cellPos.row) : (e.shiftKey, targetRow = stateManager.select.cellPos.row, targetCol = Math.min(table.colCount - 1, Math.max(0, stateManager.select.cellPos.col - 1))) : "ArrowRight" === e.key && (e.ctrlKey || e.metaKey ? (targetCol = table.colCount - 1, targetRow = stateManager.select.cellPos.row) : (e.shiftKey, targetRow = stateManager.select.cellPos.row, targetCol = Math.min(table.colCount - 1, Math.max(0, stateManager.select.cellPos.col + 1)))), isCellDisableSelect(table, targetCol, targetRow)) return;
           table.selectCell(targetCol, targetRow, e.shiftKey), null !== (_f = null === (_e = table.options.keyboardOptions) || void 0 === _e ? void 0 : _e.moveEditCellOnArrowKeys) && void 0 !== _f && _f && (null === (_g = table.editorManager) || void 0 === _g ? void 0 : _g.editingEditor) && (table.editorManager.completeEdit(), table.getElement().focus(), table.getEditor(targetCol, targetRow) && table.editorManager.startEditCell(targetCol, targetRow));
-        } else if ("Escape" === e.key) table.editorManager.cancelEdit();else if ("Enter" === e.key) {
-          if (table.editorManager.editingEditor) return handleKeydownListener(e), table.editorManager.completeEdit(), void table.getElement().focus();
-          if ((null === (_j = null === (_h = table.options.keyboardOptions) || void 0 === _h ? void 0 : _h.editCellOnEnter) || void 0 === _j || _j) && 1 === (null !== (_l = null === (_k = table.stateManager.select.ranges) || void 0 === _k ? void 0 : _k.length) && void 0 !== _l ? _l : 0)) {
+        } else if ("Escape" === e.key) null === (_h = table.editorManager) || void 0 === _h || _h.cancelEdit();else if ("Enter" === e.key) {
+          if (null === (_j = table.editorManager) || void 0 === _j ? void 0 : _j.editingEditor) {
+            if (handleKeydownListener(e), table.editorManager.completeEdit(), table.getElement().focus(), !0 === (null === (_k = table.options.keyboardOptions) || void 0 === _k ? void 0 : _k.moveFocusCellOnEnter)) {
+              const targetCol = stateManager.select.cellPos.col,
+                targetRow = Math.min(table.rowCount - 1, Math.max(0, stateManager.select.cellPos.row + 1));
+              if (isCellDisableSelect(table, targetCol, targetRow)) return;
+              table.selectCell(targetCol, targetRow, e.shiftKey);
+            }
+            return;
+          }
+          if (!0 === (null === (_l = table.options.keyboardOptions) || void 0 === _l ? void 0 : _l.moveFocusCellOnEnter)) {
+            const targetCol = stateManager.select.cellPos.col,
+              targetRow = Math.min(table.rowCount - 1, Math.max(0, stateManager.select.cellPos.row + 1));
+            if (isCellDisableSelect(table, targetCol, targetRow)) return;
+            table.selectCell(targetCol, targetRow, e.shiftKey);
+          } else if ((null === (_o = null === (_m = table.options.keyboardOptions) || void 0 === _m ? void 0 : _m.editCellOnEnter) || void 0 === _o || _o) && 1 === (null !== (_q = null === (_p = table.stateManager.select.ranges) || void 0 === _p ? void 0 : _p.length) && void 0 !== _q ? _q : 0)) {
             const startCol = table.stateManager.select.ranges[0].start.col,
               startRow = table.stateManager.select.ranges[0].start.row,
               endCol = table.stateManager.select.ranges[0].end.col,
               endRow = table.stateManager.select.ranges[0].end.row;
             startCol === endCol && startRow === endRow && table.getEditor(startCol, startRow) && table.editorManager.startEditCell(startCol, startRow);
           }
-        } else if ("Tab" === e.key && (null === (_o = null === (_m = table.options.keyboardOptions) || void 0 === _m ? void 0 : _m.moveFocusCellOnTab) || void 0 === _o || _o) && (e.preventDefault(), stateManager.select.cellPos.col >= 0 && stateManager.select.cellPos.row >= 0)) {
-          let targetCol, targetRow;
-          if (stateManager.select.cellPos.col === table.colCount - 1 ? (targetRow = Math.min(table.rowCount - 1, stateManager.select.cellPos.row + 1), targetCol = table.rowHeaderLevelCount) : stateManager.select.cellPos.row === table.rowCount - 1 ? (targetRow = table.rowCount - 1, targetCol = table.rowHeaderLevelCount) : (targetRow = stateManager.select.cellPos.row, targetCol = stateManager.select.cellPos.col + 1), isCellDisableSelect(table, targetCol, targetRow)) return;
-          table.selectCell(targetCol, targetRow), (null === (_p = table.editorManager) || void 0 === _p ? void 0 : _p.editingEditor) && (table.editorManager.completeEdit(), table.getElement().focus(), table.getEditor(targetCol, targetRow) && table.editorManager.startEditCell(targetCol, targetRow));
+        } else if ("Tab" === e.key) {
+          if ((null === (_s = null === (_r = table.options.keyboardOptions) || void 0 === _r ? void 0 : _r.moveFocusCellOnTab) || void 0 === _s || _s) && (e.preventDefault(), stateManager.select.cellPos.col >= 0 && stateManager.select.cellPos.row >= 0)) {
+            let targetCol, targetRow;
+            if (stateManager.select.cellPos.col === table.colCount - 1 ? (targetRow = Math.min(table.rowCount - 1, stateManager.select.cellPos.row + 1), targetCol = table.rowHeaderLevelCount) : stateManager.select.cellPos.row === table.rowCount - 1 ? (targetRow = table.rowCount - 1, targetCol = table.rowHeaderLevelCount) : (targetRow = stateManager.select.cellPos.row, targetCol = stateManager.select.cellPos.col + 1), isCellDisableSelect(table, targetCol, targetRow)) return;
+            table.selectCell(targetCol, targetRow), (null === (_t = table.editorManager) || void 0 === _t ? void 0 : _t.editingEditor) && (table.editorManager.completeEdit(), table.getElement().focus(), table.getEditor(targetCol, targetRow) && table.editorManager.startEditCell(targetCol, targetRow));
+          }
+        } else {
+          const editCellTrigger = table.options.editCellTrigger;
+          if (("keydown" === editCellTrigger || Array.isArray(editCellTrigger) && editCellTrigger.includes("keydown")) && !(null === (_u = table.editorManager) || void 0 === _u ? void 0 : _u.editingEditor)) {
+            const allowedKeys = /^[a-zA-Z0-9+\-*\/%=.,\s]$/;
+            e.key.match(allowedKeys) && table.editorManager.startEditCell(stateManager.select.cellPos.col, stateManager.select.cellPos.row, "");
+          }
         }
         handleKeydownListener(e);
       }), handler.on(table.getElement(), "copy", e => {
@@ -41336,7 +41415,8 @@
         var _a;
         !1 !== (null === (_a = table.eventOptions) || void 0 === _a ? void 0 : _a.preventDefaultContextMenu) && e.preventDefault();
       }), handler.on(table.getContainer(), "resize", e => {
-        table.canvasSizeSeted || 0 === e.width && 0 === e.height || (isValid$1(table.options.pixelRatio) || table.setPixelRatio(getPixelRatio$1()), e.windowSizeNotChange || table.resize());
+        var _a;
+        table.canvasSizeSeted || 0 === e.width && 0 === e.height || ((table.autoFillWidth || table.autoFillHeight) && (null === (_a = table.editorManager) || void 0 === _a || _a.completeEdit()), isValid$1(table.options.pixelRatio) || table.setPixelRatio(getPixelRatio$1()), e.windowSizeNotChange || table.resize());
       });
       const regex = /<tr[^>]*>([\s\S]*?)<\/tr>/g,
         cellRegex = /<td[^>]*>([\s\S]*?)<\/td>/g;
@@ -41445,7 +41525,7 @@
         callback: globalPointerdownCallback
       }), document.body.addEventListener("pointerdown", globalPointerdownCallback);
       const globalPointerupCallback = e => {
-        table.eventManager.LastBodyPointerXY = null, table.eventManager.isDown = !1, table.eventManager.isDraging = !1, table.eventManager.inertiaScroll.endInertia(), stateManager.isResizeCol() ? endResizeCol(table) : stateManager.isResizeRow() && endResizeRow(table);
+        table.eventManager.LastBodyPointerXY = null, table.eventManager.isDown = !1, table.eventManager.isDraging = !1, table.eventManager.inertiaScroll.endInertia(), "grabing" === stateManager.interactionState && stateManager.isResizeCol() ? endResizeCol(table) : "grabing" === stateManager.interactionState && stateManager.isResizeRow() && endResizeRow(table);
       };
       eventManager.globalEventListeners.push({
         name: "pointerup",
@@ -41658,7 +41738,7 @@
       updateEventBinder() {
         setTimeout(() => {
           var _a;
-          checkHaveTextStick(this.table) && 0 === (null === (_a = this.handleTextStickBindId) || void 0 === _a ? void 0 : _a.length) ? (this.handleTextStickBindId.push(this.table.on(TABLE_EVENT_TYPE.SCROLL, e => {
+          this.table.isReleased || (checkHaveTextStick(this.table) && 0 === (null === (_a = this.handleTextStickBindId) || void 0 === _a ? void 0 : _a.length) ? (this.handleTextStickBindId.push(this.table.on(TABLE_EVENT_TYPE.SCROLL, e => {
             handleTextStick(this.table);
           })), this.handleTextStickBindId.push(this.table.on(TABLE_EVENT_TYPE.RESIZE_COLUMN_END, e => {
             handleTextStick(this.table);
@@ -41666,7 +41746,7 @@
             handleTextStick(this.table);
           }))) : !checkHaveTextStick(this.table) && this.handleTextStickBindId && (this.handleTextStickBindId.forEach(id => {
             this.table.off(id);
-          }), this.handleTextStickBindId = []), bindSparklineHoverEvent(this.table);
+          }), this.handleTextStickBindId = []), bindSparklineHoverEvent(this.table));
         }, 0);
       }
       bindSelfEvent() {
@@ -41695,7 +41775,7 @@
             const eventArgsSet = getCellEventArgsSet(e.federatedEvent),
               resizeCol = this.table.scenegraph.getResizeColAt(eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y, null === (_a = eventArgsSet.eventArgs) || void 0 === _a ? void 0 : _a.targetCell);
             if (this.table.eventManager.checkCellFillhandle(eventArgsSet)) this.table.fireListeners(TABLE_EVENT_TYPE.DBLCLICK_FILL_HANDLE, {});else if (this.table._canResizeColumn(resizeCol.col, resizeCol.row) && resizeCol.col >= 0) {
-              this.table.scenegraph.updateAutoColWidth(resizeCol.col), this.table.internalProps._widthResizedColMap.add(resizeCol.col), this.table.scenegraph.updateChartSize(resizeCol.col);
+              this.table.scenegraph.updateAutoColWidth(resizeCol.col), this.table.internalProps._widthResizedColMap.add(resizeCol.col), this.table.scenegraph.updateChartSizeForResizeColWidth(resizeCol.col);
               const state = this.table.stateManager;
               state.columnResize.col < state.table.frozenColCount && !state.table.isPivotTable() && !state.table.transpose && state.table.scenegraph.component.setFrozenColumnShadow(state.table.frozenColCount - 1, state.columnResize.isRightFrozen);
               const colWidths = [];
@@ -43808,7 +43888,7 @@
       constructor(container) {
         let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-        if (super(), this.showFrozenIcon = !0, this.version = "1.5.3", this.id = `VTable${Date.now()}`, this.isReleased = !1, this._chartEventMap = {}, this.throttleInvalidate = throttle2(this.render.bind(this), 200), !container && "node" !== options.mode) throw new Error("vtable's container is undefined");
+        if (super(), this.showFrozenIcon = !0, this.version = "1.6.0-alpha.4", this.id = `VTable${Date.now()}`, this.isReleased = !1, this._chartEventMap = {}, this.throttleInvalidate = throttle2(this.render.bind(this), 200), !container && "node" !== options.mode) throw new Error("vtable's container is undefined");
         const {
           frozenColCount = 0,
           frozenRowCount: frozenRowCount,
@@ -44171,7 +44251,7 @@
         this.rowHeightsMap.put(row, (null === (_a = this.options.customConfig) || void 0 === _a ? void 0 : _a._disableColumnAndRowSizeRound) ? height : Math.round(height)), clearCache && this._clearRowRangeHeightsMap(row);
       }
       setRowHeight(row, height) {
-        this.scenegraph.setRowHeight(row, height), this.internalProps._heightResizedRowMap.add(row);
+        this.scenegraph.setRowHeight(row, height), this.scenegraph.updateChartSizeForResizeRowHeight(row), this.internalProps._heightResizedRowMap.add(row);
       }
       getRowsHeight(startRow, endRow) {
         var _a, _b;
@@ -44219,7 +44299,7 @@
         this.colWidthsMap.put(col, "number" == typeof width ? Math.round(width) : width), clearCache && this._clearColRangeWidthsMap(col), skipCheckFrozen || this.stateManager.checkFrozen();
       }
       setColWidth(col, width) {
-        this.scenegraph.setColWidth(col, width), this.internalProps._widthResizedColMap.add(col);
+        this.scenegraph.setColWidth(col, width), this.scenegraph.updateChartSizeForResizeColWidth(col), this.internalProps._widthResizedColMap.add(col);
       }
       _clearColRangeWidthsMap(col) {
         if ("number" != typeof col) this._colRangeWidthsMap.clear();else {
@@ -45576,6 +45656,7 @@
         var _a, _b;
         const internalProps = this.internalProps;
         for (let col = 0; col < internalProps.layoutMap.columnWidths.length; col++) {
+          if (this.internalProps._widthResizedColMap.has(col)) continue;
           const {
             width: width,
             minWidth: minWidth,
@@ -45588,8 +45669,8 @@
         var _a;
         null === (_a = this.dataSource) || void 0 === _a || _a.setSortedIndexMap(field, filedMap);
       }
-      checkReactCustomLayout() {
-        this.reactCustomLayout || (this.reactCustomLayout = new ReactCustomLayout(this));
+      checkReactCustomLayout(removeAllContainer) {
+        this.reactCustomLayout || (this.reactCustomLayout = new ReactCustomLayout(removeAllContainer, this));
       }
       get bodyDomContainer() {
         return this.internalProps.bodyDomContainer;
@@ -46965,10 +47046,11 @@
         this.table = table, this.bindEvent();
       }
       bindEvent() {
-        const handler = this.table.internalProps.handler;
+        this.table.internalProps.handler;
+        const editCellTrigger = this.table.options.editCellTrigger;
         this.table.on(TABLE_EVENT_TYPE.DBLCLICK_CELL, e => {
           var _a;
-          if (!this.table.options.editCellTrigger || "doubleclick" === this.table.options.editCellTrigger) {
+          if (!editCellTrigger || "doubleclick" === editCellTrigger || Array.isArray(editCellTrigger) && editCellTrigger.includes("doubleclick")) {
             const {
                 col: col,
                 row: row
@@ -46979,17 +47061,13 @@
             this.startEditCell(col, row);
           }
         }), this.table.on(TABLE_EVENT_TYPE.CLICK_CELL, e => {
-          if ("click" === this.table.options.editCellTrigger) {
+          if ("click" === editCellTrigger || Array.isArray(editCellTrigger) && editCellTrigger.includes("click")) {
             const {
               col: col,
               row: row
             } = e;
             this.startEditCell(col, row);
           }
-        }), handler.on(this.table.getElement(), "wheel", e => {
-          this.completeEdit();
-        }), handler.on(this.table.getElement(), "resize", e => {
-          (this.table.autoFillWidth || this.table.autoFillHeight) && this.completeEdit();
         });
       }
       startEditCell(col, row, value) {
@@ -47408,7 +47486,7 @@
         const index = this.getRecordShowIndexByCell(col, row),
           diffDataIndices = this.dataSource.toggleHierarchyState(index, this.scenegraph.proxy.rowStart - this.columnHeaderLevelCount, Math.max(this.scenegraph.proxy.rowEnd - this.columnHeaderLevelCount, this.scenegraph.proxy.rowStart - this.columnHeaderLevelCount + this.scenegraph.proxy.rowLimit - 1)),
           diffPositions = this.internalProps.layoutMap.toggleHierarchyState(diffDataIndices);
-        this.refreshRowColCount(), this.clearCellStyleCache(), this.internalProps.layoutMap.clearCellRangeMap(), this.internalProps.useOneRowHeightFillAll = !1, this.scenegraph.updateHierarchyIcon(col, row), this.scenegraph.updateRow(diffPositions.removeCellPositions, diffPositions.addCellPositions), checkHasChart && (this.autoFillWidth && !notFillWidth && (notFillWidth = this.getAllColsWidth() <= this.tableNoFrameWidth), this.autoFillHeight && !notFillHeight && (notFillHeight = this.getAllRowsHeight() <= this.tableNoFrameHeight), ("adaptive" === this.widthMode || notFillWidth || "adaptive" === this.heightMode || notFillHeight) && this.scenegraph.updateChartSize(0));
+        this.refreshRowColCount(), this.clearCellStyleCache(), this.internalProps.layoutMap.clearCellRangeMap(), this.internalProps.useOneRowHeightFillAll = !1, this.scenegraph.updateHierarchyIcon(col, row), this.scenegraph.updateRow(diffPositions.removeCellPositions, diffPositions.addCellPositions), checkHasChart && (this.autoFillWidth && !notFillWidth && (notFillWidth = this.getAllColsWidth() <= this.tableNoFrameWidth), this.autoFillHeight && !notFillHeight && (notFillHeight = this.getAllRowsHeight() <= this.tableNoFrameHeight), ("adaptive" === this.widthMode || notFillWidth || "adaptive" === this.heightMode || notFillHeight) && this.scenegraph.updateChartSizeForResizeColWidth(0));
       }
       _hasHierarchyTreeHeader() {
         var _a, _b;
@@ -47508,7 +47586,8 @@
           this.internalProps.emptyTip = new EmptyTip(this.options.emptyTip, this), this.internalProps.emptyTip.resetVisible();
         }
         this.render(), isValid$1(oldHoverState.col) && isValid$1(oldHoverState.row) && oldHoverState.col >= 0 && oldHoverState.row >= 0 && setTimeout(() => {
-          this.internalProps.tooltipHandler.showTooltip(oldHoverState.col, oldHoverState.row);
+          var _a;
+          null === (_a = this.internalProps) || void 0 === _a || _a.tooltipHandler.showTooltip(oldHoverState.col, oldHoverState.row);
         }, 0);
       }
       setRecordChildren(records, col, row) {
@@ -48684,7 +48763,13 @@
           legend = new DiscreteLegend(merge({}, attrs, {
             defaultSelected: this.selectedData
           }));
-        legend.name = "legend", this.legendComponent = legend, this.table.scenegraph.stage.defaultLayer.appendChild(legend), this.adjustTableSize(attrs);
+        legend.name = "legend", this.legendComponent = legend, !1 === this.visible && (legend.setAttributes({
+          maxWidth: 0,
+          width: 0,
+          maxHeight: 0,
+          height: 0,
+          clip: !0
+        }), legend.hideAll()), this.table.scenegraph.stage.defaultLayer.appendChild(legend), this.adjustTableSize(attrs);
       }
       resize() {
         this.legendComponent && (this.legendComponent.setAttributes({
@@ -50948,15 +51033,16 @@
             });
             this.group.name = 'grid-container';
             scene.tableGroup.addChild(this.group);
+            const horizontalSplitLineWidth = scene._gantt.parsedOptions.timelineHeaderHorizontalLineStyle?.lineWidth;
             const line = createLine({
                 pickable: false,
                 stroke: scene._gantt.parsedOptions.timelineHeaderHorizontalLineStyle?.lineColor,
-                lineWidth: scene._gantt.parsedOptions.timelineHeaderHorizontalLineStyle?.lineWidth,
+                lineWidth: horizontalSplitLineWidth,
                 points: [
-                    { x: 0, y: scene._gantt.parsedOptions.timelineHeaderHorizontalLineStyle?.lineWidth & 1 ? 0.5 : 0 },
+                    { x: 0, y: horizontalSplitLineWidth & 1 ? 0.5 : 0 },
                     {
                         x: scene._gantt.getAllColsWidth(),
-                        y: scene._gantt.parsedOptions.timelineHeaderHorizontalLineStyle?.lineWidth & 1 ? 0.5 : 0
+                        y: horizontalSplitLineWidth & 1 ? 0.5 : 0
                     }
                 ]
             });
@@ -51725,31 +51811,38 @@
             fontFamily: 'Arial',
             fontSize: 14
         }, options?.taskBar?.barStyle);
+        gantt.parsedOptions.taskBarHoverStyle = Object.assign({
+            barOverLayColor: 'rgba(99, 144, 0, 0.4)'
+        }, options?.taskBar?.hoverBarStyle);
+        gantt.parsedOptions.taskBarSelectionStyle = Object.assign({
+            barOverLayColor: 'rgba(99, 144, 0, 0.4)'
+        }, options?.taskBar?.selectionBarStyle);
         gantt.parsedOptions.taskBarLabelText = options?.taskBar?.labelText ?? '';
         gantt.parsedOptions.taskBarMoveable = options?.taskBar?.moveable ?? true;
         gantt.parsedOptions.taskBarResizable = options?.taskBar?.resizable ?? true;
-        gantt.parsedOptions.taskBarHoverColor =
-            options?.taskBar?.hoverColor === null ? 'rgba(0,0,0,0)' : options?.taskBar?.hoverColor ?? 'rgba(0,0,0,0.1)';
         gantt.parsedOptions.taskBarLabelStyle = {
             fontFamily: options?.taskBar?.labelTextStyle.fontFamily ?? 'Arial',
             fontSize: options?.taskBar?.labelTextStyle.fontSize ?? gantt.parsedOptions.rowHeight,
             color: options?.taskBar?.labelTextStyle.color ?? '#F01',
             textAlign: options?.taskBar?.labelTextStyle.textAlign ?? 'left',
             textBaseline: options?.taskBar?.labelTextStyle.textBaseline ?? 'middle',
-            padding: options?.taskBar?.labelTextStyle.padding ?? 0,
+            padding: options?.taskBar?.labelTextStyle.padding ?? [0, 0, 0, 10],
             textOverflow: options?.taskBar?.labelTextStyle.textOverflow
         };
         gantt.parsedOptions.taskBarCustomLayout = options?.taskBar?.customLayout;
-        gantt.parsedOptions.frameStyle = Object.assign({}, {
+        gantt.parsedOptions.outerFrameStyle = Object.assign({
             borderColor: 'gray',
-            borderLineWidth: [1, 1, 1, 1],
+            borderLineWidth: 1,
             cornerRadius: 4
-        }, options.frameStyle?.outerFrameStyle);
+        }, options.frame?.outerFrameStyle);
         gantt.parsedOptions.markLine = generateMarkLine(options?.markLine);
-        gantt.parsedOptions.resizeLineStyle = {
-            lineColor: options.resizeLineStyle?.lineColor ?? 'yellow',
-            lineWidth: options.resizeLineStyle?.lineWidth ?? 2
-        };
+        gantt.parsedOptions.verticalSplitLineHighlight = options.frame?.verticalSplitLineHighlight;
+        gantt.parsedOptions.verticalSplitLine = Object.assign({
+            lineColor: gantt.parsedOptions.outerFrameStyle.borderColor,
+            lineWidth: gantt.parsedOptions.outerFrameStyle.borderLineWidth
+        }, options.frame?.verticalSplitLine);
+        gantt.parsedOptions.horizontalSplitLine = options.frame?.horizontalSplitLine;
+        gantt.parsedOptions.verticalSplitLineMoveable = options.frame.verticalSplitLineMoveable;
     }
     function generateTimeLineDate(currentDate, endDate, scale) {
         const { unit, step, format } = scale;
@@ -52036,6 +52129,7 @@
   <line x1="30" y1="10" x2="30" y2="190" stroke="black" stroke-width="4"/>
   <line x1="70" y1="10" x2="70" y2="190" stroke="black" stroke-width="4"/>
 </svg>`;
+    const TASKBAR_HOVER_ICON_WIDTH = 10;
     class TaskBar {
         group;
         barContainer;
@@ -52164,7 +52258,7 @@
                     fill: color,
                     fontFamily: fontFamily,
                     text: parseStringTemplate(this._scene._gantt.parsedOptions.taskBarLabelText, taskRecord),
-                    maxLineWidth: taskBarSize - 20,
+                    maxLineWidth: taskBarSize - TASKBAR_HOVER_ICON_WIDTH,
                     textBaseline,
                     textAlign,
                     ellipsis: textOverflow === 'clip'
@@ -52200,7 +52294,7 @@
                 cursor: this._scene._gantt.parsedOptions.taskBarMoveable ? 'grab' : 'default',
                 pickable: false,
                 cornerRadius: this._scene._gantt.parsedOptions.taskBarStyle.cornerRadius,
-                fill: this._scene._gantt.parsedOptions.taskBarHoverColor,
+                fill: this._scene._gantt.parsedOptions.taskBarHoverStyle.barOverLayColor,
                 visibleAll: false
             });
             this.hoverBarGroup = hoverBarGroup;
@@ -52209,7 +52303,7 @@
                 const icon = new Image$1({
                     x: 0,
                     y: 0,
-                    width: 10,
+                    width: TASKBAR_HOVER_ICON_WIDTH,
                     height: 20,
                     image: TASKBAR_HOVER_ICON,
                     pickable: true,
@@ -52221,7 +52315,7 @@
                 const rightIcon = new Image$1({
                     x: 0,
                     y: 0,
-                    width: 10,
+                    width: TASKBAR_HOVER_ICON_WIDTH,
                     height: 20,
                     image: TASKBAR_HOVER_ICON,
                     pickable: true,
@@ -52263,11 +52357,11 @@
             if (this.hoverBarLeftIcon) {
                 this.hoverBarLeftIcon.setAttribute('x', 0);
                 this.hoverBarLeftIcon.setAttribute('y', Math.ceil(height / 10));
-                this.hoverBarLeftIcon.setAttribute('width', 10);
+                this.hoverBarLeftIcon.setAttribute('width', TASKBAR_HOVER_ICON_WIDTH);
                 this.hoverBarLeftIcon.setAttribute('height', height - 2 * Math.ceil(height / 10));
-                this.hoverBarRightIcon.setAttribute('x', width - 10);
+                this.hoverBarRightIcon.setAttribute('x', width - TASKBAR_HOVER_ICON_WIDTH);
                 this.hoverBarRightIcon.setAttribute('y', Math.ceil(height / 10));
-                this.hoverBarRightIcon.setAttribute('width', 10);
+                this.hoverBarRightIcon.setAttribute('width', TASKBAR_HOVER_ICON_WIDTH);
                 this.hoverBarRightIcon.setAttribute('height', height - 2 * Math.ceil(height / 10));
             }
         }
@@ -52361,7 +52455,7 @@
         }
         createFrameBorder() {
             const group = this._scene.tableGroup;
-            const frameStyle = this._scene._gantt.parsedOptions.frameStyle;
+            const frameStyle = this._scene._gantt.parsedOptions.outerFrameStyle;
             if (!frameStyle) {
                 return;
             }
@@ -52397,7 +52491,7 @@
             }
         }
         resize() {
-            this._scene._gantt.parsedOptions.frameStyle;
+            this._scene._gantt.parsedOptions.outerFrameStyle;
             this.border.setAttributes({
                 width: this._scene.tableGroup.attribute.width + this.border.attribute.lineWidth,
                 height: this._scene.tableGroup.attribute.height + this.border.attribute.lineWidth
@@ -52547,6 +52641,9 @@
         release() {
             this.stage.release();
         }
+        getTaskBarNodeByY(y) {
+            getTaskIndexByY(y, this._gantt);
+        }
     }
 
     const judgeType = (value) => {
@@ -52974,10 +53071,18 @@
                 gantt._resize();
             }
         });
-        handler.on(gantt.resizeLine, 'mousedown', (e) => {
-            stateManager.updateInteractionState(InteractionState$1.grabing);
-            stateManager.startResizeTableWidth(e);
-        });
+        if (gantt.parsedOptions.verticalSplitLineMoveable) {
+            handler.on(gantt.resizeLine, 'mousedown', (e) => {
+                stateManager.updateInteractionState(InteractionState$1.grabing);
+                stateManager.startResizeTableWidth(e);
+            });
+            handler.on(gantt.resizeLine, 'mouseover', (e) => {
+                gantt.resizeLine.childNodes[1].style.opacity = '1';
+            });
+            handler.on(gantt.resizeLine, 'mouseout', (e) => {
+                gantt.resizeLine.childNodes[1].style.opacity = '0';
+            });
+        }
         vglobal.addEventListener('mousedown', (e) => {
             gantt.eventManager.lastDragPointerXYOnWindow = { x: e.x, y: e.y };
         });
@@ -53032,13 +53137,6 @@
         }
     }
     function syncResizeStateFromTable(gantt) {
-        if (gantt.taskListTableInstance && gantt.options.taskListTable?.width === 'auto') {
-            gantt.taskListTableInstance?.on('resize_column', (args) => {
-                gantt.taskTableWidth = gantt.taskListTableInstance.getAllColsWidth() + gantt.taskListTableInstance.tableX * 2;
-                gantt.element.style.left = gantt.taskTableWidth ? `${gantt.taskTableWidth}px` : '0px';
-                gantt._resize();
-            });
-        }
     }
     function syncEditCellFromTable(gantt) {
         gantt.taskListTableInstance?.on('change_cell_value', (args) => {
@@ -53219,7 +53317,7 @@
             const targetEndX = this.moveTaskBar.targetStartX + correctX;
             this._gantt.stateManager.moveTaskBar.target.setAttribute('x', targetEndX);
             const taskIndex = getTaskIndexByY(this.moveTaskBar.startY, this._gantt);
-            this._gantt.updateDateToTaskRecord('move', days, taskIndex);
+            this._gantt._updateDateToTaskRecord('move', days, taskIndex);
             this.moveTaskBar.moving = false;
             this.moveTaskBar.target = null;
             this._gantt.scenegraph.updateNextFrame();
@@ -53264,13 +53362,13 @@
                 taskBarGroup.setAttribute('width', taskBarSize);
                 rect?.setAttribute('width', taskBarGroup.attribute.width);
                 progressRect?.setAttribute('width', (progress / 100) * taskBarGroup.attribute.width);
-                this._gantt.updateDateToTaskRecord('start-move', -diff_days, taskIndex);
+                this._gantt._updateDateToTaskRecord('start-move', -diff_days, taskIndex);
             }
             else if (direction === 'right') {
                 taskBarGroup.setAttribute('width', taskBarSize);
                 rect?.setAttribute('width', taskBarGroup.attribute.width);
                 progressRect?.setAttribute('width', (progress / 100) * taskBarGroup.attribute.width);
-                this._gantt.updateDateToTaskRecord('end-move', diff_days, taskIndex);
+                this._gantt._updateDateToTaskRecord('end-move', diff_days, taskIndex);
             }
             this._gantt.scenegraph.taskBar.showHoverBar(taskBarGroup.attribute.x, taskBarGroup.attribute.y, taskBarGroup.attribute.width, taskBarGroup.attribute.height);
             reCreateCustomNode(this._gantt, taskBarGroup, taskIndex);
@@ -53302,12 +53400,7 @@
             }
             rect?.setAttribute('width', taskBarGroup.attribute.width);
             progressRect?.setAttribute('width', (progress / 100) * taskBarGroup.attribute.width);
-            textLabel?.setAttribute('x', this._gantt.parsedOptions.taskBarLabelStyle.textAlign === 'center'
-                ? taskBarSize / 2
-                : this._gantt.parsedOptions.taskBarLabelStyle.textAlign === 'left'
-                    ? 10
-                    : taskBarSize - 10);
-            textLabel?.setAttribute('maxLineWidth', taskBarSize - 20);
+            textLabel?.setAttribute('maxLineWidth', taskBarSize - TASKBAR_HOVER_ICON_WIDTH * 2);
             const x = taskBarGroup.attribute.x;
             const y = taskBarGroup.attribute.y;
             const width = taskBarGroup.attribute.width;
@@ -53540,6 +53633,7 @@
         canvas;
         element;
         resizeLine;
+        horizontalSplitLine;
         context;
         sortedTimelineScales;
         reverseSortedTimelineScales;
@@ -53566,7 +53660,6 @@
             this._generateTimeLineDateMap();
             this.headerLevel = this.sortedTimelineScales.length;
             this.element = createRootElement({ top: 0, right: 0, left: 0, bottom: 0 }, 'vtable-gantt');
-            this.element.style.top = '0px';
             this.element.style.left = this.taskTableWidth ? `${this.taskTableWidth}px` : '0px';
             this.canvas = document.createElement('canvas');
             this.element.appendChild(this.canvas);
@@ -53580,7 +53673,7 @@
             }
             this._generateListTable();
             this._syncPropsFromTable();
-            this._createResizeLine();
+            this._createSplitLineAndResizeLine();
             this.scenegraph = new Scenegraph(this);
             this.stateManager = new StateManager(this);
             this.eventManager = new EventManager(this);
@@ -53634,8 +53727,8 @@
             const height = Math.floor(heightP - getHorizontalScrollBarSize(this.parsedOptions.scrollStyle));
             this.tableNoFrameWidth = widthP;
             this.tableNoFrameHeight = Math.floor(heightP);
-            if (this.parsedOptions.frameStyle) {
-                const lineWidth = this.parsedOptions.frameStyle?.borderLineWidth;
+            if (this.parsedOptions.outerFrameStyle) {
+                const lineWidth = this.parsedOptions.outerFrameStyle?.borderLineWidth;
                 this.tableX = lineWidth;
                 this.tableY = lineWidth;
                 this.tableNoFrameWidth = width - lineWidth;
@@ -53648,8 +53741,14 @@
                 this.taskListTableInstance = new ListTableAll(this.container, listTableOption);
                 if (this.options?.taskListTable?.width === 'auto') {
                     this.taskTableWidth = this.taskListTableInstance.getAllColsWidth() + this.taskListTableInstance.tableX * 2;
+                    if (this.options?.taskListTable?.maxWidth) {
+                        this.taskTableWidth = Math.min(this.options?.taskListTable?.maxWidth, this.taskTableWidth);
+                    }
+                    if (this.options?.taskListTable?.minWidth) {
+                        this.taskTableWidth = Math.max(this.options?.taskListTable?.minWidth, this.taskTableWidth);
+                    }
                     this.element.style.left = this.taskTableWidth ? `${this.taskTableWidth}px` : '0px';
-                    this.taskListTableInstance.setCanvasSize(this.taskTableWidth, this.tableNoFrameHeight + this.parsedOptions.frameStyle.borderLineWidth * 2);
+                    this.taskListTableInstance.setCanvasSize(this.taskTableWidth, this.tableNoFrameHeight + this.parsedOptions.outerFrameStyle.borderLineWidth * 2);
                     this._updateSize();
                 }
                 if (this.taskListTableInstance.columnHeaderLevelCount > 1) {
@@ -53678,6 +53777,9 @@
             }
             for (const key in this.options.taskListTable) {
                 listTable_options[key] = this.options.taskListTable[key];
+                if (key === 'columns') {
+                    listTable_options[key][listTable_options[key].length - 1].disableColumnResize = true;
+                }
             }
             listTable_options.theme = {
                 scrollStyle: Object.assign({}, this.parsedOptions.scrollStyle, {
@@ -53687,13 +53789,13 @@
                     bgColor: this.parsedOptions.timelineHeaderBackgroundColor
                 }, this.options.taskListTable.headerStyle),
                 cellInnerBorder: false,
-                frameStyle: Object.assign({}, this.parsedOptions.frameStyle, {
-                    cornerRadius: this.parsedOptions.frameStyle.cornerRadius,
+                frameStyle: Object.assign({}, this.parsedOptions.outerFrameStyle, {
+                    cornerRadius: this.parsedOptions.outerFrameStyle.cornerRadius,
                     borderLineWidth: [
-                        this.parsedOptions.frameStyle.borderLineWidth,
+                        this.parsedOptions.outerFrameStyle.borderLineWidth,
                         0,
-                        this.parsedOptions.frameStyle.borderLineWidth,
-                        this.parsedOptions.frameStyle.borderLineWidth
+                        this.parsedOptions.outerFrameStyle.borderLineWidth,
+                        this.parsedOptions.outerFrameStyle.borderLineWidth
                     ]
                 }),
                 bodyStyle: Object.assign({}, DEFAULT.bodyStyle, this.options.taskListTable.bodyStyle)
@@ -53705,8 +53807,21 @@
             listTable_options.clearDOM = false;
             return listTable_options;
         }
-        _createResizeLine() {
-            if (this.taskListTableInstance && this.options.taskListTable.width !== 'auto') {
+        _createSplitLineAndResizeLine() {
+            if (this.parsedOptions.horizontalSplitLine) {
+                this.horizontalSplitLine = document.createElement('div');
+                this.horizontalSplitLine.style.position = 'absolute';
+                this.horizontalSplitLine.style.top = this.getAllHeaderRowsHeight() + 'px';
+                this.horizontalSplitLine.style.left = this.tableY + 'px';
+                this.horizontalSplitLine.style.height = (this.parsedOptions.horizontalSplitLine.lineWidth ?? 2) + 'px';
+                this.horizontalSplitLine.style.width = this.tableNoFrameHeight + this.taskTableWidth + 'px';
+                this.horizontalSplitLine.style.backgroundColor = this.parsedOptions.horizontalSplitLine.lineColor;
+                this.horizontalSplitLine.style.zIndex = '100';
+                this.horizontalSplitLine.style.userSelect = 'none';
+                this.horizontalSplitLine.style.opacity = '1';
+                this.container.appendChild(this.horizontalSplitLine);
+            }
+            if (this.taskListTableInstance) {
                 this.resizeLine = document.createElement('div');
                 this.resizeLine.style.position = 'absolute';
                 this.resizeLine.style.top = this.tableY + 'px';
@@ -53715,29 +53830,37 @@
                 this.resizeLine.style.height = this.drawHeight + 'px';
                 this.resizeLine.style.backgroundColor = 'rgba(0,0,0,0)';
                 this.resizeLine.style.zIndex = '100';
-                this.resizeLine.style.cursor = 'col-resize';
+                this.parsedOptions.verticalSplitLineMoveable && (this.resizeLine.style.cursor = 'col-resize');
                 this.resizeLine.style.userSelect = 'none';
                 this.resizeLine.style.opacity = '1';
-                const highlightLine = document.createElement('div');
-                highlightLine.style.position = 'absolute';
-                highlightLine.style.top = '0px';
-                highlightLine.style.left = '5px';
-                highlightLine.style.width = this.parsedOptions.resizeLineStyle.lineWidth + 'px';
-                highlightLine.style.height = '100%';
-                highlightLine.style.backgroundColor = this.parsedOptions.resizeLineStyle.lineColor;
-                highlightLine.style.zIndex = '100';
-                highlightLine.style.cursor = 'col-resize';
-                highlightLine.style.userSelect = 'none';
-                highlightLine.style.pointerEvents = 'none';
-                highlightLine.style.opacity = '0';
-                highlightLine.style.transition = 'background-color 0.3s';
-                this.resizeLine.appendChild(highlightLine);
-                this.resizeLine.addEventListener('mouseover', () => {
-                    highlightLine.style.opacity = '1';
-                });
-                this.resizeLine.addEventListener('mouseout', () => {
+                const verticalSplitLine = document.createElement('div');
+                verticalSplitLine.style.position = 'absolute';
+                verticalSplitLine.style.top = '0px';
+                verticalSplitLine.style.left = `${(14 - this.parsedOptions.verticalSplitLine.lineWidth) / 2}px`;
+                verticalSplitLine.style.width = this.parsedOptions.verticalSplitLine.lineWidth + 'px';
+                verticalSplitLine.style.height = '100%';
+                verticalSplitLine.style.backgroundColor = this.parsedOptions.verticalSplitLine.lineColor;
+                verticalSplitLine.style.zIndex = '100';
+                verticalSplitLine.style.userSelect = 'none';
+                verticalSplitLine.style.pointerEvents = 'none';
+                verticalSplitLine.style.transition = 'background-color 0.3s';
+                this.resizeLine.appendChild(verticalSplitLine);
+                if (this.parsedOptions.verticalSplitLineHighlight) {
+                    const highlightLine = document.createElement('div');
+                    highlightLine.style.position = 'absolute';
+                    highlightLine.style.top = '0px';
+                    highlightLine.style.left = `${(14 - this.parsedOptions.verticalSplitLineHighlight.lineWidth ?? 2) / 2}px`;
+                    highlightLine.style.width = (this.parsedOptions.verticalSplitLineHighlight.lineWidth ?? 2) + 'px';
+                    highlightLine.style.height = '100%';
+                    highlightLine.style.backgroundColor = this.parsedOptions.verticalSplitLineHighlight.lineColor;
+                    highlightLine.style.zIndex = '100';
+                    highlightLine.style.cursor = 'col-resize';
+                    highlightLine.style.userSelect = 'none';
+                    highlightLine.style.pointerEvents = 'none';
                     highlightLine.style.opacity = '0';
-                });
+                    highlightLine.style.transition = 'background-color 0.3s';
+                    this.resizeLine.appendChild(highlightLine);
+                }
                 this.container.appendChild(this.resizeLine);
             }
         }
@@ -53863,7 +53986,7 @@
                 progress
             };
         }
-        updateDateToTaskRecord(updateDateType, days, index) {
+        _updateDateToTaskRecord(updateDateType, days, index) {
             const taskRecord = this.getRecordByIndex(index);
             const startDateField = this.parsedOptions.startDateField;
             const endDateField = this.parsedOptions.endDateField;
@@ -53886,9 +54009,8 @@
             }
             this.updateRecordToListTable(taskRecord, index);
         }
-        updateTaskRecord(index) {
-            const taskRecord = this.getRecordByIndex(index);
-            this.updateRecordToListTable(taskRecord, index);
+        updateTaskRecord(index, record) {
+            this.updateRecordToListTable(record, index);
         }
         setPixelRatio(pixelRatio) {
             this.parsedOptions.pixelRatio = pixelRatio;
@@ -53896,7 +54018,7 @@
         }
         _resize() {
             this._updateSize();
-            this.taskListTableInstance.setCanvasSize(this.taskTableWidth, this.tableNoFrameHeight + this.parsedOptions.frameStyle.borderLineWidth * 2);
+            this.taskListTableInstance.setCanvasSize(this.taskTableWidth, this.tableNoFrameHeight + this.parsedOptions.outerFrameStyle.borderLineWidth * 2);
             this._syncPropsFromTable();
             this.scenegraph.resize();
         }
@@ -53923,6 +54045,14 @@
         }
         setRecords(records) {
             this.records = records;
+            this.taskListTableInstance.setRecords(records);
+            this._syncPropsFromTable();
+            this.resizeLine.style.height = this.drawHeight + 'px';
+            this.scenegraph.refreshTaskBarsAndGrid();
+            const left = this.stateManager.scroll.horizontalBarPos;
+            const top = this.stateManager.scroll.verticalBarPos;
+            this.scenegraph.setX(-left);
+            this.scenegraph.setY(-top);
         }
     }
 
@@ -53932,7 +54062,7 @@
         getWeekNumber: getWeekNumber
     });
 
-    const version = "1.5.4";
+    const version = "1.6.0-alpha.4";
 
     exports.Gantt = Gantt;
     exports.TYPES = index$1;