jQUery externs installed, some progress made on view transformations and basic controller introduced

compile.sh

@@ -1 +1 @@
-../closure-library/closure/bin/build/closurebuilder.py --root=../closure-library/ --root=js-lib/ --namespace="asciiflow.launch" --compiler_flags="--warning_level=VERBOSE" --compiler_flags="--formatting=PRETTY_PRINT" --compiler_flags="--compilation_level=ADVANCED_OPTIMIZATIONS" --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="asciiflow.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

js-lib/input-controller.js

@@ -0,0 +1,46 @@
+/**
+ * Handles user input events and modifies state.
+ * Core logic comes through this class.
+ */
+goog.provide('asciiflow.Controller');
+
+goog.require('asciiflow.View');
+
+/**
+ * @constructor
+ */
+asciiflow.Controller = function(view) {
+  /** type {asciiflow.View} */
+  this.view = view;
+
+  this.installDesktopBindings();
+};
+
+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() {
+  var controller = this;
+  $(this.view.canvas).bind('mousewheel', function(e) {
+      controller.handleZoom(e.originalEvent.wheelDelta);
+  });
+  $(document).keydown(function(e) {
+      if (e.keyCode == 37) { controller.handlePan(-10, 0); }
+      if (e.keyCode == 38) { controller.handlePan(0, -10); }
+      if (e.keyCode == 39) { controller.handlePan(10, 0); }
+      if (e.keyCode == 40) { controller.handlePan(0, 10); }
+  });
+};

js-lib/launch.js

@@ -1,15 +1,18 @@
 /**
- * 
+ * Application main entry point.
  */
 
 goog.provide('asciiflow.launch');
+
+goog.require('asciiflow.Controller');
+goog.require('asciiflow.State');
 goog.require('asciiflow.View');
 
 asciiflow.launch = function() {
-    var view = new asciiflow.View();
-    var context = view.getContext();
-    context.font = 'italic 10pt Calibri';
-    context.fillText('Hello World!', 150, 100);
+    var state = new asciiflow.State();
+    var view = new asciiflow.View(state);
+    var controller = new asciiflow.Controller(view);
+    view.drawState();
 };
 
 asciiflow.launch();

js-lib/view.js

@@ -3,23 +3,44 @@
  */
 goog.provide('asciiflow.View');
 
-goog.require('asciiflow.constants');
-
 /**
  * @constructor
  */
-asciiflow.View = function() {
-    this.canvasElem = document.getElementById('ascii-canvas');
-
+asciiflow.View = function(state) {
+  /** type {Element} */ this.canvas = document.getElementById('ascii-canvas');
+  /** type {Object} */ this.context = this.canvas.getContext('2d');
+  /** type {number} */ this.zoom = 1;
+  /** type {number} */ this.offsetX = 0;
+  /** type {number} */ this.offsetY = 0;
+  /** type {asciiflow.State} */ this.state = state;
   this.resizeCanvas();
-    // Setup view-port size monitoring.
 };
 
 asciiflow.View.prototype.resizeCanvas = function() {
-    this.canvasElem.width = document.documentElement.clientWidth;
-    this.canvasElem.height = document.documentElement.clientHeight;
+  this.canvas.width = document.documentElement.clientWidth;
+  this.canvas.height = document.documentElement.clientHeight;
 };
 
 asciiflow.View.prototype.getContext = function() {
-    return this.canvasElem.getContext('2d');
+  return this.context;
 };
+
+asciiflow.View.prototype.drawState = 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);
+
+  this.context.translate(-this.offsetX/this.zoom, -this.offsetY/this.zoom);
+  this.context.scale(this.zoom, this.zoom);
+  this.context.translate(this.canvas.width/2/this.zoom, this.canvas.height/2/this.zoom);
+
+  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, j*15);
+      }
+    }
+  }
+};
+ 

root.html

@@ -6,6 +6,7 @@
 </head>
 <body>
 <canvas id="ascii-canvas" style="position:absolute; left:0px; top:0px;"></canvas>
+<script src="jquery-1.9.1.min.js"></script>
 <script src="js-compiled.js"></script>
 </body>
 </html>