feat: print spectra (#2786)

* feat: print spectra

feat: prepare NMRium structure for printing

fix: trigger printing after the NMRium viewer is rendered and rescaled to an A4 page

* feat: create print content component

* refactor: use new print component

* fix: print page config

* feat: improve print content page options modal

* fix: return the window size to origin after the print is finished

* chore: fix prettier and eslint

* chore: fix prettier and eslint

* fix: print padding

* feat: improve print

* feat: save print page settings in the workspace

* fix:  type and page padding

* fix: print in firefox

* refactor: change label from 'margin' to 'Margin'

* fix: display overlay div to prevent hover effects

close #3139

package.json

@@ -91,7 +91,7 @@
     "ml-tree-similarity": "^2.2.0",
     "multiplet-analysis": "^2.1.2",
     "nmr-correlation": "^2.3.3",
-    "nmr-load-save": "^0.34.2",
+    "nmr-load-save": "^0.35.0",
     "nmr-processing": "^12.8.0",
     "nmredata": "^0.9.11",
     "numeral": "^2.0.6",
@@ -153,4 +153,4 @@
     "vite": "^5.3.3",
     "vitest": "^2.0.2"
   }
-}
+}

src/component/2d/Viewer2D.tsx

@@ -15,6 +15,7 @@ import { MouseTracker } from '../EventsTrackers/MouseTracker';
 import { useChartData } from '../context/ChartContext';
 import { useDispatch } from '../context/DispatchContext';
 import { useMapKeyModifiers } from '../context/KeyModifierContext';
+import { usePrintPage } from '../elements/print';
 import Spinner from '../loader/Spinner';
 import { options } from '../toolbar/ToolTypes';
 
@@ -284,10 +285,13 @@ interface ViewerResponsiveWrapperProps {
 export function ViewerResponsiveWrapper(props: ViewerResponsiveWrapperProps) {
   const dispatch = useDispatch();
   const { width, height, children } = props;
+  const printOptions = usePrintPage();
 
   useEffect(() => {
-    dispatch({ type: 'SET_DIMENSIONS', payload: { width, height } });
-  }, [width, height, dispatch]);
+    if (!printOptions) {
+      dispatch({ type: 'SET_DIMENSIONS', payload: { width, height } });
+    }
+  }, [width, height, dispatch, printOptions]);
 
   return children;
 }

src/component/context/ChartContext.tsx

@@ -1,10 +1,25 @@
+import { produce } from 'immer';
 import { createContext, useContext } from 'react';
 
+import { usePrintPage } from '../elements/print';
 import { initialState, State } from '../reducer/Reducer';
 
 export const ChartContext = createContext<State>(initialState);
 export const ChartDataProvider = ChartContext.Provider;
 
 export function useChartData() {
-  return useContext(ChartContext);
+  const data = useContext(ChartContext);
+
+  const printOptions = usePrintPage();
+
+  if (!printOptions) return data;
+
+  const { width, height } = printOptions;
+
+  const updatedData = produce(data, (draft) => {
+    draft.width = width;
+    draft.height = height;
+  });
+
+  return updatedData;
 }