接上文。目前有一个具体的项目需求是需要可视化展示一个业务的流程，因为不涉及到可视化生成流程，只是展示，相对简单。
主要是基于它的 sample 库里的 sequentialFunction 示例 和 flowchart 示例。我们先来看最后的运行效果：
image.png
1. 结构分析
整个图还是分为 Node 和 Link，也就是点和线。其中 Node 又分为 开始、流程、审批和结束节点这4种类型。Link 分2种就是通过和驳回。
整个业务流程以开始节点开始，也结束节点终止。流程节点1指向流程节点2，但是中间加了一个审批节点。
目前业务流程设计比较简单，审批人通过审批就进入到下一个流程节点，驳回就直接返回到开始节点。
2. 代码分析
2.1 先看初始化 Diagram 代码：
let myDiagram = make(go.Diagram, "myDiagramDiv", {
layout: make(go.LayeredDigraphLayout, {direction: 90, layerSpacing: 10, setsPortSpots: true}),
"undoManager.isEnabled": true // enable undo & redo
});
这里用到一个新的布局 LayeredDigraphLayout (有向图), 这种布局比较适合做流程序列图。官方提供了一个可视化调整参数的示例 ，通过这个示例可以动态修改参数查看效果。
image.png
2.2 用到 nodeTemplateMap ，不同于前面的例子都是指定 nodeTemplate ,而是往 nodeTemplateMap 里添加一个模板对象，模板对象有自己的特殊标识，对应 model 里的关键字就是
category
myDiagram.nodeTemplateMap.add("start", makeCycleNode("green"));
myDiagram.nodeTemplateMap.add("end", makeCycleNode("orange"));
这里封装了一个 makeCycleNode 函数，主要是因为 start 节点和 end 节点除了背景色有差异外，其它都一样。
{
"key": "start",
"category": "start",
"text": "开始"
},
{
"key": "end",
"category": "end",
"text": "结束"
}
对应的 model 数据会根据 category 的不同来选择不同的 nodeTemplate。
同样对应也有 linkTemplateMap 。
2.3 双向绑定
前面的例子都是单向绑定也就是 model 发生变化引起 view 变化，gojs 支持显式的设置双向绑定
new go.Binding("text", "text").makeTwoWay()
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify)
也就是如果 TextBlock 支持编辑的话，在 view 上修改，对应的model也会变化。在这个例子里暂时用不到这个功能。
完整的示例代码参考 git地址
网友评论