Macro: #3713 - Hot keys for toolbar buttons are not implemented in Macromoleculas view

packages/ketcher-core/src/application/editor/Editor.ts

@@ -17,6 +17,7 @@ import ZoomTool from './tools/Zoom';
 import { Coordinates } from './shared/coordinates';
 import {
   editorEvents,
+  hotkeysConfiguration,
   renderersEvents,
   resetEditorEvents,
 } from 'application/editor/editorEvents';
@@ -26,6 +27,7 @@ import { MacromoleculesConverter } from 'application/editor/MacromoleculesConver
 import { BaseMonomer } from 'domain/entities/BaseMonomer';
 import { ketcherProvider } from 'application/utils';
 import { SnakeMode } from './modes/internal';
+import { initHotKeys, keyNorm } from '../../utilities/keynorm';
 
 interface ICoreEditorConstructorParams {
   theme;
@@ -51,6 +53,7 @@ export class CoreEditor {
   // private lastEvent: Event | undefined;
   private tool?: Tool | BaseTool;
   private micromoleculesEditor: Editor;
+  private hotKeyEventHandler: (event: unknown) => void = () => {};
 
   constructor({ theme, canvas }: ICoreEditorConstructorParams) {
     this.theme = theme;
@@ -61,6 +64,7 @@ export class CoreEditor {
     this.renderersContainer = new RenderersManager({ theme });
     this.drawingEntitiesManager = new DrawingEntitiesManager();
     this.domEventSetup();
+    this.setupHotKeysEvents();
     this.canvasOffset = this.canvas.getBoundingClientRect();
     this.zoomTool = ZoomTool.initInstance(this.drawingEntitiesManager);
     // eslint-disable-next-line @typescript-eslint/no-this-alias
@@ -74,6 +78,22 @@ export class CoreEditor {
     return editor;
   }
 
+  private handleHotKeyEvents(event) {
+    const keySettings = hotkeysConfiguration;
+    const hotKeys = initHotKeys(keySettings);
+    const shortcutKey = keyNorm.lookup(hotKeys, event);
+
+    if (keySettings[shortcutKey] && keySettings[shortcutKey].handler) {
+      keySettings[shortcutKey].handler(this);
+      event.preventDefault();
+    }
+  }
+
+  setupHotKeysEvents() {
+    this.hotKeyEventHandler = (event) => this.handleHotKeyEvents(event);
+    document.addEventListener('keydown', this.hotKeyEventHandler);
+  }
+
   private subscribeEvents() {
     this.events.selectMonomer.add((monomer) => this.onSelectMonomer(monomer));
     this.events.selectPreset.add((preset) => this.onSelectRNAPreset(preset));
@@ -104,7 +124,7 @@ export class CoreEditor {
     }
   }
 
-  private onSelectTool(tool: string) {
+  public onSelectTool(tool: string) {
     this.selectTool(tool);
   }
 
@@ -140,7 +160,7 @@ export class CoreEditor {
     this.renderersContainer.update(command);
   }
 
-  private onSelectHistory(name: HistoryOperationType) {
+  public onSelectHistory(name: HistoryOperationType) {
     const history = new EditorHistory(this);
     if (name === 'undo') {
       history.undo();
@@ -164,6 +184,7 @@ export class CoreEditor {
     for (const eventName in this.events) {
       this.events[eventName].handlers = [];
     }
+    document.removeEventListener('keydown', this.hotKeyEventHandler);
   }
 
   get trackedDomEvents() {

packages/ketcher-core/src/application/editor/editorEvents.ts

@@ -1,5 +1,7 @@
 import { Subscription } from 'subscription';
 import { ToolEventHandlerName } from 'application/editor/tools/Tool';
+import { CoreEditor } from 'application/editor/Editor';
+import ZoomTool from 'application/editor/tools/Zoom';
 
 export let editorEvents;
 
@@ -44,3 +46,63 @@ export const renderersEvents: ToolEventHandlerName[] = [
   'mouseLeaveDrawingEntity',
   'mouseUpMonomer',
 ];
+
+export const hotkeysConfiguration = {
+  exit: {
+    shortcut: ['Shift+Tab', 'Escape'],
+    handler: (editor: CoreEditor) => {
+      editor.events.selectTool.dispatch('select-rectangle');
+    },
+  },
+  undo: {
+    shortcut: ['Ctrl+z', 'Meta+z'],
+    handler: (editor: CoreEditor) => {
+      editor.onSelectHistory('undo');
+    },
+  },
+  redo: {
+    shortcut: ['Mod+Ctrl+Z', 'Ctrl+Y', 'Mod+Meta+Z', 'Meta+y'],
+    handler: (editor: CoreEditor) => {
+      editor.onSelectHistory('redo');
+    },
+  },
+  erase: {
+    shortcut: ['Delete', 'Backspace'],
+    handler: (editor: CoreEditor) => {
+      editor.events.selectTool.dispatch('erase');
+    },
+  },
+  clear: {
+    shortcut: ['Ctrl+Del', 'Ctrl+Backspace', 'Meta+Del', 'Meta+Backspace'],
+    handler: (editor: CoreEditor) => {
+      editor.events.selectTool.dispatch('clear');
+      editor.events.selectTool.dispatch('select-rectangle');
+    },
+  },
+  'zoom-plus': {
+    shortcut: ['Ctrl+=', 'Meta+='],
+    handler: () => {
+      ZoomTool.instance.zoomIn();
+    },
+  },
+  'zoom-minus': {
+    shortcut: ['Ctrl+-', 'Meta+-'],
+    handler: () => {
+      ZoomTool.instance.zoomOut();
+    },
+  },
+  'zoom-reset': {
+    shortcut: ['Ctrl+0', 'Meta+0'],
+    handler: () => {
+      ZoomTool.instance.resetZoom();
+    },
+  },
+  'select-all': {
+    shortcut: ['Ctrl+a', 'Meta+a'],
+    handler: (editor: CoreEditor) => {
+      const modelChanges =
+        editor.drawingEntitiesManager.selectAllDrawingEntities();
+      editor.renderersContainer.update(modelChanges);
+    },
+  },
+};

packages/ketcher-core/src/application/editor/tools/Zoom.ts

@@ -259,16 +259,31 @@ class ZoomTool implements BaseTool {
     };
   }
 
+  private get zoomStep() {
+    return 0.1;
+  }
+
+  public zoomIn(zoomStep = this.zoomStep) {
+    this.zoom?.scaleTo(this.canvasWrapper, this.zoomLevel + zoomStep);
+  }
+
+  public zoomOut(zoomStep = this.zoomStep) {
+    this.zoom?.scaleTo(this.canvasWrapper, this.zoomLevel - zoomStep);
+  }
+
+  public resetZoom() {
+    this.zoom?.transform(this.canvasWrapper, new ZoomTransform(1, 0, 0));
+  }
+
   initMenuZoom() {
-    const zoomStep = 0.1;
     select('.zoom-in').on('click', () => {
-      this.zoom?.scaleTo(this.canvasWrapper, this.zoomLevel + zoomStep);
+      this.zoomIn();
     });
     select('.zoom-out').on('click', () => {
-      this.zoom?.scaleTo(this.canvasWrapper, this.zoomLevel - zoomStep);
+      this.zoomOut();
     });
     select('.zoom-reset').on('click', () => {
-      this.zoom?.transform(this.canvasWrapper, new ZoomTransform(1, 0, 0));
+      this.resetZoom();
     });
   }
 

packages/ketcher-core/src/domain/entities/DrawingEntitiesManager.ts

@@ -161,6 +161,20 @@ export class DrawingEntitiesManager {
     return command;
   }
 
+  public selectAllDrawingEntities() {
+    const command = new Command();
+
+    this.allEntities.forEach(([, drawingEntity]) => {
+      if (!drawingEntity.selected) {
+        drawingEntity.turnOnSelection();
+        const operation = new DrawingEntitySelectOperation(drawingEntity);
+        command.addOperation(operation);
+      }
+    });
+
+    return command;
+  }
+
   public moveDrawingEntityModelChange(
     drawingEntity: DrawingEntity,
     offset?: Vec2,

packages/ketcher-core/src/utilities/index.ts

@@ -21,3 +21,4 @@ export * from './b64toBlob';
 export * from './notifyRequestCompleted';
 export * from './KetcherLogger';
 export * from './SettingsManager';
+export * from './keynorm';

packages/ketcher-react/src/script/ui/data/convert/keynorm.js → packages/ketcher-core/src/utilities/keynorm.ts

@@ -86,19 +86,45 @@ export function isControlKey(event) {
   return mac ? event.metaKey : event.ctrlKey;
 }
 
+// TODO rename and unify after moving all hotkeys to core editor
+//  to handle all events in same way and to have same structure for all hotkey configs
 function keyNorm(obj) {
-  if (obj instanceof KeyboardEvent)
-    // eslint-disable-line no-undef
-    return normalizeKeyEvent(...arguments); // eslint-disable-line prefer-rest-params
+  if (obj instanceof KeyboardEvent) {
+    return normalizeKeyEvent(obj);
+  }
 
   return typeof obj === 'object' ? normalizeKeyMap(obj) : normalizeKeyName(obj);
 }
 
+function setHotKey(key, actName, hotKeys) {
+  if (Array.isArray(hotKeys[key])) hotKeys[key].push(actName);
+  else hotKeys[key] = [actName];
+}
+
+export function initHotKeys(actions) {
+  const hotKeys = {};
+  let act;
+
+  Object.keys(actions).forEach((actName) => {
+    act = actions[actName];
+    if (!act.shortcut) return;
+
+    if (Array.isArray(act.shortcut)) {
+      act.shortcut.forEach((key) => {
+        setHotKey(key, actName, hotKeys);
+      });
+    } else {
+      setHotKey(act.shortcut, actName, hotKeys);
+    }
+  });
+
+  return keyNorm(hotKeys);
+}
+
 function lookup(map, event) {
   let name = rusToEng(KN.keyName(event), event);
   if (name === 'Add') name = '+'; // numpad '+' and '-'
   if (name === 'Subtract') name = '-';
-
   const isChar = name.length === 1 && name !== ' ';
   let res = map[modifiers(name, event, !isChar)];
   let baseName;
@@ -111,4 +137,4 @@ function lookup(map, event) {
 
 keyNorm.lookup = lookup;
 
-export default keyNorm;
+export { keyNorm };

packages/ketcher-polymer-editor-react/src/Editor.tsx

@@ -142,7 +142,6 @@ function Editor({ theme, togglerComponent }: EditorProps) {
   const editor = useAppSelector(selectEditor);
   const activeTool = useAppSelector(selectEditorActiveTool);
   const isLoading = useLoading();
-  let keyboardEventListener;
   const [isMonomerLibraryHidden, setIsMonomerLibraryHidden] = useState(false);
   const monomers = useAppSelector(selectMonomers);
 
@@ -157,7 +156,6 @@ function Editor({ theme, togglerComponent }: EditorProps) {
       dispatch(destroyEditor(null));
       dispatch(loadMonomerLibrary([]));
       dispatch(clearFavorites());
-      document.removeEventListener('keydown', keyboardEventListener);
     };
   }, [dispatch]);
 
@@ -182,6 +180,12 @@ function Editor({ theme, togglerComponent }: EditorProps) {
   );
 
   useEffect(() => {
+    const handler = (toolName: string) => {
+      if (toolName !== activeTool) {
+        dispatch(selectTool(toolName));
+      }
+    };
+
     if (editor) {
       editor.events.error.add((errorText) => {
         dispatch(openErrorTooltip(errorText));
@@ -197,17 +201,13 @@ function Editor({ theme, togglerComponent }: EditorProps) {
             }),
           ),
       );
-
-      if (!keyboardEventListener) {
-        keyboardEventListener = (e: KeyboardEvent) => {
-          if (e.key === 'Escape') {
-            dispatch(selectTool('select-rectangle'));
-            editor.events.selectTool.dispatch('select-rectangle');
-          }
-        };
-        document.addEventListener('keydown', keyboardEventListener);
-      }
+      editor.events.selectTool.add(handler);
     }
+
+    return () => {
+      dispatch(selectTool(null));
+      editor?.events.selectTool.remove(handler);
+    };
   }, [editor]);
 
   const handleOpenPreview = useCallback((e) => {

packages/ketcher-react/src/script/ui/component/cliparea/cliparea.jsx

@@ -17,8 +17,11 @@
 import { Component, createRef } from 'react';
 import clsx from 'clsx';
 import classes from './cliparea.module.less';
-import { KetcherLogger, notifyRequestCompleted } from 'ketcher-core';
-import { isControlKey } from '../../data/convert/keynorm';
+import {
+  KetcherLogger,
+  notifyRequestCompleted,
+  isControlKey,
+} from 'ketcher-core';
 import { isClipboardAPIAvailable, notifyCopyCut } from './clipboardUtils';
 
 const ieCb = window.clipboardData;

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

@@ -28,12 +28,13 @@ import {
   MolSerializer,
   runAsyncAction,
   SettingsManager,
+  keyNorm,
+  initHotKeys,
 } from 'ketcher-core';
 import { debounce, isEqual } from 'lodash/fp';
 import { load, onAction, removeStructAction } from './shared';
 
 import actions from '../action';
-import keyNorm from '../data/convert/keynorm';
 import { isIE } from 'react-device-detect';
 import {
   selectAbbreviationLookupValue,
@@ -49,7 +50,7 @@ import { handleHotkeyOverItem } from './handleHotkeysOverItem';
 
 export function initKeydownListener(element) {
   return function (dispatch, getState) {
-    const hotKeys = initHotKeys();
+    const hotKeys = initHotKeys(actions);
     element.addEventListener('keydown', (event) =>
       keyHandle(dispatch, getState, hotKeys, event),
     );
@@ -230,31 +231,6 @@ function getHoveredItem(
   return Object.keys(hoveredItem).length ? hoveredItem : null;
 }
 
-function setHotKey(key, actName, hotKeys) {
-  if (Array.isArray(hotKeys[key])) hotKeys[key].push(actName);
-  else hotKeys[key] = [actName];
-}
-
-function initHotKeys() {
-  const hotKeys = {};
-  let act;
-
-  Object.keys(actions).forEach((actName) => {
-    act = actions[actName];
-    if (!act.shortcut) return;
-
-    if (Array.isArray(act.shortcut)) {
-      act.shortcut.forEach((key) => {
-        setHotKey(key, actName, hotKeys);
-      });
-    } else {
-      setHotKey(act.shortcut, actName, hotKeys);
-    }
-  });
-
-  return keyNorm(hotKeys);
-}
-
 function checkGroupOnTool(group, actionTool) {
   let index = group.indexOf(actionTool.tool);