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

feat(data-grid): add whitespace visualization toggle

Browse Source
This commit is contained in:
二丫讲梵 authored and GitHub committed 2026-09-12 17:40:02 +08:00
1 parent 1191118b5c
commit b6cfb3b728
18 files changed
+64 -8
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/desktop/src/components/grid/DataGrid.vue
+12 -6
View File
@@ -138,7 +138,7 @@ import {
type TransposeScrollAlignment,
} from "@/lib/dataGrid/dataGridTranspose";
import { canApplyGridSelectionValue, canDeleteGridRowItem, canEditGridCellDetail, matchesRowStatusFilter, shouldShowQuickEntryDraftRow, type RowStatus, type RowStatusFilter } from "@/lib/dataGrid/gridRowStatus";
import { displayCellValue, firstLineCellDisplayValue, limitDataGridCellDisplay, SQLSERVER_DATA_GRID_CELL_DISPLAY_MAX_LENGTH, type CellValue } from "@/lib/dataGrid/cellValue";
import { displayCellValue, firstLineCellDisplayValue, gridCellDisplayValue, limitDataGridCellDisplay, SQLSERVER_DATA_GRID_CELL_DISPLAY_MAX_LENGTH, type CellValue } from "@/lib/dataGrid/cellValue";
import { cellExternalUrl } from "@/lib/dataGrid/cellExternalUrl";
import { getApplicablePreviewActions, type PreviewAction } from "@/lib/dataGrid/resultPreviewRegistry";
import "@/lib/dataGrid/geometryMapPreview";
@@ -751,6 +751,7 @@ const infiniteScrollEnabled = computed(() => props.paginationEnabled && settings
const queryResultMaxRows = computed(() => effectiveQueryResultMaxRows(settingsStore.editorSettings.queryResultMaxRowsEnabled, settingsStore.editorSettings.queryResultMaxRows));
const paginationMaxRows = computed(() => (isResultsContext.value ? queryResultMaxRows.value : undefined));
const infiniteScrollMaxRows = computed(() => continuousQueryResultMaxRows(settingsStore.editorSettings.queryResultMaxRowsEnabled, settingsStore.editorSettings.queryResultMaxRows));
const showWhitespaceEnabled = computed(() => settingsStore.editorSettings.dataGridShowWhitespace);
const flatteningMultiLineEnabled = computed(() => settingsStore.editorSettings.flatteningMultiLineText);
const expandedCellEditor = ref<{ rowId: number; col: number } | null>(null);
const readonlyTextCell = ref<{
@@ -2225,7 +2226,8 @@ let columnFormatterForWidth: ((columnIndex: number) => ColumnFormatterConfig | u
function columnWidthDisplayValue(value: CellValue, columnIndex: number): CellValue {
const formatter = columnFormatterForWidth?.(columnIndex);
return formatter ? applyColumnFormatter(value, formatter) : value;
const display = formatter ? applyColumnFormatter(value, formatter) : value;
return showWhitespaceEnabled.value && typeof display === "string" ? gridCellDisplayValue(display, flatteningMultiLineEnabled.value, true) : display;
}
const { initColumnWidths, onResizeStart, autoFitColumn, renderedColumnWidths, totalWidth, columnVars, getIsResizing } = useDataGridColumnResize({
@@ -6848,9 +6850,11 @@ async function onCanvasDblClick(event: MouseEvent) {
function canvasCellContentOverflows(item: RowItem, actualColIdx: number, visibleColIdx: number): boolean {
const cellWidth = renderedColumnWidths.value[visibleColIdx] ?? 0;
if (cellWidth <= 0) return false;
const displayText = formatCellCached(item.data[actualColIdx], actualColIdx);
const formattedText = formatCellCached(item.data[actualColIdx], actualColIdx);
const editText = cellEditorTextForValue(item.data[actualColIdx], actualColIdx);
if (editText.includes("\n") || editText.includes("\r") || editText.length > displayText.length) return true;
// Detect truncated previews before visual whitespace markers add characters.
if (editText.includes("\n") || editText.includes("\r") || editText.length > formattedText.length) return true;
const displayText = showWhitespaceEnabled.value ? gridCellDisplayValue(formattedText, flatteningMultiLineEnabled.value, true) : formattedText;
const canvas = activeCanvasSurface();
const context = canvas?.getContext("2d");
if (!context) {
@@ -7086,6 +7090,7 @@ function drawCanvasGrid() {
columnIsBoolean: isBooleanGridColumn,
booleanDisplayMode: booleanDisplayMode.value,
flatteningMultiLineEnabled: flatteningMultiLineEnabled.value,
showWhitespace: showWhitespaceEnabled.value,
});
flipCanvasSurface();
}
@@ -7110,6 +7115,7 @@ watch(showDataGridTopbar, () => nextTick(observeDataGridTopbarWidth), {
watch(columnAligns, () => scheduleCanvasDraw());
watch(booleanDisplayMode, () => scheduleCanvasDraw());
watch(flatteningMultiLineEnabled, () => scheduleCanvasDraw());
watch(showWhitespaceEnabled, () => scheduleCanvasDraw());
watch(colorizeDataGridCellTypes, () => scheduleCanvasDraw());
watch(
[
@@ -11993,7 +11999,7 @@ useUpdateBlocker(() => (hasPendingChanges.value || hasPendingDataEditorDraft.val
<template v-if="newRowCellPlaceholder(displayItems[cell.recordIndex], cell.valueIndex)">
<span class="text-muted-foreground/70 italic">{{ firstLineCellDisplayValue(newRowCellPlaceholder(displayItems[cell.recordIndex], cell.valueIndex) ?? "", flatteningMultiLineEnabled) }}</span>
</template>
<template v-else>{{ firstLineCellDisplayValue(cell.display, flatteningMultiLineEnabled) }}</template>
<template v-else>{{ gridCellDisplayValue(cell.display, flatteningMultiLineEnabled, showWhitespaceEnabled) }}</template>
<div v-if="cellDetailButtonVisible(cell.recordIndex, cell.valueIndex)" class="absolute right-2 top-1/2 flex -translate-y-1/2 items-center gap-1">
<LightDropdownMenu
v-if="canQuickDownloadCellValue(cell.recordIndex, cell.valueIndex)"
@@ -12913,7 +12919,7 @@ useUpdateBlocker(() => (hasPendingChanges.value || hasPendingDataEditorDraft.val
<template v-if="newRowCellPlaceholder(item, col.actualColIdx)">
<span class="text-muted-foreground/70 italic">{{ firstLineCellDisplayValue(newRowCellPlaceholder(item, col.actualColIdx) ?? "", flatteningMultiLineEnabled) }}</span>
</template>
<template v-else>{{ firstLineCellDisplayValue(formatGridItemCell(item, col.actualColIdx), flatteningMultiLineEnabled) }}</template>
<template v-else>{{ gridCellDisplayValue(formatGridItemCell(item, col.actualColIdx), flatteningMultiLineEnabled, showWhitespaceEnabled) }}</template>
<div v-if="cellDetailButtonVisible(item.displayIndex, col.actualColIdx)" class="absolute right-2 top-1/2 flex -translate-y-1/2 items-center gap-1">
<LightDropdownMenu
v-if="canQuickDownloadCellValue(item.displayIndex, col.actualColIdx)"