Finished refactoring History, added Startup IIFE

js/ColorModule.js

@@ -3,7 +3,7 @@
  */
 const ColorModule = (() => {
     // Array containing the colours of the current palette
-    const currentPalette = [];
+    let currentPalette = [];
     // Reference to the HTML palette
     const coloursList = document.getElementById("palette-list");
     
@@ -41,7 +41,7 @@ const ColorModule = (() => {
         newColor.a = 255;
 
         //save undo state
-        new HistoryStates.EditColor(hexElementValue.toLowerCase(), Color.rgbToHex(oldColor));
+        new HistoryState().EditColor(hexElementValue.toLowerCase(), Color.rgbToHex(oldColor));
 
         //get the currently selected color
         const currentlyEditedColor = document.getElementsByClassName('jscolor-active')[0];
@@ -138,7 +138,7 @@ const ColorModule = (() => {
         currentLayer.context.fillStyle = '#' + newColor;
 
         //add history state
-        new HistoryStates.AddColor(addedColor.firstElementChild.jscolor.toString());
+        new HistoryState().AddColor(addedColor.firstElementChild.jscolor.toString());
 
         //show color picker
         addedColor.firstElementChild.jscolor.show();
@@ -338,11 +338,20 @@ const ColorModule = (() => {
         currentLayer.context.putImageData(tempImage,0,0);
     }
 
+    function getCurrentPalette() {
+        return currentPalette;
+    }
+
+    function resetPalette() {
+        currentPalette = [];
+    }
+
     return {
-        currentPalette,
+        getCurrentPalette,
         addColor,
         deleteColor,
         replaceAllOfColor,
-        addToSimplePalette
+        addToSimplePalette,
+        resetPalette
     }
 })();

js/History.js

@@ -20,6 +20,8 @@ const History = (() => {
 
     //rename to add undo state
     function saveHistoryState (state) {
+        console.log("saved history");
+        console.log(state);
         //get current canvas data and save to undoStates array
         undoStates.push(state);
 
@@ -36,49 +38,35 @@ const History = (() => {
     }
 
     function undo () {
-        //if there are any states saved to undo
+        undoOrRedo('undo');
-        if (undoStates.length > 0) {
-            document.getElementById('redo-button').classList.remove('disabled');
-
-            // get state
-            var undoState = undoStates[undoStates.length-1];
-            // add it to redo states
-            redoStates.push(undoState);
-
-            //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');
-        }
     }
 
     function redo () {
-        console.log("Redo");
+        undoOrRedo('redo');
-        if (redoStates.length > 0) {
+    }
 
-            //enable undo button
+    function undoOrRedo(mode) {
-            document.getElementById('undo-button').classList.remove('disabled');
+        if (redoStates.length <= 0 && mode == 'redo') return;
+        if (undoStates.length <= 0 && mode == 'undo') return;
 
-            //get state
+        // Enable button
-            var redoState = redoStates[redoStates.length-1];
+        document.getElementById(mode + '-button').classList.remove('disabled');
-            // Add it to undo states
-            undoStates.push(redoState);
 
-            //remove from redo array (do this before restoring the state, else the flatten state will break)
+        if (mode == 'undo') {
-            redoStates.splice(redoStates.length-1,1);
+            const undoState = undoStates.pop();
-
+            redoStates.push(undoState); 
-            //restore the state
+            undoState.undo();
-            redoState.redo();
-
-            //if theres none left to redo, disable the option
-            if (redoStates.length == 0)
-                document.getElementById('redo-button').classList.add('disabled');
         }
+        else {
+            const redoState = redoStates.pop();
+            undoStates.push(redoState); 
+            redoState.redo();
+        }
+
+
+        // if theres none left, disable the option
+        if (redoStates.length == 0) document.getElementById('redo-button').classList.add('disabled');
+        if (undoStates.length == 0) document.getElementById('undo-button').classList.add('disabled');
     }
 
     return {
@@ -88,8 +76,12 @@ const History = (() => {
     }
 })();
 
-const HistoryStates = {
+class HistoryState {
-    ResizeSprite: function(xRatio, yRatio, algo, oldData) {
+    constructor() {
+        History.saveHistoryState(this);
+    }
+
+    ResizeSprite (xRatio, yRatio, algo, oldData) {
         this.xRatio = xRatio;
         this.yRatio = yRatio;
         this.algo = algo;
@@ -115,11 +107,9 @@ const HistoryStates = {
             currentAlgo = algo;
             resizeSprite(null, [this.xRatio, this.yRatio]);
         };
-        
+    }
-        History.saveHistoryState(this);
-    },
 
-    ResizeCanvas: function (newSize, oldSize, imageDatas, trim) {
+    ResizeCanvas (newSize, oldSize, imageDatas, trim) {
         this.oldSize = oldSize;
         this.newSize = newSize;
         this.imageDatas = imageDatas;
@@ -146,11 +136,9 @@ const HistoryStates = {
                 trimCanvas(null, false);
             }
         };
+    }
 
-        History.saveHistoryState(this);
+    FlattenVisible(flattened) {
-    },
-
-    FlattenVisible: function(flattened) {
         this.nFlattened = flattened;
 
         this.undo = function() {
@@ -164,11 +152,9 @@ const HistoryStates = {
                 redo();
             }
         };
+    }
 
-        History.saveHistoryState(this);
+    FlattenTwoVisibles(belowImageData, afterAbove, layerIndex, aboveLayer, belowLayer) {
-    },
-
-    FlattenTwoVisibles: function(belowImageData, afterAbove, layerIndex, aboveLayer, belowLayer) {
         this.aboveLayer = aboveLayer;
         this.belowLayer = belowLayer;
         this.belowImageData = belowImageData;
@@ -192,11 +178,9 @@ const HistoryStates = {
             aboveLayer.menuEntry.remove();
             layers.splice(layers.indexOf(aboveLayer), 1);
         };
+    }
 
-        History.saveHistoryState(this);
+    FlattenAll(nFlattened) {
-    },
-
-    FlattenAll: function(nFlattened) {
         this.nFlattened = nFlattened;
 
         this.undo = function() {
@@ -210,11 +194,9 @@ const HistoryStates = {
                 redo();
             }
         };
+    }
 
-        History.saveHistoryState(this);
+    MergeLayer(aboveIndex, aboveLayer, belowData, belowLayer) {
-    },
-
-    MergeLayer: function(aboveIndex, aboveLayer, belowData, belowLayer) {
         this.aboveIndex = aboveIndex;
         this.belowData = belowData;
         this.aboveLayer = aboveLayer;
@@ -235,11 +217,9 @@ const HistoryStates = {
             aboveLayer.selectLayer();
             merge(false);
         };
+    }
 
-        History.saveHistoryState(this);
+    RenameLayer(oldName, newName, layer) {
-    },
-
-    RenameLayer: function(oldName, newName, layer) {
         this.edited = layer;
         this.oldName = oldName;
         this.newName = newName;
@@ -251,11 +231,9 @@ const HistoryStates = {
         this.redo = function() {
             layer.menuEntry.getElementsByTagName("p")[0].innerHTML = newName;
         };
+    }
 
-        History.saveHistoryState(this);
+    DuplicateLayer(addedLayer, copiedLayer) {
-    },
-
-    DuplicateLayer: function(addedLayer, copiedLayer) {
         this.addedLayer = addedLayer;
         this.copiedLayer = copiedLayer;
 
@@ -268,11 +246,9 @@ const HistoryStates = {
             copiedLayer.selectLayer();
             duplicateLayer(null, false);
         };
+    }
 
-        History.saveHistoryState(this);
+    DeleteLayer(layerData, before, index) {
-    },
-
-    DeleteLayer: function(layerData, before, index) {
         this.deleted = layerData;
         this.before = before;
         this.index = index;
@@ -292,11 +268,9 @@ const HistoryStates = {
             this.deleted.selectLayer();
             deleteLayer(false);
         };
+    }
 
-        History.saveHistoryState(this);
+    MoveTwoLayers(layer, oldIndex, newIndex) {
-    },
-
-    MoveTwoLayers: function(layer, oldIndex, newIndex) {
         this.layer = layer;
         this.oldIndex = oldIndex;
         this.newIndex = newIndex;
@@ -308,11 +282,9 @@ const HistoryStates = {
         this.redo = function() {
             layer.canvas.style.zIndex = newIndex;
         };
+    }
 
-        History.saveHistoryState(this);
+    MoveLayer(afterToDrop, toDrop, staticc, nMoved) {
-    },
-
-    MoveLayer: function(afterToDrop, toDrop, staticc, nMoved) {
         this.beforeToDrop = afterToDrop;
         this.toDrop = toDrop;
 
@@ -334,11 +306,9 @@ const HistoryStates = {
         this.redo = function() {
             moveLayers(toDrop.menuEntry.id, staticc.menuEntry.id, true);
         };
+    }
 
-        History.saveHistoryState(this);
+    AddLayer(layerData, index) {
-    },
-
-    AddLayer: function(layerData, index) {
         this.added = layerData;
         this.index = index;
 
@@ -361,12 +331,10 @@ const HistoryStates = {
             layerList.prepend(this.added.menuEntry);
             layers.splice(this.index, 0, this.added);
         };
-
+    }
-        History.saveHistoryState(this);
-    },
 
     //prototype for undoing canvas changes
-    EditCanvas: function() {
+    EditCanvas() {
         this.canvasState = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
         this.layerID = currentLayer.id;
 
@@ -390,13 +358,10 @@ const HistoryStates = {
 
             stateLayer.updateLayerPreview();
         };
-
+    }
-        //add self to undo array
-        History.saveHistoryState(this);
-    },
 
     //prototype for undoing added colors
-    AddColor: function(colorValue) {
+    AddColor(colorValue) {
         this.colorValue = colorValue;
 
         this.undo = function () {
@@ -406,13 +371,10 @@ const HistoryStates = {
         this.redo = function () {
             ColorModule.addColor(this.colorValue);
         };
-
+    }
-        //add self to undo array
-        History.saveHistoryState(this);
-    },
 
     //prototype for undoing deleted colors
-    DeleteColor: function(colorValue) {
+    DeleteColor(colorValue) {
         this.colorValue = colorValue;
         this.canvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
 
@@ -433,13 +395,10 @@ const HistoryStates = {
 
             this.canvas = currentCanvas;
         };
-
+    }
-        //add self to undo array
-        History.saveHistoryState(this);
-    },
 
     //prototype for undoing colors edits
-    EditColor: function(newColorValue, oldColorValue) {
+    EditColor(newColorValue, oldColorValue) {
         this.newColorValue = newColorValue;
         this.oldColorValue = oldColorValue;
         this.canvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
@@ -477,8 +436,5 @@ const HistoryStates = {
 
             this.canvas = currentCanvas;
         };
-
-        //add self to undo array
-        History.saveHistoryState(this);
     }
 }

js/Startup.js

@@ -0,0 +1,3 @@
+const Startup = (() => {
+    
+})();

js/_fill.js

@@ -22,7 +22,7 @@ function fill(cursorLocation) {
     }
 
     //save history state
-    new HistoryStates.EditCanvas();
+    new HistoryState().EditCanvas();
     //saveHistoryState({type: 'canvas', canvas: context.getImageData(0, 0, canvasSize[0], canvasSize[1])});
     //console.log('filling at '+ Math.floor(cursorLocation[0]/zoom) + ','+ Math.floor(cursorLocation[1]/zoom));
 

js/_jscolor.js

@@ -551,7 +551,7 @@ if (!window.jscolor) { window.jscolor = (function () {
                     //if they clicked on the delete button [lospec]
                     if (e.target.className == 'delete-color-button') {
                         //saveHistoryState({type: 'deletecolor', colorValue: jsc.picker.owner.toString(), canvas: canvas.context.getImageData(0, 0, canvasSize[0], canvasSize[1])});
-                        new HistoryStates.DeleteColor(jsc.picker.owner.toString());
+                        new HistoryState().DeleteColor(jsc.picker.owner.toString());
 
                         ColorModule.deleteColor(jsc.picker.owner.styleElement);
                     }

js/_layer.js

@@ -189,7 +189,7 @@ class Layer {
             let name = this.menuEntry.getElementsByTagName("p")[0].innerHTML;
             this.name = name;
 
-            new HistoryStates.RenameLayer(oldLayerName, name, currentLayer);
+            new HistoryState().RenameLayer(oldLayerName, name, currentLayer);
             oldLayerName = null;
         }
     }
@@ -310,7 +310,7 @@ function flatten(onlyVisible) {
             merge();
         }
 
-        new HistoryStates.FlattenAll(nToFlatten);
+        new HistoryState().FlattenAll(nToFlatten);
     }
     else {
         // Getting all the visible layers
@@ -332,7 +332,7 @@ function flatten(onlyVisible) {
         for (let i=0; i<visibleLayers.length - 1; i++) {
             nToFlatten++;
             console.log(visibleLayers[i].menuEntry.nextElementSibling);
-            new HistoryStates.FlattenTwoVisibles(
+            new HistoryState().FlattenTwoVisibles(
                 visibleLayers[i + 1].context.getImageData(0, 0, visibleLayers[i].canvasSize[0], visibleLayers[i].canvasSize[1]),
                 visibleLayers[i].menuEntry.nextElementSibling,
                 layers.indexOf(visibleLayers[i]),
@@ -347,7 +347,7 @@ function flatten(onlyVisible) {
             layers.splice(layers.indexOf(visibleLayers[i]), 1);
         }
 
-        new HistoryStates.FlattenVisible(nToFlatten);
+        new HistoryState().FlattenVisible(nToFlatten);
         // Updating the layer preview
         currentLayer.updateLayerPreview();
     }
@@ -410,7 +410,7 @@ function deleteLayer(saveHistory = true) {
         layers.splice(layerIndex, 1);
 
         if (saveHistory) {
-            new HistoryStates.DeleteLayer(toDelete, previousSibling, layerIndex);
+            new HistoryState().DeleteLayer(toDelete, previousSibling, layerIndex);
         }
     }
 
@@ -463,7 +463,7 @@ function duplicateLayer(event, saveHistory = true) {
     newLayer.updateLayerPreview();
     // Basically "if I'm not adding a layer because redo() is telling meto do so", then I can save the history
     if (saveHistory) {
-        new HistoryStates.DuplicateLayer(newLayer, currentLayer);
+        new HistoryState().DuplicateLayer(newLayer, currentLayer);
     }
 }
 
@@ -556,7 +556,7 @@ function addLayer(id, saveHistory = true) {
     }
     // Basically "if I'm not adding a layer because redo() is telling meto do so", then I can save the history
     if (saveHistory) {
-        new HistoryStates.AddLayer(newLayer, index);
+        new HistoryState().AddLayer(newLayer, index);
     }
 
     return newLayer;

js/_mouseEvents.js

@@ -23,7 +23,7 @@ window.addEventListener("mousedown", function (mouseEvent) {
 			currentTool = tool.eyedropper;
 		else if (mouseEvent.target.className == 'drawingCanvas' &&
 			(currentTool.name == 'pencil' || currentTool.name == 'eraser' || currentTool.name == 'rectangle' || currentTool.name == 'ellipse' || currentTool.name === 'line'))
-		    new HistoryStates.EditCanvas();
+		    new HistoryState().EditCanvas();
 		else if (currentTool.name == 'moveselection') {
 			if (!cursorInSelectedArea() && 
 				((mouseEvent.target.id == 'canvas-view') || mouseEvent.target.className == 'drawingCanvas')) {

js/_move.js

@@ -106,5 +106,5 @@ function endSelection() {
     currentLayer.updateLayerPreview();
 
     // Saving the history
-    new HistoryStates.EditCanvas();
+    new HistoryState().EditCanvas();
 }

js/_newPixel.js

@@ -8,7 +8,7 @@ let firstPixel = true;
  */
 function newPixel (width, height, fileContent = null) {
 	// The palette is empty, at the beginning
-	ColorModule.currentPalette.length = 0;
+	ColorModule.resetPalette();
 
 	// If this is the first pixel I'm creating since the app has started
 	if (firstPixel) {
@@ -99,7 +99,6 @@ function newPixel (width, height, fileContent = null) {
 
 	// If the user selected a palette and isn't opening a file, I load the selected palette
 	if (selectedPalette != 'Choose a palette...' && fileContent == null) {
-		console.log('HELO', selectedPalette, palettes[selectedPalette])
 		//if this palette isnt the one specified in the url, then reset the url
 		if (!palettes[selectedPalette].specified)
 		  history.pushState(null, null, '/pixel-editor');

js/_rectSelect.js

@@ -10,7 +10,7 @@ let endY;
  */
 function startRectSelection(mouseEvent) {
     // Saving the canvas
-    new HistoryStates.EditCanvas();
+    new HistoryState().EditCanvas();
     // Putting the vfx layer on top of everything
     VFXCanvas.style.zIndex = MAX_Z_INDEX;
 

js/_resizeCanvas.js

@@ -116,7 +116,7 @@ function resizeCanvas(event, size, customData, saveHistory = true) {
     // Saving the history only if I'm not already undoing or redoing
     if (saveHistory && event != null) {
         // Saving history
-        new HistoryStates.ResizeCanvas(
+        new HistoryState().ResizeCanvas(
             {x: parseInt(layers[0].canvasSize[0]) + rcBorders.left + rcBorders.right, 
             y: parseInt(layers[0].canvasSize[1]) + rcBorders.top + rcBorders.bottom},
 

js/_resizeSprite.js

@@ -121,7 +121,7 @@ function resizeSprite(event, ratio) {
         // Copying the image data
         imageDatasCopy = rsImageDatas.slice();
         // Saving the history
-        new HistoryStates.ResizeSprite(newWidth / oldWidth, newHeight / oldHeight, currentAlgo, imageDatasCopy);
+        new HistoryState().ResizeSprite(newWidth / oldWidth, newHeight / oldHeight, currentAlgo, imageDatasCopy);
     }
 
     // Resizing the canvas