VisJS lab

by downedcrane

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.9.0/vis.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.9.0/vis.min.css">
<h1>
Реализация бинарного дерева
</h1>
Введите ноды через пробел в порядке возрастания
<br>
<input id="nodeList">
<button id="readNodes">Read Nodes</button>
<br>
<!-- <button id="addNode">Add Node</button> -->

<!-- <button id="removeNode">Remove Node</button> -->
<!-- <button id="test">Тестовая</button> -->
<div id="mynetwork"></div>

CSS

#mynetwork {
    width: 500px;
    height: 350px;
    border: 1px solid lightgray;
}

JavaScript

// create an array with nodes
var nodes = new vis.DataSet([]);

// create an array with edges
var edges = new vis.DataSet([]);

// create a network
var container = document.getElementById('mynetwork');

// provide the data in the vis format
var data = {
    nodes: nodes,
    edges: edges
};

var options = {
    layout: {
        randomSeed: undefined,
        improvedLayout: true,
        hierarchical: {
            enabled: true,
            levelSeparation: 180,
            direction: 'UD', // UD, DU, LR, RL
            sortMethod: 'directed' // hubsize, directed
        }
    }
}

// initialize your network!
var network = new vis.Network(container, data, options);
// var nodeNo = 4;
var lastNode = 4;

/* TODO
1 - вводим в html список нод через запятую
2 - забираем из html значения
3 - создаем все ноды
4 - соединяем по алгоритму

*/

$('#readNodes').click(function () {
var enteredNodes = document.getElementById('nodeList').value;
console.log(nodeList);
var res = enteredNodes.split(" ");
res.sort()
for (var i = 0; i < res.length; i++) {
		nodes.add({
        id: res[i],
        label: res[i]
    });
}
for (var k = 0; k < res.length; k++) {
		// в тестовых целях выводим все id нод в консоль
		console.log(res[k]);
    
}

// алгоритм создания эджей
var sorted = false
while(!sorted){
	middle = Math.floor(res.length/2)
  console.log('Middle = '+ middle)
  var leftNodes = res.slice(0, middle);
  var rightNodes = res.slice(middle);
  for (var l = middle; l >= 0; l--) {
  	edges.add({
        from: res[l],
        to: res[l-1]
    })
  }
  for (var r = middle; r <= res.length; r++) {
  	edges.add({
        from: res[r],
        to: res[r+1]
    })
  }
  sorted = true
}




});

$('#addNode').click(function () {		
    nodes.add({
        id: ++lastNode,
        label: "Node " + lastNode
    });
    
    edges.add({
        // id: nodeNo,
        from: lastNode - 1,
        to: lastNode
    })
		console.log(lastNode)
});

$('#removeNode').click(function ()...