github/dbx
4
0
Fork 0
mirror of https://github.com/t8y2/dbx.git synced 2026-10-22 02:06:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

pref(grid): improve paging row numbers and cell ellipsis symbols

Browse Source 
* pref(grid): improve paging row numbers and cell ellipsis symbols

* fix(grid): paging row numbers is not processed when infiniteScroll enabled
This commit is contained in:
ptma
2026-06-23 15:49:20 +08:00
committed by GitHub
parent f21a4b5ac1
commit 8ae9863c51
2 changed files with 21 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/desktop/src/components/grid/DataGrid.vue
+5 -2
View File
@@ -4379,6 +4379,9 @@ function drawCanvasGrid() {
rowCellsUseSelectionVisual,
cellIsSelected,
cellCanHover: canEditCellItem,
infiniteScrollEnabled: infiniteScrollEnabled.value,
pageSize: pageSize.value,
currentPage: currentPage.value,
});
}
@@ -7432,13 +7435,13 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
@dblclick.stop="toggleTranspose(item.displayIndex)"
@contextmenu="onRowContext(item.id, item.displayIndex)"
>
{{ item.displayIndex + 1 }}
{{ infiniteScrollEnabled ? item.displayIndex + 1 : item.displayIndex + 1 + (currentPage - 1) * pageSize }}
</div>
<div class="shrink-0" :style="{ width: `${horizontalColumnWindow.beforeWidth}px` }" />
<div
v-for="col in renderedGridColumns"
:key="col.actualColIdx"
class="group/cell shrink-0 px-3 py-1 border-r border-border whitespace-nowrap overflow-hidden text-ellipsis relative select-none flex items-center tabular-nums text-[13px]"
class="group/cell shrink-0 px-3 py-1 border-r border-border whitespace-nowrap overflow-hidden text-ellipsis relative select-none inline-block items-center tabular-nums text-[13px]"
:style="renderedColumnStyle(col.visibleColIdx)"
:class="{
'text-muted-foreground italic': isNull(item.data[col.actualColIdx]),
apps/desktop/src/lib/canvasDataGridRenderer.ts
+16 -4
View File
@@ -54,6 +54,9 @@ export interface DrawCanvasDataGridOptions {
rowCellsUseSelectionVisual: (rowId: number) => boolean;
cellIsSelected: (rowIndex: number, visibleColIdx: number) => boolean;
cellCanHover: (row: CanvasDataGridRow, actualColIdx: number) => boolean;
infiniteScrollEnabled: boolean;
pageSize: number;
currentPage: number;
}
type NumericCanvasContext = CanvasRenderingContext2D & {
@@ -101,14 +104,16 @@ function fitCanvasText(ctx: CanvasRenderingContext2D, text: string, maxWidth: nu
fitCanvasTextCache.set(cacheKey, text);
return text;
}
const ellipsis = "...";
const ellipsisWidth = ctx.measureText(ellipsis).width;
let low = 0;
let high = text.length;
while (low < high) {
const mid = Math.ceil((low + high) / 2);
if (ctx.measureText(text.slice(0, mid)).width <= maxWidth) low = mid;
if (ctx.measureText(text.slice(0, mid)).width + ellipsisWidth <= maxWidth) low = mid;
else high = mid - 1;
}
const result = text.slice(0, low);
const result = text.slice(0, low) + ellipsis;
if (fitCanvasTextCache.size >= FIT_CANVAS_TEXT_CACHE_MAX) fitCanvasTextCache.clear();
fitCanvasTextCache.set(cacheKey, result);
return result;
@@ -221,6 +226,9 @@ export function drawCanvasDataGrid(options: DrawCanvasDataGridOptions) {
rowCellsUseSelectionVisual,
cellIsSelected,
cellCanHover,
infiniteScrollEnabled,
pageSize,
currentPage,
} = options;
const dpr = Math.max(1, options.pixelRatio ?? window.devicePixelRatio ?? 1);
const pixelWidth = Math.max(1, Math.ceil(width * dpr));
@@ -287,7 +295,11 @@ export function drawCanvasDataGrid(options: DrawCanvasDataGridOptions) {
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);
if (infiniteScrollEnabled) {
ctx.fillText(String(item.displayIndex + 1), rowNumberTextX, textY);
} else {
ctx.fillText(String(item.displayIndex + 1 + pageSize * (currentPage - 1)), rowNumberTextX, textY);
}
ctx.font = normalFont;
ctx.strokeStyle = theme.border;
@@ -360,7 +372,7 @@ export function drawCanvasDataGrid(options: DrawCanvasDataGridOptions) {
const displayText = isEditingThisCell ? "" : formatCell(value, actualColIdx);
const needsTruncation = ctx.measureText(displayText).width > paddedMaxWidth;
const textMaxWidth = needsTruncation ? Math.max(0, x + colWidth - textLeft) : paddedMaxWidth;
const text = isEditingThisCell ? displayText : fitCanvasText(ctx, displayText, textMaxWidth);
const text = isEditingThisCell ? displayText : fitCanvasText(ctx, displayText, textMaxWidth - 12);
ctx.fillText(text, textLeft, textY);
if (item.isDeleted && text) {
const textWidth = Math.min(ctx.measureText(text).width, textMaxWidth);