Basic lasso tool

css/tools.css

@@ -49,10 +49,14 @@
   background-image: url(../img/tools/icons/hand.png);
 }
 
-.tool-icon.tool-select {
+.tool-icon.tool-rectangle-select {
   background-image: url(../img/tools/icons/select.png);
 }
 
+.tool-icon.tool-shape-select {
+  background-image: url(../img/tools/icons/wand.png);
+}
+
 /*.tool-icon.tool-palette {
   background-image: url(../img/tools/icons/color-palette.png);
 }*/
@@ -81,10 +85,14 @@
   cursor: url(../img/tools/cursors/hand.png) 14 12, pointer;
 }
 
-.tool-select .drawing-canvas-container:hover {
+.tool-rectangle-select .drawing-canvas-container:hover {
   cursor: url(../img/tools/cursors/select.png) 14 12, pointer;
 }
 
+.tool-shape-select .drawing-canvas-container:hover {
+  cursor: url(../img/tools/cursors/wand.png) 14 12, pointer;
+}
+
 .tool-grid,
 .tool-grid label,
 .tool-grid input {

index.html

@@ -32,7 +32,8 @@
       <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"></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>
     </ul>
     
     <ul class="tools-group">
@@ -111,6 +112,7 @@
   <script src="js/selection/SelectionManager.js"></script>
   <script src="js/selection/BaseSelection.js"></script>
   <script src="js/selection/RectangularSelection.js"></script>
+  <script src="js/selection/ShapeSelection.js"></script>
   <script src="js/Palette.js"></script>
   <script src="js/Notification.js"></script>
   <script src="js/drawingtools/BaseTool.js"></script>
@@ -120,7 +122,9 @@
   <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/RectangularSelect.js"></script>
+  <script src="js/drawingtools/selectiontools/BaseSelect.js"></script>
+  <script src="js/drawingtools/selectiontools/RectangleSelect.js"></script>
+  <script src="js/drawingtools/selectiontools/ShapeSelect.js"></script>
   <script src="js/ToolSelector.js"></script>
 
   <!-- Application controller and initialization -->

js/KeyManager.js

@@ -37,13 +37,13 @@
 		
 		if (isMac ? evt.metaKey : evt.ctrlKey) {
 			// Get key pressed:
- 			var letter = this.CharCodeToKeyCodeMap[evt.which];
+			var letter = this.CharCodeToKeyCodeMap[evt.which];
 			if(letter) {
-				var eventToTrigger = this.KeyboardActions["ctrl"][letter];
+				var eventToTrigger = this.KeyboardActions.ctrl[letter];
 				if(eventToTrigger) {
 					$.publish(eventToTrigger);
 				}
-			};
+			}
 		}
 	};
 

js/ToolSelector.js

