Merge pull request #11 from unsettledgames/master

Implemented copy / cut / paste tool
2023-08-10 21:12:51 +03:00 · 2020-06-16 15:24:53 -04:00 · 2020-06-16 15:24:53 -04:00 · 3072a69b55
commit 3072a69b55
parent f1fe597b80 8743bd8549
14 changed files with 202 additions and 47 deletions
--- a/js/_clickedColor.js
+++ b/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;
-        currentGlobalColor = this.style.backgroundColor;
+        for (let i=1; i<layers.length - 2; i++) {
+            layers[i].context.fillStyle = this.style.backgroundColor;
+        }

+        currentGlobalColor = this.style.backgroundColor;
        //make color selected
        e.target.parentElement.classList.add('selected');

--- a/js/_colorChanged.js
+++ b/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');
-        context.fillStyle = currentColor;
+        for (let i=1; i<layers.length - 2; i++) {
+            layers[i].context.fillStyle = '#'+ rgbToHex(newColor.r,newColor.g,newColor.b);
+        }
+
+        currentGlobalColor = newColor;
    }
    /* this is wrong and bad
    if (settings.switchToChangedColor) {
--- a/js/_copyPaste.js
+++ b/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]];
+}
--- a/js/_fileMenu.js
+++ b/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':

--- a/js/_history.js
+++ b/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(state);
+    //console.log('%csaving history state', undoLogStyle);
+    //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(redoStates);
+    //console.log(undoStates);
+    //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(redoStates);
+    //console.log(undoStates);
+    //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(redoStates);
+    //console.log(undoStates);
+    //console.log(redoStates);
 }
--- a/js/_hotkeyListener.js
+++ b/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()
 			    	}
 			    }
--- a/js/_mouseEvents.js
+++ b/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));
        }
    }
 }
--- a/js/_move.js
+++ b/js/_move.js
@ -6,24 +6,23 @@ var selectionCanceled = true;
 var firstTimeMove = true;

 // TODO: move with arrows
-function updateMovePreview(mouseEvent) {
-    // ISSUE
+function updateMovePreview(mousePosition) {
    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[1] / zoom - imageDataToMove.height / 2));
+        Math.round(lastMousePos[0] / zoom) - imageDataToMove.width / 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[1] / zoom - imageDataToMove.height / 2));
+                Math.round(lastMovePos[0] / zoom) - imageDataToMove.width / 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();
 }
--- a/js/_newPixel.js
+++ b/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');
--- a/js/_rectSelect.js
+++ b/js/_rectSelect.js
@ -72,8 +72,7 @@ function endRectSelection(mouseEvent) {
 	currentTool.updateCursor();
 }

-function cutSelection(mouseEvent) {
-	console.log("Coordinate: start x, y: " + startX + ", " + startY + " end x, y: " + endX + ", " + endY);
+function cutSelection(mousePosition) {
 	// 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;
-    startY = Math.round(Math.round(y) - Math.round(height / 2)) + 0.5;
+    startX = Math.round(Math.round(x) - 0.5 - Math.round(width / 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);

--- a/js/_tools.js
+++ b/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
-		document.getElementById(this.name+"-button").parentNode.classList.add("selected");
+		let buttonNode = document.getElementById(this.name + "-button");
+	    //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();
--- a/js/_updateCursor.js
+++ b/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';
--- a/js/pixel-editor.js
+++ b/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
--- a/views/pixel-editor.hbs
+++ b/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>