github/dbx
4
0
Fork 0
mirror of https://github.com/t8y2/dbx.git synced 2026-10-23 04:55:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(grid): unify selected cell border thickness in DOM and canvas mode

Browse Source 
DOM mode: replace box-shadow with outline to avoid stacking with row border-b.
Canvas mode: draw row border before selected cell overlay so selection uses
uniform color on all four sides; clamp top edge to prevent canvas clipping.
This commit is contained in:
t8y2
2026-06-09 01:01:50 +08:00
parent 45a6bb8a58
commit 0ce6fde347
2 changed files with 22 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/desktop/src/components/grid/DataGrid.vue
+10 -5
View File
@@ -8775,17 +8775,20 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
.cell-selected {
background-color: var(--data-grid-cell-selected-bg);
box-shadow: inset 0 0 0 1px var(--data-grid-cell-selected-border);
outline: 1px solid var(--data-grid-cell-selected-border);
outline-offset: -1px;
}
.row-cell-selected {
background-color: var(--data-grid-cell-selected-bg);
box-shadow: inset 0 0 0 1px var(--data-grid-cell-selected-border);
outline: 1px solid var(--data-grid-cell-selected-border);
outline-offset: -1px;
}
.transpose-record-header-selected {
background-color: var(--data-grid-row-number-selected-bg);
box-shadow: inset 0 0 0 1px var(--data-grid-cell-selected-border);
outline: 1px solid var(--data-grid-cell-selected-border);
outline-offset: -1px;
}
.transpose-record-header-active {
@@ -8794,12 +8797,14 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
.cell-selected-dirty {
background-color: var(--data-grid-cell-selected-dirty-bg);
box-shadow: inset 0 0 0 1px var(--data-grid-cell-selected-border);
outline: 1px solid var(--data-grid-cell-selected-border);
outline-offset: -1px;
}
.row-cell-selected-dirty {
background-color: var(--data-grid-cell-selected-dirty-bg);
box-shadow: inset 0 0 0 1px var(--data-grid-cell-selected-border);
outline: 1px solid var(--data-grid-cell-selected-border);
outline-offset: -1px;
}
.data-grid-row-number.bg-emerald-500\/15 {
apps/desktop/src/lib/canvasDataGridRenderer.ts
+12 -12
View File
@@ -351,6 +351,13 @@ export function drawCanvasDataGrid(options: DrawCanvasDataGridOptions) {
ctx.fillText(String(item.displayIndex + 1), rowNumberTextX, textY);
ctx.font = normalFont;
const rowBorderY = crispCanvasLine(y + CANVAS_DATA_GRID_ROW_HEIGHT - 1, dpr);
ctx.strokeStyle = theme.border;
ctx.beginPath();
ctx.moveTo(0, rowBorderY);
ctx.lineTo(width, rowBorderY);
ctx.stroke();
let x = rowNumberWidth + columnOffset - scrollLeft;
for (let visibleColIdx = firstCol; visibleColIdx < renderedColumnWidths.length && x < width; visibleColIdx++) {
const colWidth = renderedColumnWidths[visibleColIdx] ?? 0;
@@ -449,21 +456,20 @@ export function drawCanvasDataGrid(options: DrawCanvasDataGridOptions) {
if (selectedBorderVisual && cellPaintWidth >= 2) {
const selectedLeftX = clippedX + 0.5;
const selectedRightX = clippedX + cellPaintWidth - 1.5;
const selectedTopY = y + 0.5;
const selectedBottomY = y + CANVAS_DATA_GRID_ROW_HEIGHT - 1.5;
const selectedTopY = Math.max(y + 0.5, 1);
const drawSelectedLeftBorder = selectedLeftX > rowNumberWidth + 0.5;
ctx.strokeStyle = theme.cellSelectedBorder;
ctx.beginPath();
ctx.moveTo(selectedLeftX, selectedTopY);
ctx.lineTo(selectedRightX, selectedTopY);
ctx.moveTo(selectedLeftX, selectedBottomY);
ctx.lineTo(selectedRightX, selectedBottomY);
ctx.moveTo(selectedLeftX, rowBorderY);
ctx.lineTo(selectedRightX, rowBorderY);
if (drawSelectedLeftBorder) {
ctx.moveTo(selectedLeftX, selectedTopY);
ctx.lineTo(selectedLeftX, selectedBottomY);
ctx.lineTo(selectedLeftX, rowBorderY);
}
ctx.moveTo(selectedRightX, selectedTopY);
ctx.lineTo(selectedRightX, selectedBottomY);
ctx.lineTo(selectedRightX, rowBorderY);
ctx.stroke();
}
@@ -476,12 +482,6 @@ export function drawCanvasDataGrid(options: DrawCanvasDataGridOptions) {
}
x += colWidth;
}
ctx.strokeStyle = theme.border;
ctx.beginPath();
const rowBorderY = crispCanvasLine(y + CANVAS_DATA_GRID_ROW_HEIGHT - 1, dpr);
ctx.moveTo(0, rowBorderY);
ctx.lineTo(width, rowBorderY);
ctx.stroke();
ctx.globalAlpha = 1;
}
}