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/css/settings.css

@@ -124,6 +124,11 @@
   padding-bottom: 5px;
 }
 
+.settings-description {
+  margin : 0 0 10px 0;
+  display : inline-block;
+}
+
 .settings-form-section {
   margin-bottom: 10px;
 }

src/css/style.css

@@ -226,4 +226,34 @@ body {
 
 .image-link {
   color : gold;
+}
+
+.pull-top,
+.pull-right,
+.pull-bottom,
+.pull-left {
+  position:absolute;
+}
+
+.pull-top {
+  top:0;
+}
+
+.pull-right {
+  right:0;
+}
+
+.pull-bottom {
+  bottom:0;
+}
+
+.pull-left {
+  left:0;
+}
+
+.cursor-coordinates {
+  color:#888;
+  font-size:12px;
+  font-weight:bold;
+  font-family:Courier;
 }

src/index.html

@@ -41,6 +41,7 @@
         <iframe src="templates/preview.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
         <iframe src="templates/layers-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
         <iframe src="templates/palettes-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
+        <div class="pull-bottom cursor-coordinates"></div>
       </div>
     </div>
 

src/js/Events.js

@@ -8,6 +8,10 @@ var Events = {
   PRIMARY_COLOR_SELECTED : 'PRIMARY_COLOR_SELECTED',
   SECONDARY_COLOR_SELECTED : 'SECONDARY_COLOR_SELECTED',
 
+  CURSOR_MOVED : 'CURSOR_MOVED',
+  DRAG_START : 'DRAG_START',
+  DRAG_END : 'DRAG_END',
+
   DIALOG_DISPLAY : 'DIALOG_DISPLAY',
   DIALOG_HIDE : 'DIALOG_HIDE',
 

src/js/app.js

@@ -39,6 +39,9 @@
       this.palettesListController = new pskl.controller.PalettesListController();
       this.palettesListController.init();
 
+      this.cursorCoordinatesController = new pskl.controller.CursorCoordinatesController(this.piskelController);
+      this.cursorCoordinatesController.init();
+
       this.drawingController = new pskl.controller.DrawingController(this.piskelController, this.paletteController, $('#drawing-canvas-container'));
       this.drawingController.init();
 

src/js/controller/CursorCoordinatesController.js

@@ -0,0 +1,43 @@
+(function () {
+  var ns = $.namespace('pskl.controller');
+
+  ns.CursorCoordinatesController = function (piskelController) {
+    this.piskelController = piskelController;
+    this.dragOrigin = null;
+  };
+
+  ns.CursorCoordinatesController.prototype.init = function () {
+    this.coordinatesContainer = document.querySelector('.cursor-coordinates');
+    $.subscribe(Events.CURSOR_MOVED, this.onCursorMoved_.bind(this));
+    $.subscribe(Events.DRAG_START, this.onDragStart_.bind(this));
+    $.subscribe(Events.DRAG_END, this.onDragEnd_.bind(this));
+  };
+
+  ns.CursorCoordinatesController.prototype.onCursorMoved_ = function (event, x, y) {
+    var currentFrame = this.piskelController.getCurrentFrame();
+    var html = '';
+    if (this.dragOrigin) {
+      html += this.dragOrigin.x + ':' + this.dragOrigin.y + ' to ';
+    }
+
+    if (currentFrame.containsPixel(x, y)) {
+      html += x + ':' + y;
+      if (this.dragOrigin) {
+        var dX = Math.abs(x-this.dragOrigin.x) + 1;
+        var dY = Math.abs(y-this.dragOrigin.y) + 1;
+        html += ' (' + dX + 'x' + dY +')';
+      }
+    }
+
+    this.coordinatesContainer.innerHTML = html;
+  };
+
+  ns.CursorCoordinatesController.prototype.onDragStart_ = function (event, x, y) {
+    this.dragOrigin = {x:x, y:y};
+  };
+
+  ns.CursorCoordinatesController.prototype.onDragEnd_ = function (event, x, y) {
+    this.dragOrigin = null;
+  };
+
+})();

src/js/controller/DrawingController.js

@@ -153,6 +153,7 @@
 
     if ((currentTime - this.previousMousemoveTime) > Constants.MOUSEMOVE_THROTTLING ) {
       var coords = this.renderer.getCoordinates(event.clientX, event.clientY);
+      var currentFrame = this.piskelController.getCurrentFrame();
 
       if (this.isClicked) {
         // Warning : do not call setCurrentButton here
@@ -161,7 +162,7 @@
           coords.x,
           coords.y,
           this.getCurrentColor_(event),
-          this.piskelController.getCurrentFrame(),
+          currentFrame,
           this.overlayFrame,
           event
         );
@@ -176,7 +177,7 @@
           coords.x,
           coords.y,
           this.getCurrentColor_(event),
-          this.piskelController.getCurrentFrame(),
+          currentFrame,
           this.overlayFrame,
           event
         );

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]);
   };
 
 })();

src/piskel-script-list.js

@@ -65,6 +65,7 @@
 
   // Controllers
   "js/controller/PiskelController.js",
+  "js/controller/CursorCoordinatesController.js",
   "js/controller/DrawingController.js",
   "js/controller/PreviewFilmController.js",
   "js/controller/LayersListController.js",

src/templates/settings/export-png.html

@@ -15,8 +15,8 @@
     Export Spritesheet as ZIP
   </div>
   <div class="settings-item">
-    <span>A ZIP archive will be created with one PNG file per frame.</span>
-    <div style="margin-top:10px;">
+    <span class="settings-description">A ZIP archive will be created with one PNG file per frame.</span>
+    <div>
       <button type="button" class="button button-primary zip-generate-button"/>Download ZIP</button>
     </div>
   </div>