Implemented history state for flattening all the layers

js/_history.js

@@ -7,8 +7,27 @@ function HistoryStateFlattenVisible() {
     // undo the merge for the number of layers that have been flattened
 }
 
-function HistoryStateFlattenAll() {
-    // undo the merge for the number of layers that have been flattened
+function HistoryStateFlattenAll(nFlattened) {
+    this.nFlattened = nFlattened;
+
+    this.undo = function() {
+        console.log(nFlattened);
+        for (let i=0; i<nFlattened - 2; i++) {
+            undo();
+        }
+
+        redoStates.push(this);
+    };
+
+    this.redo = function() {
+        for (let i=0; i<nFlattened - 2; i++) {
+            redo();
+        }
+
+        undoStates.push(this);
+    };
+
+    saveHistoryState(this);
 }
 
 function HistoryStateMergeLayer(aboveIndex, aboveLayer, belowData, belowLayer) {
@@ -16,7 +35,7 @@ function HistoryStateMergeLayer(aboveIndex, aboveLayer, belowData, belowLayer) {
     this.belowData = belowData;
     this.aboveLayer = aboveLayer;
     this.belowLayer = belowLayer;
-    // todo
+
     this.undo = function() {
         layerList.insertBefore(this.aboveLayer.menuEntry, this.belowLayer.menuEntry);
         canvasView.append(this.aboveLayer.canvas);
@@ -134,7 +153,6 @@ function HistoryStateEditCanvas () {
     this.layerID = currentLayer.id;
 
     this.undo = function () {
-        console.log("CHE COSA STA SUCCEDENDOOOOOO STA CAMBIANDO IL MONDOOOOO");
         var stateLayer = getLayerByID(this.layerID);
         var currentCanvas = stateLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
         stateLayer.context.putImageData(this.canvasState, 0, 0);
@@ -258,9 +276,6 @@ function HistoryStateEditColor (newColorValue, oldColorValue) {
 
 //rename to add undo state
 function saveHistoryState (state) {
-    //console.log('%csaving history state', undoLogStyle);
-    //console.log(state);
-
     //get current canvas data and save to undoStates array
     undoStates.push(state);
 
@@ -274,9 +289,6 @@ function saveHistoryState (state) {
 
     //there should be no redoStates after an undoState is saved
     redoStates = [];
-
-    //console.log(undoStates);
-    //console.log(redoStates);
 }
 
 function undo () {
@@ -284,26 +296,22 @@ function undo () {
 
     //if there are any states saved to undo
     if (undoStates.length > 0) {
-        console.log("UUUEEEEEEEEEEE");
         document.getElementById('redo-button').classList.remove('disabled');
 
         //get state 
         var undoState = undoStates[undoStates.length-1];
         //console.log(undoState);
 
-        //restore the state
-        undoState.undo();
-
         //remove from the undo list
         undoStates.splice(undoStates.length-1,1);
 
+        //restore the state
+        undoState.undo();
+        
         //if theres none left to undo, disable the option
         if (undoStates.length == 0) 
             document.getElementById('undo-button').classList.add('disabled');
     }
-
-    //console.log(undoStates);
-    //console.log(redoStates);
 }
 
 function redo () {
@@ -316,14 +324,13 @@ function redo () {
 
         //get state 
         var redoState = redoStates[redoStates.length-1];
-        //console.log(redoState);
+
+        //remove from redo array (do this before restoring the state, else the flatten state will break)
+        redoStates.splice(redoStates.length-1,1);
 
         //restore the state
         redoState.redo();
 
-        //remove from redo array
-        redoStates.splice(redoStates.length-1,1);
-
         //if theres none left to redo, disable the option
         if (redoStates.length == 0) 
             document.getElementById('redo-button').classList.add('disabled');

js/_layer.js

@@ -329,11 +329,14 @@ function flatten(onlyVisible) {
     if (!onlyVisible) {
         // Selecting the first layer
         let firstLayer = layerList.firstElementChild;
+        let nToFlatten = layerList.childElementCount - 1;
         getLayerByID(firstLayer.id).selectLayer();
 
-        for (let i = 0; i < layerList.childElementCount - 1; i++) {
+        for (let i = 0; i < nToFlatten; i++) {
             merge();
         }
+
+        new HistoryStateFlattenAll(nToFlatten);
     }
     else {
         // Getting all the visible layers

js/_mouseEvents.js

@@ -9,7 +9,7 @@ window.addEventListener("mousedown", function (mouseEvent) {
 	canDraw = true;
 
 	//if no document has been created yet, or this is a dialog open, or the currentLayer is locked
-	if (!documentCreated || dialogueOpen || currentLayer.isLocked) return;
+	if (!documentCreated || dialogueOpen || currentLayer.isLocked || !currentLayer.isVisible) return;
 	//prevent right mouse clicks and such, which will open unwanted menus
 	//mouseEvent.preventDefault();
 
@@ -35,7 +35,7 @@ window.addEventListener("mousedown", function (mouseEvent) {
 		
 		currentTool.updateCursor();
 
-		if (!currentLayer.isLocked && canDraw) {
+		if (!currentLayer.isLocked && !currentLayer.isVisible && canDraw) {
 			draw(mouseEvent);
 		}
 	}
@@ -71,7 +71,7 @@ window.addEventListener("mouseup", function (mouseEvent) {
 		currentLayer.closeOptionsMenu();	
 	}
 
-	if (!documentCreated || dialogueOpen || currentLayer.isLocked) return;
+	if (!documentCreated || dialogueOpen || !currentLayer.isVisible || currentLayer.isLocked) return;
 
 	if (currentTool.name == 'eyedropper' && mouseEvent.target.className == 'drawingCanvas') {
 		var cursorLocation = getCursorPosition(mouseEvent);
@@ -184,7 +184,7 @@ function draw (mouseEvent) {
 	var cursorLocation = lastMousePos;
 
 	//if a document hasnt yet been created or the current layer is locked, exit this function
-	if (!documentCreated || dialogueOpen || currentLayer.isLocked) return;
+	if (!documentCreated || dialogueOpen || !currentLayer.isVisible || currentLayer.isLocked) return;
 
 
 	eyedropperPreview.style.display = 'none';