From f230e8d0c92e32bfa8cc0c119088fbd9f712efcd Mon Sep 17 00:00:00 2001
From: Abdullah Asaad <abdullah.asaad@connexta.com>
Date: Fri, 6 Sep 2024 13:02:25 -0700
Subject: [PATCH] fix(ui): improve exported PNG resolution

---
 ui/src/components/options-menu/ExportPng.tsx | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/ui/src/components/options-menu/ExportPng.tsx b/ui/src/components/options-menu/ExportPng.tsx
index 38983d9..b188712 100644
--- a/ui/src/components/options-menu/ExportPng.tsx
+++ b/ui/src/components/options-menu/ExportPng.tsx
@@ -6,8 +6,7 @@ import { forwardRef } from "react"
 import { getNodesBounds, getViewportForBounds } from "reactflow"
 import { useAppActions, useGetNodes } from "../../singletons/store"
 
-const IMAGE_WIDTH = 1024
-const IMAGE_HEIGHT = 768
+const IMAGE_PADDING = 200
 
 const downloadImage = (dataUrl: string) => {
   const a = document.createElement("a")
@@ -25,10 +24,12 @@ const ExportPng = forwardRef<HTMLElement>(
     const handleClick = () => {
       clearDiagramSelections()
       const nodeBounds = getNodesBounds(nodes)
+      const imageWidth = nodeBounds.width + IMAGE_PADDING
+      const imageHeight = nodeBounds.height + IMAGE_PADDING
       const transform = getViewportForBounds(
         nodeBounds,
-        IMAGE_WIDTH,
-        IMAGE_HEIGHT,
+        imageWidth,
+        imageHeight,
         0.5,
         2
       )
@@ -39,11 +40,11 @@ const ExportPng = forwardRef<HTMLElement>(
 
       toPng(viewport, {
         backgroundColor: layer01,
-        width: IMAGE_WIDTH,
-        height: IMAGE_HEIGHT,
+        width: imageWidth,
+        height: imageHeight,
         style: {
-          width: IMAGE_WIDTH.toString(),
-          height: IMAGE_WIDTH.toString(),
+          width: imageWidth.toString(),
+          height: imageHeight.toString(),
           transform: `translate(${transform.x}px, ${transform.y}px) scale(${transform.zoom})`,
         },
       })