From ba7268bb8f2ba0a177231519dbfdddbe6554334e Mon Sep 17 00:00:00 2001 From: Sychev Andrey <44414066+SychevAndrey@users.noreply.github.com> Date: Tue, 9 Jun 2026 12:44:54 +0200 Subject: [PATCH] dbeaver/pro#8684 feat: unlock autoscroll when dragging in data grid (#4362) * dbeaver/pro#8684 feat: unlock autoscroll when dragging in data grid * dbeaver/pro#8684 fix: don't select value panel and rows input in the toolbar on drag as a bonus enhance data grid context menu accessibility to improve user selection behavior when we start dragging from the menu button return selection only when the cell is edited * dbeaver/pro#8684 refactor: add selection background color for input in editing cell --------- Co-authored-by: Evgenia <139753579+EvgeniaBzzz@users.noreply.github.com> --- .../src/DataGrid/DataGridTable.css | 29 +++++++++++++++++-- .../src/DataGrid/Formatters/Menu/CellMenu.tsx | 4 ++- .../src/DataGrid/useGridDragging.ts | 3 ++ .../src/locales/de.ts | 1 + .../src/locales/en.ts | 1 + .../src/locales/fr.ts | 1 + .../src/locales/it.ts | 1 + .../src/locales/ru.ts | 1 + .../src/locales/vi.ts | 1 + .../src/locales/zh.ts | 1 + 10 files changed, 40 insertions(+), 3 deletions(-) diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridTable.css b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridTable.css index aa60e6e191..dc731acabc 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridTable.css +++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridTable.css @@ -6,6 +6,22 @@ * you may not use this file except in compliance with the License. */ @layer components { + body[data-grid-dragging] { + user-select: none; + -webkit-user-select: none; + + .ReactCodemirror, + [role='toolbar'] { + user-select: none; + -webkit-user-select: none; + } + + .data-grid__container { + user-select: text; + -webkit-user-select: text; + } + } + .theme-dark { --theme-add-status: #65974c; --theme-delete-status: #b55d68; @@ -31,8 +47,11 @@ --data-grid-selected-row-color: var(--theme-secondary) !important; outline: 0; overflow: auto; - user-select: none; - -webkit-user-select: none; + + & ::selection { + background: transparent; + color: inherit; + } & .rdg-cell-frozen { &:nth-last-child(1 of &) { @@ -51,6 +70,12 @@ & .rdg-cell-custom-deleted { background-color: var(--theme-delete-status) !important; } + + & .rdg-editor-container input::selection, + & .rdg-editor-container textarea::selection { + background-color: Highlight; + color: HighlightText; + } } .data-grid__container .data-grid__grid { diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/Menu/CellMenu.tsx b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/Menu/CellMenu.tsx index 4311a777bf..a0a684c452 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/Menu/CellMenu.tsx +++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/Menu/CellMenu.tsx @@ -8,7 +8,7 @@ import { observer } from 'mobx-react-lite'; import { useContext } from 'react'; -import { Icon, MenuItemElementStyles, s, SContext, type StyleRegistry, useS } from '@cloudbeaver/core-blocks'; +import { Icon, MenuItemElementStyles, s, SContext, type StyleRegistry, useS, useTranslate } from '@cloudbeaver/core-blocks'; import { useDataContextLink } from '@cloudbeaver/core-data-context'; import { EventContext, EventStopPropagationFlag } from '@cloudbeaver/core-events'; import { ContextMenu } from '@cloudbeaver/core-ui'; @@ -52,6 +52,7 @@ const registry: StyleRegistry = [ export const CellMenu = observer(function CellMenu({ model, actions, spreadsheetActions, resultIndex, cellKey, simple, onStateSwitch }) { const style = useS(classes); + const translate = useTranslate(); const menu = useMenu({ menu: MENU_DV_CONTEXT_MENU }); const cellContext = useContext(CellContext); @@ -83,6 +84,7 @@ export const CellMenu = observer(function CellMenu({ model, actions, spre onVisibleSwitch={onStateSwitch} > + {translate('data_grid_table_context_menu_aria_label')} diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/useGridDragging.ts b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/useGridDragging.ts index 9c4039c296..fcd59ab1dd 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/useGridDragging.ts +++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/useGridDragging.ts @@ -40,6 +40,7 @@ interface IDraggingCallbacks { } const THRESHOLD = 10; +const BODY_DRAGGING_ATTRIBUTE = 'data-grid-dragging'; function getDelta(startPosition: IMousePosition | null, currentPosition: IMousePosition | null) { if (!startPosition || !currentPosition) { @@ -105,6 +106,7 @@ export function useGridDragging(props: IDraggingCallbacks) { state.mouseDown = true; state.startMousePosition = { x: event.pageX, y: event.pageY }; state.startDraggingCell = { colIdx: position.colIdx, rowIdx: position.rowIdx }; + document.body.setAttribute(BODY_DRAGGING_ATTRIBUTE, ''); }, []); const onMouseMoveHandler = useCallback((event: React.MouseEvent) => { @@ -157,6 +159,7 @@ export function useGridDragging(props: IDraggingCallbacks) { const onMouseUpHandler = useCallback((event: React.MouseEvent | MouseEvent) => { state.mouseDown = false; state.startMousePosition = null; + document.body.removeAttribute(BODY_DRAGGING_ATTRIBUTE); if (!state.dragging || !state.startDraggingCell || !state.currentDraggingCell) { return; diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/locales/de.ts b/webapp/packages/plugin-data-spreadsheet-new/src/locales/de.ts index 19220c2fc3..2d88d49556 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/locales/de.ts +++ b/webapp/packages/plugin-data-spreadsheet-new/src/locales/de.ts @@ -23,6 +23,7 @@ export default [ ['data_grid_table_disable_all_orders', 'Alle deaktivieren'], ['data_grid_table_delete_filters_and_orders', 'Filter / Sortierung zurücksetzen'], ['data_grid_table_context_menu_filter_dialog_title', 'Wert bearbeiten'], + ['data_grid_table_context_menu_aria_label', 'Kontextmenü'], ['data_grid_table_index_column_tooltip', 'Wählen ganze Tabelle aus'], ['data_grid_table_readonly_connection_tooltip', 'Schreibgeschützte Verbindung'], ['data_grid_table_readonly_presentation_tooltip', 'Die aktive Darstellung unterstützt keine Datenbearbeitung'], diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/locales/en.ts b/webapp/packages/plugin-data-spreadsheet-new/src/locales/en.ts index 5e5c844ec2..e34ff68981 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/locales/en.ts +++ b/webapp/packages/plugin-data-spreadsheet-new/src/locales/en.ts @@ -29,6 +29,7 @@ export default [ ['data_grid_table_context_menu_filter_dialog_title', 'Edit value'], ['data_grid_table_context_menu_filter_clipboard_permission', 'Give access to clipboard'], ['data_grid_table_context_menu_save_value_error', 'Failed to save value'], + ['data_grid_table_context_menu_aria_label', 'Context menu'], ['data_grid_table_index_column_tooltip', 'Select whole table'], ['data_grid_table_readonly_connection_tooltip', 'Read-only connection'], ['data_grid_table_readonly_presentation_tooltip', 'Read-only: Active presentation does not support data editing'], diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/locales/fr.ts b/webapp/packages/plugin-data-spreadsheet-new/src/locales/fr.ts index def53d2109..7e6a4dcf28 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/locales/fr.ts +++ b/webapp/packages/plugin-data-spreadsheet-new/src/locales/fr.ts @@ -29,6 +29,7 @@ export default [ ['data_grid_table_context_menu_filter_dialog_title', 'Modifier la valeur'], ['data_grid_table_context_menu_filter_clipboard_permission', 'Donner accès au presse-papiers'], ['data_grid_table_context_menu_save_value_error', 'Échec de la sauvegarde de la valeur'], + ['data_grid_table_context_menu_aria_label', 'Menu contextuel'], ['data_grid_table_index_column_tooltip', 'Sélectionner toute la table'], ['data_grid_table_no_key_found_tooltip', "Aucune clé unique n'a été trouvée. La modification des données n'est pas possible."], ['data_grid_table_virtual_key_tooltip', 'Clé virtuelle'], diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/locales/it.ts b/webapp/packages/plugin-data-spreadsheet-new/src/locales/it.ts index c5da029667..4c90406dcc 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/locales/it.ts +++ b/webapp/packages/plugin-data-spreadsheet-new/src/locales/it.ts @@ -28,6 +28,7 @@ export default [ ['data_grid_table_context_menu_filter_dialog_title', 'Modifica valore'], ['data_grid_table_context_menu_filter_clipboard_permission', 'Dai accesso agli appunti'], ['data_grid_table_context_menu_save_value_error', 'Failed to save value'], + ['data_grid_table_context_menu_aria_label', 'Menu contestuale'], ['data_grid_table_index_column_tooltip', 'Seleziona tutta la tabella'], ['data_grid_table_readonly_connection_tooltip', 'Connessione in sola lettura'], ['data_grid_table_readonly_presentation_tooltip', 'La presentazione attiva non supporta la modifica dei dati'], diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/locales/ru.ts b/webapp/packages/plugin-data-spreadsheet-new/src/locales/ru.ts index 1983a22d52..1761e63419 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/locales/ru.ts +++ b/webapp/packages/plugin-data-spreadsheet-new/src/locales/ru.ts @@ -29,6 +29,7 @@ export default [ ['data_grid_table_context_menu_filter_dialog_title', 'Редактировать значение'], ['data_grid_table_context_menu_filter_clipboard_permission', 'Дать доступ к буферу обмена'], ['data_grid_table_context_menu_save_value_error', 'Не удалось сохранить значение'], + ['data_grid_table_context_menu_aria_label', 'Контекстное меню'], ['data_grid_table_index_column_tooltip', 'Выбрать всю таблицу'], ['data_grid_table_readonly_connection_tooltip', 'Подключение только для чтения'], ['data_grid_table_readonly_presentation_tooltip', 'Активное представление не поддерживает редактирование данных'], diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/locales/vi.ts b/webapp/packages/plugin-data-spreadsheet-new/src/locales/vi.ts index 76ec8aed19..10b38e3334 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/locales/vi.ts +++ b/webapp/packages/plugin-data-spreadsheet-new/src/locales/vi.ts @@ -29,6 +29,7 @@ export default [ ['data_grid_table_context_menu_filter_dialog_title', 'Chỉnh sửa giá trị'], ['data_grid_table_context_menu_filter_clipboard_permission', 'Cấp quyền truy cập vào clipboard'], ['data_grid_table_context_menu_save_value_error', 'Không thể lưu giá trị'], + ['data_grid_table_context_menu_aria_label', 'Menu ngữ cảnh'], ['data_grid_table_index_column_tooltip', 'Chọn toàn bộ bảng'], ['data_grid_table_readonly_connection_tooltip', 'Kết nối chỉ đọc'], ['data_grid_table_readonly_presentation_tooltip', 'Trình bày đang dùng không hỗ trợ chỉnh sửa dữ liệu'], diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/locales/zh.ts b/webapp/packages/plugin-data-spreadsheet-new/src/locales/zh.ts index b91108a097..d25de282d1 100644 --- a/webapp/packages/plugin-data-spreadsheet-new/src/locales/zh.ts +++ b/webapp/packages/plugin-data-spreadsheet-new/src/locales/zh.ts @@ -29,6 +29,7 @@ export default [ ['data_grid_table_context_menu_filter_dialog_title', '编辑值'], ['data_grid_table_context_menu_filter_clipboard_permission', '授予访问剪贴板的权限'], ['data_grid_table_context_menu_save_value_error', '保存失败'], + ['data_grid_table_context_menu_aria_label', '上下文菜单'], ['data_grid_table_index_column_tooltip', '选择整个表'], ['data_grid_table_no_key_found_tooltip', '未找到唯一键。无法修改数据。'], ['data_grid_table_virtual_key_tooltip', '虚拟键'],