Merge pull request #70 from grosbouddha/selecttool

Basic rectangular select tool

css/tools.css

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

index.html

@@ -32,6 +32,7 @@
       <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>
     </ul>
     
     <ul class="tools-group">
@@ -92,7 +93,8 @@
   <script src="js/Events.js"></script>
   
   <!-- Libraries -->
-  <script src="js/utils.js"></script>
+  <script src="js/utils/core.js"></script>
+  <script src="js/utils/pixelUtils.js"></script>
   <script src="js/lib/jsColor_1_4_0/jscolor.js"></script>
 
   <!-- Application libraries-->
@@ -105,6 +107,10 @@
   <script src="js/controller/AnimatedPreviewController.js"></script>
   <script src="js/LocalStorageService.js"></script>
   <script src="js/HistoryManager.js"></script>
+  <script src="js/KeyManager.js"></script>
+  <script src="js/selection/SelectionManager.js"></script>
+  <script src="js/selection/BaseSelection.js"></script>
+  <script src="js/selection/RectangularSelection.js"></script>
   <script src="js/Palette.js"></script>
   <script src="js/Notification.js"></script>
   <script src="js/drawingtools/BaseTool.js"></script>
@@ -114,6 +120,7 @@
   <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/ToolSelector.js"></script>
 
   <!-- Application controller and initialization -->

js/Events.js

@@ -34,7 +34,19 @@ Events = {
      * Number of frames, content of frames, color used for the palette may have changed.
      */
     FRAMESHEET_RESET: "FRAMESHEET_RESET",
+
+    CURRENT_FRAME_SET: "CURRENT_FRAME_SET",
+
+    SELECTION_CREATED: "SELECTION_CREATED",
+    SELECTION_MOVE_REQUEST: "SELECTION_MOVE_REQUEST",
+    SELECTION_DISMISSED: "SELECTION_DISMISSED",
     
     SHOW_NOTIFICATION: "SHOW_NOTIFICATION",
-    HIDE_NOTIFICATION: "HIDE_NOTIFICATION"
+    HIDE_NOTIFICATION: "HIDE_NOTIFICATION",
+
+    UNDO: "UNDO",
+    REDO: "REDO",
+    CUT: "CUT",
+    COPY: "COPY",
+    PASTE: "PASTE"    
 };

js/HistoryManager.js

@@ -5,24 +5,16 @@
   };
 
 	ns.HistoryManager.prototype.init = function () {
-    document.body.addEventListener('keyup', this.onKeyup.bind(this));
     $.subscribe(Events.TOOL_RELEASED, this.saveState.bind(this));
+
+    $.subscribe(Events.UNDO, this.undo.bind(this));
+    $.subscribe(Events.REDO, this.redo.bind(this));
 	};
 
   ns.HistoryManager.prototype.saveState = function () {
     this.framesheet.getCurrentFrame().saveState();
   };
 
