TWaver HTML5学习笔记 —— 复制网络元素
2014-03-25 23:41
2759 查看
一、学习内容概述：
学习在拓扑图中，实现拓扑元素的复制和粘贴，实现原理：将选中的元素复制保存到内存中，当选择进行粘贴时，从内存中取出之前复制的元素进行粘贴操作，并指定这些新生成元素的新名称（原有元素前加“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);[b]三、验证代码运行效果截图：[/b]
[b]
[/b]
四、验证代码：
<!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 onload="init()" style="margin:0;">
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- TWaver HTML5学习笔记 —— 通过图层方式控制元素是否显示
- TWaver HTML5学习笔记 —— 拓扑元素添加标签图标
- HTML5 学习笔记3-非主体结构元素
- HTML5学习笔记简明版（10）：过时的元素和属性
- TWaver HTML5学习笔记 —— 可定制的右键菜单
- html5权威指南 学习笔记(1) 之 新增的主体结构元素
- TWaver HTML5学习笔记 —— 动态设置网元图片大小
- html5学习笔记(3)--主题结构元素-1
- HTML学习笔记（五）_HTML5表单相关元素和属性
- HTML5学习笔记7-增强的页面元素
- HTML5学习笔记简明版（10）：废弃的元素和属性
- HTML5学习笔记2013.1.6——新增元素之input元素的类型
- HTML5 学习笔记5-表单新增元素和属性（续写）
- Html5学习笔记1 元素 标签 属性
- HTML5学习笔记简明版（10）：废弃的元素和属性
- Html5学习笔记1 元素 标签 属性
- 【HTML5学习笔记】13：表单元素 其三
- HTML5 developer‘s cookbook 学习笔记（新的结构元素）
- html5学习笔记3-新增表单元素
- 【HTML5+css3】学习笔记之元素汇总