From 7c723bef7e4d9aaf1ac07da4a369b28f572e551c Mon Sep 17 00:00:00 2001
From: jinlin <jinlin>
Date: 星期二, 28 五月 2024 11:58:48 +0800
Subject: [PATCH] 修改
---
web/src/views/modules/taskReliability/RBD-edit-img.vue | 758 ++++++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 629 insertions(+), 129 deletions(-)
diff --git a/web/src/views/modules/taskReliability/RBD-edit-img.vue b/web/src/views/modules/taskReliability/RBD-edit-img.vue
index 1e82264..d483b9c 100644
--- a/web/src/views/modules/taskReliability/RBD-edit-img.vue
+++ b/web/src/views/modules/taskReliability/RBD-edit-img.vue
@@ -312,6 +312,416 @@
group: 'left',
},
],
+ },
+ initJson: {
+ "cells": [
+ {
+ "position": {
+ "x": -600,
+ "y": 0
+ },
+ "size": {
+ "width": 60,
+ "height": 60
+ },
+ "attrs": {
+ "text": {
+ "refY": "100%",
+ "textVerticalAnchor": "top",
+ "text": "start",
+ "refY2": 4
+ },
+ "image": {
+ "xlink:href": "/modelImg/start.svg"
+ }
+ },
+ "visible": true,
+ "shape": "image",
+ "id": "10000",
+ "data": {
+ "type": "imageNodes",
+ "endNodeId": "20000",
+ "dataId": "",
+ "nodeType": "start",
+ "nodeTypeExt": "",
+ "voteNum": ""
+ },
+ "ports": {
+ "groups": {
+ "top": {
+ "position": {
+ "name": "top"
+ },
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "right": {
+ "position": {
+ "name": "right"
+ },
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "bottom": {
+ "position": {
+ "name": "bottom"
+ },
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "left": {
+ "position": {
+ "name": "left"
+ },
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ }
+ },
+ "items": [
+ {
+ "id": "top1",
+ "group": "top"
+ },
+ {
+ "id": "right1",
+ "group": "right"
+ },
+ {
+ "id": "bottom1",
+ "group": "bottom"
+ },
+ {
+ "id": "left1",
+ "group": "left"
+ }
+ ]
+ },
+ "zIndex": 1
+ },
+ {
+ "position": {
+ "x": 0,
+ "y": 0
+ },
+ "size": {
+ "width": 100,
+ "height": 60
+ },
+ "attrs": {
+ "text": {
+ "refY": "100%",
+ "textVerticalAnchor": "top",
+ "text": "dashedBox",
+ "refY2": 4
+ },
+ "image": {
+ "xlink:href": "/modelImg/dashedBox.svg"
+ }
+ },
+ "visible": true,
+ "shape": "image",
+ "id": 15000,
+ "data": {
+ "type": "imageNodes",
+ "dataId": "",
+ "nodeType": "dashedBox",
+ "nodeTypeExt": "",
+ "voteNum": ""
+ },
+ "ports": {
+ "groups": {
+ "top": {
+ "position": {
+ "name": "top"
+ },
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "right": {
+ "position": {
+ "name": "right"
+ },
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "bottom": {
+ "position": {
+ "name": "bottom"
+ },
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "left": {
+ "position": {
+ "name": "left"
+ },
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ }
+ },
+ "items": [
+ {
+ "id": "top1",
+ "group": "top"
+ },
+ {
+ "id": "right1",
+ "group": "right"
+ },
+ {
+ "id": "bottom1",
+ "group": "bottom"
+ },
+ {
+ "id": "left1",
+ "group": "left"
+ }
+ ]
+ },
+ "zIndex": 2
+ },
+ {
+ "position": {
+ "x": 600,
+ "y": 0
+ },
+ "size": {
+ "width": 60,
+ "height": 60
+ },
+ "attrs": {
+ "text": {
+ "refY": "100%",
+ "textVerticalAnchor": "top",
+ "text": "end",
+ "refY2": 4
+ },
+ "image": {
+ "xlink:href": "/modelImg/end.svg"
+ }
+ },
+ "visible": true,
+ "shape": "image",
+ "id": "20000",
+ "data": {
+ "type": "imageNodes",
+ "startNodeId": "10000",
+ "dataId": "",
+ "nodeType": "end",
+ "nodeTypeExt": "",
+ "voteNum": ""
+ },
+ "ports": {
+ "groups": {
+ "top": {
+ "position": {
+ "name": "top"
+ },
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "right": {
+ "position": {
+ "name": "right"
+ },
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "bottom": {
+ "position": {
+ "name": "bottom"
+ },
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ },
+ "left": {
+ "position": {
+ "name": "left"
+ },
+ "attrs": {
+ "circle": {
+ "r": 4,
+ "magnet": true,
+ "stroke": "#5F95FF",
+ "strokeWidth": 1,
+ "fill": "#fff",
+ "style": {
+ "visibility": "hidden"
+ }
+ }
+ }
+ }
+ },
+ "items": [
+ {
+ "id": "top1",
+ "group": "top"
+ },
+ {
+ "id": "right1",
+ "group": "right"
+ },
+ {
+ "id": "bottom1",
+ "group": "bottom"
+ },
+ {
+ "id": "left1",
+ "group": "left"
+ }
+ ]
+ },
+ "zIndex": 3
+ },
+ {
+ "shape": "edge",
+ "id": "66c81c68-0827-4a3c-8343-e2c453d3e9e7",
+ "router": {
+ "name": "manhattan"
+ },
+ "connector": {
+ "name": "rounded"
+ },
+ "source": {
+ "cell": "10000",
+ "port": "right1"
+ },
+ "target": {
+ "cell": 15000,
+ "port": "left1"
+ },
+ "zIndex": 4
+ },
+ {
+ "shape": "edge",
+ "id": "a0f3cf90-6d37-4ee0-a254-90b4ec2b6a7f",
+ "router": {
+ "name": "manhattan"
+ },
+ "connector": {
+ "name": "rounded"
+ },
+ "source": {
+ "cell": 15000,
+ "port": "right1"
+ },
+ "target": {
+ "cell": "20000",
+ "port": "left1"
+ },
+ "zIndex": 5
+ }
+ ]
}
}
},
@@ -348,7 +758,7 @@
if (res.data !== null && (res.data.content != null)) {
this.dataForm = res.data
this.diagramJson = JSON.parse(this.dataForm.content)
- this.graph.fromJSON(this.diagramJson)
+ this.graph.fromJSON(this.diagramJson)
this.isFirstLoad = false;
console.log(this.diagramJson.cells.length, 'this.diagramJson.cells.length')
@@ -357,12 +767,15 @@
// this.graph.zoomToFit()
} else {
this.graph.fromJSON(RBDDefault)
+ this.isFirstLoad = false
}
},
async clearDiagram() {
this.dataForm.id = null
// this.graph.fromJSON(this.emptyJson)
- this.graph.fromJSON('')
+ this.graph.fromJSON(RBDDefault)
+ this.graph.positionContent('left')
+ this.isFirstLoad = false;
// this.graph.centerContent()
// this.graph.zoomToFit()
// this.graph.freeze()
@@ -582,10 +995,12 @@
let res = await this.$http.get(`/basicInfo/XhProductModel/getProduct`, {params: params})
this.imagesList2 = res.data
console.log(this.imagesList2, 'getProduct(productId)234567890')
+ let urlObject = window.URL || window.webkitURL || window;
+
const imageNodes2 = this.imagesList2.map((item) =>
this.graph.createNode({
shape: 'image',
- imageUrl: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getProductImg?token=${Cookies.get('token')}&id=${item.imgPath}`,
+ //imageUrl: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getProductImg?token=${Cookies.get('token')}&id=${item.imgPath}`,
width: 60,
height: 60,
id: item.dataId, // 鎵嬪姩璁剧疆鑺傜偣鐨� ID
@@ -608,6 +1023,10 @@
voteNum: '',
},
attrs: {
+ image: {
+ 'xlink:href': `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getSvgImage?token=${Cookies.get('token')}&id=${item.imgPath}`,
+ //'xlink:href': urlObject.createObjectURL(new Blob([item.svgContent])),
+ },
text: {
text: item.imgName,
fontSize: 14,
@@ -680,85 +1099,7 @@
})
//delete
this.graph.bindKey('delete', () => {
- const cells = this.graph.getSelectedCells()
- console.log(cells, 'cells')
- if (cells.length === 1) {
- let node = cells[0]
- if (!node.isNode()) {
- this.$message({message: '璇烽�変腑鑺傜偣', type: 'warning'})
- return false; // 鍙栨秷鎿嶄綔
- }
- let nodeType = node.getData().nodeType
- let deleteType = 0
- if (nodeType === 'node' || nodeType === 'dashedBox') {
- deleteType = 1
- } else if ('parallel,switch,vote,bridge'.indexOf(nodeType) > -1) {
- deleteType = 2
- }
- let canDelete = false
- if (nodeType === 'start' || nodeType === 'end') {
- this.$message({message: '鏃犳硶鍒犻櫎璧峰鍜岀粨鏉熻妭鐐�', type: 'warning'})
- return false; // 鍙栨秷鎿嶄綔
- }
- if (deleteType > 0) {
- let startNode = null
- if (deleteType === 1) {
- startNode = node
- } else if (deleteType === 2) {
- startNode = this.graph.getCellById(node.getData().startNodeId)
- }
- let isSeriesNode = this.isSeriesNode(startNode, node)
- if (isSeriesNode) {
- let inLine = this.getInLinesOfNode(startNode)
- let outLine = this.getOutLinesOfNode(node)
- let inLineIsToLine = this.hasOtherLineToMyLine(inLine[0].id)
- let inNode = isSeriesNode.inNode
- let outNode = isSeriesNode.outNode
- console.log(inLine, outLine, 'inLine,outLine')
- console.log(inNode, outNode, 'inNode,outNode')
- if (inLineIsToLine) {
- inLine[0].target = {cell: outNode.id, port: 'left1'}
- } else {
- outLine[0].source = {cell: inNode.id, port: 'right1'}
- }
- //鎻愮ず鏄惁瑕佸垹闄�
- this.$confirm('鏄惁鍒犻櫎璇ヨ妭鐐�?', '鎻愮ず', {
- confirmButtonText: '纭畾',
- cancelButtonText: '鍙栨秷',
- type: 'warning'
- }).then(() => {
- if (deleteType === 1){
- node.remove()
- }
- else{
- this.deleteCombination(node)
- }
- this.$message({
- type: 'success',
- message: '鍒犻櫎鎴愬姛!'
- })
- }).catch(() => {
- this.$message({
- type: 'info',
- message: '宸插彇娑堝垹闄�'
- })
- })
- }
- if (this.isMultipleBrach(node)) {
- //鎻愮ず鏄惁瑕佸垹闄�
- if (deleteType === 1)
- node.remove()
- else
- this.deleteCombination(node)
- return
- }
- }
- //鎻愮ず涓嶈兘鍒犻櫎
- } else {
- //鎻愮ず涓嶈兘鍒犻櫎
- this.$message({message: '鍙兘閫変腑涓�涓妭鐐�', type: 'warning'})
- return false; // 鍙栨秷鎿嶄綔
- }
+ this.deleteCompment()
})
// zoom
this.graph.bindKey(['ctrl+1', 'meta+1'], () => {
@@ -949,6 +1290,127 @@
})
})
},
+ deleteCompment() {
+ const cells = this.graph.getSelectedCells()
+ console.log(cells, 'cells')
+ if (cells.length === 1) {
+ let node = cells[0]
+ if (!node.isNode()) {
+ this.$confirm('鏄惁鍒犻櫎璇ヨ繛鎺ョ嚎?', '鎻愮ず', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning'
+ }).then(() => {
+ node.remove()
+ this.$message({
+ type: 'success',
+ message: '鍒犻櫎鎴愬姛!'
+ })
+ }).catch(() => {
+ this.$message({
+ type: 'info',
+ message: '宸插彇娑堝垹闄�'
+ })
+ })
+ // this.$message({message: '璇烽�変腑鑺傜偣', type: 'warning'})
+ return false; // 鍙栨秷鎿嶄綔
+ }
+ let nodeType = node.getData().nodeType
+ let deleteType = 0
+ if (nodeType === 'node' || nodeType === 'dashedBox') {
+ deleteType = 1
+ } else if ('parallel,switch,vote,bridge'.indexOf(nodeType) > -1) {
+ deleteType = 2
+ }
+
+ let canDelete = false
+ if (nodeType === 'start' || nodeType === 'end') {
+ this.$message({message: '涓嶅厑璁稿垹闄よ捣濮嬪拰缁撴潫鑺傜偣', type: 'warning'})
+ return false; // 鍙栨秷鎿嶄綔
+ }
+ if (deleteType > 0) {
+ let startNode = null
+ if (deleteType === 1) {
+ startNode = node
+ } else if (deleteType === 2) {
+ startNode = this.graph.getCellById(node.getData().startNodeId)
+ }
+
+ let isSeriesNode = this.isSeriesNode(startNode, node)
+ if (isSeriesNode) {
+ //涓茶仈
+ let inLine = this.getInLinesOfNode(startNode)
+ let outLine = this.getOutLinesOfNode(node)
+ let inLineIsToLine = this.hasOtherLineToMyLine(inLine[0].id)
+ let inNode = isSeriesNode.inNode
+ let outNode = isSeriesNode.outNode
+ console.log(inLine, outLine, 'inLine,outLine')
+ console.log(inNode, outNode, 'inNode,outNode')
+ //鎻愮ず鏄惁瑕佸垹闄�
+ this.$confirm('鏄惁鍒犻櫎璇ヨ妭鐐�?', '鎻愮ず', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning'
+ }).then(() => {
+ if (inLineIsToLine) {
+ inLine[0].target = {cell: outNode.id, port: 'left1'}
+ } else {
+ outLine[0].source = {cell: inNode.id, port: 'right1'}
+ }
+ if (deleteType === 1) {
+ node.remove()
+ } else {
+ this.deleteCombination(node)
+ }
+ this.$message({
+ type: 'success',
+ message: '鍒犻櫎鎴愬姛!'
+ })
+ }).catch(() => {
+ this.$message({
+ type: 'info',
+ message: '宸插彇娑堝垹闄�'
+ })
+ return false
+ })
+ }
+ if (this.isMultipleBrach(node)) {
+ //鎻愮ず鏄惁瑕佸垹闄�
+ this.$confirm('鏄惁鍒犻櫎璇ヨ妭鐐�?', '鎻愮ず', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning'
+ }).then(() => {
+ /* if (inLineIsToLine) {
+ inLine[0].target = {cell: outNode.id, port: 'left1'}
+ } else {
+ outLine[0].source = {cell: inNode.id, port: 'right1'}
+ }*/
+ if (deleteType === 1)
+ node.remove()
+ else
+ this.deleteCombination(node)
+ this.$message({
+ type: 'success',
+ message: '鍒犻櫎鎴愬姛!'
+ })
+
+ }).catch(() => {
+ this.$message({
+ type: 'info',
+ message: '宸插彇娑堝垹闄�'
+ })
+ return false
+ })
+ }
+ }
+ //鎻愮ず涓嶈兘鍒犻櫎
+ } else {
+ //鎻愮ず涓嶈兘鍒犻櫎
+ this.$message({message: '鍙兘閫変腑涓�涓妭鐐�', type: 'warning'})
+ return false; // 鍙栨秷鎿嶄綔
+ }
+ },
async search() {
await this.getDiagram();
},
@@ -1115,12 +1577,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)
@@ -1136,14 +1600,24 @@
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)
- if (!result){
+ 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'})
return
}
- inEdges[0].target = {cell: result.newStartNode.id, port: 'left1'}
- outEdges[0].source = {cell: result.newEndNode.id, port: 'right1'}
+
+ let startPort = 'right1'
+ let endPort = 'left1'
+ if ((inEdges[0].target.port == 'top1' || outEdges[0].source.port == 'bottom1') && ('parallel,switch,vote,bridge'.indexOf(dragNodeType)) == -1) {
+ startPort = 'bottom1'
+ endPort = 'top1'
+ }
+
+ inEdges[0].target = {cell: result.newStartNode.id, port: endPort}
+ outEdges[0].source = {cell: result.newEndNode.id, port: startPort}
graphNode.remove()
}
} else { //骞惰缁撴瀯
@@ -1154,22 +1628,24 @@
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){
+ if (!result) {
dragNode.remove()
+ this.$message({message: '娌℃湁瓒冲鐨勭┖闂存斁缃鑺傜偣锛岃鎵╁ぇ鍓╀綑绌洪棿', type: 'warning'})
return
}
this.graph.addEdge({
@@ -1186,47 +1662,69 @@
})
}
},
- 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
+ width = 60
height = 60
- }else if (dragNodeType === 'dashedBox') {
- width =100
+ } else if (dragNodeType === 'dashedBox') {
+ width = 100
height = 60
} else if (dragNodeType === 'bridgeConnection') {
- width =550
- height = 115
- leftTopX = leftX - width/2
- leftTopY = centerY - height/2
- // leftTopY = 240/2
+ width = 550
+ height = 175
} else {
- width =270
+ width = 270
height = 60
}
-
- if (!this.canPlace(targetNode,dragNode,{leftTopX, leftTopY, width, height})){
+ 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 centerX = 0
+ let centerY = 0
+ if (!source.isNode() || !target.isNode()) {
+ if (source.isNode()) {
+ centerX = source.position().x + source.getBBox().width / 2
+ centerY = dragNode.position().y + dragNode.getBBox().height / 2
+ } else {
+ centerX = target.position().x + target.getBBox().width / 2
+ centerY = dragNode.position().y + dragNode.getBBox().height / 2
+ }
+ } else {
+ centerX = dragNode.position().x + dragNode.getBBox().width / 2
+ centerY = source.position().y + source.getBBox().height / 2
+ if (target.getData().nodeType === 'node') {
+ centerY = target.position().y + target.getBBox().height / 2
+ }
+ }
+
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'
@@ -1234,17 +1732,20 @@
startPort = 'bottom1'
endPort = 'top1'
}
+
if (this.hasOtherLineToMyLine(graphEdge.id)) {
let leftX = startNode.position().x + startNode.getBBox().width
let rightX = endNode.position().x
- let centerX = dragNode.position().x + dragNode.getBBox().width / 2
+ // let centerX = dragNode.position().x + dragNode.getBBox().width / 2
if (centerX - leftX < rightX - centerX) {
isRight = false
}
}
- let result = this.addNodeAndConnect(null, dragNode, dragNode.position().x, centerY)
- if (!result){
+
+ let result = this.addNodeAndConnect(null, dragNode, centerX, centerY)
+ if (!result) {
dragNode.remove()
+ this.$message({message: '娌℃湁瓒冲鐨勭┖闂存斁缃鑺傜偣锛岃鎵╁ぇ鍓╀綑绌洪棿', type: 'warning'})
return
}
if (isRight) {
@@ -1255,7 +1756,6 @@
router: {name: 'manhattan'},
connector: {name: 'rounded'}
})
-
} else {
this.graph.addEdge({
source: {cell: startNode, port: startPort},
@@ -1325,16 +1825,16 @@
})*/
},
createBridgeConnection(x, y, dragNode) {
- console.log(x,y,'leftX centerY')
+ console.log(x, y, 'leftX centerY')
const leftTopDashedBox = this.createDashedBox(x + 40, y)
const rightTopDashedBox = this.createDashedBox(x + 380, y)
const leftConnectNode = this.createConnectNode(x, y + 87)
- const alignCenterDashedBox = this.createDashedBox(x+ 210, y + 87)
+ const alignCenterDashedBox = this.createDashedBox(x + 210, y + 87)
const rightConnectNode = this.createBridgeNode(x + 530, y + 87)
- const leftBottomDashedBox = this.createDashedBox(x+ 50, y + 160)
- const rightBottomDashedBox = this.createDashedBox(x + 370 , y + 160)
+ const leftBottomDashedBox = this.createDashedBox(x + 50, y + 160)
+ const rightBottomDashedBox = this.createDashedBox(x + 370, y + 160)
rightConnectNode.setData({startNodeId: leftConnectNode.id})
leftConnectNode.setData({endNodeId: rightConnectNode.id})
@@ -1655,30 +2155,30 @@
console.log(edges, '鑾峰彇鐢诲竷涓婄殑缁撴潫鑺傜偣鎵�鏈夌殑绾� edges')
return edges.filter(edge => edge.source.cell === node.id)
},
- canPlace(targetNode,dragNode,box2){
+ canPlace(targetNode, dragNode, box2) {
const nodes = this.graph.getNodes()
let intersectNodes = []
// 妫�鏌ラ櫎褰撳墠鑺傜偣涔嬪鐨勬墍鏈夎妭鐐圭殑鍖呭洿妗嗘槸鍚︾浉浜�
for (const otherNode of nodes) {
if (otherNode === dragNode || otherNode === targetNode) continue;
- const bbox1 = otherNode.getBBox();
- if (bbox1.x < box2.leftTopX + box2.width &&
- bbox1.x + bbox1.width > box2.leftTopX &&
- bbox1.y < box2.leftTopY + box2.height &&
- bbox1.y + bbox1.height > box2.leftTopY) {
- intersectNodes.push(otherNode);
- }
+ const bbox1 = otherNode.getBBox();
+ if (bbox1.x < box2.leftTopX + box2.width &&
+ bbox1.x + bbox1.width > box2.leftTopX &&
+ bbox1.y < box2.leftTopY + box2.height &&
+ bbox1.y + bbox1.height > box2.leftTopY) {
+ intersectNodes.push(otherNode);
+ }
}
- console.log(box2,'box2')
- console.log(intersectNodes,'intersectNodes')
+ console.log(box2, 'box2')
+ console.log(intersectNodes, 'intersectNodes')
return intersectNodes.length <= 0;
},
- undo(){
+ undo() {
if (this.graph.history.canUndo()) {
this.graph.history.undo()
}
},
- redo(){
+ redo() {
if (this.graph.history.canRedo()) {
this.graph.history.redo()
}
--
Gitblit v1.9.1