web/recorder.js

const DURATION = 500;

class Recorder {
    constructor(graph, id) {
        this.graph = graph;
        this.id = id;

        this.rendered = -1;
        this.rendering = false;
        this.atOnce = false;

        this.states = new Array();

        this.initGraph();
    }

    renderAtOnce() {
        this.atOnce = true;
        return this;
    }

    unblockRendering() {
        console.log(this);
        console.log(`Unblocked renderer #${this.id}`);
        this.rendering = false;
    }

    initGraph() {
        this.graph.transition(() =>
            d3
                .transition("main")
                .ease(d3.easeLinear)
                .on("end", this.unblockRendering.bind(this))
                .delay(500)
                .duration(DURATION)
        );
    }

    render() {
        if (this.atOnce) {
            if (this.rendered != this.states.length - 1) {
                this.rendered = this.states.length - 1;
                this.graph.renderDot(this.states[this.rendered]);
            }

            return;
        }

        if (
            this.rendering ||
            !this.states ||
            this.rendered == this.states.length - 1
        ) {
            return;
        }

        this.rendering = true;

        this.rendered++;
        this.graph.renderDot(this.states[this.rendered]);
    }

    previous() {
        throw "not implemented!";
    }

    next() {
        throw "not implemented!";
    }

    record(tree) {
        // TODO: adjust join if necessary
        this.states.push(tree.toDot().join(""));
        this.render();
    }
}