Added import tool

index.html

@@ -46,10 +46,10 @@ button.active {
   background: #D0E0FF;
 }
 
-#export-button {
+#export-button, #import-button {
   background: #D8D8D8;
 }
-#export-button.active {
+#export-button.active, #import-button.active {
   background: #C8C8C8;
 }
 
@@ -57,11 +57,6 @@ button.active {
   position: fixed;
   left: 0px;
   top: 0px;
-};
-
-#export-area {
-  width: 100%;
-  height: 100px;
 }
 
 #logo {
@@ -78,7 +73,17 @@ button.active {
   margin: 0px;
 }
 
-#export-area {
+#export-area, #import-area {
+  width: 380px;
+  height: 280px;
+  overflow: hidden;
+  resize: none;
+  margin: 5px;
+  font-family: monospace;
+  white-space: pre;
+}
+
+#input-area {
   width: 380px;
   height: 280px;
   overflow: hidden;
@@ -102,6 +107,8 @@ button.active {
 <div id="menu">
   <div id="buttons">
     <button id="export-button" class="tool">Export</button>
+    <button id="import-button" class="tool">Import</button>
+
     <button id="box-button" class="tool active">Box</button>
     <button id="line-button" class="tool">Line</button>
     <button id="freeform-button" class="tool">Draw</button>
@@ -114,6 +121,10 @@ button.active {
   <div id="export-button-dialog" class="dialog">
     <textarea id="export-area"></textarea>
   </div>
+  <div id="import-button-dialog" class="dialog">
+    <textarea id="import-area"></textarea>
+    <button id="import-submit-button">Submit</button>
+  </div>
 </div>
 <canvas id="ascii-canvas"></canvas>
 <script src="jquery-1.9.1.min.js"></script>

js-lib/controller.js

@@ -159,6 +159,16 @@ ascii.Controller.prototype.installBindings = function() {
     this.view.dirty = true;
   }.bind(this));
 
+  $('#import-submit-button').click(function(e) {
+    this.state.clearCanvas();
+    this.state.fromText($('#import-area').val(),
+        this.view.screenToCell(new ascii.Vector(
+            this.view.canvas.width / 2,
+            this.view.canvas.height / 3)));
+    $('#import-area').val('');
+    this.view.dirty = true;
+  }.bind(this));
+
   $(window).keypress(function(e) {
     this.handleKeyPress(e);
   }.bind(this));
@@ -176,8 +186,8 @@ ascii.Controller.prototype.updateButtons = function(id) {
   $('#buttons > button.tool').removeClass('active');
   $('.dialog').removeClass('visible');
 
-  $('#' + id).addClass('active');
+  $('#' + id).toggleClass('active');
-  $('#' + id + '-dialog').addClass('visible');
+  $('#' + id + '-dialog').toggleClass('visible');
 
   // Install the right draw tool based on button pressed.
   if (id == 'box-button') {

js-lib/state.js

@@ -21,6 +21,21 @@ ascii.State = function() {
   }
 };
 
+/**
+ * This clears the entire state, but is undoable.
+ */
+ascii.State.prototype.clearCanvas = function() {
+  for (var i = 0; i < this.cells.length; i++) {
+    for (var j = 0; j < this.cells[i].length; j++) {
+      var position = new ascii.Vector(i, j);
+      if(this.cells[i][j].getRawValue() != null) {
+        this.drawValue(new ascii.Vector(i, j), ERASE_CHAR);
+      }
+    }
+  }
+  this.commitDraw();
+};
+
 /**
  * Returns the cell at the given coordinates.
  *
@@ -129,7 +144,7 @@ ascii.State.prototype.commitDraw = function(opt_skipSave) {
     oldValues.push(new ascii.MappedValue(position, cell.value != null ? cell.value : ' '));
 
     var newValue = cell.getRawValue();
-    if (newValue == ERASE_CHAR) {
+    if (newValue == ERASE_CHAR || newValue == ' ') {
       newValue = null;
     }
     cell.scratchValue = null;
@@ -193,3 +208,17 @@ ascii.State.prototype.outputText = function() {
   }
   return output;
 };
+
+/**
+ * Loads the given text into the diagram starting at the given offset.
+ */
+ascii.State.prototype.fromText = function(value, offset) {
+  var lines = value.split('\n');
+  for (var j = 0; j < lines.length; j++) {
+    var line = lines[j];
+    for (var i = 0; i < line.length; i++) {
+      this.drawValue(new ascii.Vector(i, j).add(offset), line.charAt(i));
+    }
+  }
+  this.commitDraw();
+};