Backmerge: #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);
@@ -313,7 +315,7 @@ test.describe('RNA Library', () => {
     Description: RNA added to canvas when Sugar does not contain R3 attachment point.
     The test is currently not functioning correctly as the bug has not been fixed
     */
-    await expandRnaBuilder(page);
+    await expandCollapseRnaBuilder(page);
     await selectMonomer(page, Sugars.ThreeSS6);
     await selectMonomer(page, Bases.NBebnzylAdenine);
     await selectMonomer(page, Phosphates.Boranophosphate);
@@ -331,12 +333,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);
   });
 
@@ -347,11 +349,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);
   });
 
@@ -362,7 +365,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();
@@ -375,7 +378,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);
@@ -388,7 +391,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);
   });
 
@@ -399,7 +404,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);
@@ -408,6 +413,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',
     });
@@ -425,7 +433,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);
@@ -443,7 +451,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);
@@ -463,14 +471,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);
   });
 
@@ -479,9 +489,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();
@@ -507,7 +520,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();
@@ -522,7 +535,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();
@@ -537,9 +550,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);
@@ -552,7 +568,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/test-data/Molfiles-V3000/snake-mode-peptides-expected.mol

@@ -1,24 +1,24 @@
 
-  -INDIGO-01152421242D
+  -INDIGO-02072406552D
 
   0  0  0  0  0  0  0  0  0  0  0 V3000
 M  V30 BEGIN CTAB
 M  V30 COUNTS 12 11 0 0 0
 M  V30 BEGIN ATOM
 M  V30 1 A 0.466667 -0.466667 0.0 0 CLASS=AA SEQID=1 ATTCHORD=(2 2 Br)
-M  V30 2 meC 1.26259 -0.466667 0.0 0 CLASS=AA SEQID=2 ATTCHORD=(4 1 Al 3 Br)
-M  V30 3 dD 2.05851 -0.466667 0.0 0 CLASS=AA SEQID=3 ATTCHORD=(4 2 Al 12 Br)
-M  V30 4 dF 3.65036 -0.466667 0.0 0 CLASS=AA SEQID=5 ATTCHORD=(4 12 Al 5 Br)
-M  V30 5 Phg 4.44628 -0.466667 0.0 0 CLASS=AA SEQID=6 ATTCHORD=(4 4 Al 6 Br)
-M  V30 6 Hhs 5.2422 -0.466667 0.0 0 CLASS=AA SEQID=7 ATTCHORD=(4 5 Al 7 Br)
+M  V30 2 meC 1.26667 -0.466667 0.0 0 CLASS=AA SEQID=2 ATTCHORD=(4 1 Al 3 Br)
+M  V30 3 dD 2.06667 -0.466667 0.0 0 CLASS=AA SEQID=3 ATTCHORD=(4 2 Al 12 Br)
+M  V30 4 dF 3.66667 -0.466667 0.0 0 CLASS=AA SEQID=5 ATTCHORD=(4 12 Al 5 Br)
+M  V30 5 Phg 4.46667 -0.466667 0.0 0 CLASS=AA SEQID=6 ATTCHORD=(4 4 Al 6 Br)
+M  V30 6 Hhs 5.26667 -0.466667 0.0 0 CLASS=AA SEQID=7 ATTCHORD=(4 5 Al 7 Br)
 M  V30 7 D-aIle 0.466667 -1.27333 0.0 0 CLASS=AA SEQID=8 ATTCHORD=(4 6 Al 10 -
 M  V30 Br)
-M  V30 8 xiIle 2.85443 -1.27333 0.0 0 CLASS=AA SEQID=11 ATTCHORD=(4 9 Al 11 B-
+M  V30 8 xiIle 2.86667 -1.27333 0.0 0 CLASS=AA SEQID=11 ATTCHORD=(4 9 Al 11 B-
 M  V30 r)
-M  V30 9 meK 2.05851 -1.27333 0.0 0 CLASS=AA SEQID=10 ATTCHORD=(4 10 Al 8 Br)
-M  V30 10 meM 1.26259 -1.27333 0.0 0 CLASS=AA SEQID=9 ATTCHORD=(4 7 Al 9 Br)
-M  V30 11 Asp-al 3.65036 -1.27333 0.0 0 CLASS=AA SEQID=12 ATTCHORD=(2 8 Al)
-M  V30 12 DMetSO 2.85443 -0.466667 0.0 0 CLASS=AA SEQID=4 ATTCHORD=(4 3 Al 4 -
+M  V30 9 meK 2.06667 -1.27333 0.0 0 CLASS=AA SEQID=10 ATTCHORD=(4 10 Al 8 Br)
+M  V30 10 meM 1.26667 -1.27333 0.0 0 CLASS=AA SEQID=9 ATTCHORD=(4 7 Al 9 Br)
+M  V30 11 Asp-al 3.66667 -1.27333 0.0 0 CLASS=AA SEQID=12 ATTCHORD=(2 8 Al)
+M  V30 12 DMetSO 2.86667 -0.466667 0.0 0 CLASS=AA SEQID=4 ATTCHORD=(4 3 Al 4 -
 M  V30 Br)
 M  V30 END ATOM
 M  V30 BEGIN BOND

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