Added dirty bits for efficient drawing

js-lib/controller.js

@@ -68,10 +68,10 @@ ascii.Controller.prototype.handleMove = function(position) {
 
   // Drag in progress, update the view origin.
   if (this.dragOrigin != null) {
-    this.view.offset = this.dragOrigin.add(
+    this.view.setOffset(this.dragOrigin.add(
         this.pressVector
             .subtract(position)
-            .scale(1 / this.view.zoom));
+            .scale(1 / this.view.zoom)));
   }
 };
 
@@ -93,8 +93,9 @@ ascii.Controller.prototype.handleRelease = function(position) {
  * @param {number} delta
  */
 ascii.Controller.prototype.handleZoom = function(delta) {
-  this.view.zoom *= delta > 0 ? 1.1 : 0.9;
+  var newzoom = this.view.zoom * (delta > 0 ? 1.1 : 0.9);
-  this.view.zoom = Math.max(Math.min(this.view.zoom, 5), 0.2);
+  newzoom = Math.max(Math.min(newzoom, 5), 0.2);
+  this.view.setZoom(newzoom);
 };
 
 /**

js-lib/state-controller.js

@@ -18,7 +18,7 @@ ascii.StateController = function(state) {
  * @param {ascii.Vector} position
  */
 ascii.StateController.prototype.handleDrawingPress = function(position) {
-  this.state.getCell(position).value = 'O';
+  this.state.setValue(position, 'O');
 };
 
 /**
@@ -33,5 +33,5 @@ ascii.StateController.prototype.handleDrawingRelease = function(position) {
  * @param {ascii.Vector} position
  */
 ascii.StateController.prototype.handleDrawingMove = function(position) {
-  this.state.getCell(position).value = 'O';
+  this.state.setValue(position, 'O');
 };

js-lib/state.js

@@ -11,15 +11,6 @@ ascii.Cell = function() {
   /** @type {?string} */ this.value = null;
 };
 
-/**
- * Sets the cells value.
- *
- * @param {string} value
- */
-ascii.Cell.prototype.setValue = function(value) {
-  this.value = value;
-};
-
 /**
  * Holds the entire state of the diagram as a 2D array of cells.
  *
@@ -28,6 +19,7 @@ ascii.Cell.prototype.setValue = function(value) {
 ascii.State = function() {
   /** @type {Array.<Array.<ascii.Cell>>} */
   this.cells = new Array(MAX_GRID_SIZE);
+  /** @type {boolean} */ this.dirty = true;
 
   for (var i = 0; i < this.cells.length; i++) {
     this.cells[i] = new Array(MAX_GRID_SIZE);
@@ -46,3 +38,14 @@ ascii.State = function() {
 ascii.State.prototype.getCell = function(vector) {
   return this.cells[vector.x][vector.y];
 };
+
+/**
+ * Sets the cells value at the given position.
+ *
+ * @param {ascii.Vector} position
+ * @param {string} value
+ */
+ascii.State.prototype.setValue = function(position, value) {
+  this.getCell(position).value = value;
+  this.dirty = true;
+};

js-lib/view.js

@@ -12,11 +12,15 @@ goog.require('ascii.Vector');
  * @param {ascii.State} state
  */
 ascii.View = function(state) {
+  /** @type {ascii.State} */ this.state = state;
+
   /** @type {Element} */ this.canvas = document.getElementById('ascii-canvas');
   /** @type {Object} */ this.context = this.canvas.getContext('2d');
+
   /** @type {number} */ this.zoom = 1;
   /** @type {ascii.Vector} */ this.offset = new ascii.Vector(7500, 7500);
-  /** @type {ascii.State} */ this.state = state;
+  /** @type {boolean} */ this.dirty = true;
+
   this.resizeCanvas();
 };
 
@@ -26,14 +30,18 @@ ascii.View = function(state) {
 ascii.View.prototype.resizeCanvas = function() {
   this.canvas.width = document.documentElement.clientWidth;
   this.canvas.height = document.documentElement.clientHeight;
+  this.dirty = true;
 };
 
 /**
  * Starts the animation loop for the canvas. Should only be called once.
  */
 ascii.View.prototype.animate = function() {
-  // TODO: Only render incrementally.
+  if (this.dirty || this.state.dirty) {
-  this.render();
+    this.dirty = false;
+    this.state.dirty = false;
+    this.render();
+  }
   var view = this;
   window.requestAnimationFrame(function() { view.animate(); });
 };
@@ -96,6 +104,22 @@ ascii.View.prototype.render = function() {
   }
 };
 
+/**
+ * @param {number} zoom
+ */
+ascii.View.prototype.setZoom = function(zoom) {
+  this.zoom = zoom;
+  this.dirty = true;
+};
+
+/**
+ * @param {ascii.Vector} offset
+ */
+ascii.View.prototype.setOffset = function(offset) {
+  this.offset = offset;
+  this.dirty = true;
+};
+
 /**
  * Given a screen coordinate, find the frame coordinates.
  * @param {ascii.Vector} vector