web/visualization.js

let recorder = new Recorder(
    d3.select("#graph").graphviz(),
    document.getElementById("comment"),
    "graph"
);

let tree = new WAVLTree();
tree.recorder = recorder;

function insertCallback() {
    let number = document.getElementById("insertInput").value;
    if (number === "") {
        return false;
    }

    let value = parseInt(number);
    tree.insert(value);

    document.getElementById("insertInput").value = "";
    return false;
}

function deleteCallback() {
    let number = document.getElementById("deleteInput").value;
    if (number === "") {
        return false;
    }

    let value = parseInt(number);
    tree.delete(value);

    document.getElementById("deleteInput").value = "";
    return false;
}

function switchTree(TreeType) {
    tree = new TreeType();
    tree.recorder = recorder;
    recorder.clear();
    tree.record("");
}

// #region prepared scenarios
function prepareSingleRotationAfterDelete() {
    let newTree = new WAVLTree();

    for (let key of [0, 1, 2, -1]) {
        newTree.insert(key);
    }

    document.getElementById("wavlTreeBtn").checked = true;

    tree = newTree;
    tree.recorder = recorder;
    recorder.clear();
    tree.record("Prepare tree");

    document.getElementById("deleteInput").value = 2;
}

function prepareDoubleRotationAfterDelete() {
    let newTree = new WAVLTree();

    for (let key of [0, -7, 1, -1]) {
        newTree.insert(key);
    }

    document.getElementById("wavlTreeBtn").checked = true;

    tree = newTree;
    tree.recorder = recorder;
    recorder.clear();
    tree.record("Prepare tree");

    document.getElementById("deleteInput").value = 1;
}

function prepareDemotionOfBothNodesDuringDelete() {
    let newTree = new WAVLTree();

    for (let key of [0, 1, 2, 3, -2, -3, -1]) {
        newTree.insert(key);
    }

    for (let key of [-2]) {
        newTree.delete(key);
    }

    document.getElementById("wavlTreeBtn").checked = true;

    tree = newTree;
    tree.recorder = recorder;
    recorder.clear();
    tree.record("Prepare tree");

    document.getElementById("deleteInput").value = 2;
}
// #endregion prepared scenarios

function render() {
    recorder.render();
    setTimeout(render);
}
render();