From 5aed4ea7a05c74c430f126ec44fc7b5c400d0652 Mon Sep 17 00:00:00 2001
From: chouheiwa <849131492@qq.com>
Date: Mon, 16 Feb 2026 16:19:22 +0800
Subject: [PATCH] fix: use viewBox dimensions for PNG export canvas size

In rough mode, SVG width/height are set to 100%, so getBoundingClientRect
returns the container size instead of the actual diagram size. Use viewBox
dimensions when available to get the correct aspect ratio for PNG export.
---
 src/lib/components/Actions.svelte | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/Actions.svelte b/src/lib/components/Actions.svelte
index 2f95c6d4..983e6618 100644
--- a/src/lib/components/Actions.svelte
+++ b/src/lib/components/Actions.svelte
@@ -117,18 +117,25 @@ ${svgString}`);
 
     const box = svg.getBoundingClientRect();
 
+    // In rough mode, SVG has width/height="100%" so getBoundingClientRect returns
+    // the container size, not the actual diagram size. Use viewBox dimensions instead.
+    const svgEl = svg as unknown as SVGSVGElement;
+    const viewBox = svgEl.viewBox?.baseVal;
+    const contentWidth = viewBox && viewBox.width > 0 ? viewBox.width : box.width;
+    const contentHeight = viewBox && viewBox.height > 0 ? viewBox.height : box.height;
+
     if (imageSizeMode === 'width') {
-      const ratio = box.height / box.width;
+      const ratio = contentHeight / contentWidth;
       canvas.width = imageSize;
       canvas.height = imageSize * ratio;
     } else if (imageSizeMode === 'height') {
-      const ratio = box.width / box.height;
+      const ratio = contentWidth / contentHeight;
       canvas.width = imageSize * ratio;
       canvas.height = imageSize;
     } else {
       const multiplier = 2;
-      canvas.width = box.width * multiplier;
-      canvas.height = box.height * multiplier;
+      canvas.width = contentWidth * multiplier;
+      canvas.height = contentHeight * multiplier;
     }
 
     const context = canvas.getContext('2d');