前端流程图jsplumb学习笔记
1、这篇博客很好，另外两个是官⽹⽂档
2、Jsplump流程图画虚线⽤"dashstyle": "2 4"
PaintStyle: {
lineWidth: 3,
strokeStyle: color,
"dashstyle": "2 4"
}
3、简单连接
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连接器样式
source:"someElement",
target:"someOtherElement",
cssClass: "redLine dashLine",
});
CSS:
stroke: red;
stroke-width: 3;
}
svg.dashLine path {
stroke-dasharray: 5;
}
注svg虚线样式规则参照
6、动态切换connection paintstyle
paintStyle: {
strokeWidth: 2,
stroke: "#000000",
joinstyle: "round",
outlineStroke: "white",
outlineWidth: 2,
"dashstyle": "2 4"
},
});
var aa = t({
uuids: ["Window1BottomCenter", "Window2TopCenter"],
editable: true,
type: "black"
});
或aa.setType(“black”)
7、批量加⼊connection
var color = "#0070c0";
var instance = Instance({
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"]);
});
jsPlumb.fire("jsPlumbDemoLoaded", instance);
});
8、配置事件以及label位置内容配置
label压线问题:（1）⽤jquery修改top。避免label压住⽔平⽅向的连线
var flowchartWindow1_flowchartWindow2_connection = t({
});
flowchartWindow1_flowchartWindow2_connection.setLabel({
label: "上级⽴案上级⽴案上级⽴案",
location: 0.2,
cssClass: "connection-label"
});
var label = flowchartWindow1_LabelOverlay().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 标签在连线上的位置
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、项⽬实践
详情参见市安监