#4501 - Macro: The system allows you to paste on canvas while modifyi…

…ng nucleotides in the RNA builder
epam · May 20, 2024 · 12e8732 · 12e8732
1 parent 25a2b64
commit 12e8732
Show file tree

Hide file tree

Showing 21 changed files with 119 additions and 130 deletions.
diff --git a/packages/ketcher-core/src/application/editor/Editor.ts b/packages/ketcher-core/src/application/editor/Editor.ts
@@ -339,12 +339,19 @@ export class CoreEditor {
   }
 
   public get isSequenceEditMode() {
-    return this.mode instanceof SequenceMode && this.mode.isEditMode;
+    return this?.mode instanceof SequenceMode && this?.mode.isEditMode;
   }
 
   public get isSequenceEditInRNABuilderMode() {
     return (
-      this.mode instanceof SequenceMode && this.mode.isEditInRNABuilderMode
+      this?.mode instanceof SequenceMode && this?.mode.isEditInRNABuilderMode
+    );
+  }
+
+  public get isSequenceAnyEditMode() {
+    return (
+      this?.mode instanceof SequenceMode &&
+      (this?.mode.isEditMode || this?.mode.isEditInRNABuilderMode)
     );
   }
 

diff --git a/packages/ketcher-core/src/application/editor/modes/BaseMode.ts b/packages/ketcher-core/src/application/editor/modes/BaseMode.ts
@@ -141,8 +141,12 @@ export abstract class BaseMode {
   async onPaste(event: ClipboardEvent) {
     if (!this.checkIfTargetIsInput(event)) {
       if (isClipboardAPIAvailable()) {
-        if (this._pasteIsInProgress) return;
+        const isSequenceEditInRNABuilderMode =
+          CoreEditor.provideEditorInstance().isSequenceEditInRNABuilderMode;
+
+        if (isSequenceEditInRNABuilderMode || this._pasteIsInProgress) return;
         this._pasteIsInProgress = true;
+
         const clipboardData = await navigator.clipboard.read();
         this.pasteFromClipboard(clipboardData).finally(() => {
           this._pasteIsInProgress = false;

diff --git a/packages/ketcher-core/src/application/editor/tools/SelectRectangle.ts b/packages/ketcher-core/src/application/editor/tools/SelectRectangle.ts
@@ -137,14 +137,7 @@ class SelectRectangle implements BaseTool {
   }
 
   mousedown(event) {
-    const editor = CoreEditor.provideEditorInstance();
-
-    if (
-      editor.mode instanceof SequenceMode &&
-      (editor.mode.isEditMode || editor.mode.isEditInRNABuilderMode)
-    ) {
-      return;
-    }
+    if (CoreEditor.provideEditorInstance().isSequenceAnyEditMode) return;
 
     const renderer = event.target.__data__;
     this.mousePositionAfterMove = this.editor.lastCursorPositionOfCanvas;

diff --git a/packages/ketcher-core/src/application/ketcher.ts b/packages/ketcher-core/src/application/ketcher.ts
@@ -18,12 +18,7 @@ import { saveAs } from 'file-saver';
 import { FormatterFactory, SupportedFormat } from './formatters';
 import { GenerateImageOptions, StructService } from 'domain/services';
 
-import {
-  CoreEditor,
-  Editor,
-  defaultBondThickness,
-  SequenceMode,
-} from './editor';
+import { CoreEditor, Editor, defaultBondThickness } from './editor';
 import { Indigo } from 'application/indigo';
 import { KetSerializer, MolfileFormat } from 'domain/serializers';
 import { SGroup, Struct } from 'domain/entities';
@@ -351,11 +346,7 @@ export class Ketcher {
   }
 
   async setMolecule(structStr: string): Promise<void | undefined> {
-    const editor = CoreEditor.provideEditorInstance();
-    if (
-      editor?.mode instanceof SequenceMode &&
-      editor?.mode.isEditInRNABuilderMode
-    )
+    if (CoreEditor.provideEditorInstance()?.isSequenceEditInRNABuilderMode)
       return;
 
     runAsyncAction<void>(async () => {
@@ -380,11 +371,7 @@ export class Ketcher {
   }
 
   async addFragment(structStr: string): Promise<void | undefined> {
-    const editor = CoreEditor.provideEditorInstance();
-    if (
-      editor?.mode instanceof SequenceMode &&
-      editor?.mode.isEditInRNABuilderMode
-    )
+    if (CoreEditor.provideEditorInstance()?.isSequenceEditInRNABuilderMode)
       return;
 
     runAsyncAction<void>(async () => {

diff --git a/packages/ketcher-core/src/application/render/renderers/sequence/BaseSequenceItemRenderer.ts b/packages/ketcher-core/src/application/render/renderers/sequence/BaseSequenceItemRenderer.ts
@@ -4,7 +4,6 @@ import { SubChainNode } from 'domain/entities/monomer-chains/types';
 import { BaseSequenceRenderer } from 'application/render/renderers/sequence/BaseSequenceRenderer';
 import { BaseSubChain } from 'domain/entities/monomer-chains/BaseSubChain';
 import { CoreEditor } from 'application/editor/internal';
-import { SequenceMode } from 'application/editor/modes';
 import { EmptySequenceNode } from 'domain/entities/EmptySequenceNode';
 import { editorEvents } from 'application/editor/editorEvents';
 import assert from 'assert';
@@ -74,17 +73,11 @@ export abstract class BaseSequenceItemRenderer extends BaseSequenceRenderer {
   }
 
   protected get isSequenceEditModeTurnedOn() {
-    const editor = CoreEditor.provideEditorInstance();
-
-    return editor.mode instanceof SequenceMode && editor.mode.isEditMode;
+    return CoreEditor.provideEditorInstance().isSequenceEditMode;
   }
 
   protected get isSequenceEditInRnaBuilderModeTurnedOn() {
-    const editor = CoreEditor.provideEditorInstance();
-
-    return (
-      editor.mode instanceof SequenceMode && editor.mode.isEditInRNABuilderMode
-    );
+    return CoreEditor.provideEditorInstance().isSequenceEditInRNABuilderMode;
   }
 
   private appendRootElement() {

diff --git a/packages/ketcher-core/src/application/render/renderers/sequence/SequenceRenderer.ts b/packages/ketcher-core/src/application/render/renderers/sequence/SequenceRenderer.ts
@@ -25,7 +25,6 @@ import { Chain } from 'domain/entities/monomer-chains/Chain';
 import { EmptySubChain } from 'domain/entities/monomer-chains/EmptySubChain';
 import { SubChainNode } from 'domain/entities/monomer-chains/types';
 import { CoreEditor } from 'application/editor/internal';
-import { SequenceMode } from 'application/editor/modes';
 import { RestoreSequenceCaretPositionOperation } from 'application/editor/operations/modes';
 import assert from 'assert';
 import { BaseSubChain } from 'domain/entities/monomer-chains/BaseSubChain';
@@ -80,9 +79,7 @@ export class SequenceRenderer {
 
     let currentMonomerIndexInChain = 0;
     let currentMonomerIndexOverall = 0;
-    const editor = CoreEditor.provideEditorInstance();
-    const isEditMode =
-      editor.mode instanceof SequenceMode && editor.mode.isEditMode;
+    const isEditMode = CoreEditor.provideEditorInstance().isSequenceEditMode;
 
     if (isEditMode) {
       chainsCollection.chains.forEach((chain) => {

diff --git a/packages/ketcher-macromolecules/src/Editor.tsx b/packages/ketcher-macromolecules/src/Editor.tsx
@@ -24,7 +24,6 @@ import {
   Nucleotide,
   Nucleoside,
   NodeSelection,
-  SequenceMode,
 } from 'ketcher-core';
 import { store } from 'state';
 import {
@@ -45,6 +44,7 @@ import {
   destroyEditor,
   selectEditor,
   selectEditorActiveTool,
+  selectIsSequenceEditInRNABuilderMode,
   selectTool,
   showPreview,
 } from 'state/common';
@@ -367,7 +367,9 @@ function Editor({ theme, togglerComponent }: EditorProps) {
         </Layout.Main>
 
         <Layout.Right hide={isMonomerLibraryHidden}>
-          <MonomerLibrary />
+          <MonomerLibrary
+            isSequenceEditInRNABuilderMode={isSequenceEditInRNABuilderMode}
+          />
         </Layout.Right>
       </Layout>
       <MonomerLibraryToggle
@@ -402,9 +404,11 @@ function MenuComponent() {
   const dispatch = useAppDispatch();
   const activeTool = useAppSelector(selectEditorActiveTool);
   const editor = useAppSelector(selectEditor);
+  const isSequenceEditInRNABuilderMode = useAppSelector(
+    selectIsSequenceEditInRNABuilderMode,
+  );
   const activeMenuItems = [activeTool];
-  const isSequenceEditInRNABuilderMode = useSequenceEditInRNABuilderMode();
-  const isDisabled = isSequenceEditInRNABuilderMode;
+  const isDisabled = !!isSequenceEditInRNABuilderMode;
 
   const menuItemChanged = (name) => {
     if (modalComponentList[name]) {
@@ -427,12 +431,8 @@ function MenuComponent() {
           if (name === 'clear') {
             dispatch(selectTool('select-rectangle'));
             editor.events.selectTool.dispatch('select-rectangle');
-            if (
-              editor.mode instanceof SequenceMode &&
-              editor.mode.isEditInRNABuilderMode
-            ) {
+            if (isSequenceEditInRNABuilderMode)
               resetRnaBuilderAfterSequenceUpdate(dispatch, editor);
-            }
           } else {
             dispatch(selectTool(name));
           }

diff --git a/packages/ketcher-macromolecules/src/components/LayoutModeButton/LayoutModeButton.tsx b/packages/ketcher-macromolecules/src/components/LayoutModeButton/LayoutModeButton.tsx
@@ -17,18 +17,19 @@
 import { useEffect, useState } from 'react';
 import { Menu } from 'components/menu';
 import { MenuContext } from '../../contexts';
+import { useAppSelector, useLayoutMode } from 'hooks';
 import {
-  useAppSelector,
-  useLayoutMode,
-  useSequenceEditInRNABuilderMode,
-} from 'hooks';
-import { selectEditor } from 'state/common';
+  selectEditor,
+  selectIsSequenceEditInRNABuilderMode,
+} from 'state/common';
 
 export const LayoutModeButton = () => {
   const [activeMode, setActiveMode] = useState('flex-layout-mode');
   const editor = useAppSelector(selectEditor);
   const layoutMode = useLayoutMode();
-  const isSequenceEditInRNABuilderMode = useSequenceEditInRNABuilderMode();
+  const isSequenceEditInRNABuilderMode = useAppSelector(
+    selectIsSequenceEditInRNABuilderMode,
+  );
 
   const menuContext = {
     isActive: (mode) => activeMode === mode,
@@ -51,7 +52,7 @@ export const LayoutModeButton = () => {
       <Menu.Submenu
         testId="layout-mode"
         vertical={true}
-        disabled={isSequenceEditInRNABuilderMode}
+        disabled={!!isSequenceEditInRNABuilderMode}
         needOpenByMenuItemClick={true}
       >
         <Menu.Item

diff --git a/packages/ketcher-macromolecules/src/components/SequenceTypeButton/SequenceTypeDropdown.tsx b/packages/ketcher-macromolecules/src/components/SequenceTypeButton/SequenceTypeDropdown.tsx
@@ -15,12 +15,11 @@
  ***************************************************************************/
 
 import { useEffect, useState } from 'react';
+import { useAppSelector, useLayoutMode } from 'hooks';
 import {
-  useAppSelector,
-  useLayoutMode,
-  useSequenceEditInRNABuilderMode,
-} from 'hooks';
-import { selectEditor } from 'state/common';
+  selectEditor,
+  selectIsSequenceEditInRNABuilderMode,
+} from 'state/common';
 import { SequenceType } from 'ketcher-core';
 import { StyledDropdown } from 'components/modal/save/Save.styles';
 import styled from '@emotion/styled';
@@ -42,9 +41,11 @@ export const SequenceTypeDropdown = () => {
   );
   const [isSequenceMode, setIsSequenceMode] = useState(false);
   const editor = useAppSelector(selectEditor);
+  const isSequenceEditInRNABuilderMode = useAppSelector(
+    selectIsSequenceEditInRNABuilderMode,
+  );
   const layoutMode = useLayoutMode();
-  const isSequenceEditInRNABuilderMode = useSequenceEditInRNABuilderMode();
-  const isDisabled = isSequenceEditInRNABuilderMode;
+  const isDisabled = !!isSequenceEditInRNABuilderMode;
 
   const dropdownOptions = [
     { id: SequenceType.RNA, label: 'RNA' },

diff --git a/packages/ketcher-macromolecules/src/components/contextMenu/RNAContextMenu.tsx b/packages/ketcher-macromolecules/src/components/contextMenu/RNAContextMenu.tsx
@@ -1,17 +1,14 @@
 import { Item, ItemParams, Separator } from 'react-contexify';
 import { openModal } from 'state/modal';
-import {
-  useAppDispatch,
-  useAppSelector,
-  useSequenceEditInRNABuilderMode,
-} from 'hooks';
+import { useAppDispatch, useAppSelector } from 'hooks';
 import { ReactElement } from 'react';
 import { CONTEXT_MENU_ID } from './types';
 import { selectCurrentTabIndex, setSelectedTabIndex } from 'state/library';
 import { selectActivePresetForContextMenu } from 'state/rna-builder';
 import { StyledMenu } from './styles';
 import { createPortal } from 'react-dom';
 import { KETCHER_MACROMOLECULES_ROOT_NODE_SELECTOR } from 'ketcher-react';
+import { selectIsSequenceEditInRNABuilderMode } from 'state/common';
 
 export const RNAContextMenu = () => {
   const RNA_TAB_INDEX = 2;
@@ -20,7 +17,9 @@ export const RNAContextMenu = () => {
     selectActivePresetForContextMenu,
   );
   const selectedTabIndex = useAppSelector(selectCurrentTabIndex);
-  const isSequenceEditInRNABuilderMode = useSequenceEditInRNABuilderMode();
+  const isSequenceEditInRNABuilderMode = useAppSelector(
+    selectIsSequenceEditInRNABuilderMode,
+  );
   const RNAMenus = [
     { name: 'duplicateandedit', title: 'Duplicate and Edit...' },
     { name: 'edit', title: 'Edit...', seperator: true },

diff --git a/...omolecules/src/components/contextMenu/SequenceItemContextMenu/SequenceItemContextMenu.tsx b/...omolecules/src/components/contextMenu/SequenceItemContextMenu/SequenceItemContextMenu.tsx
@@ -4,12 +4,11 @@ import { CONTEXT_MENU_ID } from '../types';
 import { StyledMenu } from '../styles';
 import { createPortal } from 'react-dom';
 import { KETCHER_MACROMOLECULES_ROOT_NODE_SELECTOR } from 'ketcher-react';
+import { useAppDispatch, useAppSelector } from 'hooks';
 import {
-  useAppDispatch,
-  useAppSelector,
-  useSequenceEditInRNABuilderMode,
-} from 'hooks';
-import { selectEditor } from 'state/common';
+  selectEditor,
+  selectIsSequenceEditInRNABuilderMode,
+} from 'state/common';
 import { BaseSequenceItemRenderer, NodesSelection } from 'ketcher-core';
 import { setSelectedTabIndex } from 'state/library';
 import {
@@ -34,7 +33,9 @@ export const SequenceItemContextMenu = ({
   const editor = useAppSelector(selectEditor);
   const dispatch = useAppDispatch();
   const menuProps = generateSequenceContextMenuProps(selections);
-  const isSequenceEditInRNABuilderMode = useSequenceEditInRNABuilderMode();
+  const isSequenceEditInRNABuilderMode = useAppSelector(
+    selectIsSequenceEditInRNABuilderMode,
+  );
 
   const menuItems = [
     {

diff --git a/packages/ketcher-macromolecules/src/components/monomerLibrary/MonomerLibrary.tsx b/packages/ketcher-macromolecules/src/components/monomerLibrary/MonomerLibrary.tsx
@@ -16,12 +16,7 @@
 import React, { ChangeEvent, useRef } from 'react';
 import { Tabs } from 'components/shared/Tabs';
 import { tabsContent } from 'components/monomerLibrary/tabsContent';
-import {
-  useAppDispatch,
-  useAppSelector,
-  useLayoutMode,
-  useSequenceEditInRNABuilderMode,
-} from 'hooks';
+import { useAppDispatch, useAppSelector, useLayoutMode } from 'hooks';
 import { setSearchFilter } from 'state/library';
 import { Icon } from 'ketcher-react';
 import { IRnaPreset } from './RnaBuilder/types';
@@ -42,11 +37,15 @@ import {
 
 const COPY = '_Copy';
 
-const MonomerLibrary = React.memo(() => {
+type MonomerLibraryProps = {
+  isSequenceEditInRNABuilderMode?: boolean;
+};
+
+const MonomerLibrary = React.memo((props: MonomerLibraryProps) => {
   const presetsRef = useRef<IRnaPreset[]>([]);
   const dispatch = useAppDispatch();
   const layoutMode = useLayoutMode();
-  const isSequenceEditInRNABuilderMode = useSequenceEditInRNABuilderMode();
+  const isSequenceEditInRNABuilderMode = props?.isSequenceEditInRNABuilderMode;
   const isSequenceMode = layoutMode === 'sequence-layout-mode';
   const isDisabledTabs = isSequenceMode;
   const isDisabledTabsPanels =

diff --git a/...her-macromolecules/src/components/monomerLibrary/RnaBuilder/RnaAccordion/RnaAccordion.tsx b/...her-macromolecules/src/components/monomerLibrary/RnaBuilder/RnaAccordion/RnaAccordion.tsx
@@ -15,7 +15,7 @@
  ***************************************************************************/
 
 import { MonomerGroup } from 'components/monomerLibrary/monomerLibraryGroup';
-import { useAppSelector, useSequenceEditInRNABuilderMode } from 'hooks';
+import { useAppSelector } from 'hooks';
 import { IconName } from 'ketcher-react';
 import { useEffect, useState } from 'react';
 import {
@@ -55,7 +55,10 @@ import {
 import { useDispatch } from 'react-redux';
 import { IRnaPreset } from '../types';
 import { MonomerItemType } from 'ketcher-core';
-import { selectEditor } from 'state/common';
+import {
+  selectEditor,
+  selectIsSequenceEditInRNABuilderMode,
+} from 'state/common';
 import { RnaPresetGroup } from 'components/monomerLibrary/RnaPresetGroup/RnaPresetGroup';
 
 interface IGroupsDataItem {
@@ -79,7 +82,9 @@ export const RnaAccordion = ({ libraryName, duplicatePreset, editPreset }) => {
   const isActivePresetNewAndEmpty = useAppSelector(
     selectIsActivePresetNewAndEmpty,
   );
-  const isSequenceEditInRNABuilderMode = useSequenceEditInRNABuilderMode();
+  const isSequenceEditInRNABuilderMode = useAppSelector(
+    selectIsSequenceEditInRNABuilderMode,
+  );
 
   const [expandedAccordion, setExpandedAccordion] =
     useState<RnaBuilderItem | null>(activeRnaBuilderItem);