#3129 - Full template preview following mouse cursor (#3252)

* #3129 - Full template preview following mouse cursor: draft 4

* #3129 - Full template preview following mouse cursor

* #3129 - Full template preview following mouse cursor
- Fix e2e

* #3129 – fixed showing preview for preview-bonds

* #3129 – fixed position for preview

* #3129 – fixed showing preview for functional groups

* #3129 – fixed failing tests

* #3129 – fixed failing tests

* #3129 – refactor after review

---------

Co-authored-by: Aliaksei <[email protected]>
Co-authored-by: Nikita_Vozisov <[email protected]>

ketcher-autotests/tests/Templates/Salts-and-Solvents/check-new-salt-or-solvent-is-replacing.spec.ts

@@ -8,11 +8,16 @@ import {
   clickInTheMiddleOfTheScreen,
   takeEditorScreenshot,
   STRUCTURE_LIBRARY_BUTTON_NAME,
+  waitForPageInit,
 } from '@utils';
 
-test.describe('Open Ketcher', () => {
+test.describe('Salts and Solvents replacement', () => {
   test.beforeEach(async ({ page }) => {
-    await page.goto('');
+    await waitForPageInit(page);
+  });
+
+  test.afterEach(async ({ page }) => {
+    await takeEditorScreenshot(page);
   });
 
   test('Verify if the new Salt or Solvent is replacing old one', async ({
@@ -31,7 +36,6 @@ Test case: EPMLSOPKET-12972 - 'Check that new Salt or Solvent is replacing the p
     await page.getByRole('tab', { name: 'Salts and Solvents' }).click();
     await selectSaltsAndSolvents(SaltsAndSolvents.AceticAcid, page);
     await clickInTheMiddleOfTheScreen(page);
-    await takeEditorScreenshot(page);
   });
 
   test('Verify if Methan Sulphonic Acid replace the Nitrogen atom', async ({

ketcher-autotests/tests/Templates/Template-Manipulations/Manipulations-rings.spec.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-magic-numbers */
-import { test, Page } from '@playwright/test';
+import { test, Page, expect } from '@playwright/test';
 import { BondType } from '@utils/canvas/types';
 import { getAtomByIndex } from '@utils/canvas/atoms';
 import { selectButtonByTitle } from '@utils/clicks/selectButtonByTitle';
@@ -20,9 +20,9 @@ import {
   waitForPageInit,
 } from '@utils';
 
-async function createToolTipScreenshot(type: RingButton, page: Page) {
-  await page.getByRole('button', { name: type }).hover();
-  await takeEditorScreenshot(page);
+async function checkTooltip(type: RingButton, page: Page) {
+  const templateButton = page.getByRole('button', { name: type });
+  await expect(templateButton).toHaveAttribute('title', `${type} (T)`);
 }
 
 async function placeTwoRingsMergedByAtom(type: RingButton, page: Page) {
@@ -78,9 +78,8 @@ async function checkHistoryForBondDeletion(page: Page) {
   await selectTopPanelButton(TopPanelButton.Undo, page);
 }
 
-async function ManipulateRingsByName(type: RingButton, page: Page) {
-  // checking the tooltip
-  await createToolTipScreenshot(type, page);
+async function manipulateRingsByName(type: RingButton, page: Page) {
+  await checkTooltip(type, page);
   await placeTwoRingsMergedByAtom(type, page);
   await takeEditorScreenshot(page);
   await selectTopPanelButton(TopPanelButton.Clear, page);
@@ -110,43 +109,13 @@ test.describe('Templates - Rings manipulations', () => {
     await takeEditorScreenshot(page);
   });
 
-  test('Benzene', async ({ page }) => {
-    // EPLMSOCKET-1668
-    await ManipulateRingsByName(RingButton.Benzene, page);
-  });
-
-  test('Cyclopentadiene', async ({ page }) => {
-    // EPLMSOCKET-1675
-    await ManipulateRingsByName(RingButton.Cyclopentane, page);
-  });
-
-  test('Cyclohexane', async ({ page }) => {
-    // EPLMSOCKET-1677
-    await ManipulateRingsByName(RingButton.Cyclohexane, page);
-  });
-
-  test('Cyclopentane', async ({ page }) => {
-    // EPLMSOCKET-1679
-    await ManipulateRingsByName(RingButton.Cyclopentane, page);
-  });
+  const templates = Object.values(RingButton);
 
-  test('Cyclopropane', async ({ page }) => {
-    // EPLMSOCKET-1680
-    await ManipulateRingsByName(RingButton.Cyclopropane, page);
-  });
-
-  test('Cyclobutane', async ({ page }) => {
-    // EPLMSOCKET-1681
-    await ManipulateRingsByName(RingButton.Cyclobutane, page);
-  });
-
-  test('Cycloheptane', async ({ page }) => {
-    // EPLMSOCKET-1682
-    await ManipulateRingsByName(RingButton.Cycloheptane, page);
-  });
-
-  test('Cyclooctane', async ({ page }) => {
-    // EPLMSOCKET-1683
-    await ManipulateRingsByName(RingButton.Benzene, page);
-  });
+  for (const template of templates) {
+    test(template, async ({ page }) => {
+      // EPLMSOPCKET-1668, EPLMSOPCKET-1675, EPLMSOPCKET-1677, EPLMSOPCKET-1679, EPLMSOPCKET-1680, EPLMSOPCKET-1681
+      // EPLMSOPCKET-1682, EPLMSOPCKET-1683
+      await manipulateRingsByName(template, page);
+    });
+  }
 });

ketcher-autotests/tests/User-Interface/Preview-For-Abbreviated-Structures/preview-for-abbreviated-structures.spec.ts

@@ -96,4 +96,41 @@ test.describe('Preview for abbreviated structures: functional groups', () => {
     await delay(DELAY_IN_SECONDS.ONE);
     await takeEditorScreenshot(page);
   });
+
+  test('Should show a preview following the mouse cursor', async ({ page }) => {
+    const bondId = 2;
+    const shift = 100;
+    await selectRingButton(RingButton.Benzene, page);
+    const bondPosition = await getBondByIndex(
+      page,
+      { type: BondType.SINGLE },
+      bondId,
+    );
+    const pointAwayFromBond = {
+      x: bondPosition.x + shift,
+      y: bondPosition.y + shift,
+    };
+    await page.mouse.move(pointAwayFromBond.x, pointAwayFromBond.y);
+    await takeEditorScreenshot(page);
+  });
+
+  test('Should show a preview following the mouse cursor and hide it when a bond is hovered over', async ({
+    page,
+  }) => {
+    const bondId = 2;
+    const shift = 100;
+    await selectRingButton(RingButton.Benzene, page);
+    const bondPosition = await getBondByIndex(
+      page,
+      { type: BondType.SINGLE },
+      bondId,
+    );
+    const pointAwayFromBond = {
+      x: bondPosition.x + shift,
+      y: bondPosition.y + shift,
+    };
+    await takeEditorScreenshot(page);
+    await page.mouse.move(pointAwayFromBond.x, pointAwayFromBond.y);
+    await takeEditorScreenshot(page);
+  });
 });

ketcher-autotests/tests/test-data/Rxn-V2000/rxn-1465-to-open-expected.rxn

@@ -1,11 +1,11 @@
 $RXN
 
- -INDIGO- 0918230300
+ -INDIGO- 0925231455
 
   1  1
 $MOL
 
-  -INDIGO-09182303002D
+  -INDIGO-09252314552D
 
  11 10  0  0  0  0  0  0  0  0999 V2000
    10.7449   -8.0500    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
@@ -32,7 +32,7 @@ $MOL
 M  END
 $MOL
 
-  -INDIGO-09182303002D
+  -INDIGO-09252314552D
 
   6  6  0  0  0  0  0  0  0  0999 V2000
    17.9598  -11.5501    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0

packages/ketcher-core/src/application/editor/actions/paste.ts

@@ -26,6 +26,8 @@ import {
   TextCreate,
   CalcImplicitH,
   FragmentSetProperties,
+  BondAttr,
+  AtomAttr,
 } from '../operations';
 import { fromRGroupAttrs, fromUpdateIfThen } from './rgroup';
 
@@ -39,6 +41,7 @@ export function fromPaste(
   pstruct,
   point,
   angle = 0,
+  isPreview = false,
 ): [Action, { atoms: number[]; bonds: number[] }] {
   const xy0 = getStructCenter(pstruct);
   const offset = Vec2.diff(point, xy0);
@@ -114,10 +117,12 @@ export function fromPaste(
     action.addOp(operation);
 
     pasteItems.bonds.push(operation.data.bid);
+    new BondAttr(operation.data.bid, 'isPreview', isPreview).perform(restruct);
   });
 
   pasteItems.atoms.forEach((aid) => {
     action.addOp(new CalcImplicitH([aid]).perform(restruct));
+    new AtomAttr(aid, 'isPreview', isPreview).perform(restruct);
   });
 
   pstruct.sgroups.forEach((sg: SGroup) => {

packages/ketcher-core/src/application/editor/actions/template.ts

@@ -35,13 +35,14 @@ export function fromTemplateOnCanvas(
   restruct,
   template,
   pos,
-  angle,
+  angle = 0,
 ): [Action, { atoms: number[]; bonds: number[] }] {
   const [action, pasteItems] = fromPaste(
     restruct,
     template.molecule,
     pos,
     angle,
+    true,
   );
 
   action.addOp(new CalcImplicitH(pasteItems.atoms).perform(restruct));

packages/ketcher-react/src/script/editor/shared/closest.js

@@ -147,7 +147,10 @@ function findClosestAtom(restruct, pos, skip, minDist) {
     ) {
       return null;
     }
-    if (aid === skipId) return;
+    const isSkippedAtom = aid === skipId || atom.a.isPreview;
+    if (isSkippedAtom) {
+      return;
+    }
 
     const dist = Vec2.dist(pos, atom.a.pp);
 
@@ -182,7 +185,10 @@ function findClosestBond(restruct, pos, skip, minDist, options) {
   let minCDist = minDist;
 
   restruct.bonds.forEach((bond, bid) => {
-    if (bid === skipId) return;
+    const isSkippedBond = bid === skipId || bond.b.isPreview;
+    if (isSkippedBond) {
+      return;
+    }
 
     const p1 = restruct.atoms.get(bond.b.begin).a.pp;
     const p2 = restruct.atoms.get(bond.b.end).a.pp;

packages/ketcher-react/src/script/editor/tool/paste.ts

@@ -61,16 +61,18 @@ class PasteTool implements Tool {
     this.action = action;
     this.editor.update(this.action, true);
 
-    action.mergeWith(
-      expandSGroupWithMultipleAttachmentPoint(this.editor.render.ctab),
-    );
+    action.mergeWith(expandSGroupWithMultipleAttachmentPoint(this.restruct));
 
     this.editor.update(this.action, true);
 
     this.mergeItems = getItemsToFuse(this.editor, pasteItems);
     this.editor.hover(getHoverToFuse(this.mergeItems), this);
   }
 
+  private get restruct() {
+    return this.editor.render.ctab;
+  }
+
   mousedown(event) {
     if (
       !this.isSingleContractedGroup ||
@@ -81,7 +83,7 @@ class PasteTool implements Tool {
 
     if (this.action) {
       // remove pasted group from canvas to find closest group correctly
-      this.action?.perform(this.editor.render.ctab);
+      this.action?.perform(this.restruct);
     }
 
     const closestGroupItem = this.editor.findItem(event, ['functionalGroups']);
@@ -91,7 +93,7 @@ class PasteTool implements Tool {
     if (!closestGroupItem || SGroup.isSaltOrSolvent(closestGroup?.data.name)) {
       // recreate action and continue as usual
       const [action] = fromPaste(
-        this.editor.render.ctab,
+        this.restruct,
         this.struct,
         this.editor.render.page2obj(event),
       );
@@ -110,7 +112,7 @@ class PasteTool implements Tool {
 
   mousemove(event) {
     if (this.action) {
-      this.action?.perform(this.editor.render.ctab);
+      this.action?.perform(this.restruct);
     }
 
     if (this.dragCtx) {
@@ -149,13 +151,13 @@ class PasteTool implements Tool {
         return;
 
       if (this.dragCtx.action) {
-        this.dragCtx.action.perform(this.editor.render.ctab);
+        this.dragCtx.action.perform(this.restruct);
       }
 
       this.dragCtx.angle = degrees;
 
       const [action] = fromTemplateOnAtom(
-        this.editor.render.ctab,
+        this.restruct,
         prepareTemplateFromSingleGroup(this.struct),
         atomId,
         angle,
@@ -174,7 +176,7 @@ class PasteTool implements Tool {
       });
       // common paste logic
       const [action, pasteItems] = fromPaste(
-        this.editor.render.ctab,
+        this.restruct,
         this.struct,
         this.editor.render.page2obj(event),
       );
@@ -215,10 +217,10 @@ class PasteTool implements Tool {
       delete this.dragCtx;
 
       dragCtx.action = dragCtx.action
-        ? fromItemsFuse(this.editor.render.ctab, dragCtx.mergeItems).mergeWith(
+        ? fromItemsFuse(this.restruct, dragCtx.mergeItems).mergeWith(
             dragCtx.action,
           )
-        : fromItemsFuse(this.editor.render.ctab, dragCtx.mergeItems);
+        : fromItemsFuse(this.restruct, dragCtx.mergeItems);
 
       this.editor.hover(null);
       this.editor.update(dragCtx.action);
@@ -247,6 +249,10 @@ class PasteTool implements Tool {
   mouseleave() {
     this.cancel();
   }
+
+  mouseLeaveClientArea() {
+    this.cancel();
+  }
 }
 
 type Template = {