首页 > 代码库 > 前端流程图jsplumb学习笔记
前端流程图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、项目实践
详情参见市安监
前端流程图jsplumb学习笔记