@@ -16,7 +16,8 @@ pskl.ToolSelector = (function() {
         "stroke" : new pskl.drawingtools.Stroke(),
         "rectangle" : new pskl.drawingtools.Rectangle(),
         "move" : new pskl.drawingtools.Move(),
-        "select" : new pskl.drawingtools.Select()
+        "rectangleSelect" : new pskl.drawingtools.RectangleSelect(),
+        "shapeSelect" : new pskl.drawingtools.ShapeSelect()
     };
     var currentSelectedTool = toolInstances.simplePen;
     var previousSelectedTool = toolInstances.simplePen;

js/drawingtools/PaintBucket.js

@@ -17,109 +17,8 @@
 	 */
 	ns.PaintBucket.prototype.applyToolAt = function(col, row, color, frame, overlay) {
 
-		// Change model:
+		pskl.PixelUtils.paintSimilarConnectedPixelsFromFrame(frame, col, row, color);
-		var targetColor = frame.getPixel(col, row);
-		this.queueLinearFloodFill_(frame, col, row, targetColor, color);
 	};
-
-	/**
-	 *  Flood-fill (node, target-color, replacement-color):
-	 *	 1. Set Q to the empty queue.
-	 *	 2. If the color of node is not equal to target-color, return.
-	 *	 3. Add node to Q.
-	 *	 4. For each element n of Q:
-	 *	 5.     If the color of n is equal to target-color:
-	 *	 6.         Set w and e equal to n.
-	 *	 7.         Move w to the west until the color of the node to the west of w no longer matches target-color.
-	 *	 8.         Move e to the east until the color of the node to the east of e no longer matches target-color.
-	 *	 9.         Set the color of nodes between w and e to replacement-color.
-	 *	10.         For each node n between w and e:
-	 *	11.             If the color of the node to the north of n is target-color, add that node to Q.
-	 *	12.             If the color of the node to the south of n is target-color, add that node to Q.
-	 *	13. Continue looping until Q is exhausted.
-	 *	14. Return.
-     *
-     * @private
-	 */
-	ns.PaintBucket.prototype.queueLinearFloodFill_ = function(frame, col, row, targetColor, replacementColor) {
-
-		var queue = [];
-		var dy = [-1, 0, 1, 0];
-	    var dx = [0, 1, 0, -1];
-
-	 	try {
-			if(frame.getPixel(col, row) == replacementColor) {
-		 		return;
-		 	}
-		} catch(e) {
-			// Frame out of bound exception.
-		}
-
-	 	queue.push({"col": col, "row": row});
-	 	var loopCount = 0;
-	 	var cellCount = frame.getWidth() * frame.getHeight();
-	 	while(queue.length > 0) {
-			loopCount ++;
-
-	 		var currentItem = queue.pop();
-	 		frame.setPixel(currentItem.col, currentItem.row, replacementColor);
-	 		
-	 		for (var i = 0; i < 4; i++) {
-	 			var nextCol = currentItem.col + dx[i]
-	            var nextRow = currentItem.row + dy[i]
-				try {
-		            if (frame.containsPixel(nextCol, nextRow)  && frame.getPixel(nextCol, nextRow) == targetColor) {
-		                queue.push({"col": nextCol, "row": nextRow });
-		            }
-		        } catch(e) {
-		        	// Frame out of bound exception.
-		        }
-	        }
-
-	 		// Security loop breaker:
-			if(loopCount > 10 * cellCount) {
-				console.log("loop breaker called")
-	 			break;			
-	 		}
-	 	}
-	};
-
-	/**
-	 * Basic Flood-fill implementation (Stack explosion !):
-	 * Flood-fill (node, target-color, replacement-color):
-	 *	1. If the color of node is not equal to target-color, return.
-	 *	2. Set the color of node to replacement-color.
-	 *	3. Perform Flood-fill (one step to the west of node, target-color, replacement-color).
-	 *	   Perform Flood-fill (one step to the east of node, target-color, replacement-color).
-	 *     Perform Flood-fill (one step to the north of node, target-color, replacement-color).
-	 *     Perform Flood-fill (one step to the south of node, target-color, replacement-color).
-	 *	4. Return.
-	 *
-	 *  @private
-	 */
-	ns.PaintBucket.prototype.recursiveFloodFill_ = function(frame, col, row, targetColor, replacementColor) {
-	 	
-	 	// Step 1:
-	 	if( col < 0 ||
-	 		col >= frame.length ||
-	 		row < 0 ||
-	 		row >= frame[0].length ||
-	  		frame[col][row] != targetColor) {
-	 		return;
-	 	}
-
-	 	// Step 2:
-	 	frame[col][row] = replacementColor;
-	 	
-	 	//Step 3:
-	 	this.simpleFloodFill(frame, col - 1, row, targetColor, replacementColor);
-	 	this.simpleFloodFill(frame, col + 1, row, targetColor, replacementColor);
-	 	this.simpleFloodFill(frame, col, row - 1, targetColor, replacementColor);
-	 	this.simpleFloodFill(frame, col, row + 1, targetColor, replacementColor);
-
-	 	return;
-	};
-
 })();
 
 

