#4526 - In the Text-editing mode, the canvas is not moved to make the…

… newly added sequence visible (#6224) * #4526 - In the Text-editing mode, the canvas is not moved to make the newly added sequence visible * updated condition for scrolling * #4526 – Update UI tests --------- Co-authored-by: Nikita Chistousov <[email protected]>
epam · Dec 31, 2024 · 256be60 · 256be60
1 parent 204ba0c
commit 256be60
Show file tree

Hide file tree

Showing 14 changed files with 17 additions and 0 deletions.
diff --git a/...r-edit-mode-Copy-paste-selection-with-LClick-drag-and-undo-1-chromium-linux.png b/...r-edit-mode-Copy-paste-selection-with-LClick-drag-and-undo-1-chromium-linux.png
diff --git a/...r-edit-mode-Copy-paste-selection-with-LClick-drag-and-undo-2-chromium-linux.png b/...r-edit-mode-Copy-paste-selection-with-LClick-drag-and-undo-2-chromium-linux.png
diff --git a/...r-edit-mode-Copy-paste-selection-with-LClick-drag-and-undo-3-chromium-linux.png b/...r-edit-mode-Copy-paste-selection-with-LClick-drag-and-undo-3-chromium-linux.png
diff --git a/...elect--68b8f-owLeft-then-paste-ket-from-clipboard-and-undo-1-chromium-linux.png b/...elect--68b8f-owLeft-then-paste-ket-from-clipboard-and-undo-1-chromium-linux.png
diff --git a/...elect--fad51-owLeft-then-paste-ket-from-clipboard-and-undo-2-chromium-linux.png b/...elect--fad51-owLeft-then-paste-ket-from-clipboard-and-undo-2-chromium-linux.png
diff --git a/ketcher-autotests/tests/Macromolecule-editor/Sequence-Mode/sequence-mode-selection.spec.ts b/ketcher-autotests/tests/Macromolecule-editor/Sequence-Mode/sequence-mode-selection.spec.ts
@@ -17,6 +17,7 @@ import {
   clickOnCanvas,
   selectZoomInTool,
   selectZoomOutTool,
+  moveMouseAway,
 } from '@utils';
 import { turnOnMacromoleculesEditor } from '@utils/macromolecules';
 import {
@@ -100,10 +101,12 @@ test.describe('Sequence mode selection for edit mode', () => {
       await page.keyboard.press('ArrowRight');
     }
     await page.keyboard.up('Shift');
+    await moveMouseAway(page);
     await takeEditorScreenshot(page);
 
     await selectFlexLayoutModeTool(page);
     await selectSequenceLayoutModeTool(page);
+
     await takeEditorScreenshot(page);
   });
 
@@ -116,6 +119,7 @@ test.describe('Sequence mode selection for edit mode', () => {
       await page.keyboard.press('ArrowLeft');
     }
     await page.keyboard.up('Shift');
+    await moveMouseAway(page);
     await takeEditorScreenshot(page);
 
     await page.keyboard.press('Backspace');

diff --git a/...de-selection-for-edit-mode-Select-letters-with-LClick-drag-1-chromium-linux.png b/...de-selection-for-edit-mode-Select-letters-with-LClick-drag-1-chromium-linux.png
diff --git a/...de-selection-for-edit-mode-Select-letters-with-LClick-drag-2-chromium-linux.png b/...de-selection-for-edit-mode-Select-letters-with-LClick-drag-2-chromium-linux.png
diff --git a/...e-Select-letters-with-Shift-ArrowLeft-then-delete-and-undo-1-chromium-linux.png b/...e-Select-letters-with-Shift-ArrowLeft-then-delete-and-undo-1-chromium-linux.png
diff --git a/...e-Select-letters-with-Shift-ArrowLeft-then-delete-and-undo-2-chromium-linux.png b/...e-Select-letters-with-Shift-ArrowLeft-then-delete-and-undo-2-chromium-linux.png
diff --git a/...e-Select-letters-with-Shift-ArrowLeft-then-delete-and-undo-3-chromium-linux.png b/...e-Select-letters-with-Shift-ArrowLeft-then-delete-and-undo-3-chromium-linux.png
diff --git a/...e-Select-letters-with-Shift-ArrowLeft-then-delete-and-undo-4-chromium-linux.png b/...e-Select-letters-with-Shift-ArrowLeft-then-delete-and-undo-4-chromium-linux.png
diff --git a/...-for-edit-mode-Select-letters-with-Shift-ArrowRight-button-1-chromium-linux.png b/...-for-edit-mode-Select-letters-with-Shift-ArrowRight-button-1-chromium-linux.png
diff --git a/packages/ketcher-core/src/application/editor/modes/SequenceMode.ts b/packages/ketcher-core/src/application/editor/modes/SequenceMode.ts
@@ -128,6 +128,19 @@ export class SequenceMode extends BaseMode {
       zoom.scrollTo(firstMonomerPosition);
     }
 
+    if (this.isEditMode) {
+      const drawnStructuresElement =
+        document.querySelector('.drawn-structures');
+      const isScrollToTheBottomNeeded =
+        drawnStructuresElement &&
+        drawnStructuresElement.getBoundingClientRect().bottom >
+          window.innerHeight;
+
+      if (isScrollToTheBottomNeeded) {
+        zoom.scrollToVerticalBottom();
+      }
+    }
+
     modelChanges.merge(command);
 
     return modelChanges;