feat/full-diagram (#820)

* feat: download full node graph * Create rare-papayas-lay.md --------- Co-authored-by: David Boyne <[email protected]>
event-catalog · Sep 21, 2024 · c8118b7 · c8118b7
1 parent f189715
commit c8118b7
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 deletions.
diff --git a/.changeset/rare-papayas-lay.md b/.changeset/rare-papayas-lay.md
@@ -0,0 +1,5 @@
+---
+"@eventcatalog/core": patch
+---
+
+fix(core): downloading images in visualizer now shows the whole diagram
diff --git a/src/components/MDX/NodeGraph/DownloadButton.tsx b/src/components/MDX/NodeGraph/DownloadButton.tsx
@@ -1,4 +1,4 @@
-import { Panel, useReactFlow, getRectOfNodes } from 'reactflow';
+import { Panel, useReactFlow, getNodesBounds, getViewportForBounds } from 'reactflow';
 import { toPng } from 'html-to-image';
 import { DocumentArrowDownIcon } from '@heroicons/react/24/outline';
 
@@ -16,7 +16,10 @@ const imageHeight = 768;
 function DownloadButton({ filename, addPadding = true }: { filename?: string; addPadding?: boolean }) {
   const { getNodes } = useReactFlow();
   const onClick = () => {
-    const nodesBounds = getRectOfNodes(getNodes());
+    const nodesBounds = getNodesBounds(getNodes());
+    const width = imageWidth > nodesBounds.width ? imageWidth : nodesBounds.width;
+    const height = imageHeight > nodesBounds.height ? imageHeight : nodesBounds.height;
+    const viewport = getViewportForBounds(nodesBounds, width, height, 0.5, 2);
 
     // Hide the button
     // @ts-ignore
@@ -25,13 +28,14 @@ function DownloadButton({ filename, addPadding = true }: { filename?: string; ad
     document.querySelector('.react-flow__controls').style.display = 'none';
 
     // @ts-ignore
-    toPng(document.querySelector('.react-flow'), {
+    toPng(document.querySelector('.react-flow__viewport'), {
       backgroundColor: '#f1f1f1',
-      width: imageWidth * 1.2,
-      height: imageHeight,
+      width,
+      height,
       style: {
-        width: imageWidth * 1.2,
-        height: imageHeight,
+        width,
+        height,
+        transform: `translate(${viewport.x}px, ${viewport.y}px) scale(${viewport.zoom})`,
       },
     }).then((dataUrl: string) => {
       downloadImage(dataUrl, filename);