Basic version of button panel working, added line tool

js-lib/controller.js

@@ -27,8 +27,7 @@ ascii.Controller = function(view, state) {
   /** @type {ascii.Vector} */ this.lastMoveCell;
   /** @type {number} */ this.pressTimestamp;
 
-  this.installDesktopBindings();
-  this.installTouchBindings();
+  this.installBindings();
 };
 
 /**
@@ -40,7 +39,7 @@ ascii.Controller.prototype.handlePress = function(position) {
 
   // Check to see if a drag happened in the given allowed time.
   window.setTimeout(function() {
-    if (this.dragOrigin == null) {
+    if (this.dragOrigin == null && this.pressVector != null) {
       this.stateController.handleDrawingPress(this.view.screenToCell(position));
       this.view.dirty = true;
     }
@@ -110,43 +109,45 @@ ascii.Controller.prototype.handleZoom = function(delta) {
 /**
  * Installs input bindings for desktop devices.
  */
-ascii.Controller.prototype.installDesktopBindings = function() {
+ascii.Controller.prototype.installBindings = function() {
   var controller = this;
+
   $(this.view.canvas).bind('mousewheel', function(e) {
       controller.handleZoom(e.originalEvent.wheelDelta);
   });
+
   $(this.view.canvas).mousedown(function(e) {
       controller.handlePress(new ascii.Vector(e.clientX, e.clientY));
   });
+
   $(this.view.canvas).mouseup(function(e) {
       controller.handleRelease(new ascii.Vector(e.clientX, e.clientY));
   });
+
   $(this.view.canvas).mouseleave(function(e) {
       controller.handleRelease(new ascii.Vector(e.clientX, e.clientY));
   });
+
   $(this.view.canvas).mousemove(function(e) {
       controller.handleMove(new ascii.Vector(e.clientX, e.clientY));
   });
-  $(window).resize(function(e) { controller.view.resizeCanvas() });
-};
 
-/**
- * Installs input bindings for touch devices.
- */
-ascii.Controller.prototype.installTouchBindings = function() {
-  var controller = this;
+  $(window).resize(function(e) { controller.view.resizeCanvas() });
+
   $(this.view.canvas).bind('touchstart', function(e) {
       e.preventDefault();
       controller.handlePress(new ascii.Vector(
          e.originalEvent.touches[0].pageX,
          e.originalEvent.touches[0].pageY));
   });
+
   $(this.view.canvas).bind('touchend', function(e) {
       e.preventDefault();
       // TODO: This works for now as we don't use a touchend position anywhere.
       //       Need to track last position from touchmove and use it here.
       controller.handleRelease(new ascii.Vector(0, 0));
   });
+
   $(this.view.canvas).bind('touchmove', function(e) {
       e.preventDefault();
       controller.handleMove(new ascii.Vector(

js-lib/state-controller.js

@@ -62,6 +62,55 @@ DrawBox.prototype.draw = function() {
   }
 };
 
+/**
+ * @constructor
+ * @implements {DrawFunction}
+ * @param {ascii.State} state
+ */
+function DrawLine(state) {
+  this.state = state;
+  /** @type {ascii.Vector} */ this.startPosition = null;
+  /** @type {ascii.Vector} */ this.endPosition = null;
+}
+
+DrawLine.prototype.start = function(position) {
+  this.startPosition = position;
+  this.endPosition = position;
+  this.draw();
+};
+DrawLine.prototype.move = function(position) {
+  this.endPosition = position;
+  this.state.clearDraw();
+  this.draw();
+};
+DrawLine.prototype.end = function(position) {
+  this.state.commitDraw();
+};
+
+/** Draws the currently dragged out line. */
+DrawLine.prototype.draw = function() {
+  // TODO: Infer line direction.
+  var isClockwise = true;
+
+  var hX1 = Math.min(this.startPosition.x, this.endPosition.x);
+  var vY1 = Math.min(this.startPosition.y, this.endPosition.y);
+  var hX2 = Math.max(this.startPosition.x, this.endPosition.x);
+  var vY2 = Math.max(this.startPosition.y, this.endPosition.y);
+
+  var hY = isClockwise ? this.startPosition.y : this.endPosition.y;
+  var vX = isClockwise ? this.endPosition.x : this.startPosition.x;
+
+  while (hX1++ < hX2) {
+    this.state.drawValue(new ascii.Vector(hX1, hY), '\u2014');
+  }
+  while (vY1++ < vY2) {
+    this.state.drawValue(new ascii.Vector(vX, vY1), '|');
+  }
+  this.state.drawValue(new ascii.Vector(this.startPosition.x, this.startPosition.y), '+');
+  this.state.drawValue(new ascii.Vector(this.endPosition.x, this.endPosition.y), '+');
+  this.state.drawValue(new ascii.Vector(vX, hY), '+');
+};
+
 /**
  * @constructor
  * @implements {DrawFunction}
@@ -92,6 +141,18 @@ DrawFreeform.prototype.end = function(position) {
 ascii.StateController = function(state) {
   /** @type {ascii.State} */ this.state = state;
   /** @type {DrawFunction} */ this.drawFunction = new DrawBox(state);
+
+  $('#box-button').click(function(e) {
+    this.drawFunction = new DrawBox(state);
+  }.bind(this));
+
+  $('#line-button').click(function(e) {
+    this.drawFunction = new DrawLine(state);
+  }.bind(this));
+
+  $('#freeform-button').click(function(e) {
+    this.drawFunction = new DrawFreeform(state);
+  }.bind(this));
 };
 
 /**

root.html

@@ -4,9 +4,42 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
 <title>asciiflow-2.0</title>
+<style>
+#menu {
+  margin-left: auto;
+  margin-right: auto;
+  position: absolute;
+  top: 5px;
+  left: 0px;
+  right: 0px;
+  z-index: 100;
+  width: 300px;
+  background: #EEE;
+  text-align: center;
+}
+
+button {
+  width: 97px;
+  height: 30px;
+  text-align: center;
+  cursor: pointer;
+}
+
+#ascii-canvas {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  cursor: crosshair;
+};
+</style>
 </head>
 <body>
-<canvas id="ascii-canvas" style="position:absolute; left:0px; top:0px;"></canvas>
+<div id="menu">
+  <button id="box-button">Box</button>
+  <button id="line-button">Line</button>
+  <button id="freeform-button">Freeform</button>
+</div>
+<canvas id="ascii-canvas"></canvas>
 <script src="jquery-1.9.1.min.js"></script>
 <script src="js-compiled.js"></script>
 </body>