Finished copy / cut /paste

Also fixed a minor bug that caused the preview rectangle for the selection tool to not be aligned to the actual selection.

js/_copyPaste.js

@@ -6,19 +6,22 @@ let copiedStartY;
 let copiedEndX;
 let copiedEndY;
 
+// BUG: when merging tmp layer to currentLayer there are offset problems
+// FIX: maybe copy the entire tmp layer and paste it so that the merging happens at 0,0
+
 function copySelection() {
-	/*
 	copiedEndX = endX;
 	copiedEndY = endY;
 
 	copiedStartX = startX;
 	copiedStartY = startY;
-*/
 	// Getting the selected pixels
 	clipboardData = currentLayer.context.getImageData(startX, startY, endX - startX + 1, endY - startY + 1);
 }
 
 function pasteSelection() {
+	endSelection();
+
 	isPasting = true;
 	// Putting the image data on the tmp layer
 	TMPLayer.context.putImageData(clipboardData, copiedStartX, copiedStartY);
@@ -35,11 +38,12 @@ function pasteSelection() {
 	moveSelection(
 		copiedStartX + (copiedEndX - copiedStartX) / 2, 
 		copiedStartY + (copiedEndY - copiedStartY) / 2, 
-		imageDataToMove.width, imageDataToMove.height); 
+		clipboardData.width, clipboardData.height);	
 	//drawRect(copiedStartX, copiedEndX, copiedStartY, copiedEndY);
 }
 
 function cutSelectionTool() {
+	console.log("Taglio");
 	// Saving the canvas
     new HistoryStateEditCanvas();
 
@@ -60,7 +64,6 @@ function cutSelectionTool() {
 		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);
 

js/_move.js

@@ -7,7 +7,6 @@ var firstTimeMove = true;
 
 // TODO: move with arrows
 function updateMovePreview(mousePosition) {
-    // ISSUE
     selectionCanceled = false;
 
     if (firstTimeMove) {
@@ -22,8 +21,8 @@ function updateMovePreview(mousePosition) {
     // put the image data with offset
     TMPLayer.context.putImageData(
         imageDataToMove, 
-        Math.round(lastMousePos[0] / zoom - imageDataToMove.width / 2), 
+        Math.round(lastMousePos[0] / zoom) - imageDataToMove.width / 2, 
-        Math.round(lastMousePos[1] / zoom - imageDataToMove.height / 2));
+        Math.round(lastMousePos[1] / zoom) - imageDataToMove.height / 2);
 
     lastMovePos = lastMousePos;
     moveSelection(lastMousePos[0] / zoom, lastMousePos[1] / zoom, imageDataToMove.width, imageDataToMove.height); 
@@ -32,8 +31,12 @@ function updateMovePreview(mousePosition) {
 function endSelection() {
     TMPLayer.context.clearRect(0, 0, TMPLayer.canvas.width, TMPLayer.canvas.height);
     VFXLayer.context.clearRect(0, 0, VFXLayer.canvas.width, VFXLayer.canvas.height);
+    let cleanImageData = new ImageData(endX - startX, endY - startY);
 
     if (imageDataToMove !== undefined) {
+        // Saving the current clipboard before editing it in order to merge it with the current layer
+        cleanImageData.data.set(imageDataToMove.data);
+
         let underlyingImageData = currentLayer.context.getImageData(startX, startY, endX - startX, endY - startY);
 		
         for (let i=0; i<underlyingImageData.data.length; i+=4) {
@@ -60,12 +63,18 @@ function endSelection() {
         if (lastMovePos !== undefined) {
             currentLayer.context.putImageData(
                 imageDataToMove, 
-                Math.round(lastMovePos[0] / zoom - imageDataToMove.width / 2), 
+                Math.round(lastMovePos[0] / zoom) - imageDataToMove.width / 2, 
-                Math.round(lastMovePos[1] / zoom - imageDataToMove.height / 2));
+                Math.round(lastMovePos[1] / zoom) - imageDataToMove.height / 2);
         }
         else {
-            undo();
+            console.log("yo");
+            currentLayer.context.putImageData(
+                imageDataToMove, 
+                copiedStartX, 
+                copiedStartY);
         }
+
+        imageDataToMove.data.set(cleanImageData.data);
     }
 
     selectionCanceled = true;
@@ -73,4 +82,5 @@ function endSelection() {
     firstTimeMove = true;
     imageDataToMove = undefined;
     isPasting = false;
+    isCutting = false;
 }

js/_rectSelect.js

@@ -73,7 +73,6 @@ function endRectSelection(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);
     
@@ -138,8 +137,8 @@ function moveSelection(x, y, width, height) {
     vfxContext.lineWidth = 1;
     vfxContext.setLineDash([4]);
 
-    startX = Math.round(Math.round(x) - Math.round(width / 2)) + 0.5;
+    startX = Math.round(Math.round(x) - 0.5 - Math.round(width / 2)) + 0.5;
-    startY = Math.round(Math.round(y) - Math.round(height / 2)) + 0.5;
+    startY = Math.round(Math.round(y) - 0.5 - Math.round(height / 2)) + 0.5;
     endX = startX + Math.round(width);
     endY = startY + Math.round(height);