web/comparator_visualization.js

let lRecorder = new Recorder(
    d3.select("#left").graphviz(),
    null,
    "left"
).renderAtOnce();
let rRecorder = new Recorder(
    d3.select("#right").graphviz(),
    null,
    "right"
).renderAtOnce();

let left = null;
let right = null;
setTrees(AVLTree, WAVLTree);

function operationCallback(lMethod, rMethod, id) {
    let number = document.getElementById(id).value;
    let value = parseInt(number);
    if (number === "" || isNaN(value)) {
        return false;
    }

    lMethod(value);
    rMethod(value);
    document.getElementById(id).value = "";
    return false;
}

function insertCallback() {
    return operationCallback(
        left.insert.bind(left),
        right.insert.bind(right),
        "insertInput"
    );
}

function deleteCallback() {
    return operationCallback(
        left.delete.bind(left),
        right.delete.bind(right),
        "deleteInput"
    );
}

function setTrees(lType, rType) {
    left = new lType();
    left.recorder = lRecorder;

    right = new rType();
    right.recorder = rRecorder;

    for (let t of [left, right]) {
        t.recorder.clear();
        t.record();
    }
}

function switchTree(TreeType, side) {
    let [lType, rType] =
        side == "left"
            ? [TreeType, right.constructor]
            : [left.constructor, TreeType];
    setTrees(lType, rType);
}

async function render() {
    await Promise.all([
        new Promise(() => lRecorder.render()),
        new Promise(() => rRecorder.render()),
    ]);
    setTimeout(render);
}
render();