chore: factor out recorder

Signed-off-by: Matej Focko <mfocko@redhat.com>
This commit is contained in:
Matej Focko 2022-05-07 16:54:28 +02:00
parent c3a9a48d99
commit f945d4dcdb
Signed by: mfocko
GPG key ID: 7C47D46246790496
3 changed files with 79 additions and 61 deletions

View file

@ -48,5 +48,6 @@
<script src="wavl.js"></script> <script src="wavl.js"></script>
<script src="ravl.js"></script> <script src="ravl.js"></script>
<script src="recorder.js"></script>
<script src="visualization.js"></script> <script src="visualization.js"></script>
</body> </body>

76
recorder.js Normal file
View file

@ -0,0 +1,76 @@
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();
}
}

View file

@ -1,65 +1,6 @@
const DURATION = 500; let recorder = new Recorder(d3.select("#graph").graphviz(), "graph");
class Recorder { let tree = new WAVLTree();
constructor(graph) {
this.graph = graph;
this.rendered = -1;
this.rendering = false;
this.states = new Array();
this.unblockRendering = ((recorder) => () => {
recorder.rendering = false;
})(this);
this.initGraph();
}
initGraph() {
this.graph.transition(() =>
d3
.transition("main")
.ease(d3.easeLinear)
.on("end", this.unblockRendering)
.delay(500)
.duration(DURATION)
);
}
render() {
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();
}
}
let recorder = new Recorder(d3.select("#graph").graphviz());
let tree = new AVLTree();
tree.recorder = recorder; tree.recorder = recorder;
function insertCallback() { function insertCallback() {