@visactor/vtable 0.9.3-alpha.6 → 0.10.0

package/cjs/scenegraph/scenegraph.d.ts

@@ -1,6 +1,6 @@
 import type { IStage, IRect } from '@visactor/vrender';
 import { type CellAddress, type CellType, type ColumnIconOption, type SortOrder, IconFuncTypeEnum } from '../ts-types';
-import { Group } from './graphic/group';
+import type { Group } from './graphic/group';
 import type { Icon } from './graphic/icon';
 import { TableComponent } from './component/table-component';
 import { SceneProxy } from './group-creater/progress/proxy';
@@ -20,9 +20,9 @@ export declare class Scenegraph {
     bodyGroup: Group;
     rightFrozenGroup: Group;
     bottomFrozenGroup: Group;
-    rightTopCellGroup: Group;
-    leftBottomCellGroup: Group;
-    rightBottomCellGroup: Group;
+    rightTopCornerGroup: Group;
+    leftBottomCornerGroup: Group;
+    rightBottomCornerGroup: Group;
     componentGroup: Group;
     selectedRangeComponents: Map<string, {
         rect: IRect;
@@ -61,6 +61,9 @@ export declare class Scenegraph {
     highPerformanceGetCell(col: number, row: number, getShadow?: boolean): Group;
     getColGroup(col: number, isCornerOrColHeader?: boolean): Group;
     getColGroupInBottom(col: number): Group | undefined;
+    getColGroupInLeftBottomCorner(col: number): Group | undefined;
+    getColGroupInRightTopCorner(col: number): Group | undefined;
+    getColGroupInRightBottomCorner(col: number): Group | undefined;
     getCellSize(col: number, row: number): {
         width: number;
         height: number;
@@ -116,6 +119,8 @@ export declare class Scenegraph {
     };
     updateIcon(icon: Icon, iconConfig: ColumnIconOption): void;
     updateFrozen(): void;
+    dealWidthRightFrozen(rightFrozenColCount: number): void;
+    dealWidthBottomFrozen(bottomFrozenRowCount: number): void;
     updateBorderSizeAndPosition(): void;
     updateSortIcon(col: number, row: number, iconMark: Icon, order: SortOrder, oldSortCol: number, oldSortRow: number, oldIconMark: Icon | undefined): void;
     updateFrozenIcon(col: number, oldFrozenCol: number): void;

package/cjs/scenegraph/scenegraph.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.Scenegraph = void 0;
 
-const vrender_1 = require("@visactor/vrender"), ts_types_1 = require("../ts-types"), vutils_1 = require("@visactor/vutils"), group_1 = require("./graphic/group"), get_cell_merge_1 = require("./utils/get-cell-merge"), update_width_1 = require("./layout/update-width"), table_component_1 = require("./component/table-component"), update_height_1 = require("./layout/update-height"), image_cell_1 = require("./group-creater/cell-type/image-cell"), padding_1 = require("./utils/padding"), frame_border_1 = require("./style/frame-border"), global_1 = require("../tools/global"), contributions_1 = __importDefault(require("./graphic/contributions")), get_prop_1 = require("./utils/get-prop"), text_icon_layout_1 = require("./utils/text-icon-layout"), proxy_1 = require("./group-creater/progress/proxy"), compute_col_width_1 = require("./layout/compute-col-width"), move_cell_1 = require("./layout/move-cell"), cell_helper_1 = require("./group-creater/cell-helper"), update_select_border_1 = require("./select/update-select-border"), create_select_border_1 = require("./select/create-select-border"), move_select_border_1 = require("./select/move-select-border"), delete_select_border_1 = require("./select/delete-select-border"), update_row_1 = require("./layout/update-row"), stick_text_1 = require("./stick-text"), compute_row_height_1 = require("./layout/compute-row-height"), empty_group_1 = require("./utils/empty-group"), update_chart_1 = require("./refresh-node/update-chart"), frozen_1 = require("./layout/frozen"), corner_cell_1 = require("./style/corner-cell");
+const vrender_1 = require("@visactor/vrender"), ts_types_1 = require("../ts-types"), vutils_1 = require("@visactor/vutils"), get_cell_merge_1 = require("./utils/get-cell-merge"), update_width_1 = require("./layout/update-width"), table_component_1 = require("./component/table-component"), update_height_1 = require("./layout/update-height"), image_cell_1 = require("./group-creater/cell-type/image-cell"), padding_1 = require("./utils/padding"), frame_border_1 = require("./style/frame-border"), global_1 = require("../tools/global"), contributions_1 = __importDefault(require("./graphic/contributions")), get_prop_1 = require("./utils/get-prop"), text_icon_layout_1 = require("./utils/text-icon-layout"), proxy_1 = require("./group-creater/progress/proxy"), compute_col_width_1 = require("./layout/compute-col-width"), move_cell_1 = require("./layout/move-cell"), cell_helper_1 = require("./group-creater/cell-helper"), update_select_border_1 = require("./select/update-select-border"), create_select_border_1 = require("./select/create-select-border"), move_select_border_1 = require("./select/move-select-border"), delete_select_border_1 = require("./select/delete-select-border"), update_row_1 = require("./layout/update-row"), stick_text_1 = require("./stick-text"), compute_row_height_1 = require("./layout/compute-row-height"), empty_group_1 = require("./utils/empty-group"), frozen_1 = require("./layout/frozen"), update_chart_1 = require("./refresh-node/update-chart"), init_scenegraph_1 = require("./group-creater/init-scenegraph");
 
 vrender_1.container.load(contributions_1.default);
 
@@ -58,94 +58,14 @@ class Scenegraph {
         return this.transpose || this.isPivot ? this.table.rowCount - 1 : null !== (_a = this.proxy.rowEnd) && void 0 !== _a ? _a : 0;
     }
     initSceneGraph() {
-        this.isPivot = this.table.isPivotTable(), this.transpose = this.table.options.transpose;
-        const width = this.table.tableNoFrameWidth, height = this.table.tableNoFrameHeight;
-        this.tableGroup = new group_1.Group({
-            x: 0,
-            y: 0,
-            width: width,
-            height: height,
-            clip: !0,
-            pickable: !1
-        }), this.tableGroup.role = "table";
-        const colHeaderGroup = new group_1.Group({
-            x: 0,
-            y: 0,
-            width: 0,
-            height: 0,
-            clip: !1,
-            pickable: !1
-        });
-        colHeaderGroup.role = "col-header", this.colHeaderGroup = colHeaderGroup;
-        const cornerHeaderGroup = new group_1.Group({
-            x: 0,
-            y: 0,
-            width: 0,
-            height: 0,
-            clip: !1,
-            pickable: !1
-        });
-        cornerHeaderGroup.role = "corner-header", this.cornerHeaderGroup = cornerHeaderGroup;
-        const rowHeaderGroup = new group_1.Group({
-            x: 0,
-            y: 0,
-            width: 0,
-            height: 0,
-            clip: !1,
-            pickable: !1
-        });
-        rowHeaderGroup.role = "row-header", this.rowHeaderGroup = rowHeaderGroup;
-        const bodyGroup = new group_1.Group({
-            x: 0,
-            y: 0,
-            width: width,
-            height: 0,
-            clip: !1,
-            pickable: !1
-        });
-        bodyGroup.role = "body", this.bodyGroup = bodyGroup;
-        const rightFrozenGroup = new group_1.Group({
-            x: 0,
-            y: 0,
-            width: width,
-            height: 0,
-            clip: !1,
-            pickable: !1
-        });
-        rightFrozenGroup.role = "right-frozen", this.rightFrozenGroup = rightFrozenGroup;
-        const bottomFrozenGroup = new group_1.Group({
-            x: 0,
-            y: 0,
-            width: width,
-            height: 0,
-            clip: !1,
-            pickable: !1
-        });
-        bottomFrozenGroup.role = "bottom-frozen", this.bottomFrozenGroup = bottomFrozenGroup;
-        const componentGroup = new group_1.Group({
-            x: 0,
-            y: 0,
-            width: 0,
-            height: 0,
-            clip: !1,
-            pickable: !1,
-            childrenPickable: !0
-        });
-        componentGroup.role = "component", this.componentGroup = componentGroup, this.rightTopCellGroup = (0, 
-        corner_cell_1.createCornerCell)(this.table.theme.cornerRightTopCellStyle || this.table.theme.cornerHeaderStyle), 
-        this.leftBottomCellGroup = (0, corner_cell_1.createCornerCell)(this.table.theme.cornerLeftBottomCellStyle || this.table.theme.cornerHeaderStyle), 
-        this.rightBottomCellGroup = (0, corner_cell_1.createCornerCell)(this.table.theme.cornerRightBottomCellStyle || this.table.theme.cornerHeaderStyle), 
-        this.tableGroup.addChild(bodyGroup), this.tableGroup.addChild(rightFrozenGroup), 
-        this.tableGroup.addChild(bottomFrozenGroup), this.tableGroup.addChild(rowHeaderGroup), 
-        this.tableGroup.addChild(colHeaderGroup), this.tableGroup.addChild(this.rightBottomCellGroup), 
-        this.tableGroup.addChild(this.rightTopCellGroup), this.tableGroup.addChild(this.leftBottomCellGroup), 
-        this.tableGroup.addChild(cornerHeaderGroup), this.tableGroup.addChild(componentGroup);
+        this.isPivot = this.table.isPivotTable(), this.transpose = this.table.options.transpose, 
+        (0, init_scenegraph_1.initSceneGraph)(this);
     }
     clearCells() {
         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.rightTopCellGroup.clear(), 
-        this.rightBottomCellGroup.clear(), this.leftBottomCellGroup.clear(), this.colHeaderGroup.setAttributes({
+        this.bottomFrozenGroup.clear(), this.rightFrozenGroup.clear(), this.rightTopCornerGroup.clear(), 
+        this.rightBottomCornerGroup.clear(), this.leftBottomCornerGroup.clear(), this.colHeaderGroup.setAttributes({
             x: 0,
             y: 0,
             width: 0,
@@ -175,19 +95,19 @@ class Scenegraph {
             y: 0,
             width: 0,
             height: 0
-        }), this.rightTopCellGroup.setAttributes({
+        }), this.rightTopCornerGroup.setAttributes({
             x: 0,
             y: 0,
             width: 0,
             height: 0,
             visible: !1
-        }), this.leftBottomCellGroup.setAttributes({
+        }), this.leftBottomCornerGroup.setAttributes({
             x: 0,
             y: 0,
             width: 0,
             height: 0,
             visible: !1
-        }), this.rightTopCellGroup.setAttributes({
+        }), this.rightBottomCornerGroup.setAttributes({
             x: 0,
             y: 0,
             width: 0,
@@ -230,9 +150,9 @@ class Scenegraph {
         element || void 0;
     }
     getCell(col, row, getShadow) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f;
         let cell;
-        if (cell = this.table.rightFrozenColCount > 0 && col > this.table.colCount - 1 - this.table.rightFrozenColCount ? null === (_a = this.rightFrozenGroup.getColGroup(col)) || void 0 === _a ? void 0 : _a.getRowGroup(row) : this.table.bottomFrozenRowCount > 0 && row > this.table.rowCount - 1 - this.table.bottomFrozenRowCount ? null === (_b = this.bottomFrozenGroup.getColGroup(col)) || void 0 === _b ? void 0 : _b.getRowGroup(row) : null === (_c = this.getColGroup(col, row < this.frozenRowCount)) || void 0 === _c ? void 0 : _c.getRowGroup(row), 
+        if (cell = this.table.rightFrozenColCount > 0 && col >= this.table.colCount - this.table.rightFrozenColCount && row < this.table.frozenRowCount ? null === (_a = this.rightBottomCornerGroup.getColGroup(col)) || void 0 === _a ? void 0 : _a.getRowGroup(row) : this.table.bottomFrozenRowCount > 0 && row >= this.table.rowCount - this.table.bottomFrozenRowCount && col < this.table.frozenColCount ? null === (_b = this.leftBottomCornerGroup.getColGroup(col)) || void 0 === _b ? void 0 : _b.getRowGroup(row) : this.table.rightFrozenColCount > 0 && this.table.bottomFrozenRowCount > 0 && col >= this.table.colCount - this.table.rightFrozenColCount && row >= this.table.rowCount - this.table.bottomFrozenRowCount ? null === (_c = this.rightBottomCornerGroup.getColGroup(col)) || void 0 === _c ? void 0 : _c.getRowGroup(row) : this.table.rightFrozenColCount > 0 && col > this.table.colCount - 1 - this.table.rightFrozenColCount ? null === (_d = this.rightFrozenGroup.getColGroup(col)) || void 0 === _d ? void 0 : _d.getRowGroup(row) : this.table.bottomFrozenRowCount > 0 && row > this.table.rowCount - 1 - this.table.bottomFrozenRowCount ? null === (_e = this.bottomFrozenGroup.getColGroup(col)) || void 0 === _e ? void 0 : _e.getRowGroup(row) : null === (_f = this.getColGroup(col, row < this.frozenRowCount)) || void 0 === _f ? void 0 : _f.getRowGroup(row), 
         cell && "shadow-cell" === cell.role && !getShadow) {
             const range = this.table.getCellRange(col, row);
             range.start.col === col && range.start.row === row || (cell = this.getCell(range.start.col, range.start.row));
@@ -250,6 +170,15 @@ class Scenegraph {
     getColGroupInBottom(col) {
         if (this.table.bottomFrozenRowCount > 0) return this.bottomFrozenGroup.getColGroup(col);
     }
+    getColGroupInLeftBottomCorner(col) {
+        if (this.table.bottomFrozenRowCount > 0) return this.leftBottomCornerGroup.getColGroup(col);
+    }
+    getColGroupInRightTopCorner(col) {
+        if (this.table.rightFrozenColCount > 0) return this.rightTopCornerGroup.getColGroup(col);
+    }
+    getColGroupInRightBottomCorner(col) {
+        if (this.table.rightFrozenColCount > 0 && this.table.bottomFrozenRowCount > 0) return this.rightBottomCornerGroup.getColGroup(col);
+    }
     getCellSize(col, row) {
         const cell = this.getCell(col, row), mergeInfo = (0, get_cell_merge_1.getCellMergeInfo)(this.table, col, row);
         let width = cell.attribute.width, height = cell.attribute.height;
@@ -386,36 +315,36 @@ class Scenegraph {
         (0, compute_row_height_1.computeRowsHeight)(this.table, 0, this.table.rowCount - 1);
     }
     resize() {
-        this.recalculateColWidths(), "autoHeight" === this.table.heightMode && this.recalculateRowHeights(), 
-        this.dealWidthMode(), this.dealHeightMode(), this.dealFrozen(), this.updateTableSize(), 
-        this.updateBorderSizeAndPosition(), this.component.updateScrollBar(), "adaptive" !== this.table.widthMode && "adaptive" !== this.table.heightMode || this.updateChartSize(this.table.rowHeaderLevelCount), 
+        this.recalculateColWidths(), this.recalculateRowHeights(), this.dealWidthMode(), 
+        this.dealHeightMode(), this.dealFrozen(), this.updateTableSize(), this.updateBorderSizeAndPosition(), 
+        this.component.updateScrollBar(), "adaptive" !== this.table.widthMode && "adaptive" !== this.table.heightMode || this.updateChartSize(this.table.rowHeaderLevelCount), 
         this.updateNextFrame();
     }
     updateTableSize() {
         var _a, _b;
         this.tableGroup.setAttributes({
-            width: Math.min(this.table.tableNoFrameWidth, Math.max(this.colHeaderGroup.attribute.width, this.bodyGroup.attribute.width, 0) + Math.max(this.cornerHeaderGroup.attribute.width, this.rowHeaderGroup.attribute.width, 0) + this.rightBottomCellGroup.attribute.width),
+            width: Math.min(this.table.tableNoFrameWidth, Math.max(this.colHeaderGroup.attribute.width, this.bodyGroup.attribute.width, 0) + Math.max(this.cornerHeaderGroup.attribute.width, this.rowHeaderGroup.attribute.width, 0) + this.rightBottomCornerGroup.attribute.width),
             height: Math.min(this.table.tableNoFrameHeight, (null !== (_a = this.colHeaderGroup.attribute.height) && void 0 !== _a ? _a : 0) + (null !== (_b = this.bodyGroup.attribute.height) && void 0 !== _b ? _b : 0) + this.bottomFrozenGroup.attribute.height)
         }), this.tableGroup.border && this.tableGroup.border.setAttributes({
             width: this.tableGroup.attribute.width + this.tableGroup.border.attribute.lineWidth,
             height: this.tableGroup.attribute.height + this.tableGroup.border.attribute.lineWidth
         }), this.table.bottomFrozenRowCount > 0 && (this.bottomFrozenGroup.setAttribute("y", this.tableGroup.attribute.height - this.bottomFrozenGroup.attribute.height), 
-        this.leftBottomCellGroup.setAttributes({
+        this.leftBottomCornerGroup.setAttributes({
             visible: !0,
             y: this.tableGroup.attribute.height - this.bottomFrozenGroup.attribute.height,
             height: this.bottomFrozenGroup.attribute.height,
             width: this.table.getFrozenColsWidth()
-        }), this.rightBottomCellGroup.setAttributes({
+        }), this.rightBottomCornerGroup.setAttributes({
             visible: !0,
             y: this.tableGroup.attribute.height - this.bottomFrozenGroup.attribute.height,
             height: this.bottomFrozenGroup.attribute.height
         })), this.table.rightFrozenColCount > 0 && (this.rightFrozenGroup.setAttribute("x", this.tableGroup.attribute.width - this.rightFrozenGroup.attribute.width), 
-        this.rightTopCellGroup.setAttributes({
+        this.rightTopCornerGroup.setAttributes({
             visible: !0,
             x: this.tableGroup.attribute.width - this.rightFrozenGroup.attribute.width,
             width: this.rightFrozenGroup.attribute.width,
             height: this.table.getFrozenRowsHeight()
-        }), this.rightBottomCellGroup.setAttributes({
+        }), this.rightBottomCornerGroup.setAttributes({
             visible: !0,
             x: this.tableGroup.attribute.width - this.rightFrozenGroup.attribute.width,
             width: this.rightFrozenGroup.attribute.width
@@ -431,8 +360,9 @@ class Scenegraph {
         this.updateNextFrame();
     }
     updateContainerHeight(row, detaY) {
-        row < this.frozenRowCount ? (this.colHeaderGroup.setDeltaHeight(detaY), this.cornerHeaderGroup.setDeltaHeight(detaY), 
-        this.rowHeaderGroup.setDeltaY(detaY), this.bodyGroup.setDeltaY(detaY)) : (this.rowHeaderGroup.setDeltaHeight(detaY), 
+        row < this.table.frozenRowCount ? (this.colHeaderGroup.setDeltaHeight(detaY), this.cornerHeaderGroup.setDeltaHeight(detaY), 
+        this.rowHeaderGroup.setDeltaY(detaY), this.bodyGroup.setDeltaY(detaY)) : row >= this.table.rowCount - this.table.bottomFrozenRowCount ? (this.leftBottomCornerGroup.setDeltaHeight(detaY), 
+        this.bottomFrozenGroup.setDeltaHeight(detaY), this.rightBottomCornerGroup.setDeltaHeight(detaY)) : (this.rowHeaderGroup.setDeltaHeight(detaY), 
         this.bodyGroup.setDeltaHeight(detaY)), this.updateTableSize(), this.component.updateScrollBar(), 
         this.updateNextFrame();
     }
@@ -622,6 +552,14 @@ class Scenegraph {
     updateFrozen() {
         this.clear || (this.resetFrozen(), this.dealFrozen(), this.component.updateScrollBar());
     }
+    dealWidthRightFrozen(rightFrozenColCount) {
+        this.clear ? this.table.internalProps.rightFrozenColCount = rightFrozenColCount : (0, 
+        frozen_1.dealRightFrozen)(rightFrozenColCount, this);
+    }
+    dealWidthBottomFrozen(bottomFrozenRowCount) {
+        this.clear ? this.table.internalProps.bottomFrozenRowCount = bottomFrozenRowCount : (0, 
+        frozen_1.dealBottomFrozen)(bottomFrozenRowCount, this);
+    }
     updateBorderSizeAndPosition() {
         this.bodyGroup.border && (this.bodyGroup.appendChild(this.bodyGroup.border), (0, 
         frame_border_1.updateFrameBorderSize)(this.bodyGroup), 0 === this.rowHeaderGroup.attribute.width ? (0, 
@@ -700,8 +638,7 @@ class Scenegraph {
     }
     updateRow(removeCells, addCells) {
         (0, update_row_1.updateRow)(removeCells, addCells, this.table), this.recalculateColWidths(), 
-        "autoHeight" === this.table.heightMode && this.recalculateRowHeights(), this.table.stateManeger.checkFrozen(), 
-        this.updateNextFrame();
+        this.recalculateRowHeights(), this.table.stateManeger.checkFrozen(), this.updateNextFrame();
     }
     findAndUpdateIcon(group, funcTypeArr, iconConfig) {
         group.forEachChildren((icon => {