Initial work + merge

js/drawingtools/BaseTool.js

@@ -8,11 +8,11 @@
 
 	ns.BaseTool = function() {};
 
-	ns.BaseTool.prototype.applyToolAt = function(col, row, frame) {};
+	ns.BaseTool.prototype.applyToolAt = function(col, row, color, frame, overlay) {};
 	
-	ns.BaseTool.prototype.moveToolAt = function(col, row, frame) {};
+	ns.BaseTool.prototype.moveToolAt = function(col, row, color, frame, overlay) {};
 
-	ns.BaseTool.prototype.releaseToolAt = function(col, row, frame) {};
+	ns.BaseTool.prototype.releaseToolAt = function(col, row, color, frame, overlay) {};
 
 	/**
 	 * Bresenham line algorihtm: Get an array of pixels from

js/drawingtools/Eraser.js

@@ -16,7 +16,7 @@
 	/**
 	 * @override
 	 */
-	ns.Eraser.prototype.applyToolAt = function(col, row, color, drawer) {
-		this.superclass.applyToolAt.call(this, col, row, Constants.TRANSPARENT_COLOR, drawer);
+	ns.Eraser.prototype.applyToolAt = function(col, row, color, frame, overlay) {
+		this.superclass.applyToolAt.call(this, col, row, Constants.TRANSPARENT_COLOR, frame, overlay);
 	};
 })();

js/drawingtools/Move.js

@@ -19,16 +19,16 @@
 	/**
 	 * @override
 	 */
