slow graph traversal animation now working

manuelkiessling · Apr 4, 2012 · c4975ab · c4975ab
1 parent e115a1d
commit c4975ab
Showing 1 changed file with 22 additions and 9 deletions.
diff --git a/app/index.js b/app/index.js
@@ -1,8 +1,9 @@
 define(['../lib/EdgeNode',
         '../lib/insertEdge',
         '../lib/drawer/canvas',
-        '../lib/traverse/bfs'],
-  function(EdgeNode, insertEdge, canvasDrawer, bfs) {
+        '../lib/traverse/bfs',
+        '../lib/helper/Queue'],
+  function(EdgeNode, insertEdge, canvasDrawer, bfs, Queue) {
 
     var graph = {
       edges: []
@@ -20,29 +21,41 @@ define(['../lib/EdgeNode',
 
     canvasDrawer.init(document.getElementById('canvas'), 10, 10, graph);
 
-    var loop = setInterval(function() {
+    var canvasLoop = setInterval(function() {
       canvasDrawer.update();
       canvasDrawer.draw();
     }, 1000 / 60);
 
+    var eventQueue = new Queue();
+
     var callbacks = {
       startedProcessingVertex: function(vertexNumber) {
-        canvasDrawer.setVertexStateProcessingStarted(vertexNumber);
-        canvasDrawer.draw();
+        eventQueue.enqueue(function() {
+          canvasDrawer.setVertexStateProcessingStarted(vertexNumber);
+        });
       },
       finishedProcessingVertex: function(vertexNumber) {
-        canvasDrawer.setVertexStateProcessingFinished(vertexNumber);
-        canvasDrawer.draw();
+        eventQueue.enqueue(function() {
+          canvasDrawer.setVertexStateProcessingFinished(vertexNumber);
+        });
       },
       discoveredVertex: function(vertexNumber) {
-        canvasDrawer.setVertexStateDiscovered(vertexNumber);
-        canvasDrawer.draw();
+        eventQueue.enqueue(function() {
+          canvasDrawer.setVertexStateDiscovered(vertexNumber);
+        });
       },
       foundEdge: function(startVertexNumber, endVertexNumber) {
         //
       }
     };
 
     bfs(graph, 32, callbacks);
+
+    var eventLoop = setInterval(function() {
+      var event = eventQueue.dequeue();
+      if (typeof event === 'function') {
+        event();
+      }
+    }, 500);
   }
 );