#3129 - Full template preview following mouse cursor

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

@@ -95,4 +95,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);
+  });
 });

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

@@ -42,6 +42,7 @@ export function fromTemplateOnCanvas(
     template.molecule,
     pos,
     angle,
+    true,
   );
 
   action.addOp(new CalcImplicitH(pasteItems.atoms).perform(restruct));

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 = {