Added Selection menu

Also fixed a few minor bugs.

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(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);
 }

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;
 			}

js/_move.js

@@ -34,6 +34,7 @@ function endSelection() {
     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);
 
@@ -67,6 +68,7 @@ function endSelection() {
                 Math.round(lastMovePos[1] / zoom) - imageDataToMove.height / 2);
         }
         else {
+            console.log("incollo male");
             currentLayer.context.putImageData(
                 imageDataToMove, 
                 copiedStartX, 
@@ -82,6 +84,7 @@ function endSelection() {
     imageDataToMove = undefined;
     isPasting = false;
     isCutting = false;
+    lastMovePos = undefined;
 
     new HistoryStateEditCanvas();
 }

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>