master conflict merge

css/tools.css

@@ -45,6 +45,10 @@
   background-image: url(../img/tools/icons/rectangle.png);
 }
 
+.tool-icon.tool-circle {
+  background-image: url(../img/tools/cursors/circle.png);
+}
+
 .tool-icon.tool-move {
   background-image: url(../img/tools/icons/hand.png);
 }
@@ -81,6 +85,10 @@
   cursor: url(../img/tools/cursors/rectangle.png) 4 21, pointer;
 }
 
+.tool-circle .drawing-canvas-container:hover {
+  cursor: url(../img/tools/cursors/circle.png) 4 21, pointer;
+}
+
 .tool-move .drawing-canvas-container:hover {
   cursor: url(../img/tools/cursors/hand.png) 14 12, pointer;
 }

index.html

@@ -31,6 +31,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-circle" data-tool-id="tool-circle" title="Circle tool"></li>
       <li class="tool-icon tool-move" data-tool-id="tool-move" title="Move tool"></li>
       <li class="tool-icon tool-rectangle-select" data-tool-id="tool-rectangle-select" title="Rectangle selection tool"></li>
       <li class="tool-icon tool-shape-select" data-tool-id="tool-shape-select" title="Shape selection tool"></li>
@@ -115,12 +116,16 @@
   <script src="js/selection/ShapeSelection.js"></script>
   <script src="js/Palette.js"></script>
   <script src="js/Notification.js"></script>
+
+
+  <!-- Tools-->
   <script src="js/drawingtools/BaseTool.js"></script>
   <script src="js/drawingtools/SimplePen.js"></script>
   <script src="js/drawingtools/Eraser.js"></script>
   <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/Circle.js"></script>
   <script src="js/drawingtools/Move.js"></script>
   <script src="js/drawingtools/selectiontools/BaseSelect.js"></script>
   <script src="js/drawingtools/selectiontools/RectangleSelect.js"></script>

js/HistoryManager.js

@@ -17,16 +17,12 @@
 
   ns.HistoryManager.prototype.undo = function () {
     this.framesheet.getCurrentFrame().loadPreviousState();
-    this.redraw();
+    $.publish(Events.FRAMESHEET_RESET);
   };
 
   ns.HistoryManager.prototype.redo = function () {
     this.framesheet.getCurrentFrame().loadNextState();
-    this.redraw();
+    $.publish(Events.FRAMESHEET_RESET);
   };
 
-  ns.HistoryManager.prototype.redraw = function () {
-    this.framesheet.drawingController.renderFrame();
-    this.framesheet.previewsController.createPreviews();
-  };
 })();

js/KeyManager.js

@@ -46,5 +46,5 @@
 			}
 		}
 	};
-
+	
 })();

js/ToolSelector.js

@@ -15,6 +15,7 @@ pskl.ToolSelector = (function() {
         "paintBucket" : new pskl.drawingtools.PaintBucket(),
         "stroke" : new pskl.drawingtools.Stroke(),
         "rectangle" : new pskl.drawingtools.Rectangle(),
+        "circle" : new pskl.drawingtools.Circle(),
         "move" : new pskl.drawingtools.Move(),
         "rectangleSelect" : new pskl.drawingtools.RectangleSelect(),
         "shapeSelect" : new pskl.drawingtools.ShapeSelect()

js/controller/DrawingController.js

@@ -1,44 +1,44 @@
 (function () {
-	var ns = $.namespace("pskl.controller");
+  var ns = $.namespace("pskl.controller");
-	ns.DrawingController = function (framesheet, container, dpi) {
+  ns.DrawingController = function (framesheet, container, dpi) {
-		// TODO(vincz): Store user prefs in a localstorage string ?
+    // TODO(vincz): Store user prefs in a localstorage string ?
-		var renderingOptions = {
+    var renderingOptions = {
-			"dpi": dpi,
+      "dpi": dpi,
-			"hasGrid" : true
+      "hasGrid" : true
-		};
+    };
 
-		/**
+    /**
-		 * @public
+     * @public
-		 */
+     */
-		this.framesheet = framesheet;
+    this.framesheet = framesheet;
-		
+    
-		/**
+    /**
-		 * @public
+     * @public
-		 */
+     */
-		this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(framesheet.getCurrentFrame());
+    this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(framesheet.getCurrentFrame());
 
-		/**
+    /**
-		 * @private
+     * @private
-		 */
+     */
-		this.container = container;
+    this.container = container;
-		
+    
-		this.renderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "drawing-canvas");
+    this.renderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "drawing-canvas");
-		this.overlayRenderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "canvas-overlay");
+    this.overlayRenderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "canvas-overlay");
-		
+    
-		this.renderer.init(framesheet.getCurrentFrame());
+    this.renderer.init(framesheet.getCurrentFrame());
-		this.overlayRenderer.init(this.overlayFrame);
+    this.overlayRenderer.init(this.overlayFrame);
 
-		// State of drawing controller:
+    // State of drawing controller:
-		this.isClicked = false;
+    this.isClicked = false;
-		this.isRightClicked = false;
+    this.isRightClicked = false;
-		this.previousMousemoveTime = 0;
+    this.previousMousemoveTime = 0;
-		this.currentToolBehavior = null;
+    this.currentToolBehavior = null;
-		this.primaryColor =  Constants.DEFAULT_PEN_COLOR;
+    this.primaryColor =  Constants.DEFAULT_PEN_COLOR;
-		this.secondaryColor =  Constants.TRANSPARENT_COLOR;
+    this.secondaryColor =  Constants.TRANSPARENT_COLOR;
 
-		this.initMouseBehavior();
+    this.initMouseBehavior();
 
-		$.subscribe(Events.TOOL_SELECTED, $.proxy(function(evt, toolBehavior) {
+    $.subscribe(Events.TOOL_SELECTED, $.proxy(function(evt, toolBehavior) {
       console.log("Tool selected: ", toolBehavior);
       this.currentToolBehavior = toolBehavior;
     }, this));
@@ -51,22 +51,22 @@
         this.secondaryColor = color;
       }
     }, this));
-	};
+  };
 
