fix ==> แผนผังองค์กร

src/modules/12_organization/views/main.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, nextTick, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 
@@ -22,6 +22,7 @@ const rootOrgID = ref(); // org id ของ root ตัวปัจจุบั
 const dataSource = ref(); // ข้อมูล Chart
 const idActive = ref<string>("");
 const dataSourceLock = ref(); // ข้อมูลตั้งต้นของ Chart ใช้ให้กดกลับไปที่ home
+const scrollContainer = ref<HTMLElement | null>(null);
 
 /**
  * สร้าง Path Breadcrumbs
@@ -87,12 +88,38 @@ function findPath(id: any) {
   }
 }
 
-function savePNG() {
+/** function ดาวน์โหลดไฟล์โครงสร้าง PNG*/
-  chartRef.value.savePNG();
+async function savePNG() {
+  try {
+    showLoader();
+    await scrollToCenter();
+    await chartRef.value.savePNG();
+  } catch {
+    messageError($q);
+  } finally {
+    hideLoader();
+  }
 }
 
-function savePDF() {
+/** function ดาวน์โหลดไฟล์โครงสร้าง PDF*/
-  chartRef.value.savePDF();
+async function savePDF() {
+  try {
+    showLoader();
+    await scrollToCenter();
+    await chartRef.value.savePDF();
+  } catch {
+    messageError($q);
+  } finally {
+    hideLoader();
+  }
+}
+
+/** ฟังก์ชันเลื่อน scroll ไปที่กึ่งกลาง*/
+async function scrollToCenter() {
+  const container = scrollContainer.value;
+  if (container) {
+    container.scrollLeft = (container.scrollWidth - container.clientWidth) / 2;
+  }
 }
 
 /**
@@ -146,7 +173,7 @@ function searchAndReplace(data: any, id: string) {
   }
 }
 
-function getActive() {
+async function getActive() {
   http
     .get(config.API.orgActive)
     .then(async (res) => {
@@ -159,6 +186,19 @@ function getActive() {
     })
     .finally(() => {});
 }
+
+// Watch เมื่อข้อมูลใน dataSource เปลี่ยนแปลง
+watch(
+  dataSource,
+  () => {
+    // ใช้ nextTick เพื่อให้ DOM อัปเดตเสร็จก่อนค่อยเลื่อน scroll
+    nextTick(() => {
+      scrollToCenter();
+    });
+  },
+  { deep: true } // ตรวจจับการเปลี่ยนแปลงภายในข้อมูล
+);
+
 /** hook lifecycle*/
 onMounted(async () => {
   await getActive();
@@ -223,7 +263,16 @@ onMounted(async () => {
           <div class="col-12">
             <q-separator />
           </div>
-          <div style="overflow-x: auto; overflow-y: auto" class="q-pt-md">
+          <div
+            ref="scrollContainer"
+            style="
+              overflow-x: auto;
+              overflow-y: auto;
+              height: 70vh;
+              position: relative;
+            "
+            class="q-pt-md"
+          >
             <StructChart
               style="height: 70vh"
               ref="chartRef"