-	ns.HistoryManager.prototype.onKeyup = function (evt) {
-    if (evt.ctrlKey && evt.keyCode == 90) { // CTRL + Z
-      this.undo();
-    }
-
-    if (evt.ctrlKey && evt.keyCode == 89) { // CTRL+ Y
-      this.redo();
-    }
-  };
-
   ns.HistoryManager.prototype.undo = function () {
     this.framesheet.getCurrentFrame().loadPreviousState();
     this.redraw();

js/KeyManager.js

@@ -0,0 +1,50 @@
+(function () {
+	var ns = $.namespace("pskl");
+
+	ns.KeyManager = function () {
+		$(document.body).keydown($.proxy(this.onKeyUp_, this));
+	};
+
+	// Kind of object that make you want to stop front-end _engineering_:
+	ns.KeyManager.prototype.CharCodeToKeyCodeMap = {
+
+		90 : "z",
+		89 : "y",
+		88 : "x",
+		67 : "c",
+		86 : "v"
+	};
+
+	ns.KeyManager.prototype.KeyboardActions = {
+
+		"ctrl" : {
+			"z" : Events.UNDO,
+			"y" : Events.REDO,
+			"x" : Events.CUT,
+			"c" : Events.COPY,
+			"v" : Events.PASTE
+		}
+	};
+
+	
+
+	ns.KeyManager.prototype.onKeyUp_ = function(evt) {
+		var isMac = false;
+		if (navigator.appVersion.indexOf("Mac")!=-1) {
+			// Welcome in mac world where vowels are consons and meta used instead of ctrl:
+			isMac = true;
+		}
+		
+		if (isMac ? evt.metaKey : evt.ctrlKey) {
+			// Get key pressed:
+ 			var letter = this.CharCodeToKeyCodeMap[evt.which];
+			if(letter) {
+				var eventToTrigger = this.KeyboardActions["ctrl"][letter];
+				if(eventToTrigger) {
+					$.publish(eventToTrigger);
+				}
+			};
+		}
+	};
+
+})();

js/LocalStorageService.js

@@ -40,9 +40,12 @@ pskl.LocalStorageService = (function() {
 
     /**
      * @private
+     * TODO(vince): Move that away from LocalStorageService
      */
     var restoreFromLocalStorage_ = function() {
+
       frameSheet_.deserialize(window.localStorage.snapShot);
+      frameSheet_.setCurrentFrameIndex(0);
     };
 
     /**

js/ToolSelector.js

@@ -8,14 +8,15 @@
 $.namespace("pskl");
 
 pskl.ToolSelector = (function() {
-    
+	
     var toolInstances = {
         "simplePen" : new pskl.drawingtools.SimplePen(),
         "eraser" : new pskl.drawingtools.Eraser(),
         "paintBucket" : new pskl.drawingtools.PaintBucket(),
         "stroke" : new pskl.drawingtools.Stroke(),
         "rectangle" : new pskl.drawingtools.Rectangle(),
-        "move" : new pskl.drawingtools.Move()
+        "move" : new pskl.drawingtools.Move(),
+        "select" : new pskl.drawingtools.Select()
     };
     var currentSelectedTool = toolInstances.simplePen;
     var previousSelectedTool = toolInstances.simplePen;

js/controller/DrawingController.js

@@ -107,6 +107,14 @@
           // 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.
           $.publish(Events.LOCALSTORAGE_REQUEST);
+        } else {
+
+          this.currentToolBehavior.moveUnactiveToolAt(
+            coords.col, coords.row,
+            this.getCurrentColor_(),
+            this.framesheet.getCurrentFrame(),
+            this.overlayFrame
+          );
         }
         this.previousMousemoveTime = currentTime;
       }

js/drawingtools/BaseTool.js

@@ -12,6 +12,8 @@
 	
 	ns.BaseTool.prototype.moveToolAt = function(col, row, color, frame, overlay) {};
 
+	ns.BaseTool.prototype.moveUnactiveToolAt = function(col, row, color, frame, overlay) {};
+
 	ns.BaseTool.prototype.releaseToolAt = function(col, row, color, frame, overlay) {};
 
 	/**

js/drawingtools/Rectangle.js

@@ -32,14 +32,15 @@
 
 		// 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);
-		
+		var strokePoints = pskl.PixelUtils.getBoundRectanglePixels(this.startCol, this.startRow, col, row);
+		if(color == Constants.TRANSPARENT_COLOR) {
+			color = Constants.SELECTION_TRANSPARENT_COLOR;
+		}
+
 		// Drawing current stroke:
 		for(var i = 0; i< strokePoints.length; i++) {
 
-			if(color == Constants.TRANSPARENT_COLOR) {
-				color = Constants.SELECTION_TRANSPARENT_COLOR;
-			}			
+						
 			overlay.setPixel(strokePoints[i].col, strokePoints[i].row, color);
 		}
 	};
@@ -51,7 +52,7 @@
 		overlay.clear();
 		// If the stroke tool is released outside of the canvas, we cancel the stroke: 
 		if(frame.containsPixel(col, row)) {
-			var strokePoints = this.getRectanglePixels_(this.startCol, col, this.startRow, row);
+			var strokePoints = pskl.PixelUtils.getBoundRectanglePixels(this.startCol, this.startRow, col, row);
 			for(var i = 0; i< strokePoints.length; i++) {
 				// Change model:
 				frame.setPixel(strokePoints[i].col, strokePoints[i].row, color);

js/drawingtools/RectangularSelect.js

@@ -0,0 +1,129 @@
+/*
+ * @provide pskl.drawingtools.Select
+ *
+ * @require pskl.utils
+ */
+(function() {
+	var ns = $.namespace("pskl.drawingtools");
+
+	ns.Select = function() {
+		this.toolId = "tool-select";
+		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.Select, ns.BaseTool);
+	
+	/**
+	 * @override
+	 */
+	ns.Select.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";
+
+			// Drawing the first point of the rectangle in the fake overlay canvas:
+			overlay.setPixel(col, row, color);
+		}
+		else {
+			this.mode = "moveSelection";
+
+			this.overlayFrameReference = overlay.clone();
+		}
+	};
+
+	ns.Select.prototype.moveToolAt = function(col, row, color, frame, overlay) {
+		if(this.mode == "select") {
+			// Clean overlay canvas:
+			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);
+			
+			color = Constants.SELECTION_TRANSPARENT_COLOR;
+			// Drawing current stroke:
+			for(var i = 0; i< strokePoints.length; i++) {
+				overlay.setPixel(strokePoints[i].col, strokePoints[i].row, color);
+			}
+		}
+		else 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;		
+		}
+	};
+
+	// 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) {		
+		if(this.mode == "select") {
+			overlay.clear();
+			if(this.startCol == col &&this.startRow == row) {
+				$.publish(Events.SELECTION_DISMISSED);
+			} else {
+				var selection = new pskl.selection.RectangularSelection(
+					this.startCol, this.startRow, col, row);
+				$.publish(Events.SELECTION_CREATED, [selection]);
+			}
+		} else if(this.mode == "moveSelection") {
+			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/model/FrameSheet.js

@@ -25,7 +25,8 @@
 
 	ns.FrameSheet.prototype.setCurrentFrameIndex = function (index) {
 		this.currentFrameIndex = index;
-		$.publish(Events.FRAMESHEET_RESET);
+		$.publish(Events.CURRENT_FRAME_SET, [this.getCurrentFrame()]);
+		$.publish(Events.FRAMESHEET_RESET);  // Is it no to overkill to have this here ?
 	};
 
 	ns.FrameSheet.prototype.getUsedColors = function() {

js/piskel.js

@@ -34,7 +34,7 @@ $.namespace("pskl");
 
       frameSheet = new pskl.model.FrameSheet(framePixelWidth, framePixelHeight);
       frameSheet.addEmptyFrame();
-
+      
       this.drawingController = new pskl.controller.DrawingController(
         frameSheet,
         $('#drawing-canvas-container'), 
@@ -54,12 +54,28 @@ $.namespace("pskl");
         previewTileCanvasDpi
       );
 
+      // To catch the current active frame, the selection manager have to be initialized before
+      // the 'frameSheet.setCurrentFrameIndex(0);'
+      // 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
+      // in a second batch.
+      this.selectionManager =
+          new pskl.selection.SelectionManager(this.drawingController.overlayFrame);
+      
+      frameSheet.setCurrentFrameIndex(0);
+
+      
+
       this.animationController.init();
       this.previewsController.init();
 
       this.historyManager = new pskl.HistoryManager(frameSheet);
       this.historyManager.init();
 
+      this.keyManager = new pskl.KeyManager();
+
       pskl.NotificationService.init();
       pskl.LocalStorageService.init(frameSheet);
 
@@ -73,10 +89,6 @@ $.namespace("pskl");
         pskl.LocalStorageService.displayRestoreNotification();
       }
 
-      $.subscribe('SET_ACTIVE_FRAME', function(evt, frameId) {
-        frameSheet.setCurrentFrameIndex(frameId);
-      });
-
       var drawingLoop = new pskl.rendering.DrawingLoop();
       drawingLoop.addCallback(this.render, this);
       drawingLoop.start();

js/selection/BaseSelection.js

@@ -0,0 +1,32 @@
+(function () {
+	var ns = $.namespace("pskl.selection");
+
+	ns.BaseSelection = function () {
+		this.reset();
+	};
+
+	ns.BaseSelection.prototype.reset = function () {
+		this.pixels = [];
+	};
+
+	ns.BaseSelection.prototype.move = function (colDiff, rowDiff) {
+		var movedPixel, movedPixels = [];
+
+		for(var i=0, l=this.pixels.length; i<l; i++) {
+			movedPixel = this.pixels[i];
+			movedPixel.col += colDiff;
+			movedPixel.row += rowDiff;
+			movedPixels.push(movedPixel)
+		}
+		this.pixels = movedPixels;
+	};
+
+	ns.BaseSelection.prototype.fillSelectionFromFrame = function (targetFrame) {
+		var pixelWithCopiedColor;
+		for(var i=0, l=this.pixels.length; i<l; i++) {
+			pixelWithCopiedColor = this.pixels[i];
+			pixelWithCopiedColor.copiedColor =
+			    targetFrame.getPixel(pixelWithCopiedColor.col, pixelWithCopiedColor.row);
+		}
+	};
+})();

js/selection/RectangularSelection.js

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

js/selection/SelectionManager.js

@@ -0,0 +1,144 @@
+(function () {
+	var ns = $.namespace("pskl.selection");
+
+	
+	ns.SelectionManager = function (overlayFrame) {
+		
+		this.overlayFrame = overlayFrame;
+		
+		this.currentSelection = null;
+		this.currentFrame = null; 
+		
+		$.subscribe(Events.CURRENT_FRAME_SET, $.proxy(this.onCurrentFrameChanged_, this));
+
+		$.subscribe(Events.SELECTION_CREATED, $.proxy(this.onSelectionCreated_, this));
+		$.subscribe(Events.SELECTION_DISMISSED, $.proxy(this.onSelectionDismissed_, this));	
+		$.subscribe(Events.SELECTION_MOVE_REQUEST, $.proxy(this.onSelectionMoved_, this));
+		
+		$.subscribe(Events.PASTE, $.proxy(this.onPaste_, this));
+		$.subscribe(Events.COPY, $.proxy(this.onCopy_, this));
+		$.subscribe(Events.CUT, $.proxy(this.onCut_, this));
+
+		$.subscribe(Events.TOOL_SELECTED, $.proxy(this.onToolSelected_, this)); 
+	};
+
+	/**
+	 * @private
+	 */
+	ns.SelectionManager.prototype.cleanSelection_ = function(selection) {
+		if(this.currentSelection) {
+			this.currentSelection.reset();
+		}
+		this.overlayFrame.clear();
+	};
+
+	/**
+	 * @private
+	 */
+	ns.SelectionManager.prototype.onCurrentFrameChanged_ = function(evt, currentFrame) {
+		if(currentFrame) {
+			this.currentFrame = currentFrame;
+		}
+		else {
+			throw "Bad current frame set in SelectionManager";
+		}
+	};
+
+	/**
+	 * @private
+	 */
+	ns.SelectionManager.prototype.onToolSelected_ = function(evt, tool) {
+		if(!(tool instanceof pskl.drawingtools.Select)) {
+			this.cleanSelection_();
+		}
+	};
+
+	/**
+	 * @private
+	 */
+	ns.SelectionManager.prototype.onSelectionDismissed_ = function(evt) {
+		this.cleanSelection_();
+	};
+
+	/**
+	 * @private
+	 */
+	ns.SelectionManager.prototype.onCut_ = function(evt) {
+		if(this.currentSelection && this.currentFrame) {
+			// Put cut target into the selection:
+			this.currentSelection.fillSelectionFromFrame(this.currentFrame);
+
+			var pixels = this.currentSelection.pixels;
+			for(var i=0, l=pixels.length; i<l; i++) {
+				try {
+					this.currentFrame.setPixel(pixels[i].col, pixels[i].row, Constants.TRANSPARENT_COLOR);
+				}
+				catch(e) {
+					// Catchng out of frame's bound pixels without testing
+				}
+			}
+		}
+		else {
+			throw "Bad state for CUT callback in SelectionManager";
+		}
+	};
+
+	ns.SelectionManager.prototype.onPaste_ = function(evt) {
+		if(this.currentSelection && this.currentFrame) {
+			var pixels = this.currentSelection.pixels;
+			for(var i=0, l=pixels.length; i<l; i++) {
+				try {
+					this.currentFrame.setPixel(
+						pixels[i].col, pixels[i].row, 
+						pixels[i].copiedColor);
+				}
+				catch(e) {
+					// Catchng out of frame's bound pixels without testing
+				}
+			}
+		}
+		else {
+			throw "Bad state for PASTE callback in SelectionManager";
+		}
+	};
+
+	/**
+	 * @private
+	 */
+	ns.SelectionManager.prototype.onCopy_ = function(evt) {
+		if(this.currentSelection && this.currentFrame) {
+			this.currentSelection.fillSelectionFromFrame(this.currentFrame);
+		}
+		else {
+			throw "Bad state for CUT callback in SelectionManager";
+		}
+	};
+
+	/**
+	 * @private
+	 */
+	ns.SelectionManager.prototype.onSelectionCreated_ = function(evt, selection) {
+		if(selection) {
+			this.currentSelection = selection;
+			var pixels = selection.pixels;
+			for(var i=0, l=pixels.length; i<l; i++) {
+				this.overlayFrame.setPixel(pixels[i].col, pixels[i].row, Constants.SELECTION_TRANSPARENT_COLOR);
+			}
+		}
+		else {
+			throw "No selection set in SelectionManager";
+		}
+	};
+
+	/**
+	 * @private
+	 */
+	ns.SelectionManager.prototype.onSelectionMoved_ = function(evt, colDiff, rowDiff) {
+		if(this.currentSelection) {
+			this.currentSelection.move(colDiff, rowDiff);
+		}
+		else {
+			throw "Bad state: No currentSelection set when trying to move it in SelectionManager";
+		}
+	};
+})();

js/utils/pixelUtils.js

@@ -0,0 +1,60 @@
+(function () {
+	var ns = $.namespace("pskl");
+
+	ns.PixelUtils = {
+
+		getRectanglePixels : function (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 y = y0; y <= y1; y++) {
+					pixels.push({"col": x, "row": y});
+				}
+			}
+			
+			return pixels;		
+		},
+
+		getBoundRectanglePixels : function (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++) {
+				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;	
+		}
+	};
+})();