欢迎就是需要使用jsplumb跟正在使用jsplumb的一起讨论 欢迎私聊
1.关于jsplumb的connection的一些事件
####connection拖动的事件
我要评论instance.bind('connectiondragstop', function(conn) {});
####连接废弃
instance.bind('connectionaborted', (conn, originalevent) => {})
####在落下来某一个点之前
instance.bind('beforedrop', (conn) => {})
####
instance.bind('beforedrag', (conn) => {})
####
instance.bind('connectiondrag', (conn) => {})
####
instance.bind('beforedetach', (conn) => {})
####想要拿到连线的点击事件啊，hover事件啊，都可以通过bind来实现
instance.bind('click', function(c) {})
等等这些事件吧~~~~~
2.就是关于连接线的一些样式问题
1.你可以在一个页面上实现多种连接的样式，这个都是可以实现的
2.有关于线是实线啊，虚线啊这些也都是可以实现的 虚线的话dashstyle可以来实现，应该是跟css差不多的
恩。。。。。
放一些废弃代码
initconnect(instance) {
var that = this;
instance.batch(function() {
for (const point of that.$store.state.nodes) {
that.initnode(instance, point.node_id)
if (point.child_nodes.length > 0 || point.parent_node == 'root') {
instance.addendpoint(point.node_id, {
uuid: `${point.node_id}-bottom`,
anchor: 'bottom',
maxconnections: -1,
// connectorstyle: { stroke: '#2fb39c', strokewidth: 2 },
// connectorhoverstyle: {
// strokewidth: 3,
// stroke: "yellow",
// },
deleteendpointsonempty: true,
dragoptions: {},
}, {
issource: true,
istarget: true,
});
}
if (point.parent_node !== 'root') {
instance.addendpoint(point.node_id, {
uuid: `${point.node_id}-top`,
anchor: 'top',
maxconnections: -1,
deleteendpointsonempty: true,
}, {
issource: true,
istarget: true,
});
}
if (point.jump_nodes.length > 0) {
point.jump_nodes.foreach((item, index) => {
instance.connect({
source: point.node_id,
target: item,
paintstyle: {
stroke: "#e72f1f",
strokewidth: 2.5,
dashstyle: "4 2",
},
maxconnections: -1,
anchor: 'right',
overlays: [
["arrow",
{
width: 9,
length: 8,
location: 1,
events: {
click: function() {
// alert('click')
}
}
}
],
["custom", {
create: function(component) {
return $('<img src=' + shears + '>');
},
location: -50,
events: {
click: function(e) {
that.deleteconfirmfun(instance, e.component)
},
}
}]
]
});
})
}
}
// init transition
for (const i of that.$store.state.lines) {
const uuid = [`${i[0]}-bottom`, `${i[1]}-top`];
instance.connect({
uuids: uuid,
});
}
})
var sourceendpoint=this.jsplumbinstance.getendpoint(`a1-bottom`);
console.log('sourceendpoint',sourceendpoint)
},
addconnect(point) {
var parent=this.findparentnode(point.node_id);
// console.log('parentnode',parentnode)
this.jsplumbinstance.addendpoint(point.node_id, {
uuid: `${point.node_id}-bottom`,
anchor: 'bottom',
maxconnections: -1,
deleteendpointsonempty: true,
dragoptions: {},
}, {
issource: true,
istarget: true,
});
this.jsplumbinstance.addendpoint(point.node_id, {
uuid: `${point.node_id}-top`,
anchor: 'top',
maxconnections: -1,
deleteendpointsonempty: true,
}, {
issource: true,
istarget: true,
});
var sourceendpoint=this.jsplumbinstance.getendpoint(`${parent.node_id}-bottom`);
var targetendpoint=this.jsplumbinstance.getendpoint(`${point.node_id}-top`);
const uuid = [`${parent.node_id}-bottom`, `${point.node_id}-top`];
this.jsplumbinstance.connect({
source:sourceendpoint,
target:targetendpoint
})
this.jsplumbinstance.repainteverything({clearedits:false})
},
deleteendpoint() {
console.log('123')
// jsplumb.detach(conn);
// 删除他与子元素的连接
console.log(this.jsplumbinstance)
// this.jsplumbinstance.remove(this.nodes[0].node_id);
// this.jsplumbinstance.empty(this.nodes[0].node_id);
var a = this.jsplumbinstance.getendpoint(`${this.nodes[0].node_id}-bottom`)
console.log('a', a)
this.jsplumbinstance.deleteendpoint(a)
},
恩。。。还有一个问题
就是如果你连线的元素发生了位置的转移，如果你是通过端点去连接的
然后我想说 是确实需要重绘的
如果你元素的位置发生了改变
有什么想说的 欢迎来指教
如对本文有疑问， 点击进行留言回复！！
网友评论