前端流程图之JointJS（一）

JointJS是一个开源的前端流程图框架，基于SVG进行绘制，目前的版本是2.2.1，同时该项目已经开始了商业化运作，商业产品名称是Rappid，因此开源代码实际上功能更新已经比较少了，只是在维护bug，新的功能都被添加到了商业产品中了。

从今天一天的研究来看，这个框架的扩展性还是非常强的，但是由于商业化的考虑，基本上有价值的扩展都需要自己来开发，但对于免费的项目来说，你还能要求什么呢？

好了，废话少说，先上个图，描述一下业务需求，然后看看如何实现吧。

基本的流程图

业务需求包括：

1. 自动布局
2. 上下文菜单（空白/对象）
3. 装饰（动态修改属性）
4. 点选对象（click事件）
5. 对象的moveover事件显示扩展工具

自动布局已经被集成到2.2.1版本中了，只需要执行下面这行代码就可以了

joint.layout.DirectedGraph.layout(graph, { rankDir: "LR", setLinkVertices: false });

属性rankDir定义了布局的方向，缺省是TB（从上至下），这里设置为LR（从左至右）。

点选对象的实现过程有点曲折，最后发现是用的jQuery版本问题，需要使用jQuery 3.3.1以上版本。

定义对cell:pointerclick事件的回调

paper.on('cell:pointerclick', function(cellView) {
    var isElement = cellView.model.isElement();
    var message = (isElement ? 'Element' : 'Link') + ' clicked';
    console.log(message);
    cellView.trigger((isElement ? 'element' : 'link') + ":pointerclick", cellView);
});

在这里可以对cell的类型进行识别，并分别触发对应的事件。按道理，这个功能应该集成在框架里，但看来维护团队也懒得弄了，回头有时间，我提交一个PR看看，不知道有没有用。

我在element:pointerclick事件中设置了对象的背景色和边框颜色，在blank:pointerclick事件中重置了所有对象的颜色，这样就实现了点选的外在表现，实际上还需要在内部保存当前选中对象的id，这个在这里就不多说了。

paper.on('element:pointerclick', function(elementView) {
    resetAll(this);
    var currentElement = elementView.model;
    currentElement.attr('rect/stroke', 'orange')
    currentElement.attr('rect/fill', 'orange')
});
paper.on('blank:pointerclick', function() {
    resetAll(this);
});

今天先弄了这两个功能，明天继续。