基於 HTML5 Canvas 電信網路拓撲圖的快速搭建

圖撲軟體發表於2019-03-14
HTMLCanvas

前言

電信網路拓撲圖確實實用性很強，最近有個專案是基於這個的，為了寫得豐富一點，還加了自動佈局以及屬性欄部分，不過這個 Demo 真的寫得很用心，稍微改改都能直接運用到專案中去，還可以進行資料互動，總之希望能對大家有所幫助。

效果圖：
圖片描述

拓撲圖

從上面的效果圖中我們可以看到，整個頁面分為 3 個部分，左邊的 graphView 拓撲圖部分，右下角的 tableView 表格部分，以及右上角的 propertyView 屬性部分。我們先把整個場景劃分出來，然後再向各個部分來新增具體的內容：

gv = new ht.graph.GraphView();
var tablePane = new ht.widget.TablePane(gv.dm()); // 表格皮膚元件
propertyView = new ht.widget.PropertyView(gv.dm()); // formPane 是在 propertyView 裡的，所以要先定義

var rightView = new ht.widget.SplitView(propertyView, tablePane, 'v', 0.4); // 分割元件，v 分為上下層，比例為 0.4:0.6
rightView.getView().style.borderLeft = '1px solid #000';
var borderPane = new ht.widget.BorderPane(); // 邊框皮膚元件
borderPane.setRightView(rightView, 400); //設定 borderPane 右邊元件為 rightView，寬度為400
borderPane.setCenterView(gv); // 設定 borderPane 中間元件為 gv 
borderPane.addToDOM(); // 將 borderPane 元件新增進 body 中

上面程式碼中 new 出來的部分都是 HT 封裝好的元件，相當於“類”，這裡解釋一下 SplitView 分割元件，分割元件用於左右或上下分割兩個子元件， 子元件可為 HT 框架提供的元件，也可為 HTML 的原生元件，子元件以 position 為 absolute 方式進行絕對定位，這個元件中的引數分別為（左元件或上元件， 右元件或下元件，h 表示左右分割 v 表示上下分割，分割位置預設值為 0.5，如果設定值為 0~1 則按百分比分割，大於 1 代表左元件或上元件的絕對寬或高，小於 1 代表右元件或下元件的絕對寬或高）；還有 BorderPane 皮膚元件為佈局容器，可在上、下、左、右、中的五個區域位置擺放子元件， 子元件可為 HT 框架提供的元件，也可為 HTML 原生元件，子元件以 position 為 absolute 方式進行絕對定位。這裡我結合了 SplitView 和 BorderPane 將場景分成了三個部分。最後記得一定要將最終的佈局容器新增進 body 中或者任意一個 HTML 標籤中，這樣才能在介面上顯示，其中 addToDOM 的定義內容如下：

addToDOM = function(){   
    var self = this,
        view = self.getView(), // 獲取這個元件的底層 div 
        style = view.style; // 獲取底層 div 的樣式 style 屬性
    document.body.appendChild(view); // 將底層 div 新增進 body 中
    style.left = '0'; // HT 預設將元件都定義為決定定位 absolute，所以需要設定位置
    style.right = '0';
    style.top = '0';
    style.bottom = '0';      
    window.addEventListener('resize', function () { self.iv(); }, false);            
}

HT 的元件一般都會嵌入 BorderPane、SplitView 和 TabView 等容器中使用，而最外層的 HT 元件則需要使用者手工將 getView() 返回的底層 div 元素新增到頁面的 DOM 元素中，這裡需要注意的是，當父容器大小變化時，如果父容器是 BorderPane 和 SplitView 等這些 HT 預定義的容器元件，則 HT 的容器會自動遞迴呼叫孩子元件 invalidate 函式通知更新。但如果父容器是原生的 html 元素， 則 HT 元件無法獲知需要更新，因此最外層的 HT 元件一般需要監聽 window 的視窗大小變化事件，呼叫最外層元件 invalidate 函式進行更新。

場景建立完畢。為了顯示不同節點對應的屬性的不同，我們在拓撲圖上新增了七個節點：

