#4374 - Macro: RNA builder should be highlighted in Edit mode. Canvas…

… should be disabled (#4435)

Co-authored-by: Roman Rodionov <roman_rodionov@epam.com>

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

@@ -16,7 +16,7 @@ export abstract class BaseMode {
     editor.mode.initialize();
   }
 
-  public initialize() {
+  public initialize(needRemoveSelection = true) {
     const command = new Command();
     const editor = CoreEditor.provideEditorInstance();
 
@@ -29,7 +29,9 @@ export abstract class BaseMode {
       ),
     );
 
-    editor.events.selectTool.dispatch('select-rectangle');
+    if (needRemoveSelection) {
+      editor.events.selectTool.dispatch('select-rectangle');
+    }
 
     return command;
   }

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

@@ -65,8 +65,8 @@ export class SequenceMode extends BaseMode {
     this._isEditInRNABuilderMode = isEditInRNABuilderMode;
   }
 
-  public initialize(needScroll = true) {
-    const command = super.initialize();
+  public initialize(needScroll = true, needRemoveSelection = true) {
+    const command = super.initialize(needRemoveSelection);
     const editor = CoreEditor.provideEditorInstance();
 
     editor.drawingEntitiesManager.clearCanvas();
@@ -121,13 +121,16 @@ export class SequenceMode extends BaseMode {
     const editor = CoreEditor.provideEditorInstance();
 
     this.isEditInRNABuilderMode = true;
+    this.initialize(false, false);
+
     editor.events.toggleSequenceEditInRNABuilderMode.dispatch(true);
   }
 
   public turnOffSequenceEditInRNABuilderMode() {
     const editor = CoreEditor.provideEditorInstance();
 
     this.isEditInRNABuilderMode = false;
+    this.initialize(false);
     editor.events.toggleSequenceEditInRNABuilderMode.dispatch(false);
   }
 

packages/ketcher-core/src/application/render/renderers/index.ts

@@ -6,3 +6,4 @@ export { RNABaseRenderer } from './RNABaseRenderer';
 export { BaseRenderer } from './BaseRenderer';
 export { BaseMonomerRenderer } from './BaseMonomerRenderer';
 export { PolymerBondRenderer } from './PolymerBondRenderer';
+export * from './sequence';

packages/ketcher-core/src/application/render/renderers/sequence/BaseSequenceItemRenderer.ts

@@ -73,12 +73,20 @@ export abstract class BaseSequenceItemRenderer extends BaseSequenceRenderer {
     return this.scaledMonomerPositionForSequence.add(new Vec2(4.5, 0, 0));
   }
 
-  private get isSequenceEditModeTurnedOn() {
+  protected get isSequenceEditModeTurnedOn() {
     const editor = CoreEditor.provideEditorInstance();
 
     return editor.mode instanceof SequenceMode && editor.mode.isEditMode;
   }
 
+  protected get isSequenceEditInRnaBuilderModeTurnedOn() {
+    const editor = CoreEditor.provideEditorInstance();
+
+    return (
+      editor.mode instanceof SequenceMode && editor.mode.isEditInRNABuilderMode
+    );
+  }
+
   private appendRootElement() {
     return this.canvas
       .append('g')
@@ -168,7 +176,7 @@ export abstract class BaseSequenceItemRenderer extends BaseSequenceRenderer {
       .attr('class', 'blinking');
   }
 
-  protected removeHover() {
+  protected redrawBackgroundElementColor() {
     this.backgroundElement?.attr(
       'fill',
       this.isSequenceEditModeTurnedOn ? '#FF7A001A' : 'transparent',
@@ -183,6 +191,10 @@ export abstract class BaseSequenceItemRenderer extends BaseSequenceRenderer {
       .attr('href', `#${CHAIN_START_ARROW_SYMBOL_ID}`);
   }
 
+  private drawGreyOverlay() {
+    this.rootElement?.attr('opacity', '0.2');
+  }
+
   show(): void {
     this.rootElement = this.appendRootElement();
     if (this.isBeginningOfChain && this.isSequenceEditModeTurnedOn) {
@@ -191,11 +203,8 @@ export abstract class BaseSequenceItemRenderer extends BaseSequenceRenderer {
     this.spacerElement = this.appendSpacerElement();
     this.backgroundElement = this.appendBackgroundElement();
 
-    if (this.isSequenceEditModeTurnedOn) {
-      if (this.isEditingSymbol) {
-        this.appendCaretElement();
-      }
-      this.drawSelection();
+    if (this.isSequenceEditModeTurnedOn && this.isEditingSymbol) {
+      this.appendCaretElement();
     }
 
     this.textElement = this.rootElement
@@ -204,15 +213,23 @@ export abstract class BaseSequenceItemRenderer extends BaseSequenceRenderer {
       .attr('font-family', 'Courier New')
       .attr('font-size', '20px')
       .attr('font-weight', '700')
-      .attr('fill', '#333333');
+      .attr(
+        'fill',
+        this.isSequenceEditInRnaBuilderModeTurnedOn ? '24545A' : '#333333',
+      );
 
     this.appendEvents();
     if (this.needDisplayCounter) {
       this.counterElement = this.appendCounterElement(this.rootElement);
     }
 
-    if (this.node.modified) {
-      this.drawModification();
+    this.drawSelection();
+
+    if (
+      this.isSequenceEditInRnaBuilderModeTurnedOn &&
+      !this.node.monomer.selected
+    ) {
+      this.drawGreyOverlay();
     }
   }
 
@@ -222,36 +239,40 @@ export abstract class BaseSequenceItemRenderer extends BaseSequenceRenderer {
     }
     if (this.node.monomer.selected) {
       this.appendSelection();
-      this.removeHover();
       this.raiseElement();
     } else {
       this.removeSelection();
-      if (this.node.modified) {
-        this.drawModification();
-      }
+    }
+
+    if (this.node.modified) {
+      this.drawModification();
     }
   }
 
   public appendSelection() {
-    if (this.selectionRectangle) {
+    this.selectionRectangle =
+      this.selectionRectangle ||
+      this.rootElement?.insert('rect', ':first-child');
+
+    this.selectionBorder = this.rootElement
+      ?.append('use')
+      .attr('href', this.monomerIndexInChain)
+      .attr('stroke', '#57FF8F')
+      .attr('pointer-events', 'none');
+
+    if (this.isSequenceEditInRnaBuilderModeTurnedOn) {
       this.selectionRectangle
-        .attr('x', this.scaledMonomerPositionForSequence.x - 4)
-        .attr('y', this.scaledMonomerPositionForSequence.y - 16)
-        .attr('width', 20)
-        .attr('height', 20);
+        ?.attr('fill', '#99D6DC')
+        .attr('x', -3)
+        .attr('y', -21)
+        .attr('width', 18)
+        .attr('height', 30)
+        .attr('rx', 3);
     } else {
-      this.selectionBorder = this.rootElement
-        ?.append('use')
-        .attr('href', this.monomerIndexInChain)
-        .attr('stroke', '#57FF8F')
-        .attr('pointer-events', 'none');
-
-      this.selectionRectangle = this.canvas
-        ?.insert('rect', ':first-child')
-        .attr('opacity', '0.7')
-        .attr('fill', '#57FF8F')
-        .attr('x', this.scaledMonomerPositionForSequence.x - 4)
-        .attr('y', this.scaledMonomerPositionForSequence.y - 16)
+      this.selectionRectangle
+        ?.attr('fill', '#57FF8F')
+        .attr('x', -4)
+        .attr('y', -16)
         .attr('width', 20)
         .attr('height', 20);
     }
@@ -265,8 +286,7 @@ export abstract class BaseSequenceItemRenderer extends BaseSequenceRenderer {
   }
 
   private raiseElement() {
-    this.selectionRectangle?.raise();
-    this.rootElement?.raise();
+    this.selectionRectangle?.lower();
   }
 
   public remove() {

packages/ketcher-core/src/application/render/renderers/sequence/NucleotideSequenceItemRenderer.ts

@@ -24,22 +24,37 @@ export class NucleotideSequenceItemRenderer extends BaseSequenceItemRenderer {
     }
 
     if (node.rnaBase.isModification) {
-      this.backgroundElement?.attr('fill', '#CAD3DD');
+      this.backgroundElement?.attr(
+        'fill',
+        this.node.monomer.selected
+          ? this.isSequenceEditInRnaBuilderModeTurnedOn
+            ? '#41A8B2'
+            : '#3ACA6A'
+          : this.isSequenceEditModeTurnedOn
+          ? '#ff7a004f'
+          : '#CAD3DD',
+      );
     }
 
     if (node.sugar.isModification) {
       this.backgroundElement
-        ?.attr('stroke', '#585858')
+        ?.attr(
+          'stroke',
+          this.isSequenceEditInRnaBuilderModeTurnedOn ? '#24545A' : '#585858',
+        )
         .attr('stroke-width', '1px');
     }
 
     if (node.phosphate?.isModification) {
       this.phosphateModificationCircleElement = this.rootElement
         ?.append('circle')
-        .attr('r', '4px')
-        .attr('fill', '#585858')
+        .attr('r', '3px')
+        .attr(
+          'fill',
+          this.isSequenceEditInRnaBuilderModeTurnedOn ? '#24545A' : '#585858',
+        )
         .attr('cx', '10')
-        .attr('cy', '-15');
+        .attr('cy', '-16');
     }
   }
 }

packages/ketcher-core/src/application/render/renderers/sequence/index.ts

@@ -0,0 +1,2 @@
+export * from './SequenceRenderer';
+export * from './BaseSequenceItemRenderer';

packages/ketcher-macromolecules/src/Editor.tsx

@@ -24,6 +24,7 @@ import {
   generateMenuShortcuts,
   Nucleotide,
   Nucleoside,
+  NodeSelection,
 } from 'ketcher-core';
 import monomersData from './data/monomers.sdf';
 
@@ -105,7 +106,6 @@ import { SequenceItemContextMenu } from 'components/contextMenu/SequenceItemCont
 import { SequenceStartArrow } from 'components/shared/monomerOnCanvas/SequenceStartArrow';
 import { Preview } from 'components/shared/Preview';
 import { SequenceTypeDropdown } from 'components/SequenceTypeButton';
-import { NodeSelection } from 'ketcher-core/dist/application/render/renderers/sequence/SequenceRenderer';
 
 const muiTheme = createTheme(muiOverrides);
 

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

@@ -1,6 +1,10 @@
 import { Item, ItemParams, Separator } from 'react-contexify';
 import { openModal } from 'state/modal';
-import { useAppDispatch, useAppSelector } from 'hooks';
+import {
+  useAppDispatch,
+  useAppSelector,
+  useSequenceEditInRNABuilderMode,
+} from 'hooks';
 import { ReactElement } from 'react';
 import { CONTEXT_MENU_ID } from './types';
 import { selectCurrentTabIndex, setSelectedTabIndex } from 'state/library';
@@ -16,6 +20,7 @@ export const RNAContextMenu = () => {
     selectActivePresetForContextMenu,
   );
   const selectedTabIndex = useAppSelector(selectCurrentTabIndex);
+  const isSequenceEditInRNABuilderMode = useSequenceEditInRNABuilderMode();
   const RNAMenus = [
     { name: 'duplicateandedit', title: 'Duplicate and Edit...' },
     { name: 'edit', title: 'Edit...', seperator: true },
@@ -78,7 +83,7 @@ export const RNAContextMenu = () => {
     KETCHER_MACROMOLECULES_ROOT_NODE_SELECTOR,
   );
 
-  return ketcherEditorRootElement
+  return ketcherEditorRootElement && !isSequenceEditInRNABuilderMode
     ? createPortal(
         <StyledMenu id={CONTEXT_MENU_ID.FOR_RNA}>
           {assembleMenuItems()}

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

@@ -4,9 +4,13 @@ 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';
-import { BaseSequenceItemRenderer } from 'ketcher-core/dist/application/render/renderers/sequence/BaseSequenceItemRenderer';
+import { BaseSequenceItemRenderer, NodesSelection } from 'ketcher-core';
 import { setSelectedTabIndex } from 'state/library';
 import {
   setSequenceSelection,
@@ -16,7 +20,6 @@ import {
   setActiveRnaBuilderItem,
   setIsSequenceFirstsOnlyNucleotidesSelected,
 } from 'state/rna-builder';
-import { NodesSelection } from 'ketcher-core/dist/application/render/renderers/sequence/SequenceRenderer';
 import { generateSequenceContextMenuProps } from 'components/contextMenu/SequenceItemContextMenu/helpers';
 
 type SequenceItemContextMenuType = {
@@ -31,6 +34,7 @@ export const SequenceItemContextMenu = ({
   const editor = useAppSelector(selectEditor);
   const dispatch = useAppDispatch();
   const menuProps = generateSequenceContextMenuProps(selections);
+  const isSequenceEditInRNABuilderMode = useSequenceEditInRNABuilderMode();
 
   const menuItems = [
     {
@@ -143,7 +147,7 @@ export const SequenceItemContextMenu = ({
     KETCHER_MACROMOLECULES_ROOT_NODE_SELECTOR,
   );
 
-  return ketcherEditorRootElement
+  return ketcherEditorRootElement && !isSequenceEditInRNABuilderMode
     ? createPortal(
         <StyledMenu id={CONTEXT_MENU_ID.FOR_SEQUENCE}>
           {assembleMenuItems()}

packages/ketcher-macromolecules/src/components/contextMenu/SequenceItemContextMenu/helpers.ts

@@ -2,11 +2,9 @@ import { flatten, get } from 'lodash';
 import {
   Nucleotide,
   LabeledNucleotideWithPositionInSequence,
-} from 'ketcher-core';
-import {
   NodeSelection,
   NodesSelection,
-} from 'ketcher-core/dist/application/render/renderers/sequence/SequenceRenderer';
+} from 'ketcher-core';
 
 const generateLabeledNucleotides = (
   selectionsFlatten: NodeSelection[],

packages/ketcher-macromolecules/src/components/modal/modalContainer/types.ts

@@ -1,4 +1,4 @@
-import { BaseMonomer } from 'ketcher-core/dist/domain/entities/BaseMonomer';
+import { BaseMonomer } from 'ketcher-core';
 
 export interface MonomerConnectionOnlyProps {
   firstMonomer?: BaseMonomer;

packages/ketcher-macromolecules/src/components/monomerLibrary/RnaBuilder/RnaEditor/RnaEditor.tsx

@@ -23,7 +23,11 @@ import {
   RnaEditorContainer,
   StyledHeader,
 } from './styles';
-import { useAppDispatch, useAppSelector } from 'hooks';
+import {
+  useAppDispatch,
+  useAppSelector,
+  useSequenceEditInRNABuilderMode,
+} from 'hooks';
 import {
   createNewPreset,
   RnaBuilderPresetsItem,
@@ -46,6 +50,7 @@ export const scrollToSelectedMonomer = (monomerId) => {
 export const RnaEditor = ({ duplicatePreset }) => {
   const activePreset = useAppSelector(selectActivePreset);
   const isEditMode = useAppSelector(selectIsEditMode);
+  const isSequenceEditInRNABuilderMode = useSequenceEditInRNABuilderMode();
   const activePresetFullName = selectPresetFullName(activePreset);
 
   const dispatch = useAppDispatch();
@@ -71,7 +76,13 @@ export const RnaEditor = ({ duplicatePreset }) => {
 
   return (
     <RnaEditorContainer>
-      <StyledHeader>
+      <StyledHeader
+        className={
+          isSequenceEditInRNABuilderMode
+            ? 'styled-header--sequence-edit-mode'
+            : ''
+        }
+      >
         RNA Builder
         <ExpandButton onClick={expandEditor}>
           <ExpandIcon expanded={expanded} name="chevron" />