JointJS是一個開源的前端流程圖框架，基于SVG進(jìn)行繪制策治，目前的版本是2.2.1，同時該項目已經(jīng)開始了商業(yè)化運作兰吟，商業(yè)產(chǎn)品名稱是Rappid通惫，因此開源代碼實際上功能更新已經(jīng)比較少了，只是在維護(hù)bug混蔼，新的功能都被添加到了商業(yè)產(chǎn)品中了履腋。
從今天一天的研究來看，這個框架的擴(kuò)展性還是非常強(qiáng)的惭嚣，但是由于商業(yè)化的考慮遵湖，基本上有價值的擴(kuò)展都需要自己來開發(fā)，但對于免費的項目來說晚吞，你還能要求什么呢延旧？
好了，廢話少說槽地，先上個圖垄潮，描述一下業(yè)務(wù)需求烹卒，然后看看如何實現(xiàn)吧。
業(yè)務(wù)需求包括：
- 自動布局
- 上下文菜單（空白/對象）
- 裝飾（動態(tài)修改屬性）
- 點選對象（click事件）
- 對象的moveover事件顯示擴(kuò)展工具
自動布局已經(jīng)被集成到2.2.1版本中了弯洗，只需要執(zhí)行下面這行代碼就可以了
joint.layout.DirectedGraph.layout(graph, { rankDir: "LR", setLinkVertices: false });
屬性rankDir定義了布局的方向，缺省是TB（從上至下）逢勾，這里設(shè)置為LR（從左至右）牡整。
點選對象的實現(xiàn)過程有點曲折，最后發(fā)現(xiàn)是用的jQuery版本問題溺拱，需要使用jQuery 3.3.1以上版本逃贝。
定義對cell:pointerclick事件的回調(diào)
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的類型進(jìn)行識別，并分別觸發(fā)對應(yīng)的事件迫摔。按道理沐扳，這個功能應(yīng)該集成在框架里，但看來維護(hù)團(tuán)隊也懶得弄了句占，回頭有時間沪摄，我提交一個PR看看，不知道有沒有用纱烘。
我在element:pointerclick事件中設(shè)置了對象的背景色和邊框顏色杨拐，在blank:pointerclick事件中重置了所有對象的顏色，這樣就實現(xiàn)了點選的外在表現(xiàn)擂啥，實際上還需要在內(nèi)部保存當(dāng)前選中對象的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);
});
今天先弄了這兩個功能哺壶，明天繼續(xù)屋吨。
