@visactor/vtable 0.9.3-alpha.7 → 0.10.0

package/es/scenegraph/scenegraph.js

@@ -4,8 +4,6 @@ import { IconFuncTypeEnum } from "../ts-types";
 
 import { isArray, isString } from "@visactor/vutils";
 
-import { Group } from "./graphic/group";
-
 import { getCellMergeInfo } from "./utils/get-cell-merge";
 
 import { updateColWidth } from "./layout/update-width";
@@ -52,11 +50,11 @@ import { computeRowsHeight } from "./layout/compute-row-height";
 
 import { emptyGroup } from "./utils/empty-group";
 
-import { updateChartSize, updateChartState } from "./refresh-node/update-chart";
+import { dealBottomFrozen, dealFrozen, dealRightFrozen, resetFrozen } from "./layout/frozen";
 
-import { dealFrozen, resetFrozen } from "./layout/frozen";
+import { updateChartSize, updateChartState } from "./refresh-node/update-chart";
 
-import { createCornerCell } from "./style/corner-cell";
+import { initSceneGraph } from "./group-creater/init-scenegraph";
 
 container.load(splitModule);
 
@@ -104,93 +102,14 @@ export 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({
-            x: 0,
-            y: 0,
-            width: width,
-            height: height,
-            clip: !0,
-            pickable: !1
-        }), this.tableGroup.role = "table";
-        const colHeaderGroup = new Group({
-            x: 0,
-            y: 0,
-            width: 0,
-            height: 0,
-            clip: !1,
-            pickable: !1
-        });
-        colHeaderGroup.role = "col-header", this.colHeaderGroup = colHeaderGroup;
-        const cornerHeaderGroup = new Group({
-            x: 0,
-            y: 0,
-            width: 0,
-            height: 0,
-            clip: !1,
-            pickable: !1
-        });
-        cornerHeaderGroup.role = "corner-header", this.cornerHeaderGroup = cornerHeaderGroup;
-        const rowHeaderGroup = new Group({
-            x: 0,
-            y: 0,
-            width: 0,
-            height: 0,
-            clip: !1,
-            pickable: !1
-        });
-        rowHeaderGroup.role = "row-header", this.rowHeaderGroup = rowHeaderGroup;
-        const bodyGroup = new Group({
-            x: 0,
-            y: 0,
-            width: width,
-            height: 0,
-            clip: !1,
-            pickable: !1
-        });
-        bodyGroup.role = "body", this.bodyGroup = bodyGroup;
-        const rightFrozenGroup = new Group({
-            x: 0,
-            y: 0,
-            width: width,
-            height: 0,
-            clip: !1,
-            pickable: !1
-        });
-        rightFrozenGroup.role = "right-frozen", this.rightFrozenGroup = rightFrozenGroup;
-        const bottomFrozenGroup = new Group({
-            x: 0,
-            y: 0,
-            width: width,
-            height: 0,
-            clip: !1,
-            pickable: !1
-        });
-        bottomFrozenGroup.role = "bottom-frozen", this.bottomFrozenGroup = bottomFrozenGroup;
-        const componentGroup = new Group({
-            x: 0,
-            y: 0,
-            width: 0,
-            height: 0,
-            clip: !1,
-            pickable: !1,
-            childrenPickable: !0
-        });
-        componentGroup.role = "component", this.componentGroup = componentGroup, this.rightTopCellGroup = createCornerCell(this.table.theme.cornerRightTopCellStyle || this.table.theme.cornerHeaderStyle), 
-        this.leftBottomCellGroup = createCornerCell(this.table.theme.cornerLeftBottomCellStyle || this.table.theme.cornerHeaderStyle), 
-        this.rightBottomCellGroup = 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, 
+        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,
@@ -220,19 +139,19 @@ export 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,
@@ -275,9 +194,9 @@ export 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));
@@ -295,6 +214,15 @@ export 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 = getCellMergeInfo(this.table, col, row);
         let width = cell.attribute.width, height = cell.attribute.height;
@@ -439,28 +367,28 @@ export class Scenegraph {
     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
@@ -476,8 +404,9 @@ export 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();
     }
@@ -665,6 +594,12 @@ export class Scenegraph {
     updateFrozen() {
         this.clear || (this.resetFrozen(), this.dealFrozen(), this.component.updateScrollBar());
     }
+    dealWidthRightFrozen(rightFrozenColCount) {
+        this.clear ? this.table.internalProps.rightFrozenColCount = rightFrozenColCount : dealRightFrozen(rightFrozenColCount, this);
+    }
+    dealWidthBottomFrozen(bottomFrozenRowCount) {
+        this.clear ? this.table.internalProps.bottomFrozenRowCount = bottomFrozenRowCount : dealBottomFrozen(bottomFrozenRowCount, this);
+    }
     updateBorderSizeAndPosition() {
         this.bodyGroup.border && (this.bodyGroup.appendChild(this.bodyGroup.border), updateFrameBorderSize(this.bodyGroup), 
         0 === this.rowHeaderGroup.attribute.width ? updateFrameBorder(this.bodyGroup, this.table.theme.bodyStyle.frameStyle, [ !0, !0, !0, !0 ]) : updateFrameBorder(this.bodyGroup, this.table.theme.bodyStyle.frameStyle, [ !0, !0, !0, !1 ])),