Fixed a few minor bugs

Undoing while selecting caused mess.
Selecting outside the canvas caused empty lines to appear on the canvas.

js/_hotkeyListener.js

@@ -13,9 +13,11 @@ function KeyPress(e) {
 
 	//
 	if (e.key === "Escape") {
+		if (!selectionCanceled) {
 			endSelection();
 			changeTool('pencil');
 		}
+	}
 	else {
 	  	switch (keyboardEvent.keyCode) {
 			//pencil tool - 1, b
@@ -53,9 +55,18 @@ function KeyPress(e) {
 			  //CTRL+ALT+Z redo
 			  if (keyboardEvent.altKey && keyboardEvent.ctrlKey) 
 			    redo();
+				if (!selectionCanceled) {
+			    		endSelection();
+			    		changeTool('pencil');
+			    	}
 			  //CTRL+Z undo
-			  else if (keyboardEvent.ctrlKey) 
+			  else if (keyboardEvent.ctrlKey) {
 			    	undo();
+			    	if (!selectionCanceled) {
+			    		endSelection();
+			    		changeTool('pencil');
+			    	}
+			    }
 				//Z switch to zoom tool
 				else 
 				  changeTool('zoom');

js/_mouseEvents.js

@@ -127,7 +127,7 @@ window.addEventListener("mouseup", function (mouseEvent) {
 			layers[i].copyData(layers[0]);
         }
 	}
-	else if (currentTool == 'rectselect') {
+	else if (currentTool == 'rectselect' && isRectSelecting) {
 		endRectSelection(mouseEvent);
 	}
 	else if (currentTool == 'rectangle') {
@@ -143,6 +143,8 @@ window.addEventListener("mouseup", function (mouseEvent) {
 }, false);
 
 
+// OPTIMIZABLE: redundant || mouseEvent.target.className in currentTool ifs
+
 //mouse is moving on canvas		
 window.addEventListener("mousemove", draw, false);
 function draw (mouseEvent) {
@@ -300,13 +302,17 @@ function draw (mouseEvent) {
         updateCursor();
     }
     else if (currentTool == 'rectselect') {
-    	if (dragging && !isRectSelecting) {
+    	if (dragging && !isRectSelecting && mouseEvent.target.className == 'drawingCanvas') {
     		isRectSelecting = true;
+    		console.log("cominciata selezione su " + mouseEvent.target.className);
     		startRectSelection(mouseEvent);
     	}
     	else if (dragging && isRectSelecting) {
     		updateRectSelection(mouseEvent);
     	}
+    	else if (isRectSelecting) {
+    		endRectSelection();
+    	}
     }
     else if (currentTool == 'moveselection') {
     	// Updating the cursor (move if inside rect, cross if not)

js/_move.js

@@ -2,10 +2,20 @@ var imageDataToMove;
 var originalDataPosition;
 var canMoveSelection = false;
 var lastMovePos;
-var selectionCanceled = false;
+var selectionCanceled = true;
+var firstTimeMove = true;
 
 // TODO: move with arrows
 function updateMovePreview(mouseEvent) {
+	// ISSUE
+	selectionCanceled = false;
+
+	if (firstTimeMove) {
+		cutSelection(mouseEvent);
+	}
+
+	firstTimeMove = false;
+
 	lastMousePos = getCursorPosition(mouseEvent);
 	// clear the entire tmp layer
 	TMPLayer.context.clearRect(0, 0, TMPLayer.canvas.width, TMPLayer.canvas.height);
@@ -23,6 +33,7 @@ function endSelection() {
 	TMPLayer.context.clearRect(0, 0, TMPLayer.canvas.width, TMPLayer.canvas.height);
 	VFXLayer.context.clearRect(0, 0, VFXLayer.canvas.width, VFXLayer.canvas.height);
 
+	if (imageDataToMove !== undefined) {
 		let underlyingImageData = currentLayer.context.getImageData(startX, startY, endX - startX, endY - startY);
 		
 		for (let i=0; i<underlyingImageData.data.length; i+=4) {
@@ -52,13 +63,10 @@ function endSelection() {
 			Math.round(lastMovePos[0] / zoom - imageDataToMove.width / 2), 
 			Math.round(lastMovePos[1] / zoom - imageDataToMove.height / 2));
 		}
-	else {
-		currentLayer.context.putImageData(
-		imageDataToMove, 
-		originalDataPosition[0], 
-		originalDataPosition[1]);
 	}
 
 	selectionCanceled = true;
 	isRectSelecting = false;
+	firstTimeMove = true;
+	imageDataToMove = undefined;
 }

js/_rectSelect.js

@@ -5,6 +5,8 @@ let endX;
 let endY;
 
 function startRectSelection(mouseEvent) {
+	// Saving the canvas
+	new HistoryStateEditCanvas();
 	// Putting the vfx layer on top of everything
 	VFXCanvas.style.zIndex = MAX_Z_INDEX;
 
@@ -59,8 +61,18 @@ function endRectSelection(mouseEvent) {
 		startY = tmp;
 	}
 
+	// Selecting the move tool
+	currentTool = 'moveselection';
+	currentToolTemp = currentTool;
+
 	// Resetting this
 	isRectSelecting = false;
+
+	// Updating the cursor 
+	updateCursor();
+}
+
+function cutSelection(mouseEvent) {
 	// Getting the selected pixels
 	imageDataToMove = currentLayer.context.getImageData(startX, startY, endX - startX + 1, endY - startY + 1);
 	
@@ -68,13 +80,7 @@ function endRectSelection(mouseEvent) {
 	// Moving those pixels from the current layer to the tmp layer
 	TMPLayer.context.putImageData(imageDataToMove, startX, startY);
 
-	// Selecting the move tool
+	//originalDataPosition = [currentPos[0], currentPos[1]];
-	currentTool = 'moveselection';
-	currentToolTemp = currentTool;
-
-	originalDataPosition = [startX, startY];
-	// Updating the cursor 
-	updateCursor();
 }
 
 function drawRect(x, y) {
@@ -111,7 +117,6 @@ function cursorInSelectedArea() {
 	let topY = Math.max(startY, endY);
 	let bottomY = Math.min(startY, endY);
 
-	// ISSUE: is it <= or <? test it
 	if (leftX <= x && x <= rightX) {
 		if (bottomY <= y && y <= topY) {
 			return true;