Backmerge: #6084 - system doesnt allow select ambiguous monomers from the library except r while modifying nucleotides from sequence in rna builder

demo/package.json

@@ -21,6 +21,7 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --passWithNoTests --watchAll=false",
+    "test:types": "tsc --noEmit",
     "eject": "react-scripts eject",
     "serve": "serve -s build"
   },

example-ssr/package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "next dev -p 5173",
     "build": "next build",
+    "test:types": "tsc --noEmit",
     "start": "next start",
     "lint": "next lint"
   },

ketcher-autotests/package.json

@@ -11,6 +11,7 @@
     "test:trace": "npx playwright test --trace on",
     "check:code": "npm run check:types && npm run check:lint",
     "check:types": "tsc --noEmit",
+    "test:types": "tsc --noEmit",
     "check:lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "prettier:write": "prettier --write \"./**/*.{js,ts}\" ",

package.json

@@ -15,7 +15,7 @@
   "scripts": {
     "postinstall": "husky install",
     "precommit": "lint-staged --allow-empty && npm run prettier:write --workspaces --if-present",
-    "prepush": "npm run test && npm run check:autotests",
+    "prepush": "npm run test && npm run test:types",
     "build": "npm run build:packages && npm run build:example",
     "build:example:standalone": "npm run build:standalone -w example",
     "build:example:remote": "npm run build:remote -w example",
@@ -27,6 +27,7 @@
     "build:example": "npm run build -w example",
     "build:demo": "npm run build:packages && npm run build -w demo",
     "test": "npm run test --workspace=packages/ketcher-core --workspace=packages/ketcher-react --workspace=packages/ketcher-standalone --workspace=packages/ketcher-macromolecules",
+    "test:types": "npm run test:types --workspaces",
     "check:autotests": "cd ketcher-autotests && npm run check:code",
     "serve:remote": "cd example && npm run serve:remote",
     "serve:standalone": "cd example && npm run serve:standalone",

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

@@ -3,6 +3,7 @@ import { Editor, EditorType } from 'application/editor/editor.types';
 import {
   editorEvents,
   hotkeysConfiguration,
+  IEditorEvents,
   renderersEvents,
   resetEditorEvents,
 } from 'application/editor/editorEvents';
@@ -78,8 +79,9 @@ let persistentMonomersLibraryParsedJson: IKetMacromoleculesContent | null =
   null;
 
 let editor;
+
 export class CoreEditor {
-  public events;
+  public events: IEditorEvents;
 
   public _type: EditorType;
   public renderersContainer: RenderersManager;
@@ -96,14 +98,15 @@ export class CoreEditor {
   public zoomTool: ZoomTool;
   // private lastEvent: Event | undefined;
   private tool?: Tool | BaseTool | undefined;
+
   public get selectedTool(): Tool | BaseTool | undefined {
     return this.tool;
   }
 
   public mode: BaseMode;
   public sequenceTypeEnterMode = SequenceType.RNA;
   private micromoleculesEditor: Editor;
-  private hotKeyEventHandler: (event: unknown) => void = () => {};
+  private hotKeyEventHandler: (event: KeyboardEvent) => void = () => {};
   private copyEventHandler: (event: ClipboardEvent) => void = () => {};
   private pasteEventHandler: (event: ClipboardEvent) => void = () => {};
   private keydownEventHandler: (event: KeyboardEvent) => void = () => {};
@@ -135,6 +138,7 @@ export class CoreEditor {
     this.domEventSetup();
     this.setupContextMenuEvents();
     this.setupKeyboardEvents();
+    this.setupHotKeysEvents();
     this.setupCopyPasteEvent();
     this.canvasOffset = this.canvas.getBoundingClientRect();
     this.zoomTool = ZoomTool.initInstance(this.drawingEntitiesManager);
@@ -259,7 +263,8 @@ export class CoreEditor {
       ) as IKetMonomerGroupTemplate[];
   }
 
-  private handleHotKeyEvents(event) {
+  private handleHotKeyEvents(event: KeyboardEvent) {
+    if (!(event.target instanceof HTMLElement)) return;
     const keySettings = hotkeysConfiguration;
     const hotKeys = initHotKeys(keySettings);
     const shortcutKey = keyNorm.lookup(hotKeys, event);
@@ -273,9 +278,9 @@ export class CoreEditor {
   }
 
   private setupKeyboardEvents() {
-    this.setupHotKeysEvents();
     this.keydownEventHandler = async (event: KeyboardEvent) => {
-      await this.mode.onKeyDown(event);
+      this.events.keyDown.dispatch(event);
+      if (!event.cancelBubble) await this.mode.onKeyDown(event);
     };
 
     document.addEventListener('keydown', this.keydownEventHandler);
@@ -310,27 +315,27 @@ export class CoreEditor {
         event.clientY <= canvasBoundingClientRect.bottom;
 
       if (eventData instanceof BaseSequenceItemRenderer) {
-        this.events.rightClickSequence.dispatch(
+        this.events.rightClickSequence.dispatch([
           event,
           SequenceRenderer.selections,
-        );
+        ]);
       } else if (
         eventData instanceof FlexModePolymerBondRenderer ||
         (eventData instanceof SnakeModePolymerBondRenderer &&
           !(eventData.polymerBond instanceof HydrogenBond))
       ) {
-        this.events.rightClickPolymerBond.dispatch(event, eventData);
+        this.events.rightClickPolymerBond.dispatch([event, eventData]);
       } else if (
         eventData instanceof BaseMonomerRenderer &&
         eventData.monomer.selected
       ) {
-        this.events.rightClickSelectedMonomers.dispatch(event);
-        this.events.rightClickSelectedMonomers.dispatch(
+        this.events.rightClickSelectedMonomers.dispatch([event]);
+        this.events.rightClickSelectedMonomers.dispatch([
           event,
           this.drawingEntitiesManager.selectedEntities
             .filter(([, drawingEntity]) => drawingEntity instanceof BaseMonomer)
             .map(([, drawingEntity]) => drawingEntity as BaseMonomer),
-        );
+        ]);
       } else if (isClickOnCanvas) {
         this.events.rightClickCanvas.dispatch(event);
       }
@@ -342,7 +347,7 @@ export class CoreEditor {
   private subscribeEvents() {
     this.events.selectMonomer.add((monomer) => this.onSelectMonomer(monomer));
     this.events.selectPreset.add((preset) => this.onSelectRNAPreset(preset));
-    this.events.selectTool.add((tool, options) =>
+    this.events.selectTool.add(([tool, options]) =>
       this.onSelectTool(tool, options),
     );
     this.events.createBondViaModal.add((payload) => this.onCreateBond(payload));

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

@@ -5,7 +5,60 @@ import ZoomTool from 'application/editor/tools/Zoom';
 import { SequenceType } from 'domain/entities/monomer-chains/types';
 import { ToolName } from 'application/editor/tools/types';
 
-export let editorEvents;
+export interface IEditorEvents {
+  selectMonomer: Subscription;
+  selectPreset: Subscription;
+  selectTool: Subscription;
+  createBondViaModal: Subscription;
+  cancelBondCreationViaModal: Subscription;
+  selectMode: Subscription;
+  layoutModeChange: Subscription;
+  selectHistory: Subscription;
+  error: Subscription;
+  openErrorModal: Subscription;
+  openMonomerConnectionModal: Subscription;
+  mouseOverPolymerBond: Subscription;
+  mouseLeavePolymerBond: Subscription;
+  mouseOnMovePolymerBond: Subscription;
+  mouseOverMonomer: Subscription;
+  mouseOnMoveMonomer: Subscription;
+  mouseLeaveMonomer: Subscription;
+  mouseOverAttachmentPoint: Subscription;
+  mouseLeaveAttachmentPoint: Subscription;
+  mouseUpAttachmentPoint: Subscription;
+  mouseDownAttachmentPoint: Subscription;
+  mouseOverDrawingEntity: Subscription;
+  mouseLeaveDrawingEntity: Subscription;
+  mouseUpMonomer: Subscription;
+  rightClickSequence: Subscription;
+  rightClickCanvas: Subscription;
+  rightClickPolymerBond: Subscription;
+  rightClickSelectedMonomers: Subscription;
+  keyDown: Subscription;
+  editSequence: Subscription;
+  startNewSequence: Subscription;
+  turnOnSequenceEditInRNABuilderMode: Subscription;
+  turnOffSequenceEditInRNABuilderMode: Subscription;
+  modifySequenceInRnaBuilder: Subscription;
+  mouseOverSequenceItem: Subscription;
+  mouseOnMoveSequenceItem: Subscription;
+  mouseLeaveSequenceItem: Subscription;
+  changeSequenceTypeEnterMode: Subscription;
+  toggleSequenceEditMode: Subscription;
+  toggleSequenceEditInRNABuilderMode: Subscription;
+  clickOnSequenceItem: Subscription;
+  mousedownBetweenSequenceItems: Subscription;
+  mouseDownOnSequenceItem: Subscription;
+  doubleClickOnSequenceItem: Subscription;
+  openConfirmationDialog: Subscription;
+  mouseUpAtom: Subscription;
+  updateMonomersLibrary: Subscription;
+  createAntisenseChain: Subscription;
+  copySelectedStructure: Subscription;
+  deleteSelectedStructure: Subscription;
+}
+
+export let editorEvents: IEditorEvents;
 
 export function resetEditorEvents() {
   editorEvents = {
@@ -37,6 +90,7 @@ export function resetEditorEvents() {
     rightClickCanvas: new Subscription(),
     rightClickPolymerBond: new Subscription(),
     rightClickSelectedMonomers: new Subscription(),
+    keyDown: new Subscription(),
     editSequence: new Subscription(),
     startNewSequence: new Subscription(),
     turnOnSequenceEditInRNABuilderMode: new Subscription(),
@@ -119,7 +173,7 @@ export const hotkeysConfiguration = {
   exit: {
     shortcut: ['Shift+Tab', 'Escape'],
     handler: (editor: CoreEditor) => {
-      editor.events.selectTool.dispatch(ToolName.selectRectangle);
+      editor.events.selectTool.dispatch([ToolName.selectRectangle]);
     },
   },
   undo: {
@@ -139,15 +193,15 @@ export const hotkeysConfiguration = {
     handler: (editor: CoreEditor) => {
       // TODO create an ability to stop event propagation from mode event handlers to keyboard shortcuts handlers
       if (editor.isSequenceEditMode) return;
-      editor.events.selectTool.dispatch(ToolName.erase);
-      editor.events.selectTool.dispatch(ToolName.selectRectangle);
+      editor.events.selectTool.dispatch([ToolName.erase]);
+      editor.events.selectTool.dispatch([ToolName.selectRectangle]);
     },
   },
   clear: {
     shortcut: ['Mod+Delete', 'Mod+Backspace'],
     handler: (editor: CoreEditor) => {
-      editor.events.selectTool.dispatch(ToolName.clear);
-      editor.events.selectTool.dispatch(ToolName.selectRectangle);
+      editor.events.selectTool.dispatch([ToolName.clear]);
+      editor.events.selectTool.dispatch([ToolName.selectRectangle]);
     },
   },
   'zoom-plus': {
@@ -179,7 +233,7 @@ export const hotkeysConfiguration = {
   hand: {
     shortcut: 'Mod+Alt+h',
     handler: (editor: CoreEditor) => {
-      editor.events.selectTool.dispatch(ToolName.hand);
+      editor.events.selectTool.dispatch([ToolName.hand]);
     },
   },
 };

packages/ketcher-core/src/application/editor/modes/BaseMode.ts

@@ -64,7 +64,7 @@ export abstract class BaseMode {
     );
 
     if (needRemoveSelection) {
-      editor.events.selectTool.dispatch('select-rectangle');
+      editor.events.selectTool.dispatch(['select-rectangle']);
     }
 
     return command;

packages/ketcher-macromolecules/src/Editor.tsx

@@ -80,7 +80,7 @@ import useSetRnaPresets from './hooks/useSetRnaPresets';
 import { Loader } from 'components/Loader';
 import { FullscreenButton } from 'components/FullscreenButton';
 import { LayoutModeButton } from 'components/LayoutModeButton';
-import { useContextMenu } from 'react-contexify';
+import { TriggerEvent, useContextMenu } from 'react-contexify';
 import { CONTEXT_MENU_ID } from 'components/contextMenu/types';
 import { SequenceItemContextMenu } from 'components/contextMenu/SequenceItemContextMenu/SequenceItemContextMenu';
 import { Preview } from 'components/preview/Preview';
@@ -178,7 +178,7 @@ function Editor({
   useSetRnaPresets();
 
   useEffect(() => {
-    editor?.events.rightClickSequence.add((event, selections) => {
+    editor?.events.rightClickSequence.add(([event, selections]) => {
       setSelections(selections);
       showSequenceContextMenu({
         event,
@@ -188,10 +188,10 @@ function Editor({
       });
     });
     editor?.events.rightClickPolymerBond.add(
-      (
-        event,
-        polymerBondRenderer: DeprecatedFlexModeOrSnakeModePolymerBondRenderer,
-      ): void => {
+      ([event, polymerBondRenderer]: [
+        TriggerEvent,
+        DeprecatedFlexModeOrSnakeModePolymerBondRenderer,
+      ]): void => {
         showPolymerBondContextMenu({
           event,
           props: {
@@ -201,7 +201,7 @@ function Editor({
       },
     );
     editor?.events.rightClickSelectedMonomers.add(
-      (event, selectedMonomers: BaseMonomer[]) => {
+      ([event, selectedMonomers]: [TriggerEvent, BaseMonomer[]]) => {
         setSelectedMonomers(selectedMonomers);
         showSelectedMonomersContextMenu({
           event,

packages/ketcher-macromolecules/src/EditorEvents.tsx

@@ -69,7 +69,7 @@ export const EditorEvents = () => {
   }, [editor]);
 
   useEffect(() => {
-    const handler = (toolName: string) => {
+    const handler = ([toolName]: [string]) => {
       if (toolName !== activeTool) {
         dispatch(selectTool(toolName));
       }
@@ -86,7 +86,7 @@ export const EditorEvents = () => {
       );
 
       dispatch(selectTool('select-rectangle'));
-      editor.events.selectTool.dispatch('select-rectangle');
+      editor.events.selectTool.dispatch(['select-rectangle']);
       editor.events.openMonomerConnectionModal.add(
         (additionalProps: MonomerConnectionOnlyProps) =>
           dispatch(
@@ -125,7 +125,7 @@ export const EditorEvents = () => {
   );
 
   useEffect(() => {
-    const handler = (toolName: string) => {
+    const handler = ([toolName]: [string]) => {
       if (toolName !== activeTool) {
         dispatch(selectTool(toolName));
       }
@@ -142,7 +142,7 @@ export const EditorEvents = () => {
       );
 
       dispatch(selectTool('select-rectangle'));
-      editor.events.selectTool.dispatch('select-rectangle');
+      editor.events.selectTool.dispatch(['select-rectangle']);
       editor.events.openMonomerConnectionModal.add(
         (additionalProps: MonomerConnectionOnlyProps) =>
           dispatch(

packages/ketcher-macromolecules/src/components/LeftMenuComponent/LeftMenuComponent.tsx

@@ -33,7 +33,7 @@ export function LeftMenuComponent() {
   const activeMenuItems = [activeTool];
 
   const menuItemChanged = (name) => {
-    editor.events.selectTool.dispatch(name, { toolName: name });
+    editor.events.selectTool.dispatch([name, { toolName: name }]);
   };
 
   return (

packages/ketcher-macromolecules/src/components/TopMenuComponent/TopMenuComponent.tsx

@@ -46,9 +46,9 @@ export function TopMenuComponent() {
     } else if (name === 'undo' || name === 'redo') {
       editor.events.selectHistory.dispatch(name);
     } else if (name === 'clear') {
-      editor.events.selectTool.dispatch(name);
+      editor.events.selectTool.dispatch([name]);
       dispatch(selectTool('select-rectangle'));
-      editor.events.selectTool.dispatch('select-rectangle');
+      editor.events.selectTool.dispatch(['select-rectangle']);
       if (isSequenceEditInRNABuilderMode)
         resetRnaBuilderAfterSequenceUpdate(dispatch, editor);
     }

packages/ketcher-macromolecules/src/components/contextMenu/RNAContextMenu.tsx

@@ -8,9 +8,10 @@ import { createPortal } from 'react-dom';
 import { KETCHER_MACROMOLECULES_ROOT_NODE_SELECTOR } from 'ketcher-react';
 import { selectIsSequenceEditInRNABuilderMode } from 'state/common';
 import { ContextMenu } from 'components/contextMenu/ContextMenu';
+import { LIBRARY_TAB_INDEX } from '../../constants';
 
 export const RNAContextMenu = () => {
-  const RNA_TAB_INDEX = 2;
+  const RNA_TAB_INDEX = LIBRARY_TAB_INDEX.RNA;
   const dispatch = useAppDispatch();
   const activePresetForContextMenu = useAppSelector(
     selectActivePresetForContextMenu,