From e632daa773094911ed51e6373ea875424ace49ac Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 25 Feb 2026 13:00:38 +0700
Subject: [PATCH] fix:export Chart

---
 package.json               |   2 +-
 src/plugins/exportChart.ts | 168 +++++++++++++++++++++++++++----------
 2 files changed, 124 insertions(+), 46 deletions(-)

diff --git a/package.json b/package.json
index c0a48c7..fc5a6bd 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
     "@tato30/vue-pdf": "^1.5.1",
     "@vuepic/vue-datepicker": "^3.6.3",
     "bma-org-chart": "^0.0.7",
-    "dom-to-image-more": "^3.6.0",
+    "html-to-image": "^1.11.13",
     "keycloak-js": "^20.0.2",
     "moment": "^2.29.4",
     "pdf-lib": "^1.17.1",
diff --git a/src/plugins/exportChart.ts b/src/plugins/exportChart.ts
index 31ea0ff..9e865e6 100644
--- a/src/plugins/exportChart.ts
+++ b/src/plugins/exportChart.ts
@@ -1,4 +1,4 @@
-import domtoimage from "dom-to-image-more";
+import * as htmlToImage from "html-to-image";
 import { PDFDocument } from "pdf-lib";
 
 /** ฟังก์ชันสำหรับแสดง loading spinner */
