#6344 - Excessive scroll appears in macromolecules mode in canvas if …

…Ketcher is inside dialog window (#6352) * #6344 - Excessive scroll appears in macromolecules mode in canvas if Ketcher is inside dialog window - fixed styles for Ketcher in popup - fixed layout for right column - updated screenshot * #6351 - Update indigo to 1.28.0-rc.3 in browser module
epam · Jan 24, 2025 · eca9147 · eca9147
1 parent b92d109
commit eca9147
Show file tree

Hide file tree

Showing 9 changed files with 40 additions and 28 deletions.
diff --git a/example/public/iframe.html b/example/public/iframe.html
@@ -104,7 +104,7 @@
             width="784"
             height="624"
             id="iframe"
-            src="env_url"
+            src="index.html"
             sandbox="allow-scripts allow-same-origin"
             ></iframe>
         </div>

diff --git a/...A-Verif-f9feb--will-be-lost-on-export---we-do-not-store-it-2-chromium-linux.png b/...A-Verif-f9feb--will-be-lost-on-export---we-do-not-store-it-2-chromium-linux.png
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/ketcher-core/package.json b/packages/ketcher-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ketcher-core",
-  "version": "3.0.0-rc.3",
+  "version": "3.0.0-rc.4",
   "description": "Web-based molecule sketcher",
   "license": "Apache-2.0",
   "homepage": "http://lifescience.opensource.epam.com/ketcher",

diff --git a/packages/ketcher-macromolecules/package.json b/packages/ketcher-macromolecules/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ketcher-macromolecules",
-  "version": "3.0.0-rc.3",
+  "version": "3.0.0-rc.4",
   "description": "Web-based molecule sketcher",
   "license": "Apache-2.0",
   "homepage": "http://lifescience.opensource.epam.com/ketcher",

diff --git a/packages/ketcher-macromolecules/src/Editor.tsx b/packages/ketcher-macromolecules/src/Editor.tsx
@@ -302,11 +302,13 @@ function Editor({
         <Layout.Right hide={isMonomerLibraryHidden}>
           <MonomerLibrary />
         </Layout.Right>
+        <Layout.InsideRoot>
+          <MonomerLibraryToggle
+            isHidden={isMonomerLibraryHidden}
+            onClick={() => setIsMonomerLibraryHidden((prev) => !prev)}
+          />
+        </Layout.InsideRoot>
       </Layout>
-      <MonomerLibraryToggle
-        isHidden={isMonomerLibraryHidden}
-        onClick={() => setIsMonomerLibraryHidden((prev) => !prev)}
-      />
       <Preview />
       <SequenceItemContextMenu selections={selections} />
       <PolymerBondContextMenu />

diff --git a/packages/ketcher-macromolecules/src/components/Layout/Layout.tsx b/packages/ketcher-macromolecules/src/components/Layout/Layout.tsx
@@ -22,24 +22,27 @@ interface LayoutProps {
   children: JSX.Element | Array<JSX.Element>;
 }
 
-const Column = styled.div<{ fullWidth?: boolean }>(({ fullWidth }) => ({
-  width: fullWidth ? '100%' : 'fit-content',
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'space-between',
-}));
+const Column = styled.div<{ fullWidth?: boolean; withPaddingRight?: boolean }>(
+  ({ fullWidth, withPaddingRight }) => ({
+    width: fullWidth ? '100%' : 'fit-content',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    paddingRight: withPaddingRight ? '12px' : 0,
+  }),
+);
 
 const RowMain = styled.div(({ theme }) => ({
-  height: '100vh',
+  height: '100%',
   width: '100%',
   position: 'relative',
   padding: '12px',
   paddingBottom: 0,
   backgroundColor: theme.ketcher.color.background.canvas,
   display: 'flex',
   justifyContent: 'space-between',
-  columnGap: '12px',
   containerType: 'size',
+  overflow: 'hidden',
 }));
 
 const Row = styled.div(({ theme }) => ({
@@ -84,18 +87,21 @@ const Main = styled.div({
   position: 'relative',
 });
 
+const InsideRoot = styled.div({});
+
 const DummyDiv = styled.div({
   height: '40px',
 });
 
-type LayoutSection = 'Left' | 'Right' | 'Main' | 'Top';
+type LayoutSection = 'Left' | 'Right' | 'Main' | 'Top' | 'InsideRoot';
 
 export const Layout = ({ children }: LayoutProps) => {
   const subcomponents: Record<LayoutSection, JSX.Element | null> = {
     Left: null,
     Main: null,
     Right: null,
     Top: null,
+    InsideRoot: null,
   };
   React.Children.forEach(children, (child) => {
     if (child.type === Left) {
@@ -106,12 +112,14 @@ export const Layout = ({ children }: LayoutProps) => {
       subcomponents.Top = child;
     } else if (child.type === Main) {
       subcomponents.Main = child;
+    } else if (child.type === InsideRoot) {
+      subcomponents.InsideRoot = child;
     }
   });
 
   return (
     <RowMain>
-      <Column fullWidth>
+      <Column fullWidth withPaddingRight>
         {subcomponents.Top}
         <Row>
           {subcomponents.Left}
@@ -120,6 +128,7 @@ export const Layout = ({ children }: LayoutProps) => {
         </Row>
       </Column>
       <Column>{subcomponents.Right}</Column>
+      {subcomponents.InsideRoot}
     </RowMain>
   );
 };
@@ -128,3 +137,4 @@ Layout.Left = Left;
 Layout.Top = Top;
 Layout.Right = Right;
 Layout.Main = Main;
+Layout.InsideRoot = InsideRoot;
diff --git a/packages/ketcher-react/package.json b/packages/ketcher-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ketcher-react",
-  "version": "3.0.0-rc.3",
+  "version": "3.0.0-rc.4",
   "description": "Web-based molecule sketcher",
   "license": "Apache-2.0",
   "homepage": "http://lifescience.opensource.epam.com/ketcher",

diff --git a/packages/ketcher-standalone/package.json b/packages/ketcher-standalone/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ketcher-standalone",
-  "version": "3.0.0-rc.3",
+  "version": "3.0.0-rc.4",
   "description": "Web-based molecule sketcher",
   "license": "Apache-2.0",
   "homepage": "http://lifescience.opensource.epam.com/ketcher",
@@ -42,7 +42,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.17.9",
-    "indigo-ketcher": "1.28.0-rc.2",
+    "indigo-ketcher": "1.28.0-rc.3",
     "ketcher-core": "*"
   },
   "devDependencies": {