Working version of select tool

index.html

@@ -350,6 +350,7 @@ textarea {
 .clear-image { background-image: url('images/clear-icon.gif'); }
 .undo-image { background-image: url('images/undo-icon.gif'); }
 .redo-image { background-image: url('images/redo-icon.gif'); }
+.select-image { background-image: url('images/select-icon.gif'); }
 
 .info-image { background-image: url('images/info-icon.gif'); }
 
@@ -491,6 +492,7 @@ textarea {
   <button id="erase-button" class="tool erase-image"></button>
   <button id="move-button" class="tool move-image"></button>
   <button id="text-button" class="tool text-image"></button>
+  <button id="select-button" class="tool select-image"></button>
 </div>
 
 <div id="file-tools">

js-lib/common.js

@@ -102,6 +102,35 @@ ascii.Vector.prototype.scale = function(scale) {
   return new ascii.Vector(this.x * scale, this.y * scale);
 };
 
+/**
+ * Represents a box with normalized position vectors.
+ *
+ * @constructor
+ * @param {ascii.Vector} a
+ * @param {ascii.Vector} b
+ */
+ascii.Box = function(a, b) {
+  /** type {Number} */ this.startX = Math.min(a.x, b.x);
+  /** type {Number} */ this.startY = Math.min(a.y, b.y);
+  /** type {Number} */ this.endX = Math.max(a.x, b.x);
+  /** type {Number} */ this.endY = Math.max(a.y, b.y);
+};
+
+/** @return {ascii.Vector} */
+ascii.Box.prototype.topLeft = function() {
+  return new ascii.Vector(this.startX, this.startY);
+};
+
+/** @return {ascii.Vector} */
+ascii.Box.prototype.bottomRight = function() {
+  return new ascii.Vector(this.endX, this.endY);
+};
+
+/** @return {boolean} */
+ascii.Box.prototype.contains = function(position) {
+  return position.x >= this.startX && position.x <= this.endX && position.y >= this.startY && position.y <= this.endY;
+};
+
 /** @const */ var DIR_LEFT = new ascii.Vector(-1, 0);
 /** @const */ var DIR_RIGHT = new ascii.Vector(1, 0);
 /** @const */ var DIR_UP = new ascii.Vector(0, -1);
@@ -168,7 +197,7 @@ ascii.CellContext.prototype.sum = function() {
  * @constructor
  * @struct
  * @param {ascii.Vector} position
- * @param {string} value
+ * @param {string|null} value
  */
 ascii.MappedValue = function(position, value) {
   this.position = position;

js-lib/controller.js

@@ -118,6 +118,7 @@ ascii.Controller.prototype.installBindings = function() {
         this.view.screenToCell(new ascii.Vector(
             this.view.canvas.width / 2,
             this.view.canvas.height / 2)));
+    this.state.commitDraw();
     $('#import-area').val('');
     $('.dialog').removeClass('visible');
   }.bind(this));
@@ -181,6 +182,9 @@ ascii.Controller.prototype.handleDrawButton = function(id) {
   if (id == 'text-button') {
     this.drawFunction = new ascii.DrawText(this.state, this.view);
   }
+  if (id == 'select-button') {
+    this.drawFunction = new ascii.DrawSelect(this.state);
+  }
   this.state.commitDraw();
   this.view.canvas.focus();
 };

js-lib/draw.js

@@ -14,10 +14,11 @@
 function drawLine(state, startPosition, endPosition, clockwise, opt_value) {
   var value = opt_value || SPECIAL_VALUE;
 
-  var startX = Math.min(startPosition.x, endPosition.x);
+  var box = new ascii.Box(startPosition, endPosition);
-  var startY = Math.min(startPosition.y, endPosition.y);
+  var startX = box.startX;
-  var endX = Math.max(startPosition.x, endPosition.x);
+  var startY = box.startY;
-  var endY = Math.max(startPosition.y, endPosition.y);
+  var endX = box.endX;
+  var endY = box.endY;
 
   var midX = clockwise ? endPosition.x : startPosition.x;
   var midY = clockwise ? startPosition.y : endPosition.y;
@@ -492,3 +493,120 @@ ascii.DrawMove.prototype.getCursor = function(position) {
 /** @inheritDoc */
 ascii.DrawMove.prototype.handleKey = function(value) {};
 
+/**
+ * @constructor
+ * @implements {ascii.DrawFunction}
+ * @param {ascii.State} state
+ */
+ascii.DrawSelect = function(state) {
+  this.state = state;
+  /** @type {ascii.Vector} */
+  this.startPosition = null;
+  /** @type {ascii.Vector} */
+  this.endPosition = null;
+  /** @type {ascii.Vector} */
+  this.dragStart = null;
+  /** @type {ascii.Vector} */
+  this.dragEnd = null;
+
+  /** @type {boolean} */
+  this.finished = true;
+
+  /** @type {Array.<ascii.MappedValue>} */
+  this.selectedCells = null;
+};
+
+/** @inheritDoc */
+ascii.DrawSelect.prototype.start = function(position) {
+  // Must be dragging.
+  if (this.startPosition != null &&
+      this.endPosition != null &&
+      new ascii.Box(this.startPosition, this.endPosition).contains(position)) {
+    this.dragStart = position;
+
+    var nonEmptyCells = this.state.scratchCells.filter(function(value) {
+      var rawValue = value.cell.getRawValue();
+      return value.cell.getRawValue() != null && value.cell.getRawValue() != ERASE_CHAR;
+    });
+    this.selectedCells = nonEmptyCells.map(function(value) {
+      return new ascii.MappedValue(value.position, value.cell.getRawValue());
+    });
+
+    var eraser = new ascii.DrawErase(this.state);
+    eraser.start(this.startPosition);
+    eraser.move(this.endPosition);
+    eraser.end();
+    // Hack! Erase adds an undo state, just get rid of it.
+    this.state.undoStates.pop();
+
+    this.dragMove(position);
+
+  } else {
+    this.startPosition = position;
+    this.endPosition = null;
+    this.finished = false;
+    this.move(position);
+  }
+};
+
+/** @inheritDoc */
+ascii.DrawSelect.prototype.move = function(position) {
+  this.endPosition = position;
+
+  if (this.dragStart != null) {
+    this.dragMove(position);
+  }
+
+  if (this.finished == true) {
+    return;
+  }
+
+  this.state.clearDraw();
+
+  var box = new ascii.Box(this.startPosition, position);
+
+  for (var i = box.startX; i <= box.endX; i++) {
+    for (var j = box.startY; j <= box.endY; j++) {
+      var current = new ascii.Vector(i, j);
+      // Effectively highlights the starting cell.
+      var currentValue = this.state.getCell(current).getRawValue();
+      this.state.drawValue(current,
+          currentValue == null ? ERASE_CHAR : currentValue);
+    }
+  }
+};
+
+ascii.DrawSelect.prototype.dragMove = function(position) {
+  this.dragEnd = position;
+  this.state.clearDraw();
+  var diff = this.dragStart.subtract(this.dragEnd);
+  for (var i in this.selectedCells) {
+    this.state.drawValue(this.selectedCells[i].position.subtract(diff), this.selectedCells[i].value);
+  }
+};
+
+/** @inheritDoc */
+ascii.DrawSelect.prototype.end = function() {
+  if (this.dragStart != null) {
+    this.state.commitDraw();
+    this.startPosition = null;
+    this.endPosition = null;
+  }
+  this.dragStart = null;
+  this.dragEnd = null;
+  this.finished = true;
+};
+
+/** @inheritDoc */
+ascii.DrawSelect.prototype.getCursor = function(position) {
+  if (this.startPosition != null &&
+      this.endPosition != null &&
+      new ascii.Box(this.startPosition, this.endPosition).contains(position)) {
+    return 'pointer';
+  }
+  return 'default';
+};
+
+/** @inheritDoc */
+ascii.DrawSelect.prototype.handleKey = function(value) {};
+

js-lib/state.js

@@ -201,13 +201,15 @@ ascii.State.prototype.redo = function() {
 
 /**
  * Outputs the entire contents of the diagram as text.
+ * @param {ascii.Box=} opt_box
  * @return {string}
  */
-ascii.State.prototype.outputText = function() {
+ascii.State.prototype.outputText = function(opt_box) {
   // Find the first/last cells in the diagram so we don't output everything.
   var start = new ascii.Vector(Number.MAX_VALUE, Number.MAX_VALUE);
   var end = new ascii.Vector(-1, -1);
 
+  if (!opt_box) {
     for (var i = 0; i < this.cells.length; i++) {
       for (var j = 0; j < this.cells[i].length; j++) {
         if (this.cells[i][j].getRawValue() != null) {
@@ -219,6 +221,10 @@ ascii.State.prototype.outputText = function() {
       }
     }
     if (end.x < 0) { return '' }
+  } else {
+    start = opt_box.topLeft();
+    end = opt_box.bottomRight();
+  }
 
   var output = '';
   for (var j = start.y; j <= end.y; j++) {
@@ -257,5 +263,4 @@ ascii.State.prototype.fromText = function(value, offset) {
       this.drawValue(new ascii.Vector(i, j).add(offset).subtract(middle), char);
     }
   }
-  this.commitDraw();
 };