@@ -10,11 +10,16 @@ export function showLoadingSpinner() {
   loading.style.left = "0";
   loading.style.width = "100vw";
   loading.style.height = "100vh";
-  loading.style.background = "rgba(0,0,0,0.2)";
+
+  // ปรับให้มืดขึ้น (0.6) และเพิ่มการเบลอฉากหลัง (blur)
+  loading.style.background = "rgba(0, 0, 0, 0.6)";
+  loading.style.backdropFilter = "blur(4px)";
+
   loading.style.display = "flex";
   loading.style.alignItems = "center";
   loading.style.justifyContent = "center";
-  loading.style.zIndex = "9999";
+  loading.style.zIndex = "99999";
+
   loading.innerHTML = `
     <div style="display:flex;flex-direction:column;align-items:center;">
       <div style="
@@ -23,10 +28,10 @@ export function showLoadingSpinner() {
         border-radius: 50%;
         width: 60px;
         height: 60px;
-        animation: spin 1s linear infinite;
-      "></div>
-     
+        animation: spin 1s linear infinite;">
+        </div>
     </div>
+
     <style>
       @keyframes spin {
         0% { transform: rotate(0deg);}
@@ -44,60 +49,130 @@ function hideLoadingSpinner() {
 }
 
 /**
- * ฟังก์ชันสำหรับ export โครงสร้างองค์กรเป็น PNG
- * @param node HTMLElement ที่ต้องการ export เป็น PNG
+ * Prepares an HTML node for export by cloning it, applying styles to reveal its full size,
+ * and calculating its dimensions.
+ * @param node The HTMLElement to prepare.
+ * @returns A promise that resolves with the cloned node, its container, and its dimensions.
  */
-export async function exportChartToPNG(node: HTMLElement): Promise<void> {
-  if (node) {
-    try {
-      // สร้าง PNG จาก DOM ขนาดเต็ม
-      const imageData = await domtoimage.toPng(node, {
-        bgcolor: "#fff",
-        quality: 1,
-        width: node.scrollWidth,
-        height: node.scrollHeight,
-      });
+async function prepareNodeForExport(node: HTMLElement) {
+  const container = document.createElement("div");
+  container.style.position = "absolute";
+  container.style.left = "-9999px";
+  container.style.top = "0";
+  container.style.width = "fit-content";
+  container.style.height = "fit-content";
+  container.style.overflow = "visible";
+  container.style.backgroundColor = "#fff"; // ป้องกันพื้นหลังโปร่งแสง
 
-      const link = document.createElement("a");
-      link.download = "orgchart.png";
-      link.href = imageData;
-      link.click();
-    } catch (error: any) {
-      alert("Export ไม่สำเร็จ: " + error.message);
-    } finally {
-      hideLoadingSpinner();
-    }
-  }
+  const clone = node.cloneNode(true) as HTMLElement;
+
+  clone.style.width = "max-content"; // ให้กางตามความกว้างของ Chart ทั้งหมด
+  clone.style.height = "auto";
+  clone.style.overflow = "visible";
+
+  container.appendChild(clone);
+  document.body.appendChild(container);
+
+  await document.fonts.ready;
+  // เพิ่มเวลาอีกนิดเพื่อให้ CSS 'auto' คำนวณเสร็จสมบูรณ์
+  await new Promise((resolve) => setTimeout(resolve, 1200));
+
+  const fullWidth = clone.scrollWidth;
+  const fullHeight = clone.scrollHeight;
+
+  return { clone, container: container, fullWidth, fullHeight };
 }
 
 /**
  * ฟังก์ชันสำหรับ export โครงสร้างองค์กรเป็น PNG
  * @param node HTMLElement ที่ต้องการ export เป็น PNG
  */
-export async function exportChartToPDF(node: HTMLElement): Promise<void> {
-  // ใช้ scrollWidth/scrollHeight เพื่อขนาดเต็ม
-  const width = node.scrollWidth;
-  const height = node.scrollHeight;
+export async function exportChartToPNG(node: HTMLElement): Promise<void> {
+  if (!node) return;
 
+  let container: HTMLElement | null = null;
   try {
-    // สร้าง PNG จาก DOM ขนาดเต็ม
-    const imageData = await domtoimage.toPng(node, {
-      width,
-      height,
-      bgcolor: "#fff",
+    const {
+      clone,
+      container: cont,
+      fullWidth,
+      fullHeight,
+    } = await prepareNodeForExport(node);
+    container = cont;
+
+    const imageData = await htmlToImage.toPng(clone, {
+      backgroundColor: "#ffffff",
+      quality: 1,
+      width: fullWidth + 100, // Add padding to prevent clipping
+      height: fullHeight + 100,
+      style: {
+        padding: "50px",
+        margin: "0",
+        fontFamily: "'Sarabun', sans-serif",
+      },
+      cacheBust: true,
     });
-    // สร้าง PDF ด้วย pdf-lib
+
+    const link = document.createElement("a");
+    link.download = "orgchart.png";
+    link.href = imageData;
+    link.click();
+  } catch (error: any) {
+    console.error("Export Error:", error);
+    alert("Export ไม่สำเร็จ: " + error.message);
+  } finally {
+    if (container && document.body.contains(container)) {
+      document.body.removeChild(container);
+    }
+    hideLoadingSpinner();
+  }
+}
+
+/**
+ * ฟังก์ชันสำหรับ export โครงสร้างองค์กรเป็น PDF
+ * @param node HTMLElement ที่ต้องการ export เป็น PDF
+ */
+export async function exportChartToPDF(node: HTMLElement): Promise<void> {
+  if (!node) return;
+
+  let container: HTMLElement | null = null;
+  try {
+    const {
+      clone,
+      container: cont,
+      fullWidth,
+      fullHeight,
+    } = await prepareNodeForExport(node);
+    container = cont;
+
+    // Use htmlToImage for better Thai language stability
+    const imageData = await htmlToImage.toPng(clone, {
+      backgroundColor: "#ffffff",
+      quality: 1,
+      width: fullWidth,
+      height: fullHeight,
+      style: {
+        fontFamily: "'Sarabun', sans-serif",
+      },
+      cacheBust: true,
+    });
+
+    // Create PDF with pdf-lib
     const pdfDoc = await PDFDocument.create();
-    const page = pdfDoc.addPage([width, height]);
+    // Add a PDF page based on the actual image size
+    const page = pdfDoc.addPage([fullWidth, fullHeight]);
     const pngImage = await pdfDoc.embedPng(imageData);
+
     page.drawImage(pngImage, {
       x: 0,
       y: 0,
-      width,
-      height,
+      width: fullWidth,
+      height: fullHeight,
     });
+
     const pdfBytes = await pdfDoc.save();
-    // ดาวน์โหลด PDF
+
+    // Download the file
     const blob = new Blob([pdfBytes], { type: "application/pdf" });
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
@@ -106,10 +181,13 @@ export async function exportChartToPDF(node: HTMLElement): Promise<void> {
     a.click();
     URL.revokeObjectURL(url);
   } catch (err: any) {
-    alert("Export ไม่สำเร็จ: " + err.message);
-
-    console.error(err);
+    console.error("PDF Export Error:", err);
+    alert("Export PDF ไม่สำเร็จ: " + err.message);
   } finally {
+    // Clean up the clone and hide loading
+    if (container && document.body.contains(container)) {
+      document.body.removeChild(container);
+    }
     hideLoadingSpinner();
   }
 }