TWaver HTML5學習筆記 —— 拓撲右鍵選單
阿新 • • 發佈：2019-01-27
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>右鍵選單</title> <script type="text/javascript" src="./js/twaver.js"></script> <script type="text/javascript" src="./js/topo.js"></script> <script type="text/javascript"> function init() { // 新增網元 var box = new twaver.ElementBox(); // 建立拓撲圖 var network = new twaver.network.Network(box); // 註冊圖片 topo.Util.registerImage("./images/ne/route.png"); topo.Util.registerImage("./images/ne/route_icon.png"); var node = new twaver.Node(); node.setName("ne1"); node.setLocation(100, 100); node.setImage("route"); node.setIcon("route_icon"); box.add(node); var node2 = new twaver.Node(); node2.setName("ne2"); node2.setLocation(300, 300); node2.setImage("route"); node2.setIcon("route_icon"); box.add(node2); var link = new twaver.Link(node, node2); link.setName("ne1 -- ne2"); link.setToolTip("<b> ne1 -- ne2</b>"); box.add(link); // 建立網元樹 var tree = new twaver.controls.Tree(box); tree.setCheckMode('descendantAncestor'); // 設定在網元樹中只顯示節點 tree.setVisibleFunction(function(element) { return element instanceof twaver.Node; }); // 建立表格 var table = new twaver.controls.Table(box); var tablePane = new twaver.controls.TablePane(table); topo.Util.createColumn(table, 'Name', 'name', 'accessor', 'string'); topo.Util.createColumn(table, 'Id', 'id', 'accessor', 'string'); // 定義拓撲檢視的右鍵選單 var popupMenu = new twaver.controls.PopupMenu(network); // 最後選中的節點和位置 var lastData, lastPoint; popupMenu.onMenuShowing = function(e) { lastData = network.getSelectionModel().getLastData(); lastPoint = network.getLogicalPoint(e); return true; }; // 設定右鍵選單動作 popupMenu.onAction = function(menuItem) { // 在指定位置新增網元 if (menuItem.label == "Add Ne") { var node = new twaver.Node(); node.setName("newNode"); //node.setParent( network.getCurrentSubNetwork()); node.setImage("route"); node.setIcon("route_icon"); node.setCenterLocation(lastPoint); box.add(node); } // 刪除節點或者鏈路 if (menuItem.label == "Delete") { box.remove(lastData); } }; // 設定右鍵選單內容 popupMenu.setMenuItems([{ // 新增網元 label : "Add Ne", group: 'none', icon: './images/ne/route_icon.png' }, { // 刪除網元 label : "Delete", group: 'Element' }]); // 設定右鍵選單是否可見 popupMenu.isVisible = function(menuItem) { if (lastData) { if ( lastData instanceof twaver.SubNetwork && menuItem.group === 'SubNetwork') { return true; } if ( lastData instanceof twaver.Group && menuItem.group === 'Group') { return true; } if ( lastData instanceof twaver.Link && menuItem.group === 'Link') { return true; } return menuItem.group === 'Element'; } else { return menuItem.group === 'none'; } }; // 拓撲各檢視佈局 var rightSplit = new twaver.controls.SplitPane(network, tablePane, 'vertical', 0.7); var mainSplitPane = new twaver.controls.SplitPane(tree, rightSplit, 'horizontal', 0.3); var networkDom = mainSplitPane.getView(); networkDom.style.width = "100%"; networkDom.style.height = "100%"; document.body.appendChild(networkDom); network.getView().style.backgroundColor = "#f3f3f3"; network.getView().style.cursor = "hand"; window.onresize = function() { mainSplitPane.invalidate(); }; } </script> </head> <body onload="init()" style="margin:0;"> </body> </html>