Basic rectangular select tool basic

css/tools.css

@@ -49,6 +49,10 @@
   background-image: url(../img/tools/icons/hand.png);
 }
 
+.tool-icon.tool-select {
+  background-image: url(../img/tools/icons/select.png);
+}
+
 /*.tool-icon.tool-palette {
   background-image: url(../img/tools/icons/color-palette.png);
 }*/
@@ -77,6 +81,10 @@
   cursor: url(../img/tools/cursors/hand.png) 14 12, pointer;
 }
 
+.tool-select .drawing-canvas-container:hover {
+  cursor: url(../img/tools/cursors/select.png) 14 12, pointer;
+}
+
 .tool-grid,
 .tool-grid label,
 .tool-grid input {

index.html

@@ -32,7 +32,7 @@
       <li class="tool-icon tool-stroke" data-tool-id="tool-stroke" title="Stroke tool"></li>
       <li class="tool-icon tool-rectangle" data-tool-id="tool-rectangle" title="Rectangle tool"></li>
       <li class="tool-icon tool-move" data-tool-id="tool-move" title="Move tool"></li>
-      <li class="tool-icon tool-select" data-tool-id="tool-select" title="Move tool">S</li>
+      <li class="tool-icon tool-select" data-tool-id="tool-select" title="Move tool"></li>
     </ul>
     
     <ul class="tools-group">

js/Events.js

@@ -38,6 +38,8 @@ Events = {
     CURRENT_FRAME_SET: "CURRENT_FRAME_SET",
 
     SELECTION_CREATED: "SELECTION_CREATED",
+    SELECTION_MOVE_REQUEST: "SELECTION_MOVE_REQUEST",
+    SELECTION_DISMISSED: "SELECTION_DISMISSED",
     
     SHOW_NOTIFICATION: "SHOW_NOTIFICATION",
     HIDE_NOTIFICATION: "HIDE_NOTIFICATION",

js/controller/DrawingController.js

@@ -107,6 +107,14 @@
           // Eg when drawing, it may make sense to have it here. However for a non drawing tool,
           // you don't need to draw anything when mousemoving and you request useless localStorage.
           $.publish(Events.LOCALSTORAGE_REQUEST);
+        } else {
+
+          this.currentToolBehavior.moveUnactiveToolAt(
+            coords.col, coords.row,
+            this.getCurrentColor_(),
+            this.framesheet.getCurrentFrame(),
+            this.overlayFrame
+          );
         }
         this.previousMousemoveTime = currentTime;
       }

js/drawingtools/BaseTool.js

@@ -12,6 +12,8 @@
 	
 	ns.BaseTool.prototype.moveToolAt = function(col, row, color, frame, overlay) {};
 
