gojs库学习记录(二)

接上文。目前有一个具体的项目需求是需要可视化展示一个业务的流程，因为不涉及到可视化生成流程，只是展示，相对简单。
主要是基于它的 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地址