@visactor/vtable 0.9.1 → 0.9.2-alpha.1

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"), column_1 = require("./group-creater/column"), auto_height_1 = require("./layout/auto-height"), 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"), empty_group_1 = require("./utils/empty-group"), update_chart_1 = require("./refresh-node/update-chart"), frozen_1 = require("./layout/frozen");
+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");
 
 vrender_1.container.load(contributions_1.default);
 
@@ -104,6 +104,24 @@ class Scenegraph {
             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,
@@ -113,8 +131,47 @@ class Scenegraph {
             pickable: !1,
             childrenPickable: !0
         });
-        componentGroup.role = "component", this.componentGroup = componentGroup, this.tableGroup.addChild(bodyGroup), 
-        this.tableGroup.addChild(rowHeaderGroup), this.tableGroup.addChild(colHeaderGroup), 
+        componentGroup.role = "component", this.componentGroup = componentGroup;
+        const rightTopCellGroup = new group_1.Group({
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0,
+            visible: !1,
+            pickable: !0,
+            fill: this.table.theme.cornerHeaderStyle.bgColor,
+            stroke: this.table.theme.cornerHeaderStyle.borderColor,
+            lineWidth: this.table.theme.cornerHeaderStyle.borderLineWidth
+        });
+        rightTopCellGroup.role = "corner-frozen", this.rightTopCellGroup = rightTopCellGroup;
+        const leftBottomCellGroup = new group_1.Group({
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0,
+            visible: !1,
+            pickable: !0,
+            fill: this.table.theme.cornerHeaderStyle.bgColor,
+            stroke: this.table.theme.cornerHeaderStyle.borderColor,
+            lineWidth: this.table.theme.cornerHeaderStyle.borderLineWidth
+        });
+        leftBottomCellGroup.role = "corner-frozen", this.leftBottomCellGroup = leftBottomCellGroup;
+        const rightBottomCellGroup = new group_1.Group({
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0,
+            visible: !1,
+            pickable: !0,
+            fill: this.table.theme.cornerHeaderStyle.bgColor,
+            stroke: this.table.theme.cornerHeaderStyle.borderColor,
+            lineWidth: this.table.theme.cornerHeaderStyle.borderLineWidth
+        });
+        rightBottomCellGroup.role = "corner-frozen", this.rightBottomCellGroup = rightBottomCellGroup, 
+        this.tableGroup.addChild(bodyGroup), this.tableGroup.addChild(rightFrozenGroup), 
+        this.tableGroup.addChild(bottomFrozenGroup), this.tableGroup.addChild(rowHeaderGroup), 
+        this.tableGroup.addChild(colHeaderGroup), this.tableGroup.addChild(rightBottomCellGroup), 
+        this.tableGroup.addChild(rightTopCellGroup), this.tableGroup.addChild(leftBottomCellGroup), 
         this.tableGroup.addChild(cornerHeaderGroup), this.tableGroup.addChild(componentGroup);
     }
     clearCells() {
@@ -140,11 +197,39 @@ class Scenegraph {
             y: 0,
             width: 0,
             height: 0
-        }), this.tableGroup.setAttributes({
+        }), this.rightFrozenGroup.setAttributes({
             x: 0,
             y: 0,
             width: 0,
             height: 0
+        }), this.bottomFrozenGroup.setAttributes({
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0
+        }), this.rightTopCellGroup.setAttributes({
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0,
+            visible: !1
+        }), this.leftBottomCellGroup.setAttributes({
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0,
+            visible: !1
+        }), this.rightTopCellGroup.setAttributes({
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0,
+            visible: !1
+        }), this.tableGroup.setAttributes({
+            x: this.table.tableX,
+            y: this.table.tableY,
+            width: 0,
+            height: 0
         }), this.tableGroup.border && (this.tableGroup.parent.removeChild(this.tableGroup.border), 
         delete this.tableGroup.border);
     }
