基於HTML5的拓撲圖編輯器
拓撲圖編輯器介紹
拓撲圖編輯器專案 - Graph.Editor 正式釋出到github了，歡迎訪問、提取和貢獻程式碼
- 專案地址：https://github.com/samsha/graph.editor
- 線上演示：http://demo.qunee.com/editor/
Graph.Editor是一款基於HTML5技術的拓補圖編輯器，採用jquery外掛的形式，是Qunee圖形元件的擴充套件專案，旨在提供可供擴充套件的拓撲圖編輯工具， 拓撲圖展示、編輯、匯出、儲存等功能，此外本專案也是學習HTML5開發，構建WebAPP專案的參考例項。
資料視覺化是一件有趣的工作，冰冷的資料變成美觀的圖形，如同命令列之於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/
其他示例
