Added history management for sprite scaling

js/_history.js

@@ -3,19 +3,36 @@ var redoStates = [];
 
 const undoLogStyle = 'background: #87ff1c; color: black; padding: 5px;';
 
-function HistoryStateResizeSprite(newPercs, oldPercs, algo) {
-    this.newPercs = newPercs;
-    this.oldPercs = oldPercs;
+function HistoryStateResizeSprite(xRatio, yRatio, algo, oldData) {
+    this.xRatio = xRatio;
+    this.yRatio = yRatio;
     this.algo = algo;
+    this.oldData = oldData;
 
     this.undo = function() {
+        let layerIndex = 0;
 
+        currentAlgo = algo;
+        resizeSprite(null, [1 / this.xRatio, 1 / this.yRatio]);
+
+        // Also putting the old data
+        for (let i=0; i<layers.length; i++) {
+            if (layers[i].menuEntry != null) {
+                layers[i].context.putImageData(this.oldData[layerIndex], 0, 0);
+                layerIndex++;
+                layers[i].updateLayerPreview();
+            }
+        }
+
+        redoStates.push(this);
     };
 
     this.redo = function() {
-
+        currentAlgo = algo;
+        resizeSprite(null, [this.xRatio, this.yRatio]);
+        undoStates.push(this);
     };
-
+    
     saveHistoryState(this);
 }
 

js/_resizeSprite.js

@@ -40,12 +40,17 @@ function initResizeSpriteInputs() {
     document.getElementById("resize-algorithm-combobox").addEventListener("change", changedAlgorithm);
 }
 
-function resizeSprite() {
+function resizeSprite(event, ratio) {
+    let oldWidth, oldHeight;
     let newWidth, newHeight;
-    let imageDatas = [];
+    let rsImageDatas = [];
     let layerIndex = 0;
+    let imageDatasCopy = [];
 
+    oldWidth = layers[0].canvasSize[0];
+    oldHeight = layers[1].canvasSize[1];
     rcPivot = "middle";
+
     // Updating values if the user didn't press enter
     switch (document.activeElement.id) {
         case "rs-width-percentage":
@@ -65,20 +70,29 @@ function resizeSprite() {
             break;
     }
 
-    newWidth = data.width;
-    newHeight = data.height;
-
-    console.log(newWidth + ", " + newHeight);
-
+    if (ratio == null) {
+        newWidth = data.width;
+        newHeight = data.height;
+    }
+    else {
+        newWidth = layers[0].canvasSize[0] * ratio[0];
+        newHeight = layers[1].canvasSize[1] * ratio[1];
+    }
+    
     // Get all the image datas
     for (let i=0; i<layers.length; i++) {
         if (layers[i].menuEntry != null) {
-            imageDatas.push(layers[i].context.getImageData(
+            rsImageDatas.push(layers[i].context.getImageData(
                 0, 0, layers[0].canvasSize[0], layers[0].canvasSize[1])
             );
         }
     }
 
+    if (ratio == null) {
+        imageDatasCopy = rsImageDatas.slice();
+        new HistoryStateResizeSprite(newWidth / oldWidth, newHeight / oldHeight, currentAlgo, imageDatasCopy);
+    }
+
     // Resizing the canvas
     resizeCanvas(null, {x: newWidth, y: newHeight});
 
@@ -86,18 +100,26 @@ function resizeSprite() {
     for (let i=0; i<layers.length; i++) {
         if (layers[i].menuEntry != null) {
             layers[i].context.putImageData(
-                resizeImageData(imageDatas[layerIndex], newWidth, newHeight, currentAlgo), 0, 0
+                resizeImageData(rsImageDatas[layerIndex], newWidth, newHeight, currentAlgo), 0, 0
             );
+            layers[i].updateLayerPreview();
             layerIndex++;
         }
     }
 
     // Updating start values when I finish scaling the sprite
     // OPTIMIZABLE? Can't I just assign data to startData? Is js smart enough to understand?
-    startData.width = data.width;
-    startData.height = data.height;
-    startData.widthPercentage = data.widthPercentage;
-    startData.heightPercentage = data.heightPercentage;
+    if (ratio == null) {
+        startData.width = data.width;
+        startData.height = data.height;
+    }
+    else {
+        startData.width = layers[0].canvasSize[0];
+        startData.height = layers[0].canvasSize[1];
+    }
+
+    startData.widthPercentage = 100;
+    startData.heightPercentage = 100;
 
     closeDialogue();
 }