@visactor/vtable 0.9.3-alpha.7 → 0.10.1-alpha.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,13 @@ import { computeRowsHeight } from "./layout/compute-row-height";
 
 import { emptyGroup } from "./utils/empty-group";
 
+import { dealBottomFrozen, dealFrozen, dealRightFrozen, resetFrozen } from "./layout/frozen";
+
 import { updateChartSize, updateChartState } from "./refresh-node/update-chart";
 
-import { dealFrozen, resetFrozen } from "./layout/frozen";
+import { initSceneGraph } from "./group-creater/init-scenegraph";
 
-import { createCornerCell } from "./style/corner-cell";
+import { updateContainerChildrenX } from "./utils/update-container";
 
 container.load(splitModule);
 
@@ -104,93 +104,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 +141,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 +196,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 +216,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 +369,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 +406,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();
     }
@@ -603,24 +534,18 @@ export class Scenegraph {
         moveHeaderPosition(colSource, rowSource, colTarget, rowTarget, this.table);
     }
     updateContainer() {
-        let cornerX = 0;
-        this.cornerHeaderGroup.forEachChildrenSkipChild(((column, index) => {
-            column.setAttribute("x", cornerX), cornerX += column.attribute.width;
-        }));
-        let rowHeaderX = 0;
-        this.rowHeaderGroup.forEachChildrenSkipChild(((column, index) => {
-            column.setAttribute("x", rowHeaderX), rowHeaderX += column.attribute.width;
-        }));
-        let colHeaderX = 0;
-        this.colHeaderGroup.forEachChildrenSkipChild(((column, index) => {
-            column.setAttribute("x", colHeaderX), colHeaderX += column.attribute.width;
-        }));
-        let bodyX = 0;
-        this.bodyGroup.forEachChildrenSkipChild(((column, index) => {
-            column.setAttribute("x", bodyX), bodyX += column.attribute.width;
-        })), this.cornerHeaderGroup.setDeltaWidth(cornerX - this.cornerHeaderGroup.attribute.width), 
+        const cornerX = updateContainerChildrenX(this.cornerHeaderGroup), rowHeaderX = updateContainerChildrenX(this.rowHeaderGroup), colHeaderX = updateContainerChildrenX(this.colHeaderGroup), bodyX = updateContainerChildrenX(this.bodyGroup), rightX = updateContainerChildrenX(this.rightFrozenGroup);
+        updateContainerChildrenX(this.bottomFrozenGroup), updateContainerChildrenX(this.leftBottomCornerGroup), 
+        updateContainerChildrenX(this.rightTopCornerGroup), updateContainerChildrenX(this.rightBottomCornerGroup), 
+        this.cornerHeaderGroup.setDeltaWidth(cornerX - this.cornerHeaderGroup.attribute.width), 
+        this.leftBottomCornerGroup.setDeltaWidth(cornerX - this.leftBottomCornerGroup.attribute.width), 
         this.colHeaderGroup.setDeltaWidth(colHeaderX - this.colHeaderGroup.attribute.width), 
+        this.rightFrozenGroup.setDeltaWidth(colHeaderX - this.rightFrozenGroup.attribute.width), 
         this.rowHeaderGroup.setDeltaWidth(rowHeaderX - this.rowHeaderGroup.attribute.width), 
+        this.bottomFrozenGroup.setDeltaWidth(rowHeaderX - this.bottomFrozenGroup.attribute.width), 
+        this.rightFrozenGroup.setDeltaWidth(rightX - this.rightFrozenGroup.attribute.width), 
+        this.rightTopCornerGroup.setDeltaWidth(rightX - this.rightTopCornerGroup.attribute.width), 
+        this.rightBottomCornerGroup.setDeltaWidth(rightX - this.rightBottomCornerGroup.attribute.width), 
         this.bodyGroup.setDeltaWidth(bodyX - this.bodyGroup.attribute.width), this.colHeaderGroup.setAttribute("x", this.cornerHeaderGroup.attribute.width), 
         this.bottomFrozenGroup.setAttribute("x", this.rowHeaderGroup.attribute.width), this.bodyGroup.setAttribute("x", this.rowHeaderGroup.attribute.width), 
         this.updateTableSize();
@@ -643,16 +568,17 @@ export class Scenegraph {
     }
     getResizeColAt(abstractX, abstractY, cellGroup, offset = ResizeColumnHotSpotSize / 2) {
         if (cellGroup) {
-            if (abstractX < cellGroup.globalAABBBounds.x1 + offset) return {
+            let cell;
+            if (abstractX < cellGroup.globalAABBBounds.x1 + offset ? cell = {
                 col: cellGroup.col - 1,
                 row: cellGroup.row,
                 x: cellGroup.globalAABBBounds.x1
-            };
-            if (cellGroup.globalAABBBounds.x2 - offset < abstractX) return {
+            } : cellGroup.globalAABBBounds.x2 - offset < abstractX && (cell = {
                 col: cellGroup.col,
                 row: cellGroup.row,
                 x: cellGroup.globalAABBBounds.x2
-            };
+            }), cell && this.table.rightFrozenColCount > 0 && cell.col === this.table.colCount - this.table.rightFrozenColCount - 1 && this.table.tableNoFrameWidth - this.table.getFrozenColsWidth() - this.table.getRightFrozenColsWidth() + this.table.scrollLeft < this.bodyGroup.attribute.width && (cell.col = cell.col + 1, 
+            cell.rightFrozen = !0), cell) return cell;
         } else ;
         return {
             col: -1,
@@ -665,6 +591,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 ])),