#4887 - Starting new sequences with "Plus" icon on canvas

#5136 - Starting new sequence by typing in sequence mode
epam · Jul 29, 2024 · de38d91 · de38d91
1 parent b10d6c4
commit de38d91
Show file tree

Hide file tree

Showing 6 changed files with 283 additions and 82 deletions.
diff --git a/packages/ketcher-core/src/application/editor/Editor.ts b/packages/ketcher-core/src/application/editor/Editor.ts
@@ -231,7 +231,6 @@ export class CoreEditor {
         this.onEditSequence(sequenceItemRenderer),
     );
 
-    this.events.startNewSequence.add(() => this.onStartNewSequence());
     this.events.turnOnSequenceEditInRNABuilderMode.add(() =>
       this.onTurnOnSequenceEditInRNABuilderMode(),
     );
@@ -251,14 +250,6 @@ export class CoreEditor {
     this.mode.turnOnEditMode(sequenceItemRenderer);
   }
 
-  private onStartNewSequence() {
-    if (!(this.mode instanceof SequenceMode)) {
-      return;
-    }
-
-    this.mode.startNewSequence();
-  }
-
   private onTurnOnSequenceEditInRNABuilderMode() {
     if (!(this.mode instanceof SequenceMode)) {
       return;

diff --git a/packages/ketcher-core/src/application/editor/modes/SequenceMode.ts b/packages/ketcher-core/src/application/editor/modes/SequenceMode.ts
@@ -46,6 +46,10 @@ enum Direction {
   Right = 'right',
 }
 
+export interface StartNewSequenceEventData {
+  indexOfRowBefore: number;
+}
+
 export class SequenceMode extends BaseMode {
   private _isEditMode = false;
   private _isEditInRNABuilderMode = false;
@@ -144,16 +148,16 @@ export class SequenceMode extends BaseMode {
     editor.events.toggleSequenceEditInRNABuilderMode.dispatch(false);
   }
 
-  public startNewSequence() {
+  public startNewSequence(eventData?: StartNewSequenceEventData) {
     if (!this.isEditMode) {
       this.turnOnEditMode();
     }
 
-    if (!SequenceRenderer.hasNewChain) {
-      SequenceRenderer.startNewSequence();
-    }
-
-    SequenceRenderer.moveCaretToNewChain();
+    SequenceRenderer.startNewSequence(
+      isNumber(eventData?.indexOfRowBefore)
+        ? eventData?.indexOfRowBefore
+        : SequenceRenderer.currentChainIndex,
+    );
   }
 
   public modifySequenceInRnaBuilder(
@@ -788,12 +792,24 @@ export class SequenceMode extends BaseMode {
           ),
         ],
         handler: (event) => {
+          if (
+            SequenceRenderer.chainsCollection.length === 1 &&
+            SequenceRenderer.chainsCollection.firstNode instanceof
+              EmptySequenceNode &&
+            !this.isEditMode
+          ) {
+            this.turnOnEditMode();
+            SequenceRenderer.setCaretPosition(0);
+          }
+
           if (!this.isEditMode) {
             return;
           }
+
           if (!this.deleteSelection()) {
             return;
           }
+
           const enteredSymbol = event.code.replace('Key', '');
           const editor = CoreEditor.provideEditorInstance();
           const history = new EditorHistory(editor);
@@ -1160,5 +1176,6 @@ export class SequenceMode extends BaseMode {
 
   public destroy() {
     this.turnOffEditMode();
+    SequenceRenderer.removeNewSequenceButtons();
   }
 }
diff --git a/packages/ketcher-core/src/application/render/renderers/sequence/BaseSequenceItemRenderer.ts b/packages/ketcher-core/src/application/render/renderers/sequence/BaseSequenceItemRenderer.ts
@@ -7,6 +7,7 @@ import { CoreEditor } from 'application/editor/internal';
 import { EmptySequenceNode } from 'domain/entities/EmptySequenceNode';
 import { editorEvents } from 'application/editor/editorEvents';
 import assert from 'assert';
+import { SequenceRenderer } from 'application/render';
 
 const CHAIN_START_ARROW_SYMBOL_ID = 'sequence-start-arrow';
 
@@ -43,6 +44,13 @@ export abstract class BaseSequenceItemRenderer extends BaseSequenceRenderer {
     this._isEditingSymbol = isEditingSymbol;
   }
 
+  private get isSingleEmptyNode() {
+    return (
+      SequenceRenderer.chainsCollection.length === 1 &&
+      this.node instanceof EmptySequenceNode
+    );
+  }
+
   protected abstract drawModification(): void;
 
   protected appendHover(): D3SvgElementSelection<SVGUseElement, void> | void {
@@ -90,7 +98,7 @@ export abstract class BaseSequenceItemRenderer extends BaseSequenceRenderer {
         `translate(${this.scaledMonomerPositionForSequence.x}, ${this.scaledMonomerPositionForSequence.y})`,
       ) as never as D3SvgElementSelection<SVGGElement, void>;
 
-    if (this.isSequenceEditModeTurnedOn) {
+    if (this.isSequenceEditModeTurnedOn || this.isSingleEmptyNode) {
       rootElement.attr('pointer-events', 'all').attr('cursor', 'text');
     }
 
@@ -105,7 +113,12 @@ export abstract class BaseSequenceItemRenderer extends BaseSequenceRenderer {
       .attr('y', -16)
       .attr('x', -2)
       .attr('rx', 2)
-      .attr('cursor', this.isSequenceEditModeTurnedOn ? 'text' : 'default');
+      .attr(
+        'cursor',
+        this.isSequenceEditModeTurnedOn || this.isSingleEmptyNode
+          ? 'text'
+          : 'default',
+      );
 
     backgroundElement?.attr('fill', 'transparent');
 
@@ -184,7 +197,9 @@ export abstract class BaseSequenceItemRenderer extends BaseSequenceRenderer {
   protected redrawBackgroundElementColor() {
     this.backgroundElement?.attr(
       'fill',
-      this.isSequenceEditModeTurnedOn ? '#FF7A001A' : 'transparent',
+      this.isSequenceEditModeTurnedOn || this.isSingleEmptyNode
+        ? '#FF7A001A'
+        : 'transparent',
     );
   }
 
@@ -202,13 +217,19 @@ export abstract class BaseSequenceItemRenderer extends BaseSequenceRenderer {
 
   show(): void {
     this.rootElement = this.appendRootElement();
-    if (this.isBeginningOfChain && this.isSequenceEditModeTurnedOn) {
+    if (
+      (this.isBeginningOfChain && this.isSequenceEditModeTurnedOn) ||
+      this.isSingleEmptyNode
+    ) {
       this.appendChainStartArrow();
     }
     this.spacerElement = this.appendSpacerElement();
     this.backgroundElement = this.appendBackgroundElement();
 
-    if (this.isSequenceEditModeTurnedOn && this.isEditingSymbol) {
+    if (
+      (this.isSequenceEditModeTurnedOn && this.isEditingSymbol) ||
+      this.isSingleEmptyNode
+    ) {
       this.showCaret();
     }
 
@@ -223,7 +244,12 @@ export abstract class BaseSequenceItemRenderer extends BaseSequenceRenderer {
         this.isSequenceEditInRnaBuilderModeTurnedOn ? '24545A' : '#333333',
       )
       .attr('style', 'user-select: none;')
-      .attr('cursor', this.isSequenceEditModeTurnedOn ? 'text' : 'default');
+      .attr(
+        'cursor',
+        this.isSequenceEditModeTurnedOn || this.isSingleEmptyNode
+          ? 'text'
+          : 'default',
+      );
 
     this.appendEvents();
     if (this.needDisplayCounter) {
@@ -244,7 +270,7 @@ export abstract class BaseSequenceItemRenderer extends BaseSequenceRenderer {
     if (!this.rootElement) {
       return;
     }
-    if (this.node.monomer.selected) {
+    if (this.node.monomer.selected && !this.isSingleEmptyNode) {
       this.appendSelection();
       this.raiseElement();
     } else {
@@ -309,7 +335,7 @@ export abstract class BaseSequenceItemRenderer extends BaseSequenceRenderer {
   public updateAttachmentPoints() {}
 
   private drawBackgroundElementHover() {
-    if (this.isSequenceEditModeTurnedOn) {
+    if (this.isSequenceEditModeTurnedOn || this.isSingleEmptyNode) {
       return;
     }