function initModel(){
    var name = "裝置";
    var count = 0;
    var root = createNode(name + count++, name + (++count)); // 引數 1 為name，引數 2 為 tag
    root.setImage('./symbols/機房/伺服器.json');
    root.setName('伺服器');
    root.s('label.position', 3);
    gv.sm().ss(root); // 預設選中 root 節點

    for (var i = 0; i < 2; i++) {
        var iNode = createNode(name + count++, name + (++count)); // 引數 1 為 name，引數 2 為 tag
        createEdge(root, iNode);
        for (var j = 0; j < 2; j++) {
            var jNode = createNode(name + count++, name + (++count));
            createEdge(iNode, jNode);
        }
    }
}

createNode 函式的宣告如下：

function createNode(name, tag){ // 建立Node節點
    flag++;
    var node = new ht.Node();
    node.setName(name);
    node.setTag(tag);
    node.setImage('./symbols/機房/XX分系統.json');
    node.a('hidden', false); // 自定義屬性，可以控制 node.a('hidden') 來控制節點顯隱

    node.a('介面型別', 'SATA');
    node.a('顯示卡', 'Nvidia');
    if(flag % 2 === 0){
        node.a('介面型別', 'IDE');
        node.a('顯示卡', 'ATI');
    }
    node.s('label.position', 11);
    gv.dm().add(node); // 將節點新增進資料容器 DataModel 中

    node.tablePane1 = createTableView(serviceType, dataModel1); // 建立表格皮膚
    node.tablePane2 = createTableView(serviceSize, dataModel2);
    node.tablePane3 = createTableView(version, dataModel3);

    node.formPane1 = createFormPane(node.tablePane1); // 建立表單皮膚
    node.formPane1.title = '型別'; // 為了給後面 dialog 對話方塊的標題做準備
    node.formPane2 = createFormPane(node.tablePane2);
    node.formPane2.title = '記憶體';
    node.formPane3 = createFormPane(node.tablePane3);
    node.formPane3.title = '型號';

    if(flag % 3 === 0){
        node.formPane3.v('tag', '聯想（Lenovo）伺服器X3650M5 8871');
    }else{
        node.formPane3.v('tag', 'Lenovo IBM X3250 5458I21');
    }
    node.a('型號', node.formPane3.v('tag'));
    return node;
}

我們通過控制這個節點的 hidden 屬性，利用 graphView 中的可視過濾器 setVisibleFunc 函式來控制節點的顯隱：

gv.setVisibleFunc(function(data){
    if(data.a('hidden')){
        return false;
    }
    return true;
});

屬性皮膚

有了節點自然就需要顯示屬性了，加上下面的 tablePane 表格皮膚中的值，一共新增了七種屬性：

function createProperty(){ // 建立屬性
    propertyView.addProperties([
        {
            name: 'name', // 獲取 name 屬性，結合 accessType 屬性最終實現對節點屬性的存取，accessType 預設值為 null，如name為age，採用getAge()和setAge(98)的get/set或is/set方式存取(這邊name為name，所以通過 getName() 獲取)
            displayName: '名稱' // 設定屬性名的顯示文字值
        },
        {
            name: 'hidden', // 獲取 hidden 屬性
            displayName: '隱藏這個節點',
            accessType: 'attr', // 如 name 為 hidden，採用 getAttr('hidden') 和 setAttr('hidden', false) 的方式存取
            icon: 'images/alert.gif', // 設定屬性名左側顯示的圖示
            valueType: 'boolean', // 用於提示元件提供合適的 renderer 渲染 布林型別，顯示為勾選框
            editable: true // 設定該屬性是否可編輯
        },
        {
            name: 'grade',
            displayName: '型別',
            accessType: 'attr',
            drawPropertyValue: function(g, property, value, rowIndex, x, y, w, h, data, view){ // 自定義屬性值渲染函式
                var cb = function(v) {
                    data.a('grade', v);
                }
                return fillFormPane(data.formPane1, w, h, data.tablePane1, serviceType, cb);
            }
        },
        {
            name: 'number',
            displayName: '記憶體',
            accessType: 'attr',
            drawPropertyValue: function(g, property, value, rowIndex, x, y, w, h, data, view){
                var cb = function(v) {
                    data.a('number', v);
                }
                return fillFormPane(data.formPane2, w, h, data.tablePane2, serviceSize, cb);
            }
        },
        {
            name: '介面型別',
            accessType: 'attr',
            displayName: '介面型別'
        },
        {
            name: '顯示卡',
            accessType: 'attr',
            displayName: '顯示卡'
        },
        {
            name: '型號',
            accessType: 'attr',
            displayName: '型號',
        }
    ]);
}

