Macro: #2987 - switching between ketcher mode and ketcher macromolecu…

…les mode (#3543)

Co-authored-by: Olga Mazurina <olga_mazurina@epam.com>
Co-authored-by: Roman Rodionov <roman_rodionov@epam.com>

example/src/App.tsx

@@ -7,7 +7,7 @@ import {
   RemoteStructServiceProvider,
   StructServiceProvider,
 } from 'ketcher-core';
-import { PolymerToggler } from './PolymerToggler';
+import { ModeControl } from './ModeControl';
 
 const getHiddenButtonsConfig = (): ButtonsConfig => {
   const searchParams = new URLSearchParams(window.location.search);
@@ -35,7 +35,11 @@ if (process.env.MODE === 'standalone') {
 
 const enablePolymerEditor = process.env.ENABLE_POLYMER_EDITOR === 'true';
 
-type PolymerType = () => JSX.Element | null;
+type PolymerType = ({
+  togglerComponent,
+}: {
+  togglerComponent?: JSX.Element;
+}) => JSX.Element | null;
 
 let PolymerEditor: PolymerType = () => null;
 if (enablePolymerEditor) {
@@ -54,10 +58,17 @@ const App = () => {
     setShowPolymerEditor(toggleValue);
     window.isPolymerEditorTurnedOn = toggleValue;
   };
+
+  const togglerComponent = enablePolymerEditor ? (
+    <ModeControl
+      toggle={togglePolymerEditor}
+      isPolymerEditor={showPolymerEditor}
+    />
+  ) : undefined;
+
   return showPolymerEditor ? (
     <>
-      <PolymerEditor />
-      <PolymerToggler toggle={togglePolymerEditor} />
+      <PolymerEditor togglerComponent={togglerComponent} />
     </>
   ) : (
     <>
@@ -79,8 +90,8 @@ const App = () => {
             '*',
           );
         }}
+        togglerComponent={togglerComponent}
       />
-      {enablePolymerEditor && <PolymerToggler toggle={togglePolymerEditor} />}
       {hasError && (
         <InfoModal
           message={errorMessage}

example/src/ModeControl/ModeControl.tsx

@@ -0,0 +1,213 @@
+/****************************************************************************
+ * Copyright 2021 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ ***************************************************************************/
+
+import { useState, useRef } from 'react';
+import styled from '@emotion/styled';
+import { Button, Popover } from '@mui/material';
+import { Icon } from 'ketcher-react';
+
+interface IStyledIconProps {
+  expanded?: boolean;
+  hidden?: boolean;
+}
+const ElementAndDropdown = styled('div')`
+  position: relative;
+  width: 28px;
+  padding: 2px;
+  flexgrow: 1;
+  display: flex;
+  justifycontent: flex-end;
+  @media (min-width: 900px) {
+    width: 162px;
+    padding: 6px 3px;
+  }
+`;
+
+const DropDownButton = styled(Button)(() => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  color: '#000000',
+  padding: '0px',
+  width: '100%',
+  minWidth: '0px',
+
+  '& svg:first-of-type': {
+    margin: '2px',
+    width: '20px',
+    height: '20px',
+  },
+}));
+
+const StyledIcon = styled(Icon)<IStyledIconProps>`
+  width: 16px;
+  height: 16px;
+  transform: ${({ expanded }) => (expanded ? 'rotate(180deg)' : 'none')};
+  opacity: ${({ hidden }) => (hidden ? '0' : '100')};
+`;
+
+const StyledIconForMacromoleculesToggler = styled(StyledIcon)`
+  display: none;
+  @media (min-width: 900px) {
+    display: flex;
+  }
+`;
+
+const CornerIcon = styled(Icon)`
+  display: block;
+  width: 7px;
+  height: 7px;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  fill: @main-color;
+  @media (min-width: 900px) {
+    display: none;
+  }
+`;
+
+const ModeLabel = styled('span')`
+  display: none;
+  text-transform: none;
+  font-size: 12px;
+  text-align: left;
+  flex-grow: 1;
+  @media (min-width: 900px) {
+    display: inline;
+  }
+`;
+
+const ModeControlButton = styled('div')`
+  width: 162px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 3px;
+
+  :hover {
+    background-color: #f3f8f9;
+  }
+`;
+
+const ModeButtonLable = styled('span')`
+  font-size: 12px;
+  flex-grow: 1;
+  text-align: start;
+  text-transform: none;
+`;
+
+const Dropdown = styled(Popover)`
+  & .MuiPopover-paper {
+    padding: 3px 0px;
+    width: 162px;
+    border: none;
+    border-radius: 0px 0px 4px 4px;
+    box-shadow: 0px 30px 48px -17px rgba(160, 165, 174, 0.3);
+    box-sizing: border-box;
+  }
+`;
+
+const DropDownContent = styled('div')`
+  display: flex;
+  flex-direction: column;
+  white-space: nowrap;
+  word-break: keep-all;
+  background: white;
+  cursor: pointer;
+`;
+
+interface ModeProps {
+  toggle: (isEnabled: boolean) => void;
+  isPolymerEditor: boolean;
+}
+
+export const ModeControl = ({ toggle, isPolymerEditor }: ModeProps) => {
+  const [isExpanded, setIsExpanded] = useState<boolean>(false);
+  const btnRef = useRef<HTMLButtonElement>(null);
+
+  const onClose = () => {
+    setIsExpanded(false);
+  };
+
+  const onExpand = () => {
+    setIsExpanded(true);
+  };
+
+  const modeLabel = isPolymerEditor ? 'Macromolecules' : 'Molecules';
+  const modeIcon = isPolymerEditor ? 'macromolecules-mode' : 'molecules-mode';
+  const title = isPolymerEditor
+    ? 'Switch to Ketcher mode'
+    : 'Switch to Macromolecule mode';
+
+  return (
+    <ElementAndDropdown title={title}>
+      <DropDownButton
+        data-testid="polymer-toggler"
+        onClick={onExpand}
+        ref={btnRef}
+      >
+        <Icon name={modeIcon} />
+        <>
+          <ModeLabel>{modeLabel}</ModeLabel>
+          <StyledIconForMacromoleculesToggler
+            name="chevron"
+            expanded={isExpanded}
+          />
+        </>
+        <>
+          <CornerIcon name="dropdown" />
+        </>
+      </DropDownButton>
+      <Dropdown
+        title=""
+        open={isExpanded}
+        onClose={onClose}
+        anchorEl={btnRef.current}
+        container={btnRef.current}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'left',
+        }}
+      >
+        <DropDownContent>
+          <ModeControlButton
+            data-testid="molecules_mode"
+            onClick={() => {
+              toggle(false);
+              onClose();
+            }}
+          >
+            <Icon name="molecules-mode" />
+            <ModeButtonLable>Molecules</ModeButtonLable>
+            {!isPolymerEditor && <StyledIcon name="check-mark" />}
+          </ModeControlButton>
+
+          <ModeControlButton
+            data-testid="macromolecules_mode"
+            onClick={() => {
+              toggle(true);
+              onClose();
+            }}
+          >
+            <Icon name="macromolecules-mode" />
+            <ModeButtonLable>Macromolecules</ModeButtonLable>
+            {isPolymerEditor && <StyledIcon name="check-mark" />}
+          </ModeControlButton>
+        </DropDownContent>
+      </Dropdown>
+    </ElementAndDropdown>
+  );
+};

example/src/ModeControl/index.ts

@@ -0,0 +1 @@
+export * from './ModeControl';

ketcher-autotests/constants/testIdConstants.ts

@@ -3,6 +3,8 @@ const RNA_TAB = 'RNA_TAB';
 const CHEM_TAB = 'CHEM_TAB';
 const FAVORITES_TAB = 'FAVORITES_TAB';
 const POLYMER_TOGGLER = 'polymer-toggler';
+const MACROMOLECULES_MODE = 'macromolecules_mode';
+const MOLECULES_MODE = 'molecules_mode';
 const SUGAR = 'rna-builder-slot--sugar';
 const BASE = 'rna-builder-slot--base';
 const PHOSPHATE = 'rna-builder-slot--phosphate';
@@ -14,6 +16,8 @@ export {
   CHEM_TAB,
   FAVORITES_TAB,
   POLYMER_TOGGLER,
+  MACROMOLECULES_MODE,
+  MOLECULES_MODE,
   SUGAR,
   BASE,
   PHOSPHATE,

ketcher-autotests/tests/Macromolecule-editor/Chem-monomers/chem-add-to-canvas.spec.ts

@@ -4,8 +4,10 @@ import {
   takeEditorScreenshot,
   waitForPageInit,
 } from '@utils';
-import { POLYMER_TOGGLER } from '../../../constants/testIdConstants';
-import { hideMonomerPreview } from '@utils/macromolecules';
+import {
+  hideMonomerPreview,
+  turnOnMacromoleculesEditor,
+} from '@utils/macromolecules';
 
 /* 
 Test case: #2497 - Add chem to canvas
@@ -15,8 +17,7 @@ test('Select chem and drag it to canvas', async ({ page }) => {
   await waitForPageInit(page);
 
   // Click on POLYMER_TOGGLER
-  await page.getByTestId(POLYMER_TOGGLER).click();
-
+  await turnOnMacromoleculesEditor(page);
   await page.getByText('CHEM').click();
 
   // Click on <div> "sDBL___Symmetric Doubler"

ketcher-autotests/tests/Macromolecule-editor/Chem-monomers/chem-library.spec.ts

@@ -1,21 +1,19 @@
 import { test, expect } from '@playwright/test';
-import { POLYMER_TOGGLER } from '../../../constants/testIdConstants';
 import { waitForPageInit } from '@utils/common';
 import { takePageScreenshot } from '@utils';
+import { turnOnMacromoleculesEditor } from '@utils/macromolecules';
 
 test.describe('Open Ketcher', () => {
   test.beforeEach(async ({ page }) => {
     await waitForPageInit(page);
+    await turnOnMacromoleculesEditor(page);
   });
 
   test('Switch to Polymer Editor', async ({ page }) => {
     /* 
     Test case: #2496 - chem monomer library
     Description: Switch to Polymer Editor
     */
-    await expect(page.getByTestId(POLYMER_TOGGLER)).toBeVisible();
-    await page.getByTestId(POLYMER_TOGGLER).click();
-
     await expect(page.getByText('CHEM')).toBeVisible();
   });
 