+	ns.BaseTool.prototype.moveUnactiveToolAt = function(col, row, color, frame, overlay) {};
+
 	ns.BaseTool.prototype.releaseToolAt = function(col, row, color, frame, overlay) {};
 
 	/**

js/drawingtools/RectangularSelect.js

@@ -7,7 +7,9 @@
 	var ns = $.namespace("pskl.drawingtools");
 
 	ns.Select = function() {
-		this.toolId = "tool-select"
+		this.toolId = "tool-select";
+		this.secondaryToolId = "tool-move";
+		this.BodyRoot = $('body');
 		
 		// Select's first point coordinates (set in applyToolAt)
 		this.startCol = null;
@@ -23,22 +25,70 @@
 		this.startCol = col;
 		this.startRow = row;
 		
-		// Drawing the first point of the rectangle in the fake overlay canvas:
+		this.lastCol = col;
-		overlay.setPixel(col, row, color);
+		this.lastRow = row;
+		
+		// TODO(vincz): Comment here nasty vince
+		if(overlay.getPixel(col, row) != Constants.SELECTION_TRANSPARENT_COLOR) {
+			this.mode = "select";
+
+			// Drawing the first point of the rectangle in the fake overlay canvas:
+			overlay.setPixel(col, row, color);
+		}
+		else {
+			this.mode = "moveSelection";
+
+			this.overlayFrameReference = overlay.clone();
+		}
 	};
 
 	ns.Select.prototype.moveToolAt = function(col, row, color, frame, overlay) {
-		// Clean overlay canvas:
+		if(this.mode == "select") {
-		overlay.clear();
+			// Clean overlay canvas:
+			overlay.clear();
 
-		// When the user moussemove (before releasing), we dynamically compute the 
+			// When the user moussemove (before releasing), we dynamically compute the 
-		// pixel to draw the line and draw this line in the overlay :
+			// pixel to draw the line and draw this line in the overlay :
-		var strokePoints = pskl.PixelUtils.getBoundRectanglePixels(this.startCol, this.startRow, col, row);
+			var strokePoints = pskl.PixelUtils.getBoundRectanglePixels(this.startCol, this.startRow, col, row);
+			
+			color = Constants.SELECTION_TRANSPARENT_COLOR;
+			// Drawing current stroke:
+			for(var i = 0; i< strokePoints.length; i++) {
+				overlay.setPixel(strokePoints[i].col, strokePoints[i].row, color);
+			}
+		}
+		else if(this.mode == "moveSelection") {
+			
+			// TODO(vincz): Comment here nasty vince
+			var deltaCol = col - this.lastCol;
+			var deltaRow = row - this.lastRow;
+			
+			console.log(deltaCol)
+			console.log(deltaRow)
+			var colDiff = col - this.startCol, rowDiff = row - this.startRow;
+			if (colDiff != 0 || rowDiff != 0) {
+				// Update selection on overlay frame:
+				this.shiftOverlayFrame_(colDiff, rowDiff, overlay, this.overlayFrameReference);
+
+				// Update selection model:
+				$.publish(Events.SELECTION_MOVE_REQUEST, [deltaCol, deltaRow]);
+			}
+			this.lastCol = col;
+			this.lastRow = row;		
+		}
+	};
+
+	// TODO(vincz): Comment here nasty vince
+	ns.Select.prototype.moveUnactiveToolAt = function(col, row, color, frame, overlay) {
 		
-		color = Constants.SELECTION_TRANSPARENT_COLOR;
+		// If we mouseover the selection draw inside the overlay frame, show the 'move' cursor
-		// Drawing current stroke:
+		// instead of the 'select' one. It indicates that we can move the selection by dragndroping it.
-		for(var i = 0; i< strokePoints.length; i++) {
+		if(overlay.getPixel(col, row) != Constants.SELECTION_TRANSPARENT_COLOR) {
-			overlay.setPixel(strokePoints[i].col, strokePoints[i].row, color);
+			this.BodyRoot.addClass(this.toolId);
+			this.BodyRoot.removeClass(this.secondaryToolId);
+		} else {
+			this.BodyRoot.addClass(this.secondaryToolId);
+			this.BodyRoot.removeClass(this.toolId);
 		}
 	};
 
@@ -46,10 +96,34 @@
 	 * @override
 	 */
 	ns.Select.prototype.releaseToolAt = function(col, row, color, frame, overlay) {		
-		overlay.clear();
+		if(this.mode == "select") {
-		
+			overlay.clear();
-		var selection = new pskl.selection.RectangularSelection(
+			if(this.startCol == col &&this.startRow == row) {
-			this.startCol, this.startRow, col, row);
+				$.publish(Events.SELECTION_DISMISSED);
-		$.publish(Events.SELECTION_CREATED, [selection]);
+			} else {
+				var selection = new pskl.selection.RectangularSelection(
+					this.startCol, this.startRow, col, row);
+				$.publish(Events.SELECTION_CREATED, [selection]);
+			}
+		} else if(this.mode == "moveSelection") {
+			this.moveToolAt(col, row, color, frame, overlay);
+		}
+	};
+
+	/**
+	 * @private
+	 */
+	ns.Select.prototype.shiftOverlayFrame_ = function (colDiff, rowDiff, overlayFrame, reference) {
+		var color;
+		for (var col = 0 ; col < overlayFrame.getWidth() ; col++) {
+			for (var row = 0 ; row < overlayFrame.getHeight() ; row++) {
+				if (reference.containsPixel(col - colDiff, row - rowDiff)) {
+					color = reference.getPixel(col - colDiff, row - rowDiff);
+				} else {
+					color = Constants.TRANSPARENT_COLOR;
+				}
+				overlayFrame.setPixel(col, row, color)
+			}
+		}
 	};
 })();

