Added dragging view mode

js-lib/common.js

@@ -0,0 +1,12 @@
+/**
+ * Common classes.
+ */
+goog.provide('asciiflow.common');
+
+/**
+ * @constructor
+ */
+asciiflow.common.Position = function(x, y) {
+  /** type {Number} */ this.x = x;
+  /** type {Number} */ this.y = y;
+};

js-lib/controller.js

@@ -12,12 +12,27 @@ goog.require('asciiflow.View');
 asciiflow.Controller = function(view) {
   /** type {asciiflow.View} */
   this.view = view;
+  /** type {asciiflow.common.Position} */
+  this.clickPosition;
 
   this.installDesktopBindings();
 };
 
 asciiflow.Controller.prototype.handlePress = function(x, y) {
-  
+  this.clickPosition = new asciiflow.common.Position(x, y);
+};
+
+asciiflow.Controller.prototype.handleMove = function(x, y) {
+  if (this.clickPosition) {
+    // Drag has started.
+    this.view.offset.x -= (x - this.clickPosition.x)/this.view.zoom;
+    this.view.offset.y -= (y - this.clickPosition.y)/this.view.zoom;
+    this.clickPosition = new asciiflow.common.Position(x, y);
+  }
+};
+
+asciiflow.Controller.prototype.handleRelease = function(x, y) {
+  this.clickPosition = null;
 };
 
 asciiflow.Controller.prototype.handleZoom = function(delta) {
@@ -25,20 +40,19 @@ asciiflow.Controller.prototype.handleZoom = function(delta) {
   this.view.zoom = Math.max(Math.min(this.view.zoom, 5), 0.2);
 };
 
-asciiflow.Controller.prototype.handlePan = function(deltaX, deltaY) {
-  this.view.offsetX += deltaX;
-  this.view.offsetY += deltaY;
-};
 
 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); }
+  $(this.view.canvas).mousedown(function(e) {
+      controller.handlePress(e.clientX, e.clientY);
+  });
+  $(this.view.canvas).mouseup(function(e) {
+      controller.handleRelease(e.clientX, e.clientY);
+  });
+  $(this.view.canvas).mousemove(function(e) {
+      controller.handleMove(e.clientX, e.clientY);
   });
 };

js-lib/view.js

@@ -3,6 +3,8 @@
  */
 goog.provide('asciiflow.View');
 
+goog.require('asciiflow.common');
+
 /**
  * @constructor
  */
@@ -10,8 +12,7 @@ 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.common.Position} */ this.offset = new asciiflow.common.Position(0, 0);
   /** type {asciiflow.State} */ this.state = state;
   this.resizeCanvas();
 };
@@ -39,9 +40,17 @@ asciiflow.View.prototype.render = function() {
   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.offsetX, j*15 - this.offsetY);
+        this.context.fillText(this.state.cells[i][j].value, i*15 - this.offset.x, j*15 - this.offset.y);
       }
     }
   }
 };
- 
+
+/**
+ * Given a screen coordinate, find the integer cell position that it relates to.
+ */
+asciiflow.View.prototype.getCell = function(x, y) {
+  
+};
+
+