move container to the export png

Author: mabaasit

packages/compass-data-modeling/src/components/export-diagram-modal.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import {
   Button,
   css,
@@ -23,7 +23,7 @@ import { connect } from 'react-redux';
 import type { DataModelingState } from '../store/reducer';
 import type { StaticModel } from '../services/data-model-storage';
 import { exportToJson, exportToPng } from '../services/export-diagram';
-import { getNodesBounds, useDiagram } from '@mongodb-js/diagramming';
+import { useDiagram } from '@mongodb-js/diagramming';
 
 const nbsp = '\u00a0';
 
@@ -64,8 +64,6 @@ const ExportDiagramModal = ({
   const [exportFormat, setExportFormat] = useState<'png' | 'json' | null>(null);
   const diagram = useDiagram();
   const [isExporting, setIsExporting] = useState(false);
-  const exportDiagramContainerRef = useRef<HTMLDivElement>(null);
-  const bounds = useMemo(() => getNodesBounds(diagram.getNodes()), [diagram]);
 
   const onExport = useCallback(async () => {
     if (!exportFormat || !model) {
@@ -75,7 +73,7 @@ const ExportDiagramModal = ({
     if (exportFormat === 'json') {
       exportToJson(diagramLabel, model);
     } else if (exportFormat === 'png') {
-      await exportToPng(diagramLabel, exportDiagramContainerRef, diagram);
+      await exportToPng(diagramLabel, diagram);
     }
     onCloseClick();
     setIsExporting(false);
@@ -131,18 +129,6 @@ const ExportDiagramModal = ({
             </div>
           </RadioGroup>
         </div>
-        {/* Container where we render export diagram when exporting png */}
-        <div
-          style={{
-            width: bounds.width,
-            height: bounds.height,
-            // Fixed at bottom right corner
-            position: 'fixed',
-            top: '100vh',
-            left: '100vw',
-          }}
-          ref={exportDiagramContainerRef}
-        />
       </ModalBody>
       <ModalFooter className={footerStyles}>
         <Button

packages/compass-data-modeling/src/services/export-diagram.tsx

@@ -60,25 +60,25 @@ function moveSvgDefsToViewportElement(
       'path[marker-end], path[marker-start]'
     );
     if (pathsWithMarkers.length !== 0) {
-      const clonedDef = markerDef.cloneNode(true) as SVGMarkerElement;
+      const clonedDef = markerDef.cloneNode(true);
       svg.insertBefore(clonedDef, svg.firstChild);
     }
   });
   markerDef.remove();
 }
 
-export async function exportToPng(
-  fileName: string,
-  containerRef: React.RefObject<HTMLDivElement>,
-  diagram: DiagramInstance
-) {
-  const container = containerRef.current;
-  if (!container) {
-    throw new Error('Container reference is not set');
-  }
+export async function exportToPng(fileName: string, diagram: DiagramInstance) {
+  const container = document.createElement('div');
+  container.setAttribute('data-testid', 'export-diagram-container');
+  // Push it out of the viewport
+  container.style.position = 'fixed';
+  container.style.top = '100vh';
+  container.style.left = '100vw';
+  document.body.appendChild(container);
+
   const dataUri = await getExportPngDataUri(container, diagram);
   downloadFile(dataUri, fileName, () => {
-    ReactDOM.unmountComponentAtNode(container);
+    container.remove();
   });
 }