TWaver HTML5学习笔记 —— 选择隐藏网元

最新推荐文章于 2022-05-02 07:30:00 发布

stevensz7

最新推荐文章于 2022-05-02 07:30:00 发布

阅读量4.6k

点赞数 1

分类专栏： TWaverHTML5 文章标签： TWaver html5 javascript 动态隐藏

本文链接：https://blog.csdn.net/stevensz7/article/details/21879201

版权

TWaverHTML5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、学习内容概述：

学习如何在拓扑图中动态设置是否显示网元。

二、学习内容总结：

1、实现思路：为拓扑元素定义一个自定义属性hidden，当hidden值为true时，则该拓扑元素不显示。

1）、网元添加自定义属性：

lastData.setClient("hidden", true);

2）、设置拓扑元素是否显示：

				// 拓扑图只显示hidden为false的节点
				network.setVisibleFunction(function(element) {
					if (element.getClient("hidden")) {
						return false;
					}
					if (element.getParent() && element.getParent().getClient("hidden")) {
						return false;
					}
					return true;
				});

三、验证代码运行效果截图：

四、验证代码：

<!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(20, 40);
				node.setImage("route");
				node.setIcon("route_icon");
				box.add(node);
				var node2 = new twaver.Node();
				node2.setName("ne2");
				node2.setLocation(120, 120);
				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);
				// 拓扑图只显示hidden为false的节点
				network.setVisibleFunction(function(element) {
					if (element.getClient("hidden")) {
						return false;
					}
					if (element.getParent() && element.getParent().getClient("hidden")) {
						return false;
					}
					return true;
				});

				// 创建网元树
				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 == "Show All") {
						network.getElementBox().forEach(function(element) {
							element.setClient("hidden", false);
						});
					}
					// 删除节点或者链路
					if (menuItem.label == "Delete") {
						box.remove(lastData);
					}
					// 隐藏网元
					if (menuItem.label == "Hide") {
						lastData.setClient("hidden", true);
					}
				};
				// 设置右键菜单内容
				popupMenu.setMenuItems([{
					// 添加网元
					label : "Add Ne",
					group : 'none',
					icon : './images/ne/route_icon.png'
				}, {
					// 显示所有元素
					label : "Show All",
					group : 'none'
				}, {
					// 删除网元
					label : "Delete",
					group : 'Element'
				}, {
					separator : true,
					group : 'Element'
				}, {
					// 隐藏网元
					label : "Hide",
					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 οnlοad="init()" style="margin:0;">

	</body>
</html>

stevensz7

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
TWaver HTML5学习笔记 —— 选择隐藏网元

一、学习内容概述：学习如何在拓扑图中动态设置是否显示网元。二、学习内容总结：1、实现思路：为拓扑元素定义一个自定义属性hidden，当hidden值为true时，则该拓扑元素不显示。 1）、网元添加自定义属性： lastData.setClient("hidden", true); 2）、设置拓扑元素是否显示： // 拓扑
复制链接

扫一扫