removeNode&insertNodetoNodeSet

by nextsupport

HTML

<link rel="stylesheet" href="https://abdvl.github.io/src/dist/css/next.css">
<script src="https://abdvl.github.io/src/dist/js/next.js"></script>
<button onClick="addNewLink()">Add new link</button>
<button onClick="insetNodeSet()">insetNodeSet</button>
<button onClick="insetNodeToNodeSet()">inset Node to nodeSet</button>
<button onClick="removeNodeSet()">removeNodeSet</button>

CSS

body,
html {
  height: 100%;
}

JavaScript

topo = new nx.graphic.Topology({
  adaptive: true,
  nodeConfig: {
    label: 'model.id'
  },
  showIcon: true,
  theme: 'yellow'
});


topo.on('ready', function() {
  topo.data(topologyData);
});

var app = new nx.ui.Application();
topo.attach(app);


addNewLink = function() {

  topo.addLink({
    source: 0,
    target: 4
  });
  
  // update linkSet

  var edgeSet = topo.graph().getEdgeSetBySourceAndTarget(0, 4)
  if (edgeSet) {
    topo.graph()._generateConnection(edgeSet)
  }
  
  

};

insetNodeSet = function() {
  topo.aggregationNodes([2, 3])
}

removeNodeSet = function() {
  topo.deleteNodeSet(5);
}

insetNodeToNodeSet = function() {

  var data = {
    id: 10,
    x: 380,
    y: 220
  };

  var pid = 5;

  addNodeToNodeSet(topo, pid, data);

};


function addNodeToNodeSet(topo, pid, nodeData) {
  if (!topo || !pid || !nodeData) {
    return;
  }
  var graph = topo.graph();
  var nodeSet = topo.getNode(pid);
  if (nodeSet) {
    var vertexSet = nodeSet.model();
    var vertex = graph._addVertex(nodeData);
    vertexSet.addVertex(vertex);
    graph.updateVertexSet(vertex);
    if (!nodeSet.collapsed()) {
      var animation = nodeSet.animation();
      nodeSet.animation(false);
      nodeSet.collapsed(true);
      nodeSet.collapsed(false);
      nodeSet.animation(animation);
    }
  }
}

var topologyData = {
  nodes: [{
    "id": 0,
    "x": 410,
    "y": 100,
    "name": "12K-1"
  }, {
    "id": 1,
    "x": 410,
    "y": 280,
    "name": "12K-2"
  }, {
    "id": 2,
    "x": 660,
    "y": 280,
    "name": "Of-9k-03"
  }, {
    "id": 3,
    "x": 660,
    "y": 100,
    "name": "Of-9k-02"
  }, {
    "id": 4,
    "x": 180,
    "y": 190,
    "name": "Of-9k-01"
  }],
  links: [{
    "source": 0,
    "target": 1
  }, {
    "source": 1,
    "target": 2
  }, {
    "source": 1,
    "target": 3
  }, {
    "source": 4,
    "target": 1
  }, {
    "source": 2,
    "target": 3
  }, {
    "source": 2,
    "target": 0
  }, {
    "source": 3,
    "target": 0
  }, {
   ...