feat(data-grid): make the row number column show original row numbers
This commit is contained in:
xianghu908 authored and GitHub committed
1 parent
9ab1462ca8
commit
6517284d95
17 files changed
+196
-10
No files matched your search
@@ -231,6 +231,7 @@ import {
|
||||
} from "@/lib/dataGrid/dataGridInfiniteScroll";
|
||||
import { resolveDataGridWheelScroll } from "@/lib/dataGrid/dataGridWheel";
|
||||
import { CANVAS_DATA_GRID_ROW_HEIGHT, MAX_CANVAS_DATA_GRID_PIXEL_RATIO, canvasDataGridActionOverlayWidth, canvasDataGridActionReservedWidth, dataGridSearchMatchKey, drawCanvasDataGrid, resolveCanvasCellTextLayout, type CanvasDevicePixelSize } from "@/lib/dataGrid/canvasDataGridRenderer";
|
||||
import { resolveDataGridRowNumberLabel } from "@/lib/dataGrid/dataGridRowNumber";
|
||||
import { resolveCrosshairTarget, type CrosshairTarget } from "@/lib/dataGrid/crosshairHighlight";
|
||||
import { DATA_GRID_DARK_STRIPED_ROW_BG, DATA_GRID_LIGHT_STRIPED_ROW_BG, dataGridActiveRowBackground } from "@/lib/dataGrid/dataGridPaintTheme";
|
||||
import { createRowLowerTextCache } from "@/lib/dataGrid/dataGridRowLowerText";
|
||||
@@ -757,6 +758,7 @@ const columnIndexMap = computed(() => buildColumnIndexMap(indexes.value, primary
|
||||
const compactColumnHeaderActions = computed(() => settingsStore.editorSettings.compactColumnHeaderActions);
|
||||
const dataGridRenderMode = computed(() => settingsStore.editorSettings.dataGridRenderMode);
|
||||
const dataGridSearchMode = computed(() => settingsStore.editorSettings.dataGridSearchMode);
|
||||
const dataGridRowNumberMode = computed(() => settingsStore.editorSettings.dataGridRowNumberMode);
|
||||
const compactDataGridToolbar = computed(() => dataGridTopbarOverflowCompact.value || isDataGridToolbarCompact(dataGridTopbarWidth.value, dataGridViewportWidth.value, DATA_GRID_CONDITION_TOOLBAR_MIN_WIDTH));
|
||||
const splitDataGridToolbar = computed(() => settingsStore.editorSettings.dataGridToolbarLayout === "split");
|
||||
const responsiveDataGridToolbarActionCount = computed(() => dataGridToolbarActionCollapseCount(dataGridTopbarWidth.value, dataGridViewportWidth.value, DATA_GRID_CONDITION_TOOLBAR_MIN_WIDTH));
|
||||
@@ -6387,8 +6389,13 @@ function rowNumberPageOffset(): number {
|
||||
|
||||
function rowNumberText(item: RowItem | undefined): string {
|
||||
if (!item) return "";
|
||||
if (item.isDraft) return "*";
|
||||
return String(item.displayIndex + 1 + rowNumberPageOffset());
|
||||
return resolveDataGridRowNumberLabel({
|
||||
displayIndex: item.displayIndex,
|
||||
sourceIndex: item.sourceIndex,
|
||||
isDraft: item.isDraft,
|
||||
sourceRowNumbers: dataGridRowNumberMode.value === "source",
|
||||
pageOffset: rowNumberPageOffset(),
|
||||
});
|
||||
}
|
||||
|
||||
const quickEntryDraftPlaceholder = computed(() => t("grid.quickEntryDraftPlaceholder"));
|
||||
@@ -7286,6 +7293,7 @@ function drawCanvasGrid() {
|
||||
booleanDisplayMode: booleanDisplayMode.value,
|
||||
flatteningMultiLineEnabled: flatteningMultiLineEnabled.value,
|
||||
showWhitespace: showWhitespaceEnabled.value,
|
||||
rowNumberMode: dataGridRowNumberMode.value,
|
||||
});
|
||||
if (!drawn) return;
|
||||
flipCanvasSurface();
|
||||
|
||||
@@ -34,6 +34,7 @@ import {
|
||||
Pin,
|
||||
Pencil,
|
||||
Rows3,
|
||||
Hash,
|
||||
SquareDashed,
|
||||
Minus,
|
||||
Plus,
|
||||
@@ -136,7 +137,7 @@ const QueryChart = defineAsyncComponent(() => import("@/components/chart/QueryCh
|
||||
import { useQueryStore } from "@/stores/queryStore";
|
||||
import { useConnectionStore } from "@/stores/connectionStore";
|
||||
import type { ContentAreaSurfaceEmits, ContentAreaSurfaceProps } from "@/components/layout/querySurfaces";
|
||||
import { TABLE_FONT_SIZE_MAX, TABLE_FONT_SIZE_MIN, useSettingsStore, type DataGridSearchMode, type ResultRunDisplayMode } from "@/stores/settingsStore";
|
||||
import { TABLE_FONT_SIZE_MAX, TABLE_FONT_SIZE_MIN, useSettingsStore, type DataGridRowNumberMode, type DataGridSearchMode, type ResultRunDisplayMode } from "@/stores/settingsStore";
|
||||
import { useToast } from "@/composables/useToast";
|
||||
import { isTauriRuntime } from "@/lib/backend/tauriRuntime";
|
||||
import { canCancelQueryExecution, isActiveResultLoading, queryExecutionLabelKey } from "@/lib/sql/queryExecutionState";
|
||||
@@ -328,6 +329,7 @@ const dataToolbarCompact = computed(() => dataToolbarTier.value >= 1);
|
||||
const showDataColumnsChip = computed(() => dataToolbarTier.value < 2);
|
||||
const dataGridRenderMode = computed(() => settingsStore.editorSettings.dataGridRenderMode);
|
||||
const dataGridSearchMode = computed(() => settingsStore.editorSettings.dataGridSearchMode);
|
||||
const dataGridRowNumberMode = computed(() => settingsStore.editorSettings.dataGridRowNumberMode);
|
||||
const resultRunDisplayMode = computed(() => settingsStore.editorSettings.resultRunDisplayMode);
|
||||
const columnWidthDensity = computed(() => settingsStore.editorSettings.columnWidthDensity);
|
||||
const tableFontSize = computed(() => settingsStore.editorSettings.tableFontSize);
|
||||
@@ -398,6 +400,10 @@ function setDataGridSearchMode(value: DataGridSearchMode) {
|
||||
settingsStore.updateEditorSettings({ dataGridSearchMode: value });
|
||||
}
|
||||
|
||||
function setDataGridRowNumberMode(value: DataGridRowNumberMode) {
|
||||
settingsStore.updateEditorSettings({ dataGridRowNumberMode: value });
|
||||
}
|
||||
|
||||
function setResultRunDisplayMode(value: ResultRunDisplayMode) {
|
||||
settingsStore.updateEditorSettings({ resultRunDisplayMode: value });
|
||||
}
|
||||
@@ -1821,6 +1827,32 @@ defineExpose({
|
||||
</div>
|
||||
</LightTooltip>
|
||||
</div>
|
||||
<div class="flex items-center justify-between gap-3 px-3 py-1.5 text-xs">
|
||||
<div class="min-w-0 flex items-center gap-2 font-medium">
|
||||
<Hash class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
|
||||
<span>{{ t("grid.rowNumberMode") }}</span>
|
||||
</div>
|
||||
<LightTooltip :text="t('grid.rowNumberModeHint')" side="left" :side-offset="6" :delay="0" :open-on-focus="false">
|
||||
<div class="grid w-32 grid-cols-2 rounded-md border bg-muted/40 p-0.5">
|
||||
<button
|
||||
type="button"
|
||||
class="h-5 min-w-0 truncate whitespace-nowrap rounded-[5px] px-2 text-xs transition-colors"
|
||||
:class="dataGridRowNumberMode === 'view' ? 'bg-background font-semibold text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'"
|
||||
@click="setDataGridRowNumberMode('view')"
|
||||
>
|
||||
{{ t("grid.rowNumberModeView") }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="h-5 min-w-0 truncate whitespace-nowrap rounded-[5px] px-2 text-xs transition-colors"
|
||||
:class="dataGridRowNumberMode === 'source' ? 'bg-background font-semibold text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'"
|
||||
@click="setDataGridRowNumberMode('source')"
|
||||
>
|
||||
{{ t("grid.rowNumberModeSource") }}
|
||||
</button>
|
||||
</div>
|
||||
</LightTooltip>
|
||||
</div>
|
||||
<div class="flex items-center justify-between gap-3 px-3 py-1.5 text-xs">
|
||||
<div class="min-w-0 flex items-center gap-2 font-medium">
|
||||
<Rows3 class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
|
||||
@@ -2425,6 +2457,32 @@ defineExpose({
|
||||
</div>
|
||||
</LightTooltip>
|
||||
</div>
|
||||
<div class="flex items-center justify-between gap-3 px-3 py-1.5 text-xs">
|
||||
<div class="min-w-0 flex items-center gap-2 font-medium">
|
||||
<Hash class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
|
||||
<span>{{ t("grid.rowNumberMode") }}</span>
|
||||
</div>
|
||||
<LightTooltip :text="t('grid.rowNumberModeHint')" side="left" :side-offset="6" :delay="0" :open-on-focus="false">
|
||||
<div class="grid w-32 grid-cols-2 rounded-md border bg-muted/40 p-0.5">
|
||||
<button
|
||||
type="button"
|
||||
class="h-5 min-w-0 truncate whitespace-nowrap rounded-[5px] px-2 text-xs transition-colors"
|
||||
:class="dataGridRowNumberMode === 'view' ? 'bg-background font-semibold text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'"
|
||||
@click="setDataGridRowNumberMode('view')"
|
||||
>
|
||||
{{ t("grid.rowNumberModeView") }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="h-5 min-w-0 truncate whitespace-nowrap rounded-[5px] px-2 text-xs transition-colors"
|
||||
:class="dataGridRowNumberMode === 'source' ? 'bg-background font-semibold text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'"
|
||||
@click="setDataGridRowNumberMode('source')"
|
||||
>
|
||||
{{ t("grid.rowNumberModeSource") }}
|
||||
</button>
|
||||
</div>
|
||||
</LightTooltip>
|
||||
</div>
|
||||
<div class="flex items-center justify-between gap-3 px-3 py-1.5 text-xs">
|
||||
<div class="min-w-0 flex items-center gap-2 font-medium">
|
||||
<Rows3 class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
|
||||
|
||||
Reference in new issue
Block a user