Use jsplUMb to draw a link diagram

Effect of the project

The charting tools on the market today are those

• G6: is a graph visualization engine. It provides diagram rendering, layout, analysis, interaction, animation and other diagram visualization of the basic capabilities. It aims to make relationships transparent and simple. Gives users Insight into relational data.
• graphviz

Graphic visualization is a way to represent structural information as abstract graphs and network diagrams. Automatic graphic rendering has many important applications in visual interfaces in software engineering, database and Web design, the Web, and many other areas.

What is jsplumb and what can it do?

• jsplumbIs a charting plug-in that draws a chain of flowcharts, similar to Visio’s application or workflow designer. Because the chart items and all the parameters of the connection are very finely controlled, you can draw any type of chart you can think of. And it’s completely free and provided under an MIT license. You can directly fromjsPlumbGithub download framework. The project is mainly made up ofSimon PorrittHe works as a web developer in Sidney, Australia.jsPlumbBy him actively develop.

A simple introduction to Jsplumb

1. Basic concepts

• Souce source node

• Target Target node

• The Anchor Anchor

  A location, a place to put an endpoint, relative to the source of an element, you don’t have to hard-code it yourself to create it, jsPlumb gives you all the functionality, you just have to create it as you want. It has no visual display, just a logical location that can be referenced using the id of the anchor, which jsPlumb supports.

• The Endpoint Endpoint

A visual representation of one end of the link that you can create and link to; You can make them drag-and-drop enabled, or you can create them directly when creating links using jsplumb.connect ().

• The Connector to connect

A line that links two elements, a visual representation of the page, and jsPlumb has three default types :Bezier curves, lines, and flowchart linkers. You don’t have to deal with connectors; you just define them when you need to use them.

2. Basic demo

2.1. Connect the two nodes

Demo: wdd.js.org/jsplumb-chi…

The jsplumb. ready method is similar to jquery’s ready method. Jsplumb. connect is used to establish a connection

<div id="diagramContainer"> <div id="item_left" class="item"></div> <div id="item_right" class="item" style="margin-left:50px;" > < / div > < / div > < script SRC = "https://cdn.bootcss.com/jsPlumb/2.6.8/js/jsplumb.min.js" > < / script > < script > / * global jsPlumb */ jsPlumb.ready(function () { jsPlumb.connect({ source: 'item_left', target: 'item_right', endpoint: 'Dot' }) }) </script>Copy the code

Jsplumb. connect(config) Return Connection

parameter	The parameter types	Whether must	instructions
source	String,Object,Endpoint	is	The id of the line source, which can be AN ID, Element, or Endpoint
target	String,Object,Endpoint	is	The id of the connection target, which can be an ID, Element, or Endpoint
endpoint	String	optional	Endpoint type, shape

>>> Connect method details

2.2. Other parameters of the connection

Demo: wdd.js.org/jsplumb-chi…

You can use the connector to set the shape of the line, such as a line or curve. Anchor sets the location of the anchor point.

There are four styles of jsplumb wiring

• Bezier: Bezier curve
• Flowchart: a process line with a 90-degree turning point
• StateMachine: the state machine
• Straight: a straight line

<div id="diagramContainer"> <div id="item_left" class="item"></div> <div id="item_right" class="item" style="left:150px;" > < / div > < / div > < script SRC = "https://cdn.bootcss.com/jsPlumb/2.6.8/js/jsplumb.min.js" > < / script > < script > / * global jsPlumb */ jsPlumb.ready(function () { jsPlumb.connect({ source: 'item_left', target: 'item_right', endpoint: 'Rectangle', connector: ['Bezier'], anchor: ['Left', 'Right'] }) jsPlumb.draggable('item_left') jsPlumb.draggable('item_right') }) </script>Copy the code

2.3. Style the connections

Demo: wdd.js.org/jsplumb-chi…

For example, set the wire to different colors, different thickness and so on.

jsPlumb.connect({
  source: 'item_left',
  target: 'item_right',
  paintStyle: { stroke: 'lightgray', strokeWidth: 3 },
  endpointStyle: { fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2 }
}, common)
Copy the code

2.4. Add arrows to connections

Demo: wdd.js.org/jsplumb-chi…

The arrowheads were actually set up by setting overlays, both the length and width of the arrowhead as well as the position of the arrowhead, with location 0.5 indicating the arrowhead was centered and location 1 indicating the arrowhead was positioned at the end of the line. Multiple arrows can be added to a single line.

Overlays were also an important concept, and could be understood as covering layers. The mask layer can set more than just arrows.

There are five types of overlays, outlined below. The specific method of use see jsplumbtoolkit.com/community/d…

• ArrowA configurable arrow
• LabelTags that display text information on links
• PlainArrowPrimitive type of arrow
• DiamondDiamond arrow
• CustomCustom type

jsPlumb.connect({ source: 'item_left', target: 'item_right', paintStyle: { stroke: 'lightgray', strokeWidth: 3 }, endpointStyle: { fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2 }, overlays: [ ['Arrow', { width: 12, length: 12, location: 0.5}]]}, common)Copy the code

2.5. Limit node drag area

Demo: wdd.js.org/jsplumb-chi…

By default, nodes can be dragged outside the zone. If you want to drag only inside the zone, you need to set up containment so that the nodes can only move within the fixed zone.

jsPlumb.setContainer('area-id')
Copy the code

2.6. Add styles to endpoints

Demo: wdd.js.org/jsplumb-chi…

Change the Style of a link or endpoint by setting various * styles.

jsPlumb.ready(function () {
      jsPlumb.setContainer('diagramContainer')

      var common = {
        isSource: true,
        isTarget: true,
        connector: 'Straight',
        endpoint: 'Dot',
        paintStyle: {
          fill: 'white',
          outlineStroke: 'blue',
          strokeWidth: 3
        },
        hoverPaintStyle: {
          outlineStroke: 'lightblue'
        },
        connectorStyle: {
          outlineStroke: 'green',
          strokeWidth: 1
        },
        connectorHoverStyle: {
          strokeWidth: 2
        }
      }

      jsPlumb.addEndpoint('item_left', {
        anchors: ['Right']
      }, common)

      jsPlumb.addEndpoint('item_right', {
        anchor: 'Left'
      }, common)

      jsPlumb.addEndpoint('item_right', {
        anchor: 'Right'
      }, common)
    })
Copy the code

2.7. Add click events to links: Click to delete links

Demo: wdd.js.org/jsplumb-chi…

Jsplumb.bind ('click', function (conn, originalEvent) {if (window.prompt(' are you sure to delete the link that was clicked? Enter 1 ok ') === '1') {jsplumb.detach (conn)}})Copy the code

Actual project

This project achieves the same effect as the first picture animation, and this is just a warm-up, familiarizing yourself with some basic concepts, and some basic configurations. Project address: github.com/forestxieCo…

Reference documentation

docs.jsplumbtoolkit.com/