From 90d84d6e1bb895c144b6865d7df40e4739c1b535 Mon Sep 17 00:00:00 2001
From: wente <329538422@qq.com>
Date: 星期三, 08 五月 2024 11:21:42 +0800
Subject: [PATCH] 组合新增和新增删除设备节点1.0
---
web/src/views/modules/taskReliability/RBD-edit-img.vue | 740 ++++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 529 insertions(+), 211 deletions(-)
diff --git a/web/src/views/modules/taskReliability/RBD-edit-img.vue b/web/src/views/modules/taskReliability/RBD-edit-img.vue
index 0878f72..8ac2a3f 100644
--- a/web/src/views/modules/taskReliability/RBD-edit-img.vue
+++ b/web/src/views/modules/taskReliability/RBD-edit-img.vue
@@ -60,6 +60,7 @@
import {removeCurrentTabHandle} from '@/commonJS/common'
import {setHartBeat} from '@/commonJS/common';
import Cookies from 'js-cookie'
+ import {getUUID} from '../../../../packages/utils'
export default {
name: 'RBD-edit-img',
@@ -87,6 +88,7 @@
},
data() {
return {
+ isFirstLoad: true,
hasMoveNode: false,
hasMoveSingleNode: null,
nodeAdded: false,
@@ -105,6 +107,15 @@
imgWidth: 30,
imgHeight: 30,
imgId: '3',
+ data: {}
+ },
+ {
+ imgPath: 'connect',
+ imgName: 'bridge',
+ nodeType: 'bridge',
+ imgWidth: 50,
+ imgHeight: 50,
+ imgId: '12',
data: {}
},
{
@@ -132,7 +143,7 @@
nodeType: 'dashedBox',
imgWidth: 60,
imgHeight: 60,
- imgId: '9',
+ imgId: '10000',
data: {}
},
{
@@ -141,7 +152,7 @@
nodeType: 'bridgeConnection',
imgWidth: 60,
imgHeight: 60,
- imgId: '9',
+ imgId: '10',
data: {}
},
],
@@ -346,6 +357,7 @@
console.log(this.dataForm, 'init(row){')
},
async getDiagram(modelId) {
+ this.isFirstLoad = true;
let params = {
modelId: modelId,
urlPref: window.SITE_CONFIG['apiURL'],
@@ -355,11 +367,12 @@
if (res.data !== null && (res.data.content != null)) {
this.dataForm = res.data
this.diagramJson = JSON.parse(this.dataForm.content)
- if(this.diagramJson.cells.length!==0){
+ if (this.diagramJson.cells.length !== 0) {
this.graph.fromJSON(this.diagramJson)
- }else {
+ } else {
this.initCells()
}
+ this.isFirstLoad = false;
console.log(this.diagramJson.cells.length, 'this.diagramJson.cells.length')
this.graph.positionContent('left')
@@ -444,7 +457,7 @@
line: {
stroke: '#A2B1C3',
strokeWidth: 2,
- targetMarker: 'classic'
+ targetMarker: {fill: 'none'}
}
},
labels: [{
@@ -471,7 +484,7 @@
attrs: {fill: '#666'},
},
},
- zIndex: 0,
+ zIndex: -100,
})
},
validateConnection({targetMagnet}) {
@@ -505,9 +518,9 @@
const stencil = new Addon.Stencil({
getDragNode: (node) => node.clone({keepId: true}),
getDropNode: (node) => {
- const { width, height } = node.size()
- if(node.getData().type && node.getData().nodeType === 'dashedBox'){
- return node.clone().size(170, 90)
+ const {width, height} = node.size()
+ if (node.getData().type && node.getData().nodeType === 'dashedBox') {
+ return node.clone().size(100, 80)
}
if (node.getData().type && node.getData().type === 'imageNodes2') {
return node.clone({keepId: true})
@@ -556,9 +569,12 @@
// imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
width: item.imgWidth,
height: item.imgHeight,
+ id: item.imgId,
data: {
type: 'imageNodes',
dataId: '',
+ startNodeId: '',
+ endNodeId: '20000',
nodeType: item.nodeType,
nodeTypeExt: '',
voteNum: ''
@@ -703,23 +719,68 @@
//delete
this.graph.bindKey('delete', () => {
const cells = this.graph.getSelectedCells()
- if (cells.length) {
+ console.log(cells,'cells')
+ if (cells.length === 1) {
this.$confirm('鏄惁鍒犻櫎璇ヨ妭鐐�?', '鎻愮ず', {
confirmButtonText: '纭畾',
cancelButtonText: '鍙栨秷',
type: 'warning'
}).then(() => {
+ let node = cells[0]
+ if (!node.isNode()){
+ this.$message({message: '璇烽�変腑鑺傜偣', type: 'warning'})
+ return false; // 鍙栨秷鎿嶄綔
+ }
+ let nodeType = node.getData().nodeType
+ let canDelete = false
+ if (nodeType==='start' || nodeType==='end'){
+ this.$message({message: '鏃犳硶鍒犻櫎璧峰鍜岀粨鏉熻妭鐐�', type: 'warning'})
+ return false; // 鍙栨秷鎿嶄綔
+ }
+ if(nodeType === 'node' || nodeType ==='dashedBox'){
+ let isSeriesNode = this.isSeriesNode(node)
+ if (isSeriesNode){
+ //鍒犳帀锛屽墠鍚庣嚎杩炶捣鏉�
+ this.graph.addEdge({
+ source: {cell: isSeriesNode.inNode, port: 'right1'},
+ target: {cell: isSeriesNode.outNode, port: 'left1'},
+ router: {name: 'manhattan'},
+ connector: {name: 'rounded'}
+ })
+ node.remove()
+ return
+ }
+ if (this.isMultipleBrach(node)){
+ //鐩存帴鍒犳帀锛屼笉鐢ㄧ绾�
+ return
+ }else{
+ //鎻愮ず杩欎釜缁勫悎鍙湁涓�鏉′箣璺紝鍦ㄧ粍鍚堢偣鍒犻櫎
+ return
+ }
+ }
+ if (nodeType==='connect'){
+ try{
+ let endNodeId = node.getData().endNodeId
+ // 鎻愮ず涓嶈兘鐩存帴鍒犻櫎宸﹁繛鎺ョ偣
+ return
+ }catch(e){}
+ }
+ //鍋氫釜杩唬鍒犻櫎鏁翠釜缁勫悎
+ //this.deleteCombination();
+
+ // this.graph.removeCells(cells)
this.$message({
type: 'success',
message: '鍒犻櫎鎴愬姛!'
})
- this.graph.removeCells(cells)
}).catch(() => {
this.$message({
type: 'info',
message: '宸插彇娑堝垹闄�'
})
})
+ }else{
+
}
})
// zoom
@@ -745,78 +806,45 @@
})
// 鐩戝惉鑺傜偣娣诲姞浜嬩欢
this.graph.on('node:added', ({node}) => {
- const nodeId = node.id; // 鑾峰彇鑺傜偣鐨勫敮涓� ID
+ if (this.isFirstLoad) {
+ return
+ }
+ if (node.getData().isSelfCreated) {
+ return
+ }
+ const nodeType = node.getData().nodeType; // 鑾峰彇鑺傜偣鐨勭被鍨�
const nodeObj = node
- const intersectNodes = [];
- // 妫�鏌ラ櫎褰撳墠鑺傜偣涔嬪鐨勬墍鏈夎妭鐐圭殑鍖呭洿妗嗘槸鍚︾浉浜�
- for (const otherNode of this.graph.getNodes()) {
- if (otherNode === node) continue;
- const bbox1 = node.getBBox();
- const bbox2 = otherNode.getBBox();
- if (this.isIntersect(bbox1, bbox2)) {
- intersectNodes.push(otherNode);
+ console.log(123)
+ let intersectNode = this.findIntersectsNode(node)
+ if (intersectNode) { // 褰撴湁鑺傜偣鐩镐氦 ==>骞惰
+ this.addBranch(intersectNode, nodeObj)
+ } else {
+ let isSelfCreated = null
+ try {
+ isSelfCreated = node.getData().isSelfCreated
+ } catch (e) {
+ }
+ if (!isSelfCreated) {
+ let intersectEdge = this.findIntersectsEdge(this.graph, node)
+ if (intersectEdge) { // 褰撴湁杈圭浉浜� ==>涓茶仈
+ this.addNodeAndInsertEdge(intersectEdge, nodeObj)
+ } else {
+ //鎻愮ず
+ }
}
}
- if (intersectNodes.length > 0) {
- // console.log('Nodes intersect with node:', node.id);
- console.log('Intersecting nodes:', intersectNodes.map(n => n)); // 鐩镐氦鑺傜偣鐨勫璞�
- intersectNodes.map(node => {
- this.addNodeAndConnect(node, nodeObj);
- })
- }
+
+
+ /*//濡傛灉鑺傜偣涓庤妭鐐圭浉浜�
+ console.log(node.position().x, node.position().x, 'node.position().x')
+ if (nodeType === 'bridgeConnection') {
+ this.getBridgeConnection()
+ }*/
});
// 鐩戝惉鑺傜偣浣嶇疆鏀瑰彉浜嬩欢
this.graph.on('node:change:position', ({node}) => {
this.hasMoveNode = true
this.hasMoveSingleNode = node
- });
- // 鎶捣
- this.graph.on('node:mouseup', ({e,x,y,node}) => {
-
- if (this.hasMoveNode) {
- const selectionNodes = this.graph.getSelectedCells().filter(node => node.isNode() )
- if (selectionNodes.length == 0){
- selectionNodes.push(this.hasMoveSingleNode)
- }
- //let selectionNodes = []
- console.log('妯潗鏍囷細',x,'绾靛潗鏍囷細'+y)
- // let allNodes = this.graph.getNodes()
- //
- // for(let node of allNodes){
- // if (this.graph.isSelected(node)){
- // selectionNodes.push(node)
- // }
- //
- // }
- // 鑾峰彇鍖呭惈鎸囧畾鍧愭爣鐐圭殑鑺傜偣
- const nodes = this.graph.getNodes();
- let hasNodes = []
- for (let i = 0; i < nodes.length; i++) {
- const node = nodes[i];
- const bbox = node.getBBox();
- if (x>=bbox.x && x <= bbox.x + bbox.width && y>=bbox.y && y <= bbox.y + bbox.height) {
- if ( selectionNodes.indexOf(node)===-1) {
- hasNodes.push(node);
- }
- }
- }
- if(hasNodes){}
- console.log('鑾峰彇鍖呭惈鎸囧畾鍧愭爣鐐圭殑鑺傜偣闆嗗悎',hasNodes)
- console.log('閫変腑鐨勮妭鐐归泦鍚堬細',selectionNodes)
-
- // if (selectionNodes.length>2)
- // this.graph.addEdge({
- // source: {cell: selectionNodes[0], port: 'left1'},
- // target: {cell: selectionNodes[selectionNodes.length-1], port: 'right1'},
- // router: {name: 'manhattan'},
- // connector: {name: 'rounded'}
- // })
- this.hasMoveNode = false
- this.hasMoveSingleNode = null
-
-
- // console.log('绉诲姩杩囪妭鐐癸紙澶氫釜锛夊啀鎶捣榧犳爣鍚庡緱鍒扮殑鑺傜偣',selectedNodes);
- }
});
this.graph.on('cell:click', ({cell}) => {
// this.type.value = cell.isNode() ? "node" : "edge"
@@ -1080,154 +1108,133 @@
}
},
// 瀹氫箟鍑芥暟鏉ユ鏌ヤ袱涓寘鍥存鏄惁鐩镐氦
- isIntersect(bbox1, bbox2) {
- return (
- bbox1.x < bbox2.x + bbox2.width &&
- bbox1.x + bbox1.width > bbox2.x &&
- bbox1.y < bbox2.y + bbox2.height &&
- bbox1.y + bbox1.height > bbox2.y
- )
- },
- addNodeAndConnect(node, nodeObj) { // node鏄敾甯冨師鏈夌殑鑺傜偣銆俷odeObj鏄綋鍓嶆嫋鎷界殑鑺傜偣
- const nodeType = node.getData().nodeType // 鑾峰彇鐢诲竷鍘熸湁鐨勮妭鐐圭被鍨�
- const nodeObjType = nodeObj.getData().nodeType // 鑾峰彇褰撳墠鎷栨嫿鐨勮妭鐐圭被鍨�
- const edges = this.graph.getConnectedEdges(node); // 鑾峰彇涓庡師鑺傜偣鐩稿叧鑱旂殑鎵�鏈夎繛鎺ョ嚎
- let TopSum = 0 // 鍦ㄥ師鑺傜偣涓婃柟
- let BottomSum = 0 // 鍦ㄥ師鑺傜偣涓嬫柟
- const edgesSum = edges.length
- if ((nodeType === 'end'|| nodeType === 'vote' || nodeType === 'switch' || nodeType === 'parallel') && nodeObjType === 'node') {
- if (edges.length === 0) {
- if (!this.nodeAdded) {
- // 娣诲姞鑺傜偣鐨勬搷浣�
- this.connectNode = this.graph.addNode({
- shape: 'image',
- // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
- width: 30,
- height: 30,
- data: {
- type: 'imageNodes',
- dataId: '',
- signId:node.id,
- nodeType: 'connect',
- nodeTypeExt: '',
- voteNum: ''
- },
- attrs: {
- image: {
- 'xlink:href': '/modelImg/connect.svg',
- },
- text: {
- text: 'connect',
- fontSize: 14,
- refX: 0.5,
- refY: '100%',
- refY2: 4,
- textAnchor: 'middle',
- textVerticalAnchor: 'top',
- },
- },
- ports: {...this.ports},
- })
- // 璁剧疆鏍囪涓� true锛岃〃绀哄凡缁忔坊鍔犺繃鑺傜偣
- this.nodeAdded = true;
- }
- nodeObj.position(node.position().x - 120, node.position().y - (120 * edgesSum));
- this.connectNode.position(node.position().x - 240, node.position().y + (node.size().height - this.connectNode.size().height) / 2);
- } else if (edges.length === 1) {
- // 灏嗚妭鐐圭Щ鍔ㄥ埌鎸囧畾鐨勪綅缃�
- nodeObj.position(node.position().x - 120, node.position().y - (120 * edgesSum));
- } else {
- for (const edge of edges) {
- const sourcePointY = edge.getSourcePoint().y; // 鑾峰彇杩炴帴绾跨殑璧峰鐐箉鍧愭爣
- const targetPointY = edge.getTargetPoint().y; // 鑾峰彇杩炴帴绾跨殑缁撴潫鐐箉鍧愭爣
- console.log('鍘熻妭鐐筜鍧愭爣' + node.position().y, '杩炴帴绾胯捣濮媃鍧愭爣' + sourcePointY)
- if (targetPointY > sourcePointY) {
- TopSum++
- } else if (targetPointY < sourcePointY) {
- BottomSum++
- }
- }
- console.log('鍦ㄥ師鑺傜偣涓婃柟鐨勮繛鎺ョ嚎鏁伴噺:' + TopSum, '鍦ㄥ師鑺傜偣涓嬫柟鐨勮繛鎺ョ嚎鏁伴噺:' + BottomSum)
- if (TopSum > BottomSum) {
- nodeObj.position(node.position().x - 120, node.position().y + (120 + (120 * BottomSum)))
- } else {
- nodeObj.position(node.position().x - 120, node.position().y - (120 + (120 * TopSum)));
+ findIntersectsNode(node) {
+ const nodes = this.graph.getNodes()
+ let intersectNodes = []
+ const bbox1 = node.getBBox();
+ // 妫�鏌ラ櫎褰撳墠鑺傜偣涔嬪鐨勬墍鏈夎妭鐐圭殑鍖呭洿妗嗘槸鍚︾浉浜�
+ for (const otherNode of nodes) {
+ if (otherNode === node) continue;
+ let nodeType = otherNode.getData().nodeType
+ if (nodeType === "parallel" || nodeType === "switch" || nodeType === "vote" || nodeType === "end" || nodeType === "dashedBox") {
+ const bbox2 = otherNode.getBBox();
+ if (bbox1.x < bbox2.x + bbox2.width &&
+ bbox1.x + bbox1.width > bbox2.x &&
+ bbox1.y < bbox2.y + bbox2.height &&
+ bbox1.y + bbox1.height > bbox2.y) {
+ intersectNodes.push(otherNode);
}
}
+ }
+ if (intersectNodes.length === 1) {
+ //console.log('Intersecting nodes:', intersectNodes.map(n => n)); // 鐩镐氦鑺傜偣鐨勫璞�
+ return intersectNodes[0]
+ } else {
+ //鎻愮ず鐢ㄦ埛鍙兘鎷栧埌涓�涓湁鏁堢殑鑺傜偣涓�
+ return null
+ }
+ },
+ // 鐩镐氦鐨勮妭鐐�
+ addBranch(graphNode, dragNode) { // graphCell鏄敾甯冧笂鍘熸湁鐨勮妭鐐广�俤ragNode鏄綋鍓嶆嫋鎷界殑鑺傜偣
+ let graphNodeType = graphNode.getData().nodeType
+
+ let dragNodeType = dragNode.getData().nodeType
+ let offHeight = 60
+ if (dragNodeType === 'node') {
+ offHeight = 60
+ } else if (dragNodeType === 'bridgeConnection') {
+ offHeight = 230
+ } else {
+ offHeight = 70
+ }
+ if (graphNodeType === 'dashedBox') {
+ const edges = this.graph.getConnectedEdges(graphNode); // 鑾峰彇鐢诲竷涓婂師鏈夌殑鑺傜偣鎵�鏈夎繘鏉ョ殑绾�
+ let inEdges = edges.filter(edge => edge.target.cell === graphNode.id)
+ let startNode = null
+ let endNode = null
+ if (inEdges.length === 1) {
+ let startNodeId = inEdges[0].source.cell
+ startNode = this.graph.getCellById(startNodeId)
+ }
+ let outEdges = edges.filter(edge => edge.source.cell === graphNode.id)
+ if (outEdges.length === 1) {
+ let endNodeId = outEdges[0].target.cell
+ endNode = this.graph.getCellById(endNodeId)
+ }
+ if (startNode && endNode) {
+ graphNode.remove()
+ let centerY = graphNode.position().y
+ this.addNodeAndConnect(startNode, endNode, dragNode, centerY)
+ }
+ } else {
+ const graphNodeStartNodeId = graphNode.getData().startNodeId // 鑾峰彇鐢诲竷涓婂師鏈夎妭鐐圭殑寮�濮婭D
+ const graphNodeStartNode = this.graph.getCellById(graphNodeStartNodeId) // 閫氳繃寮�濮婭D寰楀埌鍒濆鑺傜偣瀵硅薄
+ let graphNodeY = graphNode.position().y - graphNode.getBBox().height / 2 // 鑾峰彇鐢诲竷鍘熸湁鑺傜偣鐨剏鍧愭爣
+ let minY = graphNode.position().y
+ 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 centerY = graphNodeY - pointXY.minY > pointXY.maxY - graphNodeY ? pointXY.maxY + 30 : pointXY.minY - offHeight - 30
+
+ this.addNodeAndConnect(graphNodeStartNode, graphNode, dragNode, centerY)
+ }
+ },
+ addNodeAndConnect(startNode, endNode, dragNode, centerY) { // graphCell鏄敾甯冧笂鍘熸湁鐨勮妭鐐广�俤ragNode鏄綋鍓嶆嫋鎷界殑鑺傜偣
+ let minX = startNode.position().x + startNode.getBBox().width
+ let maxX = endNode.position().x
+
+ let centerX = minX + (maxX - minX) / 2
+ let dragNodeType = dragNode.getData().nodeType
+ if (dragNodeType === 'node' || dragNodeType === 'dashedBox') {
+ dragNode.position(minX + 50, centerY);
this.graph.addEdge({
- source: {cell: nodeObj, port: 'right1'},
- target: {cell: node, port: 'left1'},
+ source: {cell: startNode, port: 'right1'},
+ target: {cell: dragNode, port: 'left1'},
router: {name: 'manhattan'},
connector: {name: 'rounded'}
})
- if (this.nodeAdded) {
- console.log(this.connectNode, 'connectNode')
- this.graph.addEdge({
- source: {cell: this.connectNode, port: 'right1'},
- target: {cell: nodeObj, port: 'left1'},
- router: {name: 'manhattan'},
- connector: {name: 'rounded'}
- })
- }
- }
- if (nodeType === 'node' || (nodeType === 'dashedBox' && nodeObjType === 'dashedBox')) {
- // 閬嶅巻鎵�鏈夎繛鎺ョ嚎骞跺垹闄や笌缁欏畾鑺傜偣瀵硅薄鐩稿叧鐨勮繛鎺ョ嚎
- console.log(edges, '鎵�鏈夋湁鍏宠仈鐨勮繛鎺ョ嚎 edge')
- if (edges.length === 0) {
- this.graph.addEdge({
- source: {cell: node, port: 'right1'},
- target: {cell: nodeObj, port: 'left1'},
- router: {name: 'manhattan'},
- connector: {name: 'rounded'}
- })
- return nodeObj.position(node.position().x + node.getBBox().width + 50, node.position().y);
- } else {
- for (const edge of edges) {
- console.log(edge, '鎵�鏈夋湁鍏宠仈鐨勮繛鎺ョ嚎 edge')
- if (edge.source.cell === node.id) { // 濡傛灉杩炴帴绾跨殑璧峰鑺傜偣绛変簬褰撳墠鐢诲竷鐩爣鑺傜偣鐨処D
- const sourceNode = this.graph.getCellById(edge.source.cell); // 鑾峰彇杩炴帴绾跨殑婧愯妭鐐瑰璞�
- const targetNode = this.graph.getCellById(edge.target.cell) // 鑾峰彇杩炴帴绾跨殑鐩爣鑺傜偣瀵硅薄
- console.log(sourceNode, targetNode, 'targetNode 鐩爣鑺傜偣瀵硅薄')
- // edge.remove(); // 浠庡浘涓垹闄よ杩炴帴绾�
- nodeObj.position(node.position().x + node.getBBox().width + 50, node.position().y + (node.size().height - nodeObj.size().height) / 2);
- // edge.source = {cell: node, port: 'right1'}
- edge.target = {cell: nodeObj, port: 'left1'}
- // targetNode.position(nodeObj.position().x +nodeObj.getBBox().width+50, node.position().y);
- // this.graph.addEdge({
- // source: {cell: node, port: 'right1'},
- // target: {cell: nodeObj, port: 'left1'},
- // router: {name: 'manhattan'},
- // connector: {name: 'rounded'}
- // })
- this.graph.addEdge({
- source: {cell: nodeObj, port: 'right1'},
- target: {cell: targetNode, port: 'left1'},
- router: {name: 'manhattan'},
- connector: {name: 'rounded'}
- })
- } else {
- this.graph.addEdge({
- source: {cell: node, port: 'right1'},
- target: {cell: nodeObj, port: 'left1'},
- router: {name: 'manhattan'},
- connector: {name: 'rounded'}
- })
- nodeObj.position(node.position().x + node.getBBox().width + 50, node.position().y);
- }
- }
- }
-
-
+ this.graph.addEdge({
+ source: {cell: dragNode, port: 'right1'},
+ target: {cell: endNode, port: 'left1'},
+ router: {name: 'manhattan'},
+ connector: {name: 'rounded'}
+ })
+ } else if (dragNodeType === 'bridgeConnection') {
+ this.createBridgeConnection(minX, centerY, startNode, endNode, dragNode)
+ } else {
+ this.createParallelBrach(minX, centerY, startNode, endNode, dragNode)
}
},
- initCells(){
+ // 鐩镐氦鐨勮竟
+ addNodeAndInsertEdge(graphEdge, dragNode) {
+ 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) {
+ graphEdge.remove()
+ let centerY = startNode.position().y
+ this.addNodeAndConnect(startNode, endNode, dragNode, centerY)
+ }
+ },
+ initCells() {
const startNode = this.graph.addNode({
shape: 'image',
// imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
width: 60,
height: 60,
+ id: '10000',
data: {
type: 'imageNodes',
+ endNodeId: '20000',
dataId: '',
nodeType: 'start',
nodeTypeExt: '',
@@ -1252,8 +1259,9 @@
const dashedBox = this.graph.addNode({
shape: 'image',
// imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
- width: 170,
- height: 90,
+ width: 100,
+ height: 80,
+ id: 15000,
data: {
type: 'imageNodes',
dataId: '',
@@ -1281,8 +1289,10 @@
shape: 'image',
width: 60,
height: 60,
+ id: '20000',
data: {
type: 'imageNodes',
+ startNodeId: '10000',
dataId: '',
nodeType: 'end',
nodeTypeExt: '',
@@ -1320,8 +1330,316 @@
connector: {name: 'rounded'}
})
},
- },
+ findIntersectsEdge(graph, node) {
+ const edges = graph.getEdges()
+ const bbox = node.getBBox();
+ const lines = [bbox.leftLine, bbox.rightLine, bbox.topLine, bbox.bottomLine];
+ let res = [];
+ edges.forEach((edge) => {
+ const view = graph.findViewByCell(edge);
+ lines.forEach((line) => {
+ if (view) {
+ if (view.path.intersectsWithLine(line)) {
+ res.push(edge);
+ }
+ }
+ })
+ })
+ const uniqueArr = res.filter((insEdge, index) =>
+ res.findIndex(i => i.id === insEdge.id) === index);
+ console.log(uniqueArr, 'uniqueArr')
+ if (uniqueArr.length === 1) {
+ return uniqueArr[0]
+ } else {
+ return false
+ }
+ },
+ createParallelBrach(x, y, startNode, endNode, dragNode) {
+ dragNode.position(x + 320, y - dragNode.size().height / 2)
+ const connectNode = this.createConnectNode(x + 50, y)
+ const dashedBox = this.createDashedBox(x + 150, y)
+ dragNode.setData({startNodeId: connectNode.id})
+ this.graph.addEdge({
+ source: {cell: connectNode, port: 'right1'},
+ target: {cell: dashedBox, port: 'left1'},
+ router: {name: 'manhattan'},
+ connector: {name: 'rounded'}
+ })
+ this.graph.addEdge({
+ source: {cell: dashedBox, port: 'right1'},
+ target: {cell: dragNode, port: 'left1'},
+ router: {name: 'manhattan'},
+ connector: {name: 'rounded'}
+ })
+
+ this.graph.addEdge({
+ source: {cell: startNode, port: 'right1'},
+ target: {cell: connectNode, port: 'left1'},
+ router: {name: 'manhattan'},
+ connector: {name: 'rounded'}
+ })
+ this.graph.addEdge({
+ source: {cell: dragNode, port: 'right1'},
+ target: {cell: endNode, port: 'left1'},
+ router: {name: 'manhattan'},
+ connector: {name: 'rounded'}
+ })
+ },
+ createBridgeConnection(x, y, startNode, endNode, dragNode) {
+ const leftTopDashedBox = this.createDashedBox(x + 120, y)
+ const rightTopDashedBox = this.createDashedBox(x + 400, y)
+
+ const leftConnectNode = this.createConnectNode(x + 50, y + 80)
+ const alignCenterDashedBox = this.createDashedBox(x + 260, y + 80)
+ const rightConnectNode = this.createBridgeNode(x + 550, y + 80)
+
+ const leftBottomDashedBox = this.createDashedBox(x + 120, y + 160)
+ const rightBottomDashedBox = this.createDashedBox(x + 400, y + 160)
+
+ rightConnectNode.setData({startNodeId: leftConnectNode.id})
+ leftConnectNode.setData({endNodeId: rightConnectNode.id})
+ this.graph.addEdge({
+ source: {cell: startNode, port: 'right1'},
+ target: {cell: leftConnectNode, port: 'left1'},
+ router: {name: 'manhattan'},
+ connector: {name: 'rounded'},
+ })
+ this.graph.addEdge({
+ source: {cell: rightConnectNode, port: 'right1'},
+ target: {cell: endNode, port: 'left1'},
+ router: {name: 'manhattan'},
+ connector: {name: 'rounded'}
+ })
+ this.graph.addEdge({
+ source: {cell: leftConnectNode, port: 'right1'},
+ target: {cell: leftTopDashedBox, port: 'left1'},
+ router: {name: 'manhattan'},
+ connector: {name: 'rounded'}
+ })
+ this.graph.addEdge({
+ source: {cell: leftConnectNode, port: 'right1'},
+ target: {cell: leftBottomDashedBox, port: 'left1'},
+ router: {name: 'manhattan'},
+ connector: {name: 'rounded'}
+ })
+
+ let edgeTop = this.graph.addEdge({
+ source: {cell: leftTopDashedBox, port: 'right1'},
+ target: {cell: rightTopDashedBox, port: 'left1'},
+ router: {name: 'manhattan'},
+ connector: {name: 'rounded'}
+ })
+ let edgeBottom = this.graph.addEdge({
+ source: {cell: leftBottomDashedBox, port: 'right1'},
+ target: {cell: rightBottomDashedBox, port: 'left1'},
+ router: {name: 'manhattan'},
+ connector: {name: 'rounded'}
+ })
+
+ this.graph.addEdge({
+ source: {cell: rightTopDashedBox, port: 'right1'},
+ target: {cell: rightConnectNode, port: 'left1'},
+ router: {name: 'manhattan'},
+ connector: {name: 'rounded'}
+ })
+ this.graph.addEdge({
+ source: {cell: rightBottomDashedBox, port: 'right1'},
+ target: {cell: rightConnectNode, port: 'left1'},
+ router: {name: 'manhattan'},
+ connector: {name: 'rounded'}
+ })
+
+ this.graph.addEdge({
+ source: {cell: edgeTop},
+ target: {cell: alignCenterDashedBox},
+ router: {name: 'manhattan'},
+ connector: {name: 'rounded'},
+ })
+ this.graph.addEdge({
+ source: {cell: alignCenterDashedBox},
+ target: {cell: edgeBottom},
+ router: {name: 'manhattan'},
+ connector: {name: 'rounded'},
+ })
+ dragNode.remove()
+ },
+ createDashedBox(x, y) {
+ const dashId = getUUID().toString()
+ let dashedBox = this.graph.addNode({
+ shape: 'image',
+ // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
+ width: 100,
+ height: 60,
+ id: dashId,
+ data: {
+ isSelfCreated: true,
+ type: 'imageNodes',
+ dataId: '',
+ nodeType: 'dashedBox',
+ nodeTypeExt: '',
+ voteNum: ''
+ },
+ attrs: {
+ image: {
+ 'xlink:href': '/modelImg/dashedBox.svg',
+ },
+ text: {
+ text: 'dashedBox',
+ fontSize: 14,
+ refX: 0.5,
+ refY: '100%',
+ refY2: 4,
+ textAnchor: 'middle',
+ textVerticalAnchor: 'top',
+ },
+ },
+ ports: {...this.ports},
+ })
+ dashedBox.position(x, y - dashedBox.size().height / 2)
+ return dashedBox
+ },
+ createConnectNode(x, y) {
+ const connectId = getUUID().toString()
+ const dragNodeId = getUUID().toString()
+ let connectNode = this.graph.addNode({
+ shape: 'image',
+ // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
+ width: 30,
+ height: 30,
+ id: connectId,
+ data: {
+ isSelfCreated: true,
+ type: 'imageNodes',
+ endNodeId: dragNodeId,
+ dataId: '',
+ nodeType: 'connect',
+ nodeTypeExt: '',
+ voteNum: ''
+ },
+ attrs: {
+ image: {
+ 'xlink:href': '/modelImg/connect.svg',
+ },
+ text: {
+ text: 'connect',
+ fontSize: 14,
+ refX: 0.5,
+ refY: '100%',
+ refY2: 4,
+ textAnchor: 'middle',
+ textVerticalAnchor: 'top',
+ },
+ },
+ ports: {...this.ports},
+ })
+ connectNode.position(x, y - connectNode.size().height / 2)
+ return connectNode
+ },
+ createBridgeNode(x, y) {
+ const connectId = getUUID().toString()
+ const dragNodeId = getUUID().toString()
+ let connectNode = this.graph.addNode({
+ shape: 'image',
+ width: 50,
+ height: 50,
+ id: connectId,
+ data: {
+ isSelfCreated: true,
+ type: 'imageNodes',
+ endNodeId: dragNodeId,
+ dataId: '',
+ nodeType: 'bridge',
+ nodeTypeExt: '',
+ voteNum: ''
+ },
+ attrs: {
+ image: {
+ 'xlink:href': '/modelImg/connect.svg',
+ },
+ text: {
+ text: 'bridge',
+ fontSize: 14,
+ refX: 0.5,
+ refY: '100%',
+ refY2: 4,
+ textAnchor: 'middle',
+ textVerticalAnchor: 'top',
+ },
+ },
+ ports: {...this.ports},
+ })
+ connectNode.position(x, y - connectNode.size().height / 2)
+ return connectNode
+ },
+ getYRange(inEdges, startNode, pointXY) {
+ for (let inEdge of inEdges) {
+ let nodeId = inEdge.source.cell
+ let node = this.graph.getCellById(nodeId)
+ if (node.position().y < pointXY.minY) {
+ pointXY.minY = node.position().y
+ }
+ if (node.position().y + node.getBBox().height > pointXY.maxY) {
+ pointXY.maxY = node.position().y + node.getBBox().height
+ }
+ if (node.id === startNode.id) {
+ continue
+ }
+ const edges = this.graph.getConnectedEdges(node); // 鑾峰彇鐢诲竷涓婂師鏈夌殑鑺傜偣鎵�鏈夎繘鏉ョ殑绾�
+ let inEdgesPrev = edges.filter(edge => edge.target.cell === node.id)
+ this.getYRange(inEdgesPrev, startNode, pointXY)
+ }
+ },
+ isSeriesNode(node){
+ let result = false
+ let inNode = null
+ let outNode = null
+ let inEdges = this.getInLinesOfNode(node)
+ if (inEdges.length === 1){
+ let inEdgeId = inEdges[0].id
+ let isLineToLine = this.isLineToLine(inEdgeId)
+ let inNodeId = inEdges[0].source.cell
+ inNode = this.graph.getCellById(inNodeId)
+ let inNodeType = inNode.getData().nodeType
+ if (!isLineToLine && 'node,parallel,switch,vote'.indexOf(inNodeType)>-1){
+ result = true
+ }
+ }
+ let outEdges = this.getOutLinesOfNode(node)
+ if (outEdges.length === 1){
+ let outEdgeId = inEdges[0].id
+ let isLineToLine = this.isLineToLine(outEdgeId)
+ let outNodeId = inEdges[0].target.cell
+ outNode = this.graph.getCellById(outNodeId)
+ let outNodeType = outNode.getData().nodeType
+ if (!isLineToLine && 'node,connect'.indexOf(outNodeType)>-1){
+ result = true
+ }
+ }
+ if (result && inNode && outNode){
+ return {inNode,outNode}
+ }else {
+ return false
+ }
+ },
+ isLineToLine(edgeId){
+ for(let edge of this.graph.getEdges()){
+ if (edge.source.cell === edgeId || edge.target.cell === edgeId)
+ return true
+ }
+ return false
+ },
+ isMultipleBrach(){},
+ deleteCombination(){},
+ getInLinesOfNode(node) {
+ const edges = this.graph.getConnectedEdges(node); // 鑾峰彇鐢诲竷涓婂師鏈夌殑鑺傜偣鎵�鏈夎繘鏉ョ殑绾�
+ return edges.filter(edge => edge.target.cell === node.id)
+ },
+ getOutLinesOfNode(node) {
+ const edges = this.graph.getConnectedEdges(node); // 鑾峰彇鐢诲竷涓婂師鏈夌殑鑺傜偣鎵�鏈夎繘鏉ョ殑绾�
+ return edges.filter(edge => edge.source.cell === node.id)
+ },
+ },
}
</script>
--
Gitblit v1.9.1