基于 GoJS 实现的拓扑图技术总结

动态显示连接线用到了 GoJS 的 API，大概操作逻辑是这样的：首先对图表添加节点选中监听事件，如果点击了一个节点，先把所有的节点取消高亮、连接线隐藏，然后再根据点击的节点，高亮需要高亮的节点，显示需要显示的连接线。

// 添加节点选中监听事件
this.diagram.addDiagramListener('ChangedSelection', () => {
    vm.updateHighlights();
});

// 绘制连接的节点样式和线
updateHighlights() {
    let vm = this;
    // 获取选中的节点（图表设置了最多只能选择一个节点，即 first() 取到的节点是当前选中的节点）
    let sel = vm.diagram.selection.first();
    if (sel === null) return false;
    // 设置所有节点为未选中状态
    if (sel.data.category === 'devInfo' || sel.data.category === 'devNotConfigInfo' || sel.data.category === 'dbInfo') {
 vm.diagram.nodes.each(node => {
     node.isHighlighted = false;
 });
 // 设置能力单元连接线初始值为隐藏
 vm.diagram.links.each(link => {
     if (link.data.category === 'devInfo' || link.data.category === 'devNotConfigInfo') {
  let shp1 = link.findObject('dev-link-shape');
  let shp2 = link.findObject('dev-link-toArrow');
  shp1.visible = false;
  shp2.visible = false;
     }
 });
    }
    // 根据选中的节点分别设置相关的节点和连接线高亮
    vm.showDevlink(sel);
    vm.highlightNode(sel);
},


showDevlink(x) {
    if (x instanceof go.Node) {
 // 选择的是能力单元节点
 if (x.data.category === 'devInfo' || x.data.category === 'devNotConfigInfo') {
     // 所有 从该节点出去 的线设置为显示
     x.findlinksOutOf().each(link => {
  let shp1 = link.findObject('dev-link-shape');
  let shp2 = link.findObject('dev-link-toArrow');
  shp1.visible = true;
  shp2.visible = true;
     });
 }
 // 选择的是资产节点
 if (x.data.category === 'dbInfo') {
     x.findlinksInto().each(link => {
  // 所有 指向该节点 的线设置为显示
  let shp1 = link.findObject('dev-link-shape');
  let shp2 = link.findObject('dev-link-toArrow');
  shp1.visible = true;
  shp2.visible = true;
     });
 }
    }
},

// 高亮选中节点连接的节点背景
highlightNode(x) {
    if (x instanceof go.Node) {
 // 选择的是能力单元节点
 if (x.data.category === 'devInfo' || x.data.category === 'devNotConfigInfo') {
     // 所有 目标节点 设置高亮样式
     x.findNodesOutOf().each(node => {
  node.isHighlighted = true;
     });
 }
 // 选择的是资产节点
 if (x.data.category === 'dbInfo') {
     // 所有 源节点 设置高亮样式
     x.findNodesInto().each(node => {
  node.isHighlighted = true;
     });
 }
    }
},

clickDepartTwo(e, obj, type) {
    let group = obj.part;
    // 判断节点是否是 Group 节点
    if (group instanceof go.Adornment) group = group.adornedPart;
    if (!(group instanceof go.Group)) return;

    // 判断有没有图层
    let diagram = group.diagram;
    if (diagram === null) return;

    // 判断节点能否收起/展开
    let cmd = diagram.commandHandler; // 获取图层指令
    if (group.isSubGraphExpanded) {
 if (!cmd.canCollapseSubGraph(group)) return; // 如果 group 不能收起，return
    } else {
 if (!cmd.canExpandSubGraph(group)) return; // 如果 group 不能展开，return
    }

    // 如果指定了 type，则按 type 与 节点当前展开状态 来决定展开/收起
    if (type) {
 if (type === 'collapse' && group.isSubGraphExpanded) {
     cmd.collapseSubGraph(group); // 收起
 } else if (type === 'expand' && !group.isSubGraphExpanded) {
     cmd.expandSubGraph(group); // 展开
 }
    } else { // 如果未指定 type，则按 节点当前展开状态 来决定展开/收起
 if (group.isSubGraphExpanded) {
     cmd.collapseSubGraph(group); // 收起
 } else {
     cmd.expandSubGraph(group); // 展开
 }
    }
},

// 更新拓扑图数据
updateModel: function (val) {
    let vm = this;
    // gojs 官网绑定 model 的示例代码
    if (val instanceof go.Model) {
 // 如果传入的 val 是 go.Model 类，可以直接绑定到 model
 vm.diagram.model = val;
    } else {
 // 构建一个 model 对象，把拓扑图数据绑定到此对象
 let m = new go.GraphlinksModel();
 if (val) {
     for (let p in val) {
  if (val.hasOwnProperty(p)) {
      m[p] = val[p];
  }
     }
 }
 // 绑定到 model
 vm.diagram.model = m;
    }
},