refactor: export option modal and general settings

cheminfo · Oct 8, 2024 · 934c4c8 · 934c4c8
1 parent 597d9f7
commit 934c4c8
Show file tree

Hide file tree

Showing 17 changed files with 534 additions and 246 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -87,7 +87,7 @@
     "ml-tree-similarity": "^2.2.0",
     "multiplet-analysis": "^2.1.2",
     "nmr-correlation": "^2.3.3",
-    "nmr-load-save": "^1.0.0",
+    "nmr-load-save": "^1.1.1",
     "nmr-processing": "^12.12.3",
     "nmredata": "^0.9.11",
     "numeral": "^2.0.6",

diff --git a/src/component/elements/export/ExportContent.tsx b/src/component/elements/export/ExportContent.tsx
@@ -1,19 +1,20 @@
 /** @jsxImportSource @emotion/react */
-import { UniversalExportSettings } from 'nmr-load-save';
+import { ExportSettings } from 'nmr-load-save';
 import { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import { ExportOptionsModal } from './ExportOptionsModal';
 import { ExportSettingsProvider } from './ExportSettingsProvider';
 import { RenderDetector } from './RenderDetector';
+import { INITIAL_BASIC_EXPORT_OPTIONS } from './utilities/getExportOptions';
 import { getSizeInPixel } from './utilities/getSizeInPixel';
 import { transferDocumentStyles } from './utilities/transferDocumentStyles';
 
 const isFirefox = navigator.userAgent.toLowerCase().includes('firefox');
 
 export interface BaseExportProps {
-  onExportOptionsChange: (options: UniversalExportSettings) => void;
-  defaultExportOptions?: UniversalExportSettings;
+  onExportOptionsChange: (options: ExportSettings) => void;
+  defaultExportOptions?: ExportSettings;
 }
 
 interface RenderSizeOption {
@@ -25,32 +26,24 @@ interface BaseExportFrameProps {
   children: ReactNode;
   onExportReady: (
     documentElement: HTMLElement,
-    options: UniversalExportSettings,
+    options: ExportSettings,
   ) => void;
   renderOptions: RenderSizeOption;
 }
 interface InnerExportFrameProps extends BaseExportFrameProps {
-  exportOptions: UniversalExportSettings;
+  exportOptions: ExportSettings;
 }
 interface ExportFrameProps
   extends BaseExportFrameProps,
     Partial<BaseExportProps> {
-  exportOptions?: UniversalExportSettings;
+  exportOptions?: ExportSettings;
   onExportDialogClose?: () => void;
   confirmButtonText?: string;
 }
 
-export const INITIAL_EXPORT_OPTIONS: UniversalExportSettings = {
-  dpi: 300,
-  width: 21,
-  height: 14.8,
-  unit: 'cm',
-  useDefaultSettings: false,
-};
-
 export function ExportContent(props: ExportFrameProps) {
   const [innerExportOptions, setInnerExportOptions] =
-    useState<UniversalExportSettings | null>();
+    useState<ExportSettings | null>();
 
   const {
     children,
@@ -72,7 +65,7 @@ export function ExportContent(props: ExportFrameProps) {
         }}
         onExportOptionsChange={(options) => {
           onExportOptionsChange?.(options);
-          setInnerExportOptions({ ...options, ...getSizeInPixel(options) });
+          setInnerExportOptions(options);
         }}
         defaultExportOptions={defaultExportOptions}
         confirmButtonText={confirmButtonText}
@@ -82,11 +75,9 @@ export function ExportContent(props: ExportFrameProps) {
 
   const options =
     innerExportOptions ||
-    (exportOptions && { ...exportOptions, ...getSizeInPixel(exportOptions) }) ||
+    exportOptions ||
     defaultExportOptions ||
-    INITIAL_EXPORT_OPTIONS;
-
-  const { width, height, ...other } = options;
+    INITIAL_BASIC_EXPORT_OPTIONS;
 
   return (
     <>
@@ -103,7 +94,7 @@ export function ExportContent(props: ExportFrameProps) {
         }}
       />
       <InnerPrintFrame
-        exportOptions={{ width, height, ...other }}
+        exportOptions={options}
         onExportReady={onExportReady}
         renderOptions={renderOptions}
       >
@@ -115,8 +106,7 @@ export function ExportContent(props: ExportFrameProps) {
 
 export function InnerPrintFrame(props: InnerExportFrameProps) {
   const { children, exportOptions, onExportReady, renderOptions } = props;
-
-  const { width, height } = exportOptions;
+  const { width, height } = getSizeInPixel(exportOptions);
 
   const frameRef = useRef<HTMLIFrameElement>(null);
   const [content, setContent] = useState<HTMLElement>();

diff --git a/src/component/elements/export/ExportManager.tsx b/src/component/elements/export/ExportManager.tsx
@@ -1,4 +1,4 @@
-import { ExportPreferences, UniversalExportSettings } from 'nmr-load-save';
+import { ExportPreferences, ExportSettings } from 'nmr-load-save';
 import {
   createContext,
   ReactNode,
@@ -15,6 +15,7 @@ import { useExportViewPort } from '../../hooks/useExport';
 import { useWorkspaceExportSettings } from '../../hooks/useWorkspaceExportSettings';
 
 import { ExportContent } from './ExportContent';
+import { getSizeInPixel } from './utilities/getSizeInPixel';
 
 export type ExportFormat = 'png' | 'svg';
 export type ExportDestination = 'file' | 'clipboard';
@@ -92,7 +93,7 @@ export function ExportManagerController(props: ExportManagerControllerProps) {
 
   async function handleExport(
     targetElement: HTMLElement,
-    options: UniversalExportSettings,
+    options: ExportSettings,
   ) {
     if (!exportOptions) {
       return null;
@@ -101,13 +102,15 @@ export function ExportManagerController(props: ExportManagerControllerProps) {
     const { format, destination = 'file' } = exportOptions;
     let exportKey: keyof ExportPreferences = format;
 
+    const sizeInPixel = getSizeInPixel(options);
+
     if (destination === 'file') {
       switch (format) {
         case 'png':
-          await saveAsPNGHandler(targetElement, options);
+          await saveAsPNGHandler(targetElement, sizeInPixel);
           break;
         case 'svg':
-          await saveAsSVGHandler(targetElement, options);
+          await saveAsSVGHandler(targetElement, sizeInPixel);
           break;
 
         default:
@@ -123,7 +126,7 @@ export function ExportManagerController(props: ExportManagerControllerProps) {
       exportKey = 'clipboard';
       switch (format) {
         case 'png':
-          await copyPNGToClipboardHandler(targetElement, options);
+          await copyPNGToClipboardHandler(targetElement, sizeInPixel);
           break;
         default:
           // eslint-disable-next-line no-console