- added sync mode

- fixed spacers nodes in sequence mode

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

@@ -391,6 +391,10 @@ export class CoreEditor {
     this.events.changeSequenceTypeEnterMode.add((mode: SequenceType) =>
       this.onChangeSequenceTypeEnterMode(mode),
     );
+    this.events.toggleIsSequenceSyncEditMode.add(
+      (isSequenceSyncEditMode: boolean) =>
+        this.onChangeToggleIsSequenceSyncEditMode(isSequenceSyncEditMode),
+    );
     this.events.createAntisenseChain.add(() => {
       this.onCreateAntisenseChain();
     });
@@ -455,6 +459,20 @@ export class CoreEditor {
     this.sequenceTypeEnterMode = mode;
   }
 
+  private onChangeToggleIsSequenceSyncEditMode(
+    isSequenceSyncEditMode: boolean,
+  ) {
+    if (!(this.mode instanceof SequenceMode)) {
+      return;
+    }
+
+    if (isSequenceSyncEditMode) {
+      this.mode.turnOnIsSyncEditMode();
+    } else {
+      this.mode.turnOffIsSyncEditMode();
+    }
+  }
+
   private onCreateAntisenseChain() {
     const modelChanges = this.drawingEntitiesManager.createAntisenseChain();
     const history = new EditorHistory(this);

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

@@ -48,6 +48,7 @@ export interface IEditorEvents {
   changeSequenceTypeEnterMode: Subscription;
   toggleSequenceEditMode: Subscription;
   toggleSequenceEditInRNABuilderMode: Subscription;
+  toggleIsSequenceSyncEditMode: Subscription;
   clickOnSequenceItem: Subscription;
   mousedownBetweenSequenceItems: Subscription;
   mouseDownOnSequenceItem: Subscription;
@@ -106,6 +107,7 @@ export function resetEditorEvents() {
     changeSequenceTypeEnterMode: new Subscription(),
     toggleSequenceEditMode: new Subscription(),
     toggleSequenceEditInRNABuilderMode: new Subscription(),
+    toggleIsSequenceSyncEditMode: new Subscription(),
     clickOnSequenceItem: new Subscription(),
     mousedownBetweenSequenceItems: new Subscription(),
     mouseDownOnSequenceItem: new Subscription(),

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

@@ -87,7 +87,8 @@ interface PreservedHydrogenBonds {
 export class SequenceMode extends BaseMode {
   private _isEditMode = false;
   private _isEditInRNABuilderMode = false;
-  private _isAntisenseSyncEditMode = false;
+  private _isAntisenseEditMode = false;
+  private _isSyncEditMode = true;
   private selectionStarted = false;
   private selectionStartCaretPosition = -1;
   private mousemoveCounter = 0;
@@ -112,16 +113,28 @@ export class SequenceMode extends BaseMode {
     this._isEditInRNABuilderMode = isEditInRNABuilderMode;
   }
 
-  public get isAntisenseSyncEditMode() {
-    return this._isAntisenseSyncEditMode;
+  public get isAntisenseEditMode() {
+    return this._isAntisenseEditMode;
   }
 
-  private turnOnAntisenseSyncEditMode() {
-    this._isAntisenseSyncEditMode = true;
+  public get isSyncEditMode() {
+    return this._isSyncEditMode;
   }
 
-  private turnOffAntisenseSyncEditMode() {
-    this._isAntisenseSyncEditMode = false;
+  private turnOnAntisenseEditMode() {
+    this._isAntisenseEditMode = true;
+  }
+
+  private turnOffAntisenseEditMode() {
+    this._isAntisenseEditMode = false;
+  }
+
+  public turnOnIsSyncEditMode() {
+    this._isSyncEditMode = true;
+  }
+
+  public turnOffIsSyncEditMode() {
+    this._isSyncEditMode = false;
   }
 
   public initialize(
@@ -1106,10 +1119,10 @@ export class SequenceMode extends BaseMode {
           const currentEdittingNode = SequenceRenderer.currentEdittingNode;
 
           if (
-            this.isAntisenseSyncEditMode &&
+            this.isAntisenseEditMode &&
             Boolean(currentEdittingNode?.antisenseNode)
           ) {
-            this.turnOffAntisenseSyncEditMode();
+            this.turnOffAntisenseEditMode();
             SequenceRenderer.setCaretPosition(SequenceRenderer.caretPosition);
 
             return;
@@ -1125,10 +1138,10 @@ export class SequenceMode extends BaseMode {
           const currentEdittingNode = SequenceRenderer.currentEdittingNode;
 
           if (
-            !this.isAntisenseSyncEditMode &&
+            !this.isAntisenseEditMode &&
             Boolean(currentEdittingNode?.antisenseNode)
           ) {
-            this.turnOnAntisenseSyncEditMode();
+            this.turnOnAntisenseEditMode();
             SequenceRenderer.setCaretPosition(SequenceRenderer.caretPosition);
 
             return;
@@ -1196,13 +1209,15 @@ export class SequenceMode extends BaseMode {
               )) ||
             undefined;
           let senseNodeToConnect = currentTwoStrandedNode?.senseNode;
-          const needToEditSense = true;
-          const needToEditAntisense = true;
+          const needToEditSense =
+            this.isSyncEditMode || !this.isAntisenseEditMode;
+          const needToEditAntisense =
+            this.isSyncEditMode || this.isAntisenseEditMode;
 
           if (needToEditSense) {
             const insertNewSequenceItemResult = this.insertNewSequenceItem(
               editor,
-              this.isAntisenseSyncEditMode
+              this.isAntisenseEditMode
                 ? DrawingEntitiesManager.getAntisenseBaseLabel(enteredSymbol)
                 : enteredSymbol,
               currentTwoStrandedNode?.senseNode,
@@ -1227,7 +1242,7 @@ export class SequenceMode extends BaseMode {
           ) {
             const antisenseNodeCreationResult = this.insertNewSequenceItem(
               editor,
-              this.isAntisenseSyncEditMode
+              this.isAntisenseEditMode
                 ? enteredSymbol
                 : DrawingEntitiesManager.getAntisenseBaseLabel(enteredSymbol),
               previousTwoStrandedNodeInSameChain?.antisenseNode,
@@ -1238,11 +1253,11 @@ export class SequenceMode extends BaseMode {
               modelChanges.merge(antisenseNodeCreationResult.modelChanges);
               modelChanges.merge(
                 editor.drawingEntitiesManager.createPolymerBond(
-                  senseNodeToConnect instanceof Nucleoside ||
+                  senseNodeToConnect instanceof Nucleotide ||
                     senseNodeToConnect instanceof Nucleoside
                     ? senseNodeToConnect?.rnaBase
                     : senseNodeToConnect.monomer,
-                  antisenseNodeCreationResult.node instanceof Nucleoside ||
+                  antisenseNodeCreationResult.node instanceof Nucleotide ||
                     antisenseNodeCreationResult.node instanceof Nucleoside
                     ? antisenseNodeCreationResult.node?.rnaBase
                     : antisenseNodeCreationResult.node.monomer,

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

@@ -118,12 +118,16 @@ export abstract class BaseSequenceItemRenderer extends BaseSequenceRenderer {
     return CoreEditor.provideEditorInstance().isSequenceEditInRNABuilderMode;
   }
 
-  private get isAntisenseSyncEditMode() {
+  private get isAntisenseEditMode() {
     const editorMode = CoreEditor.provideEditorInstance().mode;
 
-    return (
-      editorMode instanceof SequenceMode && editorMode.isAntisenseSyncEditMode
-    );
+    return editorMode instanceof SequenceMode && editorMode.isAntisenseEditMode;
+  }
+
+  private get isSyncEditMode() {
+    const editorMode = CoreEditor.provideEditorInstance().mode;
+
+    return editorMode instanceof SequenceMode && editorMode.isSyncEditMode;
   }
 
   protected appendRootElement() {
@@ -290,9 +294,10 @@ export abstract class BaseSequenceItemRenderer extends BaseSequenceRenderer {
     this.caretElement = this.spacerElement?.append('g');
 
     if (
-      this.isAntisenseNode ||
-      (this.node instanceof BackBoneSequenceNode &&
-        this.node.firstConnectedNode.monomer.monomerItem.isAntisense)
+      this.isSyncEditMode &&
+      (this.isAntisenseNode ||
+        (this.node instanceof BackBoneSequenceNode &&
+          this.node.firstConnectedNode.monomer.monomerItem.isAntisense))
     ) {
       this.caretElement
         ?.append('path')
@@ -315,9 +320,7 @@ export abstract class BaseSequenceItemRenderer extends BaseSequenceRenderer {
     }
 
     if (
-      this.isAntisenseSyncEditMode
-        ? this.isAntisenseNode
-        : !this.isAntisenseNode
+      this.isAntisenseEditMode ? this.isAntisenseNode : !this.isAntisenseNode
     ) {
       this.caretElement
         ?.append('line')

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

@@ -325,9 +325,39 @@ export class SequenceViewModel {
     }
   }
 
+  private fillAdditionalSpacesInAntisense() {
+    let index = 0;
+    let previousTwoStrandedNode: ITwoStrandedChainItem | undefined;
+
+    this.nodes.forEach((node) => {
+      if (
+        previousTwoStrandedNode &&
+        previousTwoStrandedNode.antisenseNode &&
+        node.antisenseNode &&
+        previousTwoStrandedNode.chain === node.chain &&
+        previousTwoStrandedNode.antisenseChain !== node.antisenseChain
+      ) {
+        this.nodes.splice(index, 0, {
+          senseNode: new BackBoneSequenceNode(
+            previousTwoStrandedNode.senseNode as SubChainNode,
+            node.senseNode as SubChainNode,
+          ),
+          senseNodeIndex: previousTwoStrandedNode.senseNodeIndex,
+          antisenseNode: new EmptySequenceNode(),
+          chain: node.chain,
+        });
+        index++;
+      }
+
+      previousTwoStrandedNode = node;
+      index++;
+    });
+  }
+
   private fillNodes(chainsCollection: ChainsCollection) {
     this.fillSenseNodes(chainsCollection);
     this.fillAntisenseNodes(chainsCollection);
+    this.fillAdditionalSpacesInAntisense();
   }
 
   private fillChains() {

packages/ketcher-macromolecules/src/Editor.tsx

@@ -92,6 +92,7 @@ import { VerticalDivider } from 'components/menu/styles';
 import { PolymerBondContextMenu } from 'components/contextMenu/PolymerBondContextMenu/PolymerBondContextMenu';
 import { EditorEvents } from './EditorEvents';
 import { SelectedMonomersContextMenu } from 'components/contextMenu/SelectedMonomersContextMenu/SelectedMonomersContextMenu';
+import { SequenceSyncEditModeButton } from 'components/SequenceSyncEditModeButton';
 
 const muiTheme = createTheme(muiOverrides);
 
@@ -237,8 +238,8 @@ function Editor({
         >
           <TopMenuComponent />
           <TopMenuRightWrapper>
+            <SequenceSyncEditModeButton />
             <LayoutModeButton />
-
             <SequenceTypeGroupButton />
             <TogglerComponentWrapper
               className={