xiaoxue_admin
/
dbx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(grid): keep row number colors stable

This commit is contained in:
t8y2 2026-06-18 14:01:18 +08:00
parent a0475d80e3
commit fe39a38dd4
2 changed files with 7 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
apps/desktop/src/components/grid/DataGrid.vue
View File

@ -4122,8 +4122,6 @@ function drawCanvasGrid() {
currentSearchMatch: currentSearchMatch.value,
formatCell: formatCellCached,
isRowActive,
isRowSelected,
isSelectingAll: isSelectingAll.value,
rowCellsUseSelectionVisual,
cellIsSelected,
cellCanHover: canEditCellItem,
@ -7113,14 +7111,8 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
:data-row-index="item.displayIndex"
>
<div
class="data-grid-row-number w-(--row-num-w) shrink-0 px-2 py-1 border-r text-center select-none cursor-default hover:bg-gray-200 dark:hover:bg-gray-800 sticky left-0 z-10 bg-background"
:class="[
rowNumberStatusClass(item),
{
'row-selected': isSelectingAll,
'row-selected text-primary font-semibold !bg-gray-300 dark:!bg-gray-800': isRowSelected(item.id) && item.status !== 'new' && item.status !== 'edited' && item.status !== 'deleted',
},
]"
class="data-grid-row-number w-(--row-num-w) shrink-0 px-2 py-1 border-r text-center select-none cursor-default sticky left-0 z-10 bg-background"
:class="rowNumberStatusClass(item)"
@click="handleRowClick(item.displayIndex, item.id, $event)"
@dblclick.stop="toggleTranspose(item.displayIndex)"
@contextmenu="onRowContext(item.id, item.displayIndex)"
@ -8251,13 +8243,11 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
}
.cell-selected,
.active-row > div:not(.cell-dirty),
.active-row > .data-grid-row-number:not(.cell-dirty) {
.active-row > div:not(.cell-dirty):not(.data-grid-row-number) {
@apply text-foreground bg-gray-300 dark:bg-gray-900;
}
.cell-selected,
.active-row .row-selected.data-grid-row-number {
.cell-selected {
@apply outline outline-primary -outline-offset-1;
}

33
apps/desktop/src/lib/canvasDataGridRenderer.ts
View File

@ -51,8 +51,6 @@ export interface DrawCanvasDataGridOptions {
currentSearchMatch: CanvasSearchMatch | null;
formatCell: (value: CellValue, columnIndex: number) => string;
isRowActive: (rowIndex: number) => boolean;
isRowSelected: (rowId: number) => boolean;
isSelectingAll: boolean;
rowCellsUseSelectionVisual: (rowId: number) => boolean;
cellIsSelected: (rowIndex: number, visibleColIdx: number) => boolean;
cellCanHover: (row: CanvasDataGridRow, actualColIdx: number) => boolean;
@ -220,8 +218,6 @@ export function drawCanvasDataGrid(options: DrawCanvasDataGridOptions) {
currentSearchMatch,
formatCell,
isRowActive,
isRowSelected,
isSelectingAll,
rowCellsUseSelectionVisual,
cellIsSelected,
cellCanHover,
@ -277,23 +273,18 @@ export function drawCanvasDataGrid(options: DrawCanvasDataGridOptions) {
ctx.fillStyle = rowIsActive && !item.isDeleted ? theme.cellSelectedSingle : rowBase;
ctx.fillRect(0, y, width, CANVAS_DATA_GRID_ROW_HEIGHT);
let rowNumberFill = item.status === "new" ? theme.rowNumberNew : item.status === "edited" ? theme.rowNumberEdited : item.status === "deleted" ? theme.rowNumberDeleted : theme.rowNumberDefault;
if ((rowIsActive || isRowSelected(item.id)) && !item.isDeleted) rowNumberFill = theme.cellSelectedSingle;
const rowNumberFill = item.status === "new" ? theme.rowNumberNew : item.status === "edited" ? theme.rowNumberEdited : item.status === "deleted" ? theme.rowNumberDeleted : theme.rowNumberDefault;
ctx.fillStyle = rowNumberFill;
ctx.fillRect(0, y, rowNumberWidth, CANVAS_DATA_GRID_ROW_HEIGHT);
if (hoverCell?.rowIndex === item.displayIndex && hoverCell.visibleColIdx < 0 && !isScrolling && item.status === "clean" && !rowIsActive && !isRowSelected(item.id)) {
ctx.fillStyle = theme.cellHover;
ctx.fillRect(0, y, rowNumberWidth, CANVAS_DATA_GRID_ROW_HEIGHT);
}
ctx.strokeStyle = theme.border;
ctx.beginPath();
ctx.moveTo(rowNumberBorderX, y);
ctx.lineTo(rowNumberBorderX, y + CANVAS_DATA_GRID_ROW_HEIGHT);
ctx.stroke();
const rowNumberText = item.status === "new" ? theme.rowNumberTextNew : item.status === "edited" ? theme.rowNumberTextEdited : item.status === "deleted" ? theme.rowNumberTextDeleted : isRowSelected(item.id) ? theme.primary : theme.rowNumberTextClean;
const rowNumberText = item.status === "new" ? theme.rowNumberTextNew : item.status === "edited" ? theme.rowNumberTextEdited : item.status === "deleted" ? theme.rowNumberTextDeleted : theme.rowNumberTextClean;
ctx.fillStyle = rowNumberText;
ctx.font = item.status === "new" || item.status === "edited" || isRowSelected(item.id) ? semiboldFont : normalFont;
ctx.font = item.status === "new" || item.status === "edited" ? semiboldFont : normalFont;
ctx.textAlign = "center";
const textY = alignCanvasPixel(y + rowTextOffsetY, dpr);
ctx.fillText(String(item.displayIndex + 1), rowNumberTextX, textY);
@ -304,24 +295,6 @@ export function drawCanvasDataGrid(options: DrawCanvasDataGridOptions) {
ctx.moveTo(0, rowBorderY);
ctx.lineTo(width, rowBorderY);
ctx.stroke();
if ((isRowSelected(item.id) || isSelectingAll) && !item.isDeleted) {
const selectedLeftX = 0.5;
const selectedRightX = rowNumberWidth - 1.5;
const selectedTopY = Math.max(y + 0.5, 1);
ctx.strokeStyle = theme.cellSelectedSingleBorder;
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(selectedLeftX, selectedTopY);
ctx.lineTo(selectedRightX, selectedTopY);
ctx.moveTo(selectedLeftX, rowBorderY);
ctx.lineTo(selectedRightX, rowBorderY);
ctx.moveTo(selectedLeftX, selectedTopY);
ctx.lineTo(selectedLeftX, rowBorderY);
ctx.moveTo(selectedRightX, selectedTopY);
ctx.lineTo(selectedRightX, rowBorderY);
ctx.stroke();
}
let x = rowNumberWidth + columnOffset - scrollLeft;
for (let visibleColIdx = firstCol; visibleColIdx < renderedColumnWidths.length && x < width; visibleColIdx++) {
const colWidth = renderedColumnWidths[visibleColIdx] ?? 0;