Recently, there is a need to realize the line between nodes and choose jSPLumB to draw.

In the process of implementation, I encountered many problems such as redrawing problems/loading sequence problems/keeping the connection correct in the process of automatic refresh. After looking up a lot of information, I was able to solve them.

Jsplumb involves several important websites, which can be used as a basis for the development process:

Jsplumb website: jsplumbtoolkit.com

Jsplumb Chinese (this Chinese site listed API is relatively complete) : github.com/wangduandua… , wdd.js.org/jsplumb-chi…

JsPlumb is a powerful drawing component that provides a way to connect elements primarily on a web page. In modern browsers, it uses SVG or Canvas technology, while in older browsers IE8 and up, it uses VML technology.

As far as the library is concerned, I think it’s important that the view synchronize with the data structure. Jsplumb does not maintain the data structure. The data structure needs to be maintained by itself, and jsplumb will notify you through events if the page changes. You change your data through events.

 

It is important to note that jsplumb operates on the DOM and must wait until the DOM is fully loaded before rendering jsplumb. For vue development, you can write this.$nextTick method. When the flowchart is updated, the DOM ID is retrieved.

Also note that when the data changes, the flow chart changes, so clear the previous connections and redraw.

Clear the line call the reset method:

let plumbIns = jsPlumb.getInstance();

plumbIns.reset();

The basic configuration to use the component library is as follows:

Private connectEle(relations) {// Define the default configuration const defaultConfig = {// Select the best anchor from left and right by default: ['Left', 'Right'], // Connector: ['Straight', {gap: 10}], // PaintStyle: {stroke: '#cdf1f1', strokeWidth: 2}, Container: 'monitor-chart-container',}; this.plumbIns.ready(() => { relations.forEach(ele => { defaultConfig.paintStyle = ele.reachable ? { stroke: '#cdf1f1', strokeWidth: 2 } : { stroke: '#aaaaaa', strokeWidth: 1 }; this.plumbIns.connect( { source: ele.source, target: ele.target, }, defaultConfig, ); }); }); }Copy the code