Merge pull request #11 from unsettledgames/master

Implemented copy / cut / paste tool

js/_clickedColor.js

@@ -8,9 +8,11 @@ function clickedColor (e){
         if (selectedColor) selectedColor.classList.remove('selected');
 
         //set current color
-        currentLayer.context.fillStyle = this.style.backgroundColor;
+        for (let i=1; i<layers.length - 2; i++) {
-        currentGlobalColor = this.style.backgroundColor;
+            layers[i].context.fillStyle = this.style.backgroundColor;
+        }
 
+        currentGlobalColor = this.style.backgroundColor;
         //make color selected
         e.target.parentElement.classList.add('selected');
 

js/_colorChanged.js

@@ -23,11 +23,13 @@ on('input', 'jscolor-hex-input', function (e) {
 
 //changes all of one color to another after being changed from color picker
 function colorChanged(e) {
-    console.log('colorChanged()');
+    console.log('colorChanged() to ' + e.target.value);
     //get colors
     var newColor = hexToRgb(e.target.value);
     var oldColor = e.target.oldColor;
 
+    newColor.a = 255;
+
     //save undo state
     //saveHistoryState({type: 'colorchange', newColor: e.target.value, oldColor: rgbToHex(oldColor), canvas: context.getImageData(0, 0, canvasSize[0], canvasSize[1])});
     new HistoryStateEditColor(e.target.value.toLowerCase(), rgbToHex(oldColor));
@@ -38,6 +40,7 @@ function colorChanged(e) {
 
     //check if selected color already matches another color 
     colors = document.getElementsByClassName('color-button');
+    console.log(colors);
     var colorCheckingStyle = 'background: #bc60c4; color: white';
     var newColorHex = e.target.value.toLowerCase();
 
@@ -50,11 +53,11 @@ function colorChanged(e) {
 
         //if generated color matches this color
         if (newColorHex == colors[i].jscolor.toString()) {
-            // console.log('%ccolor already exists'+(colors[i].parentElement.classList.contains('jscolor-active')?' (but is the current color)':''), colorCheckingStyle);
+            console.log('%ccolor already exists'+(colors[i].parentElement.classList.contains('jscolor-active')?' (but is the current color)':''), colorCheckingStyle);
 
             //if the color isnt the one that has the picker currently open
             if (!colors[i].parentElement.classList.contains('jscolor-active')) {
-                // console.log('%cColor is duplicate', colorCheckingStyle);
+                console.log('%cColor is duplicate', colorCheckingStyle);
 
                 //show the duplicate color warning
                 duplicateColorWarning.style.visibility = 'visible';
@@ -83,8 +86,11 @@ function colorChanged(e) {
 
     //if this is the current color, update the drawing color
     if (e.target.colorElement.parentElement.classList.contains('selected')) {
-        // console.log('this color is the current color');
+        for (let i=1; i<layers.length - 2; i++) {
-        context.fillStyle = currentColor;
+            layers[i].context.fillStyle = '#'+ rgbToHex(newColor.r,newColor.g,newColor.b);
+        }
+
+        currentGlobalColor = newColor;
     }
     /* this is wrong and bad
     if (settings.switchToChangedColor) {

js/_copyPaste.js

@@ -0,0 +1,69 @@
+let clipboardData;
+let isPasting = false;
+
+let copiedStartX;
+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);
+
+	// Setting up the move tool to move the pasted value
+	selectionCanceled = false;
+	imageDataToMove = clipboardData;
+	firstTimeMove = false;
+	isRectSelecting = false;
+
+	// Switching to the move tool
+	tool.moveselection.switchTo();
+	// Updating the rectangle preview
+	moveSelection(
+		copiedStartX + (copiedEndX - copiedStartX) / 2, 
+		copiedStartY + (copiedEndY - copiedStartY) / 2, 
+		clipboardData.width, clipboardData.height);	
+	//drawRect(copiedStartX, copiedEndX, copiedStartY, copiedEndY);
+}
+
+function cutSelectionTool() {
+	console.log("Taglio");
+
+	copiedEndX = endX;
+	copiedEndY = endY;
+
+	copiedStartX = startX;
+	copiedStartY = startY;
+
+	// Getting the selected pixels
+	if (imageDataToMove !== undefined) {
+		clipboardData = imageDataToMove;
+		TMPLayer.context.clearRect(0, 0, TMPLayer.canvas.width, TMPLayer.canvas.height);
+		imageDataToMove = undefined;
+	}
+	else {
+		clipboardData = currentLayer.context.getImageData(startX, startY, endX - startX + 1, endY - startY + 1);
+		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);
+
+    //originalDataPosition = [currentPos[0], currentPos[1]];
+}

js/_fileMenu.js

@@ -103,6 +103,21 @@ for (var i = 1; i < mainMenuItems.length; i++) {
                 case 'Add color':
                     addColor('#eeeeee');
                     break;
+                    // SELECTION MENU
+                case 'Paste':
+                    pasteSelection();
+                    break;
+                case 'Copy':
+                    copySelection();
+                    tool.pencil.switchTo();
+                    break;
+                case 'Cut':
+                    cutSelectionTool();
+                    tool.pencil.switchTo();
+                    break;
+                case 'Cancel':
+                    tool.pencil.switchTo();
+                    break;
                     //Help Menu
                 case 'Settings':
 

js/_history.js

@@ -87,7 +87,7 @@ function HistoryStateEditColor (newColorValue, oldColorValue) {
         //find new color in palette and change it back to old color
         var colors = document.getElementsByClassName('color-button');
         for (var i = 0; i < colors.length; i++) {
-            console.log(newColorValue, '==', colors[i].jscolor.toString());
+            //console.log(newColorValue, '==', colors[i].jscolor.toString());
             if (newColorValue == colors[i].jscolor.toString()) {
                 colors[i].jscolor.fromString(oldColorValue);
                 break;
@@ -105,7 +105,7 @@ function HistoryStateEditColor (newColorValue, oldColorValue) {
         //find old color in palette and change it back to new color
         var colors = document.getElementsByClassName('color-button');
         for (var i = 0; i < colors.length; i++) {
-            console.log(oldColorValue, '==', colors[i].jscolor.toString());
+            //console.log(oldColorValue, '==', colors[i].jscolor.toString());
             if (oldColorValue == colors[i].jscolor.toString()) {
                 colors[i].jscolor.fromString(newColorValue);
                 break;
@@ -123,8 +123,8 @@ function HistoryStateEditColor (newColorValue, oldColorValue) {
 
 //rename to add undo state
 function saveHistoryState (state) {
-    console.log('%csaving history state', undoLogStyle);
+    //console.log('%csaving history state', undoLogStyle);
-    console.log(state);
+    //console.log(state);
 
     //get current canvas data and save to undoStates array
     undoStates.push(state);
@@ -140,12 +140,12 @@ function saveHistoryState (state) {
     //there should be no redoStates after an undoState is saved
     redoStates = [];
 
-    console.log(undoStates);
+    //console.log(undoStates);
-    console.log(redoStates);
+    //console.log(redoStates);
 }
 
 function undo () {
-    console.log('%cundo', undoLogStyle);
+    //console.log('%cundo', undoLogStyle);
 
     //if there are any states saved to undo
     if (undoStates.length > 0) {
@@ -154,7 +154,7 @@ function undo () {
 
         //get state 
         var undoState = undoStates[undoStates.length-1];
-        console.log(undoState);
+        //console.log(undoState);
 
         //restore the state
         undoState.undo();
@@ -167,12 +167,12 @@ function undo () {
             document.getElementById('undo-button').classList.add('disabled');
     }
 
-    console.log(undoStates);
+    //console.log(undoStates);
-    console.log(redoStates);
+    //console.log(redoStates);
 }
 
 function redo () {
-    console.log('%credo', undoLogStyle);
+    //console.log('%credo', undoLogStyle);
 
     if (redoStates.length > 0) {
 
@@ -181,7 +181,7 @@ function redo () {
 
         //get state 
         var redoState = redoStates[redoStates.length-1];
-        console.log(redoState);
+        //console.log(redoState);
 
         //restore the state
         redoState.redo();
@@ -193,6 +193,6 @@ function redo () {
         if (redoStates.length == 0) 
             document.getElementById('redo-button').classList.add('disabled');
     }
-    console.log(undoStates);
+    //console.log(undoStates);
-    console.log(redoStates);
+    //console.log(redoStates);
 }

js/_hotkeyListener.js

@@ -1,5 +1,22 @@
 var spacePressed = false;
 
+/**
+	Copy / paste / cut logic:
+		- The user selects an area
+		- Pressing ctrl+c copies the selection
+		- Pressing ctrl+v ends the current selection and copies the clipboard in the tmp layer:
+			the editor enters move mode and lets the user move the copied selection around.
+			Pressing ctrl+v while moving a copy has the same effect of pressing ctrl+v after a ctrl+c
+		- The behaviour of ctrl+v is the same and doesn't depend on how the selected area was obtained
+			(with ctrl+c or with ctrl+v)
+		- Selecting a different tool while moving the copied or cut selection has the same effect of selecting 
+			a different tool while moving a standard selection
+		- You can paste at any other time
+
+	BUGS:
+		- 
+*/ 
+
 function KeyPress(e) {
     var keyboardEvent = window.event? event : e;
 
@@ -14,7 +31,6 @@ function KeyPress(e) {
 	//
 	if (e.key === "Escape") {
 		if (!selectionCanceled) {
-			endSelection();
 			tool.pencil.switchTo();
 		}
 	}
@@ -24,6 +40,13 @@ function KeyPress(e) {
 			case 49: case 66:
 				tool.pencil.switchTo();
 				break;
+			// copy tool c
+			case 67: case 99:
+				console.log("Copying");
+				if (keyboardEvent.ctrlKey && !dragging && currentTool.name == 'moveselection') {
+			    	copySelection();
+			    }
+			    break;
 			//fill tool - 2, f
 			case 50: case 70:
 				tool.fill.switchTo();
@@ -49,6 +72,20 @@ function KeyPress(e) {
 		    case 77: case 109:
 				tool.rectselect.switchTo()
 				break;
+			// Paste tool
+			case 86: case 118:
+				console.log("Pasting");
+				if (keyboardEvent.ctrlKey && !dragging) {
+					pasteSelection();
+				}
+				break;
+			case 88: case 120:
+				console.log("Cutting");
+				if (keyboardEvent.ctrlKey && !dragging && currentTool.name == 'moveselection') {
+					cutSelectionTool();
+					tool.pencil.switchTo();
+				}
+				break;
 			//Z
 			case 90:
 			  console.log('PRESSED Z ', keyboardEvent.ctrlKey)
@@ -56,14 +93,12 @@ function KeyPress(e) {
 			  if (keyboardEvent.altKey && keyboardEvent.ctrlKey)
 			    redo();
 				if (!selectionCanceled) {
-			    		endSelection();
 			    		tool.pencil.switchTo()
 			    	}
 			  //CTRL+Z undo
 			  else if (keyboardEvent.ctrlKey) {
 			    	undo();
 			    	if (!selectionCanceled) {
-			    		endSelection();
 			    		tool.pencil.switchTo()
 			    	}
 			    }

js/_mouseEvents.js

@@ -26,7 +26,8 @@ window.addEventListener("mousedown", function (mouseEvent) {
 			(currentTool.name == 'pencil' || currentTool.name == 'eraser' || currentTool.name == 'rectangle'))
 		    new HistoryStateEditCanvas();
 		else if (currentTool.name == 'moveselection') {
-			if (!cursorInSelectedArea()) {
+			if (!cursorInSelectedArea() && 
+				((mouseEvent.target.id == 'canvas-view') || mouseEvent.target.className == 'drawingCanvas')) {
 				tool.pencil.switchTo();
 				canDraw = false;
 			}
@@ -355,7 +356,7 @@ function draw (mouseEvent) {
 
         // If I'm dragging, I move the preview
         if (dragging && cursorInSelectedArea()) {
-            updateMovePreview(mouseEvent);
+            updateMovePreview(getCursorPosition(mouseEvent));
         }
     }
 }

js/_move.js

@@ -6,24 +6,23 @@ var selectionCanceled = true;
 var firstTimeMove = true;
 
 // TODO: move with arrows
-function updateMovePreview(mouseEvent) {
+function updateMovePreview(mousePosition) {
-    // ISSUE
     selectionCanceled = false;
 
     if (firstTimeMove) {
-        cutSelection(mouseEvent);
+        cutSelection(mousePosition);
     }
 
     firstTimeMove = false;
 
-    lastMousePos = getCursorPosition(mouseEvent);
+    lastMousePos = mousePosition;
     // 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[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,13 @@ function updateMovePreview(mouseEvent) {
 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) {
+        console.log("definito");
+        // 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,13 +64,26 @@ 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 {
+            currentLayer.context.putImageData(
+                imageDataToMove, 
+                copiedStartX, 
+                copiedStartY);
+        }
+
+        imageDataToMove.data.set(cleanImageData.data);
     }
 
     selectionCanceled = true;
     isRectSelecting = false;
     firstTimeMove = true;
     imageDataToMove = undefined;
+    isPasting = false;
+    isCutting = false;
+    lastMovePos = undefined;
+
+    new HistoryStateEditCanvas();
 }

js/_newPixel.js

@@ -17,10 +17,10 @@ function newPixel (width, height, palette) {
 	canvasSize = currentLayer.canvasSize;
 
 	// Adding the first layer and the checkerboard to the list of layers
+	layers.push(checkerBoard);
+	layers.push(currentLayer);
 	layers.push(VFXLayer);
 	layers.push(TMPLayer);
-	layers.push(currentLayer);
-	layers.push(checkerBoard);
 
 	//remove current palette
 	colors = document.getElementsByClassName('color-button');

js/_rectSelect.js

@@ -72,8 +72,7 @@ function endRectSelection(mouseEvent) {
 	currentTool.updateCursor();
 }
 
-function cutSelection(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);
 

js/_tools.js

@@ -48,7 +48,7 @@ class Tool {
 	    	endSelection();
 	    }
 
-	    //set tool and temp tje tje tpp;
+	    //set tool and temp tje tje tpp <--- he's speaking the language of the gods, don't delete
 	    currentTool = this;
 		currentToolTemp = this;
 
@@ -58,8 +58,11 @@ class Tool {
 		    tools[i].classList.remove("selected");
 		}
 
-	    //give the button of the selected tool the .selected class
+		let buttonNode = document.getElementById(this.name + "-button");
-		document.getElementById(this.name+"-button").parentNode.classList.add("selected");
+	    //give the button of the selected tool the .selected class if the tool has a button
+	    if(buttonNode != null && buttonNode.parentNode != null) {
+			document.getElementById(this.name+"-button").parentNode.classList.add("selected");
+		}
 
 		//change cursor
 		this.updateCursor();

js/_updateCursor.js

@@ -2,15 +2,14 @@
 
 //set the correct cursor for the current tool
 Tool.prototype.updateCursor = function () {
-
+	//console.log('updateCursor()', currentTool)
-	console.log('updateCursor()', currentTool)
 
 	//switch to that tools cursor
 	canvasView.style.cursor = this.cursor || 'default';
 
 	//if the tool uses a brush preview, make it visible and update the size
 	if (this.brushPreview) {
-		console.log('brush size',this.currentBrushSize)
+		//console.log('brush size',this.currentBrushSize)
 		brushPreview.style.display = 'block';
         brushPreview.style.width = this.currentBrushSize * zoom + 'px';
         brushPreview.style.height = this.currentBrushSize * zoom + 'px';

js/pixel-editor.js

@@ -42,6 +42,7 @@
 //=include _replaceAllOfColor.js
 //=include _checkerboard.js
 //=include _layer.js
+//=include _copyPaste.js
 
 /**load file**/
 //=include _loadImage.js

views/pixel-editor.hbs

@@ -61,6 +61,14 @@
                 <li><button id="redo-button" class="disabled">Redo</button></li>
             </ul>
         </li>
+        <li>
+            <button>Selection</button>
+            <ul>
+                <li><button id="copy-button">Copy</button></li>
+                <li><button id="cut-button">Cut</button></li>
+                <li><button id="paste-button">Paste</button></li>
+                <li><button id="cancelSelection-button">Cancel</button></li>
+            </ul>
         <li>
             <button>Help</button>
             <ul>