云计算大行其道，上期开源中国的原创会就有好几位云计算专家演讲，从底层的虚拟化技术，到上层的云存储和应用API，耳濡目染，也受益匪浅，算是大势所趋，回头看看Qunee组件，借这个趋势，可以在云计算可视化上发挥作用，最近就有客户用Qunee实现虚拟机配置图，并对交互做了定制，细节不便多说，本文主要介绍Qunee交互扩展方面的思路

云计算大行其道，上期开源中国的原创会就有好几位云计算专家演讲，从底层的虚拟化技术，到上层的云存储和应用API，耳濡目染，也受益匪浅，算是大势所趋，回头看看Qunee组件，借这个趋势，可以在云计算可视化上发挥作用，最近就有客户用Qunee实现虚拟机配置图，并对交互做了定制，细节不便多说，本文主要介绍Qunee交互扩展方面的思路

参考示例 visualops

云平台可视化这块儿国外做的不错，有不少开放的示例可以学习和参考，客户看中了这家云管理系统http://www.visualops.io/,这个系统使用的是挽救(保存的简写)技术，体验了一下，效果不错，参照着实现

从界面上看，一个云节点上有多个子网，每个子网内有多台虚拟主机，然后每个云节点有统一的路由路由器管理（或者网关网关)

界面呈现

参照原型实现，使用问：路径描出子网和云节点范围，虚拟机则用普通节点，连线使用正交连线类型，此外还有些外观配置，比如虚线，背景颜色，网格等，设置风格或者钢性铸铁即可

创建矩形元素（子网、云节点）

函数createRect(名称、左侧、顶部、宽度、高度、填充颜色){

var rect=graph.createNode(name，left，top)；

rect.type=' rectGroup

rect。锚位置=Q位置。left _ TOP

rect.image=Q.Shapes.getRect(0，0，100，100)；

rect.size={width: width，height : height }；

rect。设定风格(问风格。image _ BACKGROUND _ COLOR，fill COLOR | | Q . to COLOR(0x 88 ffffff))；

rect。setstyle(Q . style。shape _ STORK，0)；

rect。setstyle(Q . style。BOrder，1)；

rect。setstyle(Q . style。BOrder _ COLOR，' # 32c 02f ')；

rect。设置样式(Q . style。BOrder _ LINE _ DASH，[5，6])；

rect。setstyle(Q . style。LABEL _ PADDING，5)；

rect。设置样式(Q . style。标签_锚_位置，Q .位置。left _ TOP)；

rect。设置样式(Q . style。标签位置。left _ TOP)；

rect。SetBounds=function(bounds){

这个。x=界限。x；

这个。y=界限。y；

这个。大小=新的Q。大小(界限。宽度，界限。身高)；

}

rect.getBounds=function () {

返回新的Q.Rect(this.x，this.y，this.size.width，this。尺寸。身高)；

}

rect.inBounds=function (x，y) {

返回this.getBounds().包含(x，y)；

}

rect。Intersecret=function(rect){

返回矩形。秘书处间(这。x，这个。y，这个。尺寸。宽度，这个。尺寸。身高)；

}

rect。ContainsRect=function(rect){

return q . Contains ReaCh(this。x，this.y，this.size.width，this.size.height，rect.x，rect.y，rect.width，rect .身高)；

}

rect。updateboundsbychildren=function(){

var bounds=new Q . Rect()；

Q.forEachChild(this，function (child) {

界限。添加(图表。getuibounds(child))；

});

this.location=新的Q.Point(bounds.x，bounds。y-15)；

this.size=新问：大小(数学更大值(200，边界。宽度)，数学更大值(70，边界。身高15))；

}

返回矩形

}

注意到对矩形增加了一些标定节点范围、计算自身大小的方法，后面交互时会用到

创建虚拟主机

函数createPC(名称，x，y，父项){

var node=graph.createNode(name，x，y)；

节点。图像=Q .葡萄。服务器；

节点。parent=节点。host=parent

node.zIndex=10

返回节点；

}

创建连接关系

函数创建边(从，到){

var name=from。名称'-' to。名称；

var edge=graph.createEdge(name，from，to)；

边缘。EdgeTYPe=Q . consts。edge _ TYPe _ REVY \u水平；

边缘。设置样式(Q . style。EDGE _ FROM _ OFFSET，{ x : 20 })；

EDGE。设置样式(Q . style。EDGE _ CORNER _ RADIUS，0)；

返回边缘；

}

定制交互

呈现出来不难，业务的体现在于交互，客户需求要求虚拟主机不得超出云节点范围，超出时需要回撤操作，此外可以将一台虚拟机从一个子网移到另一个子网，另外还要控制路由的移动范围，限定在云节点的左边框上……

实现思路是通过交互监听，分别对移动(ELEMENT _ MOVING)，调整大小（调整大小)等情况做处理，Qunee交互事件通常有三个状态：开始、进行时、结束，比如移动交互的三个过程：开始移动（元素_移动_开始),移动中(ELEMENT _ MOVING)，完成移动（元素_移动_结束),我们可以在开始时记录节点原始位置，结束时判断节点位置是否允许，如果不允许则作调整

var old location={ }；

图表。InteractionDispatcher。AddListener(函数(evt) {

var数据=evt.data

if(evt。kind==Q . interactionevent。调整大小(_ START){

旧位置[数据。id]={ x :数据。x，y: data.y，width: data.size.width，height : data。尺寸。高度}；

}

if(evt。kind==Q . InterActionEvent。SIZING){

if (data==mainNode) {

标签。update location()；

}

返回；

}

if(evt。kind==Q . interactionevent。resize _ END){

var old bounds=旧位置[数据。id]；

旧位置={ }；

if ((data！=主节点是group(data)group intersected(data))| | children output(data)){

数据。setbounds(旧界限)；

}

if (data==mainNode) {

标签。update location()；

}

返回；

}

if (data.atLeft) {

if(evt。kind==Q . InterActionEvent。ELEMENT _莫宁){

数据。update location()；

}

返回；

}

if(evt。kind==Q . interactionevent。element _ MOVE _ START){

旧位置[数据。id]={ x :数据。x，y :数据。y }；

返回；

}

if(evt。kind==Q . InterActionEvent。ELEMENT _莫宁){

if(！isGroup(data)) {

var g=FindGroup(evt。事件)；

突出显示(g)；

}

返回；

}

if(evt。kind==Q . interactionevent。element _ MOVE _ END){

highlight()；

if (isGroup(data)) {

if (groupIntersected(data)) {

var old=旧位置[数据。id]；

graph.moveElements([data]，old.x - data.x，old。y数据。y)；

}

返回；

}

var g=FindGroup(evt。事件)；

if (g) {

数据。parent=数据。host=g；

固定节点(数据);

} else {

数据。位置=旧位置[数据。id]；

}

旧位置={ }；

}

})