使用jsplumb的一些笔记

 欢迎就是需要使用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)
        },

 

 恩。。。还有一个问题

就是如果你连线的元素发生了位置的转移，如果你是通过端点去连接的

然后我想说 是确实需要重绘的

如果你元素的位置发生了改变

有什么想说的 欢迎来指教