dbeaver/pro#9131 use visual keys for copy & paste (#4350)

Co-authored-by: sergeyteleshev <iamsergeyteleshev@gmail.com>
Co-authored-by: Evgenia <139753579+EvgeniaBzzz@users.noreply.github.com>

webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/TableDataContext.ts

@@ -38,6 +38,8 @@ export interface ITableData {
   hasDescription: boolean;
   columns: Array<IColumnInfo>;
   columnKeys: IGridColumnKey[];
+  visualColumnKeys: IGridColumnKey[];
+  visualColumns: Array<IColumnInfo>;
   rows: IGridRowKey[];
   gridDiv: HTMLDivElement | null;
   inBounds: (position: IGridDataKey) => boolean;
@@ -48,6 +50,7 @@ export interface ITableData {
   getColumnInfo: (key: IGridColumnKey) => SqlResultColumn | undefined;
   getColumnsInRange: (startIndex: number, endIndex: number) => Array<IColumnInfo>;
   getColumnIndexFromColumnKey: (column: IGridColumnKey) => number;
+  getVisualColumnIndexFromColumnKey: (column: IGridColumnKey) => number;
   getRowIndexFromKey: (row: IGridRowKey) => number;
   getEditionState: (key: IGridDataKey) => DatabaseEditChangeType | null;
   isCellEdited: (key: IGridDataKey) => boolean;

webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/useGridSelectedCellsCopy.ts

@@ -46,7 +46,7 @@ function getSelectedCellsValue(tableData: ITableData, selectedCells: Map<string,
   const rowsValues: string[] = [];
   for (const rowSelection of orderedSelectedCells.values()) {
     const rowCellsValues: string[] = [];
-    for (const column of tableData.view.columnKeys) {
+    for (const column of tableData.view.visualColumnKeys) {
       if (!selectedColumns.some(columnKey => GridDataKeysUtils.isEqual(columnKey, column))) {
         continue;
       }

webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/useGridSelectedCellsPaste.ts

@@ -79,7 +79,7 @@ export function useGridSelectedCellsPaste(
       }
 
       const getRowIdx = (key: IGridDataKey) => tableData.getRowIndexFromKey(key.row);
-      const getColIdx = (key: IGridDataKey) => tableData.getColumnIndexFromColumnKey(key.column);
+      const getColIdx = (key: IGridDataKey) => tableData.getVisualColumnIndexFromColumnKey(key.column);
 
       // row-major order (top-to-bottom, left-to-right)
       const targets = selectedCells.slice().sort((a, b) => {

webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/useTableData.tsx

@@ -62,20 +62,17 @@ export function useTableData(
       get columnKeys(): IGridColumnKey[] {
         return this.view.columnKeys;
       },
+      get visualColumnKeys(): IGridColumnKey[] {
+        return this.view.visualColumnKeys;
+      },
       get rows(): IGridRowKey[] {
         return this.view.rowKeys;
       },
       get columns() {
-        if (this.columnKeys.length === 0) {
-          return [];
-        }
-
-        const columns: Array<IColumnInfo> = this.columnKeys.map<IColumnInfo>(col => ({
-          key: col,
-        }));
-        columns.unshift({ key: null });
-
-        return columns;
+        return getColumns(this.columnKeys);
+      },
+      get visualColumns() {
+        return getColumns(this.visualColumnKeys);
       },
       get hasDescription(): boolean {
         if (!this.dataGridSettingsService.description) {
@@ -103,7 +100,10 @@ export function useTableData(
         return this.view.getCellHolder(key) as IDatabaseValueHolder<IGridDataKey, IResultSetValue>;
       },
       getColumnIndexFromColumnKey(columnKey) {
-        return this.columns.findIndex(column => column.key !== null && GridDataKeysUtils.isEqual(columnKey, column.key));
+        return getColumnIndex(columnKey, this.columns);
+      },
+      getVisualColumnIndexFromColumnKey(columnKey) {
+        return getColumnIndex(columnKey, this.visualColumns);
       },
       getRowIndexFromKey(rowKey) {
         return this.rows.findIndex(row => GridDataKeysUtils.isEqual(rowKey, row));
@@ -171,6 +171,8 @@ export function useTableData(
       columns: computed,
       rows: computed,
       columnKeys: computed,
+      visualColumns: computed,
+      visualColumnKeys: computed,
       hasDescription: computed,
       formatting: observable.ref,
       format: observable.ref,
@@ -192,3 +194,21 @@ export function useTableData(
     },
   );
 }
+
+function getColumns(columnKeys: IGridColumnKey[]): IColumnInfo[] {
+  if (columnKeys.length === 0) {
+    return [];
+  }
+
+  const columns: Array<IColumnInfo> = columnKeys.map<IColumnInfo>(col => ({
+    key: col,
+  }));
+
+  columns.unshift({ key: null });
+
+  return columns;
+}
+
+function getColumnIndex(columnKey: IGridColumnKey, columns: IColumnInfo[]): number {
+  return columns.findIndex(column => column.key !== null && GridDataKeysUtils.isEqual(column.key, columnKey));
+}

webapp/packages/plugin-data-viewer/src/DatabaseDataModel/Actions/Grid/GridViewAction.ts

@@ -73,6 +73,19 @@ export class GridViewAction<
     return this.columnsOrder.map(index => ({ index }));
   }
 
+  get visualColumnKeys(): IGridColumnKey[] {
+    return this.columnKeys.slice().sort((a, b) => {
+      const aPinned = this.isColumnPinned(a);
+      const bPinned = this.isColumnPinned(b);
+
+      if (aPinned === bPinned) {
+        return 0;
+      }
+
+      return aPinned ? -1 : 1;
+    });
+  }
+
   get rows(): TCell[][] {
     return this.rowKeys.map(this.mapRow, this);
   }
@@ -81,6 +94,10 @@ export class GridViewAction<
     return this.columnKeys.map(this.mapColumn, this);
   }
 
+  get visualColumns(): TColumn[] {
+    return this.visualColumnKeys.map(this.mapColumn, this);
+  }
+
   get columnsOrder(): number[] {
     const stored = this.readRefs(COLUMN_ORDER_KEY);
     if (stored.length === 0) {
@@ -124,6 +141,8 @@ export class GridViewAction<
       rowKeys: computed,
       columns: computed,
       columnKeys: computed,
+      visualColumnKeys: computed,
+      visualColumns: computed,
     });
   }