From e83183b8d8cf2362398143246e5413ed2f7c1afd Mon Sep 17 00:00:00 2001
From: hanyuxia <hanyuxia@geedgenetworks.com>
Date: Tue, 23 Jul 2024 15:16:52 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=AE=9E=E4=BD=93=E5=85=B3=E7=B3=BB?=
 =?UTF-8?q?=E5=9B=BE=E4=BC=98=E5=8C=96:1.=E7=82=B9=E5=87=BB=E8=87=AA?=
 =?UTF-8?q?=E9=80=82=E5=BA=94=E6=93=8D=E4=BD=9C=EF=BC=8C=E6=8B=93=E5=B1=95?=
 =?UTF-8?q?=E5=9B=BE=E5=B1=95=E7=A4=BA=E5=9C=A8=E4=B8=AD=E5=A4=AE=E4=BD=8D?=
 =?UTF-8?q?=E7=BD=AE=EF=BC=9B2.=E4=BF=AE=E6=94=B9=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=EF=BC=9A=E6=8B=93=E5=B1=95=E4=B8=B4=E6=97=B6=E8=8A=82=E7=82=B9?=
 =?UTF-8?q?=E6=97=B6=EF=BC=8C=E4=B8=B4=E6=97=B6=E8=8A=82=E7=82=B9=E7=AC=AC?=
 =?UTF-8?q?=E4=B8=80=E5=B8=A7=E7=9A=84=E5=9B=BE=E4=BD=8D=E7=BD=AE=E4=B8=8D?=
 =?UTF-8?q?=E5=AF=B9=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/entityExplorer/EntityGraph.vue | 57 ++++++++++++++++++------
 1 file changed, 43 insertions(+), 14 deletions(-)

diff --git a/src/views/entityExplorer/EntityGraph.vue b/src/views/entityExplorer/EntityGraph.vue
index 310125e9..73c9df38 100644
--- a/src/views/entityExplorer/EntityGraph.vue
+++ b/src/views/entityExplorer/EntityGraph.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="entity-graph">
     <div class="entity-graph__chart" id="entityGraph" ></div>
-    <div class="entity-graph__right-box">
+    <div class="entity-graph__right-box" id="rightBox">
       <el-drawer
               v-model="rightBox.show"
               direction="rtl"
               class="entity-graph__detail"
               :close-on-click-modal="true"
               :modal="false"
-              :size="400"
+              :size="rightBoxWidth"
               :with-header="false"
               destroy-on-close>
         <graph-entity-list
@@ -86,7 +86,8 @@ export default {
       centerPonit:{
         x:200,
         y:0
-      }
+      },
+      rightBoxWidth: 400
     }
   },
   methods: {
@@ -135,7 +136,7 @@ export default {
     initForceGraph (initialData) {
       let hoverNode = null
       const canvasHeight = document.body.clientHeight - 100
-      //const canvasWidth = document.body.clientWidth - 400
+      //const canvasWidth = document.body.clientWidth - this.rightBoxWidth
       this.graph = ForceGraph()(document.getElementById('entityGraph'))
         .height(canvasHeight)
         //.width(canvasWidth)
@@ -143,7 +144,7 @@ export default {
         .nodeCanvasObject((node, ctx) => {
           if(node.type === nodeType.entityNode) {
             let sourceNode = node.sourceNode
-            if(node.x === null && sourceNode && sourceNode.fx !== null) {
+            if(!node.isInit && sourceNode && sourceNode.fx !== null) {
               const sourceNodeNeighbors = sourceNode.getNeighbors(this.graph.graphData())
               sourceNode.childCount = sourceNodeNeighbors.targetNodes.length//设置每个list节点的子节点个数
               if(!sourceNode.currentChildIndex) {
@@ -154,7 +155,13 @@ export default {
               const toPoint = this.pointOfRotate({x:entityFirstPoint.x,y:entityFirstPoint.y},{x:sourceNode.fx,y:sourceNode.fy},angle)//y如果设置为0，则展示的位置不对，所以设置一个较小的y为1
               node.x =  toPoint.x
               node.y =  toPoint.y
+              node.isInit = true
             }
+            /*else if(node.x === null){
+              console.log('node.x === null ========================'+node.isInit)
+            } else if(!node.isInit && sourceNode.fx === null){ //如果节点离list节点太远的话，也进行重新处理
+              console.log('未初始化，list节点的fx为null**********'+sourceNode)
+            }*/
           }
 
           /*
@@ -280,8 +287,8 @@ export default {
               ctx.beginPath()
               const tempNodeDistance = this.getShortenedLength(node)// 临时节点展示动画时临时节点的初始位置距离entity节点的距离
               // 计算箭头角度
-              const dx = node.x - node.sourceNode.x
-              const dy = node.y - node.sourceNode.y
+              const dx = node.fx - node.sourceNode.x
+              const dy = node.fy - node.sourceNode.y
               const angle = Math.atan2(dy, dx) // 计算与x轴的角度（弧度）
               const startNodeX = node.sourceNode.x + tempNodeDistance * Math.cos(angle)
               const startNodeY = node.sourceNode.y + tempNodeDistance * Math.sin(angle)
@@ -647,6 +654,9 @@ export default {
             }
           })
         })
+        .onEngineStop(() => {
+          this.releaseNodes(this.graph.graphData().nodes,nodeType.listNode)
+        })
         .onEngineTick(() => {
           if (this.isClicking) {
             const tempNodeGroup = this.graph.graphData().nodes.filter(node => node.type === nodeType.tempNode)
@@ -669,11 +679,11 @@ export default {
         })
     },
     /*
-      sleep() {
-        for (let i = 0; i < 1000000000/5; i++) {
-          let num = i + i
-        }
-      }, */
+    sleep() {
+      for (let i = 0; i < 100000000*2; i++) {
+        let num = i + i
+      }
+    },*/
     /*
       * 线性插值: 已知两点坐标，计算已知x或y的C点坐标，且C点在AB连线上
       *
@@ -763,7 +773,7 @@ export default {
 
       return { x: finalX, y: finalY }
     },
-    handleToolsbarClick (code) {
+    async handleToolsbarClick (code) {
       if (code === 'undo') { // 上一步
         const data = this.stackData.undo.pop()
         this.stackData.justUndo = true
@@ -801,6 +811,11 @@ export default {
         }
       } else if (code === 'autoZoom') {
         this.graph.zoomToFit(100, 100)
+        if(this.rightBox.show) {
+          this.graph.width(document.body.clientWidth - this.rightBoxWidth)
+        } else {
+          this.graph.width(document.body.clientWidth)
+        }
       } else if (code === 'zoomOut') {
         this.graph.zoom(this.graph.zoom() + 0.2)
       } else if (code === 'zoomIn') {
@@ -814,7 +829,13 @@ export default {
           justRedo: false
         }
         let initData = _.cloneDeep(this.initialData)
-        this.releaseNodes(initData.nodes,nodeType.listNode)
+        /*
+        initData.nodes.forEach(node => {
+          if(node.type === nodeType.entityNode) {
+            node.x = null
+            node.y = null
+          }
+        })*/
         this.initForceGraph(initData) // 初始化拓展图
         this.rightBox.show = true
         this.rightBox.node = this.rootNode
@@ -1281,6 +1302,14 @@ export default {
           }
         }
       }
+    },
+    'rightBox.show' : {
+      handler (n) {
+        if(!n) {
+          const canvasWidth = document.body.clientWidth
+          this.graph.width(canvasWidth)
+        }
+      }
     }
   },
   async mounted () {