#3129 – fixed showing preview for functional groups

epam · Sep 25, 2023 · d8fe7c5 · d8fe7c5
1 parent 0b5856b
commit d8fe7c5
Showing 1 changed file with 21 additions and 10 deletions.
diff --git a/packages/ketcher-react/src/script/editor/tool/templatePreview.ts b/packages/ketcher-react/src/script/editor/tool/templatePreview.ts
@@ -30,16 +30,16 @@ import { MODES } from 'src/constants';
 import { getAngleFromEvent, getBondFlipSign } from './template';
 
 const PREVIEW_DELAY = 300;
-type CiType = { map: string; id: number; dist: number };
+type ClosestItemType = { map: string; id: number; dist: number };
 
-function getUniqueCiId(ci: CiType) {
+function getUniqueCiId(ci: ClosestItemType) {
   return `${ci.id}-${ci.map}`;
 }
 
 class TemplatePreview {
   private readonly editor: Editor;
   private readonly template;
-  private readonly mode;
+  private readonly mode: 'fg' | null;
   private floatingPreviewAction: Action | null;
   private connectedPreviewAction: Action | null;
   private connectedPreviewTimeout: ReturnType<typeof setTimeout> | null = null;
@@ -84,7 +84,10 @@ class TemplatePreview {
   }
 
   private getPreviewTarget() {
-    const ci: CiType | null = this.editor.findItem(event, ['atoms', 'bonds']);
+    const ci: ClosestItemType | null = this.editor.findItem(event, [
+      'atoms',
+      'bonds',
+    ]);
 
     if (ci && this.restruct.molecule[ci.map].get(ci.id)?.isPreview === false) {
       return ci;
@@ -93,7 +96,7 @@ class TemplatePreview {
     }
   }
 
-  movePreview(event: MouseEvent) {
+  movePreview(event: PointerEvent) {
     this.position = this.editor.render.page2obj(event);
 
     const ci = this.getPreviewTarget();
@@ -122,18 +125,26 @@ class TemplatePreview {
       if (!this.floatingPreview) {
         this.showFloatingPreview(this.position);
         this.previousPosition = this.position;
-        this.editor.render.update(true, null, { resizeCanvas: false });
+        this.editor.render.update(false, null, { resizeCanvas: false });
       } else {
         const dist = this.position.sub(this.previousPosition);
         this.previousPosition = this.position;
         fromMultipleMove(this.restruct, this.floatingPreview, dist);
-        this.editor.render.update(true, null, { resizeCanvas: false });
-        const mergeItems = getItemsToFuse(this.editor, this.floatingPreview);
-        this.editor.hover(getHoverToFuse(mergeItems));
+        this.editor.render.update(false, null, { resizeCanvas: false });
+        this.hoverFusedItems(ci, event);
       }
     }
   }
 
+  private hoverFusedItems(ci: ClosestItemType | null, event: PointerEvent) {
+    if (this.mode === 'fg') {
+      this.editor.hover(ci, null, event);
+    } else {
+      const mergeItems = getItemsToFuse(this.editor, this.floatingPreview);
+      this.editor.hover(getHoverToFuse(mergeItems));
+    }
+  }
+
   private showFloatingPreview(position: Vec2) {
     [this.floatingPreviewAction, this.floatingPreview] = fromTemplateOnCanvas(
       this.restruct,
@@ -165,7 +176,7 @@ class TemplatePreview {
     }
   }
 
-  private showConnectedPreview(event: MouseEvent, ci: CiType) {
+  private showConnectedPreview(event: MouseEvent, ci: ClosestItemType) {
     if (ci.map === 'bonds' && !this.isModeFunctionalGroup) {
       const bond = this.struct.bonds.get(ci.id);