Finished the selection tool

js/_rectSelect.js

@@ -4,7 +4,6 @@ let startY;
 let endX;
 let endY;
 let workingLayer;
-let imageData;
 
 function startRectSelection(mouseEvent) {
 	// Putting the vfx layer on top of everything
@@ -14,8 +13,23 @@ function startRectSelection(mouseEvent) {
 
 	// Saving the start coords of the rect
 	let cursorPos = getCursorPosition(mouseEvent);
-	startX = Math.floor(cursorPos[0] / zoom) + 0.5;
-	startY = Math.floor(cursorPos[1] / zoom) + 0.5;
+	startX = Math.round(cursorPos[0] / zoom) + 0.5;
+	startY = Math.round(cursorPos[1] / zoom) + 0.5;
+
+	// Avoiding external selections
+	if (startX < 0) {
+		startX = 0;
+	}
+	else if (startX > currentLayer.canvas.width) {
+		startX = currentLayer.canvas.width;
+	}
+
+	if (startY < 0) {
+		startY = 0;
+	}
+	else if (startY > currentLayer.canvas.height) {
+		startY = currentLayer.canvas.height;
+	}
 
 	// Drawing the rect
 	drawRect(startX, startY);
@@ -25,19 +39,36 @@ function updateRectSelection(mouseEvent) {
 	let pos = getCursorPosition(mouseEvent);
 	
 	// Drawing the rect
-	drawRect(Math.floor(pos[0] / zoom) + 0.5, Math.floor(pos[1] / zoom) + 0.5);
+	drawRect(Math.round(pos[0] / zoom) + 0.5, Math.round(pos[1] / zoom) + 0.5);
 }
 
 function endRectSelection(mouseEvent) {
 	// Getting the end position
 	let currentPos = getCursorPosition(mouseEvent);
-	endX = currentPos[0] / zoom;
-	endY = currentPos[1] / zoom;
+	endX = Math.round(currentPos[0] / zoom);
+	endY = Math.round(currentPos[1] / zoom);
 
-	// Putting the vfx layer behind everything
+	// Inverting end and start (start must always be the top left corner)
+	if (endX < startX) {
+		let tmp = endX;
+		endX = startX;
+		startX = tmp;
+	}
+	// Same for the y
+	if (endY < startY) {
+		let tmp = endY;
+		endY = startY;
+		startY = tmp;
+	}
+
+	// Resetting this
 	isRectSelecting = false;
 	// Getting the selected pixels
-	imageData = currentLayer.context.createImageData(endX - startX, endY - startY);
+	imageDataToMove = currentLayer.context.getImageData(startX, startY, endX - startX, endY - startY);
+	
+	currentLayer.context.clearRect(startX, startY, endX - startX - 1, endY - startY - 1);
+	// Moving those pixels from the current layer to the tmp layer
+	TMPLayer.context.putImageData(imageDataToMove, startX, startY);
 
 	// Selecting the move tool
 	currentTool = 'moveselection';
@@ -45,23 +76,12 @@ function endRectSelection(mouseEvent) {
 	// Updating the cursor 
 	updateCursor();
 
-	// TODO: find out why the imagedata is blank
-	for (i=0; i<imageData.data.length; i++) {
-		console.log("rgba(" + imageData.data[i] + ',' + imageData.data[i + 1] + ',' + imageData.data[i + 2] + ','  + imageData.data[i + 3] + ')');
-	}
-
 	// NOW
-	// Select the move tool
-		// the move tool moves stuff only if the cursor is on the selected area
 		// the move tool stops working when esc is pressed
 		// when the move tool is disabled, the control is given to the brush tool
-		// on click: start dragging
-		// on drag: render preview by changing the position of the image data and change the position of the selection rect
-			// IMPORTANT: the image data must be deleted from the original layer
-			// the image data must be copied to a temporary layer
 			// the image data is added to the original layer when the move tool is disabled
 
-	currentLayer.context.putImageData(imageData, startX, startY);
+	//currentLayer.context.putImageData(imageData, startX, startY);
 }
 
 function drawRect(x, y) {
@@ -108,4 +128,25 @@ function cursorInSelectedArea() {
 	}
 
 	return false;
+}
+
+function moveSelection(x, y, width, height) {
+	// Getting the vfx context
+	let vfxContext = VFXCanvas.getContext("2d");
+
+	// Clearing the vfx canvas
+	vfxContext.clearRect(0, 0, VFXCanvas.width, VFXCanvas.height);
+	vfxContext.lineWidth = 1;
+	vfxContext.setLineDash([4]);
+
+	startX = Math.round(Math.round(x) - Math.round(width / 2)) + 0.5;
+	startY = Math.round(Math.round(y) - Math.round(height / 2)) + 0.5;
+	endX = startX + Math.round(width);
+	endY = startY + Math.round(height);
+
+	// Drawing the rect
+	vfxContext.beginPath();
+	vfxContext.rect(startX, startY, width, height);
+
+	vfxContext.stroke();
 }