No more words, first on the renderings:

The demo address:Code – roadfly. Making. IO/jsplumb – vue…

Currently supported functions:

  • Drag and drop nodes (1. Drag the left node into the canvas and add a node; 2. 2. Drag the mobile node on the drawing cloth)
  • Add cables between nodes
  • Canvas supports zoom (Wheel Zoom, +, -Zoom)
  • The overall translation of the canvas
  • Node and line deletion (node right-click deletion, line double-click deletion)
  • Node editing (Double-click the node to edit the node name)
  • Align nodes with guide lines

Subsequent functions:

  • Box selection function, press Ctrl, you can select
  • Add swimlane function (swimlane adjustable size)

The project originated from an internal project of the company, and there was a need for flowchart drawing. Before this, also have done a similar demand, using g6-Editor, but because the G6 official document is too rough, and the high version is not high source, the whole process is painful, most of the functions are their own bit by bit to try out. After analyzing and comparing the requirements for the second time, I gave up G6 and chose JSPLumb. In conclusion, jSPLumb has the following advantages:

  1. Free and provided under an MIT license. The framework can be downloaded directly from the jsPlumb Github website or installed via NPM. (The jsplumb website offers both free and paid versions, but the free version is good enough for my needs.)
  2. Nodes are drawn by themselves, with controllable styles and high flexibility. What do you want to do? What do you want to do
  3. Chart items and connection parameters are finely controlled

Preliminary preparation:

  1. Install dependencies

    npm install jsplumb –save npm install panzoom –save

Introduce in the corresponding page:

import { jsPlumb } from "jsplumb"
import panzoom from "panzoom"
Copy the code

Among them, Panzoom can realize the function of scaling and panning the canvas.

2. Initialize the canvas

In fixNodesPosition, the whole flow chart can be displayed in the center every time the data is loaded through the calculation of node position. You can’t instantiate jsplumb until all the nodes have been rendered, otherwise you will have problems finding the nodes.

mounted() { this.jsPlumb = jsPlumb.getInstance(); this.fixNodesPosition() this.$nextTick(() => { this.init(); }); {} the init () this. JsPlumb. Ready (() = > {/ / import default configuration this. JsPlumb. ImportDefaults (enclosing jsplumbSetting); This.jsplumb.bind ("beforeDrop", evt => {let res = () => {}) // This can be added to verify whether a connection is created, if false is returned; Return res}) this.jsplumb.bind ("connection", evt => {this.addline (evt)}); This.jsplumb.bind (" dblClick ",(conn, originalEvent) => {this.confirmdelline (conn)}) This.jsplumb.bind ("connectionDetached", evt => {this.deleline (evt)}) this.loadeasyflow (); // will cause the entire jsPlumb to be redrawn immediately. this.jsPlumb.setSuspendDrawing(false, true); }); this.initPanZoom(); },Copy the code

During initialization, you can add verification events for actions such as cable creation and deletion.

JsplumbSetting for some basic configurations of jsplUMb:

JsplumbSetting = {grid: [10, 10], // minimum distance when the node is moving // Anchors: [ "TopCenter", "RightMiddle", "BottomCenter", "LeftMiddle" ], Container: "Flow ", canvas container ID, StateMachine, Flowchart, there are four default types of Flowchart: Bezier, Straight, Flowchart, State Machine Connector: Diagram, flowsheet, cornerRadius: 5, respectStubs: true, stub: 5}], // mouse can't drag delete line: False, // DeleteEndpointsOnDetach: false, // Endpoint of the line // Endpoint: ["Dot", {radius: 5}], Endpoint: ["Rectangle", {height: 10, width: 10}] EndpointStyle: {fill: "rgba(255,255,255,0)", outlineWidth: 1}, LogEnabled: false, // Turn on jsPlumb internal logging // PaintStyle: {stroke: "#409eff", strokeWidth: 2}, HoverPaintStyle: Contorted: // contorted: // contorted: // contorted: // contorted: // contorted: // contorted: // contorted: 1 } ] ], RenderMode: "svg"}Copy the code

Git address: github.com/Code-RoadFl…

Reference: github.com/wangduandua…

                   jsplumbtoolkit.com

Shakespeare said that a comrade who does not like after watching is not a good comrade