Group共享网元

熟悉TWaver的用户都知道Group的概念，如果是Group，那必然会出现一个网元在多组的情况，最近有客户遇到这个问题，给写了Demo，这些也跟大家分享一下如何实现，先让我们看看共享网元的效果。

熟悉TWaver的用户知道添加到Group中的网元，这些网元的父亲都是这个Group，既然称之为父亲，那当然一个网元只能有一个父亲，那么实现Group共享网元的效果就不能用Parent的属性来实现了。我们来分析一下在TWaver里体现一个网元属于某个Group，就是这个网元画在Group内，而Group的范围是由它的children的位置决定的，上面说了实现Group共享网元的效果是不能通过父子关系来实现的，那么我们就要从计算Group范围的地方入手，只要让Group不仅仅考虑它children的位置，也考虑需要共享的网元位置，就可以了，那么这个思路是否可行，让我们试试。
在TWaver中network在获取Group范围的方法是调用groupChildrenRectsFunction方法，这个方法默认只计算Group的children，那么根据上面的分析我们就重写这个方法，也添加上需要共享的网元。DataBox中网元很多，那么哪些网元需要共享呢，我们就给需要共享的网元添加一个自定义属性shared，如果需要共享值为TRUE，参考下面代码

1	network.groupChildrenRectsFunction = function(group:Group, network:twaver.network.Network):ICollection {

2	var rects:ICollection = new Collection();

3	for(var i:int = 0; i < group.childrenCount; i++){

4	var child:IElement = group.children.getItemAt(i);

5	if(child is Node){

6	var ui:twaver.network.ui.ElementUI = network.getElementUI(child);

7	if(ui != null){

8	rects.addItem(new Rectangle(ui.x, ui.y, ui.measuredWidth, ui.measuredHeight));

9

}

10

}

11

}

12	var box:ElementBox = network.elementBox;

13	box.forEach(function(e:Element){

14	if(e.getClient('shared')){

15	var ui:twaver.network.ui.ElementUI = network.getElementUI(e);

16	if(ui != null){

17	rects.addItem(new Rectangle(ui.x, ui.y, ui.measuredWidth, ui.measuredHeight));

18

}

19

}

20

});

21	return rects;

22

};

然后看看实现效果


上下点击，貌似实现了,看来我们的思路是正确的，刚进入页面共享的网元是现实的，但选中Group后，共享网元被覆盖了，TWaver老用户知道了，我们该用Layer了，还有一个问题截图中我们看到上面的Group总是覆盖下面的Group，那如何解呢？好解，我们设置Group的透明度吧，见下面代码

1	var group:Group = new Group();

2	group.addChild(HAProxy1);

3	group.addChild(HAProxy2);

4	group.expanded = true;

5	group.setStyle(Styles.GROUP_SHAPE, Consts.SHAPE_OVAL);

6	group.setStyle(Styles.GROUP_FILL_ALPHA,0.5);

7	elementBox.add(group);

8

9	var group1:Group = new Group();

10	group1.addChild(HAProxy3);

11	group1.addChild(HAProxy4);

12	group1.expanded = true;

13	group1.setStyle(Styles.GROUP_SHAPE, Consts.SHAPE_OVAL);

14	group1.setStyle(Styles.GROUP_FILL_ALPHA,0.5);

15	elementBox.add(group1);

16

17	var layer:Layer = new Layer(100);

18	var HAProxy5:Node = createNode("HAProxy5", "HAProxyIcon", new Point(180,280), Consts.POSITION_BOTTOMLEFT);

19	HAProxy5.setClient('shared', true);

20	HAProxy5.layerID = layer.id;

21	var HAProxy6:Node = createNode("HAProxy6", "HAProxyIcon", new Point(400,280), Consts.POSITION_BOTTOMRIGHT);

22	HAProxy6.setClient('shared', true);

23	HAProxy6.layerID = layer.id;

24	elementBox.layerBox.add(layer);

再看看效果：

暮然回首，效果实现了，但是不要高兴太早，如果移动网元，你会发现移动Group的孩子Group的大小会随之改变，但是移动共享的网元，只有选择了Group后，Group才回改变，如果你有需求的话，那就要添加上监听当网元的location变化后重绘network，参考代码

1	elementBox.addDataPropertyChangeListener(function(e:PropertyChangeEvent):void{

2	if(e.property == "location"){

3	network.invalidateElementUIs();

4

}

5

});

这下完成了，各位看官可以下载附近中Demo，拖拖拽拽试试效果，附件下载后放在TWaver Demo中，替换原来的文件可运行。