js/drawingtools/selectiontools/BaseSelect.js

@@ -0,0 +1,53 @@
+/*
+ * @provide pskl.drawingtools.BaseSelect
+ *
+ * @require pskl.utils
+ */
+(function() {
+	var ns = $.namespace("pskl.drawingtools");
+
+	ns.BaseSelect = function() {
+		this.secondaryToolId = "tool-move";
+		this.BodyRoot = $('body');
+		
+		// Select's first point coordinates (set in applyToolAt)
+		this.startCol = null;
+		this.startRow = null;
+	};
+
+	pskl.utils.inherit(ns.BaseSelect, ns.BaseTool);
+
+	/**
+	 * @override
+	 */
+	ns.BaseSelect.prototype.moveUnactiveToolAt = function(col, row, color, frame, overlay) {
+		
+		// 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);
+		}
+	};
+
+	/**
+	 * Move the overlay frame filled with semi-transparent pixels that represent the selection
+	 * @private
+	 */
+	ns.BaseSelect.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)
+			}
+		}
+	};
+})();

js/drawingtools/selectiontools/RectangleSelect.js

@@ -1,27 +1,23 @@
 /*
- * @provide pskl.drawingtools.Select
+ * @provide pskl.drawingtools.RectangleSelect
  *
  * @require pskl.utils
  */
 (function() {
 	var ns = $.namespace("pskl.drawingtools");
 
-	ns.Select = function() {
+	ns.RectangleSelect = function() {
-		this.toolId = "tool-select";
+		this.toolId = "tool-rectangle-select";
-		this.secondaryToolId = "tool-move";
-		this.BodyRoot = $('body');
 		
-		// Select's first point coordinates (set in applyToolAt)
+		ns.BaseSelect.call(this);
-		this.startCol = null;
-		this.startRow = null;
 	};
 
-	pskl.utils.inherit(ns.Select, ns.BaseTool);
+	pskl.utils.inherit(ns.RectangleSelect, ns.BaseSelect);
 	
 	/**
 	 * @override
 	 */
-	ns.Select.prototype.applyToolAt = function(col, row, color, frame, overlay) {
+	ns.RectangleSelect.prototype.applyToolAt = function(col, row, color, frame, overlay) {
 		this.startCol = col;
 		this.startRow = row;
 		
@@ -42,7 +38,7 @@
 		}
 	};
 
-	ns.Select.prototype.moveToolAt = function(col, row, color, frame, overlay) {
+	ns.RectangleSelect.prototype.moveToolAt = function(col, row, color, frame, overlay) {
 		if(this.mode == "select") {
 			// Clean overlay canvas:
 			overlay.clear();
@@ -78,24 +74,10 @@
 		}
 	};
 
-	// TODO(vincz): Comment here nasty vince
-	ns.Select.prototype.moveUnactiveToolAt = function(col, row, color, frame, overlay) {
-		
-		// 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);
-		}
-	};
-
 	/**
 	 * @override
 	 */
-	ns.Select.prototype.releaseToolAt = function(col, row, color, frame, overlay) {		
+	ns.RectangleSelect.prototype.releaseToolAt = function(col, row, color, frame, overlay) {		
 		if(this.mode == "select") {
 			overlay.clear();
 			if(this.startCol == col &&this.startRow == row) {
@@ -109,21 +91,4 @@
 			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)
-			}
-		}
-	};
 })();

js/drawingtools/selectiontools/ShapeSelect.js

@@ -0,0 +1,75 @@
+/*
+ * @provide pskl.drawingtools.ShapeSelect
+ *
+ * @require pskl.utils
+ */
+(function() {
+	var ns = $.namespace("pskl.drawingtools");
+
+	ns.ShapeSelect = function() {
+		this.toolId = "tool-shape-select";
+		
+		ns.BaseSelect.call(this);
+	};
+
+	pskl.utils.inherit(ns.ShapeSelect, ns.BaseSelect);
+	
+	/**
+	 * @override
+	 */
+	ns.ShapeSelect.prototype.applyToolAt = function(col, row, color, frame, overlay) {
+		this.startCol = col;
+		this.startRow = row;
+		
+		this.lastCol = col;
+		this.lastRow = row;
+		
+		// TODO(vincz): Comment here nasty vince
+		if(overlay.getPixel(col, row) != Constants.SELECTION_TRANSPARENT_COLOR) {
+			this.mode = "select";
+
+			$.publish(Events.SELECTION_DISMISSED);
+			var pixels = pskl.PixelUtils.getSimilarConnectedPixelsFromFrame(frame, col, row);
+			var selection = new pskl.selection.ShapeSelection(pixels);
+			$.publish(Events.SELECTION_CREATED, [selection]);
+		}
+		else {
+			this.mode = "moveSelection";
+
+			this.overlayFrameReference = overlay.clone();
+		}
+	};
+
+	ns.ShapeSelect.prototype.moveToolAt = function(col, row, color, frame, overlay) {
+		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;		
+		}
+	};
+
+	/**
+	 * @override
+	 */
+	ns.ShapeSelect.prototype.releaseToolAt = function(col, row, color, frame, overlay) {		
+		if(this.mode == "select") {
+		  // TODO(vincz): define a way to dismiss the shape select
+		} else if(this.mode == "moveSelection") {
+			this.moveToolAt(col, row, color, frame, overlay);
+		}
+	};
+})();