@@ -24,7 +22,6 @@ test.describe('Open Ketcher', () => {
     Test case: #2496 - chem monomer library
     Description: Open Chem tab in library
     */
-    await page.getByTestId(POLYMER_TOGGLER).click();
     await page.getByText('CHEM').click();
     await expect(page.getByText('A6OH')).toBeVisible();
     await takePageScreenshot(page);

ketcher-autotests/tests/Macromolecule-editor/Erase-Tool/erase-tool.spec.ts

@@ -6,7 +6,10 @@ import {
   takeEditorScreenshot,
   waitForPageInit,
 } from '@utils';
-import { turnOnMacromoleculesEditor } from '@utils/macromolecules';
+import {
+  hideMonomerPreview,
+  turnOnMacromoleculesEditor,
+} from '@utils/macromolecules';
 import { bondTwoMonomers } from '@utils/macromolecules/polymerBond';
 /* eslint-disable no-magic-numbers */
 
@@ -67,10 +70,6 @@ test.describe('Erase Tool', () => {
     await bondTwoMonomers(page, peptide3, peptide2);
     await bondTwoMonomers(page, peptide3, peptide4);
 
-    // Get rid of flakiness because of preview
-    const coords = [100, 100];
-    await page.mouse.move(coords[0], coords[1]);
-
     await takeEditorScreenshot(page);
 
     await selectEraseTool(page);
@@ -79,7 +78,7 @@ test.describe('Erase Tool', () => {
     await peptide3.click();
 
     // Get rid of flakiness because of preview
-    await page.mouse.move(coords[0], coords[1]);
+    await hideMonomerPreview(page);
 
     await takeEditorScreenshot(page);
   });