What is jsPlumb

JsPlumb is a powerful library for drawing connections between DOM nodes. It provides a lot of customization for setting connections between DOM nodes. You can use it to draw various flow diagrams.

Second, the installation

JsPlumb is divided into two versions: Free (Community Edition) and paid (Toolkit Edition). The paid version will have more workers. We only need to use the free version, which is v2.15.6. There are two ways to introduce jsPlumb

yarn add jsplumb import { jsPlumb } from 'jsplumb'; / / yarn/https://cdn.bootcss.com/jsPlumb/2.15.3/js/jsplumb.min.js/CDN address installationCopy the code

Either way, we end up with a JsPlumb object.

3. Explanation of nouns

  • Source: the starting position of the connection
  • Target: indicates the end position of the connection
  • Endpoint: The point on the DOM node where a wire can be dragged out
  • Anchor: Location of the cable end
  • Connector: Connects DOM nodes
  • Overlay: lines of related styles, information, etc

Initialization & configuration

JsPlumb has its own set of configurations, but we are advised not to change them. If we need to change the configuration, we can obtain an instance and then make changes. All of our code is based on this example to do the demo. Note here: jsPlumb cannot be used until the DOM is initialized, so we call the ready method to initialize it.

const instance = jsPlumb.getInstance(); / / jsplumb instance
instance.ready(() = > {
    //some code
});//
Copy the code

Use the importDefaults method to change the default configuration, which is only partially listed here.

instance.importDefaults({
    Container: 'editArea'./ / container id
    PaintStyle: {
        stroke: '#E0E3E7'.// Line color
        strokeWidth: 1.// The thickness of the line. The larger the value, the thicker the line
        outlineStroke: 'transparent'.// Set the color of the outer line, default to transparent, so that others can't see, click the line can not be precise click
        outlineWidth: 10 // The width of the outside of the line, the larger the value, the larger the line click range
    },
    DeleteEndpointsOnDetach: true.// Whether to delete the endpoint while deleting the connection
    HoverPaintStyle: {
        stroke: '#b0b2b5'.strokeWidth: 1
    }, // Mouse over the line style
    Overlays: [['Arrow'.// Arrow style
            {
                width: 10.// The width of the arrow tail
                length: 8.// Distance from the tail of the arrow to the head
                location: 1.// The recommended value is 0 to 1
                direction: 1.// Direction, default is 1 (forward), optional -1 (backward)
                foldback: 0.623 // The retracting Angle, that is, the tail Angle, is 0.623 by default, when 1, is positive triangle}], ['Label'.// Conditional style
            {
                label: ' '.location: 0.4.cssClass: 'aLabel'}}]]);Copy the code

Five, actual combat

Let’s take a look at some examples of jsplumb-related functionality

Join two divs

<div id="item1" class="item1"></div>
<div id="item2" class="item2"></div>
Copy the code
instance.ready(() = > {
  instance.connect({
    source: 'item1'.target: 'item2'.endpoint: 'Dot'
  });
});
Copy the code

In a few lines of code, we have two divs linked together

Change the style of the wiring

JsPlumb offers three Flowchart options: Bezier (default besier curve), Straight (Straight line), Flowchart, StateMachine (StateMachine). We configure the wiring style using the Connector property:

instance.ready(() = > {
  instance.connect({
    source: 'item1'.target: 'item2'.endpoint: 'Dot'
    connector: 'Flowchart'
  });
});
Copy the code

Change the style of the endpoint

And what we see is that in the top pictures, the ends of the lines are all dots at the bottom. JsPlumb provides a number of parameters that allow us to modify the style of the endpoint. Here are some of them to see the effect:

instance.ready(() = > {
  instance.connect({
    source: 'item1'.target: 'item2'.endpoint: 'Rect'.Rectangle (Blank); // Rectangle (Blank); // Rectangle (Blank)
    connector: 'Straight'.anchors: ['Right'.'Left'].// Corresponding to the endpoint position of source and target respectively, the options are Left, Right, Top, Bottom
    endpointStyle: {
      fill: '#1879ff'.// Color of the outer circle of the endpoints
      outlineStroke: '#ff4400'// Endpoint fill color}}); });Copy the code

Add direction & condition to the line

Since jsPlumb is often used to draw flowcharts, the direction and conditions of the line are of course essential. Now we use overlay parameters to add direction and conditions to the line:

instance.ready(() = > {
  instance.connect({
    source: 'item1'.target: 'item2'.endpoint: 'Dot'.connector: 'Straight'.anchors: ['Right'.'Left'].overlays: [['Arrow',
        {
          width: 10.// The width of the arrow tail
          length: 8.// Distance from the tail of the arrow to the head
          location: 0.6.// In the arrow position, 0 to 1 is recommended
          direction: 1.// Direction, default is 1 (forward), optional -1 (backward)
          foldback: 0.623 // The retracting Angle, that is, the tail Angle, is 0.623 by default, when 1, is positive triangle}], ['Label',
        {
          label: Conditions of '1'.location: 0.4.// Label specifies the position on the line between 0 and 1
          cssClass: 'aLabel' // The class name of the wire can be customized}}]]); });Copy the code

Setting a node can be dragged

JsPlumb provides draggable methods that allow us to make dom nodes on the page dragable (note that dragable element positioning must be absolute).

instance.draggable('item2', {
    containment: 'parent'.// Drag the element's parent ID
    stop(el) {// The callback after the drag ends
      console.log('Drag end:', el); }});Copy the code

Drag a line from the element

JsPlumb provides two ways to add endpoints to an element. The code looks like this:

addEndpoint
instance.addEndpoint('item1', {
    anchor: 'Top'.isSource: true.isTarget: false.maxConnections: -1 // Maximum number of connections, -1 is unlimited
});
Copy the code

makeSource makeTarget
instance.makeSource('item1', {
    anchor: 'Top'.isSource: true.isTarget: false
});
Copy the code

conclusion

Article mentioned function is only a small part of the jsPlumb, custom of endpoint events binding, etc., not introduce one by one here, you can consult the official document (docs.jsplumbtoolkit.com/toolkit/cur…). To learn.