From fd6cd17c0f7a095be934f9e1d1fd7c3e10cad433 Mon Sep 17 00:00:00 2001
From: wente <329538422@qq.com>
Date: 星期二, 21 五月 2024 08:45:39 +0800
Subject: [PATCH] svgEditor以及RBD画图拖动自动吸附在一条线上
---
web/src/views/modules/taskReliability/RBD-edit-img.vue | 51 +++++++++++++++++++++++++++++++++------------------
1 files changed, 33 insertions(+), 18 deletions(-)
diff --git a/web/src/views/modules/taskReliability/RBD-edit-img.vue b/web/src/views/modules/taskReliability/RBD-edit-img.vue
index 2ce607b..07ec2d5 100644
--- a/web/src/views/modules/taskReliability/RBD-edit-img.vue
+++ b/web/src/views/modules/taskReliability/RBD-edit-img.vue
@@ -1161,12 +1161,14 @@
let dragNodeType = dragNode.getData().nodeType
let offHeight = 50
if (dragNodeType === 'node') {
- offHeight = 50
+ offHeight = 60
} else if (dragNodeType === 'bridgeConnection') {
- offHeight = 230
+ offHeight = 175
} else {
offHeight = 70
}
+ let centerX = 0, centerY = 0;
+
if (graphNodeType === 'dashedBox') { //铏氭
const edges = this.graph.getConnectedEdges(graphNode); // 鑾峰彇鐢诲竷涓婂師鏈夌殑鑺傜偣鎵�鏈夎繘鏉ョ殑绾�
let inEdges = edges.filter(edge => edge.target.cell === graphNode.id)
@@ -1182,8 +1184,9 @@
endNode = this.graph.getCellById(endNodeId)
}
if (startNode && endNode) {
- let centerY = graphNode.position().y
- let result = this.addNodeAndConnect(graphNode, dragNode, dragNode.position().x - dragNode.size().width/2, centerY)
+ centerX = graphNode.position().x+graphNode.getBBox().width/2
+ centerY = graphNode.position().y+graphNode.getBBox().height/2
+ let result = this.addNodeAndConnect(graphNode, dragNode, centerX, centerY)
if (!result){
dragNode.remove()
this.$message({message: '娌℃湁瓒冲鐨勭┖闂存斁缃鑺傜偣锛岃鎵╁ぇ鍓╀綑绌洪棿', type: 'warning'})
@@ -1201,18 +1204,19 @@
let maxY = graphNode.position().y + graphNode.getBBox().height
const edges = this.graph.getConnectedEdges(graphNode); // 鑾峰彇鐢诲竷涓婂師鏈夌殑鑺傜偣鎵�鏈夎繘鏉ョ殑绾�
+ // 鑾峰彇杩炴帴绾跨殑璺緞鏁版嵁
let inEdges = edges.filter(edge => edge.target.cell === graphNode.id)
//閬嶅巻杩欎釜缁勫悎閲岄潰鎵�鏈夎妭鐐癸紝 淇敼minY锛宮axY
-
let pointXY = {minY: minY, maxY: maxY}
console.log(pointXY, 'old')
this.getYRange(inEdges, graphNodeStartNode, pointXY)
console.log(pointXY, 'new')
- let minX = graphNodeStartNode.position().x + graphNodeStartNode.getBBox().width
+ let minX = graphNodeStartNode.position().x + graphNode.getBBox().width+15
let maxX = graphNode.position().x
let centerX = minX + (maxX - minX) / 2
- let centerY = graphNodeY - pointXY.minY > pointXY.maxY - graphNodeY ? pointXY.maxY + 30 : pointXY.minY - offHeight - 30
+ let centerY = graphNodeY+ graphNode.getBBox().height/2 - pointXY.minY > pointXY.maxY - (graphNodeY+ graphNode.getBBox().height/2) ?
+ pointXY.maxY + offHeight/2 + 30 : pointXY.minY - offHeight/2 - 30
let result = this.addNodeAndConnect(null, dragNode, minX, centerY)
if (!result){
@@ -1234,8 +1238,11 @@
})
}
},
- addNodeAndConnect(targetNode, dragNode, leftX, centerY) { // graphCell鏄敾甯冧笂鍘熸湁鐨勮妭鐐广�俤ragNode鏄綋鍓嶆嫋鎷界殑鑺傜偣
- let width =100, height = 80, leftTopX = leftX , leftTopY = centerY
+ addNodeAndConnect(targetNode, dragNode, centerX, centerY) { // graphCell鏄敾甯冧笂鍘熸湁鐨勮妭鐐广�俤ragNode鏄綋鍓嶆嫋鎷界殑鑺傜偣
+ let width =100,
+ height = 80,
+ leftTopX = centerX ,
+ leftTopY = centerY
let dragNodeType = dragNode.getData().nodeType
if (dragNodeType === 'node') {
width =60
@@ -1245,36 +1252,45 @@
height = 60
} else if (dragNodeType === 'bridgeConnection') {
width =550
- height = 115
- leftTopX = leftX - width/2
- leftTopY = centerY - height/2
- // leftTopY = 240/2
+ height = 175
} else {
width =270
height = 60
}
-
+ leftTopX = centerX - width/2
+ leftTopY = centerY - height/2
if (!this.canPlace(targetNode,dragNode,{leftTopX, leftTopY, width, height})){
return false
}
if (dragNodeType === 'node' || dragNodeType === 'dashedBox') {
- dragNode.position(leftX, centerY)
+ dragNode.position(leftTopX, leftTopY)
return {newStartNode: dragNode, newEndNode: dragNode}
} else if (dragNodeType === 'bridgeConnection') {
return this.createBridgeConnection(leftTopX, leftTopY, dragNode)
} else {
- return this.createParallelBrach(leftTopX, leftTopY, dragNode)
+ return this.createParallelBrach(leftTopX, centerY, dragNode)
}
},
// 鐩镐氦鐨勮竟
addNodeAndInsertEdge(graphEdge, dragNode) {
+ const Source = graphEdge.getSourceCell()
+ const Target = graphEdge.getTargetCell()
+
+ let centerY = Source.position().y + Source.getBBox().height/2
+ if (Target.getData().nodeType === 'node'){
+ centerY = Target.position().y + Target.getBBox().height/2
+ }
+
+ console.log(Source,'Source 璧峰鐐逛俊鎭�')
+ console.log(Target,'Target 缁堟鐐逛俊鎭�')
+ console.log(Source.position().y,'璧峰鐐圭殑Y鍧愭爣')
+ console.log(Target.position().y,'缁堟鐐圭殑Y鍧愭爣')
let startNodeId = graphEdge.source.cell
let startNode = this.graph.getCellById(startNodeId)
let endNodeId = graphEdge.target.cell
let endNode = this.graph.getCellById(endNodeId)
if (startNode && endNode) {
- let centerY = dragNode.position().y
let isRight = true;
let startPort = 'right1'
let endPort = 'left1'
@@ -1304,7 +1320,6 @@
router: {name: 'manhattan'},
connector: {name: 'rounded'}
})
-
} else {
this.graph.addEdge({
source: {cell: startNode, port: startPort},
--
Gitblit v1.9.1