<!doctype html>
<html>
<head>
    <title>Network | Basic usage</title>

    <script type="text/javascript" src="../dist/vis.js"></script>
    <link href="../dist/vis.css" rel="stylesheet" type="text/css"/>

    <style type="text/css">
        #mynetwork {
            width: 1400px;
            height: 1000px;
            border: 1px solid lightgray;
        }
    </style>
    <script type="text/javascript">
    </script>
</head>

<body>
<my-toolbar>
    <button id="toggleAddNode">add Nodes</button>
    <button id="btnDelete">delete</button>
    <!-- other Vis manipulation buttons -->
    <button id="togglePhysics">pause Physics</button>
    <button id="togglePin">toggle pin</button>
</my-toolbar>
<div id="mynetwork"></div>
<script>
    document.getElementById("toggleAddNode").onclick = addNode;
    document.getElementById("btnDelete").onclick = visDelete;
    document.getElementById("togglePhysics").onclick = togglePhysics;
    document.getElementById("togglePin").onclick = togglePin;

    function storePositions() {
        network.storePositions();
    }

    var inAddNodeMode = false;

    function addNode() {
        if (inAddNodeMode) {
            network.disableEditMode();
            inAddNodeMode = false;
        } else {
            network.addNodeMode();
            inAddNodeMode = true;
        }
    }

    function visDelete() {
        network.deleteSelected();
    }

    function togglePhysics() {
        isPhysicsEnabled = !isPhysicsEnabled;
        network.setOptions({
            physics: isPhysicsEnabled
        });
    }
    var isPhysicsEnabled = true;

    function togglePin() {
        network.storePositions();
        // update node.fixed
    }

    // 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'
    }, {
        id: 4,
        label: 'Node 4'
    }, {
        id: 5,
        label: 'Node 5'
    }]);

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

    // create a network
    var container = document.getElementById('mynetwork');
    var data = {
        nodes: nodes,
        edges: edges
    };
    var options = {
        manipulation: {
            enabled: false,
            initiallyActive: false,
            addNode: false,
            //addEdge: onConnectEdge,
            //editNode: onEditNode,
            //editEdge: true,
            deleteNode: onDelete,
            // this is false, but the manipulation api can still delete edges
            deleteEdge: false
        }
    };

    function onAddNode(nodeToBeAdded, callback) {
        //$log.debug('onAdd', nodeToBeAdded);
        console.log('onAdd');
        // do stuff to the new node
        inAddNodeMode = false;
        callback(nodeToBeAdded);
    }

    function onDelete(toBeDeletedData, callback) {
        console.log('deleting data', toBeDeletedData);
        // toBeDeletedData is object with nodes: [] and edges: []

        callback(toBeDeletedData);
    }


    var network = new vis.Network(container, data, options);
</script>
</body>
</html>