refactor: viewer node tree

cheminfo · Jan 14, 2025 · 4d69ad6 · 4d69ad6
1 parent edbd91e
commit 4d69ad6
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 25 deletions.
diff --git a/src/component/main/InnerNMRiumContents.tsx b/src/component/main/InnerNMRiumContents.tsx
@@ -14,26 +14,17 @@ import { ExportManagerController } from '../elements/export/ExportManager.js';
 import { PrintContent } from '../elements/print/PrintContent.js';
 import { Header } from '../header/Header.js';
 import DropZone from '../loader/DropZone.js';
-import { PanelOpenProviderProvider, Panels } from '../panels/Panels.js';
+import { PanelOpenProviderProvider } from '../panels/Panels.js';
 import { PanelsBar } from '../panels/PanelsBar.js';
 import ToolBar from '../toolbar/ToolBar.js';
 
 import { useNMRiumRefAPI } from './NMRiumRefAPI.js';
 import { NMRiumViewer } from './NMRiumViewer.js';
-import { SplitPaneWrapper } from './SplitPaneWrapper.js';
+import { NMRiumViewerWrapper } from './NMRiumViewerWrapper.js';
 import { StateError } from './StateError.js';
 
 import type { NMRiumProps, NMRiumRefAPI } from './index.js';
 
-const viewerContainerStyle = css`
-  border: 0.55px #e6e6e6 solid;
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  height: 100%;
-  margin-left: -1px;
-`;
-
 const containerStyles = css`
   background-color: white;
   width: 100%;
@@ -151,19 +142,14 @@ export function InnerNMRiumContents(props: InnerNMRiumContentsProps) {
                   height: '100%',
                 }}
               >
+                <KeysListenerTracker mainDivRef={mainDivRef} />
+
                 <PanelOpenProviderProvider>
                   <ToolBar />
-                  <SplitPaneWrapper>
-                    <div css={viewerContainerStyle}>
-                      <KeysListenerTracker mainDivRef={mainDivRef} />
-
-                      <NMRiumViewer
-                        emptyText={emptyText}
-                        viewerRef={viewerRef}
-                      />
-                    </div>
-                    <Panels />
-                  </SplitPaneWrapper>
+                  <NMRiumViewerWrapper
+                    viewerRef={viewerRef}
+                    emptyText={emptyText}
+                  />
                   <PanelsBar />
                 </PanelOpenProviderProvider>
                 <div

diff --git a/src/component/main/SplitPaneWrapper.tsx → src/component/main/NMRiumViewerWrapper.tsx b/src/component/main/SplitPaneWrapper.tsx → src/component/main/NMRiumViewerWrapper.tsx
@@ -1,11 +1,22 @@
+import type { RefObject } from 'react';
 import type { SplitPaneSize } from 'react-science/ui';
 import { SplitPane } from 'react-science/ui';
 
 import { usePreferences } from '../context/PreferencesContext.js';
+import { Panels } from '../panels/Panels.js';
 import { useAccordionItems } from '../panels/hooks/useAccordionItems.js';
 import { useGetPanelOptions } from '../panels/hooks/useGetPanelOptions.js';
 
-export function SplitPaneWrapper({ children }) {
+import type { NMRiumProps } from './NMRium.js';
+import { NMRiumViewer } from './NMRiumViewer.js';
+
+interface NMRiumViewerWrapperProps {
+  viewerRef: RefObject<HTMLDivElement>;
+  emptyText: NMRiumProps['emptyText'];
+}
+
+export function NMRiumViewerWrapper(props: NMRiumViewerWrapperProps) {
+  const { emptyText, viewerRef } = props;
   const { current, dispatch } = usePreferences();
   const getPanelPreferences = useGetPanelOptions();
 
@@ -31,7 +42,7 @@ export function SplitPaneWrapper({ children }) {
   const hasDisplayedPanels = displayedPanels.length > 0;
 
   if (items?.length === 0 || !hasDisplayedPanels) {
-    return <div style={{ width: '100%', height: '100%' }}>{children}</div>;
+    return <NMRiumViewer emptyText={emptyText} viewerRef={viewerRef} />;
   }
 
   const closed: number | boolean = general?.hidePanelOnLoad
@@ -46,7 +57,8 @@ export function SplitPaneWrapper({ children }) {
       closed={closed}
       onResize={resizeHandler}
     >
-      {children}
+      <NMRiumViewer emptyText={emptyText} viewerRef={viewerRef} />
+      <Panels />
     </SplitPane>
   );
 }