第三第四個屬性中 drawPropertyValue 屬性的返回值為 fillFormPane 函式，這個函式的引數分別為（表單元件 formP，表單元件寬 w，表單元件高 h，表單元件中按鈕點選生成彈出框中的表格元件 tableP，表格元件中的陣列內容 arr，cb 函式將雙擊表格元件中的行返回的值賦值給 form 表單中的 ht.widget.TextField 文字框）。

第一個引數 formP 表單元件的建立，表單元件的建立就是建立一個表單元件，在表單元件中新增一個文字框以及一個按鈕，這個步驟在 HT 中也是相當的簡單：

function createFormPane(tPane) { // 建立表單皮膚
    var formPane = new ht.widget.FormPane();
    formPane.setPadding(0); // 設定表單四周與元件內容的間距
    var tField = new ht.widget.TextField(); // 建立一個文字框
    tField.setText(''); // 文字框的內容為空
    tField.setDisabled(true); // 文字框不可操作
    formPane.addRow([ // 向表單中新增行
        {
            id: 'tag', // 唯一標示屬性，可通過 formPane.getItemById(id) 獲取新增到對應的 item 物件
            element: tField // 屬性值可為 HTML 原生元素、FormPane 內部自繪製的文字資訊以及 HT 自帶元件如 Button、CheckBox 和 ComboBox 等
        },
        {
            button:{ // 設定了該屬性後 HT 將根據屬性值自動構建 ht.widget.Button 物件，並儲存在 element 屬性上
                label:'...', // 按鈕上的文字內容
                onClicked: function(){ // 按鈕點選事件
                    for(var i = 0; i < tPane.dm().size(); i++){ //設定 tablePane 預設選中 formPane 對應的值
                        var data = tPane.dm().getDatas().get(i);
                        if(data.a('value') === formPane.v('tag')){
                            tPane.sm().ss(data);
                        }
                    }
                    return createDialog(tPane, formPane); // 返回的是建立一個對話方塊，對話方塊的內容為表格皮膚
                }
            }
        }
    ], [0.5, 0.1]); // 設定表格元件中第一個元素和第二個元素的顯示比例。這個表格元件一共只有兩個元素，一個文字框一個按鈕，佔比分別為 0.5 和 0.1
    return formPane;
}

createDialog 函式建立的過程也是簡潔明瞭，通過 setConfig(config) 方法配置對話方塊的標題，尺寸，內容等，我給 createDialog 傳了一個引數 tPane 表格元件，用作對話方塊顯示的內容：
圖片描述

function createDialog(tPane){ // 建立彈出框
    dialog.setConfig({
        title: gv.sm().ld().getName()+"的"+formPane.title, // 對話方塊的標題
        content: tPane, // 直接將彈出框的內容設定為表格皮膚
        width: 400, // 指定對話方塊的寬度
        height: 200,
        draggable: true, // 指定對話方塊是否可拖拽調整位置
        closable: true, // 表示是否顯示關閉按鈕
        maximizable: true, // 表示對話方塊是否可被最大化
        resizeMode: "wh", // 滑鼠移動到對話方塊右下角可改變對話方塊的大小，wh表示寬高都可調整
        buttons: [ // 新增兩個按鈕
            {
                label: '取消',
                action: function(){
                    dialog.hide()
                }
            },
            {
                label: '確定',
            }
        ]
    });
    dialog.show(); // 顯示對話方塊
}

第四個引數 tableP 表格元件，也沒有什麼特別的，就是建立一個表單元件，然後向表單元件中新增列，步驟簡單，程式碼也相當簡單：

function createTableView(arr, dm){ // 建立表格元件
    var tableView = new ht.widget.TableView(dm);
    tableView.addColumns([ // 用 json 的陣列引數方式批量新增列資訊
        {
            displayName: 'ID', // 獲取表頭的列名內容
            drawCell: function(g, data, selected, column, x, y, w, h, tableView){ // 自定義單元格渲染方式
                var id = tableView.getRowIndex(data); // 返回 data 物件所在的行索引
                ht.Default.drawText(g, 'row' + (id + 1), null, null, x, y, w, h, 'center'); // 繪製文字引數(g 畫筆物件，value 文字內容，font 文字字型，color 文字顏色，x 繪製開始的 x 座標，y 繪製開始的 y 座標，w 繪製的寬度，h 繪製的高度，align 文字水平對齊方式，vAlign 文字垂直對齊方式)
            }
        },
        {
            displayName: 'Name',
            drawCell: function(g, data, selected, column, x, y, w, h, tableView){
                var id = tableView.getRowIndex(data);
                var info = arr[id];
                ht.Default.drawText(g, info, null, null, x, y, w, h, 'center');
            }
        }
    ]);
    return tableView;
}

