From 4c90db44b2db618c7d87b01ff5b5d71773203bb4 Mon Sep 17 00:00:00 2001
From: Vince <grosbouddha@gmail.com>
Date: Tue, 11 Sep 2012 19:55:03 +0200
Subject: [PATCH 1/4] Initial work

---
 index.html         | 2 ++
 js/ToolSelector.js | 3 ++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index d4cc28f7..97f55520 100644
--- a/index.html
+++ b/index.html
@@ -32,6 +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>
     </ul>
     
     <ul class="tools-group">
@@ -114,6 +115,7 @@
   <script src="js/drawingtools/PaintBucket.js"></script>
   <script src="js/drawingtools/Rectangle.js"></script>
   <script src="js/drawingtools/Move.js"></script>
+  <script src="js/drawingtools/SelectTool.js"></script>
   <script src="js/ToolSelector.js"></script>
 
   <!-- Application controller and initialization -->
diff --git a/js/ToolSelector.js b/js/ToolSelector.js
index ed0c51e0..21122552 100644
--- a/js/ToolSelector.js
+++ b/js/ToolSelector.js
@@ -15,7 +15,8 @@ pskl.ToolSelector = (function() {
 		"paintBucket" : new pskl.drawingtools.PaintBucket(),
 		"stroke" : new pskl.drawingtools.Stroke(),
 		"rectangle" : new pskl.drawingtools.Rectangle(),
-		"move" : new pskl.drawingtools.Move()
+		"move" : new pskl.drawingtools.Move(),
+		"select" : new pskl.drawingtools.Select()
 	};
 	var currentSelectedTool = toolInstances.simplePen;
 	var previousSelectedTool = toolInstances.simplePen;

From 991b66b67c510e19091a6dbf144e2eae8a39a871 Mon Sep 17 00:00:00 2001
From: Vince <grosbouddha@gmail.com>
Date: Wed, 12 Sep 2012 12:01:47 +0200
Subject: [PATCH 2/4] Basic cut implementation

SelectionManager implmentaiton
Rectangular seleciton impl
Utils refacoring
Event manager refactoring
basic cut implmentation
---
 index.html                           |   9 +-
 js/Events.js                         |  12 ++-
 js/HistoryManager.js                 |  14 +--
 js/KeyManager.js                     |  51 +++++++++++
 js/LocalStorageService.js            |   3 +
 js/drawingtools/Rectangle.js         |  13 +--
 js/drawingtools/RectangularSelect.js |  55 ++++++++++++
 js/drawingtools/SelectTool.js        | 130 ---------------------------
 js/model/FrameSheet.js               |   3 +-
 js/piskel.js                         |  22 +++--
 js/selection/BaseSelection.js        |  13 +++
 js/selection/RectangularSelection.js |   9 ++
 js/selection/SelectionManager.js     | 114 +++++++++++++++++++++++
 js/{utils.js => utils/core.js}       |   0
 js/utils/pixelUtils.js               |  60 +++++++++++++
 15 files changed, 352 insertions(+), 156 deletions(-)
 create mode 100644 js/KeyManager.js
 create mode 100644 js/drawingtools/RectangularSelect.js
 delete mode 100644 js/drawingtools/SelectTool.js
 create mode 100644 js/selection/BaseSelection.js
 create mode 100644 js/selection/RectangularSelection.js
 create mode 100644 js/selection/SelectionManager.js
 rename js/{utils.js => utils/core.js} (100%)
 create mode 100644 js/utils/pixelUtils.js

diff --git a/index.html b/index.html
index 97f55520..bd5a61e4 100644
--- a/index.html
+++ b/index.html
@@ -93,7 +93,8 @@
   <script src="js/Events.js"></script>
   
   <!-- Libraries -->
-  <script src="js/utils.js"></script>
+  <script src="js/utils/core.js"></script>
+  <script src="js/utils/pixelUtils.js"></script>
   <script src="js/lib/jsColor_1_4_0/jscolor.js"></script>
 
   <!-- Application libraries-->
@@ -106,6 +107,10 @@
   <script src="js/controller/AnimatedPreviewController.js"></script>
   <script src="js/LocalStorageService.js"></script>
   <script src="js/HistoryManager.js"></script>
+  <script src="js/KeyManager.js"></script>
+  <script src="js/selection/SelectionManager.js"></script>
+  <script src="js/selection/BaseSelection.js"></script>
+  <script src="js/selection/RectangularSelection.js"></script>
   <script src="js/Palette.js"></script>
   <script src="js/Notification.js"></script>
   <script src="js/drawingtools/BaseTool.js"></script>
@@ -115,7 +120,7 @@
   <script src="js/drawingtools/PaintBucket.js"></script>
   <script src="js/drawingtools/Rectangle.js"></script>
   <script src="js/drawingtools/Move.js"></script>
-  <script src="js/drawingtools/SelectTool.js"></script>
+  <script src="js/drawingtools/RectangularSelect.js"></script>
   <script src="js/ToolSelector.js"></script>
 
   <!-- Application controller and initialization -->
diff --git a/js/Events.js b/js/Events.js
index bb8ea4e5..1a790fdc 100644
--- a/js/Events.js
+++ b/js/Events.js
@@ -34,7 +34,17 @@ Events = {
      * Number of frames, content of frames, color used for the palette may have changed.
      */
     FRAMESHEET_RESET: "FRAMESHEET_RESET",
+
+    CURRENT_FRAME_SET: "CURRENT_FRAME_SET",
+
+    SELECTION_CREATED: "SELECTION_CREATED",
     
     SHOW_NOTIFICATION: "SHOW_NOTIFICATION",
-    HIDE_NOTIFICATION: "HIDE_NOTIFICATION"
+    HIDE_NOTIFICATION: "HIDE_NOTIFICATION",
+
+    UNDO: "UNDO",
+    REDO: "REDO",
+    CUT: "CUT",
+    COPY: "COPY",
+    PASTE: "PASTE"    
 };
\ No newline at end of file
diff --git a/js/HistoryManager.js b/js/HistoryManager.js
index d6a92208..aa198c3f 100644
--- a/js/HistoryManager.js
+++ b/js/HistoryManager.js
@@ -5,24 +5,16 @@
   };
 
 	ns.HistoryManager.prototype.init = function () {
-    document.body.addEventListener('keyup', this.onKeyup.bind(this));
     $.subscribe(Events.TOOL_RELEASED, this.saveState.bind(this));
+
+    $.subscribe(Events.UNDO, this.undo.bind(this));
+    $.subscribe(Events.REDO, this.redo.bind(this));
 	};
 
   ns.HistoryManager.prototype.saveState = function () {
     this.framesheet.getCurrentFrame().saveState();
   };
 
