From f06f03a7f78c846a8418db5e04d8ac078e29ab95 Mon Sep 17 00:00:00 2001
From: juliandescottes <julian.descottes@gmail.com>
Date: Fri, 7 Sep 2012 01:08:25 +0200
Subject: [PATCH 1/2] Added simple move tool

---
 css/tools.css             |   8 ++
 index.html                |   2 +
 js/ToolSelector.js        |   3 +-
 js/drawingtools/Stroke.js |   2 +-
 js/model/Frame.js         | 168 +++++++++++++++++++-------------------
 5 files changed, 97 insertions(+), 86 deletions(-)

diff --git a/css/tools.css b/css/tools.css
index d4622d9c..28951210 100644
--- a/css/tools.css
+++ b/css/tools.css
@@ -45,6 +45,10 @@
   background-image: url(../img/tools/icons/rectangle.png);
 }
 
+.tool-icon.tool-move {
+  background-image: url(../img/tools/icons/rectangle.png);
+}
+
 /*.tool-icon.tool-palette {
   background-image: url(../img/tools/icons/color-palette.png);
 }*/
@@ -69,6 +73,10 @@
   cursor: url(../img/tools/cursors/rectangle.png) 4 21, pointer;
 }
 
+.tool-rectangle .drawing-canvas-move:hover {
+  cursor: url(../img/tools/cursors/rectangle.png) 4 21, pointer;
+}
+
 .tool-icon.selected {
   cursor: auto;
   background-color: #eee;
diff --git a/index.html b/index.html
index 2d444879..ef1cf081 100644
--- a/index.html
+++ b/index.html
@@ -30,6 +30,7 @@
       <li class="tool-icon tool-paint-bucket" data-tool-id="tool-paint-bucket" title="Bucket tool"></li>
       <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>
     </ul>
     
     <ul class="tools-group">
@@ -102,6 +103,7 @@
   <script src="js/drawingtools/Stroke.js"></script>
   <script src="js/drawingtools/PaintBucket.js"></script>
   <script src="js/drawingtools/Rectangle.js"></script>
+  <script src="js/drawingtools/Move.js"></script>
   <script src="js/ToolSelector.js"></script>
 
   <!-- Application controller and initialization -->
diff --git a/js/ToolSelector.js b/js/ToolSelector.js
index f00e3576..0f69feaf 100644
--- a/js/ToolSelector.js
+++ b/js/ToolSelector.js
@@ -14,7 +14,8 @@ pskl.ToolSelector = (function() {
 		"eraser" : new pskl.drawingtools.Eraser(),
 		"paintBucket" : new pskl.drawingtools.PaintBucket(),
 		"stroke" : new pskl.drawingtools.Stroke(),
-		"rectangle" : new pskl.drawingtools.Rectangle()
+		"rectangle" : new pskl.drawingtools.Rectangle(),
+		"move" : new pskl.drawingtools.Move()
 	};
 	var currentSelectedTool = toolInstances.simplePen;
 	var previousSelectedTool = toolInstances.simplePen;
diff --git a/js/drawingtools/Stroke.js b/js/drawingtools/Stroke.js
index a592fde2..92bb8450 100644
--- a/js/drawingtools/Stroke.js
+++ b/js/drawingtools/Stroke.js
@@ -34,7 +34,7 @@
 
 		// The fake canvas where we will draw the preview of the stroke:
 		// Drawing the first point of the stroke in the fake overlay canvas:
-		drawer.updateOverlay(col, row, color);
+		drawer.overlay.setPixel(col, row, color);
 		drawer.renderOverlay();
 	};
 
diff --git a/js/model/Frame.js b/js/model/Frame.js
index 346ea412..d78d7fc5 100644
--- a/js/model/Frame.js
+++ b/js/model/Frame.js
@@ -1,85 +1,85 @@
-(function () {
-	var ns = $.namespace("pskl.model");
-	
-	ns.Frame = function (pixels) {
-		this.pixels = pixels;
-		this.previousStates = [pixels];
-		this.stateIndex = 0;
-	};
-
-	ns.Frame.createEmpty = function (width, height) {
-		var pixels = []; //new Array(width);
-		for (var columnIndex=0; columnIndex < width; columnIndex++) {
-			var columnArray = [];
-			for(var heightIndex = 0; heightIndex < height; heightIndex++) {
-				columnArray.push(Constants.TRANSPARENT_COLOR);
-			}
-			pixels[columnIndex] = columnArray;
-    	}
-		return new ns.Frame(pixels);
-	};
-
-	ns.Frame.createEmptyFromFrame = function (frame) {
-		return ns.Frame.createEmpty(frame.getWidth(), frame.getHeight());
-	};
-
-	ns.Frame.prototype.clone = function () {
-		return new ns.Frame(this._clonePixels());
-	};
-
-	ns.Frame.prototype._clonePixels = function () {
-		var pixels = [];
-		for (var col = 0 ; col < this.getWidth() ; col++) {
-			pixels[col] = this.pixels[col].slice(0 , this.getHeight());
-		}
-		return pixels;
-	};
-
-	ns.Frame.prototype.serialize = function () {
-		return JSON.stringify(this.pixels);
-	};
-
-	ns.Frame.prototype.setPixel = function (col, row, color) {
-		this.pixels[col][row] = color;
-	};
-
-	ns.Frame.prototype.getPixel = function (col, row) {
-		return this.pixels[col][row];
-	};
-
-	ns.Frame.prototype.getWidth = function () {
-		return this.pixels.length;
-	};
-
-	ns.Frame.prototype.getHeight = function () {
-		return this.pixels[0].length;
-	};
-
-	ns.Frame.prototype.containsPixel = function (col, row) {
-		return col >= 0 && row >= 0 && col <= this.pixels.length && row <= this.pixels[0].length;
-	};
-
-	ns.Frame.prototype.saveState = function () {
-		// remove all states past current state
-		this.previousStates.length = this.stateIndex + 1;
-		// push new state
-		this.previousStates.push(this._clonePixels());
-		// set the stateIndex to latest saved state
-		this.stateIndex = this.previousStates.length - 1;
-	};
-
-	ns.Frame.prototype.loadPreviousState = function () {
-		if (this.stateIndex >= 0) {
-			this.stateIndex--;
-			this.pixels = this.previousStates[this.stateIndex];
-		}	
-	};
-
-	ns.Frame.prototype.loadNextState = function () {
-		if (this.stateIndex < this.previousStates.length - 1) {
-			this.stateIndex++;
-			this.pixels = this.previousStates[this.stateIndex];
-		}	
-	};
-
+(function () {
+	var ns = $.namespace("pskl.model");
+	
+	ns.Frame = function (pixels) {
+		this.pixels = pixels;
+		this.previousStates = [this._clonePixels()];
+		this.stateIndex = 0;
+	};
+
+	ns.Frame.createEmpty = function (width, height) {
+		var pixels = []; //new Array(width);
+		for (var columnIndex=0; columnIndex < width; columnIndex++) {
+			var columnArray = [];
+			for(var heightIndex = 0; heightIndex < height; heightIndex++) {
+				columnArray.push(Constants.TRANSPARENT_COLOR);
+			}
+			pixels[columnIndex] = columnArray;
+    	}
+		return new ns.Frame(pixels);
+	};
+
+	ns.Frame.createEmptyFromFrame = function (frame) {
+		return ns.Frame.createEmpty(frame.getWidth(), frame.getHeight());
+	};
+
+	ns.Frame.prototype.clone = function () {
+		return new ns.Frame(this._clonePixels());
+	};
+
+	ns.Frame.prototype._clonePixels = function () {
+		var pixels = [];
+		for (var col = 0 ; col < this.getWidth() ; col++) {
+			pixels[col] = this.pixels[col].slice(0 , this.getHeight());
+		}
+		return pixels;
+	};
+
+	ns.Frame.prototype.serialize = function () {
+		return JSON.stringify(this.pixels);
+	};
+
+	ns.Frame.prototype.setPixel = function (col, row, color) {
+		this.pixels[col][row] = color;
+	};
+
+	ns.Frame.prototype.getPixel = function (col, row) {
+		return this.pixels[col][row];
+	};
+
+	ns.Frame.prototype.getWidth = function () {
+		return this.pixels.length;
+	};
+
+	ns.Frame.prototype.getHeight = function () {
+		return this.pixels[0].length;
+	};
+
+	ns.Frame.prototype.containsPixel = function (col, row) {
+		return col >= 0 && row >= 0 && col < this.pixels.length && row < this.pixels[0].length;
+	};
+
+	ns.Frame.prototype.saveState = function () {
+		// remove all states past current state
+		this.previousStates.length = this.stateIndex + 1;
+		// push new state
+		this.previousStates.push(this._clonePixels());
+		// set the stateIndex to latest saved state
+		this.stateIndex = this.previousStates.length - 1;
+	};
+
+	ns.Frame.prototype.loadPreviousState = function () {
+		if (this.stateIndex > 0) {
+			this.stateIndex--;
+			this.pixels = this.previousStates[this.stateIndex];
+		}
+	};
+
+	ns.Frame.prototype.loadNextState = function () {
+		if (this.stateIndex < this.previousStates.length - 1) {
+			this.stateIndex++;
+			this.pixels = this.previousStates[this.stateIndex];
+		}	
+	};
+
 })();
\ No newline at end of file

From 5f6fd068ebf080182d3bdd372d0d476a838f86e9 Mon Sep 17 00:00:00 2001
From: juliandescottes <julian.descottes@gmail.com>
Date: Fri, 7 Sep 2012 01:14:51 +0200
Subject: [PATCH 2/2] added proper icon

---
 css/tools.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/css/tools.css b/css/tools.css
index 28951210..7aeb3f49 100644
--- a/css/tools.css
+++ b/css/tools.css
@@ -46,7 +46,7 @@
 }
 
 .tool-icon.tool-move {
-  background-image: url(../img/tools/icons/rectangle.png);
+  background-image: url(../img/tools/icons/hand.png);
 }
 
 /*.tool-icon.tool-palette {
@@ -73,8 +73,8 @@
   cursor: url(../img/tools/cursors/rectangle.png) 4 21, pointer;
 }
 
-.tool-rectangle .drawing-canvas-move:hover {
-  cursor: url(../img/tools/cursors/rectangle.png) 4 21, pointer;
+.tool-move .drawing-canvas-container:hover {
+  cursor: url(../img/tools/cursors/hand.png) 14 12, pointer;
 }
 
 .tool-icon.selected {