Front-End Flowchart Jsplumb Learning Notes

1, this blog is very good, the other two are official website documents

Http://www.cnblogs.com/leomYili/p/6346526.html

Https://jsplumbtoolkit.com/community/apidocs/classes/Connector.html

Https://jsplumbtoolkit.com/community/doc/connections.html#draganddrop

2, Jsplump flowchart draw dashed line with "DashStyle": "2 4"

Paintstyle: {

Linewidth:3,

Strokestyle:color,

"DashStyle": "2 4"

}

3. Simple connection

Jsplumb.connect ({

Source: "Window4",

Target: "Window5",

anchors:["BottomRight", "TopLeft"],

Paintstyle:{strokewidth:7,stroke: ' RGB (131,8,135) '},

hoverpaintstyle:{Stroke: "RGB (0, 0, 135)"},

endpointstyle:{width:40, height:40},

Endpoint: "Rectangle",

connector:["Flowchart", {midpoint:0.8}],

Overlays:[

[  "label",  {label:"FOO",  ID:"label",  location:0.7

}]

]

});

(1) connector:["Flowchart", {midpoint:0.8}], set the position of the polyline refill,

0-1, the smaller the distance from the source endpoint, the closer

(2) Label location 0-1, the smaller the closer the source endpoint

(3) Configuration entries are name:["Type1", {option1:value,option2:value2}]

(4) anchors:[[0,0.5,-1, 0], "rightmiddle"], using the array to customize the anchor position,

[X,y,dx,dy],x and Y are the starting point of the upper left corner of the noder, increasing downward or right to 1. DX, dy means the component of the X and y-direction vectors out of the connecting line, and the Dx/dy combination defines an angle, with a value of 1 to 1. -1 is left, up, and 1 is right and down. 0 for vertical and horizontal orientation, respectively.

4. Connection. Connector, connector cable is a component of the connector

5. Set connection connector style with CSS

Jsplumb.connect ({

SOURCE:"Someelement",

Target:"Someotherelement",

CssClass: "RedLine dashline",

});

Css:

Svg.redline Path {

stroke:red;

Stroke-width:3;

}

Svg.dashline Path {

Stroke-dasharray:5;

}

Note SVG dashed style rule reference

1190000007309718

6, dynamic switching connection Paintstyle

Instance.registerconnectiontype ("Black", {

Paintstyle: {

Strokewidth:2,

Stroke: "#000000",

Joinstyle: "Round",

Outlinestroke: "White",

Outlinewidth:2,

"DashStyle": "2 4"

},

});

var AA = Instance.connect ({

UUIDs: ["Window1bottomcenter", "Window2topcenter"],

Editable:true,

Type: "Black"

});

or Aa.settype ("black")

7, Batch join connection

Jsplumb.ready (function () {

var color = "#0070c0";

var instance = jsplumb.getinstance ({

Connector: ["Straight", {curviness:2}],

Paintstyle: {

Strokewidth:2,

Stroke: "#0070c0",

Joinstyle: "Round",

Outlinewidth:2

},

Endpointstyle: {radius:1, Fillstyle:color},

Container: "Canvas"

});

var _addendpoints = function (NodeId, sourceanchors, targetanchors) {

for (var i = 0; i < sourceanchors.length; i++) {

var sourceuuid = nodeId + "-" + sourceanchors[i];

Instance.addendpoint (NodeId, {

Anchor:sourceanchors[i], Uuid:sourceuuid

});

}

for (var j = 0; J < Targetanchors.length; J + +) {

var targetuuid = nodeId + "-" + targetanchors[j];

Instance.addendpoint (NodeId, {anchor:targetanchors[j], uuid:targetuuid});

}

};

Instance.batch (function () {

var Arrowcommon = {foldback:0.7, fillstyle:color, width:14},

overlays = [

["Arrow", {location:1}, Arrowcommon,],

];

_addendpoints ("Nodesiteinspectionrecordmaincheck", ["Rightmiddle"], []);

_addendpoints ("Nodecorrectioninstructionbook", ["Rightmiddle"], ["Leftmiddle"]);

_addendpoints ("Nodesiteinspectionrecordrecheck", ["Rightmiddle"], ["Leftmiddle"]);

_addendpoints ("Nodecorrectivereviewopinions", ["Rightmiddle"], ["Leftmiddle"]);

_addendpoints ("Nodearchive", [], ["Leftmiddle"]);

Instance.connect ({uuids: ["Nodesiteinspectionrecordmaincheck-rightmiddle", " Nodecorrectioninstructionbook-leftmiddle "], overlays:overlays});

Instance.connect ({uuids: ["Nodecorrectioninstructionbook-rightmiddle", " Nodesiteinspectionrecordrecheck-leftmiddle "], overlays:overlays});

Instance.connect ({uuids: ["Nodesiteinspectionrecordrecheck-rightmiddle", " Nodecorrectivereviewopinions-leftmiddle "], overlays:overlays});

Instance.connect ({uuids: ["Nodecorrectivereviewopinions-rightmiddle", "Nodearchive-leftmiddle"], Overlays: Overlays});

});

Jsplumb.fire ("jsplumbdemoloaded", instance);

});

