From 6a41bd0c2e98a6d6525f724c15506d44e7ea3f88 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E9=9C=84?= <zhaoxiaox0053@163.com>
Date: Wed, 3 Jan 2024 16:08:21 +0800
Subject: [PATCH] =?UTF-8?q?fix=20=E6=B5=81=E7=A8=8B=E5=9B=BE=E7=94=BB?=
 =?UTF-8?q?=E5=B8=83=E5=A4=A7=E5=B0=8F=E9=9A=8F=E5=BC=B9=E6=A1=86=E5=A4=A7?=
 =?UTF-8?q?=E5=B0=8F=E5=8F=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FlowChart.vue      | 25 ++++++++++++++++++-------
 src/components/FlowChartModal.vue |  6 ++++++
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/components/FlowChart.vue b/src/components/FlowChart.vue
index 19a8cf32..1bd3217e 100644
--- a/src/components/FlowChart.vue
+++ b/src/components/FlowChart.vue
@@ -67,7 +67,8 @@ export default {
   data () {
     return {
       isLoadEnd: false, // 页面是否加载完成
-      graph: null
+      graph: null,
+      observer: null // 图形容器大小变化监听器
     }
   },
   watch: {
@@ -95,6 +96,10 @@ export default {
   mounted () {
     this.$nextTick(() => {
       this.isLoadEnd = true
+      const dom = document.getElementById(this.domId)
+      this.observer = new ResizeObserver(this.handleResize)
+      console.log(this.observer)
+      this.observer.observe(dom, { box: 'border-box' })
     })
   },
   methods: {
@@ -301,12 +306,6 @@ export default {
       this.graph.on('node:click', event => {
         this.handleNodeClick(event)
       })
-      window.onresize = () => {
-        if (!this.graph || this.graph.get('destroyed')) {
-          return
-        }
-        this.graph.changeSize(document.getElementById(this.domId).clientWidth, document.getElementById(this.domId).clientHeight)
-      }
     },
     /**
      * 节点点击事件
@@ -329,7 +328,19 @@ export default {
     },
     handleDelete (item) {
       this.$emit('delete', item)
+    },
+    /**
+     * 处理元素大小变化
+     */
+    handleResize () {
+      if (!this.graph || this.graph.get('destroyed')) {
+        return
+      }
+      this.graph.changeSize(document.getElementById(this.domId).clientWidth, document.getElementById(this.domId).clientHeight)
     }
+  },
+  beforeDestroy () {
+    this.observer.disconnect()
   }
 }
 </script>
diff --git a/src/components/FlowChartModal.vue b/src/components/FlowChartModal.vue
index 7e61c159..998322d5 100644
--- a/src/components/FlowChartModal.vue
+++ b/src/components/FlowChartModal.vue
@@ -60,4 +60,10 @@ export default {
   width: 100%;
   height: calc(100vh - 200px - 55px - 48px);
 }
+
+.fullscreen {
+  /deep/ #flowChart {
+    height: calc(100vh - 55px - 48px);
+  }
+}
 </style>