#4884 – Correct preview position calculation

epam · Aug 20, 2024 · 1d96a2a · 1d96a2a
1 parent 16f8ce7
commit 1d96a2a
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 43 deletions.
diff --git a/packages/ketcher-macromolecules/src/EditorEvents.tsx b/packages/ketcher-macromolecules/src/EditorEvents.tsx
@@ -35,6 +35,7 @@ import { useAppDispatch, useAppSelector } from 'hooks';
 import { debounce } from 'lodash';
 import { Nucleoside, Nucleotide } from 'ketcher-core';
 import {
+  calculateBondPreviewPosition,
   calculateMonomerPreviewTop,
   calculateNucleoElementPreviewTop,
 } from 'helpers';
@@ -159,49 +160,11 @@ export const EditorEvents = () => {
     (e) => {
       const polymerBond = e.target.__data__?.polymerBond;
       if (polymerBond) {
-        const polymerCoordinates = e.target.getBoundingClientRect();
-        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 style = calculateBondPreviewPosition(
+          polymerBond,
+          e.target.getBoundingClientRect(),
         );
 
-        // 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 = {
-            top: `${top + height + 10}px`,
-            left: `${left + width / 2}px`,
-          };
-        } else {
-          style = {
-            top: `${top + height / 2}px`,
-            left: `${left + width + 179}px`,
-          };
-        }
         handleOpenBondPreview(polymerBond, style);
         return;
       }

diff --git a/...ages/ketcher-macromolecules/src/components/preview/components/BondPreview/BondPreview.tsx b/...ages/ketcher-macromolecules/src/components/preview/components/BondPreview/BondPreview.tsx
@@ -7,6 +7,7 @@ import MonomerOverview from 'components/shared/ConnectionOverview/components/Mon
 import { useAttachmentPoints } from '../../hooks/useAttachmentPoints';
 import { Container } from './BondPreview.styles';
 import BondAttachmentPoints from 'components/preview/components/BondAttachmentPoints/BondAttachmentPoints';
+import { preview } from '../../../../constants';
 
 interface Props {
   className?: string;
@@ -95,8 +96,8 @@ const BondPreview = ({ className }: Props) => {
 const StyledPreview = styled(BondPreview)`
   z-index: 5;
   position: absolute;
-  width: 358px;
-  height: 268px;
+  width: ${preview.widthForBond}px;
+  height: ${preview.heightForBond}px;
   transform: translate(-50%, 0);
 `;
 

diff --git a/packages/ketcher-macromolecules/src/constants.ts b/packages/ketcher-macromolecules/src/constants.ts
@@ -31,6 +31,8 @@ export const preview = {
   gap: 5,
   topPadding: 16,
   heightForNucleotide: 105,
+  widthForBond: 358,
+  heightForBond: 268,
 } as const;
 
 export enum MonomerGroups {

diff --git a/packages/ketcher-macromolecules/src/helpers/calculatePreviewTop.ts b/packages/ketcher-macromolecules/src/helpers/calculatePreviewTop.ts
@@ -13,7 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  ***************************************************************************/
+import { PolymerBond } from 'ketcher-core';
 import { preview } from '../constants';
+import { PreviewStyle } from 'state/common';
+import assert from 'assert';
 
 export const calculateMonomerPreviewTop = createCalculatePreviewTopFunction(
   preview.height,
@@ -39,3 +42,73 @@ function createCalculatePreviewTopFunction(
     return `${top}px`;
   };
 }
+
+export const calculateBondPreviewPosition = (
+  bond: PolymerBond,
+  bondCoordinates: DOMRect,
+): PreviewStyle => {
+  const { firstMonomer, secondMonomer } = bond;
+
+  assert(secondMonomer);
+
+  const firstMonomerCoordinates = firstMonomer.renderer?.rootBoundingClientRect;
+  const secondMonomerCoordinates =
+    secondMonomer.renderer?.rootBoundingClientRect;
+
+  assert(firstMonomerCoordinates);
+  assert(secondMonomerCoordinates);
+
+  const left = Math.min(
+    bondCoordinates.left,
+    firstMonomerCoordinates.left,
+    secondMonomerCoordinates.left,
+  );
+  const top = Math.min(
+    bondCoordinates.top,
+    firstMonomerCoordinates.top,
+    secondMonomerCoordinates.top,
+  );
+  const right = Math.max(
+    bondCoordinates.right,
+    firstMonomerCoordinates.right,
+    secondMonomerCoordinates.right,
+  );
+  const bottom = Math.max(
+    bondCoordinates.bottom,
+    firstMonomerCoordinates.bottom,
+    secondMonomerCoordinates.bottom,
+  );
+
+  const width = right - left;
+  const height = bottom - top;
+
+  let style: PreviewStyle = {};
+
+  if (width > height) {
+    let topValue: number;
+    if (top > preview.height + preview.gap) {
+      topValue = top - preview.heightForBond - preview.gap;
+    } else {
+      topValue = bottom + preview.gap;
+    }
+
+    style = {
+      top: `${topValue}px`,
+      left: `${left + width / 2}px`,
+    };
+  } else {
+    let leftValue: number;
+    if (left > preview.widthForBond + preview.gap) {
+      leftValue = left - preview.widthForBond / 2 - preview.gap;
+    } else {
+      leftValue = right + preview.widthForBond / 2 + preview.gap;
+    }
+
+    style = {
+      top: `${top + height / 2}px`,
+      left: `${leftValue}px`,
+    };
+  }
+
+  return style;
+};