Closure typing cleanup, added grid and simple ability to clean to render cells

compile.sh

@@ -1 +1 @@
-../closure-library/closure/bin/build/closurebuilder.py --root=../closure-library/ --root=js-lib/ --namespace="ascii.launch" --compiler_flags="--warning_level=VERBOSE" --compiler_flags="--formatting=PRETTY_PRINT" --compiler_flags="--compilation_level=ADVANCED_OPTIMIZATIONS" --compiler_flags="--externs=jquery-1.9-externs.js" --output_mode=compiled --compiler_jar=closure-compiler.jar > js-compiled.js
+../closure-library/closure/bin/build/closurebuilder.py --root=../closure-library/ --root=js-lib/ --namespace="ascii.launch" --compiler_flags="--warning_level=VERBOSE" --compiler_flags="--formatting=PRETTY_PRINT" --compiler_flags="--language_in=ECMASCRIPT5" --compiler_flags="--compilation_level=ADVANCED_OPTIMIZATIONS" --compiler_flags="--externs=jquery-1.9-externs.js" --output_mode=compiled --compiler_jar=closure-compiler.jar > js-compiled.js

js-lib/common.js

@@ -1,17 +1,33 @@
 /**
  * Common classes.
  */
-goog.provide('ascii.Position');
+goog.provide('ascii.Vector');
 
 /**
  * @constructor
  */
