JointJS是一个开源的前端流程图框架，基于SVG进行绘制，目前的版本是2.2.1，同时该项目已经开始了商业化运作，商业产品名称是Rappid，因此开源代码实际上功能更新已经比较少了，只是在维护bug，新的功能都被添加到了商业产品中了。
从今天一天的研究来看，这个框架的扩展性还是非常强的，但是由于商业化的考虑，基本上有价值的扩展都需要自己来开发，但对于免费的项目来说，你还能要求什么呢？
好了，废话少说，先上个图，描述一下业务需求，然后看看如何实现吧。
基本的流程图
业务需求包括：
- 自动布局
- 上下文菜单（空白/对象）
- 装饰（动态修改属性）
- 点选对象（click事件）
- 对象的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);
});
今天先弄了这两个功能，明天继续。