From 8ae9863c5131d99aade818c116ffaa370598c8a8 Mon Sep 17 00:00:00 2001
From: ptma <ptma@163.com>
Date: Tue, 23 Jun 2026 15:49:20 +0800
Subject: [PATCH] pref(grid): improve paging row numbers and cell ellipsis
 symbols

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

* fix(grid): paging row numbers is not processed when infiniteScroll enabled
---
 apps/desktop/src/components/grid/DataGrid.vue |  7 +++++--
 .../desktop/src/lib/canvasDataGridRenderer.ts | 20 +++++++++++++++----
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/apps/desktop/src/components/grid/DataGrid.vue b/apps/desktop/src/components/grid/DataGrid.vue
index 700b4da6b5..9638814a0f 100644
--- a/apps/desktop/src/components/grid/DataGrid.vue
+++ b/apps/desktop/src/components/grid/DataGrid.vue
@@ -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]),
diff --git a/apps/desktop/src/lib/canvasDataGridRenderer.ts b/apps/desktop/src/lib/canvasDataGridRenderer.ts
index 47cc6f8e26..16684f16ee 100644
--- a/apps/desktop/src/lib/canvasDataGridRenderer.ts
+++ b/apps/desktop/src/lib/canvasDataGridRenderer.ts
@@ -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);