拓扑图编辑技巧

一、 拓扑图拖拽后记录当前编辑节点位置

【使用场景】
（1）根据数据库当前数据及结构关系，使用自动布局方式绘制拓扑图
（2）客户定制拓扑图节点位置信息，并保存。

【实现方案】
（1）客户定制后，保存所有节点的位置（x，y）信息
（2）查询到有位置信息，则根据位置信息绘制节点
（3）有新增节点A没有位置信息。则自行计算大概得节点位置信息。 A有兄弟节点，则根据兄弟节点的坐标算出来一个大致的坐标；A没有兄弟节点，则直接画在父节点下，跟父节点X坐标相同，Y坐标依据父节点的Y坐标，给个相对大小的坐标。
（4）自己计算坐标，前提是新增的节点不多的情况下。 很有可能节点会覆盖已有的坐标，具体算法，可自行优化。

二、自定义节点和线的右键操作行为

（1）需要引入 PopupMenu.js 文件
（2）使用方式如下

（3）右键按钮点击后的触发action 中的行为。action 中的内容，可使用当前项目中引入的其他功能模块，如提示信息，弹出框等。插件自己提供的操作行为，不是很友好。

（4）效果

三、拓扑图定时更新

拓扑图的更新只通过API更新节点的数据，而不是整个图刷新。
（1）为节点绑定原始API数据；
（2）为节点定义唯一可识别的key；
（3）更新时，通过原始数据和key，找到相应的节点，重新赋值。 可以修改节点或线的名称、颜色等。

 this.graph.forEach(function(node) {
          if (node instanceof Q.Node) {
          		if (node.nodeData) {
              		const { type, dcId } = node.nodeData
             		 // 找到所有alarm的节点, 重新赋值
              		if (type === 'alarm' ) {
               				 _this.zoneAlarms.forEach(item => {
				                  if (item.dcId === dcId) {
				                    node.name = item[key] + ''
				              }
                })
              }
          }
 })

四、拓扑图数据加载

4.1 可以一次性调用多个API，等所有数据都拿到后，绘制拓扑图

该方案的前提是，API间不会相互调用；如果相互调用，也必须能识别出什么时候结束调用。

(1) angularjs 中使用

```
$q.all().then()
```

(2) vue 中使用

async  await

或

axios.all().then()

4.2 走一步调用一次API，API成功后绘制节点

（1）画根节点；
（2）调用API1，获取第二层节点的数据，API1调用成功后，调用API2，画第二层节点，以此类推直到调用结束。

五、绘制组（块）

（1） 绘制普通块

graph.createGroup() 

group 的大小，由其内部内容决定

（2）绘制可控大小的块

graph.createShapeNode(null, Q.Shapes.getRect(0, 0, this.zoneBlockWidth / 2 - 5, 88), x - 35, y - 30)