-	ns.DrawingController.prototype.initMouseBehavior = function() {
+  ns.DrawingController.prototype.initMouseBehavior = function() {
-		var body = $('body');
+    var body = $('body');
         this.container.mousedown($.proxy(this.onMousedown_, this));
         this.container.mousemove($.proxy(this.onMousemove_, this));
         body.mouseup($.proxy(this.onMouseup_, this));
         
         // Deactivate right click:
         this.container.contextmenu(this.onCanvasContextMenu_);
-	};
+  };
 
-	/**
+  /**
-	 * @private
+   * @private
-	 */
+   */
-	ns.DrawingController.prototype.onMousedown_ = function (event) {
+  ns.DrawingController.prototype.onMousedown_ = function (event) {
       this.isClicked = true;
       
       if(event.button == 2) { // right click
@@ -87,8 +87,8 @@
     };
 
     /**
-	 * @private
+   * @private
-	 */
+   */
     ns.DrawingController.prototype.onMousemove_ = function (event) {
       var currentTime = new Date().getTime();
       // Throttling of the mousemove event:
@@ -102,7 +102,7 @@
             this.framesheet.getCurrentFrame(),
             this.overlayFrame
           );
-		  
+      
           // TODO(vincz): Find a way to move that to the model instead of being at the interaction level.
           // 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.
@@ -121,8 +121,8 @@
     };
 
     /**
-	 * @private
+   * @private
-	 */
+   */
     ns.DrawingController.prototype.onMouseup_ = function (event) {
       if(this.isClicked || this.isRightClicked) {
         // A mouse button was clicked on the drawing canvas before this mouseup event,
@@ -147,8 +147,8 @@
     },
 
     /**
-	 * @private
+   * @private
-	 */
+   */
     ns.DrawingController.prototype.getRelativeCoordinates = function (clientX, clientY) {
       var canvasPageOffset = this.container.offset();
       return {
@@ -158,16 +158,16 @@
     };
 
     /**
-	 * @private
+   * @private
-	 */
+   */
     ns.DrawingController.prototype.getSpriteCoordinates = function(event) {
         var coords = this.getRelativeCoordinates(event.clientX, event.clientY);
         return this.renderer.convertPixelCoordinatesIntoSpriteCoordinate(coords);
     };
 
     /**
-	 * @private
+   * @private
-	 */
+   */
     ns.DrawingController.prototype.getCurrentColor_ = function () {
       if(this.isRightClicked) {
         return this.secondaryColor;
@@ -177,45 +177,44 @@
     };
 
     /**
-	 * @private
+   * @private
-	 */
+   */
     ns.DrawingController.prototype.onCanvasContextMenu_ = function (event) {
       event.preventDefault();
       event.stopPropagation();
       event.cancelBubble = true;
       return false;
     };
-	
+  
-	ns.DrawingController.prototype.updateDPI = function (newDPI) {
+  ns.DrawingController.prototype.updateDPI = function (newDPI) {
-		this.renderer.updateDPI(newDPI);
+    this.renderer.updateDPI(newDPI);
-		this.overlayRenderer.updateDPI(newDPI);
+    this.overlayRenderer.updateDPI(newDPI);
-
+    this.forceRendering_();
-		this.render();
-	};
-
-  ns.DrawingController.prototype.render = function () {
-    try {
-      this.renderFrame();
-      this.renderOverlay();
-    } catch (e) {
-      // TODO : temporary t/c for integration
-    }
   };
 
-	ns.DrawingController.prototype.renderFrame = function () {
+  ns.DrawingController.prototype.render = function () {
+    this.renderFrame();
+    this.renderOverlay();
+  };
+
+  ns.DrawingController.prototype.renderFrame = function () {
     var frame = this.framesheet.getCurrentFrame();
     var serializedFrame = frame.serialize();
     if (this.serializedFrame != serializedFrame) {
-      this.serializedFrame = serializedFrame
+      this.serializedFrame = serializedFrame;
-		  this.renderer.render(frame);
+      this.renderer.render(frame);
     }
-	};
+  };
 
-	ns.DrawingController.prototype.renderOverlay = function () {
+  ns.DrawingController.prototype.renderOverlay = function () {
     var serializedOverlay = this.overlayFrame.serialize();
     if (this.serializedOverlay != serializedOverlay) {
-      this.serializedOverlay = serializedOverlay
+      this.serializedOverlay = serializedOverlay;
       this.overlayRenderer.render(this.overlayFrame);
     }
-	};
+  };
+
+  ns.DrawingController.prototype.forceRendering_ = function () {
+    this.serializedFrame = this.serializedOverlay = null;
+  }
 })();

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

@@ -0,0 +1,84 @@
+/*
+ * @provide pskl.drawingtools.Circle
+ *
+ * @require pskl.utils
+ */
+(function() {
+	var ns = $.namespace("pskl.drawingtools");
+
+	ns.Circle = function() {
+		this.toolId = "tool-circle"
+		
+		// Circle's first point coordinates (set in applyToolAt)
+		this.startCol = null;
+		this.startRow = null;
+	};
+
+	pskl.utils.inherit(ns.Circle, ns.BaseTool);
+	
+	/**
+	 * @override
+	 */
+	ns.Circle.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.Circle.prototype.moveToolAt = function(col, row, color, frame, overlay) {
+		overlay.clear();
+		if(color == Constants.TRANSPARENT_COLOR) {
+			color = Constants.SELECTION_TRANSPARENT_COLOR;
+		}
+
+		// draw in overlay
+		this.drawCircle_(col, row, color, overlay);
+	};
+
+	/**
+	 * @override
+	 */
+	ns.Circle.prototype.releaseToolAt = function(col, row, color, frame, overlay) {		
+		overlay.clear();
+		if(frame.containsPixel(col, row)) { // cancel if outside of canvas
+			// draw in frame to finalize
+			this.drawCircle_(col, row, color, frame);
+		}
+	};
+
+	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

@@ -29,20 +29,12 @@
 
 	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 :
-		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.drawRectangle_(col, row, color, overlay);
-
-						
-			overlay.setPixel(strokePoints[i].col, strokePoints[i].row, color);
-		}
 	};
 
 	/**
@@ -50,52 +42,17 @@
 	 */
 	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(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.drawRectangle_(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.Rectangle.prototype.drawRectangle_ = function (col, row, color, targetFrame) {
-	 * Get an array of pixels representing the rectangle.
+		var strokePoints = pskl.PixelUtils.getBoundRectanglePixels(this.startCol, this.startRow, col, row);
-	 *
+		for(var i = 0; i< strokePoints.length; i++) {
-	 * @private
+			// Change model:
-	 */
+			targetFrame.setPixel(strokePoints[i].col, strokePoints[i].row, color);
-	ns.Rectangle.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/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) {

js/piskel.js

@@ -17,8 +17,7 @@ $.namespace("pskl");
       framePixelHeight = 32,
 
       // Scaling factors for a given frameSheet rendering:
-      // Main drawing area:
+      // Main drawing area dpi is calculated dynamically
-      drawingCanvasDpi = 20,   
       // Canvas preview film canvases:
       previewTileCanvasDpi = 4,
       // Animated canvas preview:
@@ -30,15 +29,13 @@ $.namespace("pskl");
   var piskel = {
 
     init : function () {
-      piskel.initDPIs_();
-
       frameSheet = new pskl.model.FrameSheet(framePixelWidth, framePixelHeight);
       frameSheet.addEmptyFrame();
       
       this.drawingController = new pskl.controller.DrawingController(
         frameSheet,
         $('#drawing-canvas-container'), 
-        drawingCanvasDpi
+        this.calculateDPIsForDrawingCanvas_()
       );
 
       this.animationController = new pskl.controller.AnimatedPreviewController(
@@ -47,7 +44,6 @@ $.namespace("pskl");
         previewAnimationCanvasDpi
       );
 
-
       this.previewsController = new pskl.controller.PreviewFilmController(
         frameSheet,
         $('#preview-list'), 
@@ -55,18 +51,17 @@ $.namespace("pskl");
       );
 
       // To catch the current active frame, the selection manager have to be initialized before
-      // the 'frameSheet.setCurrentFrameIndex(0);'
+      // the 'frameSheet.setCurrentFrameIndex(0);' line below.
       // 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
+      // All listeners 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(frameSheet, this.drawingController.overlayFrame);
-      
-      frameSheet.setCurrentFrameIndex(0);
 
-      
+      // DO NOT MOVE THIS LINE (see comment above)
+      frameSheet.setCurrentFrameIndex(0);
 
       this.animationController.init();
       this.previewsController.init();
@@ -92,6 +87,8 @@ $.namespace("pskl");
       var drawingLoop = new pskl.rendering.DrawingLoop();
       drawingLoop.addCallback(this.render, this);
       drawingLoop.start();
+
+      this.connectResizeToDpiUpdate_();
     },
 
     render : function (delta) {
@@ -100,18 +97,18 @@ $.namespace("pskl");
       this.previewsController.render(delta);
     },
 
-    /**
+    connectResizeToDpiUpdate_ : function () {
-     * Override default DPIs.
+      $(window).resize($.proxy(this.startDPIUpdateTimer_, this));
-     * @private
+    },
-     */
+
-    initDPIs_ : function() {
+    startDPIUpdateTimer_ : function () {
-      drawingCanvasDpi = piskel.calculateDPIsForDrawingCanvas_();
+      if (this.dpiUpdateTimer) window.clearInterval(this.dpiUpdateTimer);
-      // TODO(vincz): Add throttling on window.resize event.
+      this.dpiUpdateTimer = window.setTimeout($.proxy(this.updateDPIForViewport, this), 200);
-      $(window).resize($.proxy(function() {
+    },
-        drawingCanvasDpi = piskel.calculateDPIsForDrawingCanvas_();
+
-        this.drawingController.updateDPI(drawingCanvasDpi);
+    updateDPIForViewport : function () {
-      }, this));
+      var dpi = piskel.calculateDPIsForDrawingCanvas_();
-      // TODO(vincz): Check for user settings eventually from localstorage.
+      this.drawingController.updateDPI(dpi);
     },
 
     /**

js/utils/pixelUtils.js

@@ -4,22 +4,11 @@
 	ns.PixelUtils = {
 
 		getRectanglePixels : function (x0, y0, x1, y1) {
+			var rectangle = this.getOrderedRectangleCoordinates(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 x = rectangle.x0; x <= rectangle.x1; x++) {
-				for(var y = y0; y <= y1; y++) {
+				for(var y = rectangle.y0; y <= rectangle.y1; y++) {
 					pixels.push({"col": x, "row": y});
 				}
 			}
@@ -28,35 +17,35 @@
 		},
 
 		getBoundRectanglePixels : function (x0, y0, x1, y1) {
+			var rectangle = this.getOrderedRectangleCoordinates(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++) {
+			for(var x = rectangle.x0; x <= rectangle.x1; x++) {
-				pixels.push({"col": x, "row": y0});
+				pixels.push({"col": x, "row": rectangle.y0});
-				pixels.push({"col": x, "row": y1});
+				pixels.push({"col": x, "row": rectangle.y1});
 			}
 
 			// Creating vertical sides of the rectangle:
-			for(var y = y0; y <= y1; y++) {
+			for(var y = rectangle.y0; y <= rectangle.y1; y++) {
-				pixels.push({"col": x0, "row": y});
+				pixels.push({"col": rectangle.x0, "row": y});
-				pixels.push({"col": x1, "row": y});	
+				pixels.push({"col": rectangle.x1, "row": y});
 			}
 			
 			return pixels;	
 		},
 
+		/**
+		 * Return an object of ordered rectangle coordinate.
+		 * In returned object {x0, y0} => top left corner - {x1, y1} => bottom right corner 
+		 * @private
+		 */
+		getOrderedRectangleCoordinates : function (x0, y0, x1, y1) {
+			return {
+				x0 : Math.min(x0, x1), y0 : Math.min(y0, y1),
+				x1 : Math.max(x0, x1), y1 : Math.max(y0, y1),
+			};
+		},
+
 		/**
 		 * Return the list of pixels that would have been filled by a paintbucket tool applied 
 		 * on pixel at coordinate (x,y).