<template>
|
<div>
|
<el-row :gutter="[8,8]">
|
<el-col :span="3">
|
<div :style="'height:' +left_p+'px'">
|
<div style="height: 100%">
|
<div id="stencilImg"></div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="21">
|
<div class="fa-card-a">
|
<el-form :inline="true">
|
<el-form-item>
|
模型名称：{{ modelName }}
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="saveDiagram()">暂存</el-button>
|
<el-button type="primary" @click="analyzeDiagram()">保存</el-button>
|
<el-button type="primary" @click="clearDiagram()">清空图形</el-button>
|
<el-button @click="leftAlign()">
|
<i style="font-size: 1rem;" class="wt-iconfont icon-zuoduiqi"></i>
|
</el-button>
|
<el-button @click="centerAlign()">
|
<i style="font-size: 1rem;" class="wt-iconfont icon-chuizhiduiqi"></i>
|
</el-button>
|
<el-button @click="rightAlign()">
|
<i style="font-size: 1rem;" class="wt-iconfont icon-youduiqi"></i>
|
</el-button>
|
<el-button @click="topAlign()">
|
<i style="font-size: 1rem;" class="wt-iconfont icon-dingduiqi"></i>
|
</el-button>
|
<el-button @click="shuipingAlign()">
|
<i style="font-size: 1rem;" class="wt-iconfont icon-shuipingduiqi"></i>
|
</el-button>
|
<el-button @click="bottomAlign()">
|
<i style="font-size: 1rem;" class="wt-iconfont icon-diduiqi"></i>
|
</el-button>
|
</el-form-item>
|
<el-form-item>
|
<el-button @click="undo()">撤销</el-button>
|
<el-button @click="redo()">重做</el-button>
|
</el-form-item>
|
</el-form>
|
<div id="containerImg" style="border: 1px solid #EAEBEE;border-radius: 6px;
|
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);height: 100%">
|
</div>
|
<config-node v-show="type === 'node'" :id="id" :diagramId="diagramId" :globalGridAttr="globalGridAttr"
|
:graph="graph"
|
:nodeType="nodeType"
|
:projectId="projectId"
|
:shape="shape"/>
|
<config-edge v-show="type === 'edge'" :id="id" :globalGridAttr="globalGridAttr" :graph="graph"/>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script>
|
import {Graph, Shape, Addon, Cell} from '@antv/x6'
|
import ConfigNode from './ConfigNode/index.vue'
|
import ConfigEdge from './ConfigEdge/index.vue'
|
import {removeCurrentTabHandle} from '@/commonJS/common'
|
import {setHartBeat} from '@/commonJS/common';
|
import Cookies from 'js-cookie'
|
import {getUUID} from '../../../../packages/utils'
|
import RBDDefault from './RBD-default.json'
|
|
export default {
|
name: 'RBD-edit-img',
|
/*props: {
|
|
},*/
|
props: {
|
projectId: {
|
type: String
|
},
|
diagarmId: {
|
type: String
|
},
|
pageCode: {
|
default: 'wlt_pz'
|
},
|
flowCode: {
|
type: String,
|
default: 'wltFlow'
|
},
|
},
|
components: {
|
ConfigNode,
|
ConfigEdge
|
},
|
data() {
|
return {
|
isFirstLoad: true,
|
hasMoveNode: false,
|
hasMoveSingleNode: null,
|
nodeAdded: false,
|
connectNode: {},
|
modelId: '',
|
modelName: '',
|
modelType: '',
|
timer: null,
|
imagesList: [
|
// {imgPath: 'start', imgName: 'start', nodeType: 'start', imgWidth: 60, imgHeight: 60, imgId: '1', data: {}},
|
// {imgPath: 'end', imgName: 'end', nodeType: 'end', imgWidth: 60, imgHeight: 60, imgId: '2', data: {}},
|
// {
|
// imgPath: 'connect',
|
// imgName: 'connect',
|
// nodeType: 'connect',
|
// imgWidth: 30,
|
// imgHeight: 30,
|
// imgId: '3',
|
// data: {}
|
// },
|
// {
|
// imgPath: 'connect',
|
// imgName: 'bridge',
|
// nodeType: 'bridge',
|
// imgWidth: 50,
|
// imgHeight: 50,
|
// imgId: '12',
|
// data: {}
|
// },
|
{
|
imgPath: 'parallel',
|
imgName: 'parallel',
|
nodeType: 'parallel',
|
imgWidth: 50,
|
imgHeight: 50,
|
imgId: '9',
|
data: {}
|
},
|
{imgPath: 'vote', imgName: 'vote', nodeType: 'vote', imgWidth: 50, imgHeight: 50, imgId: '6', data: {}},
|
{
|
imgPath: 'switch',
|
imgName: 'switch',
|
nodeType: 'switch',
|
imgWidth: 50,
|
imgHeight: 50,
|
imgId: '5',
|
data: {}
|
},
|
{
|
imgPath: 'bridgeConnection',
|
imgName: 'bridgeConnection',
|
nodeType: 'bridgeConnection',
|
imgWidth: 50,
|
imgHeight: 50,
|
imgId: '10',
|
data: {}
|
},
|
// {
|
// imgPath: 'dashedBox',
|
// imgName: 'dashedBox',
|
// nodeType: 'dashedBox',
|
// imgWidth: 60,
|
// imgHeight: 60,
|
// imgId: '10000',
|
// data: {}
|
// },
|
],
|
imagesList2: [],
|
nodeType: '',
|
first: true,
|
shape: '',
|
projectList: [],
|
diagramList: [],
|
diagramId: '',
|
projectId: '',
|
diagramJson: '',
|
diagramIdDisabled: false,
|
dataForm: {
|
id: null,
|
content: null,
|
publishContent: null,
|
hasPublish: 0,
|
urlPref: '',
|
},
|
type: '',
|
id: '',
|
graph: null,
|
globalGridAttr: {
|
productType: '',
|
voteNum: '',
|
repairMttcr: '',
|
repairMttcrOther: '',
|
repairDistribType: '',
|
reliabDistribType: '',
|
taskMtbcfOther: '',
|
isRepair: 0,
|
taskMtbcf: '',
|
numberInputValue: '',
|
statusImg: '',
|
nodeTypeExt: '',
|
type: 'mesh',
|
size: 10,
|
color: '#e5e5e5',
|
thickness: 1,
|
colorSecond: '#d0d0d0',
|
thicknessSecond: 1,
|
factor: 4,
|
bgColor: '#e5e5e5',
|
showImage: true,
|
repeat: 'watermark',
|
position: 'center',
|
bgSize: JSON.stringify({width: 150, height: 150}),
|
opacity: 0.1,
|
|
stroke: '#5F95FF',
|
strokeWidth: 1,
|
connector: 'rounded',
|
router: 'manhattan',
|
label: '',
|
nodeStroke: '#5F95FF',
|
nodeStrokeWidth: 1,
|
nodeFill: '#ffffff',
|
nodeFontSize: 12,
|
nodeColor: '#080808',
|
nodeText: '',
|
nodeDate: '',
|
nodeUsers: '',
|
nodeDataDate: '',
|
nodeDataText: '',
|
dataId: '',
|
inspectName: '',
|
distance: 0.5,
|
angle: 0,
|
},
|
isReady: false,
|
curCel: Cell,
|
left_p: document.documentElement.clientHeight - 100,
|
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',
|
},
|
],
|
}
|
}
|
},
|
watch: {
|
'$route.params.configId'() {
|
// alert('$route.params.projectId change')
|
this.projectId = this.$route.params.projectId
|
//this.diagramId = this.$route.params.diagramId
|
console.log(this.$route.params.projectId, 'this.$route.params.projectId')
|
console.log(this.$route.params.diagramId, 'this.$route.params.diagramId')
|
}
|
},
|
mounted() {
|
//this.initDigram()
|
this.type = 'grid'
|
},
|
methods: {
|
init(row) {
|
this.modelName = row.modelName
|
this.dataForm.id = row.id
|
// this.productId = row.productId
|
// this.getProduct(row.productId)
|
this.initDigram(row.productId)
|
console.log(this.dataForm, 'init(row){')
|
},
|
async getDiagram(modelId) {
|
this.isFirstLoad = true;
|
let params = {
|
modelId: modelId,
|
urlPref: window.SITE_CONFIG['apiURL'],
|
token: Cookies.get('token'),
|
}
|
let res = await this.$http.get(`/taskReliability/ModelLine/getDiagram`, {params: params})
|
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.isFirstLoad = false;
|
console.log(this.diagramJson.cells.length, 'this.diagramJson.cells.length')
|
|
this.graph.positionContent('left')
|
// this.graph.centerContent()
|
// this.graph.zoomToFit()
|
} else {
|
this.graph.fromJSON(RBDDefault)
|
}
|
},
|
async clearDiagram() {
|
this.dataForm.id = null
|
// this.graph.fromJSON(this.emptyJson)
|
this.graph.fromJSON('')
|
// this.graph.centerContent()
|
// this.graph.zoomToFit()
|
// this.graph.freeze()
|
},
|
async initDigram(productId) {
|
this.timer = setHartBeat(10, 240);
|
console.log(document.documentElement.clientWidth, 'document.documentElement.clientWidth')
|
console.log(document.documentElement.clientHeight, 'document.documentElement.clientHeight')
|
this.graph = new Graph({
|
container: document.getElementById('containerImg'),
|
width: document.documentElement.clientWidth,
|
height: document.documentElement.clientHeight - 200,
|
// async: true,
|
grid: {
|
visible: true,
|
},
|
autoResize: true,
|
history: {
|
enabled: true,
|
beforeAddCommand(event, args) {
|
if (args.key === 'tools') {
|
// console.log(args.key, 'event, args')
|
return false
|
}
|
},
|
},
|
// panning: {
|
// enabled: true,
|
// },
|
scroller: {
|
enabled: true,
|
pageVisible: true,
|
autoResize: true,
|
pageBreak: true,
|
pannable: true,
|
minVisibleWidth: 200,
|
minVisibleHeight: 200,
|
modifiers: 'shift',
|
},
|
mousewheel: {
|
enabled: true,
|
zoomAtMousePosition: true,
|
modifiers: 'ctrl',
|
minScale: 0.5,
|
maxScale: 3,
|
},
|
connecting: {
|
router: {
|
name: 'manhattan',
|
// args: {
|
// padding: 1,
|
// },
|
},
|
connector: {
|
name: 'rounded',
|
args: {
|
radius: 5,
|
},
|
},
|
anchor: 'center',
|
connectionPoint: 'anchor',
|
allowBlank: false,
|
snap: {
|
radius: 20,
|
},
|
createEdge() {
|
return new Shape.Edge({
|
attrs: {
|
line: {
|
stroke: '#A2B1C3',
|
strokeWidth: 2,
|
targetMarker: {fill: 'none'}
|
}
|
},
|
labels: [{
|
attrs: {
|
body: {
|
stroke: '#5F95FF',
|
},
|
text: {
|
text: ''
|
}
|
},
|
position: {
|
distance: 0.5,
|
angle: 180,
|
options: {
|
keepGradient: true,
|
ensureLegibility: true
|
}
|
}
|
}],
|
tools: {
|
name: 'segments',
|
args: {
|
attrs: {fill: '#666'},
|
},
|
},
|
zIndex: -100,
|
})
|
},
|
validateConnection({targetMagnet}) {
|
return !!targetMagnet
|
},
|
},
|
highlighting: {
|
magnetAdsorbed: {
|
name: 'stroke',
|
args: {
|
attrs: {
|
fill: '#5F95FF',
|
stroke: '#5F95FF',
|
},
|
},
|
},
|
},
|
resizing: true,
|
rotating: true,
|
selecting: {
|
enabled: true,
|
rubberband: true,
|
rubberEdge: true,
|
showNodeSelectionBox: true,
|
},
|
snapline: true,
|
keyboard: true,
|
clipboard: true,
|
})
|
this.graph.centerContent()
|
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(100, 60)
|
}
|
if (node.getData().type && node.getData().type === 'imageNodes2') {
|
return node.clone({keepId: true})
|
} else {
|
return node.clone()
|
}
|
},
|
validateNode: (node) => {
|
const existingNodes = this.graph.getNodes(); // 获取画布上所有节点
|
for (const existingNode of existingNodes) {
|
if (existingNode.id === node.id) {
|
this.$message({message: '该设备节点已在画布上，无法再次绘制', type: 'warning'})
|
return false; // 取消添加节点操作
|
}
|
}
|
},
|
title: '',
|
target: this.graph,
|
stencilGraphWidth: 200,
|
stencilGraphHeight: 280,
|
collapsable: true,
|
groups: [
|
{
|
title: '运算符号',
|
name: 'group1',
|
graphHeight: 200,
|
},
|
{
|
title: '设备节点',
|
name: 'group2',
|
graphHeight: '',
|
layoutOptions: {
|
rowHeight: 90,
|
},
|
}
|
],
|
layoutOptions: {
|
columns: 2,
|
columnWidth: 105,
|
},
|
})
|
document.getElementById('stencilImg').appendChild(stencil.container)
|
const imageNodes = this.imagesList.map((item) =>
|
this.graph.createNode({
|
shape: 'image',
|
// 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: ''
|
},
|
attrs: {
|
image: {
|
'xlink:href': '/modelImg/' + item.imgPath + '.svg',
|
},
|
text: {
|
text: item.imgName,
|
fontSize: 14,
|
style: {
|
color: this.globalGridAttr.nodeColor
|
},
|
refX: 0.5,
|
refY: '100%',
|
refY2: 4,
|
textAnchor: 'middle',
|
textVerticalAnchor: 'top',
|
},
|
},
|
ports: {...this.ports},
|
}),
|
)
|
let params = {
|
productId: productId
|
}
|
let res = await this.$http.get(`/basicInfo/XhProductModel/getProduct`, {params: params})
|
this.imagesList2 = res.data
|
console.log(this.imagesList2, 'getProduct(productId)234567890')
|
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}`,
|
width: 60,
|
height: 60,
|
id: item.dataId, // 手动设置节点的 ID
|
data: {
|
type: 'imageNodes2',
|
isRepair: item.isRepair,
|
dataId: item.dataId,
|
nodeType: item.nodeType,
|
nodeTypeExt: item.nodeTypeExt,
|
productType: item.productType,
|
statusImg: item.statusImg,
|
reliabDistribType: item.reliabDistribType,
|
repairDistribType: item.repairDistribType,
|
repairMttcr: item.repairMttcr,
|
repairMttcrOther: item.repairMttcrOther,
|
taskMtbcf: item.taskMtbcf,
|
taskMtbcfOther: item.taskMtbcfOther,
|
imgHeight: item.imgHeight,
|
imgWidth: item.imgWidth,
|
voteNum: '',
|
},
|
attrs: {
|
text: {
|
text: item.imgName,
|
fontSize: 14,
|
style: {
|
color: this.globalGridAttr.nodeColor
|
},
|
refX: 0.5,
|
refY: '100%',
|
refY2: 4,
|
textAnchor: 'middle',
|
textVerticalAnchor: 'top',
|
},
|
},
|
tools: [
|
{
|
name: 'button',
|
args: {
|
markup: [
|
{
|
tagName: 'image',
|
selector: 'icon',
|
attrs: {
|
// 'xlink:href': 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ',
|
'xlink:href': item.statusImg,
|
width: 30,
|
height: 30,
|
x: 0,
|
y: 0
|
}
|
}
|
]
|
}
|
}
|
],
|
ports: {...this.ports},
|
}),
|
)
|
stencil.load(imageNodes, 'group1')
|
stencil.load(imageNodes2, 'group2')
|
|
this.graph.bindKey(['meta+c', 'ctrl+c'], () => {
|
const cells = this.graph.getSelectedCells()
|
if (cells.length) {
|
this.graph.copy(cells)
|
}
|
return false
|
})
|
|
this.graph.bindKey(['meta+x', 'ctrl+x'], () => {
|
const cells = this.graph.getSelectedCells()
|
if (cells.length) {
|
this.graph.cut(cells)
|
}
|
return false
|
})
|
this.graph.bindKey(['meta+v', 'ctrl+v'], () => {
|
if (!this.graph.isClipboardEmpty()) {
|
const cells = this.graph.paste({offset: 32})
|
this.graph.cleanSelection()
|
this.graph.select(cells)
|
}
|
return false
|
})
|
// select all
|
this.graph.bindKey(['meta+a', 'ctrl+a'], () => {
|
const nodes = this.graph.getNodes()
|
if (nodes) {
|
this.graph.select(nodes)
|
}
|
})
|
//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; // 取消操作
|
}
|
})
|
// zoom
|
this.graph.bindKey(['ctrl+1', 'meta+1'], () => {
|
const zoom = this.graph.zoom()
|
if (zoom < 1.5) {
|
this.graph.zoom(0.1)
|
}
|
})
|
|
this.graph.bindKey(['ctrl+2', 'meta+2'], () => {
|
const zoom = this.graph.zoom()
|
if (zoom > 0.5) {
|
this.graph.zoom(-0.1)
|
}
|
})
|
|
this.graph.on('blank:click', ({cell}) => {
|
this.reset()
|
// this.type.value = "grid"
|
this.type = 'grid'
|
// this.id = cell.id
|
})
|
// 监听节点添加事件
|
this.graph.on('node:added', ({node}) => {
|
if (this.isFirstLoad) {
|
return
|
}
|
if (node.getData().isSelfCreated) {
|
return
|
}
|
const nodeType = node.getData().nodeType; // 获取节点的类型
|
const nodeObj = node
|
console.log(123)
|
let intersectNode = this.findIntersectsNode(node)
|
if (intersectNode) { // 当有节点相交 ==>并行
|
this.addBranch(intersectNode, nodeObj)
|
return
|
} 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)
|
return
|
} else {
|
//提示
|
}
|
}
|
}
|
node.remove()
|
|
/*//如果节点与节点相交
|
console.log(node.position().x, node.position().x, 'node.position().x')
|
if (nodeType === 'bridgeConnection') {
|
this.getBridgeConnection()
|
}*/
|
});
|
this.graph.on('cell:contextmenu', ({cell}) => {
|
// this.type.value = cell.isNode() ? "node" : "edge"
|
this.type = cell.isNode() ? 'node' : 'edge'
|
this.shape = cell.shape
|
this.id = cell.id
|
if (this.type === 'node') {
|
this.nodeType = cell.getData().nodeType
|
// console.log(this.nodeType, cell.id, 'this.nodeType')
|
}
|
// console.log(this.shape, 'this.shape')
|
// this.nodeOpt(this.id, this.globalGridAttr)
|
})
|
//单击边节点
|
this.graph.on('edge:click', ({edge}) => {
|
this.reset()
|
edge.attr('line/stroke', 'orange')
|
edge.prop('labels/0', {
|
attrs: {
|
body: {
|
stroke: 'orange',
|
},
|
},
|
|
})
|
})
|
// 单击node节点
|
this.graph.on('node:click', ({node}) => {
|
})
|
// 控制连接桩显示/隐藏
|
this.graph.on('node:delete', ({view, e}) => {
|
e.stopPropagation()
|
view.cell.remove()
|
})
|
|
this.graph.on('node:customevent', ({name, view, e}) => {
|
if (name === 'node:delete') {
|
e.stopPropagation()
|
view.cell.remove()
|
}
|
})
|
// 双击编辑
|
this.graph.on('cell:dblclick', ({cell, e}) => {
|
const isNode = cell.isNode()
|
const name = cell.isNode() ? 'node-editor' : 'edge-editor'
|
cell.removeTool(name)
|
cell.addTools({
|
name,
|
args: {
|
event: e,
|
attrs: {
|
backgroundColor: isNode ? '#EFF4FF' : '#FFF',
|
text: {
|
fontSize: 16,
|
fill: '#262626',
|
},
|
},
|
},
|
})
|
})
|
|
this.graph.on('node:mouseenter', ({node}) => {
|
const container = document.getElementById('containerImg')
|
const ports = container.querySelectorAll(
|
'.x6-port-body',
|
)
|
this.showPorts(ports, true)
|
})
|
|
this.graph.on('node:mouseleave', ({node}) => {
|
// if (node.hasTool('button-remove')) {
|
// node.removeTool('button-remove')
|
// }
|
const container = document.getElementById('containerImg')
|
const ports = container.querySelectorAll(
|
'.x6-port-body',
|
)
|
this.showPorts(ports, false)
|
})
|
|
this.graph.on('edge:mouseenter', ({cell}) => {
|
// alert(123)
|
cell.addTools([
|
{
|
name: 'source-arrowhead',
|
},
|
{
|
name: 'target-arrowhead',
|
args: {
|
attrs: {
|
fill: 'red',
|
},
|
},
|
},
|
{
|
name: 'segments',
|
args: {snapRadius: 20, attrs: {fill: '#444'}}
|
},
|
])
|
})
|
|
this.graph.on('edge:mouseleave', ({cell}) => {
|
cell.removeTools()
|
})
|
|
await this.getDiagram(this.dataForm.id)
|
},
|
showPorts(ports, show) {
|
for (let i = 0, len = ports.length; i < len; i = i + 1) {
|
ports[i].style.visibility = show ? 'visible' : 'hidden'
|
}
|
},
|
reset() {
|
this.graph.drawBackground({color: '#fff'})
|
const nodes = this.graph.getNodes()
|
const edges = this.graph.getEdges()
|
nodes.forEach((node) => {
|
node.attr('body/stroke', '#5F95FF')
|
})
|
edges.forEach((edge) => {
|
edge.attr('line/stroke', '#5F95FF')
|
edge.prop('labels/0', {
|
attrs: {
|
body: {
|
stroke: '#5F95FF',
|
},
|
},
|
})
|
})
|
},
|
async search() {
|
await this.getDiagram();
|
},
|
async saveDiagram() {
|
console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
|
this.dataForm.content = JSON.stringify(this.graph.toJSON())
|
this.dataForm.urlPref = window.SITE_CONFIG['apiURL']
|
console.log(this.dataForm, 'dataFrom')
|
await this.$http[this.dataForm.id === null ? 'post' : 'put'](`/taskReliability/ModelLine/`, this.dataForm).then(async res => {
|
if (res.msg === 'success') {
|
this.$alert('保存成功', '提示', {
|
confirmButtonText: '确定'
|
})
|
}
|
})
|
},
|
async analyzeDiagram() {
|
console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
|
this.dataForm.content = JSON.stringify(this.graph.toJSON())
|
this.dataForm.urlPref = window.SITE_CONFIG['apiURL']
|
await this.$http['post'](`/taskReliability/ModelLine/analyze`, this.dataForm).then(async res => {
|
if (res.msg === 'success') {
|
this.$alert('解析成功', '提示', {
|
confirmButtonText: '确定'
|
})
|
}
|
})
|
},
|
leftAlign() {
|
const NODE = this.graph.getSelectedCells()
|
let leftX = null
|
for (let a of NODE) {
|
if (leftX == null || a.getBBox().x < leftX) {
|
leftX = a.getBBox().x
|
}
|
}
|
for (let a of NODE) {
|
let y = a.getBBox().y
|
a.position(leftX, y)
|
// console.log(leftX, ':', y, ' x:y')
|
}
|
},
|
topAlign() {
|
const NODE = this.graph.getSelectedCells()
|
let topY = null
|
for (let a of NODE) {
|
console.log(a.getBBox(), 'a.getBBox()')
|
if (topY == null || a.getBBox().y < topY) {
|
topY = a.getBBox().y
|
}
|
}
|
for (let a of NODE) {
|
let x = a.getBBox().x
|
a.position(x, topY)
|
}
|
},
|
centerAlign() {
|
const NODE = this.graph.getSelectedCells()
|
let rightX = null
|
let leftX = null
|
for (let a of NODE) {
|
if (leftX == null || a.getBBox().x < leftX) {
|
leftX = a.getBBox().x
|
}
|
}
|
for (let a of NODE) {
|
if (rightX == null || a.getBBox().x + a.getBBox().width > rightX) {
|
rightX = a.getBBox().x + a.getBBox().width
|
}
|
}
|
|
let centerX = leftX + (rightX - leftX) / 2
|
|
for (let a of NODE) {
|
let y = a.getBBox().y
|
a.position(centerX - a.getBBox().width / 2, y)
|
}
|
},
|
shuipingAlign() {
|
const NODE = this.graph.getSelectedCells()
|
let bottomY = null
|
let topY = null
|
for (let a of NODE) {
|
if (topY == null || a.getBBox().y || 0 < topY) {
|
topY = a.getBBox().y
|
}
|
}
|
for (let a of NODE) {
|
if (bottomY == null || a.getBBox().y + a.getBBox().height > bottomY) {
|
bottomY = a.getBBox().y + a.getBBox().height
|
}
|
}
|
|
let centerY = topY + (bottomY - topY) / 2
|
for (let a of NODE) {
|
let x = a.getBBox().x
|
let centerHei = a.getBBox().height / 2
|
a.position(x, centerY - centerHei)
|
}
|
},
|
rightAlign() {
|
const NODE = this.graph.getSelectedCells()
|
let rightX = null
|
for (let a of NODE) {
|
if (rightX == null || a.getBBox().x + a.getBBox().width > rightX) {
|
rightX = a.getBBox().x + a.getBBox().width
|
}
|
}
|
for (let a of NODE) {
|
let y = a.getBBox().y
|
a.position(rightX - a.getBBox().width, y)
|
}
|
},
|
bottomAlign() {
|
const NODE = this.graph.getSelectedCells()
|
let bottomY = null
|
for (let a of NODE) {
|
if (bottomY == null || (a.getBBox().y + a.getBBox().height) > bottomY) {
|
bottomY = a.getBBox().y + a.getBBox().height
|
}
|
}
|
|
for (let a of NODE) {
|
let x = a.getBBox().x
|
a.position(x, bottomY - a.getBBox().height)
|
}
|
},
|
close() {
|
if (this.timer) {
|
window.clearInterval(this.timer)
|
}
|
},
|
// 定义函数来检查两个包围框是否相交
|
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 === "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是画布上原有的节点。dragNode是当前拖拽的节点
|
let graphNodeType = graphNode.getData().nodeType
|
|
let dragNodeType = dragNode.getData().nodeType
|
let offHeight = 50
|
if (dragNodeType === 'node') {
|
offHeight = 50
|
} 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) {
|
let centerY = graphNode.position().y
|
let result = this.addNodeAndConnect(graphNode, dragNode, dragNode.position().x - dragNode.size().width/2, centerY)
|
if (!result){
|
dragNode.remove()
|
return
|
}
|
inEdges[0].target = {cell: result.newStartNode.id, port: 'left1'}
|
outEdges[0].source = {cell: result.newEndNode.id, port: 'right1'}
|
graphNode.remove()
|
}
|
} else { //并行结构
|
const graphNodeStartNodeId = graphNode.getData().startNodeId // 获取画布上原有节点的开始ID
|
const graphNodeStartNode = this.graph.getCellById(graphNodeStartNodeId) // 通过开始ID得到初始节点对象
|
let graphNodeY = graphNode.position().y - graphNode.getBBox().height / 2 // 获取画布原有节点的y坐标
|
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，maxY
|
|
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 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 result = this.addNodeAndConnect(null, dragNode, minX, centerY)
|
if (!result){
|
dragNode.remove()
|
return
|
}
|
this.graph.addEdge({
|
source: {cell: graphNodeStartNode, port: 'right1'},
|
target: {cell: result.newStartNode, port: 'left1'},
|
router: {name: 'manhattan'},
|
connector: {name: 'rounded'}
|
})
|
this.graph.addEdge({
|
source: {cell: result.newEndNode, port: 'right1'},
|
target: {cell: graphNode, port: 'left1'},
|
router: {name: 'manhattan'},
|
connector: {name: 'rounded'}
|
})
|
}
|
},
|
addNodeAndConnect(targetNode, dragNode, leftX, centerY) { // graphCell是画布上原有的节点。dragNode是当前拖拽的节点
|
let width =100, height = 80, leftTopX = leftX , leftTopY = centerY
|
let dragNodeType = dragNode.getData().nodeType
|
if (dragNodeType === 'node') {
|
width =60
|
height = 60
|
}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
|
} else {
|
width =270
|
height = 60
|
}
|
|
if (!this.canPlace(targetNode,dragNode,{leftTopX, leftTopY, width, height})){
|
return false
|
}
|
|
if (dragNodeType === 'node' || dragNodeType === 'dashedBox') {
|
dragNode.position(leftX, centerY)
|
return {newStartNode: dragNode, newEndNode: dragNode}
|
} else if (dragNodeType === 'bridgeConnection') {
|
return this.createBridgeConnection(leftTopX, leftTopY, dragNode)
|
} else {
|
return this.createParallelBrach(leftTopX, leftTopY, dragNode)
|
}
|
},
|
// 相交的边
|
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) {
|
let centerY = dragNode.position().y
|
let isRight = true;
|
let startPort = 'right1'
|
let endPort = 'left1'
|
if (this.isTopBottom(graphEdge)) {
|
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
|
if (centerX - leftX < rightX - centerX) {
|
isRight = false
|
}
|
}
|
let result = this.addNodeAndConnect(null, dragNode, dragNode.position().x, centerY)
|
if (!result){
|
dragNode.remove()
|
return
|
}
|
if (isRight) {
|
graphEdge.target = {cell: result.newStartNode.id, port: endPort}
|
this.graph.addEdge({
|
source: {cell: result.newEndNode, port: startPort},
|
target: {cell: endNode, port: endPort},
|
router: {name: 'manhattan'},
|
connector: {name: 'rounded'}
|
})
|
|
} else {
|
this.graph.addEdge({
|
source: {cell: startNode, port: startPort},
|
target: {cell: result.newStartNode, port: endPort},
|
router: {name: 'manhattan'},
|
connector: {name: 'rounded'}
|
})
|
graphEdge.source = {cell: result.newEndNode.id, port: startPort}
|
}
|
// graphEdge.remove()
|
}
|
},
|
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, 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'}
|
})
|
return {newStartNode: connectNode, newEndNode: dragNode}
|
/* 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, dragNode) {
|
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 rightConnectNode = this.createBridgeNode(x + 530, y + 87)
|
|
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})
|
/* 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, port: 'top1'},
|
router: {name: 'manhattan'},
|
connector: {name: 'rounded'},
|
})
|
this.graph.addEdge({
|
source: {cell: alignCenterDashedBox, port: 'bottom1'},
|
target: {cell: edgeBottom},
|
router: {name: 'manhattan'},
|
connector: {name: 'rounded'},
|
})
|
dragNode.remove()
|
return {newStartNode: leftConnectNode, newEndNode: rightConnectNode}
|
},
|
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',
|
width: 10,
|
height: 10,
|
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 bridgeNode = this.graph.addNode({
|
shape: 'image',
|
width: 30,
|
height: 30,
|
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},
|
})
|
bridgeNode.position(x, y - bridgeNode.size().height / 2)
|
return bridgeNode
|
},
|
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(startNode, endNode) {
|
let result = false
|
let inNode = null
|
let outNode = null
|
let inEdges = this.getInLinesOfNode(startNode)
|
console.log(inEdges, 'inEdges')
|
if (inEdges.length === 1) {
|
let isMyLineToOtherLine = this.isMyLineToOtherLine(inEdges[0])
|
let hasOtherLineToMyLine = this.hasOtherLineToMyLine(inEdges[0].id)
|
let inNodeId = inEdges[0].source.cell
|
inNode = this.graph.getCellById(inNodeId)
|
if (!isMyLineToOtherLine && !hasOtherLineToMyLine) {
|
let inNodeType = inNode.getData().nodeType
|
console.log(inNodeType, 'inNodeType')
|
if ('node,dashedBox,parallel,switch,vote,bridge'.indexOf(inNodeType) > -1) {
|
result = true
|
}
|
}
|
}
|
let outEdges = this.getOutLinesOfNode(endNode)
|
console.log(outEdges, 'outEdges')
|
if (outEdges.length === 1) {
|
let isMyLineToOtherLine = this.isMyLineToOtherLine(outEdges[0])
|
let hasOtherLineToMyLine = this.hasOtherLineToMyLine(outEdges[0].id)
|
let outNodeId = outEdges[0].target.cell
|
outNode = this.graph.getCellById(outNodeId)
|
if (!isMyLineToOtherLine && !hasOtherLineToMyLine) {
|
let outNodeType = outNode.getData().nodeType
|
if ('node,connect,dashedBox'.indexOf(outNodeType) > -1) {
|
result = true
|
}
|
}
|
}
|
console.log(result, 'result')
|
if (result && inNode && outNode) {
|
console.log(inNode, outNode, 'inNode, outNode')
|
return {inNode, outNode}
|
} else {
|
return false
|
}
|
},
|
hasOtherLineToMyLine(edgeId) {
|
for (let edge of this.graph.getEdges()) {
|
if (edge.source.cell === edgeId || edge.target.cell === edgeId)
|
return true
|
}
|
return false
|
},
|
isMyLineToOtherLine(myEdge) {
|
for (let edge of this.graph.getEdges()) {
|
if (myEdge.source.cell === edge.id || myEdge.target.cell === edge.id)
|
return true
|
}
|
return false
|
},
|
isTopBottom(edge) {
|
if (edge.source.port === 'top1' || edge.source.port === 'bottom1' || edge.target.port === 'top1' || edge.target.port === 'bottom1') {
|
return true
|
}
|
},
|
isMultipleBrach(node) {
|
let outEdges = this.getOutLinesOfNode(node)
|
let outNodeId = outEdges[0].target.cell
|
if (this.isTopBottom(outEdges[0]))
|
return false
|
let outNode = this.graph.getCellById(outNodeId)
|
if ('bridge,end'.indexOf(outNode.getData().nodeType) > -1) {
|
return false
|
}
|
let inEdges = this.getInLinesOfNode(outNode)
|
return inEdges.length > 1;
|
},
|
deleteCombination(node) {
|
let startNode = this.graph.getCellById(node.getData().startNodeId)
|
let allCombinationNodes = []
|
console.log(startNode, 'startNode')
|
this.getAllCombinationNodes(startNode.id, node, allCombinationNodes)
|
console.log(allCombinationNodes, 'allCombinationNodes')
|
this.graph.removeCells(allCombinationNodes)
|
},
|
getAllCombinationNodes(startNodeId, node, allCombinationNodes) {
|
allCombinationNodes.push(node)
|
if (node.id == startNodeId || node.isEdge()) {
|
return
|
}
|
let inEdges = this.getInLinesOfNode(node) // 如果？？？
|
for (let inEdge of inEdges) {
|
let lineNode = this.getNodeOfConectLine(inEdge)
|
if (lineNode) {
|
this.getAllCombinationNodes(startNodeId, lineNode, allCombinationNodes)
|
}
|
let inNodeId = inEdge.source.cell
|
let inNode = this.graph.getCellById(inNodeId)
|
if (inNode.isEdge())
|
continue
|
this.getAllCombinationNodes(startNodeId, inNode, allCombinationNodes)
|
}
|
},
|
getNodeOfConectLine(paramEdge) {
|
for (let edge of this.graph.getEdges()) {
|
let nodeId = null
|
/* if (edge.source.cell === paramEdge.id){
|
nodeId = edge.target.cell
|
}*/
|
if (edge.target.cell === paramEdge.id) {
|
nodeId = edge.source.cell
|
}
|
if (nodeId) {
|
let node = this.graph.getCellById(nodeId)
|
if (node.isNode())
|
return node
|
}
|
}
|
return null
|
},
|
getInLinesOfNode(node) {
|
const edges = this.graph.getConnectedEdges(node); // 获取画布上原有的节点所有进来的线
|
console.log(edges, '获取画布上开始节点所有的线 edges')
|
return edges.filter(edge => edge.target.cell === node.id)
|
},
|
getOutLinesOfNode(node) {
|
console.log(node, '获取画布上的结束节点 node')
|
const edges = this.graph.getConnectedEdges(node); // 获取画布上原有的节点所有进来的线
|
console.log(edges, '获取画布上的结束节点所有的线 edges')
|
return edges.filter(edge => edge.source.cell === node.id)
|
},
|
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);
|
}
|
}
|
console.log(box2,'box2')
|
console.log(intersectNodes,'intersectNodes')
|
return intersectNodes.length <= 0;
|
},
|
undo(){
|
if (this.graph.history.canUndo()) {
|
this.graph.history.undo()
|
}
|
},
|
redo(){
|
if (this.graph.history.canRedo()) {
|
this.graph.history.redo()
|
}
|
}
|
},
|
}
|
</script>
|
|
<style>
|
#containerImg {
|
display: flex;
|
border: 1px solid #dfe3e8;
|
height: 400px;
|
width: 100% !important;
|
}
|
|
.x6-graph-scroller.x6-graph-scroller-pannable {
|
width: 100% !important;
|
}
|
|
#stencilImg {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
border-right: 1px solid #dfe3e8;
|
}
|
|
.x6-widget-stencil {
|
position: relative;
|
height: 100%;
|
}
|
|
#stencilImg .x6-graph-svg-viewport {
|
height: 100%;
|
}
|
|
.x6-widget-stencil-content {
|
position: relative;
|
height: calc(100% - 32px);
|
}
|
|
#stencilImg .x6-widget-stencil.collapsable > .x6-widget-stencil-content {
|
top: 0
|
}
|
|
</style>
|
