Finished preview rectangle

When the rectangle selection tool is selected, a rect preview is drawn on the vfx layer. There's also a function that gets the selected pixels, next step is moving them around.

js/_getCursorPosition.js

@@ -20,6 +20,8 @@ function getCursorPosition(e) {
 
 // TODO: apply the function below to every getCursorPosition call
 
+// TODO: FIX THIS BELOW
+
 //get cursor position relative to canvas
 function getCursorPositionRelative(e, layer) {
 	var x;

js/_move.js

@@ -0,0 +1 @@
+var imageDataToMove;

js/_rectSelect.js

@@ -1,32 +1,54 @@
 var isRectSelecting = false;
 let startX;
 let startY;
+let workingLayer;
+let imageData;
 
 function startRectSelection(mouseEvent) {
 	// Putting the vfx layer on top of everything
 	VFXCanvas.style.zIndex = MAX_Z_INDEX;
-	console.log("Started selecting");
+	// Saving the layer the user is working on
+	workingLayer = currentLayer;
+
 	// Saving the start coords of the rect
-	cursorPos = getCursorPositionRelative(mouseEvent, VFXCanvas)
-	startX = cursorPos[0];
-	startY = cursorPos[1];
+	let cursorPos = getCursorPosition(mouseEvent);
+	startX = Math.floor(cursorPos[0] / zoom) + 0.5;
+	startY = Math.floor(cursorPos[1] / zoom) + 0.5;
 
 	// Drawing the rect
 	drawRect(startX, startY);
 }
 
 function updateRectSelection(mouseEvent) {
-	pos = getCursorPositionRelative(mouseEvent, VFXCanvas);
+	let pos = getCursorPosition(mouseEvent);
 	
 	// Drawing the rect
-	drawRect(pos[0], pos[1]);
+	drawRect(Math.floor(pos[0] / zoom) + 0.5, Math.floor(pos[1] / zoom) + 0.5);
 }
 
 function endRectSelection(mouseEvent) {
-	console.log("Finished selecting");
+	// Getting the end position
+	let currentPos = getCursorPosition(mouseEvent);
+	let x = currentPos[0] / zoom;
+	let y = currentPos[1] / zoom;
+
 	// Putting the vfx layer behind everything
-	//VFXCanvas.style.zIndex = MIN_Z_INDEX;
 	isRectSelecting = false;
+	// Getting the selected pixels
+	imageData = currentLayer.context.createImageData(x - startX, y - startY);
+
+	// 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
+
+	workingLayer.context.putImageData(imageData, startX, startY);
 }
 
 function drawRect(x, y) {
@@ -36,10 +58,18 @@ function drawRect(x, y) {
 
 	// Clearing the vfx canvas
 	vfxContext.clearRect(0, 0, VFXCanvas.width, VFXCanvas.height);
+	vfxContext.lineWidth = 1;
+	vfxContext.setLineDash([4]);
+
 	// Drawing the rect
 	vfxContext.beginPath();
 	vfxContext.rect(startX, startY, x - startX, y - startY);
+
 	vfxContext.stroke();
+
+	// TODO: make the rect blink from black to white in case of dark backgrounds
 }
 
-// TODO: esc to exit selection mode
+function applyChanges() {
+	VFXCanvas.style.zIndex = MIN_Z_INDEX;
+}

js/pixel-editor.js

@@ -61,6 +61,7 @@
 //=include _fileMenu.js 
 //=include _createButton.js 
 //=include _rectSelect.js
+//=include _move.js
 
 
 /**onload**/