@@ -153,29 +238,10 @@ class Scenegraph {
         this.selectedRangeComponents = new Map, this.selectingRangeComponents = new Map;
     }
     createSceneGraph() {
-        this.clear = !1, (0, compute_col_width_1.computeColsWidth)(this.table), this.frozenColCount = this.table.rowHeaderLevelCount, 
-        this.frozenRowCount = this.table.columnHeaderLevelCount, this.proxy = new proxy_1.SceneProxy(this.table), 
-        (0, frame_border_1.createFrameBorder)(this.tableGroup, this.table.theme.frameStyle, this.tableGroup.role, void 0, !0), 
-        this.createHeaderSceneGraph(), this.transpose || this.isPivot ? this.createBodySceneGraph() : this.createBodySceneGraphForFirstScreen();
-    }
-    createHeaderSceneGraph() {
-        (0, column_1.createCornerHeaderColGroup)(this.cornerHeaderGroup, 0, 0, this.table), 
-        this.colHeaderGroup.setAttribute("x", this.cornerHeaderGroup.attribute.width), (0, 
-        column_1.createColHeaderColGroup)(this.colHeaderGroup, 0, 0, this.table);
-    }
-    createBodySceneGraph() {
-        this.rowHeaderGroup.setAttribute("y", this.colHeaderGroup.attribute.height), (0, 
-        column_1.createRowHeaderColGroup)(this.rowHeaderGroup, 0, 0, this.table), this.bodyGroup.setAttributes({
-            y: this.colHeaderGroup.attribute.height,
-            x: this.rowHeaderGroup.attribute.width
-        }), (0, column_1.createBodyColGroup)(this.bodyGroup, 0, 0, this.table), this.afterScenegraphCreated();
-    }
-    createBodySceneGraphForFirstScreen() {
-        this.rowHeaderGroup.setAttribute("y", this.colHeaderGroup.attribute.height), this.bodyGroup.setAttributes({
-            y: this.colHeaderGroup.attribute.height,
-            x: this.rowHeaderGroup.attribute.width
-        }), console.log("before-createBodyColGroupForFirstScreen"), this.proxy.createColGroupForFirstScreen(this.rowHeaderGroup, this.bodyGroup, 0, 0, this.table), 
-        console.log("after-createBodyColGroupForFirstScreen"), this.afterScenegraphCreated();
+        this.clear = !1, this.frozenColCount = this.table.rowHeaderLevelCount, this.frozenRowCount = this.table.columnHeaderLevelCount, 
+        this.proxy = new proxy_1.SceneProxy(this.table), (0, frame_border_1.createFrameBorder)(this.tableGroup, this.table.theme.frameStyle, this.tableGroup.role, void 0, !0), 
+        this.proxy.createGroupForFirstScreen(this.cornerHeaderGroup, this.colHeaderGroup, this.rowHeaderGroup, this.rightFrozenGroup, this.bottomFrozenGroup, this.bodyGroup, 0, 0), 
+        this.afterScenegraphCreated();
     }
     renderSceneGraph() {
         this.stage.render();
@@ -196,20 +262,21 @@ class Scenegraph {
         element || void 0;
     }
     getCell(col, row, getShadow) {
-        var _a;
-        let cell = null === (_a = this.getColGroup(col, row < this.frozenRowCount)) || void 0 === _a ? void 0 : _a.getRowGroup(row);
-        if (cell && "shadow-cell" === cell.role && !getShadow) {
+        var _a, _b, _c;
+        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), 
+        cell && "shadow-cell" === cell.role && !getShadow) {
             const range = this.table.getCellRange(col, row);
             cell = this.getCell(range.start.col, range.start.row);
         }
         return cell || empty_group_1.emptyGroup;
     }
