TWaver HTML5学习笔记 —— 动态设置网元样式

最新推荐文章于 2022-05-06 14:41:25 发布

stevensz7

最新推荐文章于 2022-05-06 14:41:25 发布

阅读量4.5k

点赞数

分类专栏： TWaverHTML5 文章标签： TWaver html5 javascript 动态样式

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

版权

TWaverHTML5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、学习内容概述：

学习如何在拓扑图中动态设置网元的样式。

二、学习内容总结：

1、添加属性表格：

1）、属性表格定义：使用twaver.controls.PropertySheet类，例如：

              var nodeStylePropertySheet = new twaver.controls.PropertySheet();

2）、设置属性表格可编辑：setEditable(true)

              nodeStylePropertySheet.setEditable(true);

3）、添加属性表格关联的对象及关联事件：

var nodeStyleData = new twaver.Element();
var propertyBox = nodeStylePropertySheet.getPropertyBox();
topo.Util.addClientProperty(propertyBox, "label.color").setEnumInfo(['black', 'red']);
nodeStyleData.setClient("label.color", "black");
nodeStylePropertySheet.getDataBox().add(nodeStyleData);
nodeStylePropertySheet.getDataBox().getSelectionModel().setSelection(nodeStyleData);
nodeStylePropertySheet.getDataBox().addDataPropertyChangeListener(function handlePropertyChange(e) {
	var name = topo.Util.getPropertyName(e);
	network.getElementBox().forEach(function(element) {
		if ( element instanceof twaver.Node || element instanceof twaver.Link) {
			element.setStyle(name, e.newValue);
		}
	});
}, this);

4）、添加各种类型的属性参考（代码来源于demo）：

        var map = { '': 'None', 'default': 'Default', 'children': 'Children', 'descendant': 'Descendant', 'descendantAncestor': 'Descendant and Ancestor' };
        demo.Util.addClientProperty(propertyBox, "check.mode")
                .setEnumInfo({ map: map, values: ['', 'default', 'children', 'descendant', 'descendantAncestor'] });
        demo.Util.addClientProperty(propertyBox, "checkable.function").setEnumInfo(['Leaf', 'Category', 'Check Network', 'Check All']);
        demo.Util.addClientProperty(propertyBox, "unCheckable.style").setEnumInfo(['none', 'disabled']);
        demo.Util.addClientProperty(propertyBox, "show.icon").setValueType('boolean');
        demo.Util.addClientProperty(propertyBox, "layout.type").setEnumInfo(demo.LAYOUT_TYPE);

        this.data.setClient("check.mode", this.tree.isCheckMode());
        this.data.setClient("checkable.function", 'Check All');
        this.data.setClient("unCheckable.style", this.tree.getUncheckableStyle());
        this.data.setClient("show.icon", true);
        this.data.setClient("layout.type", 'round');

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

四、验证代码：

<!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, 30);
				node.setImage("route");
				node.setIcon("route_icon");
				box.add(node);
				var node2 = new twaver.Node();
				node2.setName("ne2");
				node2.setLocation(80, 150);
				node2.setImage("route");
				node2.setStyle("label.color", "black");
				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;
				});

				// 存储网元样式的变更的sheet页

				var nodeStyleData = new twaver.Element();
				var nodeStylePropertySheet = new twaver.controls.PropertySheet();
				nodeStylePropertySheet.setEditable(true);
				var propertyBox = nodeStylePropertySheet.getPropertyBox();
				topo.Util.addClientProperty(propertyBox, "label.color").setEnumInfo(['black', 'red']);
				nodeStyleData.setClient("label.color", "black");
				nodeStylePropertySheet.getDataBox().add(nodeStyleData);
				nodeStylePropertySheet.getDataBox().getSelectionModel().setSelection(nodeStyleData);
				nodeStylePropertySheet.getDataBox().addDataPropertyChangeListener(function handlePropertyChange(e) {
					var name = topo.Util.getPropertyName(e);
					network.getElementBox().forEach(function(element) {
						if ( element instanceof twaver.Node || element instanceof twaver.Link) {
							element.setStyle(name, e.newValue);
						}
					});
				}, this);

				// 拓扑各视图布局
				var rightSplit = new twaver.controls.SplitPane(network, nodeStylePropertySheet, '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>