基於HTML5的拓撲圖編輯器（2）

繼續來講編輯器的需求， 前面介紹了拖拽建立節點、以及連線的方法，並加入到了其後的 Qunee 類庫，實際應用中須要更多功能，Qunee 的拓撲圖編輯器也在逐漸完善，一方面增長多種編輯交互，一方面提供數據導入導出，同時也在摸索編輯器的總體界面設計和前端開發框架

拖拽建立節點

延續以前提供的功能，增長更多可配置選項（可設置節點類型，樣式和屬性），支持按住shift快捷鍵，直接拖入到分組內

新增多種交互模式

建立連線交互

Q.Consts.INTERACTION_MODE_CREATE_SIMPLE_EDGE = "create.simple.edge";
Q.Consts.INTERACTION_MODE_CREATE_EDGE = "create.edge";
Q.Consts.INTERACTION_MODE_CREATE_SHAPE = "create.shape";
Q.Consts.INTERACTION_MODE_CREATE_LINE = "create.line";

能夠直接從一個節點拖拽鏈接到另外一個節點，也能夠建立中間拐點的連線

graph.interactionMode = Q.Consts.INTERACTION_MODE_CREATE_EDGE;

連線編輯

普通模式下，設置 graph 爲可編輯，此時點擊可編輯的圖元進入編輯模式

graph.editable = true;
graph.interactionMode = Q.Consts.INTERACTION_MODE_DEFAULT;

建立多邊形

graph.interactionMode = Q.Consts.INTERACTION_MODE_CREATE_SHAPE;

建立多線段

graph.interactionMode = Q.Consts.INTERACTION_MODE_CREATE_LINE;

編輯多邊形

graph.editable = true;
graph.interactionMode = Q.Consts.INTERACTION_MODE_DEFAULT;

調整寬高

改進了Q.ResizeInteraction

移動拐點

增長了拐點編輯交互器（Q.PointsInteraction），默認編輯狀態時，雙擊多邊形進入編輯模式

右鍵菜單交互

經過右鍵菜單（移動平臺下能夠選擇長按），點擊在不一樣類型的圖元上，彈出不一樣的設置菜單項

graph.html.oncontextmenu = function(evt){
    Q.stopEvent(evt);
    showMenu(evt, graph);
}
graph.addCustomInteraction({
    onstart: function (evt) {
        menu.hide();
    }
});

數據導入導出

經過擴展，實現exportJSON和parseJSON方法，實現對拓撲圖的導入導出，便於存儲

在線示例演示

http://demo.qunee.com/editor/Editor1.6.html