@visactor/vtable 1.24.0 → 1.25.1-alpha.0

package/cjs/scenegraph/scenegraph.js

@@ -129,7 +129,7 @@ class Scenegraph {
         }));
     }
     clearCells() {
-        var _a, _b;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
         this.table.animationManager.clear(), (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(), 
@@ -138,7 +138,12 @@ class Scenegraph {
         delete this.bodyGroup.border, this.bottomFrozenGroup.clear(), delete this.bottomFrozenGroup.border, 
         this.rightFrozenGroup.clear(), delete this.rightFrozenGroup.border, this.rightTopCornerGroup.clear(), 
         delete this.rightTopCornerGroup.border, this.rightBottomCornerGroup.clear(), delete this.rightBottomCornerGroup.border, 
-        this.leftBottomCornerGroup.clear(), delete this.leftBottomCornerGroup.border, this.colHeaderGroup.setAttributes({
+        this.leftBottomCornerGroup.clear(), delete this.leftBottomCornerGroup.border, null === (_a = this.bodySelectGroup) || void 0 === _a || _a.clear(), 
+        null === (_b = this.rowHeaderSelectGroup) || void 0 === _b || _b.clear(), null === (_c = this.bottomFrozenSelectGroup) || void 0 === _c || _c.clear(), 
+        null === (_d = this.colHeaderSelectGroup) || void 0 === _d || _d.clear(), null === (_e = this.rightFrozenSelectGroup) || void 0 === _e || _e.clear(), 
+        null === (_f = this.rightTopCornerSelectGroup) || void 0 === _f || _f.clear(), null === (_g = this.leftBottomCornerSelectGroup) || void 0 === _g || _g.clear(), 
+        null === (_h = this.rightBottomCornerSelectGroup) || void 0 === _h || _h.clear(), 
+        null === (_j = this.cornerHeaderSelectGroup) || void 0 === _j || _j.clear(), this.colHeaderGroup.setAttributes({
             x: 0,
             y: 0,
             width: 0,
@@ -186,14 +191,64 @@ class Scenegraph {
             width: 0,
             height: 0,
             visible: !1
+        }), null === (_k = this.bodySelectGroup) || void 0 === _k || _k.setAttributes({
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0
+        }), null === (_l = this.rowHeaderSelectGroup) || void 0 === _l || _l.setAttributes({
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0
+        }), null === (_m = this.bottomFrozenSelectGroup) || void 0 === _m || _m.setAttributes({
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0,
+            visible: !1
+        }), null === (_o = this.colHeaderSelectGroup) || void 0 === _o || _o.setAttributes({
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0
+        }), null === (_p = this.rightFrozenSelectGroup) || void 0 === _p || _p.setAttributes({
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0,
+            visible: !1
+        }), null === (_q = this.rightTopCornerSelectGroup) || void 0 === _q || _q.setAttributes({
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0,
+            visible: !1
+        }), null === (_r = this.leftBottomCornerSelectGroup) || void 0 === _r || _r.setAttributes({
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0,
+            visible: !1
+        }), null === (_s = this.rightBottomCornerSelectGroup) || void 0 === _s || _s.setAttributes({
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0,
+            visible: !1
+        }), null === (_t = this.cornerHeaderSelectGroup) || void 0 === _t || _t.setAttributes({
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0
         }), 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), null === (_a = this.proxy) || void 0 === _a || _a.release(), 
-        null === (_b = this.table.reactCustomLayout) || void 0 === _b || _b.clearCache();
+        delete this.tableGroup.border), null === (_u = this.proxy) || void 0 === _u || _u.release(), 
+        null === (_v = this.table.reactCustomLayout) || void 0 === _v || _v.clearCache();
     }
     updateStageBackground() {
         this.stage.background = this.table.theme.underlayBackgroundColor, this.stage.renderNextFrame();
@@ -605,24 +660,40 @@ class Scenegraph {
         0 === y && firstBodyCell && firstBodyCell.row === this.table.frozenRowCount && firstBodyCell.attribute.y + y < 0 ? y = -firstBodyCell.attribute.y : lastBodyCell && this.table.tableNoFrameHeight < this.table.getAllRowsHeight() && lastBodyCell.row === this.table.rowCount - this.table.bottomFrozenRowCount - 1 && lastBodyCell.attribute.y + this.table.getRowHeight(lastBodyCell.row) + y < this.table.tableNoFrameHeight - this.table.getFrozenRowsHeight() - this.table.getBottomFrozenRowsHeight() && (y = this.table.tableNoFrameHeight - this.table.getFrozenRowsHeight() - this.table.getBottomFrozenRowsHeight() - lastBodyCell.attribute.y - this.table.getRowHeight(lastBodyCell.row)), 
         this.colHeaderGroup.attribute.height + y !== this.bodyGroup.attribute.y && (this.bodyGroup.setAttribute("y", this.colHeaderGroup.attribute.height + y), 
         this.rowHeaderGroup.setAttribute("y", this.cornerHeaderGroup.attribute.height + y), 
-        this.table.rightFrozenColCount > 0 && this.rightFrozenGroup.setAttribute("y", this.rightTopCornerGroup.attribute.height + y), 
+        this.bodySelectGroup.setAttribute("y", this.bodyGroup.attribute.y), this.rowHeaderSelectGroup.setAttribute("y", this.rowHeaderGroup.attribute.y), 
+        this.colHeaderSelectGroup.setAttribute("y", this.colHeaderGroup.attribute.y), this.cornerHeaderSelectGroup.setAttribute("y", this.cornerHeaderGroup.attribute.y), 
+        this.table.rightFrozenColCount > 0 && (this.rightFrozenGroup.setAttribute("y", this.rightTopCornerGroup.attribute.height + y), 
+        this.rightFrozenSelectGroup.setAttribute("y", this.rightFrozenGroup.attribute.y), 
+        this.rightTopCornerSelectGroup.setAttribute("y", this.rightTopCornerGroup.attribute.y)), 
+        this.table.bottomFrozenRowCount > 0 && (this.bottomFrozenSelectGroup.setAttribute("y", this.bottomFrozenGroup.attribute.y), 
+        this.leftBottomCornerSelectGroup.setAttribute("y", this.leftBottomCornerGroup.attribute.y)), 
+        this.table.rightFrozenColCount > 0 && this.table.bottomFrozenRowCount > 0 && this.rightBottomCornerSelectGroup.setAttribute("y", this.rightBottomCornerGroup.attribute.y), 
         this.updateNextFrame());
     }
     setBodyAndColHeaderX(x) {
         const firstBodyCol = this.bodyGroup.firstChild, lastBodyCol = this.bodyGroup.lastChild;
         0 === x && firstBodyCol && firstBodyCol.col === this.table.frozenColCount && firstBodyCol.attribute.x + x < 0 ? x = -firstBodyCol.attribute.x : lastBodyCol && this.table.tableNoFrameWidth < this.table.getAllColsWidth() && lastBodyCol.col === this.table.colCount - this.table.rightFrozenColCount - 1 && lastBodyCol.attribute.x + lastBodyCol.attribute.width + x < this.table.tableNoFrameWidth - this.table.getFrozenColsWidth() - this.table.getRightFrozenColsWidth() && (x = this.table.tableNoFrameWidth - this.table.getFrozenColsWidth() - this.table.getRightFrozenColsWidth() - lastBodyCol.attribute.x - lastBodyCol.attribute.width), 
         this.table.getFrozenColsWidth() + x !== this.bodyGroup.attribute.x && (this.bodyGroup.setAttribute("x", this.table.getFrozenColsWidth() + x), 
-        this.colHeaderGroup.setAttribute("x", this.table.getFrozenColsWidth() + x), this.table.bottomFrozenRowCount > 0 && this.bottomFrozenGroup.setAttribute("x", this.table.getFrozenColsWidth() + x), 
+        this.colHeaderGroup.setAttribute("x", this.table.getFrozenColsWidth() + x), this.bodySelectGroup.setAttribute("x", this.bodyGroup.attribute.x), 
+        this.colHeaderSelectGroup.setAttribute("x", this.colHeaderGroup.attribute.x), this.rowHeaderSelectGroup.setAttribute("x", this.rowHeaderGroup.attribute.x), 
+        this.cornerHeaderSelectGroup.setAttribute("x", this.cornerHeaderGroup.attribute.x), 
+        this.table.bottomFrozenRowCount > 0 && (this.bottomFrozenGroup.setAttribute("x", this.table.getFrozenColsWidth() + x), 
+        this.bottomFrozenSelectGroup.setAttribute("x", this.bottomFrozenGroup.attribute.x), 
+        this.leftBottomCornerSelectGroup.setAttribute("x", this.leftBottomCornerGroup.attribute.x)), 
+        this.table.rightFrozenColCount > 0 && (this.rightFrozenSelectGroup.setAttribute("x", this.rightFrozenGroup.attribute.x), 
+        this.rightTopCornerSelectGroup.setAttribute("x", this.rightTopCornerGroup.attribute.x)), 
+        this.table.rightFrozenColCount > 0 && this.table.bottomFrozenRowCount > 0 && this.rightBottomCornerSelectGroup.setAttribute("x", this.rightBottomCornerGroup.attribute.x), 
         this.updateNextFrame());
     }
     afterScenegraphCreated() {
-        var _a;
+        var _a, _b;
         this.isPivot || this.table.transpose ? this.table.options.frozenColCount ? this.component.setFrozenColumnShadow(this.table.frozenColCount - 1) : this.table.options.rightFrozenColCount ? this.component.setRightFrozenColumnShadow(this.table.colCount - this.table.rightFrozenColCount) : this.component.setFrozenColumnShadow(-1) : (this.component.setFrozenColumnShadow(this.table.frozenColCount - 1), 
         this.component.setRightFrozenColumnShadow(this.table.colCount - this.table.rightFrozenColCount)), 
         this.table.stateManager.checkFrozen(), this.updateContainer(), this.createFrameBorder(), 
         this.updateBorderSizeAndPosition(), this.component.updateScrollBar(), (0, stick_text_1.handleTextStick)(this.table), 
         this.table.options.animationAppear && (0, appear_1.dealWithAnimationAppear)(this.table), 
         !1 === (null === (_a = this.table.options.menu) || void 0 === _a ? void 0 : _a.contextMenuWorkOnlyCell) && this.canvasShowMenu(), 
+        (null === (_b = this.table.stateManager.select.ranges) || void 0 === _b ? void 0 : _b.length) && this.recreateAllSelectRangeComponents(), 
         this.updateNextFrame();
     }
     dealWidthMode() {
@@ -743,27 +814,44 @@ class Scenegraph {
         (0, move_cell_1.moveHeaderPosition)(updateColStart, updateColEnd, updateRowStart, updateRowEnd, moveType, this.table);
     }
     updateContainerAttrWidthAndX() {
-        var _a, _b, _c;
-        const cornerX = (0, update_container_1.updateContainerChildrenX)(this.cornerHeaderGroup, 0), rowHeaderX = (0, 
-        update_container_1.updateContainerChildrenX)(this.rowHeaderGroup, 0), colHeaderX = this.colHeaderGroup.hasChildNodes() && this.colHeaderGroup.firstChild ? (0, 
-        update_container_1.updateContainerChildrenX)(this.colHeaderGroup, this.colHeaderGroup.firstChild.col > 0 ? this.table.getColsWidth(null !== (_a = this.table.frozenColCount) && void 0 !== _a ? _a : 0, this.colHeaderGroup.firstChild.col - 1) : 0) : 0, bodyX = this.bodyGroup.hasChildNodes() && this.bodyGroup.firstChild ? (0, 
-        update_container_1.updateContainerChildrenX)(this.bodyGroup, this.bodyGroup.firstChild.col > 0 ? this.table.getColsWidth(null !== (_b = this.table.frozenColCount) && void 0 !== _b ? _b : 0, this.bodyGroup.firstChild.col - 1) : 0) : 0, rightX = (0, 
-        update_container_1.updateContainerChildrenX)(this.rightFrozenGroup.childrenCount > 0 ? this.rightFrozenGroup : this.rightTopCornerGroup, 0);
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        const frozenStartX = -(null !== (_c = null === (_b = (_a = this.table).getFrozenColsScrollLeft) || void 0 === _b ? void 0 : _b.call(_a)) && void 0 !== _c ? _c : 0), frozenViewportWidth = this.table.getFrozenColsWidth(), rightFrozenStartX = -this.table.getRightFrozenColsOffset() + (null !== (_f = null === (_e = (_d = this.table).getRightFrozenColsScrollLeft) || void 0 === _e ? void 0 : _e.call(_d)) && void 0 !== _f ? _f : 0), rightFrozenContentWidth = this.table.getRightFrozenColsContentWidth();
+        (0, update_container_1.updateContainerChildrenX)(this.cornerHeaderGroup, frozenStartX), 
+        (0, update_container_1.updateContainerChildrenX)(this.rowHeaderGroup, frozenStartX);
+        const colHeaderX = this.colHeaderGroup.hasChildNodes() && this.colHeaderGroup.firstChild ? (0, 
+        update_container_1.updateContainerChildrenX)(this.colHeaderGroup, this.colHeaderGroup.firstChild.col > 0 ? this.table.getColsWidth(null !== (_g = this.table.frozenColCount) && void 0 !== _g ? _g : 0, this.colHeaderGroup.firstChild.col - 1) : 0) : 0, bodyX = this.bodyGroup.hasChildNodes() && this.bodyGroup.firstChild ? (0, 
+        update_container_1.updateContainerChildrenX)(this.bodyGroup, this.bodyGroup.firstChild.col > 0 ? this.table.getColsWidth(null !== (_h = this.table.frozenColCount) && void 0 !== _h ? _h : 0, this.bodyGroup.firstChild.col - 1) : 0) : 0;
+        this.rightFrozenGroup.childrenCount > 0 && (0, update_container_1.updateContainerChildrenX)(this.rightFrozenGroup, rightFrozenStartX), 
         this.bottomFrozenGroup.hasChildNodes() && this.bottomFrozenGroup.firstChild && (0, 
-        update_container_1.updateContainerChildrenX)(this.bottomFrozenGroup, this.bottomFrozenGroup.firstChild.col > 0 ? this.table.getColsWidth(null !== (_c = this.table.frozenColCount) && void 0 !== _c ? _c : 0, this.bottomFrozenGroup.firstChild.col - 1) : 0), 
-        (0, update_container_1.updateContainerChildrenX)(this.leftBottomCornerGroup, 0), 
-        (0, update_container_1.updateContainerChildrenX)(this.rightTopCornerGroup, 0), (0, 
-        update_container_1.updateContainerChildrenX)(this.rightBottomCornerGroup, 0), this.cornerHeaderGroup.setDeltaWidth(cornerX - this.cornerHeaderGroup.attribute.width), 
-        this.leftBottomCornerGroup.setDeltaWidth(cornerX - this.leftBottomCornerGroup.attribute.width), 
+        update_container_1.updateContainerChildrenX)(this.bottomFrozenGroup, this.bottomFrozenGroup.firstChild.col > 0 ? this.table.getColsWidth(null !== (_j = this.table.frozenColCount) && void 0 !== _j ? _j : 0, this.bottomFrozenGroup.firstChild.col - 1) : 0), 
+        (0, update_container_1.updateContainerChildrenX)(this.leftBottomCornerGroup, frozenStartX), 
+        (0, update_container_1.updateContainerChildrenX)(this.rightTopCornerGroup, rightFrozenStartX), 
+        (0, update_container_1.updateContainerChildrenX)(this.rightBottomCornerGroup, rightFrozenStartX), 
+        this.cornerHeaderGroup.setDeltaWidth(frozenViewportWidth - this.cornerHeaderGroup.attribute.width), 
+        this.leftBottomCornerGroup.setDeltaWidth(frozenViewportWidth - this.leftBottomCornerGroup.attribute.width), 
         this.colHeaderGroup.setDeltaWidth(colHeaderX - this.colHeaderGroup.attribute.width), 
-        this.rowHeaderGroup.setDeltaWidth(rowHeaderX - this.rowHeaderGroup.attribute.width), 
+        this.rowHeaderGroup.setDeltaWidth(frozenViewportWidth - this.rowHeaderGroup.attribute.width), 
         this.bottomFrozenGroup.setDeltaWidth(colHeaderX - 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.rightFrozenGroup.setDeltaWidth(rightFrozenContentWidth - this.rightFrozenGroup.attribute.width), 
+        this.rightTopCornerGroup.setDeltaWidth(rightFrozenContentWidth - this.rightTopCornerGroup.attribute.width), 
+        this.rightBottomCornerGroup.setDeltaWidth(rightFrozenContentWidth - 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.table.getFrozenColsWidth()), this.bodyGroup.setAttribute("x", this.rowHeaderGroup.attribute.width);
     }
+    setFrozenColsScrollLeft(left) {
+        const frozenStartX = -left;
+        (0, update_container_1.updateContainerChildrenX)(this.cornerHeaderGroup, frozenStartX), 
+        (0, update_container_1.updateContainerChildrenX)(this.rowHeaderGroup, frozenStartX), 
+        (0, update_container_1.updateContainerChildrenX)(this.leftBottomCornerGroup, frozenStartX), 
+        this.updateNextFrame();
+    }
+    setRightFrozenColsScrollLeft(left) {
+        const rightStartX = -this.table.getRightFrozenColsOffset() + left;
+        (0, update_container_1.updateContainerChildrenX)(this.rightFrozenGroup, rightStartX), 
+        (0, update_container_1.updateContainerChildrenX)(this.rightTopCornerGroup, rightStartX), 
+        (0, update_container_1.updateContainerChildrenX)(this.rightBottomCornerGroup, rightStartX), 
+        this.updateNextFrame();
+    }
     updateContainerAttrHeightAndY() {
         var _a, _b, _c;
         for (let i = 0; i < this.cornerHeaderGroup.children.length; i++) (0, update_container_1.updateContainerChildrenY)(this.cornerHeaderGroup.children[i], 0);
@@ -793,7 +881,90 @@ class Scenegraph {
     updateContainerSync(needUpdateCellY = !1) {
         this._needUpdateContainer && (this._needUpdateContainer = !1, this.updateContainerAttrWidthAndX(), 
         needUpdateCellY && this.updateContainerAttrHeightAndY(), this.updateTableSize(), 
-        this.component.updateScrollBar(), this.updateNextFrame());
+        this.syncSelectOverlayGroups(), this.component.updateScrollBar(), this.updateNextFrame());
+    }
+    syncSelectOverlayGroups() {
+        this.bodySelectGroup.setAttributes({
+            x: this.bodyGroup.attribute.x,
+            y: this.bodyGroup.attribute.y,
+            width: this.bodyGroup.attribute.width,
+            height: this.bodyGroup.attribute.height
+        }), this.rowHeaderSelectGroup.setAttributes({
+            x: this.rowHeaderGroup.attribute.x,
+            y: this.rowHeaderGroup.attribute.y,
+            width: this.rowHeaderGroup.attribute.width,
+            height: this.rowHeaderGroup.attribute.height
+        }), this.colHeaderSelectGroup.setAttributes({
+            x: this.colHeaderGroup.attribute.x,
+            y: this.colHeaderGroup.attribute.y,
+            width: this.colHeaderGroup.attribute.width,
+            height: this.colHeaderGroup.attribute.height
+        }), this.cornerHeaderSelectGroup.setAttributes({
+            x: this.cornerHeaderGroup.attribute.x,
+            y: this.cornerHeaderGroup.attribute.y,
+            width: this.cornerHeaderGroup.attribute.width,
+            height: this.cornerHeaderGroup.attribute.height
+        }), this.rightFrozenSelectGroup.setAttributes({
+            x: this.rightFrozenGroup.attribute.x,
+            y: this.rightFrozenGroup.attribute.y,
+            width: this.rightFrozenGroup.attribute.width,
+            height: this.rightFrozenGroup.attribute.height,
+            visible: this.rightFrozenGroup.attribute.visible
+        }), this.bottomFrozenSelectGroup.setAttributes({
+            x: this.bottomFrozenGroup.attribute.x,
+            y: this.bottomFrozenGroup.attribute.y,
+            width: this.bottomFrozenGroup.attribute.width,
+            height: this.bottomFrozenGroup.attribute.height,
+            visible: this.bottomFrozenGroup.attribute.visible
+        }), this.rightTopCornerSelectGroup.setAttributes({
+            x: this.rightTopCornerGroup.attribute.x,
+            y: this.rightTopCornerGroup.attribute.y,
+            width: this.rightTopCornerGroup.attribute.width,
+            height: this.rightTopCornerGroup.attribute.height,
+            visible: this.rightTopCornerGroup.attribute.visible
+        }), this.leftBottomCornerSelectGroup.setAttributes({
+            x: this.leftBottomCornerGroup.attribute.x,
+            y: this.leftBottomCornerGroup.attribute.y,
+            width: this.leftBottomCornerGroup.attribute.width,
+            height: this.leftBottomCornerGroup.attribute.height,
+            visible: this.leftBottomCornerGroup.attribute.visible
+        }), this.rightBottomCornerSelectGroup.setAttributes({
+            x: this.rightBottomCornerGroup.attribute.x,
+            y: this.rightBottomCornerGroup.attribute.y,
+            width: this.rightBottomCornerGroup.attribute.width,
+            height: this.rightBottomCornerGroup.attribute.height,
+            visible: this.rightBottomCornerGroup.attribute.visible
+        });
+    }
+    getSelectOverlayGroup(selectRangeType) {
+        switch (selectRangeType) {
+          case "body":
+            return this.bodySelectGroup;
+
+          case "rowHeader":
+            return this.rowHeaderSelectGroup;
+
+          case "bottomFrozen":
+            return this.bottomFrozenSelectGroup;
+
+          case "columnHeader":
+            return this.colHeaderSelectGroup;
+
+          case "rightFrozen":
+            return this.rightFrozenSelectGroup;
+
+          case "rightTopCorner":
+            return this.rightTopCornerSelectGroup;
+
+          case "leftBottomCorner":
+            return this.leftBottomCornerSelectGroup;
+
+          case "rightBottomCorner":
+            return this.rightBottomCornerSelectGroup;
+
+          default:
+            return this.cornerHeaderSelectGroup;
+        }
     }
     updateCellContentWhileResize(col, row) {
         var _a;