fix: trigger printing after the NMRium viewer is rendered and rescale…

…d to an A4 page
cheminfo · Jul 10, 2024 · 489c4cb · 489c4cb
1 parent ae9d1f7
commit 489c4cb
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 8 deletions.
diff --git a/src/component/main/InnerNMRiumContents.tsx b/src/component/main/InnerNMRiumContents.tsx
@@ -98,19 +98,23 @@ export function InnerNMRiumContents(props: InnerNMRiumContentsProps) {
   const [printFlag, setPrintFlag] = useState(false);
 
   useEffect(() => {
-    function handleBeforePrint() {
-      setPrintFlag(true);
-    }
     function handleAfterPrint() {
       setPrintFlag(false);
     }
 
-    window.addEventListener('beforeprint', handleBeforePrint);
+    function handleKeyDow(event) {
+      if ((event.ctrlKey || event.metaKey) && event.key === 'p') {
+        event.preventDefault();
+        setPrintFlag(true);
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDow);
     window.addEventListener('afterprint', handleAfterPrint);
 
     return () => {
-      window.removeEventListener('beforeprint', handleBeforePrint);
       window.removeEventListener('afterprint', handleAfterPrint);
+      window.removeEventListener('keydown', handleKeyDow);
     };
   }, []);
 
@@ -187,6 +191,10 @@ export function InnerNMRiumContents(props: InnerNMRiumContentsProps) {
             style={{
               width: '297mm',
               height: '210mm',
+              padding: '0.5cm',
+            }}
+            onRender={() => {
+              window.print();
             }}
           />
         )}

diff --git a/src/component/main/NMRiumViewer.tsx b/src/component/main/NMRiumViewer.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties, RefObject } from 'react';
+import { CSSProperties, RefObject, useDeferredValue, useEffect } from 'react';
 
 import Viewer1D from '../1d/Viewer1D';
 import FloatMoleculeStructures from '../1d-2d/components/FloatMoleculeStructures';
@@ -11,11 +11,29 @@ interface NMRiumViewerProps {
   emptyText: NMRiumProps['emptyText'];
   viewerRef: RefObject<HTMLDivElement>;
   style?: CSSProperties;
+  onRender?: () => void;
 }
 
 export function NMRiumViewer(props: NMRiumViewerProps) {
-  const { emptyText, viewerRef, style = {} } = props;
-  const { displayerMode } = useChartData();
+  const { emptyText, viewerRef, onRender, style = {} } = props;
+  const { displayerMode, width, height } = useChartData();
+  const renderDimension = useDeferredValue({ width, height });
+  useEffect(() => {
+    if (typeof onRender !== 'function') {
+      return;
+    }
+
+    requestAnimationFrame(() => {
+      setTimeout(() => {
+        if (
+          renderDimension.width !== width ||
+          renderDimension.height !== height
+        ) {
+          onRender();
+        }
+      }, 0);
+    });
+  }, [onRender, width, height, renderDimension.width, renderDimension.height]);
 
   return (
     <div
@@ -26,6 +44,7 @@ export function NMRiumViewer(props: NMRiumViewerProps) {
         width: '100%',
         height: '100%',
         position: 'relative',
+        backgroundColor: 'white',
         ...style,
       }}
     >