#4048 - Right-click menu appears away from structure or is not visibl…

…e at all on canvas (#4062) * #4048 - Right-click menu appears away from structure or is not visible at all on canvas #4048 - added rendering of context menus out of element with container-type: size - added moving context menu if it does not fit ketcher editor root element --------- Co-authored-by: Roman Rodionov <roman_rodionov@epam.com>
epam · Feb 9, 2024 · 6022471 · 6022471
1 parent d21854f
commit 6022471
Show file tree

Hide file tree

Showing 16 changed files with 164 additions and 83 deletions.
diff --git a/example/src/ModeControl/ModeControl.tsx b/example/src/ModeControl/ModeControl.tsx
@@ -17,7 +17,8 @@
 import { useState, useRef } from 'react';
 import styled from '@emotion/styled';
 import { Button, Popover } from '@mui/material';
-import { Icon } from 'ketcher-react';
+import { Icon, KETCHER_ROOT_NODE_CSS_SELECTOR } from 'ketcher-react';
+import { KETCHER_MACROMOLECULES_ROOT_NODE_SELECTOR } from 'ketcher-macromolecules';
 
 interface IStyledIconProps {
   expanded?: boolean;
@@ -99,7 +100,6 @@ const ModeLabel = styled('span')`
 `;
 
 const ModeControlButton = styled('div')`
-  width: 162px;
   height: 28px;
   display: flex;
   align-items: center;
@@ -185,7 +185,10 @@ export const ModeControl = ({ toggle, isPolymerEditor }: ModeProps) => {
         open={isExpanded}
         onClose={onClose}
         anchorEl={btnRef.current}
-        container={btnRef.current}
+        container={
+          document.querySelector(KETCHER_ROOT_NODE_CSS_SELECTOR) ||
+          document.querySelector(KETCHER_MACROMOLECULES_ROOT_NODE_SELECTOR)
+        }
         anchorOrigin={{
           vertical: 'bottom',
           horizontal: 'left',

diff --git a/ketcher-autotests/tests/Settings/Atoms/atoms-settings.spec.ts b/ketcher-autotests/tests/Settings/Atoms/atoms-settings.spec.ts
@@ -38,7 +38,10 @@ async function atomDefaultSettings(page: Page) {
 
 async function ringBondCountQuery(page: Page, menuItem: string) {
   await page.getByText(menuItem).click();
-  await page.locator('button:nth-child(5)').first().click();
+  await page
+    .getByRole('menuitem', { name: 'Ring bond count', exact: true })
+    .getByTestId('3-option')
+    .click();
 }
 
 async function substitutionCountQuery(page: Page, menuItem: string) {

diff --git a/...autotests/tests/Structure-Creating-&-Editing/Atom/Atom-Properties/atom-properties.spec.ts b/...autotests/tests/Structure-Creating-&-Editing/Atom/Atom-Properties/atom-properties.spec.ts
@@ -1560,7 +1560,7 @@ test.describe('Atom Properties', () => {
     // eslint-disable-next-line no-magic-numbers
     const atomIndices = [2, 4, 5];
     // eslint-disable-next-line no-magic-numbers
-    const optionIndices = [2, 5, 11];
+    const optionIndices = ['As drawn-option', '3-option', '9-option'];
 
     await drawBenzeneRing(page);
 
@@ -1737,7 +1737,7 @@ test.describe('Atom Properties', () => {
     // eslint-disable-next-line no-magic-numbers
     const anyAtom = [0, 1, 2, 3, 4, 5];
     // eslint-disable-next-line no-magic-numbers
-    const optionIndex = [3, 2, 3, 'Unsaturated', 7, 'aliphatic'];
+    const optionIndex = ['0-option', 2, 3, 'Unsaturated', 7, 'aliphatic'];
 
     await drawBenzeneRing(page);
 
@@ -1747,7 +1747,7 @@ test.describe('Atom Properties', () => {
 
       switch (i) {
         case 0:
-          await selectRingBondCountOption(page, atomIndex, option as number);
+          await selectRingBondCountOption(page, atomIndex, option as string);
           break;
         case 1:
           await selectHCountOption(page, atomIndex, option as number);

diff --git a/ketcher-autotests/tests/Structure-Creating-&-Editing/Atom/Atom-Properties/utils.ts b/ketcher-autotests/tests/Structure-Creating-&-Editing/Atom/Atom-Properties/utils.ts
@@ -167,12 +167,15 @@ export async function selectElementFromExtendedTable(
 export async function selectRingBondCountOption(
   page: Page,
   atomIndex: number,
-  optionIndex: number,
+  optionTestId: string,
 ) {
   await clickOnAtom(page, 'C', atomIndex, 'right');
   await page.getByText('Query properties').click();
   await page.getByText('Ring bond count').click();
-  await page.locator(`button:nth-child(${optionIndex})`).first().click();
+  await page
+    .getByRole('menuitem', { name: 'Ring bond count', exact: true })
+    .getByTestId(optionTestId)
+    .click();
   await resetCurrentTool(page);
 }
 

diff --git a/...xpand-Remove-abbreviation-context-menu-with-selected-tools-1-chromium-linux.png b/...xpand-Remove-abbreviation-context-menu-with-selected-tools-1-chromium-linux.png
diff --git a/packages/ketcher-macromolecules/src/components/FullscreenButton/FullscreenButton.tsx b/packages/ketcher-macromolecules/src/components/FullscreenButton/FullscreenButton.tsx
@@ -16,7 +16,7 @@
 
 import { IconButton } from 'ketcher-react';
 import styled from '@emotion/styled';
-import { EditorQuerySelector } from '../../constants';
+import { KETCHER_MACROMOLECULES_ROOT_NODE_SELECTOR } from '../../constants';
 import { useState } from 'react';
 
 const requestFullscreen = (element: HTMLElement) => {
@@ -61,7 +61,8 @@ export const FullscreenButton = (props) => {
   const toggleFullscreen = () => {
     // TODO: add selector / ref prop when will be shared component
     const fullscreenElement: HTMLElement =
-      document.querySelector(EditorQuerySelector) || document.documentElement;
+      document.querySelector(KETCHER_MACROMOLECULES_ROOT_NODE_SELECTOR) ||
+      document.documentElement;
     fullScreenMode ? exitFullscreen() : requestFullscreen(fullscreenElement);
     setFullScreenMode(!fullScreenMode);
   };

diff --git a/packages/ketcher-macromolecules/src/components/Layout/Layout.tsx b/packages/ketcher-macromolecules/src/components/Layout/Layout.tsx
@@ -39,6 +39,7 @@ const RowMain = styled.div(({ theme }) => ({
   display: 'flex',
   justifyContent: 'space-between',
   columnGap: '12px',
+  containerType: 'size',
 }));
 
 const Row = styled.div(({ theme }) => ({

diff --git a/packages/ketcher-macromolecules/src/components/contextMenu/RNAContextMenu.test.tsx b/packages/ketcher-macromolecules/src/components/contextMenu/RNAContextMenu.test.tsx
@@ -17,7 +17,7 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { ModalContainer } from 'components/modal/modalContainer';
 import { RnaBuilder } from 'components/monomerLibrary/RnaBuilder';
-import { MONOMER_TYPES } from 'src/constants';
+import { EditorClassName, MONOMER_TYPES } from 'src/constants';
 import mockedPresets from './mockedPresets.json';
 
 jest.mock('../../../src/helpers/dom.ts', () => {
@@ -70,11 +70,13 @@ describe('RNA ContextMenu', () => {
   it('should render contextMenu correctly', () => {
     render(
       withThemeAndStoreProvider(
-        <RnaBuilder
-          libraryName={MONOMER_TYPES.RNA}
-          duplicatePreset={duplicatePreset}
-          editPreset={editPreset}
-        />,
+        <div className={EditorClassName}>
+          <RnaBuilder
+            libraryName={MONOMER_TYPES.RNA}
+            duplicatePreset={duplicatePreset}
+            editPreset={editPreset}
+          />
+        </div>,
         {
           library: {
             searchFilter: '',
@@ -95,11 +97,13 @@ describe('RNA ContextMenu', () => {
   it("should disable 'Delete Preset' menu when trying to delete default preset", () => {
     render(
       withThemeAndStoreProvider(
-        <RnaBuilder
-          libraryName={MONOMER_TYPES.RNA}
-          duplicatePreset={duplicatePreset}
-          editPreset={editPreset}
-        />,
+        <div className={EditorClassName}>
+          <RnaBuilder
+            libraryName={MONOMER_TYPES.RNA}
+            duplicatePreset={duplicatePreset}
+            editPreset={editPreset}
+          />
+        </div>,
         {
           library: {
             searchFilter: '',
@@ -121,7 +125,7 @@ describe('RNA ContextMenu', () => {
   it("should enable 'Delete Preset' when trying to delete non-default preset", () => {
     render(
       withThemeAndStoreProvider(
-        <div>
+        <div className={EditorClassName}>
           <RnaBuilder
             libraryName={MONOMER_TYPES.RNA}
             duplicatePreset={duplicatePreset}

diff --git a/packages/ketcher-macromolecules/src/components/contextMenu/RNAContextMenu.tsx b/packages/ketcher-macromolecules/src/components/contextMenu/RNAContextMenu.tsx
@@ -6,6 +6,8 @@ import { CONTEXT_MENU_ID } from './types';
 import { selectCurrentTabIndex, setSelectedTabIndex } from 'state/library';
 import { selectActivePresetForContextMenu } from 'state/rna-builder';
 import { StyledMenu } from './styles';
+import { createPortal } from 'react-dom';
+import { KETCHER_MACROMOLECULES_ROOT_NODE_SELECTOR } from '../../constants';
 
 export const RNAContextMenu = () => {
   const RNA_TAB_INDEX = 2;
@@ -72,7 +74,16 @@ export const RNAContextMenu = () => {
     return items;
   };
 
-  return (
-    <StyledMenu id={CONTEXT_MENU_ID.FOR_RNA}>{assembleMenuItems()}</StyledMenu>
+  const ketcherEditorRootElement = document.querySelector(
+    KETCHER_MACROMOLECULES_ROOT_NODE_SELECTOR,
   );
+
+  return ketcherEditorRootElement
+    ? createPortal(
+        <StyledMenu id={CONTEXT_MENU_ID.FOR_RNA}>
+          {assembleMenuItems()}
+        </StyledMenu>,
+        ketcherEditorRootElement,
+      )
+    : null;
 };
diff --git a/packages/ketcher-macromolecules/src/constants.ts b/packages/ketcher-macromolecules/src/constants.ts
@@ -26,7 +26,7 @@ export type LibraryNameType =
   | keyof typeof MONOMER_TYPES;
 
 export const EditorClassName = 'Ketcher-polymer-editor-root';
-export const EditorQuerySelector = `.${EditorClassName}`;
+export const KETCHER_MACROMOLECULES_ROOT_NODE_SELECTOR = `.${EditorClassName}`;
 
 export const preview = {
   width: 230,

diff --git a/packages/ketcher-macromolecules/src/index.tsx b/packages/ketcher-macromolecules/src/index.tsx
@@ -15,3 +15,4 @@
  ***************************************************************************/
 
 export * from './Editor';
+export * from './constants';
diff --git a/packages/ketcher-macromolecules/src/styledComponents.ts b/packages/ketcher-macromolecules/src/styledComponents.ts
@@ -1,6 +1,5 @@
 import styled from '@emotion/styled';
 
 export const EditorWrapper = styled.div(() => ({
-  containerType: 'size',
   height: '100%',
 }));
diff --git a/packages/ketcher-react/src/Editor.module.less b/packages/ketcher-react/src/Editor.module.less
@@ -38,8 +38,6 @@
     Arial, sans-serif;
   background-color: @color-background-canvas-light;
   color: @main-color;
-  /* stylelint-disable-next-line */
-  container-type: size;
 
   select {
     padding: 0 8px !important;

diff --git a/packages/ketcher-react/src/script/ui/App/App.module.less b/packages/ketcher-react/src/script/ui/App/App.module.less
@@ -25,6 +25,8 @@
     'toolbar-bottom toolbar-bottom toolbar-bottom';
   grid-template-columns: minmax(36px, max-content) 1fr minmax(36px, max-content);
   grid-template-rows: auto 1fr auto;
+  /* stylelint-disable-next-line */
+  container-type: size;
 }
 
 .canvas {

diff --git a/packages/ketcher-react/src/script/ui/dialog/AbbreviationLookup/AbbreviationLookup.tsx b/packages/ketcher-react/src/script/ui/dialog/AbbreviationLookup/AbbreviationLookup.tsx
@@ -75,8 +75,6 @@ export const AbbreviationLookup = ({ options }: Props) => {
   );
 
   useLayoutEffect(() => {
-    inputRef.current?.focus();
-
     const containerHeight = autocompleteRef.current?.offsetHeight ?? 0;
     const containerWidth = autocompleteRef.current?.offsetWidth ?? 0;
 
@@ -98,6 +96,8 @@ export const AbbreviationLookup = ({ options }: Props) => {
       top: `${top}px`,
     });
 
+    inputRef.current?.focus();
+
     // TODO extract to a separate hook or utils
     return () => {
       (
Original file line number	Diff line number	Diff line change
Expand Up		@@ -15,3 +15,4 @@
		***************************************************************************/

		export * from './Editor';
		export * from './constants';