From bb125f6878d9caa62da863c9b2d79e186c9871e0 Mon Sep 17 00:00:00 2001 From: xxxace <731162160@qq.com> Date: Wed, 10 Sep 2025 19:40:20 +0800 Subject: [PATCH 1/3] fix(SelectRange): Fix frozen column width calculation - Adjust z-index of range selection element for proper display - Fix calculation to consider all occupied frozen columns --- src/js/modules/SelectRange/Range.js | 19 +++++++++++++++++-- src/scss/tabulator.scss | 2 +- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/src/js/modules/SelectRange/Range.js b/src/js/modules/SelectRange/Range.js index a97bea626..dd7897f9d 100644 --- a/src/js/modules/SelectRange/Range.js +++ b/src/js/modules/SelectRange/Range.js @@ -201,13 +201,28 @@ export default class Range extends CoreFeature{ this.element.classList.add("tabulator-range-active"); // this.element.classList.toggle("tabulator-range-active", this === this.rangeManager.activeRange); + + let occupiedFrozenColumnsWidth = 0; + this.rangeManager.getTableColumns().forEach((column) => { + if (this.occupiesColumn(column) && column.definition.frozen){ + occupiedFrozenColumnsWidth += column.width; + } + }); if(this.table.rtl){ + const calculatedRangeWidth = Math.max( + topLeftCellEl.offsetLeft + topLeftCellEl.offsetWidth - bottomRightCellEl.offsetLeft, + occupiedFrozenColumnsWidth, + ); this.element.style.right = topLeftRowEl.offsetWidth - topLeftCellEl.offsetLeft - topLeftCellEl.offsetWidth + "px"; - this.element.style.width = topLeftCellEl.offsetLeft + topLeftCellEl.offsetWidth - bottomRightCellEl.offsetLeft + "px"; + this.element.style.width = calculatedRangeWidth + "px"; }else{ + const calculatedRangeWidth = Math.max( + bottomRightCellEl.offsetLeft + bottomRightCellEl.offsetWidth - topLeftCellEl.offsetLeft, + occupiedFrozenColumnsWidth, + ); this.element.style.left = topLeftRowEl.offsetLeft + topLeftCellEl.offsetLeft + "px"; - this.element.style.width = bottomRightCellEl.offsetLeft + bottomRightCellEl.offsetWidth - topLeftCellEl.offsetLeft + "px"; + this.element.style.width = calculatedRangeWidth + "px"; } this.element.style.top = topLeftRowEl.offsetTop + "px"; diff --git a/src/scss/tabulator.scss b/src/scss/tabulator.scss index 101badb33..d3b7defd1 100644 --- a/src/scss/tabulator.scss +++ b/src/scss/tabulator.scss @@ -501,7 +501,7 @@ $rangeHeaderTextHighlightBackground: #000000 !default; //header text color when .tabulator-range-overlay { position: absolute; inset: 0; - z-index: 10; + z-index: 11; pointer-events: none; .tabulator-range { From 3e2c0e4e36485985cae0694f066dece140e8b4f2 Mon Sep 17 00:00:00 2001 From: xxxace <731162160@qq.com> Date: Fri, 19 Sep 2025 17:22:33 +0800 Subject: [PATCH 2/3] fix(SelectRange): Ensure range selection overlay visibility with frozen columns --- src/js/modules/SelectRange/Range.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/js/modules/SelectRange/Range.js b/src/js/modules/SelectRange/Range.js index dd7897f9d..c7b9fb6b2 100644 --- a/src/js/modules/SelectRange/Range.js +++ b/src/js/modules/SelectRange/Range.js @@ -209,6 +209,14 @@ export default class Range extends CoreFeature{ } }); + if (occupiedFrozenColumnsWidth === 0) { + // - z-index 10: No frozen columns are occupied by the selection + this.rangeManager.overlay.style.zIndex = 10; + } else { + // - z-index 11: Selection occupies at least one frozen column (ensures visibility above other elements) + this.rangeManager.overlay.style.zIndex = 11; + } + if(this.table.rtl){ const calculatedRangeWidth = Math.max( topLeftCellEl.offsetLeft + topLeftCellEl.offsetWidth - bottomRightCellEl.offsetLeft, From 0e2eca223436ab37c9ce5f5c05307c606f40dcb3 Mon Sep 17 00:00:00 2001 From: xxxace <731162160@qq.com> Date: Sat, 20 Sep 2025 10:09:36 +0800 Subject: [PATCH 3/3] fix(SelectRange): Fix range selection boundaries with frozen columns --- src/js/modules/SelectRange/Range.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/js/modules/SelectRange/Range.js b/src/js/modules/SelectRange/Range.js index c7b9fb6b2..680dadbfd 100644 --- a/src/js/modules/SelectRange/Range.js +++ b/src/js/modules/SelectRange/Range.js @@ -163,7 +163,11 @@ export default class Range extends CoreFeature{ var _vDomTop = this.table.rowManager.renderer.vDomTop, _vDomBottom = this.table.rowManager.renderer.vDomBottom, _vDomLeft = this.table.columnManager.renderer.leftCol, - _vDomRight = this.table.columnManager.renderer.rightCol, + _vDomRight = this.table.columnManager.renderer.rightCol, + frozenLeftColumns = this.table.modules.frozenColumns.leftColumns, + frozenLeft = frozenLeftColumns.length, + frozenRightColumns = this.table.modules.frozenColumns.rightColumns, + frozenRight = frozenRightColumns.length, top, bottom, left, right, topLeftCell, bottomRightCell, topLeftCellEl, bottomRightCellEl, topLeftRowEl, bottomRightRowEl; if(this.table.options.renderHorizontal === "virtual" && this.rangeManager.rowHeader) { @@ -185,12 +189,16 @@ export default class Range extends CoreFeature{ if (_vDomRight == null) { _vDomRight = Infinity; } + + if (frozenLeft > 0 && frozenLeftColumns[0].isRowHeader === true) { + frozenLeft -= 1; + } if (this.overlaps(_vDomLeft, _vDomTop, _vDomRight, _vDomBottom)) { top = Math.max(this.top, _vDomTop); bottom = Math.min(this.bottom, _vDomBottom); left = Math.max(this.left, _vDomLeft); - right = Math.min(this.right, _vDomRight); + right = Math.min(this.right, _vDomRight + frozenLeft + frozenRight); topLeftCell = this.rangeManager.getCell(top, left); bottomRightCell = this.rangeManager.getCell(bottom, right);