-	ns.Move.prototype.applyToolAt = function(col, row, color, drawer) {
+	ns.Move.prototype.applyToolAt = function(col, row, color, frame, overlay) {
 		this.startCol = col;
 		this.startRow = row;
-		this.frameClone = drawer.frame.clone();
+		this.frameClone = frame.clone();
 	};
 
-	ns.Move.prototype.moveToolAt = function(col, row, color, drawer) {	
+	ns.Move.prototype.moveToolAt = function(col, row, color, frame, overlay) {	
 		var colDiff = col - this.startCol, rowDiff = row - this.startRow;
 		if (colDiff != 0 || rowDiff != 0) {
-			this.shiftFrame(colDiff, rowDiff, drawer.frame, this.frameClone);
+			this.shiftFrame(colDiff, rowDiff, frame, this.frameClone);
 		}
 	};
 
@@ -49,7 +49,7 @@
 	/**
 	 * @override
 	 */
-	ns.Move.prototype.releaseToolAt = function(col, row, color, drawer) {
-		this.moveToolAt(col, row, color, drawer);
+	ns.Move.prototype.releaseToolAt = function(col, row, color, frame, overlay) {
+		this.moveToolAt(col, row, color, frame, overlay);
 	};
 })();

js/drawingtools/PaintBucket.js

@@ -15,12 +15,11 @@
 	/**
 	 * @override
 	 */
-	ns.PaintBucket.prototype.applyToolAt = function(col, row, color, drawer) {
+	ns.PaintBucket.prototype.applyToolAt = function(col, row, color, frame, overlay) {
 
 		// Change model:
-		var targetColor = drawer.frame.getPixel(col, row);
-		//this.recursiveFloodFill_(frame, col, row, targetColor, color);
-		this.queueLinearFloodFill_(drawer.frame, col, row, targetColor, color);
+		var targetColor = frame.getPixel(col, row);
+		this.queueLinearFloodFill_(frame, col, row, targetColor, color);
 	};
 
 	/**

js/drawingtools/Rectangle.js

@@ -19,17 +19,16 @@
 	/**
 	 * @override
 	 */
-	ns.Rectangle.prototype.applyToolAt = function(col, row, color, drawer) {
+	ns.Rectangle.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:
-		drawer.overlayFrame.setPixel(col, row, color);
+		overlay.setPixel(col, row, color);
 	};
 
-	ns.Rectangle.prototype.moveToolAt = function(col, row, color, drawer) {
-		// Clean overlay canvas:
-		drawer.clearOverlay();
+	ns.Rectangle.prototype.moveToolAt = function(col, row, color, frame, overlay) {
+		overlay.clear();
 
 		// When the user moussemove (before releasing), we dynamically compute the 
 		// pixel to draw the line and draw this line in the overlay :
@@ -41,21 +40,21 @@
 			if(color == Constants.TRANSPARENT_COLOR) {
 				color = Constants.SELECTION_TRANSPARENT_COLOR;
 			}			
-			drawer.overlayFrame.setPixel(strokePoints[i].col, strokePoints[i].row, color);
+			overlay.setPixel(strokePoints[i].col, strokePoints[i].row, color);
 		}
 	};
 
 	/**
 	 * @override
 	 */
-	ns.Rectangle.prototype.releaseToolAt = function(col, row, color, drawer) {		
-		drawer.clearOverlay();
+	ns.Rectangle.prototype.releaseToolAt = function(col, row, color, frame, overlay) {		
+		overlay.clear();
 		// If the stroke tool is released outside of the canvas, we cancel the stroke: 
-		if(drawer.frame.containsPixel(col, row)) {
+		if(frame.containsPixel(col, row)) {
 			var strokePoints = this.getRectanglePixels_(this.startCol, col, this.startRow, row);
 			for(var i = 0; i< strokePoints.length; i++) {
 				// Change model:
-				drawer.frame.setPixel(strokePoints[i].col, strokePoints[i].row, color);
+				frame.setPixel(strokePoints[i].col, strokePoints[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)		

js/drawingtools/SelectTool.js

@@ -0,0 +1,130 @@
+/*
+ * @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;
+     };
+
+})();

js/drawingtools/SimplePen.js

@@ -18,27 +18,27 @@
 	/**
 	 * @override
 	 */
-	ns.SimplePen.prototype.applyToolAt = function(col, row, color, drawer) {
-		if (drawer.frame.containsPixel(col, row)) {
+	ns.SimplePen.prototype.applyToolAt = function(col, row, color, frame, overlay) {
+		if (frame.containsPixel(col, row)) {
 			this.previousCol = col;
 			this.previousRow = row;
-		    drawer.frame.setPixel(col, row, color);
+		    frame.setPixel(col, row, color);
 		}
 	};
 
-	ns.SimplePen.prototype.moveToolAt = function(col, row, color, drawer) {
-		
+	ns.SimplePen.prototype.moveToolAt = function(col, row, color, frame, overlay) {
 		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.
 			// We fill the gap by calculating missing dots (simple linear interpolation) and draw them.
 			var interpolatedPixels = this.getLinePixels_(col, this.previousCol, row, this.previousRow);
 			for(var i=0, l=interpolatedPixels.length; i<l; i++) {
-				this.applyToolAt(interpolatedPixels[i].col, interpolatedPixels[i].row, color, drawer);
+				var coords = interpolatedPixels[i];
+				this.applyToolAt(coords.col, coords.row, color, frame, overlay);
 			}
 		}
 		else {
-			this.applyToolAt(col, row, color, drawer);
+			this.applyToolAt(col, row, color, frame, overlay);
 		}
 
 		this.previousCol = col;

js/drawingtools/Stroke.js

@@ -12,8 +12,6 @@
 		// Stroke's first point coordinates (set in applyToolAt)
 		this.startCol = null;
 		this.startRow = null;
-		
-		this.canvasOverlay = null;
 	};
 
 	pskl.utils.inherit(ns.Stroke, ns.BaseTool);
@@ -21,7 +19,7 @@
 	/**
 	 * @override
 	 */
-	ns.Stroke.prototype.applyToolAt = function(col, row, color, drawer) {
+	ns.Stroke.prototype.applyToolAt = function(col, row, color, frame, overlay) {
 		this.startCol = col;
 		this.startRow = row;
 		
@@ -34,11 +32,11 @@
 
 		// 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.overlayFrame.setPixel(col, row, color);
+		overlay.setPixel(col, row, color);
 	};
 
-	ns.Stroke.prototype.moveToolAt = function(col, row, color, drawer) {
-		drawer.clearOverlay();
+	ns.Stroke.prototype.moveToolAt = function(col, row, color, frame, overlay) {
+		overlay.clear();
 
 		// When the user moussemove (before releasing), we dynamically compute the 
 		// pixel to draw the line and draw this line in the overlay canvas:
@@ -56,28 +54,26 @@
 				// eg deleting the equivalent of a stroke.		
 				color = Constants.SELECTION_TRANSPARENT_COLOR;
 			}			
-			drawer.overlayFrame.setPixel(strokePoints[i].col, strokePoints[i].row, color);
+			overlay.setPixel(strokePoints[i].col, strokePoints[i].row, color);
 		}
 	};
 
 	/**
 	 * @override
 	 */
-	ns.Stroke.prototype.releaseToolAt = function(col, row, color, drawer) {
+	ns.Stroke.prototype.releaseToolAt = function(col, row, color, frame, overlay) {
 		// If the stroke tool is released outside of the canvas, we cancel the stroke:
 		// TODO: Mutualize this check in common method
-		if(drawer.frame.containsPixel(col, row)) {
+		if(frame.containsPixel(col, row)) {
 			// 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)
 			var strokePoints = this.getLinePixels_(this.startCol, col, this.startRow, row);
 			for(var i = 0; i< strokePoints.length; i++) {
 				// Change model:
-				drawer.frame.setPixel(strokePoints[i].col, strokePoints[i].row, color);
+				frame.setPixel(strokePoints[i].col, strokePoints[i].row, color);
 			}
-			// Draw in canvas:
-			// TODO: Remove that when we have the centralized redraw loop
 		} 
 		// For now, we are done with the stroke tool and don't need an overlay anymore:
-		drawer.clearOverlay();   
+		overlay.clear();   
 	};
 })();