#3221 - add shortcut shift+tab for switching selection mode

ketcher-autotests/tests/User-Interface/Hot-Keys/hotkeys.spec.ts

@@ -0,0 +1,37 @@
+/* eslint-disable no-magic-numbers */
+import { expect, test } from '@playwright/test';
+import {
+  waitForIndigoToLoad,
+  selectNestedTool,
+  SelectTool,
+  selectTool,
+  LeftPanelButton,
+  clickInTheMiddleOfTheScreen,
+} from '@utils';
+
+test.describe('Hot keys', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('');
+    await waitForIndigoToLoad(page);
+  });
+
+  test.afterEach(async ({ page }) => {
+    await expect(page).toHaveScreenshot();
+  });
+
+  test('select last chosen selected tool when user press ESC', async ({
+    page,
+  }) => {
+    await selectNestedTool(page, SelectTool.FRAGMENT_SELECTION);
+    await selectTool(LeftPanelButton.AddText, page);
+    await page.keyboard.press('Escape');
+    expect(page.getByTestId('select-fragment')).toBeTruthy();
+  });
+
+  test('Shift+Tab to switch selection tool', async ({ page }) => {
+    await clickInTheMiddleOfTheScreen(page);
+    await page.keyboard.press('Shift+Tab');
+    await page.keyboard.press('Shift+Tab');
+    expect(page.getByTestId('select-fragment')).toBeTruthy();
+  });
+});

packages/ketcher-react/src/script/ui/action/atoms.js

@@ -24,7 +24,7 @@ export const atomCuts = {
   S: 's',
   P: 'p',
   F: 'f',
-  Cl: 'Shift+c',
+  Cl: 'l',
   Br: 'b',
   I: 'i',
   A: 'a',

packages/ketcher-react/src/script/ui/action/tools.js

@@ -28,20 +28,20 @@ const toolActions = {
     action: { tool: 'hand' },
     hidden: (options) => isHidden(options, 'hand'),
   },
-  'select-lasso': {
-    title: 'Lasso Selection',
-    shortcut: 'Escape',
-    action: { tool: 'select', opts: 'lasso' },
-  },
   'select-rectangle': {
     title: 'Rectangle Selection',
-    shortcut: 'Escape',
+    shortcut: ['Shift+Tab', 'Escape'],
     action: { tool: 'select', opts: 'rectangle' },
     hidden: (options) => isHidden(options, 'select-rectangle'),
   },
+  'select-lasso': {
+    title: 'Lasso Selection',
+    shortcut: ['Shift+Tab', 'Escape'],
+    action: { tool: 'select', opts: 'lasso' },
+  },
   'select-fragment': {
     title: 'Fragment Selection',
-    shortcut: 'Escape',
+    shortcut: ['Shift+Tab', 'Escape'],
     action: { tool: 'select', opts: 'fragment' },
     hidden: (options) => isHidden(options, 'select-fragment'),
   },

packages/ketcher-react/src/script/ui/state/hotkeys.test.tsx

@@ -0,0 +1,69 @@
+import { screen, fireEvent, render as rtlRender } from '@testing-library/react';
+import { LeftToolbarContainer } from '../views/toolbars';
+import { Provider } from 'react-redux';
+import createStore from '../state';
+import { initKeydownListener } from './hotkeys';
+import { act } from 'react-dom/test-utils';
+
+jest.mock('react-intersection-observer', () => {
+  return {
+    observe: jest.fn(),
+    disconnect: jest.fn(),
+    useInView: jest.fn().mockReturnValue([]),
+  };
+});
+
+describe('Hot keys', () => {
+  it('should select last chosen selected tool when user press ESC', async () => {
+    renderWithMockStore(<LeftToolbarContainer />);
+    const text = screen.getByTestId('text');
+    // eslint-disable-next-line testing-library/no-unnecessary-act
+    act(() => {
+      fireEvent.click(text);
+      fireEvent.keyDown(text, {
+        keyCode: 27,
+      });
+    });
+    expect(screen.getByTestId('select-rectangle').className).toContain(
+      'selected',
+    );
+  });
+
+  it('Shift+Tab to switch selection tool', async () => {
+    renderWithMockStore(<LeftToolbarContainer />);
+    // eslint-disable-next-line testing-library/no-unnecessary-act
+    act(() => {
+      fireEvent.keyDown(document, {
+        keyCode: 9,
+        shiftKey: true,
+      });
+    });
+    expect(screen.getByTestId('select-lasso').className).toContain('selected');
+  });
+});
+
+function renderWithMockStore(component) {
+  const store = createStore({}, {}, () => null);
+  store.dispatch(initKeydownListener(document));
+  store.dispatch({
+    type: 'INIT',
+    editor: {
+      tool: jest.fn().mockReturnValue(true),
+      historySize: () => {
+        return { undo: [] };
+      },
+      selection: jest.fn(),
+      struct: () => {
+        return { atoms: { keys: () => new Set() } };
+      },
+      render: { ctab: {} },
+      zoom: jest.fn(),
+      _tool: { mode: '' },
+      rotateController: { isRotating: false },
+    },
+  });
+  return {
+    ...rtlRender(<Provider store={store}>{component}</Provider>),
+    store,
+  };
+}

packages/ketcher-react/src/script/ui/state/hotkeys.ts

@@ -176,9 +176,12 @@ function keyHandle(dispatch, getState, hotKeys, event) {
         });
       } else {
         if (newAction.tool === 'select') {
-          newAction = SettingsManager.getSettings().selectionTool;
+          if (key === 'Escape') {
+            newAction = SettingsManager.getSettings().selectionTool;
+          } else if (index === -1) {
+            newAction = {};
+          }
         }
-
         dispatch(onAction(newAction));
       }