Finished the selection tool

css/pixel-editor.scss

@@ -52,6 +52,7 @@ svg {
   position: fixed;
   display:none;
   box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.64);
+  background-color:transparent;
 }
 
 #checkerboard {
@@ -64,7 +65,7 @@ svg {
 }
 
 #tmp-canvas {
-  z-index:1;
+  z-index:3;
   background:transparent;
 }
 

js/_changeTool.js

@@ -1,5 +1,8 @@
 function changeTool (selectedTool) {
-    
+	// Ending any selection in progress
+    if (currentTool.includes("select") && !selectedTool.includes("select")) {
+    	endSelection();
+    }
     //set tool and temp tje tje tpp;
     currentTool = selectedTool;
 	currentToolTemp = selectedTool;

js/_hotkeyListener.js

@@ -1,69 +1,75 @@
 var spacePressed = false;
 
 function KeyPress(e) {
-  var keyboardEvent = window.event? event : e;
+	var keyboardEvent = window.event? event : e;
 
-  //if the user is typing in an input field, ignore these hotkeys
+	//if the user is typing in an input field, ignore these hotkeys
-  if (document.activeElement.tagName == 'INPUT') return;
+	if (document.activeElement.tagName == 'INPUT') return;
 
-  //if no document has been created yet,
+	//if no document has been created yet,
-  //orthere is a dialog box open
+	//orthere is a dialog box open
-  //ignore hotkeys
+	//ignore hotkeys
-  if (!documentCreated || dialogueOpen) return;
+	if (!documentCreated || dialogueOpen) return;
 
-  //
+	//
-  switch (keyboardEvent.keyCode) {
+	if (e.key === "Escape") {
-		//pencil tool - 1, b
+		endSelection();
-		case 49: case 66: 
+		changeTool('pencil');
-			changeTool('pencil');
+	}
-			break;
+	else {
-		//fill tool - 2, f
+	  	switch (keyboardEvent.keyCode) {
-		case 50: case 70:
+			//pencil tool - 1, b
-			changeTool('fill');
+			case 49: case 66: 
-			break;
+				changeTool('pencil');
-		//eyedropper - 3, e
+				break;
-		case 51: case 69:
+			//fill tool - 2, f
-			changeTool('eyedropper');
+			case 50: case 70:
-			break;
+				changeTool('fill');
-		//pan - 4, p,
+				break;
-		case 52: case 80:
+			//eyedropper - 3, e
-			changeTool('pan');
+			case 51: case 69:
-			break;
+				changeTool('eyedropper');
-		//zoom - 5
+				break;
-		case 53:
+			//pan - 4, p,
-		  changeTool('zoom');
+			case 52: case 80:
-		  break;
+				changeTool('pan');
-		 // eraser -6, r
+				break;
-	    case 54: case 82:
+			//zoom - 5
-	         console.log("Pressed r");
+			case 53:
-            changeTool('eraser');
-	     	break;
-	    // Rectangular selection	
-	    case 77: case 109:
-			changeTool('rectselect');
-			break;
-		//Z
-		case 90:
-		  console.log('PRESSED Z ', keyboardEvent.ctrlKey)
-		  //CTRL+ALT+Z redo
-		  if (keyboardEvent.altKey && keyboardEvent.ctrlKey) 
-		    redo();
-		  //CTRL+Z undo
-		  else if (keyboardEvent.ctrlKey) 
-		    undo();
-			//Z switch to zoom tool
-			else 
 			  changeTool('zoom');
-			break;
+			  break;
-		//redo - ctrl y
+			 // eraser -6, r
-		case 89:
+		    case 54: case 82:
-		  if (keyboardEvent.ctrlKey) 
+		         console.log("Pressed r");
-		    redo();
+	            changeTool('eraser');
-		  break;
+		     	break;
-		case 32:
+		    // Rectangular selection	
-		  spacePressed=true;
+		    case 77: case 109:
-		  break;
+				changeTool('rectselect');
-  }
+				break;
+			//Z
+			case 90:
+			  console.log('PRESSED Z ', keyboardEvent.ctrlKey)
+			  //CTRL+ALT+Z redo
+			  if (keyboardEvent.altKey && keyboardEvent.ctrlKey) 
+			    redo();
+			  //CTRL+Z undo
+			  else if (keyboardEvent.ctrlKey) 
+			    undo();
+				//Z switch to zoom tool
+				else 
+				  changeTool('zoom');
+				break;
+			//redo - ctrl y
+			case 89:
+			  if (keyboardEvent.ctrlKey) 
+			    redo();
+			  break;
+			case 32:
+			  spacePressed=true;
+			  break;
+		}
+  	}
 }
 
 document.onkeydown = KeyPress;

js/_layer.js

@@ -2,6 +2,9 @@
     - move the tmp layer so that it's always right below the active layer
     - when the move tool is selected (to move a selection), the tmp layer must be put right above the 
         active layer to show a preview
+    - mouse events will always have at least a canvas target, so evey time there's an event, we'll have to check
+        the actual element type instead of the current layer and then apply the tool on the currentLayer, not on
+        the first one in order of z-index   
 */
 
 

js/_mouseEvents.js

@@ -15,12 +15,11 @@ window.addEventListener("mousedown", function (mouseEvent) {
 	dragging = true;
 	//left or right click
 	if (mouseEvent.which == 1) {
-						
 		if (spacePressed) 
 			currentTool = 'pan';
 		else if (mouseEvent.altKey) 
 			currentTool = 'eyedropper';
-		else if (mouseEvent.target == currentLayer.canvas && (currentTool == 'pencil' || currentTool == 'eraser'))
+		else if (mouseEvent.target.className == 'drawingCanvas' && (currentTool == 'pencil' || currentTool == 'eraser'))
 		    new HistoryStateEditCanvas();
 		    //saveHistoryState({type: 'canvas', canvas: context.getImageData(0, 0, canvasSize[0], canvasSize[1])});
 		
@@ -37,7 +36,7 @@ window.addEventListener("mousedown", function (mouseEvent) {
 	    prevEraserSize = eraserSize;
     }
 	
-	if (currentTool == 'eyedropper' && mouseEvent.target == currentLayer.canvas)
+	if (currentTool == 'eyedropper' && mouseEvent.target.className == 'drawingCanvas')
 	    eyedropperPreview.style.display = 'block';
 	
 	return false;
@@ -54,7 +53,7 @@ window.addEventListener("mouseup", function (mouseEvent) {
 	
 	if (!documentCreated || dialogueOpen) return;
 	
-	if (currentTool == 'eyedropper' && mouseEvent.target == currentLayer.canvas) {
+	if (currentTool == 'eyedropper' && mouseEvent.target.className == 'drawingCanvas') {
 		var cursorLocation = getCursorPosition(mouseEvent);
 		var selectedColor = context.getImageData(Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom),1,1);
 		var newColor = rgbToHex(selectedColor.data[0],selectedColor.data[1],selectedColor.data[2]);
@@ -84,10 +83,8 @@ window.addEventListener("mouseup", function (mouseEvent) {
 	      }
 	    }
 	}
-	else if (currentTool == 'fill' && mouseEvent.target == currentLayer.canvas) {
+	else if (currentTool == 'fill' && mouseEvent.target.className == 'drawingCanvas') {
 	  console.log('filling')
-	  //if you clicked on anything but the canvas, do nothing
-		if (!mouseEvent.target == currentLayer.canvas) return;
 		
 		//get cursor postion
 		var cursorLocation = getCursorPosition(mouseEvent);
@@ -99,7 +96,7 @@ window.addEventListener("mouseup", function (mouseEvent) {
     //fill starting at the location
 		fill(cursorLocation);
 	}
-	else if (currentTool == 'zoom' && mouseEvent.target == canvasView) {
+	else if (currentTool == 'zoom' && mouseEvent.target.className == 'drawingCanvas') {
 		let mode;
 		if (mouseEvent.which == 1){
 			mode = "in";
@@ -148,14 +145,14 @@ function draw (mouseEvent) {
 		brushPreview.style.top = cursorLocation[1] + currentLayer.canvas.offsetTop - brushSize * zoom / 2 + 'px';
 		
 		//hide brush preview outside of canvas / canvas view
-		if (mouseEvent.target == currentLayer.canvas || mouseEvent.target == canvasView)
+		if (mouseEvent.target.className == 'drawingCanvas'|| mouseEvent.target.className == 'drawingCanvas')
 		  brushPreview.style.visibility = 'visible';
 		else
 		  brushPreview.style.visibility = 'hidden';
 
 		//draw line to current pixel
 		if (dragging) {
-			if (mouseEvent.target == currentLayer.canvas || mouseEvent.target == canvasView) {
+			if (mouseEvent.target.className == 'drawingCanvas' || mouseEvent.target.className == 'drawingCanvas') {
 				line(Math.floor(lastPos[0]/zoom),Math.floor(lastPos[1]/zoom),Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom));
 				lastPos = cursorLocation;
 			}
@@ -177,14 +174,14 @@ function draw (mouseEvent) {
         brushPreview.style.top = cursorLocation[1] + canvas.offsetTop - eraserSize * zoom / 2 + 'px';
 
         //hide brush preview outside of canvas / canvas view
-        if (mouseEvent.target == currentLayer.canvas || mouseEvent.target == canvasView)
+        if (mouseEvent.target.className == 'drawingCanvas' || mouseEvent.target.className == 'drawingCanvas')
             brushPreview.style.visibility = 'visible';
         else
             brushPreview.style.visibility = 'hidden';
 
         //draw line to current pixel
         if (dragging) {
-            if (mouseEvent.target == currentLayer.canvas || mouseEvent.target == canvasView) {
+            if (mouseEvent.target.className == 'drawingCanvas' || mouseEvent.target.className == 'drawingCanvas') {
                 line(Math.floor(lastPos[0]/zoom),Math.floor(lastPos[1]/zoom),Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom));
                 lastPos = cursorLocation;
             }
@@ -198,7 +195,7 @@ function draw (mouseEvent) {
             layers[i].copyData(layers[0]);
         }
     }
-    else if (currentTool == 'eyedropper' && dragging && mouseEvent.target == currentLayer.canvas) {
+    else if (currentTool == 'eyedropper' && dragging && mouseEvent.target.className == 'drawingCanvas') {
         var selectedColor = context.getImageData(Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom),1,1).data;
         eyedropperPreview.style.borderColor = '#'+rgbToHex(selectedColor[0],selectedColor[1],selectedColor[2]);
         eyedropperPreview.style.display = 'block';
@@ -256,9 +253,13 @@ function draw (mouseEvent) {
     	}
     }
     else if (currentTool == 'moveselection') {
-    	console.log("Aggiorno il cursore");
+    	// Updating the cursor (move if inside rect, cross if not)
     	updateCursor();
-    	updateMovePreview();
+
+    	// If I'm dragging, I move the preview
+    	if (dragging && cursorInSelectedArea()) {
+    		updateMovePreview(mouseEvent);
+    	}
     }
 }
 

js/_move.js

@@ -1,5 +1,27 @@
 var imageDataToMove;
+var canMoveSelection = false;
+let lastMousePos;
 
-function updateMovePreview() {
+// TODO: move with arrows
+function updateMovePreview(mouseEvent) {
+	lastMousePos = getCursorPosition(mouseEvent);
+	// clear the entire tmp layer
+	TMPLayer.context.clearRect(0, 0, TMPLayer.canvas.width, TMPLayer.canvas.height);
+	// put the image data with offset
+	TMPLayer.context.putImageData(
+		imageDataToMove, 
+		Math.round(lastMousePos[0] / zoom - imageDataToMove.width / 2), 
+		Math.round(lastMousePos[1] / zoom - imageDataToMove.height / 2));
 
+	moveSelection(lastMousePos[0] / zoom, lastMousePos[1] / zoom, imageDataToMove.width, imageDataToMove.height) 
+}
+
+function endSelection() {
+	TMPLayer.context.clearRect(0, 0, TMPLayer.canvas.width, TMPLayer.canvas.height);
+	VFXLayer.context.clearRect(0, 0, VFXLayer.canvas.width, VFXLayer.canvas.height);
+
+	currentLayer.context.putImageData(
+		imageDataToMove, 
+		Math.round(lastMousePos[0] / zoom - imageDataToMove.width / 2), 
+		Math.round(lastMousePos[1] / zoom - imageDataToMove.height / 2));
 }

js/_newPixel.js

@@ -1,4 +1,3 @@
-
 function newPixel (width, height, palette) {
 	// Setting the current layer
     currentLayer = new Layer(width, height, canvas);
@@ -19,6 +18,7 @@ function newPixel (width, height, palette) {
 
 	// Adding the first layer and the checkerboard to the list of layers
 	layers.push(VFXLayer);
+	layers.push(TMPLayer);
 	layers.push(currentLayer);
 	layers.push(checkerBoard);
 

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;
+	startX = Math.round(cursorPos[0] / zoom) + 0.5;
-	startY = Math.floor(cursorPos[1] / 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;
+	endX = Math.round(currentPos[0] / zoom);
-	endY = currentPos[1] / 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) {
@@ -109,3 +129,24 @@ 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();
+}

js/_updateCursor.js

@@ -13,6 +13,7 @@ function updateCursor () {
         brushPreview.style.height = eraserSize * zoom + 'px';
 	} else if (currentTool == 'moveselection') {
 		if (cursorInSelectedArea()) {
+			canMoveSelection = true;
 			canvasView.style.cursor = 'move';
 			brushPreview.style.display = 'none';
 		}