使用jsplumb的一些笔记
程序员文章站
2022-06-05 15:56:06
欢迎就是需要使用jsplumb跟正在使用jsplumb的一起讨论 欢迎私聊 1.关于jsplumb的connection的一些事件 ####connection拖动的事件 ####连接废弃 ####在落下来某一个点之前 #### #### #### ####想要拿到连线的点击事件啊,hover事件啊 ......
欢迎就是需要使用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) },
恩。。。还有一个问题
就是如果你连线的元素发生了位置的转移,如果你是通过端点去连接的
然后我想说 是确实需要重绘的
如果你元素的位置发生了改变
有什么想说的 欢迎来指教