歡迎就是需要使用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) },
恩。。。還有一個問題
就是如果你連線的元素發生了位置的轉移,如果你是通過端點去連接的
然后我想說 是確實需要重繪的
如果你元素的位置發生了改變
有什么想說的 歡迎來指教