Basic cut implementation

SelectionManager implmentaiton
Rectangular seleciton impl
Utils refacoring
Event manager refactoring
basic cut implmentation

index.html

@@ -93,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-->
@@ -106,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>
@@ -115,7 +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/SelectTool.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,17 @@ 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",
     
     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,51 @@
+(function () {
+	var ns = $.namespace("pskl");
+
+	ns.KeyManager = function () {
+		$(document.body).keyup($.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;
+		//}
+
+		// (isMac ? evt.metaKey : evt.ctrlKey) {
+		if (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/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,55 @@
+/*
+ * @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, 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.Select.prototype.moveToolAt = function(col, row, color, frame, overlay) {
+		// 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);
+		}
+	};
+
+	/**
+	 * @override
+	 */
+	ns.Select.prototype.releaseToolAt = function(col, row, color, frame, overlay) {		
+		overlay.clear();
+		
+		var selection = new pskl.selection.RectangularSelection(
+			this.startCol, this.startRow, col, row);
+		$.publish(Events.SELECTION_CREATED, [selection]);
+	};
+})();

js/drawingtools/SelectTool.js

@@ -1,130 +0,0 @@
-/*
- * @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/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 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,13 @@
+(function () {
+	var ns = $.namespace("pskl.selection");
+
+	ns.BaseSelection = function () {
+		this.pixels = [];
+	};
+
+	ns.BaseSelection.prototype.getFrameSliceFromSelection = function (frame) {
+		if(this.pixels && this.pixels > 0) {
+
+		}
+	};
+})();

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,114 @@
+(function () {
+	var ns = $.namespace("pskl.selection");
+
+	
+	ns.SelectionManager = function (overlayFrame) {
+		
+		this.overlayFrame = overlayFrame;
+		
+		this.currentSelection = null;
+		this.currentFrame = null; 
+
+		
+		$.subscribe(Events.SELECTION_CREATED, $.proxy(this.onSelectionCreated_, this));
+
+
+		$.subscribe(Events.CURRENT_FRAME_SET, $.proxy(this.onCurrentFrameChanged_, 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); // discard selection if not move
+
+	};
+
+	ns.SelectionManager.prototype.hasSelection = function() {
+		return (this.currentSelection == null) ? false : true;
+	};
+
+	ns.SelectionManager.prototype.addSelection = function(selection) {
+		this.currentSelection = selection;
+	};
+
+	ns.SelectionManager.prototype.removeSelection = function(selection) {
+		this.currentSelection = null;
+	};
+
+	/**
+	 * @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.onCut_ = function(evt) {
+		if(this.currentSelection && this.currentFrame) {
+			var pixels = this.currentSelection.pixels;
+			for(var i=0, l=pixels.length; i<l; i++) {
+				this.currentFrame.setPixel(pixels[i].col, pixels[i].row, Constants.TRANSPARENT_COLOR);
+			}
+		}
+		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++) {
+				this.currentFrame.setPixel(pixels[i].col, pixels[i].row, Constants.TRANSPARENT_COLOR);
+			}
+		}
+		else {
+			throw "Bad state for CUT callback in SelectionManager";
+		}
+	};
+
+	/**
+	 * @private
+	 */
+	ns.SelectionManager.prototype.onCopy_ = function(evt) {
+		this.copiedPixels = [];
+		if(this.currentSelection && this.currentFrame) {
+			var pixels = this.currentSelection.pixels;
+			for(var i=0, l=pixels.length; i<l; i++) {
+				copiedPixels.push({
+					"col": pixels[i].col,
+					"row": pixels[i].row,
+					"color": this.currentFrame.getPixel(pixels[i].col, pixels[i].row)
+				});
+			}
+		}
+		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 "Bad current selection set 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;	
+		}
+	};
+})();