基於HTML5的拓撲圖編輯器 - Graph.Editor

時間 2019-11-08

標籤基於 html5 html 拓撲編輯器 graph.editor graph editor 欄目 HTML5 简体版

原文原文鏈接

拓撲圖編輯器介紹

拓撲圖編輯器項目 - Graph.Editor 正式發佈到github了，歡迎訪問、提取和貢獻代碼css

項目地址：https://github.com/samsha/graph.editor
在線演示：http://demo.qunee.com/editor/

Graph.Editor是一款基於HTML5技術的拓補圖編輯器，採用jquery插件的形式，是Qunee圖形組件的擴展項目，旨在提供可供擴展的拓撲圖編輯工具，拓撲圖展現、編輯、導出、保存等功能，此外本項目也是學習HTML5開發，構建WebAPP項目的參考實例。html

數據可視化是一件有趣的工做，冰冷的數據變成美觀的圖形，如同命令行之於Mac OS X圖形界面的，傳統的圖形組件以圖表（Chart）居多，很多優秀的開源或者商業的做品，
好比d3js, echarts, highcharts，而拓撲圖、流程圖組件相對少一些，知名的有yfiles，本項目則基於Qunee圖形組件，是Qunee的擴展項目，旨在爲客戶提供可供擴展的拓撲圖編輯工具，
提供拓撲圖展現、編輯、導出、保存等功能，此外本項目也是學習HTML5開發，構建WebAPP項目的參考實例。前端

注意：本項目內核使用Qunee for HTML5，Qunee自己是一個商業產品，默認僅限本機（localhost）使用，非商業用途能夠申請免費受權，商業用途請購買相應受權，官網：qunee.comnode

在線演示：

請訪問此地址查看效果：http://demo.qunee.com/editor/jquery

入門示例

Hello Graph.Editorgit

<!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和cssgithub

實際代碼部分，採用了jquery的寫法，以下:npm

$('#editor').graphEditor({
    callback: 回調函數,
    data: json數據地址,
    images: 拖拽圖標信息
})

本例中，經過回調函數獲取editor.graph對象，並建立了兩個節點和一條連線json

更多用法請查看其餘demo和代碼gulp

運行效果

準備工做

項目用到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/