8. Configuring events and label Location content configuration

Label crimping Problem: (1) modify top with jquery. Prevent labels from connecting horizontally

var flowchartwindow1_flowchartwindow2_connection = Jsplumb.connect ({

});

Flowchartwindow1_flowchartwindow2_connection.setlabel ({

location:0.2,

CssClass: "Connection-label"

});

var label = Flowchartwindow1_flowchartwindow2_connection.getlabeloverlay (). Canvas;

var origintop = $ (label). Position (). Top;

$ (label). CSS ("top", originTop-30 + "px");

(2) and set the marginleft of the label to more than half the width, avoid the label to press the vertical connection

. Remarkslabel {

Color: #ff0000;

font-size:8px;

width:80px;

height:40px;

margin-left:45px;

}

1, diamond node, with CSS implementation, background image

2, label next to the node, add label logo on Nodetext side

3. Background connector (connection) data Model collation

(1) Sourcenodeid string source node ID, to be consistent with the page ID;

(2) Targetnodeid string target Node ID, to be consistent with the page ID;

(3) Connectioncssclass string to be consistent with the CSS name class of the page;;

(4) Anchors: Two types: [[0,0.3,-1, 0], "rightmiddle"] and ["Leftmiddle", "Rightmiddle"]

Uniformly made of numerical [[0, 0.3,-1, 0], [0, 0.3,-1, 0]]

(5) connectormidpoint:double Vertex scale position

(6) Labeltext:string Side Label Content

(7) Labellocation:double the location of the label on the connection

Jsplumb.connect ({

Source: "FlowchartWindow1",

Target: "FlowchartWindow2",

CssClass: "Redline Dashline",

anchors:[[0,0.3,-1, 0], "rightmiddle"],

connector:["Flowchart", {midpoint:0.9}],

Overlays: [

["Label", {

Label: "Superior case of higher case superior case",

ID: "Label",

location:0.6

}]

]

});

4. Backend Node Data model

{

"NodeId": "Nodesiteinspectionrecordmaincheck",

"SystemName": "Siteinspectionrecord",

"Writestatecssclassname": "Finished",

"Missionid": "574a979f-4471-4441-a6b3-493b3f6479fa",

"Iswritedbyapp": "false",

"Hasattachmentfiles": "True"

},

7. Connection.setlabel ({

Label: "Superior case of higher case superior case",

location:0.8,

CssClass: "Connection-label"

});

8, Jsplumb.select (). addclass ("Dashline");

Get connector Add CSS Class

9, Anthor common values

Rightmiddle {1, 0.5, 1, 0}

leftmiddle{0, 0.5,-1, 0},

bottomcenter{0.5, 1, 0, 1},

topcenter{0.5, 0, 0,-1}

Right-left {{1, 0.5, 1, 0},{0, 0.5,-1, 0}}

Next {{0.5, 1, 0, 1},{0.5, 0, 0,-1}}

10. Project Practice

For details, see the City safety supervisor

Front-End Flowchart Jsplumb Learning Notes