解釋完 fillFormPane 中的引數，來看看這個函式是如何定義的，基本上只差最後一步，點選 tablePane 表格元件中的元素，將這個元素返回給 formPane 表單元件中的 textField 文字框：

function fillFormPane(formP, w, h, tableP, arr, cb){ // 右邊的 formpane
    if(formP === undefined){
        return;
    }
    formP.setWidth(w);
    formP.setHeight(h);
    formP.setHGap(0);

    if(formP.v('tag') === 'undefined' || formP.v('tag') === '') {
        formP.v('tag', arr[0]);
    }

    tableP.onDataDoubleClicked = function(data){ // 表格元件中的 data 所在行被雙擊時回撥
        var v = arr[data.a('index')];
        formP.v('tag', v); // 根據 id 設定對應 item 元素值為 setValue 的簡寫，這個 id 為 tag 的元素就是文字框
        dialog.hide();
        if (cb){cb(v);} // 如果傳入了 cb 引數，則設定 data.a('number')/data.a('helloName') 的值為表格中被雙擊的那一行的值，即賦值給第三第四屬性
    }

    tableP.onDataClicked = function(data){ // 表格元件中的 data 所在行被單擊時回撥
        dialog.getConfig().buttons[1].action = function(){ // 點選“確定”才進行下面的操作
            var v = arr[data.a('index')];
            formP.v('tag', v);
            dialog.hide();
            if (cb){cb(v);} 
        }
    };
    return formP.getView();
}

右上方屬性欄的顯示到這裡就全部結束了，右下方的表格皮膚的建立方式也是雷同的，大家可以自行看程式碼理解。

自動佈局

最後說一下整個介面節點的排布，HT 中的 autolayout 自動佈局元件，即根據節點和連線關係，提供多種型別演算法進行自動排布節點位置。 自動佈局常用於圖元較多，或連線關係教複雜時，不易於人工拖拽擺放的場景。我把各個佈局方式通過按鈕的方式呈現出來了，點選對應的按鈕，佈局方式就會根據按下的按鈕設定的排布方式來自動佈局：
圖片描述

http://www.hightopo.com/demo/propertyEditor/index.html

首先，建立一個新的例項，傳入需要自動佈局的物件，可以為 DataModel、graphView 以及 graph3dView 三種，然後設定預設的排布方式：

autoLayout = new ht.layout.AutoLayout(gv);
setTimeout(function(){
    layout('towardsouth', true); // 因為圖片還沒載入出來的時候，自動佈局就按照節點的預設大小來佈局的
}, 200);

接著建立 formPane 表單皮膚，新增進 body 中，放在 body 左上角，我不將所有程式碼粘出來了，就顯示第一個佈局的按鈕就好：

function createDirectionForm(){
    var form = new ht.widget.FormPane();
    form.setWidth(200); // 設定表單寬度
    form.setHeight(80);
    document.body.appendChild(form.getView());
    form.getView().style.background = '#fff';
    form.getView().style.boxShadow = '4px 16px 16px rgba(0, 0, 0, 0.1)'; // 設定陰影樣式
    form.addRow([ // 這一行單獨拿出來，作為標題
        {
            element: '自動佈局:', // 顯示的文字
        }
    ], [0.1]); // 陣列內只有一個物件，就只設定一個物件的寬度就好
    form.addRow([
        {
            button: {
                icon: '佈局/南佈局.json',
                onClicked: function(){
                    layout('towardsouth', true);
                },
                background: null,
                labelColor: '#fff',
                groupId: 'btn',
                toolTip: '朝南佈局',
                borderColor: null
            }
        },
        //....接下來新增剩下的6個按鈕
    ], [0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1]); // 陣列中有七個物件，就要設定七個物件的寬度
    return form;
}

比較有趣的部分就是這些啦，感謝大家的閱讀，如果有些地方我解釋的不夠清楚，可以私信給我，大家一起探討探討。

相關文章