-	ns.HistoryManager.prototype.onKeyup = function (evt) {
-    if (evt.ctrlKey && evt.keyCode == 90) { // CTRL + Z
-      this.undo();
-    }
-
-    if (evt.ctrlKey && evt.keyCode == 89) { // CTRL+ Y
-      this.redo();
-    }
-  };
-
   ns.HistoryManager.prototype.undo = function () {
     this.framesheet.getCurrentFrame().loadPreviousState();
     this.redraw();
diff --git a/js/KeyManager.js b/js/KeyManager.js
new file mode 100644
index 00000000..d0222b38
--- /dev/null
+++ b/js/KeyManager.js
@@ -0,0 +1,51 @@
+(function () {
+	var ns = $.namespace("pskl");
+
+	ns.KeyManager = function () {
+		$(document.body).keyup($.proxy(this.onKeyUp_, this));
+	};
+
+	// Kind of object that make you want to stop front-end _engineering_:
+	ns.KeyManager.prototype.CharCodeToKeyCodeMap = {
+
+		90 : "z",
+		89 : "y",
+		88 : "x",
+		67 : "c",
+		86 : "v"
+	};
+
+	ns.KeyManager.prototype.KeyboardActions = {
+
+		"ctrl" : {
+			"z" : Events.UNDO,
+			"y" : Events.REDO,
+			"x" : Events.CUT,
+			"c" : Events.COPY,
+			"v" : Events.PASTE
+		}
+	};
+
+	
+
+	ns.KeyManager.prototype.onKeyUp_ = function(evt) {
+		//var isMac = false;
+		//if (navigator.appVersion.indexOf("Mac")!=-1) {
+			// Welcome in mac world where vowels are consons and meta used instead of ctrl:
+		//	isMac = true;
+		//}
+
+		// (isMac ? evt.metaKey : evt.ctrlKey) {
+		if (evt.ctrlKey) {
+			// Get key pressed:
+ 			var letter = this.CharCodeToKeyCodeMap[evt.which];
+			if(letter) {
+				var eventToTrigger = this.KeyboardActions["ctrl"][letter];
+				if(eventToTrigger) {
+					$.publish(eventToTrigger);
+				}
+			};
+		}
+	};
+
+})();
\ No newline at end of file
diff --git a/js/LocalStorageService.js b/js/LocalStorageService.js
index 63cc3b59..03ef443a 100644
--- a/js/LocalStorageService.js
+++ b/js/LocalStorageService.js
@@ -40,9 +40,12 @@ pskl.LocalStorageService = (function() {
 
     /**
      * @private
+     * TODO(vince): Move that away from LocalStorageService
      */
     var restoreFromLocalStorage_ = function() {
+
       frameSheet_.deserialize(window.localStorage.snapShot);
+      frameSheet_.setCurrentFrameIndex(0);
     };
 
     /**
diff --git a/js/drawingtools/Rectangle.js b/js/drawingtools/Rectangle.js
index f5fd906d..45857054 100644
--- a/js/drawingtools/Rectangle.js
+++ b/js/drawingtools/Rectangle.js
@@ -32,14 +32,15 @@
 
 		// When the user moussemove (before releasing), we dynamically compute the 
 		// pixel to draw the line and draw this line in the overlay :
-		var strokePoints = this.getRectanglePixels_(this.startCol, col, this.startRow, row);
-		
+		var strokePoints = pskl.PixelUtils.getBoundRectanglePixels(this.startCol, this.startRow, col, row);
+		if(color == Constants.TRANSPARENT_COLOR) {
+			color = Constants.SELECTION_TRANSPARENT_COLOR;
+		}
+
 		// Drawing current stroke:
 		for(var i = 0; i< strokePoints.length; i++) {
 
-			if(color == Constants.TRANSPARENT_COLOR) {
-				color = Constants.SELECTION_TRANSPARENT_COLOR;
-			}			
+						
 			overlay.setPixel(strokePoints[i].col, strokePoints[i].row, color);
 		}
 	};
@@ -51,7 +52,7 @@
 		overlay.clear();
 		// If the stroke tool is released outside of the canvas, we cancel the stroke: 
 		if(frame.containsPixel(col, row)) {
-			var strokePoints = this.getRectanglePixels_(this.startCol, col, this.startRow, row);
+			var strokePoints = pskl.PixelUtils.getBoundRectanglePixels(this.startCol, this.startRow, col, row);
 			for(var i = 0; i< strokePoints.length; i++) {
 				// Change model:
 				frame.setPixel(strokePoints[i].col, strokePoints[i].row, color);
diff --git a/js/drawingtools/RectangularSelect.js b/js/drawingtools/RectangularSelect.js
new file mode 100644
index 00000000..4324a9ee
--- /dev/null
+++ b/js/drawingtools/RectangularSelect.js
@@ -0,0 +1,55 @@
+/*
+ * @provide pskl.drawingtools.Select
+ *
+ * @require pskl.utils
+ */
+(function() {
+	var ns = $.namespace("pskl.drawingtools");
+
+	ns.Select = function() {
+		this.toolId = "tool-select"
+		
+		// Select's first point coordinates (set in applyToolAt)
+		this.startCol = null;
+		this.startRow = null;
+	};
+
+	pskl.utils.inherit(ns.Select, ns.BaseTool);
+	
+	/**
+	 * @override
+	 */
+	ns.Select.prototype.applyToolAt = function(col, row, color, frame, overlay) {
+		this.startCol = col;
+		this.startRow = row;
+		
+		// Drawing the first point of the rectangle in the fake overlay canvas:
+		overlay.setPixel(col, row, color);
+	};
+
+	ns.Select.prototype.moveToolAt = function(col, row, color, frame, overlay) {
+		// Clean overlay canvas:
+		overlay.clear();
+
+		// When the user moussemove (before releasing), we dynamically compute the 
+		// pixel to draw the line and draw this line in the overlay :
+		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);
+		}
+	};
+
+	/**
+	 * @override
+	 */
+	ns.Select.prototype.releaseToolAt = function(col, row, color, frame, overlay) {		
+		overlay.clear();
+		
+		var selection = new pskl.selection.RectangularSelection(
+			this.startCol, this.startRow, col, row);
+		$.publish(Events.SELECTION_CREATED, [selection]);
+	};
+})();
diff --git a/js/drawingtools/SelectTool.js b/js/drawingtools/SelectTool.js
deleted file mode 100644
index 851e9842..00000000
--- a/js/drawingtools/SelectTool.js
+++ /dev/null
@@ -1,130 +0,0 @@
-/*
- * @provide pskl.drawingtools.Select
- *
- * @require pskl.utils
- */
-(function() {
-	var ns = $.namespace("pskl.drawingtools");
-
-	ns.Select = function() {
-		this.toolId = "tool-select"
-		
-		// Select's first point coordinates (set in applyToolAt)
-		this.startCol = null;
-		this.startRow = null;
-	};
-
-	pskl.utils.inherit(ns.Select, ns.BaseTool);
-	
-	/**
-	 * @override
-	 */
-	ns.Select.prototype.applyToolAt = function(col, row, color, drawer) {
-		this.startCol = col;
-		this.startRow = row;
-		
-		// Drawing the first point of the rectangle in the fake overlay canvas:
-		drawer.overlayFrame.setPixel(col, row, color);
-	};
-
-	ns.Select.prototype.moveToolAt = function(col, row, color, drawer) {
-		// Clean overlay canvas:
-		drawer.clearOverlay();
-
-		// When the user moussemove (before releasing), we dynamically compute the 
-		// pixel to draw the line and draw this line in the overlay :
-		var strokePoints = this.getRectanglePixels_(this.startCol, col, this.startRow, row);
-		
-		color = Constants.SELECTION_TRANSPARENT_COLOR;
-		// Drawing current stroke:
-		for(var i = 0; i< strokePoints.length; i++) {
-
-			drawer.overlayFrame.setPixel(strokePoints[i].col, strokePoints[i].row, color);
-		}
-	};
-
-	/**
-	 * @override
-	 */
-	ns.Select.prototype.releaseToolAt = function(col, row, color, drawer) {		
-		drawer.clearOverlay();
-		// If the stroke tool is released outside of the canvas, we cancel the stroke: 
-		if(drawer.frame.containsPixel(col, row)) {
-
-			
-			// Creating horizontal sides of the rectangle:
-			var pixels = this.getRectangleSelection(this.startCol, col, this.startRow, row);
-
-			//var strokePoints = this.getRectanglePixels_(this.startCol, col, this.startRow, row);
-			
-			for(var i = 0; i< pixels.length; i++) {
-				// Change model:
-				drawer.frame.setPixel(pixels[i].col, pixels[i].row, color);
-			}
-			// The user released the tool to draw a line. We will compute the pixel coordinate, impact
-			// the model and draw them in the drawing canvas (not the fake overlay anymore)		
-		}
-	};
-
-	ns.Select.prototype.getRectangleSelection = function(x0, x1, y0, y1) {
-		
-		var pixels = [];
-		var swap;
-		
-		if(x0 > x1) {
-			swap = x0;
-			x0 = x1;
-			x1 = swap;
-		}
-		if(y0 > y1) {
-			swap = y0;
-			y0 = y1;
-			y1 = swap;
-		}
-
-		for(var x = x0; x <= x1; x++) {
-			for(var y = y0; y <= y1; y++) {
-				pixels.push({"col": x, "row": y});
-			}
-		}
-		
-		return pixels;
-     };
-
-	/**
-	 * Get an array of pixels representing the rectangle.
-	 *
-	 * @private
-	 */
-	ns.Select.prototype.getRectanglePixels_ = function(x0, x1, y0, y1) {
-		
-		var pixels = [];
-		var swap;
-		
-		if(x0 > x1) {
-			swap = x0;
-			x0 = x1;
-			x1 = swap;
-		}
-		if(y0 > y1) {
-			swap = y0;
-			y0 = y1;
-			y1 = swap;
-		}
-
-		// Creating horizontal sides of the rectangle:
-		for(var x = x0; x <= x1; x++) {
-			pixels.push({"col": x, "row": y0});
-			pixels.push({"col": x, "row": y1});
-		}
-
-		// Creating vertical sides of the rectangle:
-		for(var y = y0; y <= y1; y++) {
-			pixels.push({"col": x0, "row": y});
-			pixels.push({"col": x1, "row": y});	
-		}
-		
-		return pixels;
-     };
-
-})();
diff --git a/js/model/FrameSheet.js b/js/model/FrameSheet.js
index bf3af220..5d9e71e6 100644
--- a/js/model/FrameSheet.js
+++ b/js/model/FrameSheet.js
@@ -25,7 +25,8 @@
 
 	ns.FrameSheet.prototype.setCurrentFrameIndex = function (index) {
 		this.currentFrameIndex = index;
-		$.publish(Events.FRAMESHEET_RESET);
+		$.publish(Events.CURRENT_FRAME_SET, [this.getCurrentFrame()]);
+		$.publish(Events.FRAMESHEET_RESET);  // Is it no to overkill to have this here ?
 	};
 
 	ns.FrameSheet.prototype.getUsedColors = function() {
diff --git a/js/piskel.js b/js/piskel.js
index 77ec8e83..f4a057cd 100644
--- a/js/piskel.js
+++ b/js/piskel.js
@@ -34,7 +34,7 @@ $.namespace("pskl");
 
       frameSheet = new pskl.model.FrameSheet(framePixelWidth, framePixelHeight);
       frameSheet.addEmptyFrame();
-
+      
       this.drawingController = new pskl.controller.DrawingController(
         frameSheet,
         $('#drawing-canvas-container'), 
@@ -54,12 +54,28 @@ $.namespace("pskl");
         previewTileCanvasDpi
       );
 
+      // To catch the current active frame, the selection manager have to be before
+      // the 'frameSheet.setCurrentFrameIndex(0);'
+      // TODO(vincz): Slice each constructor to have:
+      //                  - an event(s) listening init
+      //                  - an event(s) triggering init
+      // All listerners will be hook in a first step, then all event triggering inits will be called
+      // in a second batch.
+      this.selectionManager =
+          new pskl.selection.SelectionManager(this.drawingController.overlayFrame);
+      
+      frameSheet.setCurrentFrameIndex(0);
+
+      
+
       this.animationController.init();
       this.previewsController.init();
 
       this.historyManager = new pskl.HistoryManager(frameSheet);
       this.historyManager.init();
 
+      this.keyManager = new pskl.KeyManager();
+
       pskl.NotificationService.init();
       pskl.LocalStorageService.init(frameSheet);
 
@@ -73,10 +89,6 @@ $.namespace("pskl");
         pskl.LocalStorageService.displayRestoreNotification();
       }
 
-      $.subscribe('SET_ACTIVE_FRAME', function(evt, frameId) {
-        frameSheet.setCurrentFrameIndex(frameId);
-      });
-
       var drawingLoop = new pskl.rendering.DrawingLoop();
       drawingLoop.addCallback(this.render, this);
       drawingLoop.start();
diff --git a/js/selection/BaseSelection.js b/js/selection/BaseSelection.js
new file mode 100644
index 00000000..11d76630
--- /dev/null
+++ b/js/selection/BaseSelection.js
@@ -0,0 +1,13 @@
+(function () {
+	var ns = $.namespace("pskl.selection");
+
+	ns.BaseSelection = function () {
+		this.pixels = [];
+	};
+
+	ns.BaseSelection.prototype.getFrameSliceFromSelection = function (frame) {
+		if(this.pixels && this.pixels > 0) {
+
+		}
+	};
+})();
\ No newline at end of file
diff --git a/js/selection/RectangularSelection.js b/js/selection/RectangularSelection.js
new file mode 100644
index 00000000..d2511af5
--- /dev/null
+++ b/js/selection/RectangularSelection.js
@@ -0,0 +1,9 @@
+(function () {
+	var ns = $.namespace("pskl.selection");
+
+	ns.RectangularSelection = function (x0, y0, x1, y1) {
+		this.pixels = pskl.PixelUtils.getRectanglePixels(x0, y0, x1, y1);
+	};
+
+	pskl.utils.inherit(ns.RectangularSelection, ns.BaseSelection);
+})();
\ No newline at end of file
diff --git a/js/selection/SelectionManager.js b/js/selection/SelectionManager.js
new file mode 100644
index 00000000..9ca63890
--- /dev/null
+++ b/js/selection/SelectionManager.js
@@ -0,0 +1,114 @@
+(function () {
+	var ns = $.namespace("pskl.selection");
+
+	
+	ns.SelectionManager = function (overlayFrame) {
+		
+		this.overlayFrame = overlayFrame;
+		
+		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.COPY, $.proxy(this.onCopy_, this)););
+
+		$.subscribe(Events.CUT, $.proxy(this.onCut_, this));
+
+		$.subscribe(Events.TOOL_SELECTED); // discard selection if not move
+
+	};
+
+	ns.SelectionManager.prototype.hasSelection = function() {
+		return (this.currentSelection == null) ? false : true;
+	};
+
+	ns.SelectionManager.prototype.addSelection = function(selection) {
+		this.currentSelection = selection;
+	};
+
+	ns.SelectionManager.prototype.removeSelection = function(selection) {
+		this.currentSelection = null;
+	};
+
+	/**
+	 * @private
+	 */
+	ns.SelectionManager.prototype.onCurrentFrameChanged_ = function(evt, currentFrame) {
+		if(currentFrame) {
+			this.currentFrame = currentFrame;
+		}
+		else {
+			throw "Bad current frame set in SelectionManager";
+		}
+	};
+
+	/**
+	 * @private
+	 */
+	ns.SelectionManager.prototype.onCut_ = function(evt) {
+		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);
+			}
+		}
+		else {
+			throw "Bad state for CUT callback in SelectionManager";
+		}
+	};
+
+	ns.SelectionManager.prototype.onPaste_ = function(evt) {
+		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);
+			}
+		}
+		else {
+			throw "Bad state for CUT callback in SelectionManager";
+		}
+	};
+
+	/**
+	 * @private
+	 */
+	ns.SelectionManager.prototype.onCopy_ = function(evt) {
+		this.copiedPixels = [];
+		if(this.currentSelection && this.currentFrame) {
+			var pixels = this.currentSelection.pixels;
+			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";
+		}
+	};
+
+	/**
+	 * @private
+	 */
+	ns.SelectionManager.prototype.onSelectionCreated_ = function(evt, selection) {
+		if(selection) {
+			this.currentSelection = selection;
+			var pixels = selection.pixels;
+			for(var i=0, l=pixels.length; i<l; i++) {
+				this.overlayFrame.setPixel(pixels[i].col, pixels[i].row, Constants.SELECTION_TRANSPARENT_COLOR);
+			}
+		}
+		else {
+			throw "Bad current selection set in SelectionManager";
+		}
+	};
+})();
diff --git a/js/utils.js b/js/utils/core.js
similarity index 100%
rename from js/utils.js
rename to js/utils/core.js
diff --git a/js/utils/pixelUtils.js b/js/utils/pixelUtils.js
new file mode 100644
index 00000000..8390aa21
--- /dev/null
+++ b/js/utils/pixelUtils.js
@@ -0,0 +1,60 @@
+(function () {
+	var ns = $.namespace("pskl");
+
+	ns.PixelUtils = {
+
+		getRectanglePixels : function (x0, y0, x1, y1) {
+			var pixels = [];
+			var swap;
+			
+			if(x0 > x1) {
+				swap = x0;
+				x0 = x1;
+				x1 = swap;
+			}
+			if(y0 > y1) {
+				swap = y0;
+				y0 = y1;
+				y1 = swap;
+			}
+
+			for(var x = x0; x <= x1; x++) {
+				for(var y = y0; y <= y1; y++) {
+					pixels.push({"col": x, "row": y});
+				}
+			}
+			
+			return pixels;		
+		},
+
+		getBoundRectanglePixels : function (x0, y0, x1, y1) {
+			var pixels = [];
+			var swap;
+			
+			if(x0 > x1) {
+				swap = x0;
+				x0 = x1;
+				x1 = swap;
+			}
+			if(y0 > y1) {
+				swap = y0;
+				y0 = y1;
+				y1 = swap;
+			}
+
+			// Creating horizontal sides of the rectangle:
+			for(var x = x0; x <= x1; x++) {
+				pixels.push({"col": x, "row": y0});
+				pixels.push({"col": x, "row": y1});
+			}
+
+			// Creating vertical sides of the rectangle:
+			for(var y = y0; y <= y1; y++) {
+				pixels.push({"col": x0, "row": y});
+				pixels.push({"col": x1, "row": y});	
+			}
+			
+			return pixels;	
+		}
+	};
+})();
\ No newline at end of file

