Implement cut tool

yeah that was the easy part but still

- Added hotkeys for copy, paste and cut
- Added _copyPaste.js for copy, cut and paste management

js/_copyPaste.js

@@ -0,0 +1,21 @@
+let clipboardData;
+
+function copySelection() {
+	
+}
+
+function pasteSelection() {
+	imageDataToMove = clipboardData;
+	updateMovePreview();
+}
+
+function cutSelectionTool() {
+	// Getting the selected pixels
+	clipBoardData = currentLayer.context.getImageData(startX, startY, endX - startX + 1, endY - startY + 1);
+
+	currentLayer.context.clearRect(startX - 0.5, startY - 0.5, endX - startX + 1, endY - startY + 1);
+	// Moving those pixels from the current layer to the tmp layer
+	//TMPLayer.context.putImageData(imageDataToMove, startX + 1, startY);
+
+    //originalDataPosition = [currentPos[0], currentPos[1]];
+}

js/_hotkeyListener.js

@@ -1,5 +1,21 @@
 var spacePressed = false;
 
+/**
+	Copy / paste / cut logic:
+		- The user selects an area
+		- Pressing ctrl+c copies the selection
+		- Pressing ctrl+v ends the current selection and copies the clipboard in the tmp layer:
+			the editor enters move mode and lets the user move the copied selection around.
+			Pressing ctrl+v while moving a copy has the same effect of pressing ctrl+v after a ctrl+c
+		- Pressing ctrl+x cuts the selection and stores it in the clipboard
+		- The behaviour of ctrl+v is the same and doesn't depend on how the selected area was obtained
+			(with ctrl+c or with ctrl+v)
+		- Selecting a different tool while moving the copied or cut selection has the same effect of selecting 
+			a different tool while moving a standard selection
+		- You can't paste while dragging
+		- You can paste at any other time
+*/ 
+
 function KeyPress(e) {
     var keyboardEvent = window.event? event : e;
 
@@ -24,6 +40,13 @@ function KeyPress(e) {
 			case 49: case 66:
 				tool.pencil.switchTo();
 				break;
+			// copy tool c
+			case 67: case 99:
+				console.log("Copying");
+				if (keyboardEvent.ctrlKey && !dragging && currentTool.name == 'moveselection') {
+			    	copySelection();
+			    }
+			    break;
 			//fill tool - 2, f
 			case 50: case 70:
 				tool.fill.switchTo();
@@ -49,6 +72,21 @@ function KeyPress(e) {
 		    case 77: case 109:
 				tool.rectselect.switchTo()
 				break;
+			// Paste tool
+			case 86: case 118:
+				console.log("Pasting");
+				if (keyboardEvent.ctrlKey && !dragging) {
+					pasteSelection();
+				}
+				break;
+			case 88: case 120:
+				console.log("Cutting");
+				if (keyboardEvent.ctrlKey && !dragging && currentTool.name == 'moveselection') {
+					cutSelectionTool();
+					endSelection();
+					tool.pencil.switchTo();
+				}
+				break;
 			//Z
 			case 90:
 			  console.log('PRESSED Z ', keyboardEvent.ctrlKey)

js/_mouseEvents.js

@@ -355,7 +355,7 @@ function draw (mouseEvent) {
 
         // If I'm dragging, I move the preview
         if (dragging && cursorInSelectedArea()) {
-            updateMovePreview(mouseEvent);
+            updateMovePreview(getCursorPosition(mouseEvent));
         }
     }
 }

js/_move.js

@@ -6,17 +6,17 @@ var selectionCanceled = true;
 var firstTimeMove = true;
 
 // TODO: move with arrows
-function updateMovePreview(mouseEvent) {
+function updateMovePreview(mousePosition) {
     // ISSUE
     selectionCanceled = false;
 
     if (firstTimeMove) {
-        cutSelection(mouseEvent);
+        cutSelection(mousePosition);
     }
 
     firstTimeMove = false;
 
-    lastMousePos = getCursorPosition(mouseEvent);
+    lastMousePos = mousePosition;
     // clear the entire tmp layer
     TMPLayer.context.clearRect(0, 0, TMPLayer.canvas.width, TMPLayer.canvas.height);
     // put the image data with offset

js/_rectSelect.js

@@ -72,10 +72,11 @@ function endRectSelection(mouseEvent) {
 	currentTool.updateCursor();
 }
 
-function cutSelection(mouseEvent) {
+function cutSelection(mousePosition) {
 	console.log("Coordinate: start x, y: " + startX + ", " + startY + " end x, y: " + endX + ", " + endY);
 	// Getting the selected pixels
 	imageDataToMove = currentLayer.context.getImageData(startX, startY, endX - startX + 1, endY - startY + 1);
+    clipBoardData = imageDataToMove;
 
 	currentLayer.context.clearRect(startX - 0.5, startY - 0.5, endX - startX + 1, endY - startY + 1);
 	// Moving those pixels from the current layer to the tmp layer

js/_tools.js

@@ -48,7 +48,7 @@ class Tool {
 	    	endSelection();
 	    }
 
-	    //set tool and temp tje tje tpp;
+	    //set tool and temp tje tje tpp <--- he's speaking the language of the gods, don't delete
 	    currentTool = this;
 		currentToolTemp = this;
 

js/_updateCursor.js

@@ -2,15 +2,14 @@
 
 //set the correct cursor for the current tool
 Tool.prototype.updateCursor = function () {
-
-	console.log('updateCursor()', currentTool)
+	//console.log('updateCursor()', currentTool)
 
 	//switch to that tools cursor
 	canvasView.style.cursor = this.cursor || 'default';
 
 	//if the tool uses a brush preview, make it visible and update the size
 	if (this.brushPreview) {
-		console.log('brush size',this.currentBrushSize)
+		//console.log('brush size',this.currentBrushSize)
 		brushPreview.style.display = 'block';
         brushPreview.style.width = this.currentBrushSize * zoom + 'px';
         brushPreview.style.height = this.currentBrushSize * zoom + 'px';

js/pixel-editor.js

@@ -42,6 +42,7 @@
 //=include _replaceAllOfColor.js
 //=include _checkerboard.js
 //=include _layer.js
+//=include _copyPaste.js
 
 /**load file**/
 //=include _loadImage.js