diff --git a/ketcher-autotests/tests/Structure-Creating-&-Editing/Atom/Atom-Properties/atom-properties.spec.ts-snapshots/Atom-Properties-Query-properties-section-wit-1af4b-fic-drop-down-list-inside-the-Edit-section-8-chromium-linux.png b/ketcher-autotests/tests/Structure-Creating-&-Editing/Atom/Atom-Properties/atom-properties.spec.ts-snapshots/Atom-Properties-Query-properties-section-wit-1af4b-fic-drop-down-list-inside-the-Edit-section-8-chromium-linux.png index 940dff054b..93871c9506 100644 Binary files a/ketcher-autotests/tests/Structure-Creating-&-Editing/Atom/Atom-Properties/atom-properties.spec.ts-snapshots/Atom-Properties-Query-properties-section-wit-1af4b-fic-drop-down-list-inside-the-Edit-section-8-chromium-linux.png and b/ketcher-autotests/tests/Structure-Creating-&-Editing/Atom/Atom-Properties/atom-properties.spec.ts-snapshots/Atom-Properties-Query-properties-section-wit-1af4b-fic-drop-down-list-inside-the-Edit-section-8-chromium-linux.png differ diff --git a/ketcher-autotests/tests/Structure-Creating-&-Editing/Atom/Atom-Properties/atom-properties.spec.ts-snapshots/Atom-Properties-Query-properties-section-wit-27620-ic-drop-down-list-inside-the-Edit-section-10-chromium-linux.png b/ketcher-autotests/tests/Structure-Creating-&-Editing/Atom/Atom-Properties/atom-properties.spec.ts-snapshots/Atom-Properties-Query-properties-section-wit-27620-ic-drop-down-list-inside-the-Edit-section-10-chromium-linux.png index 2f00b017c9..f637687916 100644 Binary files a/ketcher-autotests/tests/Structure-Creating-&-Editing/Atom/Atom-Properties/atom-properties.spec.ts-snapshots/Atom-Properties-Query-properties-section-wit-27620-ic-drop-down-list-inside-the-Edit-section-10-chromium-linux.png and b/ketcher-autotests/tests/Structure-Creating-&-Editing/Atom/Atom-Properties/atom-properties.spec.ts-snapshots/Atom-Properties-Query-properties-section-wit-27620-ic-drop-down-list-inside-the-Edit-section-10-chromium-linux.png differ diff --git a/ketcher-autotests/tests/Structure-Creating-&-Editing/Atom/Atom-Properties/atom-properties.spec.ts-snapshots/Atom-Properties-Query-properties-section-wit-3bab0-fic-drop-down-list-inside-the-Edit-section-5-chromium-linux.png b/ketcher-autotests/tests/Structure-Creating-&-Editing/Atom/Atom-Properties/atom-properties.spec.ts-snapshots/Atom-Properties-Query-properties-section-wit-3bab0-fic-drop-down-list-inside-the-Edit-section-5-chromium-linux.png index e00a12ad37..135836fd4e 100644 Binary files a/ketcher-autotests/tests/Structure-Creating-&-Editing/Atom/Atom-Properties/atom-properties.spec.ts-snapshots/Atom-Properties-Query-properties-section-wit-3bab0-fic-drop-down-list-inside-the-Edit-section-5-chromium-linux.png and b/ketcher-autotests/tests/Structure-Creating-&-Editing/Atom/Atom-Properties/atom-properties.spec.ts-snapshots/Atom-Properties-Query-properties-section-wit-3bab0-fic-drop-down-list-inside-the-Edit-section-5-chromium-linux.png differ diff --git a/ketcher-autotests/tests/Structure-Creating-&-Editing/Atom/Atom-Properties/atom-properties.spec.ts-snapshots/Atom-Properties-Query-properties-section-wit-4505d-fic-drop-down-list-inside-the-Edit-section-4-chromium-linux.png b/ketcher-autotests/tests/Structure-Creating-&-Editing/Atom/Atom-Properties/atom-properties.spec.ts-snapshots/Atom-Properties-Query-properties-section-wit-4505d-fic-drop-down-list-inside-the-Edit-section-4-chromium-linux.png index 45e357bb7e..83aca3b4f6 100644 Binary files a/ketcher-autotests/tests/Structure-Creating-&-Editing/Atom/Atom-Properties/atom-properties.spec.ts-snapshots/Atom-Properties-Query-properties-section-wit-4505d-fic-drop-down-list-inside-the-Edit-section-4-chromium-linux.png and b/ketcher-autotests/tests/Structure-Creating-&-Editing/Atom/Atom-Properties/atom-properties.spec.ts-snapshots/Atom-Properties-Query-properties-section-wit-4505d-fic-drop-down-list-inside-the-Edit-section-4-chromium-linux.png differ diff --git a/ketcher-autotests/tests/Structure-Creating-&-Editing/Atom/Atom-Properties/atom-properties.spec.ts-snapshots/Atom-Properties-Query-properties-section-wit-59681-fic-drop-down-list-inside-the-Edit-section-7-chromium-linux.png b/ketcher-autotests/tests/Structure-Creating-&-Editing/Atom/Atom-Properties/atom-properties.spec.ts-snapshots/Atom-Properties-Query-properties-section-wit-59681-fic-drop-down-list-inside-the-Edit-section-7-chromium-linux.png index 1bbe922871..e33003b7a0 100644 Binary files a/ketcher-autotests/tests/Structure-Creating-&-Editing/Atom/Atom-Properties/atom-properties.spec.ts-snapshots/Atom-Properties-Query-properties-section-wit-59681-fic-drop-down-list-inside-the-Edit-section-7-chromium-linux.png and b/ketcher-autotests/tests/Structure-Creating-&-Editing/Atom/Atom-Properties/atom-properties.spec.ts-snapshots/Atom-Properties-Query-properties-section-wit-59681-fic-drop-down-list-inside-the-Edit-section-7-chromium-linux.png differ diff --git a/ketcher-autotests/tests/Structure-Creating-&-Editing/Atom/Atom-Properties/atom-properties.spec.ts-snapshots/Atom-Properties-Query-properties-section-wit-5dd56-fic-drop-down-list-inside-the-Edit-section-3-chromium-linux.png b/ketcher-autotests/tests/Structure-Creating-&-Editing/Atom/Atom-Properties/atom-properties.spec.ts-snapshots/Atom-Properties-Query-properties-section-wit-5dd56-fic-drop-down-list-inside-the-Edit-section-3-chromium-linux.png index f6cc1d56cd..74c01acf29 100644 Binary files a/ketcher-autotests/tests/Structure-Creating-&-Editing/Atom/Atom-Properties/atom-properties.spec.ts-snapshots/Atom-Properties-Query-properties-section-wit-5dd56-fic-drop-down-list-inside-the-Edit-section-3-chromium-linux.png and b/ketcher-autotests/tests/Structure-Creating-&-Editing/Atom/Atom-Properties/atom-properties.spec.ts-snapshots/Atom-Properties-Query-properties-section-wit-5dd56-fic-drop-down-list-inside-the-Edit-section-3-chromium-linux.png differ diff --git a/ketcher-autotests/tests/Structure-Creating-&-Editing/Atom/Atom-Properties/atom-properties.spec.ts-snapshots/Atom-Properties-Query-properties-section-wit-7c917-fic-drop-down-list-inside-the-Edit-section-1-chromium-linux.png b/ketcher-autotests/tests/Structure-Creating-&-Editing/Atom/Atom-Properties/atom-properties.spec.ts-snapshots/Atom-Properties-Query-properties-section-wit-7c917-fic-drop-down-list-inside-the-Edit-section-1-chromium-linux.png index 9f3f97e06b..3223b941ce 100644 Binary files a/ketcher-autotests/tests/Structure-Creating-&-Editing/Atom/Atom-Properties/atom-properties.spec.ts-snapshots/Atom-Properties-Query-properties-section-wit-7c917-fic-drop-down-list-inside-the-Edit-section-1-chromium-linux.png and b/ketcher-autotests/tests/Structure-Creating-&-Editing/Atom/Atom-Properties/atom-properties.spec.ts-snapshots/Atom-Properties-Query-properties-section-wit-7c917-fic-drop-down-list-inside-the-Edit-section-1-chromium-linux.png differ diff --git a/ketcher-autotests/tests/Structure-Creating-&-Editing/Atom/Atom-Properties/atom-properties.spec.ts-snapshots/Atom-Properties-Query-properties-section-wit-b38a5-fic-drop-down-list-inside-the-Edit-section-9-chromium-linux.png b/ketcher-autotests/tests/Structure-Creating-&-Editing/Atom/Atom-Properties/atom-properties.spec.ts-snapshots/Atom-Properties-Query-properties-section-wit-b38a5-fic-drop-down-list-inside-the-Edit-section-9-chromium-linux.png index 2f00b017c9..f637687916 100644 Binary files a/ketcher-autotests/tests/Structure-Creating-&-Editing/Atom/Atom-Properties/atom-properties.spec.ts-snapshots/Atom-Properties-Query-properties-section-wit-b38a5-fic-drop-down-list-inside-the-Edit-section-9-chromium-linux.png and b/ketcher-autotests/tests/Structure-Creating-&-Editing/Atom/Atom-Properties/atom-properties.spec.ts-snapshots/Atom-Properties-Query-properties-section-wit-b38a5-fic-drop-down-list-inside-the-Edit-section-9-chromium-linux.png differ diff --git a/ketcher-autotests/tests/Structure-Creating-&-Editing/Atom/Atom-Properties/atom-properties.spec.ts-snapshots/Atom-Properties-Query-properties-section-wit-bc127-fic-drop-down-list-inside-the-Edit-section-2-chromium-linux.png b/ketcher-autotests/tests/Structure-Creating-&-Editing/Atom/Atom-Properties/atom-properties.spec.ts-snapshots/Atom-Properties-Query-properties-section-wit-bc127-fic-drop-down-list-inside-the-Edit-section-2-chromium-linux.png index 315dec127e..b77d0eced5 100644 Binary files a/ketcher-autotests/tests/Structure-Creating-&-Editing/Atom/Atom-Properties/atom-properties.spec.ts-snapshots/Atom-Properties-Query-properties-section-wit-bc127-fic-drop-down-list-inside-the-Edit-section-2-chromium-linux.png and b/ketcher-autotests/tests/Structure-Creating-&-Editing/Atom/Atom-Properties/atom-properties.spec.ts-snapshots/Atom-Properties-Query-properties-section-wit-bc127-fic-drop-down-list-inside-the-Edit-section-2-chromium-linux.png differ diff --git a/ketcher-autotests/tests/Structure-Creating-&-Editing/Atom/Atom-Properties/atom-properties.spec.ts-snapshots/Atom-Properties-Query-properties-section-wit-ec6e2-fic-drop-down-list-inside-the-Edit-section-6-chromium-linux.png b/ketcher-autotests/tests/Structure-Creating-&-Editing/Atom/Atom-Properties/atom-properties.spec.ts-snapshots/Atom-Properties-Query-properties-section-wit-ec6e2-fic-drop-down-list-inside-the-Edit-section-6-chromium-linux.png index be10fd8798..645aed815a 100644 Binary files a/ketcher-autotests/tests/Structure-Creating-&-Editing/Atom/Atom-Properties/atom-properties.spec.ts-snapshots/Atom-Properties-Query-properties-section-wit-ec6e2-fic-drop-down-list-inside-the-Edit-section-6-chromium-linux.png and b/ketcher-autotests/tests/Structure-Creating-&-Editing/Atom/Atom-Properties/atom-properties.spec.ts-snapshots/Atom-Properties-Query-properties-section-wit-ec6e2-fic-drop-down-list-inside-the-Edit-section-6-chromium-linux.png differ diff --git a/ketcher-autotests/tests/User-Interface/Right-Click-Menu/right-click.spec.ts-snapshots/Right-click-menu-Check-right-click-property-change-for-atoms-1-chromium-linux.png b/ketcher-autotests/tests/User-Interface/Right-Click-Menu/right-click.spec.ts-snapshots/Right-click-menu-Check-right-click-property-change-for-atoms-1-chromium-linux.png index 4c830ff544..72f1996f5d 100644 Binary files a/ketcher-autotests/tests/User-Interface/Right-Click-Menu/right-click.spec.ts-snapshots/Right-click-menu-Check-right-click-property-change-for-atoms-1-chromium-linux.png and b/ketcher-autotests/tests/User-Interface/Right-Click-Menu/right-click.spec.ts-snapshots/Right-click-menu-Check-right-click-property-change-for-atoms-1-chromium-linux.png differ diff --git a/ketcher-autotests/tests/User-Interface/Right-Click-Menu/right-click.spec.ts-snapshots/Right-click-menu-Check-right-click-property-change-for-atoms-2-chromium-linux.png b/ketcher-autotests/tests/User-Interface/Right-Click-Menu/right-click.spec.ts-snapshots/Right-click-menu-Check-right-click-property-change-for-atoms-2-chromium-linux.png index 9295eb4410..56b6debbc4 100644 Binary files a/ketcher-autotests/tests/User-Interface/Right-Click-Menu/right-click.spec.ts-snapshots/Right-click-menu-Check-right-click-property-change-for-atoms-2-chromium-linux.png and b/ketcher-autotests/tests/User-Interface/Right-Click-Menu/right-click.spec.ts-snapshots/Right-click-menu-Check-right-click-property-change-for-atoms-2-chromium-linux.png differ diff --git a/ketcher-autotests/tests/User-Interface/Right-Click-Menu/right-click.spec.ts-snapshots/Right-click-menu-Check-right-click-property-change-for-atoms-3-chromium-linux.png b/ketcher-autotests/tests/User-Interface/Right-Click-Menu/right-click.spec.ts-snapshots/Right-click-menu-Check-right-click-property-change-for-atoms-3-chromium-linux.png index 73122fa30a..ee1b44c13d 100644 Binary files a/ketcher-autotests/tests/User-Interface/Right-Click-Menu/right-click.spec.ts-snapshots/Right-click-menu-Check-right-click-property-change-for-atoms-3-chromium-linux.png and b/ketcher-autotests/tests/User-Interface/Right-Click-Menu/right-click.spec.ts-snapshots/Right-click-menu-Check-right-click-property-change-for-atoms-3-chromium-linux.png differ diff --git a/ketcher-autotests/tests/User-Interface/Right-Click-Menu/right-click.spec.ts-snapshots/Right-click-menu-Check-right-click-submenu-for-Query-bonds-1-chromium-linux.png b/ketcher-autotests/tests/User-Interface/Right-Click-Menu/right-click.spec.ts-snapshots/Right-click-menu-Check-right-click-submenu-for-Query-bonds-1-chromium-linux.png index 4e71a8e629..69fa8df9dd 100644 Binary files a/ketcher-autotests/tests/User-Interface/Right-Click-Menu/right-click.spec.ts-snapshots/Right-click-menu-Check-right-click-submenu-for-Query-bonds-1-chromium-linux.png and b/ketcher-autotests/tests/User-Interface/Right-Click-Menu/right-click.spec.ts-snapshots/Right-click-menu-Check-right-click-submenu-for-Query-bonds-1-chromium-linux.png differ diff --git a/packages/ketcher-react/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx b/packages/ketcher-react/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx index 5e93832aca..4c475bd6b1 100644 --- a/packages/ketcher-react/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx +++ b/packages/ketcher-react/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx @@ -24,7 +24,10 @@ export default function ButtonGroup({ ); return ( - + {buttons.map(({ label, value: buttonValue }) => ( ({ className={clsx(classes.button, { [classes.selected]: buttonValue === value, })} + style={{ flex: '1 0 25%', margin: '2px', borderRadius: '3px' }} > {label || 'none'} diff --git a/packages/ketcher-react/src/script/ui/views/components/ContextMenu/ContextMenu.tsx b/packages/ketcher-react/src/script/ui/views/components/ContextMenu/ContextMenu.tsx index 7224b9c136..8f2c2c7a12 100644 --- a/packages/ketcher-react/src/script/ui/views/components/ContextMenu/ContextMenu.tsx +++ b/packages/ketcher-react/src/script/ui/views/components/ContextMenu/ContextMenu.tsx @@ -13,8 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. ***************************************************************************/ - -import { useCallback } from 'react'; +import React, { useCallback } from 'react'; import { Menu, MenuProps } from 'react-contexify'; import 'react-contexify/ReactContexify.css'; import { useAppContext } from 'src/hooks'; @@ -37,13 +36,36 @@ const props: Partial = { const ContextMenu: React.FC = () => { const { getKetcherInstance } = useAppContext(); - const resetMenuPosition = function () { - // This method checks that context menu is out of ketcher root element and move it - // to not display menu out of ketcher. - // It needs for cases when ketcher editor injected in popup - const contextMenuElement = document.querySelector( - '.contexify:last-of-type', - ) as HTMLDivElement | null; + const adjustSubmenuPosition = (submenuElement: HTMLElement) => { + const rect = submenuElement.getBoundingClientRect(); + const ketcherRootElement = document.querySelector( + KETCHER_ROOT_NODE_CSS_SELECTOR, + ); + const ketcherRootElementRect = ketcherRootElement?.getBoundingClientRect(); + const ketcherEditorWidth = ketcherRootElementRect?.width || 0; + const ketcherEditorHeight = ketcherRootElementRect?.height || 0; + const ketcherEditorLeft = ketcherRootElementRect?.left || 0; + const ketcherEditorTop = ketcherRootElementRect?.top || 0; + + if (rect.right - ketcherEditorLeft > ketcherEditorWidth) { + submenuElement.style.left = 'auto'; + submenuElement.style.right = '100%'; + } else { + submenuElement.style.left = '100%'; + submenuElement.style.right = 'auto'; + } + + if (rect.bottom - ketcherEditorTop > ketcherEditorHeight) { + submenuElement.style.top = 'auto'; + submenuElement.style.bottom = '0'; + } else { + submenuElement.style.top = '0'; + submenuElement.style.bottom = 'auto'; + } + }; + + const resetMenuPosition = (menuElement: HTMLElement) => { + const contextMenuElement = menuElement; const ketcherRootElement = document.querySelector( KETCHER_ROOT_NODE_CSS_SELECTOR, ); @@ -56,24 +78,50 @@ const ContextMenu: React.FC = () => { contextMenuElement.getBoundingClientRect(); const ketcherRootElementBoundingBox = ketcherRootElement.getBoundingClientRect(); + const viewportWidth = window.innerWidth; + const viewportHeight = window.innerHeight; if (!contextMenuElementBoundingBox || !ketcherRootElementBoundingBox) { return; } - const left = + let left = contextMenuElementBoundingBox.left; + let top = contextMenuElementBoundingBox.top; + + // Ensure the menu is within the Ketcher root element + if ( contextMenuElementBoundingBox.right > ketcherRootElementBoundingBox.right - ? contextMenuElementBoundingBox.x - - (contextMenuElementBoundingBox.right - - ketcherRootElementBoundingBox.right) - : contextMenuElementBoundingBox.x; - const top = + ) { + left = + ketcherRootElementBoundingBox.right - + contextMenuElementBoundingBox.width; + } + + if ( contextMenuElementBoundingBox.bottom > ketcherRootElementBoundingBox.bottom - ? contextMenuElementBoundingBox.y - - (contextMenuElementBoundingBox.bottom - - ketcherRootElementBoundingBox.bottom) - : contextMenuElementBoundingBox.y; + ) { + top = + ketcherRootElementBoundingBox.bottom - + contextMenuElementBoundingBox.height; + } + + // Ensure the menu is within the viewport + if (left < 0) { + left = 0; + } + + if (top < 0) { + top = 0; + } + + if (contextMenuElementBoundingBox.right > viewportWidth) { + left = viewportWidth - contextMenuElementBoundingBox.width - 10; + } + + if (contextMenuElementBoundingBox.bottom > viewportHeight) { + top = viewportHeight - contextMenuElementBoundingBox.height - 10; + } contextMenuElement.style.left = `${left}px`; contextMenuElement.style.top = `${top}px`; @@ -84,7 +132,23 @@ const ContextMenu: React.FC = () => { const editor = getKetcherInstance().editor as Editor; if (visible) { editor.hoverIcon.hide(); - resetMenuPosition(); + const contextMenuElement = document.querySelector( + '.contexify:last-of-type', + ) as HTMLDivElement | null; + const submenuElements = document.querySelectorAll( + '.contexify_submenu', + ) as NodeListOf; + if (contextMenuElement) { + // Timeout is needed to ensure that the context menu is rendered by react-contexify library. + // Without timeout library overrides the position of the context menu which we set. + setTimeout(() => resetMenuPosition(contextMenuElement), 0); + } + + if (submenuElements.length) { + submenuElements.forEach((submenuElement) => { + adjustSubmenuPosition(submenuElement); + }); + } } editor.contextMenu[id] = visible; },