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>
<button id="addNode">Add Node</button>
<button id="removeNode">Remove Node</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([{
    id: 1,
    label: 'Node 1'
}, {
    id: 2,
    label: 'Node 2'
}, {
    id: 3,
    label: 'Node 3'
}]);

// create an array with edges
var edges = new vis.DataSet([{
    from: 1,
    to: 2
}, {
    from: 2,
    to: 3
}]);

// 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 = 3;
var firstNode = 1;
$('#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 () {
		if(lastNode == 0){
    nodes.remove([0]);
    lastNode = 1;
    }
		if(lastNode > 0){
    nodes.remove({
        id: lastNode - nodes.length + 1,
        
    });
		
    edges.remove({
        // id: nodeNo,
        from: lastNode - nodes.length + 1,
        to: lastNode - nodes.length + 2
    })
    
		}
   
    console.log(lastNode)
});