From 60e3acecd71a32af47f9fdaf6c456bcd964f4b7a Mon Sep 17 00:00:00 2001 From: hanyuxia Date: Fri, 2 Aug 2024 15:01:19 +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.=E4=BF=AE=E6=94=B9=E6=8A=A5?= =?UTF-8?q?=E9=94=99=E4=BB=A3=E7=A0=81=EF=BC=9B2.=E6=B8=85=E7=90=86?= =?UTF-8?q?=E4=B8=B4=E6=97=B6=E8=8A=82=E7=82=B9=E6=97=B6=EF=BC=8C=E5=AF=B9?= =?UTF-8?q?=E4=BA=8E=E5=9B=BA=E5=AE=9A=E7=9A=84=E8=8A=82=E7=82=B9=E4=B8=8D?= =?UTF-8?q?=E8=BF=9B=E8=A1=8C=E9=87=8A=E6=94=BE=EF=BC=9B3.=E5=9B=BA?= =?UTF-8?q?=E5=AE=9A=E8=8A=82=E7=82=B9=E7=9A=84=E5=9B=BA=E5=AE=9A=E4=B8=8E?= =?UTF-8?q?=E6=98=AF=E5=90=A6=E8=A7=84=E5=88=99:(1).=E6=89=80=E6=9C=89?= =?UTF-8?q?=E8=8A=82=E7=82=B9=EF=BC=9A=E6=8B=96=E6=8B=BD=E5=90=8E=E8=8A=82?= =?UTF-8?q?=E7=82=B9=E4=B8=BA=E5=9B=BA=E5=AE=9A=E8=8A=82=E7=82=B9=EF=BC=9B?= =?UTF-8?q?(2).root=E5=88=9D=E5=A7=8B=E5=8C=96=E4=B8=BA=E5=9B=BA=E5=AE=9A?= =?UTF-8?q?=E8=8A=82=E7=82=B9=EF=BC=9B(3).list=E8=8A=82=E7=82=B9=EF=BC=9A?= =?UTF-8?q?=E5=86=8D=E6=AC=A1=E7=82=B9=E5=87=BB=E5=BD=93=E5=89=8D=E9=80=89?= =?UTF-8?q?=E4=B8=AD=E7=9A=84list=E8=8A=82=E7=82=B9=E5=90=8E=EF=BC=8Clist?= =?UTF-8?q?=E8=8A=82=E7=82=B9=E4=B8=BA=E5=9B=BA=E5=AE=9A=E8=8A=82=E7=82=B9?= =?UTF-8?q?=EF=BC=88=E4=B8=80=E6=AC=A1=E7=82=B9=E5=87=BBlist=E8=8A=82?= =?UTF-8?q?=E7=82=B9=E4=BB=A3=E8=A1=A8=E9=80=89=E4=B8=AD=E6=93=8D=E4=BD=9C?= =?UTF-8?q?=EF=BC=8C=E6=89=80=E4=BB=A5=E4=B8=8D=E5=9B=BA=E5=AE=9Alist?= =?UTF-8?q?=E8=8A=82=E7=82=B9=EF=BC=89=EF=BC=9B(4).entity=E8=8A=82?= =?UTF-8?q?=E7=82=B9=EF=BC=9A=E7=82=B9=E5=87=BB=E6=B2=A1=E6=9C=89=E4=B8=B4?= =?UTF-8?q?=E6=97=B6=E8=8A=82=E7=82=B9=E7=9A=84entity=E8=8A=82=E7=82=B9?= =?UTF-8?q?=E5=90=8E=EF=BC=8Centity=E8=8A=82=E7=82=B9=E4=B8=BA=E5=9B=BA?= =?UTF-8?q?=E5=AE=9A=E8=8A=82=E7=82=B9=EF=BC=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/entityExplorer/EntityGraph.vue | 42 +++++++++++++++++------- 1 file changed, 30 insertions(+), 12 deletions(-) diff --git a/src/views/entityExplorer/EntityGraph.vue b/src/views/entityExplorer/EntityGraph.vue index 84714ae9..395f705e 100644 --- a/src/views/entityExplorer/EntityGraph.vue +++ b/src/views/entityExplorer/EntityGraph.vue @@ -146,8 +146,8 @@ export default { .nodeCanvasObject((node, ctx) => { if(node.type === nodeType.entityNode) { const parentNode = this.graph.graphData().nodes.find(n => n.id === node.sourceNode.id) - const grandParentNode = this.graph.graphData().nodes.find(n => n.id === parentNode.sourceNode.id) - if(grandParentNode.type === nodeType.rootNode) {//只针对重置操作(第2层节点) + const grandParentNode = this.graph.graphData().nodes.find(n => parentNode && parentNode.sourceNode && n.id === parentNode.sourceNode.id) + if(grandParentNode && grandParentNode.type === nodeType.rootNode) {//只针对重置操作(第2层节点) let sourceNode = node.sourceNode if(!node.isInit && sourceNode && sourceNode.fx !== null) { const sourceNodeNeighbors = sourceNode.getNeighbors(this.graph.graphData()) @@ -290,8 +290,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) @@ -329,8 +329,8 @@ export default { const shortenedLength = this.getShortenedLength(end) // link 末端缩短长度,root节点特殊处理 if(end.type === nodeType.entityNode) { const parentNode = this.graph.graphData().nodes.find(node => node.id === start.id) - const grandParentNode = this.graph.graphData().nodes.find(node => node.id === parentNode.sourceNode.id) - if(grandParentNode.type === nodeType.rootNode) {//只针对重置操作(第2层节点) + const grandParentNode = this.graph.graphData().nodes.find(node => parentNode && parentNode.sourceNode && node.id === parentNode.sourceNode.id) + if(grandParentNode && grandParentNode.type === nodeType.rootNode) {//只针对重置操作(第2层节点) const entityNode = this.graph.graphData().nodes.find(node => node.id === end.id) if (entityNode) { let sourceNode = entityNode.sourceNode @@ -417,6 +417,7 @@ export default { .zoom(0.9999) .onNodeClick(async (node, e) => { this.isClicking = true + let lastClickNode = _.cloneDeep(this.clickNode) this.clickNode = node || null if (node.type !== 'tempNode') { this.rightBox.show = true @@ -425,6 +426,10 @@ export default { if (node.type === nodeType.entityNode) { node.fx = node.x node.fy = node.y + if(node.sourceNode) { + node.sourceNode.fx = node.sourceNode.x + node.sourceNode.fy = node.sourceNode.y + } this.rightBox.loading = true try { // 若已查过数据，不重复查询 @@ -491,6 +496,9 @@ export default { } else if (node.type === nodeType.listNode) { this.rightBox.node = node this.rightBox.mode = 'list' + if(lastClickNode.id === node.id) { + node.isFixed = true + } } else if (node.type === nodeType.rootNode) { this.rightBox.node = node this.rightBox.mode = 'detail' @@ -673,6 +681,7 @@ export default { this.isDraggingEntityNode = false node.fx = node.x node.fy = node.y + node.isFixed = true // 拖拽结束时，把所有临时节点的的angle置为null,便于拖动其它节点时的计算 this.graph.graphData().nodes.forEach(node => { if (node.type === nodeType.tempNode) { @@ -682,7 +691,7 @@ export default { }) }) .onEngineStop(() => { - this.releaseNodes(this.graph.graphData().nodes,nodeType.listNode) + //this.releaseNodes(this.graph.graphData().nodes,nodeType.listNode)//此处释放节点，会导致有一段时间，list节点为固定状态 }) .onEngineTick(() => { if (this.isClicking) { @@ -863,6 +872,7 @@ export default { node.y = null } })*/ + this.releaseNodes(initData.nodes,nodeType.listNode) this.initForceGraph(initData) // 初始化拓展图 this.rightBox.show = true this.rightBox.node = this.rootNode @@ -1113,7 +1123,7 @@ export default { // 清理临时节点时，同时释放临时节点对应的entity节点,不再固定位置 const tempNodes = nodes.filter(n => n.type === nodeType.tempNode) tempNodes.forEach(n => { - if (n.sourceNode) { + if (n.sourceNode && !n.sourceNode.isFixed) { n.sourceNode.fx = null n.sourceNode.fy = null } @@ -1132,6 +1142,7 @@ export default { const rootNode = clickNode || new Node(nodeType.rootNode, this.entity.entityName, this.entity, null, this.getIconUrl(this.entity.entityType, true, true)) await rootNode.queryDetailData() + rootNode.isFixed = true nodes.push(rootNode) this.clickNode = rootNode this.rootNode = rootNode @@ -1197,14 +1208,21 @@ export default { links } }, - //释放节点 + /*释放节点:主要针对动画的展示，若节点本身为固定节点，则不进行释放：针对固定节点，增加一个标识isFixed + 1.所有节点：拖拽后节点为固定节点； + 2.root初始化为固定节点； + 3.list节点：再次点击当前选中的list节点后，list节点为固定节点（一次点击list节点代表选中操作，所以不固定list节点）； + 4.entity节点：一次点击没有临时节点的entity节点后，entity节点为固定节点； + */ releaseNodes(allNodes,nodeType) { setTimeout(() => { - // 释放list节点,不再固定位置 + // 释放节点,不再固定位置 const filterNodes = allNodes.filter(n => n.type === nodeType) filterNodes.forEach(n => { - n.fx = null - n.fy = null + if(!n.isFixed) { + n.fx = null + n.fy = null + } }) }, 100) },