TWaver初学实战——炫动2D机房之连线篇

其实能真正体现TWaver特色的，不是之前的机柜和设备面板的绘制，而是今天要实现的端口连线。

制作连线前，首先要增加个“连线模式”的开关。方案很多种，我选择灵活简洁的

右键菜单

		popupMenu.isVisible = function(menuItem) {
			var item = visibleGroup(lastData);
			var visible = menuItem.group === item;
			if(visible) {
				if(menuItem.label === '连线模式') {
					visible = !self._connectModle;
				} else if(menuItem.label === '视图模式') {
					visible = self._connectModle;
				}
			}
			return visible;
		};
		popupMenu.onAction = function(menuItem) {
			if(menuItem.label === '连线模式') {
				self.createLinks();
			} else if(menuItem.label === '视图模式') {
				self.deleteLinks();
			} else if(menuItem.label === '删除设备') {
				self._box().remove(lastData);
			}
		};

　

　

通过右键菜单实现了“连线模式”和“视图模式”的切换。而且还可以进一步细化右键的针对性，比如在某设备上点击右键，展示的所有此设备端口的相关连线；在某机柜上点击右键，就是此机柜上所有设备端口的相关连线；在空白处点击右键，就是当前页面上所有机柜设备端口间的连线。

但是到现在还是无法直接创建连线，因为连线是连接在两个网元间的线，而我们的端口并不是，设备才是最小的网元。要创建连线，我们必须

创建临时端口网元

		function createPortPoint(portData, type) {
			var portPoint = new twaver.Follower(portData.id);
			portPoint.setLocation(portData.x, portData.y);
			portPoint.setLayerId('deviceLayer');
			portPoint.c('isPort', true);
			portPoint.setSize(0, 0);
			portPoint.setHost(portData.device);
			self._box.add(portPoint);
			return portPoint;
		}

这种连线模式临时创建端口网元，视图模式又将其删除掉的方式，看起来比较麻烦，但由于尽量减少了网元数量，使得展示效率得到了大大提高。

有了端口网元，连线就变得非常easy了

创建端口连线

		function createPortPoint(portData, type) {
			var portPoint = new twaver.Follower(portData.id);
			portPoint.setLocation(portData.x, portData.y);
			portPoint.setLayerId('deviceLayer');
			portPoint.c('isPort', true);
			portPoint.setSize(0, 0);
			portPoint.setHost(portData.device);
			self._box.add(portPoint);
			return portPoint;
		}

　　

这样的连线看起来无疑有点太low，必须要添加

连线类型

	setLinkStyle(link, styleType) {
		var lineColor;
		var portType = link.c('portType');
		if(portType == 'network') {
			lineColor = '#00FFFF';
		} else if(portType == 'power') {
			lineColor = '#FFFF00';
		}
		var width = 1;
		var arrowWidth = 4;
		var arrowHeight = 3;
		var radius = 6;
		link.setStyle('link.width', width);
		link.setStyle('link.color', lineColor);
		link.setStyle('arrow.from', true);
		link.setStyle('arrow.from.width', arrowWidth);
		link.setStyle('arrow.from.height', arrowHeight);
		link.setStyle('arrow.from.color', lineColor);
		link.setStyle('arrow.to', true);
		link.setStyle('arrow.to.width', arrowWidth);
		link.setStyle('arrow.to.height', arrowHeight);
		link.setStyle('arrow.to.color', lineColor);
		link.setStyle('link.xradius', radius);
		link.setStyle('link.yradius', radius);

	},

　　

现在顺眼多了，但是有个问题是同一排的端口的连线会重叠到一起，比如上图中下部的两条网络连线，所以需要

错开相同类型连线

	createLinks: function() {
		this._connectModle = true;
		this._linksCount = {
			'extend.left': 0,
			'extend.right': 0,
			'extend.top': 0,
			'orthogonal.vertical': 0
		};
……
	},

var link = new twaver.Link(fromPortPoint, toPortPoint);
		link.setLayerId('linkLayer');
		link.c('portType', portType);
		this.setLinkStyle(link, 'common');
		var linkType = 'extend.top';
		var count = this._linksCount[linkType]++;
link.setStyle('link.type', linkType);
if(linkType === 'orthogonal.vertical') {
var offset = 0;
link.setStyle('link.split.percent', 0.5 + offset);
} else {
link.setStyle('link.extend', 10 + 5 * count);
}

……

　　

尽管在尽量错开连线，但当连线很多的情况下，根本不可能避免连线的部分重合。一个解决办法是

突出显示当前连线

		this.getView().addEventListener('click', function(e) {
			var element = self.getElementAt(e);
			if(element && element instanceof twaver.Link && element == self.getSelectionModel().getLastData()) {
				self._selectedLink = element;
				self.refreshLinks();
			} else {
				self._selectedLink = null;
				self.refreshLinks();
			}
		}, this);

	refreshLinks: function() {
		if(this._links.length) {
			for(var i = 0; i < this._links.length; i++) {
				var link = this._links[i];
				var styleType = 'common';
				if(this._selectedLink) {
					styleType = 'unfocused';
					if(link == this._selectedLink) {
						styleType = 'focus';
					}
				}
				this.setLinkStyle(link, styleType);
			}
		}
	},

　　

现在，就算有再多复杂的连线，也可以快速将自己关心的清晰显示出来