chore: factor out recorder

Signed-off-by: Matej Focko <mfocko@redhat.com>

index.html

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

recorder.js

@@ -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();
+    }
+}

visualization.js

@@ -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;
 
 function insertCallback() {