From fe39a38dd497df79b641166b3d493ca1fa80449d Mon Sep 17 00:00:00 2001 From: t8y2 <1156263951@qq.com> Date: Thu, 18 Jun 2026 14:01:18 +0800 Subject: [PATCH] fix(grid): keep row number colors stable --- apps/desktop/src/components/grid/DataGrid.vue | 18 +++------- .../desktop/src/lib/canvasDataGridRenderer.ts | 33 ++----------------- 2 files changed, 7 insertions(+), 44 deletions(-) diff --git a/apps/desktop/src/components/grid/DataGrid.vue b/apps/desktop/src/components/grid/DataGrid.vue index d509c6693..d534345c1 100644 --- a/apps/desktop/src/components/grid/DataGrid.vue +++ b/apps/desktop/src/components/grid/DataGrid.vue @@ -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(() => { :data-row-index="item.displayIndex" >
(() => { } .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; } diff --git a/apps/desktop/src/lib/canvasDataGridRenderer.ts b/apps/desktop/src/lib/canvasDataGridRenderer.ts index 9f01ca411..47cc6f8e2 100644 --- a/apps/desktop/src/lib/canvasDataGridRenderer.ts +++ b/apps/desktop/src/lib/canvasDataGridRenderer.ts @@ -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;