基于HTML5技術的拓補圖編輯器：Graph.Editor
拓撲圖編輯器介紹
Graph.Editor是一款基于HTML5技術的拓補圖編輯器，采用jquery插件的形式，是Qunee圖形組件的擴展項目
數據可視化是一件有趣的工作，冰冷的數據變成美觀的圖形，如同命令行之于Mac OS X圖形界面的，傳統的圖形組件以圖表（Chart）居多，不少優秀的開源或者商業的作品， 比如d3js, echarts, highcharts，而拓撲圖、流程圖組件相對少一些，知名的有yfiles，本項目則基于Qunee圖形組件，是Qunee的擴展項目，旨在為客戶提供可供擴展的拓撲圖編輯工具， 提供拓撲圖展示、編輯、導出、保存等功能，此外本項目也是學習HTML5開發，構建WebAPP項目的參考實例。
注意：本項目內核使用Qunee for HTML5，Qunee本身是一個商業產品，默認僅限本機（localhost）使用，非商業用途可以申請免費授權，商業用途請購買相應授權，官網：qunee.com
在線演示：
請訪問此地址查看效果：http://demo.qunee.com/editor/
入門示例
Hello Graph.Editor
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Qunee</title>
<link rel=stylesheet href=http://demo.qunee.com/editor/libs/bootstrap/css/bootstrap.css>
<link rel=stylesheet href=http://demo.qunee.com/editor/libs/graph.editor/graph.editor.css>
</head>
<body class="layout">
<div id="editor" data-options="region:'center'"></div>
<script src="http://demo.qunee.com/editor/libs/js.js"></script>
<script src="http://demo.qunee.com/lib/qunee-min.js?v=1.8"></script>
<script src="http://demo.qunee.com/editor/libs/graph.editor/graph.editor.js"></script>
<script>
$('#editor').graphEditor({callback: function(editor){
var graph = editor.graph;
var hello = graph.createNode("Hello", -100, -50);
hello.image = Q.Graphs.server;
var qunee = graph.createNode("Qunee", 100, 50);
var edge = graph.createEdge("Hello\nQunee", hello, qunee);
graph.moveToCenter();
}});
</script>
</body>
</html>編輯器的基本示例相比Hello Qunee要復雜些，除了Qunee類庫外，還用到了一些第三方組件：jquery, bootstrap, layout.border, 此外就是Graph.Editor自身的類庫，這里我們引用在線的js和css
實際代碼部分，采用了jquery的寫法，如下:
$('#editor').graphEditor({
callback: 回調函數,
data: json數據地址,
images: 拖拽圖標信息
})本例中，通過回調函數獲取editor.graph對象，并創建了兩個節點和一條連線
更多用法請查看其他demo和代碼
運行效果
準備工作
項目用到nodejs，使用bower包管理，用到Gulp相關的插件打包和發布
本項目使用以下工具：
- 安裝nodejs
- 安裝bower - 包管理
- 安裝Gulp - 任務自動管理工具
開始開發環境
切換到項目目錄，然后運行下面的命令，完成開發環境的安裝
npm install
前端第三方包
用到jquery, bootstrap, layout.border，使用bower下載這些包到bower_components目錄
bower install
項目結構
項目主要代碼在app目錄，其中腳本代碼在app/src/內，
app/
--src/
--common/ 編輯器擴展插件
--Exportpane.js 圖片導出模塊
--JSONSerializer.js 數據序列化模塊
--PopupMenu.js 右鍵菜單模塊
--Toolbar.js 工具欄模塊
--images/
--graph.editor.js 拓撲圖編輯器插件
--graph.editor.css
--scripts/ 示例腳本
--images/ 示例資源
--data/ 示例資源
--index.html 編輯器主頁面
--demo.html 編輯器插件示例
dist/ 輸出目錄
bower_components/ bower第三方包目錄，運行bower install 后自動生成
node_modules/ 開發環境相關包目錄，運行npm install后自動生成編譯打包
gulp
輸出目錄結構
dist/
data/
images/
libs/
bootstrap/ 第三方類庫bootstrap樣式和資源目錄
graph.editor/ graph.editor類庫
images/
graph.editor.css
graph.editor.js
js.js 第三方類庫（jquery, bootstrap, layout.border）
scripts/
styles/
index.html 編輯器主要的類庫文件位于libs/graph.editor/, 第三方類庫（jquery, bootstrap, layout.border）位于libs/js.js，bootstrap樣式和資源目錄位于libs/bootstrap/
其他示例
