Arrow tool, currently doesn't support re-sizing, also changed default dash to not be the em dash

index.html

@@ -339,6 +339,7 @@ textarea {
 
 .box-image { background-image: url('images/box-icon.gif'); }
 .line-image { background-image: url('images/line-icon.gif'); }
+.arrow-image { background-image: url('images/arrow-icon.gif'); }
 .freeform-image { background-image: url('images/freeform-icon.gif'); }
 .erase-image { background-image: url('images/erase-icon.gif'); }
 .move-image { background-image: url('images/move-icon.gif'); }
@@ -488,6 +489,7 @@ textarea {
 <div id="draw-tools">
   <button id="box-button" class="tool active box-image"></button>
   <button id="line-button" class="tool line-image"></button>
+  <button id="arrow-button" class="tool arrow-image"></button>
   <button id="freeform-button" class="tool freeform-image"></button>
   <button id="erase-button" class="tool erase-image"></button>
   <button id="move-button" class="tool move-image"></button>
@@ -525,6 +527,7 @@ textarea {
         Mobile: <span>Drag quickly to move. Press and hold to start drawing. Pinch to zoom in/out.</span></p>
         <div class="info-icon box-image"></div><div class="info-description">Draw boxes. <span>You can resize them later with the Resize tool.</span></div><br>
         <div class="info-icon line-image"></div><div class="info-description">Draw lines. <span>Connect it to another line to change the orientation.</span></div><br>
+        <div class="info-icon arrow-image"></div><div class="info-description">Draw arrows. <span>Connect it to another line to change the orientation.</span></div><br>
         <div class="info-icon freeform-image"></div><div class="info-description">Draw freehand. <span>Press a character on the keyboard and draw with it.</span></div><br>
         <div class="info-icon erase-image"></div><div class="info-description">Erase. <span>Drag out an area to remove its contents from the canvas.</span></div><br>
         <div class="info-icon move-image"></div><div class="info-description">Resize boxes and lines. <span>Drag a line to change its size/shape.</span></div><br>

js-lib/common.js

@@ -15,10 +15,18 @@ try {
 /** @const */ var MAX_GRID_HEIGHT = 600;
 
 /** @const */ var SPECIAL_VALUE = '+';
+/** @const */ var ALT_SPECIAL_VALUE = '^';
+/** @const */ var SPECIAL_ARROW_LEFT = '<';
+/** @const */ var SPECIAL_ARROW_UP = '^';
+/** @const */ var SPECIAL_ARROW_RIGHT = '>';
+/** @const */ var SPECIAL_ARROW_DOWN = 'v';
+/** @const */ var SPECIAL_VALUES = ['+', '\u2012', '\u2013'];
+/** @const */ var ALT_SPECIAL_VALUES = ['>', '<', '^', 'v'];
+/** @const */ var ALL_SPECIAL_VALUES = SPECIAL_VALUES.concat(ALT_SPECIAL_VALUES);
 
 /** @const */ var MAX_UNDO = 50;
 
-/** @const */ var SPECIAL_LINE_H = '\u2013';
+/** @const */ var SPECIAL_LINE_H = '\u2012';
 /** @const */ var SPECIAL_LINE_V = '|';
 
 /** @const */ var ERASE_CHAR = '\u2009';
@@ -155,7 +163,7 @@ ascii.Cell.prototype.getRawValue = function() {
 
 /** @return {boolean} */
 ascii.Cell.prototype.isSpecial = function() {
-  return this.getRawValue() == SPECIAL_VALUE;
+  return ALL_SPECIAL_VALUES.indexOf(this.getRawValue()) != -1;
 };
 
 /** @return {boolean} */

js-lib/controller.js

@@ -168,7 +168,10 @@ ascii.Controller.prototype.handleDrawButton = function(id) {
     this.drawFunction = new ascii.DrawBox(this.state);
   }
   if (id == 'line-button') {
-    this.drawFunction = new ascii.DrawLine(this.state);
+    this.drawFunction = new ascii.DrawLine(this.state, false);
+  }
+  if (id == 'arrow-button') {
+    this.drawFunction = new ascii.DrawLine(this.state, true);
   }
   if (id == 'freeform-button') {
     this.drawFunction = new ascii.DrawFreeform(this.state, "X");

js-lib/draw.js

@@ -104,9 +104,11 @@ ascii.DrawBox.prototype.handleKey = function(value) {};
  * @constructor
  * @implements {ascii.DrawFunction}
  * @param {ascii.State} state
+ * @param {boolean} isArrow
  */
-ascii.DrawLine = function(state) {
+ascii.DrawLine = function(state, isArrow) {
   this.state = state;
+  this.isArrow = isArrow;
   /** @type {ascii.Vector} */ this.startPosition = null;
 };
 
@@ -127,6 +129,9 @@ ascii.DrawLine.prototype.move = function(position) {
       (endContext.left && endContext.right);
 
   drawLine(this.state, this.startPosition, position, clockwise);
+  if (this.isArrow) {
+    this.state.drawValue(position, ALT_SPECIAL_VALUE);
+  }
 };
 
 /** @inheritDoc */

js-lib/state.js

@@ -95,7 +95,7 @@ ascii.State.prototype.clearDraw = function() {
 ascii.State.prototype.getDrawValue = function(position) {
   var cell = this.getCell(position);
   var value = cell.scratchValue != null ? cell.scratchValue : cell.value;
-  if (value != SPECIAL_VALUE) {
+  if (value != SPECIAL_VALUE && value != ALT_SPECIAL_VALUE) {
     return value;
   }
 
@@ -108,10 +108,41 @@ ascii.State.prototype.getDrawValue = function(position) {
   if (!context.left && !context.right && context.up && context.down) {
     return SPECIAL_LINE_V;
   }
-  if (context.left && context.right && context.up && context.down) {
+  if (context.sum() == 4) {
     return SPECIAL_LINE_H;
   }
+  if (value == SPECIAL_VALUE && context.sum() == 3) {
     return SPECIAL_VALUE;
+  }
+  if (value == ALT_SPECIAL_VALUE && context.sum() == 3) {
+    if (!context.left) {
+      return SPECIAL_ARROW_LEFT;
+    }
+    if (!context.up) {
+      return SPECIAL_ARROW_UP;
+    }
+    if (!context.down) {
+      return SPECIAL_ARROW_DOWN;
+    }
+    if (!context.right) {
+      return SPECIAL_ARROW_RIGHT;
+    }
+  }
+  if (value == ALT_SPECIAL_VALUE && context.sum() == 1) {
+    if (context.left) {
+      return SPECIAL_ARROW_RIGHT;
+    }
+    if (context.up) {
+      return SPECIAL_ARROW_DOWN;
+    }
+    if (context.down) {
+      return SPECIAL_ARROW_UP;
+    }
+    if (context.right) {
+      return SPECIAL_ARROW_LEFT;
+    }
+  }
+  return value;
 };
 
 /**
@@ -257,9 +288,12 @@ ascii.State.prototype.fromText = function(value, offset) {
       // Convert special output back to special chars.
       // TODO: This is a horrible hack, need to handle multiple special chars
       // correctly and preserve them through line drawing etc.
-      if (char == SPECIAL_LINE_H || char == SPECIAL_LINE_V) {
+      if (SPECIAL_VALUES.indexOf(char)  != -1) {
         char = SPECIAL_VALUE;
       }
+      if (ALT_SPECIAL_VALUES.indexOf(char) != -1) {
+        char = ALT_SPECIAL_VALUE;
+      }
       this.drawValue(new ascii.Vector(i, j).add(offset).subtract(middle), char);
     }
   }