前端流程图jsplumb学习笔记
2021-07-20 07:09
标签：bsp pid win dma ddc record window str fill 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、简单连接 （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
var sourceUUID = nodeId + "-" + sourceAnchors[i]; instance.addEndpoint(nodeId, { anchor: sourceAnchors[i], uuid: sourceUUID }); } for (var j = 0; 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学习笔记 标签：bsp pid win dma ddc record window str fill 原文地址：http://www.cnblogs.com/taoshengyujiu/p/7056254.html 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}]
] });