js/piskel.js

@@ -54,7 +54,7 @@ $.namespace("pskl");
         previewTileCanvasDpi
       );
 
-      // To catch the current active frame, the selection manager have to be before
+      // To catch the current active frame, the selection manager have to be initialized before
       // the 'frameSheet.setCurrentFrameIndex(0);'
       // TODO(vincz): Slice each constructor to have:
       //                  - an event(s) listening init

js/selection/BaseSelection.js

@@ -2,12 +2,31 @@
 	var ns = $.namespace("pskl.selection");
 
 	ns.BaseSelection = function () {
+		this.reset();
+	};
+
+	ns.BaseSelection.prototype.reset = function () {
 		this.pixels = [];
 	};
 
-	ns.BaseSelection.prototype.getFrameSliceFromSelection = function (frame) {
+	ns.BaseSelection.prototype.move = function (colDiff, rowDiff) {
-		if(this.pixels && this.pixels > 0) {
+		var movedPixel, movedPixels = [];
 
+		for(var i=0, l=this.pixels.length; i<l; i++) {
+			movedPixel = this.pixels[i];
+			movedPixel.col += colDiff;
+			movedPixel.row += rowDiff;
+			movedPixels.push(movedPixel)
+		}
+		this.pixels = movedPixels;
+	};
+
+	ns.BaseSelection.prototype.fillSelectionFromFrame = function (targetFrame) {
+		var pixelWithCopiedColor;
+		for(var i=0, l=this.pixels.length; i<l; i++) {
+			pixelWithCopiedColor = this.pixels[i];
+			pixelWithCopiedColor.copiedColor =
+			    targetFrame.getPixel(pixelWithCopiedColor.col, pixelWithCopiedColor.row);
 		}
 	};
 })();

js/selection/SelectionManager.js

@@ -8,33 +8,28 @@
 		
 		this.currentSelection = null;
 		this.currentFrame = null; 
-
 		
-		$.subscribe(Events.SELECTION_CREATED, $.proxy(this.onSelectionCreated_, this));
-
-
 		$.subscribe(Events.CURRENT_FRAME_SET, $.proxy(this.onCurrentFrameChanged_, this));
 
-		//$.subscribe(Events.PASTE, $.proxy(this.onPaste_, this));
+		$.subscribe(Events.SELECTION_CREATED, $.proxy(this.onSelectionCreated_, this));
-
+		$.subscribe(Events.SELECTION_DISMISSED, $.proxy(this.onSelectionDismissed_, this));	
-		$.subscribe(Events.COPY, $.proxy(this.onCopy_, this)););
+		$.subscribe(Events.SELECTION_MOVE_REQUEST, $.proxy(this.onSelectionMoved_, this));
-
+		
+		$.subscribe(Events.PASTE, $.proxy(this.onPaste_, this));
+		$.subscribe(Events.COPY, $.proxy(this.onCopy_, this));
 		$.subscribe(Events.CUT, $.proxy(this.onCut_, this));
 
-		$.subscribe(Events.TOOL_SELECTED); // discard selection if not move
+		$.subscribe(Events.TOOL_SELECTED, $.proxy(this.onToolSelected_, this)); 
-
 	};
 
