diff --git a/ketcher-autotests/tests/Macromolecule-editor/Chem-monomers/chem-add-to-canvas.spec.ts-snapshots/Select-chem-and-drag-it-to-canvas-1-chromium-linux.png b/ketcher-autotests/tests/Macromolecule-editor/Chem-monomers/chem-add-to-canvas.spec.ts-snapshots/Select-chem-and-drag-it-to-canvas-1-chromium-linux.png index 1586e160cc..a8b8cbe012 100644 Binary files a/ketcher-autotests/tests/Macromolecule-editor/Chem-monomers/chem-add-to-canvas.spec.ts-snapshots/Select-chem-and-drag-it-to-canvas-1-chromium-linux.png and b/ketcher-autotests/tests/Macromolecule-editor/Chem-monomers/chem-add-to-canvas.spec.ts-snapshots/Select-chem-and-drag-it-to-canvas-1-chromium-linux.png differ diff --git a/ketcher-autotests/tests/Macromolecule-editor/Erase-Tool/erase-tool.spec.ts b/ketcher-autotests/tests/Macromolecule-editor/Erase-Tool/erase-tool.spec.ts index 3ea7135d5f..c36c2c5ccf 100644 --- a/ketcher-autotests/tests/Macromolecule-editor/Erase-Tool/erase-tool.spec.ts +++ b/ketcher-autotests/tests/Macromolecule-editor/Erase-Tool/erase-tool.spec.ts @@ -67,6 +67,10 @@ test.describe('Erase Tool', () => { await bondTwoMonomers(page, peptide3, peptide2); await bondTwoMonomers(page, peptide3, peptide4); + // Get rid of flakiness because of preview + const coords = [100, 100]; + await page.mouse.move(coords[0], coords[1]); + await takeEditorScreenshot(page); await selectEraseTool(page); @@ -74,6 +78,9 @@ test.describe('Erase Tool', () => { // Delete peptide linked with two other peptides by bonds await peptide3.click(); + // Get rid of flakiness because of preview + await page.mouse.move(coords[0], coords[1]); + await takeEditorScreenshot(page); }); }); diff --git a/ketcher-autotests/tests/Macromolecule-editor/Erase-Tool/erase-tool.spec.ts-snapshots/Erase-Tool-Delete-monomer-bonded-with-another-monomers-1-chromium-darwin.png b/ketcher-autotests/tests/Macromolecule-editor/Erase-Tool/erase-tool.spec.ts-snapshots/Erase-Tool-Delete-monomer-bonded-with-another-monomers-1-chromium-darwin.png deleted file mode 100644 index 0cabf647bc..0000000000 Binary files a/ketcher-autotests/tests/Macromolecule-editor/Erase-Tool/erase-tool.spec.ts-snapshots/Erase-Tool-Delete-monomer-bonded-with-another-monomers-1-chromium-darwin.png and /dev/null differ diff --git a/ketcher-autotests/tests/Macromolecule-editor/Erase-Tool/erase-tool.spec.ts-snapshots/Erase-Tool-Delete-monomer-bonded-with-another-monomers-2-chromium-darwin.png b/ketcher-autotests/tests/Macromolecule-editor/Erase-Tool/erase-tool.spec.ts-snapshots/Erase-Tool-Delete-monomer-bonded-with-another-monomers-2-chromium-darwin.png deleted file mode 100644 index bd973037f8..0000000000 Binary files a/ketcher-autotests/tests/Macromolecule-editor/Erase-Tool/erase-tool.spec.ts-snapshots/Erase-Tool-Delete-monomer-bonded-with-another-monomers-2-chromium-darwin.png and /dev/null differ diff --git a/ketcher-autotests/tests/Macromolecule-editor/Favorites/favorites-add-to-canvas.spec.ts-snapshots/Add-molecule-to-favorites-switch-to-Favorites-tab-and-drag-it-to-the-canvas-1-chromium-linux.png b/ketcher-autotests/tests/Macromolecule-editor/Favorites/favorites-add-to-canvas.spec.ts-snapshots/Add-molecule-to-favorites-switch-to-Favorites-tab-and-drag-it-to-the-canvas-1-chromium-linux.png index 7eec49b848..635db208eb 100644 Binary files a/ketcher-autotests/tests/Macromolecule-editor/Favorites/favorites-add-to-canvas.spec.ts-snapshots/Add-molecule-to-favorites-switch-to-Favorites-tab-and-drag-it-to-the-canvas-1-chromium-linux.png and b/ketcher-autotests/tests/Macromolecule-editor/Favorites/favorites-add-to-canvas.spec.ts-snapshots/Add-molecule-to-favorites-switch-to-Favorites-tab-and-drag-it-to-the-canvas-1-chromium-linux.png differ diff --git a/ketcher-autotests/tests/Macromolecule-editor/Peptides/peptides-add-to-canvas.spec.ts b/ketcher-autotests/tests/Macromolecule-editor/Peptides/peptides-add-to-canvas.spec.ts index 5e1b9e4dbd..00d3c4bfc6 100644 --- a/ketcher-autotests/tests/Macromolecule-editor/Peptides/peptides-add-to-canvas.spec.ts +++ b/ketcher-autotests/tests/Macromolecule-editor/Peptides/peptides-add-to-canvas.spec.ts @@ -1,6 +1,8 @@ import { test } from '@playwright/test'; import { clickInTheMiddleOfTheScreen, + moveMouseToTheMiddleOfTheScreen, + selectSingleBondTool, takePageScreenshot, waitForPageInit, } from '@utils'; @@ -11,12 +13,29 @@ import { turnOnMacromoleculesEditor } from '@utils/macromolecules'; Test case: #3063 - Add e2e tests for Macromolecule editor */ -test('Select peptide and drag it to canvas', async ({ page }) => { - await waitForPageInit(page); - await turnOnMacromoleculesEditor(page); +test.describe('Peptide', () => { + test.beforeEach(async ({ page }) => { + await waitForPageInit(page); + await turnOnMacromoleculesEditor(page); + }); - await page.click(ALANINE); - await clickInTheMiddleOfTheScreen(page); + test.afterEach(async ({ page }) => { + await takePageScreenshot(page); + }); - await takePageScreenshot(page); + test('Select peptide and drag it to canvas', async ({ page }) => { + await page.click(ALANINE); + await clickInTheMiddleOfTheScreen(page); + }); + + test('Add monomer preview on canvas', async ({ page }) => { + /* + Test case: #2869 - Preview of monomer structures on canvas + Description: Add monomer preview on canvas + */ + await page.click(ALANINE); + await clickInTheMiddleOfTheScreen(page); + await selectSingleBondTool(page); + await moveMouseToTheMiddleOfTheScreen(page); + }); }); diff --git a/ketcher-autotests/tests/Macromolecule-editor/Peptides/peptides-add-to-canvas.spec.ts-snapshots/Peptide-Add-monomer-preview-on-canvas-1-chromium-linux.png b/ketcher-autotests/tests/Macromolecule-editor/Peptides/peptides-add-to-canvas.spec.ts-snapshots/Peptide-Add-monomer-preview-on-canvas-1-chromium-linux.png new file mode 100644 index 0000000000..9a226bea4e Binary files /dev/null and b/ketcher-autotests/tests/Macromolecule-editor/Peptides/peptides-add-to-canvas.spec.ts-snapshots/Peptide-Add-monomer-preview-on-canvas-1-chromium-linux.png differ diff --git a/ketcher-autotests/tests/Macromolecule-editor/Peptides/peptides-add-to-canvas.spec.ts-snapshots/Peptide-Select-peptide-and-drag-it-to-canvas-1-chromium-linux.png b/ketcher-autotests/tests/Macromolecule-editor/Peptides/peptides-add-to-canvas.spec.ts-snapshots/Peptide-Select-peptide-and-drag-it-to-canvas-1-chromium-linux.png new file mode 100644 index 0000000000..b77e09ab8b Binary files /dev/null and b/ketcher-autotests/tests/Macromolecule-editor/Peptides/peptides-add-to-canvas.spec.ts-snapshots/Peptide-Select-peptide-and-drag-it-to-canvas-1-chromium-linux.png differ diff --git a/ketcher-autotests/tests/Macromolecule-editor/Polymer-Bond-Tool/attachment-point-rotation.spec.ts b/ketcher-autotests/tests/Macromolecule-editor/Polymer-Bond-Tool/attachment-point-rotation.spec.ts index 189e1e87a8..8f2301a6aa 100644 --- a/ketcher-autotests/tests/Macromolecule-editor/Polymer-Bond-Tool/attachment-point-rotation.spec.ts +++ b/ketcher-autotests/tests/Macromolecule-editor/Polymer-Bond-Tool/attachment-point-rotation.spec.ts @@ -17,6 +17,7 @@ test.describe('Check attachment point rotation', () => { await waitForPageInit(page); await turnOnMacromoleculesEditor(page); }); + test('Select monomer and bonds and then hover monomer', async ({ page }) => { /* Test case: # - Rotate attachment point to bond @@ -72,11 +73,17 @@ test.describe('Check attachment point rotation', () => { // Hover 1th peptide await peptide1.hover(); + // Get rid of flakiness because of preview + await page.waitForSelector('.polymer-library-preview'); + await takePageScreenshot(page); // Hover 2nd peptide await peptide2.hover(); + // Get rid of flakiness because of preview + await page.waitForSelector('.polymer-library-preview'); + await takeEditorScreenshot(page); }); diff --git a/ketcher-autotests/tests/Macromolecule-editor/Polymer-Bond-Tool/attachment-point-rotation.spec.ts-snapshots/Check-attachment-point-rotation-Move-monomer-b-29ea5--another-monomers-and-check-attachment-points-2-chromium-linux.png b/ketcher-autotests/tests/Macromolecule-editor/Polymer-Bond-Tool/attachment-point-rotation.spec.ts-snapshots/Check-attachment-point-rotation-Move-monomer-b-29ea5--another-monomers-and-check-attachment-points-2-chromium-linux.png index 1dfa7774ed..99b6a93976 100644 Binary files a/ketcher-autotests/tests/Macromolecule-editor/Polymer-Bond-Tool/attachment-point-rotation.spec.ts-snapshots/Check-attachment-point-rotation-Move-monomer-b-29ea5--another-monomers-and-check-attachment-points-2-chromium-linux.png and b/ketcher-autotests/tests/Macromolecule-editor/Polymer-Bond-Tool/attachment-point-rotation.spec.ts-snapshots/Check-attachment-point-rotation-Move-monomer-b-29ea5--another-monomers-and-check-attachment-points-2-chromium-linux.png differ diff --git a/ketcher-autotests/tests/Macromolecule-editor/Polymer-Bond-Tool/attachment-point-rotation.spec.ts-snapshots/Check-attachment-point-rotation-Move-monomer-b-c144d--another-monomers-and-check-attachment-points-1-chromium-linux.png b/ketcher-autotests/tests/Macromolecule-editor/Polymer-Bond-Tool/attachment-point-rotation.spec.ts-snapshots/Check-attachment-point-rotation-Move-monomer-b-c144d--another-monomers-and-check-attachment-points-1-chromium-linux.png index b52b1fb8b2..b305a5c245 100644 Binary files a/ketcher-autotests/tests/Macromolecule-editor/Polymer-Bond-Tool/attachment-point-rotation.spec.ts-snapshots/Check-attachment-point-rotation-Move-monomer-b-c144d--another-monomers-and-check-attachment-points-1-chromium-linux.png and b/ketcher-autotests/tests/Macromolecule-editor/Polymer-Bond-Tool/attachment-point-rotation.spec.ts-snapshots/Check-attachment-point-rotation-Move-monomer-b-c144d--another-monomers-and-check-attachment-points-1-chromium-linux.png differ diff --git a/ketcher-autotests/tests/Macromolecule-editor/Polymer-Bond-Tool/attachment-point-rotation.spec.ts-snapshots/Check-attachment-point-rotation-Select-monomer-and-bonds-and-then-hover-monomer-1-chromium-linux.png b/ketcher-autotests/tests/Macromolecule-editor/Polymer-Bond-Tool/attachment-point-rotation.spec.ts-snapshots/Check-attachment-point-rotation-Select-monomer-and-bonds-and-then-hover-monomer-1-chromium-linux.png index ab37fd00b5..edeb1c2ea6 100644 Binary files a/ketcher-autotests/tests/Macromolecule-editor/Polymer-Bond-Tool/attachment-point-rotation.spec.ts-snapshots/Check-attachment-point-rotation-Select-monomer-and-bonds-and-then-hover-monomer-1-chromium-linux.png and b/ketcher-autotests/tests/Macromolecule-editor/Polymer-Bond-Tool/attachment-point-rotation.spec.ts-snapshots/Check-attachment-point-rotation-Select-monomer-and-bonds-and-then-hover-monomer-1-chromium-linux.png differ diff --git a/ketcher-autotests/tests/Macromolecule-editor/Polymer-Bond-Tool/attachment-point-rotation.spec.ts-snapshots/Check-attachment-point-rotation-Select-monomer-and-bonds-and-then-hover-monomer-2-chromium-linux.png b/ketcher-autotests/tests/Macromolecule-editor/Polymer-Bond-Tool/attachment-point-rotation.spec.ts-snapshots/Check-attachment-point-rotation-Select-monomer-and-bonds-and-then-hover-monomer-2-chromium-linux.png index 71295d47e2..d8d99e7900 100644 Binary files a/ketcher-autotests/tests/Macromolecule-editor/Polymer-Bond-Tool/attachment-point-rotation.spec.ts-snapshots/Check-attachment-point-rotation-Select-monomer-and-bonds-and-then-hover-monomer-2-chromium-linux.png and b/ketcher-autotests/tests/Macromolecule-editor/Polymer-Bond-Tool/attachment-point-rotation.spec.ts-snapshots/Check-attachment-point-rotation-Select-monomer-and-bonds-and-then-hover-monomer-2-chromium-linux.png differ diff --git a/ketcher-autotests/tests/Macromolecule-editor/Polymer-Bond-Tool/polymer-bond-tool.spec.ts b/ketcher-autotests/tests/Macromolecule-editor/Polymer-Bond-Tool/polymer-bond-tool.spec.ts index ed02fd2f11..545e727d87 100644 --- a/ketcher-autotests/tests/Macromolecule-editor/Polymer-Bond-Tool/polymer-bond-tool.spec.ts +++ b/ketcher-autotests/tests/Macromolecule-editor/Polymer-Bond-Tool/polymer-bond-tool.spec.ts @@ -43,15 +43,21 @@ test.describe('Polymer Bond Tool', () => { // Select bond tool await selectSingleBondTool(page); + await takePageScreenshot(page); + // Create bonds between peptides, taking screenshots in middle states await peptide1.hover(); await page.mouse.down(); - - await takePageScreenshot(page); await peptide2.hover(); await page.mouse.up(); + + // Get rid of preview + const coords = [100, 100]; + await page.mouse.move(coords[0], coords[1]); + await takePageScreenshot(page); + await peptide2.hover(); await page.mouse.down(); await peptide3.hover(); await page.mouse.up(); @@ -60,6 +66,9 @@ test.describe('Polymer Bond Tool', () => { await page.mouse.down(); await peptide3.hover(); await page.mouse.up(); + + // Get rid of preview + await page.mouse.move(coords[0], coords[1]); }); test('Create bond between two chems', async ({ page }) => { diff --git a/ketcher-autotests/tests/Macromolecule-editor/Polymer-Bond-Tool/polymer-bond-tool.spec.ts-snapshots/Polymer-Bond-Tool-Create-bond-between-two-chems-1-chromium-linux.png b/ketcher-autotests/tests/Macromolecule-editor/Polymer-Bond-Tool/polymer-bond-tool.spec.ts-snapshots/Polymer-Bond-Tool-Create-bond-between-two-chems-1-chromium-linux.png index 8d4c5a99dd..6b4c7191ea 100644 Binary files a/ketcher-autotests/tests/Macromolecule-editor/Polymer-Bond-Tool/polymer-bond-tool.spec.ts-snapshots/Polymer-Bond-Tool-Create-bond-between-two-chems-1-chromium-linux.png and b/ketcher-autotests/tests/Macromolecule-editor/Polymer-Bond-Tool/polymer-bond-tool.spec.ts-snapshots/Polymer-Bond-Tool-Create-bond-between-two-chems-1-chromium-linux.png differ diff --git a/ketcher-autotests/tests/Macromolecule-editor/Polymer-Bond-Tool/polymer-bond-tool.spec.ts-snapshots/Polymer-Bond-Tool-Create-bond-between-two-chems-2-chromium-linux.png b/ketcher-autotests/tests/Macromolecule-editor/Polymer-Bond-Tool/polymer-bond-tool.spec.ts-snapshots/Polymer-Bond-Tool-Create-bond-between-two-chems-2-chromium-linux.png index 937434ba3e..032772ce30 100644 Binary files a/ketcher-autotests/tests/Macromolecule-editor/Polymer-Bond-Tool/polymer-bond-tool.spec.ts-snapshots/Polymer-Bond-Tool-Create-bond-between-two-chems-2-chromium-linux.png and b/ketcher-autotests/tests/Macromolecule-editor/Polymer-Bond-Tool/polymer-bond-tool.spec.ts-snapshots/Polymer-Bond-Tool-Create-bond-between-two-chems-2-chromium-linux.png differ diff --git a/ketcher-autotests/tests/Macromolecule-editor/Polymer-Bond-Tool/polymer-bond-tool.spec.ts-snapshots/Polymer-Bond-Tool-Create-bond-between-two-peptides-1-chromium-linux.png b/ketcher-autotests/tests/Macromolecule-editor/Polymer-Bond-Tool/polymer-bond-tool.spec.ts-snapshots/Polymer-Bond-Tool-Create-bond-between-two-peptides-1-chromium-linux.png index 21ecbec2b7..0ac96b566d 100644 Binary files a/ketcher-autotests/tests/Macromolecule-editor/Polymer-Bond-Tool/polymer-bond-tool.spec.ts-snapshots/Polymer-Bond-Tool-Create-bond-between-two-peptides-1-chromium-linux.png and b/ketcher-autotests/tests/Macromolecule-editor/Polymer-Bond-Tool/polymer-bond-tool.spec.ts-snapshots/Polymer-Bond-Tool-Create-bond-between-two-peptides-1-chromium-linux.png differ diff --git a/ketcher-autotests/tests/Macromolecule-editor/RNAEditor/add-custom-preset.spec.ts b/ketcher-autotests/tests/Macromolecule-editor/RNAEditor/add-custom-preset.spec.ts index e6599e3032..918e076bfa 100644 --- a/ketcher-autotests/tests/Macromolecule-editor/RNAEditor/add-custom-preset.spec.ts +++ b/ketcher-autotests/tests/Macromolecule-editor/RNAEditor/add-custom-preset.spec.ts @@ -8,7 +8,7 @@ import { BUTTON__ADD_TO_PRESETS, } from '../../../constants/testIdConstants'; import { waitForPageInit } from '@utils/common'; -import { takePageScreenshot } from '@utils'; +import { moveMouseToTheMiddleOfTheScreen, takePageScreenshot } from '@utils'; /* Test case: #3063 - Add e2e tests for Macromolecule editor @@ -54,7 +54,7 @@ test.describe('Macromolecules custom presets', () => { base: 'baA___N-benzyl-adenine', phosphate: 'bP___Boranophosphate', }); - + await moveMouseToTheMiddleOfTheScreen(page); await page.getByTestId(BUTTON__ADD_TO_PRESETS).click(); await takePageScreenshot(page); diff --git a/ketcher-autotests/tests/Macromolecule-editor/RNAEditor/add-default-presets.spec.ts-snapshots/Macromolecules-default-presets-Add-Guanine-to-canvas-1-chromium-linux.png b/ketcher-autotests/tests/Macromolecule-editor/RNAEditor/add-default-presets.spec.ts-snapshots/Macromolecules-default-presets-Add-Guanine-to-canvas-1-chromium-linux.png index 98d29c453e..638b7d60ae 100644 Binary files a/ketcher-autotests/tests/Macromolecule-editor/RNAEditor/add-default-presets.spec.ts-snapshots/Macromolecules-default-presets-Add-Guanine-to-canvas-1-chromium-linux.png and b/ketcher-autotests/tests/Macromolecule-editor/RNAEditor/add-default-presets.spec.ts-snapshots/Macromolecules-default-presets-Add-Guanine-to-canvas-1-chromium-linux.png differ diff --git a/ketcher-autotests/tests/Macromolecule-editor/Rectangle-Selection-Tool/rectangle-selection-tool.spec.ts b/ketcher-autotests/tests/Macromolecule-editor/Rectangle-Selection-Tool/rectangle-selection-tool.spec.ts index 0974b4630a..3a9e98f5d6 100644 --- a/ketcher-autotests/tests/Macromolecule-editor/Rectangle-Selection-Tool/rectangle-selection-tool.spec.ts +++ b/ketcher-autotests/tests/Macromolecule-editor/Rectangle-Selection-Tool/rectangle-selection-tool.spec.ts @@ -70,6 +70,9 @@ test.describe('Rectangle Selection Tool', () => { await bondTwoMonomers(page, peptide3, peptide2); await bondTwoMonomers(page, peptide3, peptide4); + // Get rid of flakiness because of preview + const coords = [100, 100]; + await page.mouse.move(coords[0], coords[1]); await takePageScreenshot(page); await selectRectangleSelectionTool(page); @@ -82,11 +85,16 @@ test.describe('Rectangle Selection Tool', () => { await selectRectangleArea(page, startX, startY, endX, endY); + // Get rid of flakiness because of preview + await page.mouse.move(coords[0], coords[1]); await takePageScreenshot(page); // Erase selected elements await selectEraseTool(page); + // Get rid of flakiness because of preview + await page.mouse.move(coords[0], coords[1]); + await takePageScreenshot(page); }); @@ -124,9 +132,7 @@ test.describe('Rectangle Selection Tool', () => { // Move selected monomer await selectRectangleSelectionTool(page); - await page.mouse.move(400, 400); - await dragMouseTo(500, 500, page); - await page.mouse.move(400, 400); + await page.mouse.click(400, 400); await dragMouseTo(200, 400, page); await takeEditorScreenshot(page); diff --git a/ketcher-autotests/tests/Macromolecule-editor/Rectangle-Selection-Tool/rectangle-selection-tool.spec.ts-snapshots/Rectangle-Selection-Tool-Move-monomer-bonded-with-another-monomers-1-chromium-linux.png b/ketcher-autotests/tests/Macromolecule-editor/Rectangle-Selection-Tool/rectangle-selection-tool.spec.ts-snapshots/Rectangle-Selection-Tool-Move-monomer-bonded-with-another-monomers-1-chromium-linux.png index daa061a6ea..a590d21f94 100644 Binary files a/ketcher-autotests/tests/Macromolecule-editor/Rectangle-Selection-Tool/rectangle-selection-tool.spec.ts-snapshots/Rectangle-Selection-Tool-Move-monomer-bonded-with-another-monomers-1-chromium-linux.png and b/ketcher-autotests/tests/Macromolecule-editor/Rectangle-Selection-Tool/rectangle-selection-tool.spec.ts-snapshots/Rectangle-Selection-Tool-Move-monomer-bonded-with-another-monomers-1-chromium-linux.png differ diff --git a/ketcher-autotests/tests/Macromolecule-editor/Rectangle-Selection-Tool/rectangle-selection-tool.spec.ts-snapshots/Rectangle-Selection-Tool-Move-monomer-bonded-with-another-monomers-2-chromium-linux.png b/ketcher-autotests/tests/Macromolecule-editor/Rectangle-Selection-Tool/rectangle-selection-tool.spec.ts-snapshots/Rectangle-Selection-Tool-Move-monomer-bonded-with-another-monomers-2-chromium-linux.png index 43842803f7..7b0ccf8098 100644 Binary files a/ketcher-autotests/tests/Macromolecule-editor/Rectangle-Selection-Tool/rectangle-selection-tool.spec.ts-snapshots/Rectangle-Selection-Tool-Move-monomer-bonded-with-another-monomers-2-chromium-linux.png and b/ketcher-autotests/tests/Macromolecule-editor/Rectangle-Selection-Tool/rectangle-selection-tool.spec.ts-snapshots/Rectangle-Selection-Tool-Move-monomer-bonded-with-another-monomers-2-chromium-linux.png differ diff --git a/ketcher-autotests/tests/Macromolecule-editor/Rectangle-Selection-Tool/rectangle-selection-tool.spec.ts-snapshots/Rectangle-Selection-Tool-Select-monomer-and-bonds-and-then-erase-2-chromium-linux.png b/ketcher-autotests/tests/Macromolecule-editor/Rectangle-Selection-Tool/rectangle-selection-tool.spec.ts-snapshots/Rectangle-Selection-Tool-Select-monomer-and-bonds-and-then-erase-2-chromium-linux.png index 87e04d5a93..72bbf720e6 100644 Binary files a/ketcher-autotests/tests/Macromolecule-editor/Rectangle-Selection-Tool/rectangle-selection-tool.spec.ts-snapshots/Rectangle-Selection-Tool-Select-monomer-and-bonds-and-then-erase-2-chromium-linux.png and b/ketcher-autotests/tests/Macromolecule-editor/Rectangle-Selection-Tool/rectangle-selection-tool.spec.ts-snapshots/Rectangle-Selection-Tool-Select-monomer-and-bonds-and-then-erase-2-chromium-linux.png differ diff --git a/ketcher-autotests/tests/Macromolecule-editor/screenshots/check-finding-right-chain-sequence-1.png b/ketcher-autotests/tests/Macromolecule-editor/screenshots/check-finding-right-chain-sequence-1.png index 3e8bfb582f..3cbf0985b9 100644 Binary files a/ketcher-autotests/tests/Macromolecule-editor/screenshots/check-finding-right-chain-sequence-1.png and b/ketcher-autotests/tests/Macromolecule-editor/screenshots/check-finding-right-chain-sequence-1.png differ diff --git a/ketcher-autotests/tests/Macromolecule-editor/screenshots/check-finding-right-chain-sequence-2.png b/ketcher-autotests/tests/Macromolecule-editor/screenshots/check-finding-right-chain-sequence-2.png index 1e0a4f75fc..8549336054 100644 Binary files a/ketcher-autotests/tests/Macromolecule-editor/screenshots/check-finding-right-chain-sequence-2.png and b/ketcher-autotests/tests/Macromolecule-editor/screenshots/check-finding-right-chain-sequence-2.png differ diff --git a/ketcher-autotests/tests/Macromolecule-editor/screenshots/check-snake-mode-arrange.png b/ketcher-autotests/tests/Macromolecule-editor/screenshots/check-snake-mode-arrange.png index de6fcdfe19..9df742b088 100644 Binary files a/ketcher-autotests/tests/Macromolecule-editor/screenshots/check-snake-mode-arrange.png and b/ketcher-autotests/tests/Macromolecule-editor/screenshots/check-snake-mode-arrange.png differ diff --git a/ketcher-autotests/tests/Macromolecule-editor/screenshots/create-snake-bond-between-peptides.png b/ketcher-autotests/tests/Macromolecule-editor/screenshots/create-snake-bond-between-peptides.png index e6c1e60e5c..69bcfbccb4 100644 Binary files a/ketcher-autotests/tests/Macromolecule-editor/screenshots/create-snake-bond-between-peptides.png and b/ketcher-autotests/tests/Macromolecule-editor/screenshots/create-snake-bond-between-peptides.png differ diff --git a/packages/ketcher-core/src/application/editor/Editor.ts b/packages/ketcher-core/src/application/editor/Editor.ts index 2df98f5797..4374fd3630 100644 --- a/packages/ketcher-core/src/application/editor/Editor.ts +++ b/packages/ketcher-core/src/application/editor/Editor.ts @@ -203,7 +203,7 @@ export class CoreEditor { // this.lastEvent = event; const conditions = [ eventHandlerName in editorTool, - this.canvas.contains(event.target) || editorTool.isSelectionRunning?.(), + this.canvas.contains(event?.target) || editorTool.isSelectionRunning?.(), // isContextMenuClosed(editor.contextMenu), ]; diff --git a/packages/ketcher-core/src/application/editor/editorEvents.ts b/packages/ketcher-core/src/application/editor/editorEvents.ts index c369e2f4e6..9b143f9296 100644 --- a/packages/ketcher-core/src/application/editor/editorEvents.ts +++ b/packages/ketcher-core/src/application/editor/editorEvents.ts @@ -10,6 +10,7 @@ export const editorEvents = { mouseOverPolymerBond: new Subscription(), mouseLeavePolymerBond: new Subscription(), mouseOverMonomer: new Subscription(), + mouseOnMoveMonomer: new Subscription(), mouseLeaveMonomer: new Subscription(), mouseOverDrawingEntity: new Subscription(), mouseLeaveDrawingEntity: new Subscription(), @@ -20,6 +21,7 @@ export const renderersEvents: ToolEventHandlerName[] = [ 'mouseOverPolymerBond', 'mouseLeavePolymerBond', 'mouseOverMonomer', + 'mouseOnMoveMonomer', 'mouseLeaveMonomer', 'mouseOverDrawingEntity', 'mouseLeaveDrawingEntity', diff --git a/packages/ketcher-core/src/application/editor/tools/Tool.ts b/packages/ketcher-core/src/application/editor/tools/Tool.ts index 4b606a5985..f4dddc6e9f 100644 --- a/packages/ketcher-core/src/application/editor/tools/Tool.ts +++ b/packages/ketcher-core/src/application/editor/tools/Tool.ts @@ -23,6 +23,8 @@ interface ToolEventHandler { mouseOverMonomer?(event: Event): void; + mouseOnMoveMonomer?(event: Event): void; + mouseLeaveMonomer?(event: Event): void; mouseOverDrawingEntity?(event: Event): void; diff --git a/packages/ketcher-core/src/application/render/renderers/BaseMonomerRenderer.ts b/packages/ketcher-core/src/application/render/renderers/BaseMonomerRenderer.ts index 862128a845..5e8ac2db9b 100644 --- a/packages/ketcher-core/src/application/render/renderers/BaseMonomerRenderer.ts +++ b/packages/ketcher-core/src/application/render/renderers/BaseMonomerRenderer.ts @@ -269,6 +269,9 @@ export abstract class BaseMonomerRenderer extends BaseRenderer { this.editorEvents.mouseOverDrawingEntity.dispatch(event); this.editorEvents.mouseOverMonomer.dispatch(event); }) + .on('mousemove', (event) => { + this.editorEvents.mouseOnMoveMonomer.dispatch(event); + }) .on('mouseleave', (event) => { this.editorEvents.mouseLeaveDrawingEntity.dispatch(event); this.editorEvents.mouseLeaveMonomer.dispatch(event); @@ -319,5 +322,6 @@ export abstract class BaseMonomerRenderer extends BaseRenderer { this.rootElement?.remove(); this.rootElement = undefined; this.removeSelection(); + this.editorEvents.mouseLeaveMonomer.dispatch(); } } diff --git a/packages/ketcher-polymer-editor-react/src/Editor.tsx b/packages/ketcher-polymer-editor-react/src/Editor.tsx index 705876b523..22b7c69fc1 100644 --- a/packages/ketcher-polymer-editor-react/src/Editor.tsx +++ b/packages/ketcher-polymer-editor-react/src/Editor.tsx @@ -14,10 +14,10 @@ * limitations under the License. ***************************************************************************/ import { Provider } from 'react-redux'; -import { useEffect, useRef } from 'react'; +import { useCallback, useEffect, useMemo, useRef } from 'react'; import { Global, ThemeProvider } from '@emotion/react'; import { createTheme } from '@mui/material/styles'; -import { merge } from 'lodash'; +import { debounce, merge } from 'lodash'; import { SdfSerializer } from 'ketcher-core'; import monomersData from './data/monomers.sdf'; @@ -39,6 +39,7 @@ import { selectEditorActiveTool, selectEditorBondMode, selectTool, + showPreview, selectMode, } from 'state/common'; import { loadMonomerLibrary } from 'state/library'; @@ -69,6 +70,8 @@ import { PhosphateAvatar, RNABaseAvatar, } from 'components/shared/monomerOnCanvas'; +import { calculatePreviewPosition } from 'helpers'; +import StyledPreview from 'components/shared/MonomerPreview'; const muiTheme = createTheme(muiOverrides); @@ -112,6 +115,7 @@ function Editor({ theme }: EditorProps) { const canvasRef = useRef(null); const errorTooltipText = useAppSelector(selectErrorTooltipText); const editor = useAppSelector(selectEditor); + const activeTool = useAppSelector(selectEditorActiveTool); useEffect(() => { dispatch(createEditor({ theme, canvas: canvasRef.current })); const serializer = new SdfSerializer(); @@ -123,6 +127,16 @@ function Editor({ theme }: EditorProps) { }; }, [dispatch]); + const dispatchShowPreview = useCallback( + (payload) => dispatch(showPreview(payload)), + [dispatch], + ); + + const debouncedShowPreview = useMemo( + () => debounce((p) => dispatchShowPreview(p), 500), + [dispatchShowPreview], + ); + useEffect(() => { if (editor) { editor.events.error.add((errorText) => @@ -133,6 +147,44 @@ function Editor({ theme }: EditorProps) { } }, [editor]); + useEffect(() => { + editor?.events.mouseOverMonomer.add((e) => { + handleOpenPreview(e); + }); + editor?.events.mouseLeaveMonomer.add(() => { + handleClosePreview(); + }); + editor?.events.mouseOnMoveMonomer.add((e) => { + handleClosePreview(); + handleOpenPreview(e); + }); + }, [editor, activeTool]); + + const handleOpenPreview = useCallback( + (e) => { + const tools = ['erase', 'select-rectangle', 'bond-single']; + if (!tools.includes(activeTool)) { + handleClosePreview(); + return; + } + const monomer = e.target.__data__.monomer.monomerItem; + + const cardCoordinates = e.target.getBoundingClientRect(); + const top = calculatePreviewPosition(monomer, cardCoordinates); + const previewStyle = { + top, + left: `${cardCoordinates.left + cardCoordinates.width / 2}px`, + }; + debouncedShowPreview({ monomer, style: previewStyle }); + }, + [activeTool], + ); + + const handleClosePreview = () => { + debouncedShowPreview.cancel(); + dispatch(showPreview(undefined)); + }; + const handleCloseErrorTooltip = () => { dispatch(closeErrorTooltip()); }; @@ -192,11 +244,9 @@ function Editor({ theme }: EditorProps) { - - + - ({ boxShadow: '0px 2px 5px rgba(103, 104, 132, 0.15)', display: 'flex', flexDirection: 'column', - position: 'relative', '&.hidden': { visibility: 'hidden', diff --git a/packages/ketcher-polymer-editor-react/src/components/monomerLibrary/monomerLibraryGroup/MonomerGroup.tsx b/packages/ketcher-polymer-editor-react/src/components/monomerLibrary/monomerLibraryGroup/MonomerGroup.tsx index 709d25aa53..60746fc1d3 100644 --- a/packages/ketcher-polymer-editor-react/src/components/monomerLibrary/monomerLibraryGroup/MonomerGroup.tsx +++ b/packages/ketcher-polymer-editor-react/src/components/monomerLibrary/monomerLibraryGroup/MonomerGroup.tsx @@ -61,12 +61,14 @@ const MonomerGroup = ({ monomer: MonomerItemType, e: React.MouseEvent, ) => { + handleItemMouseLeave(); if (preview.monomer || !e.currentTarget) { return; } const cardCoordinates = e.currentTarget.getBoundingClientRect(); const previewStyle = calculatePreviewPosition(monomer, cardCoordinates); - debouncedShowPreview({ monomer, style: previewStyle }); + const style = { top: previewStyle, right: '-88px' }; + debouncedShowPreview({ monomer, style }); }; const selectMonomer = (monomer: MonomerItemType) => { diff --git a/packages/ketcher-polymer-editor-react/src/components/shared/MonomerPreview/index.tsx b/packages/ketcher-polymer-editor-react/src/components/shared/MonomerPreview/index.tsx index 5c75f320ad..a74c99fe2d 100644 --- a/packages/ketcher-polymer-editor-react/src/components/shared/MonomerPreview/index.tsx +++ b/packages/ketcher-polymer-editor-react/src/components/shared/MonomerPreview/index.tsx @@ -23,19 +23,21 @@ import { selectShowPreview } from 'state/common'; const MonomerPreview = ({ className }: IPreviewProps) => { const preview = useAppSelector(selectShowPreview); - const ContainerDinamic = useMemo( + const ContainerDynamic = useMemo( () => styled(Container)` - top: ${preview?.style || ''}; + top: ${preview?.style?.top || ''}; + left: ${preview?.style?.left || ''}; + right: ${preview?.style?.right || ''}; `, [preview], ); return ( preview?.monomer && ( - + {preview.monomer.struct.name} - + ) ); }; @@ -45,7 +47,6 @@ const StyledPreview = styled(MonomerPreview)` position: absolute; width: ${preview.width}px; height: ${preview.height}px; - left: 50%; transform: translate(-50%, 0); `; diff --git a/packages/ketcher-polymer-editor-react/src/helpers/calculatePreviewPosition.ts b/packages/ketcher-polymer-editor-react/src/helpers/calculatePreviewPosition.ts index b769e4cdb6..33e05c3946 100644 --- a/packages/ketcher-polymer-editor-react/src/helpers/calculatePreviewPosition.ts +++ b/packages/ketcher-polymer-editor-react/src/helpers/calculatePreviewPosition.ts @@ -30,9 +30,9 @@ export const calculatePreviewPosition = ( } const top = - target.top > preview.height + preview.gap - ? target.top - preview.gap - preview.height - preview.topPadding - : target.bottom + preview.gap - preview.topPadding; + target.top > preview.height + preview.gap + preview.topPadding + ? target.top - preview.gap - preview.height + : target.bottom + preview.gap; const newStyle = `${top}px`;