k-vtable 1.0.34 → 1.0.35

package/es/scenegraph/component/table-component.d.ts

@@ -7,6 +7,7 @@ import { CellMover } from './cell-mover';
 import type { BaseTableAPI } from '../../ts-types/base-table';
 export declare class TableComponent {
     table: BaseTableAPI;
+    _horizontalScrollBarTarget?: 'body' | 'frozen' | 'rightFrozen' | 'all';
     border: IRect;
     columnResizeLine: ILine;
     columnResizeBgLine: ILine;
@@ -17,6 +18,8 @@ export declare class TableComponent {
     menu: MenuHandler;
     vScrollBar: ScrollBar;
     hScrollBar: ScrollBar;
+    frozenHScrollBar: ScrollBar;
+    rightFrozenHScrollBar: ScrollBar;
     frozenShadowLine: IRect;
     rightFrozenShadowLine: IRect;
     topFrozenShadowLine: IRect;
@@ -51,9 +54,11 @@ export declare class TableComponent {
     hideVerticalScrollBar(): void;
     showVerticalScrollBar(): void;
     hideHorizontalScrollBar(): void;
-    showHorizontalScrollBar(): void;
+    showHorizontalScrollBar(target?: 'body' | 'frozen' | 'rightFrozen' | 'all'): void;
     updateVerticalScrollBarPos(topRatio: number): void;
     updateHorizontalScrollBarPos(leftRatio: number): void;
+    updateFrozenHorizontalScrollBarPos(leftRatio: number): void;
+    updateRightFrozenHorizontalScrollBarPos(leftRatio: number): void;
     updateHorizontalFrozenShadowLine: (rightRatio: number) => void;
     updateVerticalFrozenShadowLine: (topRatio: number) => void;
     updateStyle(): void;

package/es/scenegraph/component/table-component.js

@@ -248,7 +248,9 @@ export class TableComponent {
         componentGroup.addChild(this.columnResizeLabel), componentGroup.addChild(this.rowResizeBgLine), 
         componentGroup.addChild(this.rowResizeLine), componentGroup.addChild(this.rowResizeLabel);
         this.table.theme.scrollStyle.hoverOn && !this.table.theme.scrollStyle.barToSide ? (componentGroup.addChild(this.hScrollBar), 
+        componentGroup.addChild(this.frozenHScrollBar), componentGroup.addChild(this.rightFrozenHScrollBar), 
         componentGroup.addChild(this.vScrollBar)) : (componentGroup.stage.defaultLayer.addChild(this.hScrollBar), 
+        componentGroup.stage.defaultLayer.addChild(this.frozenHScrollBar), componentGroup.stage.defaultLayer.addChild(this.rightFrozenHScrollBar), 
         componentGroup.stage.defaultLayer.addChild(this.vScrollBar)), this.menu.bindTableComponent(componentGroup), 
         this.drillIcon.appand(componentGroup), this.cellMover.appand(componentGroup);
     }
@@ -274,7 +276,33 @@ export class TableComponent {
             sliderStyle: sliderStyle,
             range: [ 0, .1 ],
             visible: !1
-        }), this.hScrollBar.render(), this.hScrollBar.hideAll(), this.vScrollBar = new ScrollBar({
+        }), this.hScrollBar.render(), this.hScrollBar.hideAll(), this.frozenHScrollBar = new ScrollBar({
+            direction: "horizontal",
+            x: 2 * -this.table.tableNoFrameWidth,
+            y: 2 * -this.table.tableNoFrameHeight,
+            width: this.table.tableNoFrameWidth,
+            height: width,
+            padding: horizontalPadding,
+            railStyle: {
+                fill: scrollRailColor
+            },
+            sliderStyle: sliderStyle,
+            range: [ 0, .1 ],
+            visible: !1
+        }), this.frozenHScrollBar.render(), this.frozenHScrollBar.hideAll(), this.rightFrozenHScrollBar = new ScrollBar({
+            direction: "horizontal",
+            x: 2 * -this.table.tableNoFrameWidth,
+            y: 2 * -this.table.tableNoFrameHeight,
+            width: this.table.tableNoFrameWidth,
+            height: width,
+            padding: horizontalPadding,
+            railStyle: {
+                fill: scrollRailColor
+            },
+            sliderStyle: sliderStyle,
+            range: [ 0, .1 ],
+            visible: !1
+        }), this.rightFrozenHScrollBar.render(), this.rightFrozenHScrollBar.hideAll(), this.vScrollBar = new ScrollBar({
             direction: "vertical",
             x: 2 * -this.table.tableNoFrameWidth,
             y: 2 * -this.table.tableNoFrameHeight,
@@ -290,14 +318,15 @@ export class TableComponent {
         }), this.vScrollBar.render(), this.vScrollBar.hideAll();
     }
     updateScrollBar() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        const oldHorizontalBarPos = this.table.stateManager.scroll.horizontalBarPos, oldVerticalBarPos = this.table.stateManager.scroll.verticalBarPos, theme = this.table.theme, width = null === (_a = theme.scrollStyle) || void 0 === _a ? void 0 : _a.width, visible1 = null === (_b = theme.scrollStyle) || void 0 === _b ? void 0 : _b.visible, horizontalVisible = null !== (_d = null === (_c = theme.scrollStyle) || void 0 === _c ? void 0 : _c.horizontalVisible) && void 0 !== _d ? _d : visible1, verticalVisible = null !== (_f = null === (_e = theme.scrollStyle) || void 0 === _e ? void 0 : _e.verticalVisible) && void 0 !== _f ? _f : visible1, tableWidth = Math.ceil(this.table.tableNoFrameWidth), tableHeight = Math.ceil(this.table.tableNoFrameHeight), totalHeight = this.table.getAllRowsHeight(), totalWidth = this.table.getAllColsWidth(), frozenRowsHeight = this.table.getFrozenRowsHeight(), frozenColsWidth = this.table.getFrozenColsWidth(), bottomFrozenRowsHeight = this.table.getBottomFrozenRowsHeight(), rightFrozenColsWidth = this.table.getRightFrozenColsWidth(), hoverOn = this.table.theme.scrollStyle.hoverOn, sizeTolerance = (null === (_g = this.table.options.customConfig) || void 0 === _g ? void 0 : _g._disableColumnAndRowSizeRound) ? 1 : 0;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        const oldHorizontalBarPos = this.table.stateManager.scroll.horizontalBarPos, oldVerticalBarPos = this.table.stateManager.scroll.verticalBarPos, oldFrozenHorizontalBarPos = this.table.stateManager.scroll.frozenHorizontalBarPos, oldRightFrozenHorizontalBarPos = this.table.stateManager.scroll.rightFrozenHorizontalBarPos, theme = this.table.theme, width = null === (_a = theme.scrollStyle) || void 0 === _a ? void 0 : _a.width, visible1 = null === (_b = theme.scrollStyle) || void 0 === _b ? void 0 : _b.visible, horizontalVisible = null !== (_d = null === (_c = theme.scrollStyle) || void 0 === _c ? void 0 : _c.horizontalVisible) && void 0 !== _d ? _d : visible1, verticalVisible = null !== (_f = null === (_e = theme.scrollStyle) || void 0 === _e ? void 0 : _e.verticalVisible) && void 0 !== _f ? _f : visible1, tableWidth = Math.ceil(this.table.tableNoFrameWidth), tableHeight = Math.ceil(this.table.tableNoFrameHeight), totalHeight = this.table.getAllRowsHeight(), totalWidth = this.table.getAllColsWidth(), frozenRowsHeight = this.table.getFrozenRowsHeight(), frozenColsWidth = this.table.getFrozenColsWidth(), frozenColsContentWidth = null !== (_j = null === (_h = (_g = this.table).getFrozenColsContentWidth) || void 0 === _h ? void 0 : _h.call(_g)) && void 0 !== _j ? _j : frozenColsWidth, bottomFrozenRowsHeight = this.table.getBottomFrozenRowsHeight(), rightFrozenColsWidth = this.table.getRightFrozenColsWidth(), rightFrozenColsContentWidth = null !== (_m = null === (_l = (_k = this.table).getRightFrozenColsContentWidth) || void 0 === _l ? void 0 : _l.call(_k)) && void 0 !== _m ? _m : rightFrozenColsWidth, hoverOn = this.table.theme.scrollStyle.hoverOn, sizeTolerance = (null === (_o = this.table.options.customConfig) || void 0 === _o ? void 0 : _o._disableColumnAndRowSizeRound) ? 1 : 0;
         if (totalWidth > tableWidth + sizeTolerance) {
-            const y = Math.min(tableHeight, totalHeight), rangeEnd = Math.max(.05, (tableWidth - frozenColsWidth) / (totalWidth - frozenColsWidth));
+            const y = Math.min(tableHeight, totalHeight), bodyViewportWidth = tableWidth - frozenColsWidth - rightFrozenColsWidth, bodyContentWidth = totalWidth - frozenColsContentWidth - rightFrozenColsContentWidth, rangeEnd = bodyContentWidth > 0 ? Math.max(.05, bodyViewportWidth / bodyContentWidth) : 1;
             let attrY = 0;
             attrY = this.table.theme.scrollStyle.barToSide ? this.table.tableNoFrameHeight - (hoverOn ? width : -this.table.scenegraph.tableGroup.attribute.y) + this.table.tableY : y - (hoverOn ? width : -this.table.scenegraph.tableGroup.attribute.y);
             let hScrollBarx = frozenColsWidth + (hoverOn ? 0 : this.table.scenegraph.tableGroup.attribute.x), hScrollBarWidth = tableWidth - frozenColsWidth - rightFrozenColsWidth;
-            null !== (_j = null === (_h = this.table.theme.scrollStyle) || void 0 === _h ? void 0 : _h.ignoreFrozenCols) && void 0 !== _j && _j ? (hScrollBarx = hoverOn ? 0 : this.table.scenegraph.tableGroup.attribute.x, 
+            const ignoreFrozenCols = null !== (_q = null === (_p = this.table.theme.scrollStyle) || void 0 === _p ? void 0 : _p.ignoreFrozenCols) && void 0 !== _q && _q;
+            ignoreFrozenCols ? (hScrollBarx = hoverOn ? 0 : this.table.scenegraph.tableGroup.attribute.x, 
             hScrollBarWidth = tableWidth) : (hScrollBarx = frozenColsWidth + (hoverOn ? 0 : this.table.scenegraph.tableGroup.attribute.x), 
             hScrollBarWidth = tableWidth - frozenColsWidth - rightFrozenColsWidth), this.hScrollBar.setAttributes({
                 x: hScrollBarx,
@@ -311,11 +340,63 @@ export class TableComponent {
                 x: bounds.x1,
                 y: bounds.y1
             }, "always" === horizontalVisible && this.hScrollBar.showAll();
+            const frozenScrollable = this.table.options.scrollFrozenCols && this.table.getFrozenColsOffset() > 0;
+            if (!ignoreFrozenCols && frozenScrollable) {
+                const frozenRangeEnd = Math.max(.05, frozenColsWidth / frozenColsContentWidth), x = hoverOn ? 0 : this.table.scenegraph.tableGroup.attribute.x;
+                this.frozenHScrollBar.setAttributes({
+                    x: x,
+                    y: attrY,
+                    width: frozenColsWidth,
+                    range: [ 0, frozenRangeEnd ],
+                    visible: "always" === horizontalVisible
+                });
+                const bounds = this.frozenHScrollBar.AABBBounds && this.frozenHScrollBar.globalAABBBounds;
+                this.frozenHScrollBar._viewPosition = {
+                    x: bounds.x1,
+                    y: bounds.y1
+                }, "always" === horizontalVisible && this.frozenHScrollBar.showAll();
+            } else this.frozenHScrollBar.setAttributes({
+                x: 2 * -this.table.tableNoFrameWidth,
+                y: 2 * -this.table.tableNoFrameHeight,
+                width: 0,
+                visible: !1
+            });
+            const rightFrozenScrollable = this.table.options.scrollRightFrozenCols && this.table.getRightFrozenColsOffset() > 0;
+            if (!ignoreFrozenCols && rightFrozenScrollable) {
+                const rightFrozenRangeEnd = Math.max(.05, rightFrozenColsWidth / rightFrozenColsContentWidth), x = tableWidth - rightFrozenColsWidth + (hoverOn ? 0 : this.table.scenegraph.tableGroup.attribute.x);
+                this.rightFrozenHScrollBar.setAttributes({
+                    x: x,
+                    y: attrY,
+                    width: rightFrozenColsWidth,
+                    range: [ 0, rightFrozenRangeEnd ],
+                    visible: "always" === horizontalVisible
+                });
+                const bounds = this.rightFrozenHScrollBar.AABBBounds && this.rightFrozenHScrollBar.globalAABBBounds;
+                this.rightFrozenHScrollBar._viewPosition = {
+                    x: bounds.x1,
+                    y: bounds.y1
+                }, "always" === horizontalVisible && this.rightFrozenHScrollBar.showAll();
+            } else this.rightFrozenHScrollBar.setAttributes({
+                x: 2 * -this.table.tableNoFrameWidth,
+                y: 2 * -this.table.tableNoFrameHeight,
+                width: 0,
+                visible: !1
+            });
         } else this.hScrollBar.setAttributes({
             x: 2 * -this.table.tableNoFrameWidth,
             y: 2 * -this.table.tableNoFrameHeight,
             width: 0,
             visible: !1
+        }), this.frozenHScrollBar.setAttributes({
+            x: 2 * -this.table.tableNoFrameWidth,
+            y: 2 * -this.table.tableNoFrameHeight,
+            width: 0,
+            visible: !1
+        }), this.rightFrozenHScrollBar.setAttributes({
+            x: 2 * -this.table.tableNoFrameWidth,
+            y: 2 * -this.table.tableNoFrameHeight,
+            width: 0,
+            visible: !1
         });
         if (totalHeight > tableHeight + sizeTolerance) {
             const x = Math.min(tableWidth, totalWidth), rangeEnd = Math.max(.05, (tableHeight - frozenRowsHeight) / (totalHeight - frozenRowsHeight));
@@ -339,8 +420,9 @@ export class TableComponent {
             height: 0,
             visible: !1
         });
-        this.table.stateManager.setScrollLeft(oldHorizontalBarPos), this.table.stateManager.setScrollTop(oldVerticalBarPos), 
-        this.setBottomFrozenColumnShadow();
+        this.table.stateManager.setScrollLeft(oldHorizontalBarPos), this.table.stateManager.setFrozenColsScrollLeft(oldFrozenHorizontalBarPos, !1), 
+        this.table.stateManager.setRightFrozenColsScrollLeft(oldRightFrozenHorizontalBarPos, !1), 
+        this.table.stateManager.setScrollTop(oldVerticalBarPos), this.setBottomFrozenColumnShadow();
     }
     hideResizeCol() {
         this.columnResizeLine.setAttribute("visible", !1), this.columnResizeBgLine.setAttribute("visible", !1), 
@@ -466,9 +548,9 @@ export class TableComponent {
         this.cellMover.update(backX, lineX, backY, lineY);
     }
     setFrozenColumnShadow(col, isRightFrozen) {
-        var _a, _b;
-        const colX = getColX(col, this.table, isRightFrozen);
-        col < 0 || "always" !== (null === (_b = null === (_a = this.table.theme.frozenColumnLine) || void 0 === _a ? void 0 : _a.shadow) || void 0 === _b ? void 0 : _b.visible) ? this.frozenShadowLine.setAttributes({
+        var _a, _b, _c, _d, _e;
+        const colX = !isRightFrozen && col === this.table.frozenColCount - 1 && (null !== (_c = null === (_b = (_a = this.table).getFrozenColsOffset) || void 0 === _b ? void 0 : _b.call(_a)) && void 0 !== _c ? _c : 0) > 0 ? this.table.getFrozenColsWidth() : getColX(col, this.table, isRightFrozen);
+        col < 0 || "always" !== (null === (_e = null === (_d = this.table.theme.frozenColumnLine) || void 0 === _d ? void 0 : _d.shadow) || void 0 === _e ? void 0 : _e.visible) ? this.frozenShadowLine.setAttributes({
             visible: !1,
             x: colX,
             height: this.table.getDrawRange().height
@@ -479,9 +561,9 @@ export class TableComponent {
         });
     }
     setRightFrozenColumnShadow(col) {
-        var _a, _b;
-        const colX = getColX(col, this.table, !0);
-        col >= this.table.colCount || "always" !== (null === (_b = null === (_a = this.table.theme.frozenColumnLine) || void 0 === _a ? void 0 : _a.shadow) || void 0 === _b ? void 0 : _b.visible) ? this.rightFrozenShadowLine.setAttributes({
+        var _a, _b, _c, _d, _e;
+        const colX = this.table.options.scrollRightFrozenCols && (null !== (_c = null === (_b = (_a = this.table).getRightFrozenColsOffset) || void 0 === _b ? void 0 : _b.call(_a)) && void 0 !== _c ? _c : 0) > 0 ? this.table.tableNoFrameWidth - this.table.getRightFrozenColsWidth() : getColX(col, this.table, !0);
+        col >= this.table.colCount || "always" !== (null === (_e = null === (_d = this.table.theme.frozenColumnLine) || void 0 === _d ? void 0 : _d.shadow) || void 0 === _e ? void 0 : _e.visible) ? this.rightFrozenShadowLine.setAttributes({
             visible: !1,
             x: colX - this.rightFrozenShadowLine.attribute.width,
             height: this.table.getDrawRange().height
@@ -556,13 +638,23 @@ export class TableComponent {
         var _a;
         const visible1 = this.table.theme.scrollStyle.visible, horizontalVisible = null !== (_a = this.table.theme.scrollStyle.horizontalVisible) && void 0 !== _a ? _a : visible1;
         "focus" !== horizontalVisible && "scrolling" !== horizontalVisible || (this.hScrollBar.setAttribute("visible", !1), 
-        this.hScrollBar.hideAll(), this.table.scenegraph.updateNextFrame());
+        this.hScrollBar.hideAll(), this.frozenHScrollBar.setAttribute("visible", !1), this.frozenHScrollBar.hideAll(), 
+        this.rightFrozenHScrollBar.setAttribute("visible", !1), this.rightFrozenHScrollBar.hideAll(), 
+        this._horizontalScrollBarTarget = void 0, this.table.scenegraph.updateNextFrame());
     }
-    showHorizontalScrollBar() {
+    showHorizontalScrollBar(target = "all") {
         var _a;
         const visible1 = this.table.theme.scrollStyle.visible, horizontalVisible = null !== (_a = this.table.theme.scrollStyle.horizontalVisible) && void 0 !== _a ? _a : visible1;
-        "focus" !== horizontalVisible && "scrolling" !== horizontalVisible || (this.hScrollBar.setAttribute("visible", !0), 
-        this.hScrollBar.showAll(), this.table.scenegraph.updateNextFrame());
+        if ("focus" !== horizontalVisible && "scrolling" !== horizontalVisible) return;
+        if (this._horizontalScrollBarTarget === target) return;
+        this._horizontalScrollBarTarget = target;
+        const showFrozen = "all" === target || "frozen" === target, showRightFrozen = "all" === target || "rightFrozen" === target, bodyVisible = ("all" === target || "body" === target) && this.hScrollBar.attribute.width > 0;
+        this.hScrollBar.setAttribute("visible", bodyVisible), bodyVisible ? this.hScrollBar.showAll() : this.hScrollBar.hideAll();
+        const frozenVisible = showFrozen && this.frozenHScrollBar.attribute.width > 0;
+        this.frozenHScrollBar.setAttribute("visible", frozenVisible), frozenVisible ? this.frozenHScrollBar.showAll() : this.frozenHScrollBar.hideAll();
+        const rightFrozenVisible = showRightFrozen && this.rightFrozenHScrollBar.attribute.width > 0;
+        this.rightFrozenHScrollBar.setAttribute("visible", rightFrozenVisible), rightFrozenVisible ? this.rightFrozenHScrollBar.showAll() : this.rightFrozenHScrollBar.hideAll(), 
+        this.table.scenegraph.updateNextFrame();
     }
     updateVerticalScrollBarPos(topRatio) {
         this.updateVerticalFrozenShadowLine(topRatio);
@@ -584,6 +676,24 @@ export class TableComponent {
             y: bounds.y1
         };
     }
+    updateFrozenHorizontalScrollBarPos(leftRatio) {
+        const range = this.frozenHScrollBar.attribute.range, size = range[1] - range[0], range0 = leftRatio * (1 - size);
+        this.frozenHScrollBar.setAttribute("range", [ range0, range0 + size ]);
+        const bounds = this.frozenHScrollBar.AABBBounds && this.frozenHScrollBar.globalAABBBounds;
+        this.frozenHScrollBar._viewPosition = {
+            x: bounds.x1,
+            y: bounds.y1
+        };
+    }
+    updateRightFrozenHorizontalScrollBarPos(leftRatio) {
+        const range = this.rightFrozenHScrollBar.attribute.range, size = range[1] - range[0], range0 = leftRatio * (1 - size);
+        this.rightFrozenHScrollBar.setAttribute("range", [ range0, range0 + size ]);
+        const bounds = this.rightFrozenHScrollBar.AABBBounds && this.rightFrozenHScrollBar.globalAABBBounds;
+        this.rightFrozenHScrollBar._viewPosition = {
+            x: bounds.x1,
+            y: bounds.y1
+        };
+    }
     updateStyle() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
         const theme = this.table.theme, scrollRailColor = null === (_a = theme.scrollStyle) || void 0 === _a ? void 0 : _a.scrollRailColor, scrollSliderColor = null === (_b = theme.scrollStyle) || void 0 === _b ? void 0 : _b.scrollSliderColor, scrollSliderCornerRadius = null === (_c = theme.scrollStyle) || void 0 === _c ? void 0 : _c.scrollSliderCornerRadius, width = null === (_d = theme.scrollStyle) || void 0 === _d ? void 0 : _d.width, horizontalPadding = null === (_e = theme.scrollStyle) || void 0 === _e ? void 0 : _e.horizontalPadding, verticalPadding = null === (_f = theme.scrollStyle) || void 0 === _f ? void 0 : _f.verticalPadding;
@@ -607,6 +717,20 @@ export class TableComponent {
                 fill: scrollRailColor
             },
             sliderStyle: sliderStyle
+        }), this.frozenHScrollBar.setAttributes({
+            height: width,
+            padding: horizontalPadding,
+            railStyle: {
+                fill: scrollRailColor
+            },
+            sliderStyle: sliderStyle
+        }), this.rightFrozenHScrollBar.setAttributes({
+            height: width,
+            padding: horizontalPadding,
+            railStyle: {
+                fill: scrollRailColor
+            },
+            sliderStyle: sliderStyle
         });
         const columnResizeColor = null === (_g = theme.columnResize) || void 0 === _g ? void 0 : _g.lineColor, columnResizeWidth = null === (_h = theme.columnResize) || void 0 === _h ? void 0 : _h.lineWidth, columnResizeBgColor = null === (_j = theme.columnResize) || void 0 === _j ? void 0 : _j.bgColor, columnResizeBgWidth = null === (_k = theme.columnResize) || void 0 === _k ? void 0 : _k.width;
         this.columnResizeLine.setAttributes({