-    highPerformanceGetCell(col, row) {
-        return this.isPivot || this.transpose || this.table.isHeader(col, row) ? this.getCell(col, row) : this.proxy.highPerformanceGetCell(col, row, 0, this.table.rowCount - 1);
+    highPerformanceGetCell(col, row, getShadow) {
+        return this.table.isHeader(col, row) ? this.getCell(col, row, getShadow) : this.proxy.highPerformanceGetCell(col, row, 0, this.table.rowCount - 1, getShadow);
     }
     getColGroup(col, isCornerOrColHeader = !1) {
         let element;
-        return element = col < this.frozenColCount && isCornerOrColHeader ? this.cornerHeaderGroup.getColGroup(col) : col < this.frozenColCount ? this.rowHeaderGroup.getColGroup(col) : isCornerOrColHeader ? this.colHeaderGroup.getColGroup(col) : this.bodyGroup.getColGroup(col), 
+        return element = col < this.frozenColCount && isCornerOrColHeader ? this.cornerHeaderGroup.getColGroup(col) : col < this.frozenColCount ? this.rowHeaderGroup.getColGroup(col) : isCornerOrColHeader ? this.colHeaderGroup.getColGroup(col) : this.table.rightFrozenColCount > 0 && col > this.table.colCount - 1 - this.table.rightFrozenColCount ? this.rightFrozenGroup.getColGroup(col) : this.bodyGroup.getColGroup(col), 
         element || void 0;
     }
     getCellSize(col, row) {
@@ -334,27 +401,53 @@ class Scenegraph {
     updateChartSize(col) {
         (0, update_chart_1.updateChartSize)(this, col);
     }
+    updateChartState(datum) {
+        this.table.isPivotChart() && (0, update_chart_1.updateChartState)(this, datum);
+    }
     updateAutoColWidth(col) {
         const oldWidth = this.table.getColWidth(col), newWidth = (0, compute_col_width_1.computeColWidth)(col, 0, this.table.rowCount - 1, this.table, !0);
         newWidth !== oldWidth && this.updateColWidth(col, newWidth - oldWidth);
     }
     recalculateColWidths() {
-        (0, compute_col_width_1.computeColsWidth)(this.table, !0);
+        (0, compute_col_width_1.computeColsWidth)(this.table, 0, this.table.colCount - 1, !0);
+    }
+    recalculateRowHeights() {
+        (0, compute_row_height_1.computeRowsHeight)(this.table, 0, this.table.rowCount - 1);
     }
     resize() {
-        this.recalculateColWidths(), this.table.internalProps.autoRowHeight && (0, auto_height_1.updateAutoRowHeight)(this, !0), 
-        this.dealWidthMode(), this.dealFrozen(), this.updateTableSize(), this.updateBorderSizeAndPosition(), 
-        this.component.updateScrollBar(), this.updateNextFrame();
+        this.recalculateColWidths(), "autoHeight" === this.table.heightMode && this.recalculateRowHeights(), 
+        this.dealWidthMode(), this.dealHeightMode(), this.dealFrozen(), this.updateTableSize(), 
+        this.updateBorderSizeAndPosition(), this.component.updateScrollBar(), 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)),
-            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))
+            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),
+            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({
+            visible: !0,
+            y: this.tableGroup.attribute.height - this.bottomFrozenGroup.attribute.height,
+            height: this.bottomFrozenGroup.attribute.height,
+            width: this.table.getFrozenColsWidth()
+        }), this.rightBottomCellGroup.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({
+            visible: !0,
+            x: this.tableGroup.attribute.width - this.rightFrozenGroup.attribute.width,
+            width: this.rightFrozenGroup.attribute.width,
+            height: this.table.getFrozenRowsHeight()
+        }), this.rightBottomCellGroup.setAttributes({
+            visible: !0,
+            x: this.tableGroup.attribute.width - this.rightFrozenGroup.attribute.width,
+            width: this.rightFrozenGroup.attribute.width
+        }));
     }
     updateRowHeight(row, detaY) {
         (0, update_height_1.updateRowHeight)(this, row, detaY), this.updateContainerHeight(row, detaY);
@@ -380,27 +473,26 @@ class Scenegraph {
         this.updateRowHeight(row, height - oldHeight);
     }
     setX(x) {
-        this.colHeaderGroup.attribute.width + x !== this.bodyGroup.attribute.x && (this.bodyGroup.setAttribute("x", this.rowHeaderGroup.attribute.width + x), 
-        this.colHeaderGroup.setAttribute("x", this.rowHeaderGroup.attribute.width + x), 
-        this.updateNextFrame());
+        this.table.scenegraph.proxy.setX(-x);
     }
     setY(y) {
-        if (this.transpose || this.isPivot) {
-            if (this.colHeaderGroup.attribute.height + y === this.bodyGroup.attribute.y) return;
-            this.bodyGroup.setAttribute("y", this.colHeaderGroup.attribute.height + y), this.rowHeaderGroup.setAttribute("y", this.colHeaderGroup.attribute.height + y), 
-            this.updateNextFrame();
-        } else this.table.scenegraph.proxy && this.table.scenegraph.proxy.setY(-y);
+        this.table.scenegraph.proxy.setY(-y);
     }
     setBodyAndRowHeaderY(y) {
         this.colHeaderGroup.attribute.height + y !== this.bodyGroup.attribute.y && (this.bodyGroup.setAttribute("y", this.colHeaderGroup.attribute.height + y), 
         this.rowHeaderGroup.setAttribute("y", this.colHeaderGroup.attribute.height + y), 
+        this.table.rightFrozenColCount > 0 && this.rightFrozenGroup.setAttribute("y", this.colHeaderGroup.attribute.height + y), 
+        this.updateNextFrame());
+    }
+    setBodyAndColHeaderX(x) {
+        this.rowHeaderGroup.attribute.width + x !== this.bodyGroup.attribute.x && (this.bodyGroup.setAttribute("x", this.rowHeaderGroup.attribute.width + x), 
+        this.colHeaderGroup.setAttribute("x", this.rowHeaderGroup.attribute.width + x), 
+        this.table.bottomFrozenRowCount > 0 && this.bottomFrozenGroup.setAttribute("x", this.rowHeaderGroup.attribute.width + x), 
         this.updateNextFrame());
     }
     afterScenegraphCreated() {
-        const {autoRowHeight: autoRowHeight} = this.table.internalProps;
-        autoRowHeight && (0, auto_height_1.updateAutoRowHeight)(this), this.dealWidthMode(), 
-        this.dealFrozen(), this.createFrameBorder(), this.updateBorderSizeAndPosition(), 
-        this.component.updateScrollBar(), (0, stick_text_1.handleTextStick)(this.table), 
+        this.dealWidthMode(), this.dealHeightMode(), this.dealFrozen(), this.createFrameBorder(), 
+        this.updateBorderSizeAndPosition(), this.component.updateScrollBar(), (0, stick_text_1.handleTextStick)(this.table), 
         this.updateNextFrame();
     }
     dealWidthMode() {
@@ -415,7 +507,7 @@ class Scenegraph {
                 colWidth = col === table.colCount - 1 ? totalDrawWidth - table.getColsWidth(0, table.colCount - 2) : Math.round(table.getColWidth(col) * factor), 
                 this.setColWidth(col, colWidth);
             }
-        } else if ("standard-aeolus" === table.widthMode && this.transpose) {
+        } else if (table.autoFillWidth) {
             const canvasWidth = table.tableNoFrameWidth;
             let actualWidth = 0, actualHeaderWidth = 0;
             for (let col = 0; col < table.colCount; col++) {
@@ -448,6 +540,21 @@ class Scenegraph {
             y: this.colHeaderGroup.attribute.height
         });
     }
+    dealHeightMode() {
+        const table = this.table;
+        if ("adaptive" === table.heightMode) {
+            table._clearRowRangeHeightsMap();
+            const totalDrawHeight = table.tableNoFrameHeight - table.getFrozenRowsHeight() - table.getBottomFrozenRowsHeight();
+            let actualHeight = 0;
+            for (let row = table.frozenRowCount; row < table.rowCount - table.bottomFrozenRowCount; row++) actualHeight += table.getRowHeight(row);
+            const factor = totalDrawHeight / actualHeight;
+            for (let row = table.frozenRowCount; row < table.rowCount - table.bottomFrozenRowCount; row++) {
+                let rowHeight;
+                rowHeight = row === table.rowCount - table.bottomFrozenRowCount - 1 ? totalDrawHeight - table.getRowsHeight(table.frozenRowCount, table.rowCount - table.bottomFrozenRowCount - 2) : Math.round(table.getRowHeight(row) * factor), 
+                this.setRowHeight(row, rowHeight);
+            }
+        }
+    }
     dealFrozen() {
         (0, frozen_1.dealFrozen)(this);
     }
@@ -605,7 +712,7 @@ class Scenegraph {
         this.component.drillIcon.update(visible, x, y, drillDown, drillUp, this);
     }
     updateCellContent(col, row) {
-        this.clear || (0, cell_helper_1.updateCell)(col, row, this.table);
+        if (!this.clear) return (0, cell_helper_1.updateCell)(col, row, this.table);
     }
     setPixelRatio(pixelRatio) {
         this.stage.disableDirtyBounds(), this.stage.window.setDpr(pixelRatio), this.stage.render(), 
@@ -619,8 +726,8 @@ class Scenegraph {
     }
     updateRow(removeCells, addCells) {
         (0, update_row_1.updateRow)(removeCells, addCells, this.table), this.recalculateColWidths(), 
-        this.table.internalProps.autoRowHeight && (0, auto_height_1.updateAutoRowHeight)(this, !0), 
-        this.table.stateManeger.checkFrozen(), this.updateNextFrame();
+        "autoHeight" === this.table.heightMode && this.recalculateRowHeights(), this.table.stateManeger.checkFrozen(), 
+        this.updateNextFrame();
     }
     findAndUpdateIcon(group, funcTypeArr, iconConfig) {
         group.forEachChildren((icon => {