Finalized first implementation of Circle tool

js/controller/PreviewFilmController.js

@@ -208,7 +208,6 @@
 
     ns.PreviewFilmController.prototype.onDeleteButtonClick_ = function (index, evt) {
     	this.framesheet.removeFrameByIndex(index);
-		$.publish(Events.FRAMESHEET_RESET);
 		$.publish(Events.LOCALSTORAGE_REQUEST);	// Should come from model	
     };
 

js/drawingtools/Circle.js

@@ -29,18 +29,12 @@
 
 	ns.Circle.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 :
-		var strokePoints = pskl.PixelUtils.getBoundRectanglePixels(this.startCol, this.startRow, col, row);
 		if(color == Constants.TRANSPARENT_COLOR) {
 			color = Constants.SELECTION_TRANSPARENT_COLOR;
 		}
 
-		// Drawing current stroke:
+		// draw in overlay
-		for(var i = 0; i< strokePoints.length; i++) {
+		this.drawCircle_(col, row, color, overlay);
-			overlay.setPixel(strokePoints[i].col, strokePoints[i].row, color);
-		}
 	};
 
 	/**
@@ -48,15 +42,43 @@
 	 */
 	ns.Circle.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(frame.containsPixel(col, row)) { // cancel if outside of canvas
-		if(frame.containsPixel(col, row)) {
+			// draw in frame to finalize
-			var strokePoints = pskl.PixelUtils.getBoundRectanglePixels(this.startCol, this.startRow, col, row);
+			this.drawCircle_(col, row, color, frame);
-			for(var i = 0; i< strokePoints.length; i++) {
-				// Change model:
-				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)		
 		}
 	};
+
+	ns.Circle.prototype.drawCircle_ = function (col, row, color, targetFrame) {
+		var circlePoints = this.getCirclePixels_(this.startCol, this.startRow, col, row);
+		for(var i = 0; i< circlePoints.length; i++) {
+			// Change model:
+			targetFrame.setPixel(circlePoints[i].col, circlePoints[i].row, color);
+		}
+	};
+
+	ns.Circle.prototype.getCirclePixels_ = function (x0, y0, x1, y1) {
+		var coords = pskl.PixelUtils.getOrderedRectangleCoordinates(x0, y0, x1, y1);
+		var xC = (coords.x0 + coords.x1)/2;
+		var yC = (coords.y0 + coords.y1)/2;
+		
+		var rX = coords.x1 - xC;
+		var rY = coords.y1 - yC;
+
+		var pixels = [];
+		var x, y, angle;
+		for (x = coords.x0 ; x < coords.x1 ; x++) {
+			angle = Math.acos((x - xC)/rX);
+			y = Math.round(rY * Math.sin(angle) + yC);
+			pixels.push({"col": x, "row": y});
+			pixels.push({"col": 2*xC - x, "row": 2*yC - y});
+		}
+
+		for (y = coords.y0 ; y < coords.y1 ; y++) {
+			angle = Math.asin((y - yC)/rY);
+			x = Math.round(rX * Math.cos(angle) + xC);
+			pixels.push({"col": x, "row": y});
+			pixels.push({"col": 2*xC - x, "row": 2*yC - y});
+		}
+		return pixels;
+	};
 })();

js/drawingtools/Rectangle.js

@@ -34,7 +34,7 @@
 		}
 
 		// draw in overlay
-		this.drawRectangle(col, row, color, overlay);
+		this.drawRectangle_(col, row, color, overlay);
 	};
 
 	/**
@@ -44,15 +44,15 @@
 		overlay.clear();
 		if(frame.containsPixel(col, row)) { // cancel if outside of canvas
 			// draw in frame to finalize
-			this.drawRectangle(col, row, color, frame);
+			this.drawRectangle_(col, row, color, frame);
 		}
 	};
 
-	ns.Rectangle.prototype.drawRectangle = function (col, row, color, targetFrame) {
+	ns.Rectangle.prototype.drawRectangle_ = function (col, row, color, targetFrame) {
 		var strokePoints = pskl.PixelUtils.getBoundRectanglePixels(this.startCol, this.startRow, col, row);
 		for(var i = 0; i< strokePoints.length; i++) {
 			// Change model:
 			targetFrame.setPixel(strokePoints[i].col, strokePoints[i].row, color);
 		}
-	}
+	};
 })();

js/model/FrameSheet.js

@@ -96,6 +96,14 @@
 			throw "Out of bound index for frameSheet object.";
 		}
 		this.frames.splice(index, 1);
+
+		// Current frame index might not be valid anymore
+		if (!this.hasFrameAtIndex(this.currentFrameIndex)) {
+			// if not select last frame available
+			this.setCurrentFrameIndex(this.getFrameCount() - 1);
+		}
+
+		$.publish(Events.FRAMESHEET_RESET);
 	};
 
 	ns.FrameSheet.prototype.duplicateFrameByIndex = function(index) {