Added clear method and removed edge of screen bug

index.html

@@ -46,10 +46,11 @@ button.active {
   background: #D0E0FF;
 }
 
-#export-button, #import-button {
+button.file {
   background: #D8D8D8;
 }
-#export-button.active, #import-button.active {
+
+button.file.active {
   background: #C8C8C8;
 }
 
@@ -73,17 +74,7 @@ button.active {
   margin: 0px;
 }
 
-#export-area, #import-area {
-  width: 380px;
-  height: 280px;
-  overflow: hidden;
-  resize: none;
-  margin: 5px;
-  font-family: monospace;
-  white-space: pre;
-}
-
-#input-area {
+textarea {
   width: 380px;
   height: 280px;
   overflow: hidden;
@@ -106,8 +97,9 @@ button.active {
 </pre></div>
 <div id="menu">
   <div id="buttons">
-    <button id="export-button" class="tool">Export</button>
-    <button id="import-button" class="tool">Import</button>
+    <button id="export-button" class="file tool">Export</button>
+    <button id="import-button" class="file tool">Import</button>
+    <button id="clear-button" class="file tool">Clear</button>
 
     <button id="box-button" class="tool active">Box</button>
     <button id="line-button" class="tool">Line</button>

js-lib/controller.js

@@ -160,7 +160,7 @@ ascii.Controller.prototype.installBindings = function() {
   }.bind(this));
 
   $('#import-submit-button').click(function(e) {
-    this.state.clearCanvas();
+    this.state.clear();
     this.state.fromText($('#import-area').val(),
         this.view.screenToCell(new ascii.Vector(
             this.view.canvas.width / 2,
@@ -211,6 +211,10 @@ ascii.Controller.prototype.updateButtons = function(id) {
   if (id == 'export-button') {
     $('#export-area').val(this.state.outputText());
   }
+  if (id == 'clear-button') {
+    this.state.clear();
+    this.view.dirty = true;
+  }
 };
 
 /**

js-lib/draw.js

@@ -135,7 +135,12 @@ ascii.DrawFreeform.prototype.end = function(position) {
 ascii.DrawFreeform.prototype.getCursor = function(position) {
   return 'crosshair';
 };
-ascii.DrawFreeform.prototype.handleKey = function(value) {};
+ascii.DrawFreeform.prototype.handleKey = function(value) {
+  if (value.length == 1) {
+    // The value is not a special character, so lets use it.
+    this.value = value;
+  }
+};
 
 /**
  * @constructor

js-lib/state.js

@@ -24,7 +24,7 @@ ascii.State = function() {
 /**
  * This clears the entire state, but is undoable.
  */
-ascii.State.prototype.clearCanvas = function() {
+ascii.State.prototype.clear = 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);

js-lib/view.js

@@ -154,8 +154,8 @@ ascii.View.prototype.frameToScreen = function(vector) {
  */
 ascii.View.prototype.frameToCell = function(vector) {
   return new ascii.Vector(
-    Math.round((vector.x - CHAR_PIXELS_H / 2) / CHAR_PIXELS_H),
-    Math.round((vector.y + CHAR_PIXELS_V / 2) / CHAR_PIXELS_V));
+    Math.min(Math.max(0, Math.round((vector.x - CHAR_PIXELS_H / 2) / CHAR_PIXELS_H)), MAX_GRID_SIZE),
+    Math.min(Math.max(0, Math.round((vector.y + CHAR_PIXELS_V / 2) / CHAR_PIXELS_V)), MAX_GRID_SIZE));
 };
 
 /**