TWaver HTML5学习笔记 —— 复制网络元素

最新推荐文章于 2022-12-22 10:56:01 发布

stevensz7

最新推荐文章于 2022-12-22 10:56:01 发布

阅读量3.5k

点赞数

分类专栏： TWaverHTML5 文章标签： html5 TWaver javascript 复制元素

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

版权

TWaverHTML5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、学习内容概述：

学习在拓扑图中，实现拓扑元素的复制和粘贴，实现原理：将选中的元素复制保存到内存中，当选择进行粘贴时，从内存中取出之前复制的元素进行粘贴操作，并指定这些新生成元素的新名称（原有元素前加“new-”）和位置（以当前右键选择点击的位置，结合复制元素中网元的最小x、y坐标，计算出x、y坐标的偏移量）。

二、学习内容总结：

1、复制选中的元素：

						var tmp_box = new twaver.ElementBox();
						var selections = network.getElementBox().getSelectionModel().getSelection();
						if (selections.isEmpty()) {
							network.getElementBox().copyAnchor = null;
							return;
						}
						selections.forEach(function(element) {
							tmp_box.add(element);
						});
						var datas = new twaver.XmlSerializer(tmp_box).serialize();
						box.copyAnchor = datas;

2、计算元素最小x、y坐标：

    getMinLeft: function (elements) {
        var xMin = Number.MAX_VALUE;
        var xMax = Number.MIN_VALUE;
        var yMin = Number.MAX_VALUE;
        var yMax = Number.MIN_VALUE;

        elements.forEach(function (node, index, array) {
            if (node instanceof twaver.Node) {
                var x = node.getX();
                xMin = Math.min(x, xMin);
                var width = node.getWidth();
                xMax = Math.max(x + width, xMax);
                var y = node.getY();
                yMin = Math.min(y, yMin);
                var height = node.getHeight();
                yMax = Math.max(y + height, yMax);
            }
        });
        return { x: xMin, y: yMin, width: xMax - xMin, height: yMax - yMin };
    },

3、粘贴进行复制的元素：

						var lists = new twaver.List();
						var oldSize = box.size();
						if (box.copyAnchor) {
							new twaver.XmlSerializer(box).deserialize(box.copyAnchor);
						}
						var newSize = box.size();
						if (newSize > oldSize) {
							var array = box._dataList.toArray();
							// 获取选择网元最小的x、y坐标
							var minLeftPoint = topo.Util.getMinLeft(array.slice(oldSize));
							// 以当前右键选择点击的位置，计算出x、y坐标的偏移量
							var xOffset = lastPoint.x - minLeftPoint.x;
							var yOffset = lastPoint.y - minLeftPoint.y;
							for (var i = oldSize; i < newSize; i++) {
								lists.add(array[i]);
								array[i].setName("new-" + array[i].getName());
								if (array[i].getX != undefined) {
									array[i].setX(array[i].getX() + xOffset);
									array[i].setY(array[i].getY() + yOffset);
								}
							}
						}
						box.getSelectionModel().setSelection(lists);

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

四、验证代码：

<!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(80, 80);
				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);
					}
					// 拷贝元素
					if (menuItem.label === "Copy") {
						var tmp_box = new twaver.ElementBox();
						var selections = network.getElementBox().getSelectionModel().getSelection();
						if (selections.isEmpty()) {
							network.getElementBox().copyAnchor = null;
							return;
						}
						selections.forEach(function(element) {
							tmp_box.add(element);
						});
						var datas = new twaver.XmlSerializer(tmp_box).serialize();
						box.copyAnchor = datas;
					}
					// 粘贴元素
					if (menuItem.label === "Paste") {
						var lists = new twaver.List();
						var oldSize = box.size();
						if (box.copyAnchor) {
							new twaver.XmlSerializer(box).deserialize(box.copyAnchor);
						}
						var newSize = box.size();
						if (newSize > oldSize) {
							var array = box._dataList.toArray();
							// 获取选择网元最小的x、y坐标
							var minLeftPoint = topo.Util.getMinLeft(array.slice(oldSize));
							// 以当前右键选择点击的位置，计算出x、y坐标的偏移量
							var xOffset = lastPoint.x - minLeftPoint.x;
							var yOffset = lastPoint.y - minLeftPoint.y;
							for (var i = oldSize; i < newSize; i++) {
								lists.add(array[i]);
								array[i].setName("new-" + array[i].getName());
								if (array[i].getX != undefined) {
									array[i].setX(array[i].getX() + xOffset);
									array[i].setY(array[i].getY() + yOffset);
								}
							}
						}
						box.getSelectionModel().setSelection(lists);
					}
				};
				// 设置右键菜单内容
				popupMenu.setMenuItems([{
					// 添加网元
					label : "Add Ne",
					group : 'none',
					icon : './images/ne/route_icon.png'
				}, {
					// 删除网元
					label : "Delete",
					group : 'Element'
				}, {
					// 拷贝元素
					label : "Copy",
					group : 'Element'
				}, {
					// 粘贴元素
					label : "Paste",
					group : 'none'
				}]);
				// 设置右键菜单是否可见
				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

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
TWaver HTML5学习笔记 —— 复制网络元素

一、学习内容概述：学习在拓扑图中，实现拓扑元素的复制和粘贴，实现原理：将选中的元素复制保存到内存中，当选择进行粘贴时，从内存中取出之前复制的元素进行粘贴操作，并指定这些新生成元素的新名称（原有元素前加“new-”）和位置（以当前右键选择点击的位置，结合复制元素中网元的最小x、y坐标，计算出x、y坐标的偏移量）。二、学习内容总结：1、复制选中的元素：
复制链接

扫一扫

专栏目录