From c33ade3086fa59c2d576e9a97f9066cd31f9bd68 Mon Sep 17 00:00:00 2001
From: Nikita_Vozisov <Nikita_Vozisov@epam.com>
Date: Tue, 26 Sep 2023 17:26:47 +0300
Subject: [PATCH] =?UTF-8?q?#3129=20=E2=80=93=20refactor=20after=20review?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/script/editor/tool/templatePreview.ts | 38 ++++++++++++-------
 1 file changed, 25 insertions(+), 13 deletions(-)

diff --git a/packages/ketcher-react/src/script/editor/tool/templatePreview.ts b/packages/ketcher-react/src/script/editor/tool/templatePreview.ts
index 5c86aede10..cedeb42c05 100644
--- a/packages/ketcher-react/src/script/editor/tool/templatePreview.ts
+++ b/packages/ketcher-react/src/script/editor/tool/templatePreview.ts
@@ -99,27 +99,29 @@ class TemplatePreview {
   movePreview(event: PointerEvent) {
     this.position = this.editor.render.page2obj(event);
 
-    const ci = this.getPreviewTarget();
-    const isMouseAwayFromAtomsAndBonds = !ci;
+    const previewTarget = this.getPreviewTarget();
+    const isMouseAwayFromAtomsAndBonds = !previewTarget;
     const isPreviewTargetChanged =
-      ci && this.lastPreviewId !== getUniqueCiId(ci);
+      previewTarget && this.lastPreviewId !== getUniqueCiId(previewTarget);
 
     const shouldHidePreview =
       isMouseAwayFromAtomsAndBonds || isPreviewTargetChanged;
 
     const shouldShowPreview =
-      ci && !this.connectedPreviewAction && !this.connectedPreviewTimeout;
+      previewTarget &&
+      !this.connectedPreviewAction &&
+      !this.connectedPreviewTimeout;
 
     if (shouldHidePreview) {
       this.hideConnectedPreview();
     }
 
     if (shouldShowPreview) {
-      this.lastPreviewId = getUniqueCiId(ci);
+      this.lastPreviewId = getUniqueCiId(previewTarget);
       this.connectedPreviewTimeout = setTimeout(() => {
         this.previousPosition = this.position;
         this.hideFloatingPreview();
-        this.showConnectedPreview(event, ci);
+        this.showConnectedPreview(event, previewTarget);
       }, PREVIEW_DELAY);
     } else if (shouldHidePreview) {
       if (!this.floatingPreview) {
@@ -127,18 +129,28 @@ class TemplatePreview {
         this.previousPosition = this.position;
         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(false, null, { resizeCanvas: false });
-        this.hoverFusedItems(ci, event);
+        this.moveFloatingPreview(previewTarget, event);
       }
     }
   }
 
-  private hoverFusedItems(ci: ClosestItemType | null, event: PointerEvent) {
+  private moveFloatingPreview(
+    previewTarget: ClosestItemType | null,
+    event: PointerEvent,
+  ) {
+    const dist = this.position.sub(this.previousPosition);
+    this.previousPosition = this.position;
+    fromMultipleMove(this.restruct, this.floatingPreview, dist);
+    this.editor.render.update(false, null, { resizeCanvas: false });
+    this.hoverFusedItems(previewTarget, event);
+  }
+
+  private hoverFusedItems(
+    closestItem: ClosestItemType | null,
+    event: PointerEvent,
+  ) {
     if (this.mode === 'fg') {
-      this.editor.hover(ci, null, event);
+      this.editor.hover(closestItem, null, event);
     } else {
       const mergeItems = getItemsToFuse(this.editor, this.floatingPreview);
       this.editor.hover(getHoverToFuse(mergeItems));