Feature : display cursor coordinates

- new controller CursorCoordinatesController
- added div in right column (bottom:0)
- 3 new events : CURSOR_MOVED, DRAG_START, DRAG_END
- modified tools to fire events when necessary

The cursor coordinates are displayed when the mouse is hovering the
drawing area. When the mouse leaves the area, the indication disappears.
If the user is using a tool that involves dragging (selection, rectangle,
circle), the indicator displays the original coordinates (captured during
drag start) and the current coordinates.

src/js/drawingtools/BaseTool.js

@@ -10,9 +10,13 @@
 
   ns.BaseTool.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {};
 
-  ns.BaseTool.prototype.moveToolAt = function(col, row, color, frame, overlay, event) {};
+  ns.BaseTool.prototype.moveToolAt = function(col, row, color, frame, overlay, event) {
+    $.publish(Events.CURSOR_MOVED, [col, row]);
+  };
 
   ns.BaseTool.prototype.moveUnactiveToolAt = function(col, row, color, frame, overlay, event) {
+    $.publish(Events.CURSOR_MOVED, [col, row]);
+
     if (overlay.containsPixel(col, row)) {
       if (!isNaN(this.highlightedPixelCol) &&
         !isNaN(this.highlightedPixelRow) &&

src/js/drawingtools/Move.js

@@ -29,6 +29,7 @@
   };
 
   ns.Move.prototype.moveToolAt = function(col, row, color, frame, overlay, event) {
+    $.publish(Events.CURSOR_MOVED, [col, row]);
     var colDiff = col - this.startCol, rowDiff = row - this.startRow;
     this.shiftFrame(colDiff, rowDiff, frame, this.frameClone);
   };

src/js/drawingtools/ShapeTool.js

@@ -16,6 +16,7 @@
    * @override
    */
   ns.ShapeTool.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {
+    $.publish(Events.DRAG_START, [col, row]);
     this.startCol = col;
     this.startRow = row;
 
@@ -24,12 +25,14 @@
   };
 
   ns.ShapeTool.prototype.moveToolAt = function(col, row, color, frame, overlay, event) {
+    var coords = this.getCoordinates_(col, row, event);
+    $.publish(Events.CURSOR_MOVED, [coords.col, coords.row]);
+
     overlay.clear();
     if(color == Constants.TRANSPARENT_COLOR) {
       color = Constants.SELECTION_TRANSPARENT_COLOR;
     }
 
-    var coords = this.getCoordinates_(col, row, event);
     // draw in overlay
     this.draw_(coords.col, coords.row, color, overlay);
   };
@@ -46,6 +49,7 @@
     }
     var coords = this.getCoordinates_(col, row, event);
     this.draw_(coords.col, coords.row, color, frame);
+    $.publish(Events.DRAG_END, [col, row]);
   };
 
   /**

src/js/drawingtools/SimplePen.js

@@ -28,7 +28,11 @@
     this.previousRow = row;
   };
 
+  /**
+   * @override
+   */
   ns.SimplePen.prototype.moveToolAt = function(col, row, color, frame, overlay, event) {
+    $.publish(Events.CURSOR_MOVED, [col, row]);
     if((Math.abs(col - this.previousCol) > 1) || (Math.abs(row - this.previousRow) > 1)) {
       // The pen movement is too fast for the mousemove frequency, there is a gap between the
       // current point and the previously drawn one.

src/js/drawingtools/Stroke.js

@@ -37,6 +37,8 @@
   };
 
   ns.Stroke.prototype.moveToolAt = function(col, row, color, frame, overlay, event) {
+    $.publish(Events.CURSOR_MOVED, [col, row]);
+
     overlay.clear();
 
     // When the user moussemove (before releasing), we dynamically compute the

src/js/drawingtools/selectiontools/BaseSelect.js

@@ -48,12 +48,11 @@
    * @override
    */
   ns.BaseSelect.prototype.moveToolAt = function(col, row, color, frame, overlay, event) {
+    $.publish(Events.CURSOR_MOVED, [col, row]);
     if(this.mode == "select") {
-
       this.onSelect_(col, row, color, frame, overlay);
     }
     else if(this.mode == "moveSelection") {
-
       this.onSelectionDrag_(col, row, color, frame, overlay);
     }
   };
@@ -76,6 +75,7 @@
    * @override
    */
   ns.BaseSelect.prototype.moveUnactiveToolAt = function(col, row, color, frame, overlay, event) {
+    $.publish(Events.CURSOR_MOVED, [col, row]);
     if (overlay.containsPixel(col, row)) {
       if(overlay.getPixel(col, row) != Constants.SELECTION_TRANSPARENT_COLOR) {
         // We're hovering the selection, show the move tool:

src/js/drawingtools/selectiontools/RectangleSelect.js

@@ -9,17 +9,18 @@
   ns.RectangleSelect = function() {
     this.toolId = "tool-rectangle-select";
     this.helpText = "Rectangle selection tool";
-    
+
     ns.BaseSelect.call(this);
   };
 
   pskl.utils.inherit(ns.RectangleSelect, ns.BaseSelect);
-  
+
 
   /**
    * @override
    */
   ns.RectangleSelect.prototype.onSelectStart_ = function (col, row, color, frame, overlay) {
+    $.publish(Events.DRAG_START, [col, row]);
     // Drawing the first point of the rectangle in the fake overlay canvas:
     overlay.setPixel(col, row, color);
   };
@@ -47,6 +48,7 @@
    */
   ns.RectangleSelect.prototype.onSelectEnd_ = function (col, row, color, frame, overlay) {
     this.onSelect_(col, row, color, frame, overlay);
+    $.publish(Events.DRAG_END, [col, row]);
   };
 
 })();