#3981 - Macro: Monomers are positioned below bonds that connect them

ketcher-autotests/tests/Macromolecule-editor/RNA-Builder/rna-library.spec.ts

@@ -27,10 +27,11 @@ import {
   takeRNABuilderScreenshot,
   waitForPageInit,
   waitForRender,
+  moveMouseAway,
 } from '@utils';
 import { getKet } from '@utils/formats';
 
-async function expandRnaBuilder(page: Page) {
+async function expandCollapseRnaBuilder(page: Page) {
   await page
     .locator('div')
     .filter({ hasText: /^RNA Builder$/ })
@@ -173,7 +174,7 @@ test.describe('RNA Library', () => {
     Test case: #2748, #2751 - RNA Builder. Accordion component
     Description: After click on arrow RNA Builder expanded.
     */
-    await expandRnaBuilder(page);
+    await expandCollapseRnaBuilder(page);
     await takeMonomerLibraryScreenshot(page);
   });
 
@@ -280,12 +281,13 @@ test.describe('RNA Library', () => {
     Test case: #2759 - Edit RNA mode
     Description: Custom presets added to Presets section.
     */
-    await expandRnaBuilder(page);
+    await expandCollapseRnaBuilder(page);
     await selectMonomer(page, Sugars.TwelveddR);
     await selectMonomer(page, Bases.Adenine);
     await selectMonomer(page, Phosphates.Test6Ph);
     await page.getByTestId('add-to-presets-btn').click();
     await page.getByTestId('12ddR(A)Test-6-Ph_A_12ddR_Test-6-Ph').click();
+    await expandCollapseRnaBuilder(page);
     await takePresetsScreenshot(page);
   });
 
@@ -294,7 +296,7 @@ test.describe('RNA Library', () => {
     Test case: #2507 - Add RNA monomers to canvas
     Description: Custom presets added to Canvas.
     */
-    await expandRnaBuilder(page);
+    await expandCollapseRnaBuilder(page);
     await selectMonomer(page, Sugars.ThreeA6);
     await selectMonomer(page, Bases.NBebnzylAdenine);
     await selectMonomer(page, Phosphates.Boranophosphate);
@@ -312,12 +314,12 @@ test.describe('RNA Library', () => {
     Test case: #2759 - Edit RNA mode
     Description: Custom presets added to Presets section.
     */
-    await expandRnaBuilder(page);
+    await expandCollapseRnaBuilder(page);
     await selectMonomer(page, Sugars.TwelveddR);
     await selectMonomer(page, Bases.Adenine);
     await page.getByTestId('add-to-presets-btn').click();
     await page.getByTestId('12ddR(A)_A_12ddR_.').click();
-    await clickInTheMiddleOfTheScreen(page);
+    await expandCollapseRnaBuilder(page);
     await takePresetsScreenshot(page);
   });
 
@@ -328,11 +330,12 @@ test.describe('RNA Library', () => {
     Test case: #2759 - Edit RNA mode
     Description: Custom presets added to Presets section.
     */
-    await expandRnaBuilder(page);
+    await expandCollapseRnaBuilder(page);
     await selectMonomer(page, Sugars.TwelveddR);
     await selectMonomer(page, Phosphates.Boranophosphate);
     await page.getByTestId('add-to-presets-btn').click();
     await page.getByTestId('12ddR()bP_._12ddR_bP').click();
+    await expandCollapseRnaBuilder(page);
     await takePresetsScreenshot(page);
   });
 
@@ -343,7 +346,7 @@ test.describe('RNA Library', () => {
     Test case: #2759 - Edit RNA mode
     Description: Custom presets added to Presets section.
     */
-    await expandRnaBuilder(page);
+    await expandCollapseRnaBuilder(page);
     await selectMonomer(page, Bases.Adenine);
     await selectMonomer(page, Phosphates.Boranophosphate);
     await page.getByTestId('add-to-presets-btn').click();
@@ -356,7 +359,7 @@ test.describe('RNA Library', () => {
     Test case: #2759 - Edit RNA mode
     Description: Custom presets added to Presets section and can be edited.
     */
-    await expandRnaBuilder(page);
+    await expandCollapseRnaBuilder(page);
     await selectMonomer(page, Sugars.TwelveddR);
     await selectMonomer(page, Bases.Adenine);
     await selectMonomer(page, Phosphates.Test6Ph);
@@ -369,7 +372,9 @@ test.describe('RNA Library', () => {
     await page.getByTestId('baA___N-benzyl-adenine').click();
     await page.getByTestId('save-btn').click();
     await page.getByTestId('12ddR(baA)Test-6-Ph_baA_12ddR_Test-6-Ph').click();
-    await clickInTheMiddleOfTheScreen(page);
+    // To avoid unstable test execution
+    // Allows see a right preset in a viewport
+    await expandCollapseRnaBuilder(page);
     await takePresetsScreenshot(page);
   });
 
@@ -380,7 +385,7 @@ test.describe('RNA Library', () => {
     Test case: #2759 - Edit RNA mode
     Description: Custom presets added to Presets section then can be duplicated and edited.
     */
-    await expandRnaBuilder(page);
+    await expandCollapseRnaBuilder(page);
     await selectMonomer(page, Sugars.TwelveddR);
     await selectMonomer(page, Bases.Adenine);
     await selectMonomer(page, Phosphates.Test6Ph);
@@ -389,6 +394,9 @@ test.describe('RNA Library', () => {
       button: 'right',
     });
     await page.getByTestId('duplicateandedit').locator('div').click();
+    // To avoid unstable test execution
+    // Allows see a right preset in a veiwport
+    await expandCollapseRnaBuilder(page);
     await page.getByTestId('12ddR(A)Test-6-Ph_Copy_A_12ddR_Test-6-Ph').click({
       button: 'right',
     });
@@ -406,7 +414,7 @@ test.describe('RNA Library', () => {
     Description: Custom presets added to Presets section and can be deleted.
     Test working incorrect because we have bug: https://github.com/epam/ketcher/issues/3561
     */
-    await expandRnaBuilder(page);
+    await expandCollapseRnaBuilder(page);
     await selectMonomer(page, Sugars.TwelveddR);
     await selectMonomer(page, Bases.Adenine);
     await selectMonomer(page, Phosphates.Test6Ph);
@@ -424,7 +432,7 @@ test.describe('RNA Library', () => {
     Test case: #2759 - Edit RNA mode
     Description: Custom presets added to Presets section and can be renamed.
     */
-    await expandRnaBuilder(page);
+    await expandCollapseRnaBuilder(page);
     await selectMonomer(page, Sugars.TwentyFiveR);
     await selectMonomer(page, Bases.NBebnzylAdenine);
     await selectMonomer(page, Phosphates.Boranophosphate);
@@ -444,14 +452,16 @@ test.describe('RNA Library', () => {
     Test case: #2759 - Edit RNA mode
     Description: RNA name autofilling when selects RNA parts.
     */
-    await expandRnaBuilder(page);
+    await expandCollapseRnaBuilder(page);
     await page.getByTestId('rna-builder-slot--sugar').click();
     await page.getByTestId("3A6___6-amino-hexanol (3' end)").click();
+    await moveMouseAway(page);
     await page.getByTestId('rna-builder-slot--base').click();
     await page.getByTestId('baA___N-benzyl-adenine').click();
+    await moveMouseAway(page);
     await page.getByTestId('rna-builder-slot--phosphate').click();
     await page.getByTestId('bP___Boranophosphate').click();
-    await clickInTheMiddleOfTheScreen(page);
+    await moveMouseAway(page);
     await takeRNABuilderScreenshot(page);
   });
 
@@ -460,9 +470,12 @@ test.describe('RNA Library', () => {
     Test case: #2759 - Edit RNA mode
     Description: RNA name added.
     */
-    await expandRnaBuilder(page);
+    await expandCollapseRnaBuilder(page);
     await page.getByTestId('rna-builder-slot--sugar').click();
     await page.getByTestId('25R___2,5-Ribose').click();
+    // To avoid unstable test execution
+    // Hide tooltip which overlays 'rna-builder-slot--base' element
+    await moveMouseAway(page);
     await page.getByTestId('rna-builder-slot--base').click();
     await page.getByTestId('A___Adenine').click();
     await page.getByTestId('rna-builder-slot--phosphate').click();
@@ -488,7 +501,7 @@ test.describe('RNA Library', () => {
       { type: 'phosphate', name: 'bP___Boranophosphate' },
     ];
 
-    await expandRnaBuilder(page);
+    await expandCollapseRnaBuilder(page);
 
     for (const monomer of monomers) {
       await page.getByTestId(`rna-builder-slot--${monomer.type}`).click();
@@ -503,7 +516,7 @@ test.describe('RNA Library', () => {
     Test case: #2507 - Add RNA monomers to canvas
     Description: Sugar-Base Combination added to Canvas.
     */
-    await expandRnaBuilder(page);
+    await expandCollapseRnaBuilder(page);
     await selectMonomer(page, Sugars.ThreeA6);
     await selectMonomer(page, Bases.NBebnzylAdenine);
     await page.getByTestId('add-to-presets-btn').click();
@@ -518,9 +531,12 @@ test.describe('RNA Library', () => {
     Test case: #2507 - Add RNA monomers to canvas
     Description: Sugar-Phosphate Combination added to Canvas.
     */
-    await expandRnaBuilder(page);
+    await expandCollapseRnaBuilder(page);
     await selectMonomer(page, Sugars.ThreeA6);
     await selectMonomer(page, Phosphates.Boranophosphate);
+    // To avoid unstable test execution
+    // Hide tooltip which overlays 'add-to-presets-btn' element
+    await moveMouseAway(page);
     await page.getByTestId('add-to-presets-btn').click();
     await page.getByTestId('3A6()bP_._3A6_bP').click();
     await clickInTheMiddleOfTheScreen(page);
@@ -533,7 +549,7 @@ test.describe('RNA Library', () => {
     Test case: #2507 - Add RNA monomers to canvas
     Description: Base-Phosphate Combination not added to Canvas.
     */
-    await expandRnaBuilder(page);
+    await expandCollapseRnaBuilder(page);
     await selectMonomer(page, Bases.NBebnzylAdenine);
     await selectMonomer(page, Phosphates.Boranophosphate);
     await page.getByTestId('add-to-presets-btn').click();

ketcher-autotests/tests/utils/index.ts

@@ -11,3 +11,4 @@ export * from './inputs';
 export * from './formats';
 export * from './macromolecules';
 export * from './query-features';
+export * from './moveMouseAway';

ketcher-autotests/tests/utils/moveMouseAway.ts

@@ -0,0 +1,7 @@
+import { Page } from '@playwright/test';
+
+export async function moveMouseAway(page: Page) {
+  const scrollCoordinatesX = 0;
+  const scrollCoordinatesY = 0;
+  await page.mouse.move(scrollCoordinatesX, scrollCoordinatesY);
+}

packages/ketcher-core/src/application/render/renderers/BaseMonomerRenderer.ts

@@ -54,8 +54,17 @@ export abstract class BaseMonomerRenderer extends BaseRenderer {
     this.monomerSymbolElement = document.querySelector(
       `${monomerSymbolElementId} .monomer-body`,
     ) as SVGUseElement | SVGRectElement;
-    const rect = this.monomerSymbolElement.getBoundingClientRect();
-    this.monomerSize = { width: rect.width, height: rect.height };
+    // Cross-browser width and height detection via getAttribute()
+    // as getBoundingClientRect() and getBBox() return 0 values in Firefox
+    // in this case (<path> inside <symbol>, <defs>)
+    this.monomerSize = {
+      width: +(
+        this.monomerSymbolElement?.getAttribute('data-actual-width') || 0
+      ),
+      height: +(
+        this.monomerSymbolElement?.getAttribute('data-actual-height') || 0
+      ),
+    };
   }
 
   private isSnakeBondForAttachmentPoint(

packages/ketcher-macromolecules/src/components/shared/monomerOnCanvas/Chem.tsx

@@ -21,6 +21,8 @@ export const ChemAvatar = () => (
         className="monomer-body"
         width="59"
         height="59"
+        data-actual-width="59"
+        data-actual-height="59"
         rx="1.5"
         fill="#F5F6F7"
       />

packages/ketcher-macromolecules/src/components/shared/monomerOnCanvas/Peptide.tsx

@@ -19,6 +19,10 @@ export const PeptideAvatar = () => (
     <symbol id="peptide" viewBox="0 0 70 61" width="70" height="61">
       <path
         className="monomer-body"
+        width="70"
+        height="61"
+        data-actual-width="70"
+        data-actual-height="61"
         d="M16.9236 1.00466C17.2801 0.383231 17.9418 6.10888e-07 18.6583 5.98224e-07L51.3417 2.04752e-08C52.0582 7.81036e-09 52.7199 0.383234 53.0764 1.00466L69.4289 29.5047C69.7826 30.1211 69.7826 30.8789 69.4289 31.4953L53.0764 59.9953C52.7199 60.6168 52.0582 61 51.3417 61H18.6583C17.9418 61 17.2801 60.6168 16.9236 59.9953L0.571095 31.4953C0.217407 30.8789 0.217408 30.1211 0.571096 29.5047L16.9236 1.00466Z"
       ></path>
     </symbol>

packages/ketcher-macromolecules/src/components/shared/monomerOnCanvas/Phosphate.tsx

@@ -17,7 +17,14 @@
 export const PhosphateAvatar = () => (
   <>
     <symbol id="phosphate" viewBox="0 0 70 70" width="70" height="70">
-      <rect className="monomer-body" width="56" height="56" rx="30" />
+      <rect
+        className="monomer-body"
+        width="56"
+        height="56"
+        data-actual-width="56"
+        data-actual-height="56"
+        rx="30"
+      />
     </symbol>
     <symbol
       id="phosphate-selection"

packages/ketcher-macromolecules/src/components/shared/monomerOnCanvas/RNABase.tsx

@@ -20,6 +20,8 @@ export const RNABaseAvatar = () => (
       <rect
         width="45"
         height="45"
+        data-actual-width="63.64"
+        data-actual-height="63.64"
         rx="2"
         transform-origin="center"
         transform="rotate(45)"

packages/ketcher-macromolecules/src/components/shared/monomerOnCanvas/Sugar.tsx

@@ -17,7 +17,14 @@
 export const SugarAvatar = () => (
   <>
     <symbol id="sugar" viewBox="0 0 70 70" width="70" height="70">
-      <rect className="monomer-body" width="57" height="57" rx="10" />
+      <rect
+        className="monomer-body"
+        width="57"
+        height="57"
+        data-actual-width="57"
+        data-actual-height="57"
+        rx="10"
+      />
     </symbol>
     <symbol id="sugar-selection" viewBox="-2 -2 100 100" width="70" height="70">
       <rect