前端开发框架总结之利用Jtopo实现网络拓扑功能(五)
上文我们讲了拓扑元素序列化与反序列化相关的实现思路以及一些关键技术细节。为了让拓扑管理的功能更丰富化,我们今天再加入一些使用的交互与展示效果,来继续我们的拓扑管理开发之旅
-
拓扑对象右键菜单
为了使用更多的拓扑操作,我们将功能入口设置在右键拓扑对象弹出的菜单当中。这个官网demo中已经有相应的实现示例。在此只是简单提一下。我们可以把拓扑结点、连线、容器的删除功能都放在右键菜单中。(拓扑结点的删除功能,要记得把结点也从容器中删除)。我们也可以利用右键菜单触发拓扑结点与业务设备的绑定操作,利用拓扑结点的自定义属性,记录拓扑结点和业务设备的关系,后续我们可以利用这个绑定关系实现更多的功能。
js代码片段
/******节点右键事件start******/
var nodeSelected;
function nodeMouseUp(event) {
console.log("nodeMouseUp");
if(event.button == 2 && !beginNode){
var elem = document.getElementById('menu');