feat: export spectra insets

src/component/1d-2d/components/SVGRootContainer.tsx

@@ -8,10 +8,12 @@ interface SVGRootContainerProps {
   children: ReactNode;
   enableBoxBorder?: boolean;
   id?: string;
+  x?: string | number;
+  y?: string | number;
 }
 
 export function SVGRootContainer(props: SVGRootContainerProps) {
-  const { children, enableBoxBorder = false, id = 'nmrSVG' } = props;
+  const { children, enableBoxBorder = false, id = 'nmrSVG', x, y } = props;
 
   const {
     current: {
@@ -27,6 +29,8 @@ export function SVGRootContainer(props: SVGRootContainerProps) {
   return (
     <svg
       id={id}
+      x={x}
+      y={y}
       width={width}
       height={height}
       viewBox={`0 0 ${width} ${height}`}

src/component/1d/inset/DraggableInset.tsx

@@ -4,11 +4,13 @@ import { BsArrowsMove } from 'react-icons/bs';
 import { FaTimes } from 'react-icons/fa';
 import { Rnd } from 'react-rnd';
 
+import { SVGRootContainer } from '../../1d-2d/components/SVGRootContainer.js';
 import { useDispatch } from '../../context/DispatchContext.js';
 import { useGlobal } from '../../context/GlobalContext.js';
 import { ActionsButtonsPopover } from '../../elements/ActionsButtonsPopover.js';
 import type { ActionsButtonsPopoverProps } from '../../elements/ActionsButtonsPopover.js';
 import { useSVGUnitConverter } from '../../hooks/useSVGUnitConverter.js';
+import { useCheckExportStatus } from '../../hooks/useViewportSize.js';
 import { Viewer1D } from '../Viewer1D.js';
 
 import { InsetProvider } from './InsetProvider.js';
@@ -47,6 +49,7 @@ export function DraggableInset(props: Inset) {
   const [bounding, setBounding] = useState<InsetBounding>(externalBounding);
   const [isMoveActive, setIsMoveActive] = useState(false);
   const { percentToPixel, pixelToPercent } = useSVGUnitConverter();
+  const isExportProcessStart = useCheckExportStatus();
 
   useEffect(() => {
     setBounding({ ...externalBounding });
@@ -164,6 +167,23 @@ export function DraggableInset(props: Inset) {
     },
   ];
 
+  if (isExportProcessStart) {
+    return (
+      <InsetProvider
+        id={id}
+        width={width}
+        height={height}
+        xDomain={xDomain}
+        yDomain={yDomain}
+        spectrumKey={spectrumKey}
+      >
+        <SVGRootContainer x={x} y={y}>
+          <Viewer1D renderSvgContentOnly />
+        </SVGRootContainer>
+      </InsetProvider>
+    );
+  }
+
   return (
     <ReactRnd
       default={{ x, y, width, height }}

src/component/1d/inset/SpectraInsets.tsx

@@ -27,11 +27,11 @@ export function SpectraInsets() {
   if (!insets || insets?.length === 0) return null;
 
   return (
-    <>
+    <g className="spectra-insets">
       {insets.map((inset) => {
         return <DraggableInset key={inset.id} {...inset} />;
       })}
-    </>
+    </g>
   );
 }
 

src/component/main/NMRiumViewer.tsx

@@ -38,6 +38,7 @@ export function NMRiumViewer(props: NMRiumViewerProps) {
     return (
       <SVGRootContainer enableBoxBorder={displayerMode === '2D'}>
         <FloatMoleculeStructures />
+        <SpectraInsets />
         <Viewer emptyText={emptyText} renderSvgContentOnly />
       </SVGRootContainer>
     );