js/selection/SelectionManager.js

@@ -4,6 +4,7 @@
 	
 	ns.SelectionManager = function (overlayFrame) {
 		
+		this.framesheet = framesheet;
 		this.overlayFrame = overlayFrame;
 		
 		this.currentSelection = null;
@@ -48,7 +49,8 @@
 	 * @private
 	 */
 	ns.SelectionManager.prototype.onToolSelected_ = function(evt, tool) {
-		if(!(tool instanceof pskl.drawingtools.Select)) {
+		var isSelectionTool = (tool instanceof pskl.drawingtools.RectangleSelect) || (tool instanceof pskl.drawingtools.ShapeSelect);
+		if(!isSelectionTool) {
 			this.cleanSelection_();
 		}
 	};

js/selection/ShapeSelection.js

@@ -0,0 +1,9 @@
+(function () {
+	var ns = $.namespace("pskl.selection");
+
+	ns.ShapeSelection = function (x0, y0) {
+		this.pixels = pixels;
+	};
+
+	pskl.utils.inherit(ns.ShapeSelection, ns.BaseSelection);
+})();

js/utils/pixelUtils.js

@@ -55,6 +55,138 @@
 			}
 			
 			return pixels;	
+		},
+
+		getSimilarConnectedPixelsFromFrame: function(frame, col, row) {
+			/**
+			 *  Queue linear Flood-fill (node, target-color, replacement-color):
+			 *	 1. Set Q to the empty queue.
+			 *	 2. If the color of node is not equal to target-color, return.
+			 *	 3. Add node to Q.
+			 *	 4. For each element n of Q:
+			 *	 5.     If the color of n is equal to target-color:
+			 *	 6.         Set w and e equal to n.
+			 *	 7.         Move w to the west until the color of the node to the west of w no longer matches target-color.
+			 *	 8.         Move e to the east until the color of the node to the east of e no longer matches target-color.
+			 *	 9.         Set the color of nodes between w and e to replacement-color.
+			 *	10.         For each node n between w and e:
+			 *	11.             If the color of the node to the north of n is target-color, add that node to Q.
+			 *	12.             If the color of the node to the south of n is target-color, add that node to Q.
+			 *	13. Continue looping until Q is exhausted.
+			 *	14. Return.
+		     *
+		     * @private
+			 */
+			var pixels = [];
+			frame = frame.clone();
+			var replacementColor = "sdfsdfsdf"
+
+			var queue = [];
+			var dy = [-1, 0, 1, 0];
+		    var dx = [0, 1, 0, -1];
+		    try {
+		    	var targetColor = frame.getPixel(col, row);
+			} catch(e) {
+				// Frame out of bound exception.
+			}
+		 	
+			if(targetColor == replacementColor) {
+		 		return;
+		 	}
+			
+
+		 	queue.push({"col": col, "row": row});
+		 	var loopCount = 0;
+		 	var cellCount = frame.getWidth() * frame.getHeight();
+		 	while(queue.length > 0) {
+				loopCount ++;
+
+		 		var currentItem = queue.pop();
+		 		frame.setPixel(currentItem.col, currentItem.row, replacementColor);
+		 		pixels.push({"col": currentItem.col, "row": currentItem.row });
+		 		
+		 		for (var i = 0; i < 4; i++) {
+		 			var nextCol = currentItem.col + dx[i]
+		            var nextRow = currentItem.row + dy[i]
+					try {
+			            if (frame.containsPixel(nextCol, nextRow)  && frame.getPixel(nextCol, nextRow) == targetColor) {
+			                queue.push({"col": nextCol, "row": nextRow });
+			            }
+			        } catch(e) {
+			        	// Frame out of bound exception.
+			        }
+		        }
+
+		 		// Security loop breaker:
+				if(loopCount > 10 * cellCount) {
+					console.log("loop breaker called")
+		 			break;			
+		 		}
+		 	}
+		 	return pixels;
+		},
+
+		paintSimilarConnectedPixelsFromFrame: function(frame, col, row, replacementColor) {
+			/**
+			 *  Queue linear Flood-fill (node, target-color, replacement-color):
+			 *	 1. Set Q to the empty queue.
+			 *	 2. If the color of node is not equal to target-color, return.
+			 *	 3. Add node to Q.
+			 *	 4. For each element n of Q:
+			 *	 5.     If the color of n is equal to target-color:
+			 *	 6.         Set w and e equal to n.
+			 *	 7.         Move w to the west until the color of the node to the west of w no longer matches target-color.
+			 *	 8.         Move e to the east until the color of the node to the east of e no longer matches target-color.
+			 *	 9.         Set the color of nodes between w and e to replacement-color.
+			 *	10.         For each node n between w and e:
+			 *	11.             If the color of the node to the north of n is target-color, add that node to Q.
+			 *	12.             If the color of the node to the south of n is target-color, add that node to Q.
+			 *	13. Continue looping until Q is exhausted.
+			 *	14. Return.
+		     *
+		     * @private
+			 */
+			var queue = [];
+			var dy = [-1, 0, 1, 0];
+		    var dx = [0, 1, 0, -1];
+		    try {
+		    	var targetColor = frame.getPixel(col, row);
+			} catch(e) {
+				// Frame out of bound exception.
+			}
+		 	
+			if(targetColor == replacementColor) {
+		 		return;
+		 	}
+			
+
+		 	queue.push({"col": col, "row": row});
+		 	var loopCount = 0;
+		 	var cellCount = frame.getWidth() * frame.getHeight();
+		 	while(queue.length > 0) {
+				loopCount ++;
+
+		 		var currentItem = queue.pop();
+		 		frame.setPixel(currentItem.col, currentItem.row, replacementColor);
+		 		
+		 		for (var i = 0; i < 4; i++) {
+		 			var nextCol = currentItem.col + dx[i]
+		            var nextRow = currentItem.row + dy[i]
+					try {
+			            if (frame.containsPixel(nextCol, nextRow)  && frame.getPixel(nextCol, nextRow) == targetColor) {
+			                queue.push({"col": nextCol, "row": nextRow });
+			            }
+			        } catch(e) {
+			        	// Frame out of bound exception.
+			        }
+		        }
+
+		 		// Security loop breaker:
+				if(loopCount > 10 * cellCount) {
+					console.log("loop breaker called")
+		 			break;			
+		 		}
+		 	}
 		}
 	};
 })();