基於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/