-	ns.SelectionManager.prototype.hasSelection = function() {
+	/**
-		return (this.currentSelection == null) ? false : true;
+	 * @private
-	};
+	 */
-
+	ns.SelectionManager.prototype.cleanSelection_ = function(selection) {
-	ns.SelectionManager.prototype.addSelection = function(selection) {
+		if(this.currentSelection) {
-		this.currentSelection = selection;
+			this.currentSelection.reset();
-	};
+		}
-
+		this.overlayFrame.clear();
-	ns.SelectionManager.prototype.removeSelection = function(selection) {
-		this.currentSelection = null;
 	};
 
 	/**
@@ -49,14 +44,38 @@
 		}
 	};
 
+	/**
+	 * @private
+	 */
+	ns.SelectionManager.prototype.onToolSelected_ = function(evt, tool) {
+		if(!(tool instanceof pskl.drawingtools.Select)) {
+			this.cleanSelection_();
+		}
+	};
+
+	/**
+	 * @private
+	 */
+	ns.SelectionManager.prototype.onSelectionDismissed_ = function(evt) {
+		this.cleanSelection_();
+	};
+
 	/**
 	 * @private
 	 */
 	ns.SelectionManager.prototype.onCut_ = function(evt) {
 		if(this.currentSelection && this.currentFrame) {
+			// Put cut target into the selection:
+			this.currentSelection.fillSelectionFromFrame(this.currentFrame);
+
 			var pixels = this.currentSelection.pixels;
 			for(var i=0, l=pixels.length; i<l; i++) {
-				this.currentFrame.setPixel(pixels[i].col, pixels[i].row, Constants.TRANSPARENT_COLOR);
+				try {
+					this.currentFrame.setPixel(pixels[i].col, pixels[i].row, Constants.TRANSPARENT_COLOR);
+				}
+				catch(e) {
+					// Catchng out of frame's bound pixels without testing
+				}
 			}
 		}
 		else {
@@ -68,11 +87,18 @@
 		if(this.currentSelection && this.currentFrame) {
 			var pixels = this.currentSelection.pixels;
 			for(var i=0, l=pixels.length; i<l; i++) {
-				this.currentFrame.setPixel(pixels[i].col, pixels[i].row, Constants.TRANSPARENT_COLOR);
+				try {
+					this.currentFrame.setPixel(
+						pixels[i].col, pixels[i].row, 
+						pixels[i].copiedColor);
+				}
+				catch(e) {
+					// Catchng out of frame's bound pixels without testing
+				}
 			}
 		}
 		else {
-			throw "Bad state for CUT callback in SelectionManager";
+			throw "Bad state for PASTE callback in SelectionManager";
 		}
 	};
 
@@ -80,16 +106,8 @@
 	 * @private
 	 */
 	ns.SelectionManager.prototype.onCopy_ = function(evt) {
-		this.copiedPixels = [];
 		if(this.currentSelection && this.currentFrame) {
-			var pixels = this.currentSelection.pixels;
+			this.currentSelection.fillSelectionFromFrame(this.currentFrame);
-			for(var i=0, l=pixels.length; i<l; i++) {
-				copiedPixels.push({
-					"col": pixels[i].col,
-					"row": pixels[i].row,
-					"color": this.currentFrame.getPixel(pixels[i].col, pixels[i].row)
-				});
-			}
 		}
 		else {
 			throw "Bad state for CUT callback in SelectionManager";
@@ -108,7 +126,19 @@
 			}
 		}
 		else {
-			throw "Bad current selection set in SelectionManager";
+			throw "No selection set in SelectionManager";
+		}
+	};
+
+	/**
+	 * @private
+	 */
+	ns.SelectionManager.prototype.onSelectionMoved_ = function(evt, colDiff, rowDiff) {
+		if(this.currentSelection) {
+			this.currentSelection.move(colDiff, rowDiff);
+		}
+		else {
+			throw "Bad state: No currentSelection set when trying to move it in SelectionManager";
 		}
 	};
 })();