使用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)
        },

 

 恩。。。還有一個問題

就是如果你連線的元素發生了位置的轉移,如果你是通過端點去連接的

然后我想說 是確實需要重繪的

如果你元素的位置發生了改變

有什么想說的 歡迎來指教 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM