From 5e4013cc9471559dbbfe2817a5b83c9737847d2c Mon Sep 17 00:00:00 2001
From: Nikita Chistousov <nikita_chistousov@epam.com>
Date: Fri, 16 Aug 2024 12:49:13 +0200
Subject: [PATCH] =?UTF-8?q?#4884=20=E2=80=93=20Change=20preview=20position?=
 =?UTF-8?q?=20calculation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/EditorEvents.tsx                      | 33 +++++++++++++++++--
 1 file changed, 31 insertions(+), 2 deletions(-)

diff --git a/packages/ketcher-macromolecules/src/EditorEvents.tsx b/packages/ketcher-macromolecules/src/EditorEvents.tsx
index 7f1392feae..4eb869823f 100644
--- a/packages/ketcher-macromolecules/src/EditorEvents.tsx
+++ b/packages/ketcher-macromolecules/src/EditorEvents.tsx
@@ -160,7 +160,36 @@ export const EditorEvents = () => {
       const polymerBond = e.target.__data__?.polymerBond;
       if (polymerBond) {
         const polymerCoordinates = e.target.getBoundingClientRect();
-        const { width, height, top, left } = polymerCoordinates;
+        const firstMonomerCoordinates =
+          polymerBond.firstMonomer.renderer.rootBoundingClientRect;
+        const secondMonomerCoordinates =
+          polymerBond.secondMonomer.renderer.rootBoundingClientRect;
+        const minX = Math.min(
+          polymerCoordinates.left,
+          firstMonomerCoordinates.left,
+          secondMonomerCoordinates.left,
+        );
+        const minY = Math.min(
+          polymerCoordinates.top,
+          firstMonomerCoordinates.top,
+          secondMonomerCoordinates.top,
+        );
+        const maxX = Math.max(
+          polymerCoordinates.right,
+          firstMonomerCoordinates.right,
+          secondMonomerCoordinates.right,
+        );
+        const maxY = Math.max(
+          polymerCoordinates.bottom,
+          firstMonomerCoordinates.bottom,
+          secondMonomerCoordinates.bottom,
+        );
+
+        // const { width, height, top, left } = polymerCoordinates;
+        const top = minY;
+        const left = minX;
+        const width = maxX - minX;
+        const height = maxY - minY;
         let style = { top: '', left: '' };
         if (width > height) {
           style = {
@@ -170,7 +199,7 @@ export const EditorEvents = () => {
         } else {
           style = {
             top: `${top + height / 2}px`,
-            left: `${left + width + 10}px`,
+            left: `${left + width + 179}px`,
           };
         }
         handleOpenBondPreview(polymerBond, style);