From d227f7a5d996c6b06ddf8d79ca3511a2323d7657 Mon Sep 17 00:00:00 2001
From: IRBorisov <8611739+IRBorisov@users.noreply.github.com>
Date: Fri, 4 Aug 2023 13:26:51 +0300
Subject: [PATCH] Fix window sizing issues

---
 rsconcept/frontend/src/App.tsx                  | 17 +++++++++++++++--
 rsconcept/frontend/src/components/Footer.tsx    |  2 +-
 .../src/pages/RSFormPage/EditorConstituenta.tsx |  4 +++-
 .../src/pages/RSFormPage/EditorItems.tsx        | 13 ++++++++-----
 .../src/pages/RSFormPage/EditorTermGraph.tsx    | 10 +++++++---
 5 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/rsconcept/frontend/src/App.tsx b/rsconcept/frontend/src/App.tsx
index 9c702e2c..79a1201e 100644
--- a/rsconcept/frontend/src/App.tsx
+++ b/rsconcept/frontend/src/App.tsx
@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import { Route, Routes } from 'react-router-dom';
 
 import Footer from './components/Footer';
@@ -18,6 +19,17 @@ import UserProfilePage from './pages/UserProfilePage';
 function App () {
   const { noNavigation } = useConceptTheme();
 
+  const scrollWindowSize = useMemo(() => {
+    return !noNavigation ? 
+      'max-h-[calc(100vh-4.5rem)]'
+    : 'max-h-[100vh]'; 
+  }, [noNavigation]);
+  const mainSize = useMemo(() => {
+    return !noNavigation ? 
+      'min-h-[calc(100vh-12rem)]'
+    : 'min-h-[calc(100vh-8rem)] '; 
+  }, [noNavigation]);
+  
   return (
     <div className='antialiased clr-app'>
       <Navigation />
@@ -27,8 +39,9 @@ function App () {
         draggable={false}
         pauseOnFocusLoss={false}
       />
-      <div className={`max-h-[calc(100vh-${noNavigation ? 0 : 4.5}rem)] overflow-auto`}>
-      <main className={`min-h-[calc(100vh-${noNavigation ? 8 : 12}rem)] px-2`}>
+      
+      <div className={`${scrollWindowSize} overflow-auto`}>
+      <main className={`${mainSize} px-2`}>
         <Routes>
           <Route path='/' element={ <HomePage/>} />
 
diff --git a/rsconcept/frontend/src/components/Footer.tsx b/rsconcept/frontend/src/components/Footer.tsx
index 2b486722..d112b970 100644
--- a/rsconcept/frontend/src/components/Footer.tsx
+++ b/rsconcept/frontend/src/components/Footer.tsx
@@ -5,7 +5,7 @@ import { GithubIcon } from './Icons';
 
 function Footer() {
   return (
-    <footer className='z-50 px-4 pt-2 pb-4 border-t-2 t clr-footer'>
+    <footer className='z-50 px-4 pt-2 pb-4 border-t-2 clr-footer'>
       <div className='flex items-stretch justify-center w-full mx-auto'>
         <div className='px-4 underline whitespace-nowrap'>
           <Link to='/manuals' tabIndex={-1}>Справка</Link> <br/>
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx
index 01127c7d..14ee51fa 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx
@@ -65,6 +65,8 @@ function EditorConstituenta({ activeID, onShowAST, onCreateCst, onOpenEdit, onDe
       setTextDefinition(activeCst.definition?.text?.raw ?? '');
       setExpression(activeCst.definition?.formal ?? '');
       setTypification(activeCst?.parse?.typification || 'N/A');
+    } else if (schema && schema?.items.length > 0) {
+      onOpenEdit(schema.items[0].id);
     }
   }, [activeCst]);
 
@@ -108,7 +110,7 @@ function EditorConstituenta({ activeID, onShowAST, onCreateCst, onOpenEdit, onDe
 
   return (
     <div className='flex items-start w-full gap-2'>
-      <form onSubmit={handleSubmit} className='flex-grow min-w-[50rem] max-w-min px-4 py-2 border'>
+      <form onSubmit={handleSubmit} className='flex-grow min-w-[50rem] max-w-min px-4 py-2 mb-2 border'>
         <div className='flex items-start justify-between'>
             <button type='submit'
               title='Сохранить изменения'
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorItems.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorItems.tsx
index 44425f9c..56a6be8b 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorItems.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorItems.tsx
@@ -257,25 +257,25 @@ function EditorItems({ onOpenEdit, onCreateCst, onDeleteCst }: EditorItemsProps)
             <b>{selected.length}</b> из {schema?.stats?.count_all ?? 0}
           </span>
         </div>
-        {isEditable && <div className='flex items-center justify-start w-full gap-1'>
+        <div className='flex items-center justify-start w-full gap-1'>
           <Button
             tooltip='Переместить вверх'
             icon={<ArrowUpIcon size={6}/>}
-            disabled={nothingSelected}
+            disabled={!isEditable || nothingSelected}
             dense
             onClick={handleMoveUp}
           />
           <Button
             tooltip='Переместить вниз'
             icon={<ArrowDownIcon size={6}/>}
-            disabled={nothingSelected}
+            disabled={!isEditable || nothingSelected}
             dense
             onClick={handleMoveDown}
           />
           <Button
             tooltip='Удалить выбранные'
             icon={<DumpBinIcon color={!nothingSelected ? 'text-red' : ''} size={6}/>}
-            disabled={nothingSelected}
+            disabled={!isEditable || nothingSelected}
             dense
             onClick={handleDelete}
           />
@@ -284,12 +284,14 @@ function EditorItems({ onOpenEdit, onCreateCst, onDeleteCst }: EditorItemsProps)
             tooltip='Переиндексировать имена'
             icon={<ArrowsRotateIcon color='text-primary' size={6}/>}
             dense
+            disabled={!isEditable}
             onClick={handleReindex}
           />
           <Button
             tooltip='Новая конституента'
             icon={<SmallPlusIcon color='text-green' size={6}/>}
             dense
+            disabled={!isEditable}
             onClick={() => handleCreateCst()}
           />
           {(Object.values(CstType)).map(
@@ -299,6 +301,7 @@ function EditorItems({ onOpenEdit, onCreateCst, onDeleteCst }: EditorItemsProps)
                 text={`${getCstTypePrefix(type)}`}
                 tooltip={getCstTypeShortcut(type)}
                 dense
+                disabled={!isEditable}
                 onClick={() => handleCreateCst(type)}
               />;
           })}
@@ -328,7 +331,7 @@ function EditorItems({ onOpenEdit, onCreateCst, onDeleteCst }: EditorItemsProps)
               })}
             </div>
           </ConceptTooltip>
-        </div>}
+        </div>
       </div>
       <div className='w-full h-full' onKeyDown={handleTableKey}>
       <ConceptDataTable
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx
index 87bd5d07..3df5c7ba 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx
@@ -14,7 +14,7 @@ import { GraphLayoutSelector,mapLayoutLabels } from '../../utils/staticUI';
 
 function EditorTermGraph() {
   const { schema } = useRSForm();
-  const { darkMode } = useConceptTheme();
+  const { darkMode, noNavigation } = useConceptTheme();
   const [ layout, setLayout ] = useLocalStorage<LayoutTypes>('graph_layout', 'forceatlas2');
 
   const [ filtered, setFiltered ] = useState<Graph>(new Graph());
@@ -91,6 +91,10 @@ function EditorTermGraph() {
     focusOnSelect: false
   });
 
+  const canvasSize = !noNavigation ? 
+    'w-[1240px] h-[736px] 2xl:w-[1880px] 2xl:h-[746px]' 
+  : 'w-[1240px] h-[800px] 2xl:w-[1880px] 2xl:h-[810px]';
+
   return (<>
     <div className='relative w-full'>
     <div className='absolute top-0 left-0 z-20 py-2 w-[12rem] flex flex-col'>
@@ -127,7 +131,7 @@ function EditorTermGraph() {
     </div>
     </div>
     <div className='flex-wrap w-full h-full overflow-auto'>
-    <div className='relative w-[1260px] h-[730px] 2xl:w-[1900px] 2xl:h-[750px]'>
+    <div className={`relative border-t border-r ${canvasSize}`}>
       <GraphCanvas
         draggable
         ref={graphRef}
@@ -142,7 +146,7 @@ function EditorTermGraph() {
         onNodePointerOver={onNodePointerOver}
         onNodePointerOut={onNodePointerOut}
         cameraMode={ orbit ? 'orbit' : layout.includes('3d') ? 'rotate' : 'pan'}
-        layoutOverrides={ layout.includes('tree') ? { nodeLevelRatio: 3 } : undefined }
+        layoutOverrides={ layout.includes('tree') ? { nodeLevelRatio: 1 } : undefined }
         labelFontUrl={resources.graph_font}
         theme={darkMode ? darkTheme : lightTheme}
         renderNode={({ node, ...rest }) => (