-ascii.Position = function(x, y) {
+ascii.Vector = function(x, y) {
   /** type {Number} */ this.x = x;
   /** type {Number} */ this.y = y;
 };
 
-ascii.Position.prototype.equals = function(other) {
+/** @return {boolean} */
+ascii.Vector.prototype.equals = function(other) {
   return (this.x == other.x)
       && (this.y == other.y);
 };
+
+/** @return {ascii.Vector} */
+ascii.Vector.prototype.subtract = function(other) {
+  return new ascii.Vector(this.x - other.x, this.y - other.y);
+};
+
+/** @return {ascii.Vector} */
+ascii.Vector.prototype.add = function(other) {
+  return new ascii.Vector(this.x + other.x, this.y + other.y);
+};
+
+/** @return {number} */
+ascii.Vector.prototype.length = function() {
+  return Math.sqrt(this.x * this.x + this.y * this.y);
+};

js-lib/controller.js

@@ -4,40 +4,42 @@
  */
 goog.provide('ascii.Controller');
 
-goog.require('ascii.Position');
+goog.require('ascii.Vector');
 goog.require('ascii.View');
 
 /**
  * @constructor
  */
-ascii.Controller = function(view) {
+ascii.Controller = function(view, state) {
-  /** type {ascii.View} */ this.view = view;
+  /** @type {ascii.View} */ this.view = view;
-  /** type {ascii.StateControler */ this.stateController;
+  /** @type {ascii.State} */ this.state = state;
-  /** type {ascii.Position} */ this.pressPosition;
+
+  /** @type {ascii.Vector} */ this.pressVector;
 
   this.installDesktopBindings();
 };
 
 ascii.Controller.prototype.handlePress = function(x, y) {
-  this.pressPosition = new ascii.Position(x, y);
+  this.pressVector = new ascii.Vector(x, y);
 };
 
 ascii.Controller.prototype.handleMove = function(x, y) {
-  if (this.clickPosition) {
+  if (this.pressVector != null) {
     // Drag has started.
-    this.view.offset.x -= (x - this.pressPosition.x)/this.view.zoom;
+    this.view.offset.x -= (x - this.pressVector.x)/this.view.zoom;
-    this.view.offset.y -= (y - this.pressPosition.y)/this.view.zoom;
+    this.view.offset.y -= (y - this.pressVector.y)/this.view.zoom;
-    this.clickPosition = new ascii.Position(x, y);
+    this.pressVector = new ascii.Vector(x, y);
   }
 };
 
 ascii.Controller.prototype.handleRelease = function(x, y) {
-  if (this.pressPosition.equals(new ascii.Position(x, y))) {
+  var position = new ascii.Vector(x, y);
+  if (this.pressVector.equals(position)) {
     // We should handle this as a 'click' as there was no dragging involved.
     // Hand off to the state controller, as this will initiate a modification of the diagram itself.
-    // TODO: Work out how to pass off work into state-controller.
+    this.state.getCell(this.view.screenToFrame(position)).value = 'P';
   }
-  this.pressPosition = null;
+  this.pressVector = null;
 };
 
 ascii.Controller.prototype.handleZoom = function(delta) {

js-lib/launch.js

@@ -13,7 +13,7 @@ goog.require('ascii.View');
 ascii.launch = function() {
     var state = new ascii.State();
     var view = new ascii.View(state);
-    var controller = new ascii.Controller(view);
+    var controller = new ascii.Controller(view, state);
     view.animate();
 };
 

js-lib/state.js

@@ -3,6 +3,8 @@
  */
 goog.provide('ascii.State');
 
+/** @const */ ascii.MAX_GRID_SIZE = 1000;
+
 /**
  * @constructor
  */
@@ -20,22 +22,20 @@ ascii.Cell.prototype.setValue = function(value) {
  */
 ascii.State = function() {
   /** @type {Array.<Array.<ascii.Cell>>} */
-  this.cells = new Array(ascii.State.MAX_SIZE);
+  this.cells = new Array(ascii.MAX_GRID_SIZE);
 
   for (var i = 0; i < this.cells.length; i++) {
-    this.cells[i] = new Array(ascii.State.MAX_SIZE);
+    this.cells[i] = new Array(ascii.MAX_GRID_SIZE);
     for (var j = 0; j < this.cells[i].length; j++) {
       this.cells[i][j] = new ascii.Cell();
-      // Hack: Just fill image with random stuff for now.
-      if ((i % 10 == 0) && (j % 10 == 0)) {
-        var jstr = ("" + j);
-        this.cells[i][j].setValue(jstr.substring(jstr.length-1,jstr.length));
-      }
     }
   }
 };
 
-/** @const */ ascii.State.MAX_SIZE = 1000;
+/**
-
+ * @param {ascii.Vector} vector
-ascii.State.prototype.blah = function() {
+ * @return {ascii.Cell}
+ */
+ascii.State.prototype.getCell = function(vector) {
+  return this.cells[Math.round((vector.x-7.5)/15)][Math.round((vector.y+7.5)/15)];
 };

js-lib/view.js

@@ -3,17 +3,19 @@
  */
 goog.provide('ascii.View');
 
-goog.require('ascii.Position');
+goog.require('ascii.Vector');
+
+/** @const */ ascii.CHARACTER_PIXELS = 15;
 
 /**
  * @constructor
  */
 ascii.View = function(state) {
-  /** type {Element} */ this.canvas = document.getElementById('ascii-canvas');
+  /** @type {Element} */ this.canvas = document.getElementById('ascii-canvas');
-  /** type {Object} */ this.context = this.canvas.getContext('2d');
+  /** @type {Object} */ this.context = this.canvas.getContext('2d');
-  /** type {number} */ this.zoom = 1;
+  /** @type {number} */ this.zoom = 1;
-  /** type {ascii.Position} */ this.offset = new ascii.Position(0, 0);
+  /** @type {ascii.Vector} */ this.offset = new ascii.Vector(2000, 2000);
-  /** type {ascii.State} */ this.state = state;
+  /** @type {ascii.State} */ this.state = state;
   this.resizeCanvas();
 };
 
@@ -36,21 +38,61 @@ ascii.View.prototype.render = function() {
   this.context.scale(this.zoom, this.zoom);
   this.context.translate(this.canvas.width/2/this.zoom, this.canvas.height/2/this.zoom);
 
+  // Render the grid.
+  this.context.lineWidth="1";
+  this.context.strokeStyle="#DDDDDD";
+  this.context.beginPath();
+  for (var i = 0; i < this.state.cells.length; i++) {
+    this.context.moveTo(
+        i*ascii.CHARACTER_PIXELS - this.offset.x,
+        0 - this.offset.y);
+    this.context.lineTo(
+        i*ascii.CHARACTER_PIXELS - this.offset.x,
+        ascii.MAX_GRID_SIZE*ascii.CHARACTER_PIXELS - this.offset.y);
+  }
+  for (var j = 0; j < this.state.cells[0].length; j++) {
+    this.context.moveTo(
+        0 - this.offset.x,
+        j*ascii.CHARACTER_PIXELS - this.offset.y);
+    this.context.lineTo(
+        ascii.MAX_GRID_SIZE*ascii.CHARACTER_PIXELS - this.offset.x,
+        j*ascii.CHARACTER_PIXELS - this.offset.y);
+  }
+  this.context.stroke();
+
+  // Render cells.
   this.context.font = '15px Courier New';
   for (var i = 0; i < this.state.cells.length; i++) {
     for (var j = 0; j < this.state.cells[i].length; j++) {
       if (this.state.cells[i][j].value != null) {
-        this.context.fillText(this.state.cells[i][j].value, i*15 - this.offset.x, j*15 - this.offset.y);
+        this.context.fillText(this.state.cells[i][j].value,
+            i*ascii.CHARACTER_PIXELS - this.offset.x,
+            j*ascii.CHARACTER_PIXELS - this.offset.y);
       }
     }
   }
 };
 
 /**
- * Given a screen coordinate, find the integer cell position that it relates to.
+ * Given a screen coordinate, find the frame coordinates.
+ * @param {ascii.Vector} vector
+ * @return {ascii.Vector}
  */
-ascii.View.prototype.getCell = function(x, y) {
+ascii.View.prototype.screenToFrame = function(vector) {
+  return new ascii.Vector(
+      (vector.x - this.canvas.width/2)/this.zoom + this.offset.x,
+      (vector.y - this.canvas.height/2)/this.zoom + this.offset.y);
+};
 
+/**
+ * Given a frame coordinate, find the screen coordinates.
+ * @param {ascii.Vector} vector
+ * @return {ascii.Vector}
+ */
+ascii.View.prototype.frameToScreen = function(vector) {
+  return new ascii.Vector(
+      (vector.x - this.offset.x) * this.zoom + this.canvas.width/2,
+      (vector.y - this.offset.y) * this.zoom + this.canvas.height/2);
 };