前端流程图jsplumb学习笔记

1、这篇博客很好,另外两个是官网文档

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流程图画虚线用"dashstyle": "2 4"

PaintStyle: {

lineWidth: 3,

strokeStyle: color,

"dashstyle": "2 4"

}

3、简单连接

 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}],设置折线抓点的位置，

0-1，越小离源端点越近

(2)label location 0-1, 越小离源端点越近

(3)配置项写法都是name:[“type1”,{option1:value,option2:value2}]

（4）anchors:[[ 0,0.5, -1, 0 ],"RightMiddle"], 用数组自定义anchor位置，

[x,y,dx,dy],x和y为以noder的左上角为起点，向下或向右增加到1。dx、dy指连接线出去的x、y方向矢量的分量，dx/dy组合定义出成一个角度，取值-1到1。-1为向左，向上，1为向右和向下。0分别为垂直和水平方向。

4、 Connection.连接器， Connector连接线是连接器的一个组成要素

5、用css设置connection连接器样式

jsPlumb.connect({

source:"someElement",

target:"someOtherElement",

cssClass: "redLine dashLine",

});

CSS:

svg.redLine path {

stroke: red;

stroke-width: 3;

}

svg.dashLine path {

stroke-dasharray: 5;

}

注svg虚线样式规则参照

https://segmentfault.com/a/1190000007309718

6、动态切换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"

});

或aa.setType(“black”)

7、批量加入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、配置事件以及label位置内容配置

label压线问题:（1）用jquery修改top。避免label压住水平方向的连线

var flowchartWindow1_flowchartWindow2_connection = jsPlumb.connect({

});

flowchartWindow1_flowchartWindow2_connection.setLabel({

label: "上级立案上级立案上级立案",

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）而且将label的marginleft设置成width的一半多点，避免label压住垂直方向的连线

.remarksLabel {

color: #ff0000;

font-size: 8px;

width: 80px;

height: 40px;

margin-left: 45px;

}

1、 菱形节点，用css实现，背景图片

2、 节点旁边的标注，在nodetext边添加label标识

3、 后台连接器（connection）数据模型整理

(1)sourceNodeId string 源节点id，要与页面的id一致;

(2)targetNodeId string 目标节点id，要与页面的id一致;

(3)ConnectionCssClass string要与页面的css名类一致;;

(4)anchors:两种类型：[[ 0,0.3, -1, 0 ],"RightMiddle"]和[“LeftMiddle”,"RightMiddle"]

统一做成数值型的[[ 0,0.3, -1, 0 ], [ 0,0.3, -1, 0 ]]

(5)ConnectorMidpoint: double折点比例位置

(6)LabelText：string 连旁标签内容

(7)LabelLocation:double 标签在连线上的位置

jsPlumb.connect({

source: "flowchartWindow1",

target: "flowchartWindow2",

cssClass: "redline dashline",

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

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

overlays: [

["Label", {

label: "上级立案上级立案上级立案",

id: "label",

location:0.6

}]

]

});

4、 后台节点数据模型

{

"NodeId": "nodeSiteInspectionRecordMainCheck",

"SystemName": "SiteInspectionRecord",

"WriteStateCssClassName": "finished",

"MissionId": "574A979F-4471-4441-A6B3-493B3F6479FA",

"IsWritedByApp": "false",

"HasAttachmentFiles": "true"

},

7、connection.setLabel({

label: "上级立案上级立案上级立案",

location:0.8,

cssClass:"connection-label"

});

8、 jsPlumb.select().addClass("dashLine");

获取连接器增加css类

9、anthor常用值

RightMiddle { 1, 0.5, 1, 0 }

LeftMiddle{ 0, 0.5, -1, 0 } ,

BottomCenter{ 0.5, 1, 0, 1 },

TopCenter{ 0.5, 0, 0, -1 }

右左{{ 1, 0.5, 1, 0 },{ 0, 0.5, -1, 0 } }

下上{{ 0.5, 1, 0, 1 },{ 0.5, 0, 0, -1 } }

10、项目实践

详情参见市安监