const DURATION = 500; class Record { constructor(tree, message) { this.tree = tree; this.message = message; } render(graph, textBox) { graph.renderDot(this.tree); if (textBox) { textBox.textContent = this.message; } } } class Recorder { constructor(graph, textBox, id) { this.graph = graph; this.textBox = textBox; 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() { 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.states[this.rendered].render(this.graph, this.textBox); } return; } if ( this.rendering || !this.states || this.rendered == this.states.length - 1 ) { return; } this.rendering = true; this.rendered++; this.states[this.rendered].render(this.graph, this.textBox); } previous() { throw "not implemented!"; } next() { throw "not implemented!"; } record(tree, message) { // TODO: adjust join if necessary this.states.push(new Record(tree.toDot().join(""), message)); this.render(); } }