From 2aaab74b80e8bd0d016474df015d7f5e7fcb2de4 Mon Sep 17 00:00:00 2001
From: Vince <grosbouddha@gmail.com>
Date: Wed, 12 Sep 2012 21:32:18 +0200
Subject: [PATCH 3/4] Fix ctrl/meta for macosx shortcuts

---
 js/KeyManager.js | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/js/KeyManager.js b/js/KeyManager.js
index d0222b38..e6eef300 100644
--- a/js/KeyManager.js
+++ b/js/KeyManager.js
@@ -2,7 +2,7 @@
 	var ns = $.namespace("pskl");
 
 	ns.KeyManager = function () {
-		$(document.body).keyup($.proxy(this.onKeyUp_, this));
+		$(document.body).keydown($.proxy(this.onKeyUp_, this));
 	};
 
 	// Kind of object that make you want to stop front-end _engineering_:
@@ -29,14 +29,13 @@
 	
 
 	ns.KeyManager.prototype.onKeyUp_ = function(evt) {
-		//var isMac = false;
-		//if (navigator.appVersion.indexOf("Mac")!=-1) {
+		var isMac = false;
+		if (navigator.appVersion.indexOf("Mac")!=-1) {
 			// Welcome in mac world where vowels are consons and meta used instead of ctrl:
-		//	isMac = true;
-		//}
-
-		// (isMac ? evt.metaKey : evt.ctrlKey) {
-		if (evt.ctrlKey) {
+			isMac = true;
+		}
+		
+		if (isMac ? evt.metaKey : evt.ctrlKey) {
 			// Get key pressed:
  			var letter = this.CharCodeToKeyCodeMap[evt.which];
 			if(letter) {

From e85fe32f02e2d3e7b808e60c44cd2744b5f96612 Mon Sep 17 00:00:00 2001
From: Vince <grosbouddha@gmail.com>
Date: Thu, 13 Sep 2012 22:57:32 +0200
Subject: [PATCH 4/4] Basic rectangular select tool basic

---
 css/tools.css                        |   8 ++
 img/tools/cursors/select.png         | Bin 0 -> 1145 bytes
 img/tools/cursors/wand.png           | Bin 0 -> 570 bytes
 img/tools/icons/select.png           | Bin 0 -> 1145 bytes
 img/tools/icons/wand.png             | Bin 0 -> 570 bytes
 index.html                           |   2 +-
 js/Events.js                         |   2 +
 js/controller/DrawingController.js   |   8 ++
 js/drawingtools/BaseTool.js          |   2 +
 js/drawingtools/RectangularSelect.js | 108 ++++++++++++++++++++++-----
 js/piskel.js                         |   2 +-
 js/selection/BaseSelection.js        |  23 +++++-
 js/selection/SelectionManager.js     |  96 ++++++++++++++++--------
 13 files changed, 197 insertions(+), 54 deletions(-)
 create mode 100644 img/tools/cursors/select.png
 create mode 100755 img/tools/cursors/wand.png
 create mode 100644 img/tools/icons/select.png
 create mode 100755 img/tools/icons/wand.png

diff --git a/css/tools.css b/css/tools.css
index 6b1f308b..30ed57bf 100644
--- a/css/tools.css
+++ b/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 {
diff --git a/img/tools/cursors/select.png b/img/tools/cursors/select.png
new file mode 100644
index 0000000000000000000000000000000000000000..bf2b724d198cf478b028b54225fe3a5fb45059a2
GIT binary patch
literal 1145
zcmV-<1cv*GP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV000B<X+uL$Nkc;*
zP;zf(X>4Tx04R}-Ro!pfR1`mnZ(O7nKcKOW4i$^9Ra0BJ8yc;~21%2p=|UR0&DbiW
z$#rfTQ`a`O(`{9s_5yDV_yd5l2Of}kLK+Oj_Ok5(v`JGz71bo9J#^YYXp{DWs&KBa
zQ@dTpxRI}aIp=pi@6k0t$5)!;m`NF6-tt{FpOKHBn3g+MAqmexC-gw4rh87hTrL7G
z#)U`L!(So6-Zux@>;H3gR;i~0B%VTSS3P|m@o9jRsXML@Al^p#@G0Lx-0?i(9WEw_
zSYddU<1E8793KxjQ|c&UmW!m<wJPEz#Qifd`D_gH9D=nYPc7;iy3Be}cI}#B(pb7r
zQ2)<0Z#G)-dhzM<<|dEgyN}ggcgNHaf39n}NyINBzUKHDCVv(2y~bQ6jd(9W@|l`@
zq{8{hHx}zt?;zfZxN7)?sZhRX&6Fm%ZE|_eKB|VCYq~dzJ%bk!->TC>k>?{om1c9S
zUx<6_jj_<bFzzi(=30Ih>!T&^M{wWM#><F%5P#^}>IBbOSf*xP<^F{$j$aOQ5Y{cT
zROCL1M7^NKK<?M4#<(px;Nu~3TQXfUjub-vl4Az5h`EvTZbPkvoEw^(%X2^EKD8>L
z&(yA}mSw#iM0^;IB{ZO5!wl{^Sg-*ysE~&Yz8!E;Qv(A`lu*=Clo*MpVGd>OdF6n^
zam1Jntk;<}MrqIC5$=Q>n{*R}?8oOIDUw5En2dl--Xw34!z7E+5pr<Twj7JkV%^#F
z^FB1tE8`u5%(<RMUli}Gd(zOafAsejYx|L$X)B+22f)J)w3q|&`mZkiuq*PhLN2^}
zv+L>-OgyQ-soSab)C%saskMla`aQLVzg0+MZf20tJU&K{hZoBrUc+U4e9&<J19^6g
zw<TiDI@c3vSSRQQrH3Ur+aF1l-;_U<73B-%ymEJ2m)mwp_*D2-_)+*y_+I!KWZ{x<
zS@=n~B77rUjGfiv=VSBigL+%lGEKW)Q!u5Bv|D;f%1SRtuSmtnpVTc4Nn_F;)a>3o
zw|KmGEe4#xz17wBu{f`SS_4i66?j31EjY7n{zGfhONK~c+td!TS#B}JoR}5UAd7p&
z5phTyXSkK0xCeD3xaYP^o&J~#Xp9xFb0C;HHml5fA<%h1eR|qw7wxF+oN<lWx-aij
zl-K1neyXTku=K%xSu;&JP<gUTJ?bvd>L9T1Aits?sKNIwvGaN)^WO$I^cUV)HzL_|
z1K?{9p!>B*)`xfEv!4N6IG{J&h49W#Bz^(#YWw%`e_a{8n{G9m5AeR~_yl0%<7V@p
z<z{o^OZ2}6aLN1^Spac(#3;f*0000)Nkl<ZIF0R-Ar1f_00Iw#{{Oiq4C-c8sx%6_
z-G*$FL{JT2cL7N4t|tUia|!6@2vl#Jm*fQB!FRyn;QB<XM-l-B9w<H;(-q*700000
LNkvXXu0mjf7_2M{

literal 0
HcmV?d00001

diff --git a/img/tools/cursors/wand.png b/img/tools/cursors/wand.png
new file mode 100755
index 0000000000000000000000000000000000000000..44ccbf812879c42cb1f9587d865bcfc337ce6361
GIT binary patch
literal 570
zcmV-A0>%A_P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00004XF*Lt006JZ
zHwB960000PbVXQnQ*UN;cVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUz%t=H+R5;6(
zlEF(NVHn20Qxw!8VsvF$rNa`-5+NbFu&62Of;!es?4B7#mtFR>hUn2-Navsqo?5A8
zh}}V^=%7@_%C;=H{tGpIj5CMu*>5J=i;m^t2QTySd)}9aAppozC}++w<!o-H-`fCb
z-p*Kmm}jHP>Dz`eOViU-dbRRoz=JsVlZk>N%^azhi%=xTCt9`LQjtqNFW~e|R=r9=
z`@I3J^#z@aD5yBuq2DLQO#|4uFW6R5kzPZ+<e~k|<7AIVqq2-vbrqfZ0^}c~kdMjE
z;0`25w$oU`$$kQwrlH&I;^J!x>h&6Af&5}POarL&lA~3t5R1i7uh*ffDw@qEs=HBW
ze?CI~MkvG6H-MF7r{Yv4kw_q&PNP^XqFgTHXlH@RpLO}3aV{T{Ez=8lo;PHV$Ads1
zfOtF(<vfZz(S|!=0&<1eO-p=~-EKGhem^W0i@tT6ZM<i^V{$`2Aep`a$z&3RLcx%I
zJ|8%agZ`a~@0lp*^UVPnVSMNbh(sdD=kq=CBTNdJ{>s5%5V>3qE|&{lueV1Y1j%GF
zXt&#NI-LlGLPN>_18TJzN~Mxf*f6pY5Dteo^|P&3>(H{!KTr&_wGRQWb^rhX07*qo
IM6N<$g7V1&P5=M^

literal 0
HcmV?d00001

diff --git a/img/tools/icons/select.png b/img/tools/icons/select.png
new file mode 100644
index 0000000000000000000000000000000000000000..bf2b724d198cf478b028b54225fe3a5fb45059a2
GIT binary patch
literal 1145
zcmV-<1cv*GP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV000B<X+uL$Nkc;*
zP;zf(X>4Tx04R}-Ro!pfR1`mnZ(O7nKcKOW4i$^9Ra0BJ8yc;~21%2p=|UR0&DbiW
z$#rfTQ`a`O(`{9s_5yDV_yd5l2Of}kLK+Oj_Ok5(v`JGz71bo9J#^YYXp{DWs&KBa
zQ@dTpxRI}aIp=pi@6k0t$5)!;m`NF6-tt{FpOKHBn3g+MAqmexC-gw4rh87hTrL7G
z#)U`L!(So6-Zux@>;H3gR;i~0B%VTSS3P|m@o9jRsXML@Al^p#@G0Lx-0?i(9WEw_
zSYddU<1E8793KxjQ|c&UmW!m<wJPEz#Qifd`D_gH9D=nYPc7;iy3Be}cI}#B(pb7r
zQ2)<0Z#G)-dhzM<<|dEgyN}ggcgNHaf39n}NyINBzUKHDCVv(2y~bQ6jd(9W@|l`@
zq{8{hHx}zt?;zfZxN7)?sZhRX&6Fm%ZE|_eKB|VCYq~dzJ%bk!->TC>k>?{om1c9S
zUx<6_jj_<bFzzi(=30Ih>!T&^M{wWM#><F%5P#^}>IBbOSf*xP<^F{$j$aOQ5Y{cT
zROCL1M7^NKK<?M4#<(px;Nu~3TQXfUjub-vl4Az5h`EvTZbPkvoEw^(%X2^EKD8>L
z&(yA}mSw#iM0^;IB{ZO5!wl{^Sg-*ysE~&Yz8!E;Qv(A`lu*=Clo*MpVGd>OdF6n^
zam1Jntk;<}MrqIC5$=Q>n{*R}?8oOIDUw5En2dl--Xw34!z7E+5pr<Twj7JkV%^#F
z^FB1tE8`u5%(<RMUli}Gd(zOafAsejYx|L$X)B+22f)J)w3q|&`mZkiuq*PhLN2^}
zv+L>-OgyQ-soSab)C%saskMla`aQLVzg0+MZf20tJU&K{hZoBrUc+U4e9&<J19^6g
zw<TiDI@c3vSSRQQrH3Ur+aF1l-;_U<73B-%ymEJ2m)mwp_*D2-_)+*y_+I!KWZ{x<
zS@=n~B77rUjGfiv=VSBigL+%lGEKW)Q!u5Bv|D;f%1SRtuSmtnpVTc4Nn_F;)a>3o
zw|KmGEe4#xz17wBu{f`SS_4i66?j31EjY7n{zGfhONK~c+td!TS#B}JoR}5UAd7p&
z5phTyXSkK0xCeD3xaYP^o&J~#Xp9xFb0C;HHml5fA<%h1eR|qw7wxF+oN<lWx-aij
zl-K1neyXTku=K%xSu;&JP<gUTJ?bvd>L9T1Aits?sKNIwvGaN)^WO$I^cUV)HzL_|
z1K?{9p!>B*)`xfEv!4N6IG{J&h49W#Bz^(#YWw%`e_a{8n{G9m5AeR~_yl0%<7V@p
z<z{o^OZ2}6aLN1^Spac(#3;f*0000)Nkl<ZIF0R-Ar1f_00Iw#{{Oiq4C-c8sx%6_
z-G*$FL{JT2cL7N4t|tUia|!6@2vl#Jm*fQB!FRyn;QB<XM-l-B9w<H;(-q*700000
LNkvXXu0mjf7_2M{

literal 0
HcmV?d00001

diff --git a/img/tools/icons/wand.png b/img/tools/icons/wand.png
new file mode 100755
index 0000000000000000000000000000000000000000..44ccbf812879c42cb1f9587d865bcfc337ce6361
GIT binary patch
literal 570
zcmV-A0>%A_P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00004XF*Lt006JZ
zHwB960000PbVXQnQ*UN;cVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUz%t=H+R5;6(
zlEF(NVHn20Qxw!8VsvF$rNa`-5+NbFu&62Of;!es?4B7#mtFR>hUn2-Navsqo?5A8
zh}}V^=%7@_%C;=H{tGpIj5CMu*>5J=i;m^t2QTySd)}9aAppozC}++w<!o-H-`fCb
z-p*Kmm}jHP>Dz`eOViU-dbRRoz=JsVlZk>N%^azhi%=xTCt9`LQjtqNFW~e|R=r9=
z`@I3J^#z@aD5yBuq2DLQO#|4uFW6R5kzPZ+<e~k|<7AIVqq2-vbrqfZ0^}c~kdMjE
z;0`25w$oU`$$kQwrlH&I;^J!x>h&6Af&5}POarL&lA~3t5R1i7uh*ffDw@qEs=HBW
ze?CI~MkvG6H-MF7r{Yv4kw_q&PNP^XqFgTHXlH@RpLO}3aV{T{Ez=8lo;PHV$Ads1
zfOtF(<vfZz(S|!=0&<1eO-p=~-EKGhem^W0i@tT6ZM<i^V{$`2Aep`a$z&3RLcx%I
zJ|8%agZ`a~@0lp*^UVPnVSMNbh(sdD=kq=CBTNdJ{>s5%5V>3qE|&{lueV1Y1j%GF
zXt&#NI-LlGLPN>_18TJzN~Mxf*f6pY5Dteo^|P&3>(H{!KTr&_wGRQWb^rhX07*qo
IM6N<$g7V1&P5=M^

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
index bd5a61e4..edeafe43 100644
--- a/index.html
+++ b/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">
diff --git a/js/Events.js b/js/Events.js
index 1a790fdc..7afb8486 100644
--- a/js/Events.js
+++ b/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",
diff --git a/js/controller/DrawingController.js b/js/controller/DrawingController.js
index e77e4e85..d428bac2 100644
--- a/js/controller/DrawingController.js
+++ b/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;
       }
diff --git a/js/drawingtools/BaseTool.js b/js/drawingtools/BaseTool.js
index 84f96824..d2fd9477 100644
--- a/js/drawingtools/BaseTool.js
+++ b/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) {};
 
 	/**
diff --git a/js/drawingtools/RectangularSelect.js b/js/drawingtools/RectangularSelect.js
index 4324a9ee..d964c7cb 100644
--- a/js/drawingtools/RectangularSelect.js
+++ b/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:
-		overlay.setPixel(col, row, color);
+		this.lastCol = col;
+		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:
-		overlay.clear();
+		if(this.mode == "select") {
+			// Clean overlay canvas:
+			overlay.clear();
 
-		// When the user moussemove (before releasing), we dynamically compute the 
-		// pixel to draw the line and draw this line in the overlay :
-		var strokePoints = pskl.PixelUtils.getBoundRectanglePixels(this.startCol, this.startRow, col, row);
+			// When the user moussemove (before releasing), we dynamically compute the 
+			// pixel to draw the line and draw this line in the overlay :
+			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;
-		// Drawing current stroke:
-		for(var i = 0; i< strokePoints.length; i++) {
-			overlay.setPixel(strokePoints[i].col, strokePoints[i].row, color);
+		// If we mouseover the selection draw inside the overlay frame, show the 'move' cursor
+		// instead of the 'select' one. It indicates that we can move the selection by dragndroping it.
+		if(overlay.getPixel(col, row) != Constants.SELECTION_TRANSPARENT_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();
-		
-		var selection = new pskl.selection.RectangularSelection(
-			this.startCol, this.startRow, col, row);
-		$.publish(Events.SELECTION_CREATED, [selection]);
+		if(this.mode == "select") {
+			overlay.clear();
+			if(this.startCol == col &&this.startRow == row) {
+				$.publish(Events.SELECTION_DISMISSED);
+			} 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)
+			}
+		}
 	};
 })();
diff --git a/js/piskel.js b/js/piskel.js
index f4a057cd..ab587525 100644
--- a/js/piskel.js
+++ b/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
diff --git a/js/selection/BaseSelection.js b/js/selection/BaseSelection.js
index 11d76630..2458cd1d 100644
--- a/js/selection/BaseSelection.js
+++ b/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) {
-		if(this.pixels && this.pixels > 0) {
+	ns.BaseSelection.prototype.move = function (colDiff, rowDiff) {
+		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);
 		}
 	};
 })();
\ No newline at end of file
diff --git a/js/selection/SelectionManager.js b/js/selection/SelectionManager.js
index 9ca63890..59a0a225 100644
--- a/js/selection/SelectionManager.js
+++ b/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.COPY, $.proxy(this.onCopy_, this)););
-
+		$.subscribe(Events.SELECTION_CREATED, $.proxy(this.onSelectionCreated_, this));
+		$.subscribe(Events.SELECTION_DISMISSED, $.proxy(this.onSelectionDismissed_, 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;
-	};
-
-	ns.SelectionManager.prototype.addSelection = function(selection) {
-		this.currentSelection = selection;
-	};
-
-	ns.SelectionManager.prototype.removeSelection = function(selection) {
-		this.currentSelection = null;
+	/**
+	 * @private
+	 */
+	ns.SelectionManager.prototype.cleanSelection_ = function(selection) {
+		if(this.currentSelection) {
+			this.currentSelection.reset();
+		}
+		this.overlayFrame.clear();
 	};
 
 	/**
@@ -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;
-			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)
-				});
-			}
+			this.currentSelection.fillSelectionFromFrame(this.currentFrame);
 		}
 		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";
 		}
 	};
 })();