Made the view animate itself

js-lib/input-controller.js

@@ -23,13 +23,11 @@ asciiflow.Controller.prototype.handlePress = function(x, y) {
 asciiflow.Controller.prototype.handleZoom = function(delta) {
   this.view.zoom *= delta > 0 ? 1.1 : 0.9;
   this.view.zoom = Math.max(Math.min(this.view.zoom, 5), 0.2);
-  this.view.drawState();
 };
 
 asciiflow.Controller.prototype.handlePan = function(deltaX, deltaY) {
   this.view.offsetX += deltaX;
   this.view.offsetY += deltaY;
-  this.view.drawState();
 };
 
 asciiflow.Controller.prototype.installDesktopBindings = function() {

js-lib/launch.js

@@ -1,7 +1,6 @@
 /**
  * Application main entry point.
  */
-
 goog.provide('asciiflow.launch');
 
 goog.require('asciiflow.Controller');
@@ -12,7 +11,7 @@ asciiflow.launch = function() {
     var state = new asciiflow.State();
     var view = new asciiflow.View(state);
     var controller = new asciiflow.Controller(view);
-    view.drawState();
+    view.animate();
 };
 
 asciiflow.launch();

js-lib/view.js

@@ -21,11 +21,13 @@ asciiflow.View.prototype.resizeCanvas = function() {
   this.canvas.height = document.documentElement.clientHeight;
 };
 
-asciiflow.View.prototype.getContext = function() {
-  return this.context;
+asciiflow.View.prototype.animate = function() {
+  this.render();
+  var view = this;
+  window.requestAnimationFrame(function() { view.animate(); });
 };
 
-asciiflow.View.prototype.drawState = function() {
+asciiflow.View.prototype.render = function() {
   this.context.setTransform(1, 0, 0, 1, 0, 0);
   // Clear the visible area.
   this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);