Added history states for canvas resizing

Must fix bug that happens when creating a new layer after resizing the canvas

js/_getCursorPosition.js

@@ -12,8 +12,8 @@ function getCursorPosition(e) {
         y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;			
     }
 
-    x -= canvas.offsetLeft;
+    x -= currentLayer.canvas.offsetLeft;
-    y -= canvas.offsetTop;
+    y -= currentLayer.canvas.offsetTop;
 
     return [Math.round(x), Math.round(y)];
 }

js/_history.js

@@ -3,6 +3,35 @@ var redoStates = [];
 
 const undoLogStyle = 'background: #87ff1c; color: black; padding: 5px;';
 
+function HistoryStateResizeCanvas(newSize, oldSize, imageDatas) {
+    this.oldSize = oldSize;
+    this.newSize = newSize;
+    this.imageDatas = imageDatas;
+
+    this.undo = function() {
+        let dataIndex = 0;
+        console.log("breakpoint");
+        // Resizing the canvas
+        resizeCanvas(null, oldSize);
+        // Putting the image datas
+        for (let i=0; i<imageDatas.length; i++) {
+            if (layers[i].menuEntry != null) {
+                layers[i].context.putImageData(imageDatas[dataIndex], 0, 0);
+                dataIndex++;
+            }
+        }
+
+        redoStates.push(this);
+    };
+
+    this.redo = function() {
+        resizeCanvas(null, newSize);
+        undoStates.push(this);
+    };
+
+    saveHistoryState(this);
+}
+
 function HistoryStateFlattenVisible(flattened) {
     this.nFlattened = flattened;
 

js/_layer.js

@@ -185,13 +185,13 @@ class Layer {
             this.canvas.style.top = offsetTop +'px';
     }
 
-    // Copies the otherCanvas' position and size
+    // Copies the otherLayer's position and size
-    copyData(otherCanvas) {
+    copyData(otherLayer) {
-        this.canvas.style.width = otherCanvas.canvas.style.width;
+        this.canvas.style.width = otherLayer.canvas.style.width;
-        this.canvas.style.height = otherCanvas.canvas.style.height;
+        this.canvas.style.height = otherLayer.canvas.style.height;
-
+        
-        this.canvas.style.left = otherCanvas.canvas.style.left;
+        this.canvas.style.left = otherLayer.canvas.style.left;
-        this.canvas.style.top = otherCanvas.canvas.style.top;
+        this.canvas.style.top = otherLayer.canvas.style.top;
     }
 
     openOptionsMenu(event) {
@@ -601,7 +601,9 @@ function addLayer(id, saveHistory = true) {
     let newLayer = new Layer(currentLayer.canvasSize[0], currentLayer.canvasSize[1], newCanvas, toAppend);
     newLayer.context.fillStyle = currentLayer.context.fillStyle;
     newLayer.copyData(currentLayer);
+
     layers.splice(index, 0, newLayer);
+    
 
     // Insert it before the Add layer button
     layerList.insertBefore(toAppend, layerList.childNodes[0]);

js/_resizeCanvas.js

@@ -64,14 +64,21 @@ function changedSize(event) {
     borders.bottom = bottom;
 }
 
-function resizeCanvas(event) {
+function resizeCanvas(event, size) {
     let imageDatas = [];
     let leftOffset = 0;
     let topOffset = 0;
     let copiedDataIndex = 0;
 
+    // If I'm undoing, I manually put the values in the window
+    if (size !== undefined) {
+        document.getElementById("rc-width").value = size.x;
+        document.getElementById("rc-height").value = size.y;
+
+        changedSize();
+    }
+    
     rcUpdateBorders();
-    changedSize();
 
     // Save all imageDatas
     for (let i=0; i<layers.length; i++) {
@@ -80,6 +87,19 @@ function resizeCanvas(event) {
         }
     }
 
+    // Saving the history only if I'm not already undoing or redoing
+    if (size == undefined) {
+        // Saving history
+        new HistoryStateResizeCanvas(
+            {x: parseInt(layers[0].canvasSize[0]) + borders.left + borders.right, 
+            y: parseInt(layers[0].canvasSize[1]) + borders.top + borders.bottom},
+
+            {x: layers[0].canvasSize[0],
+            y: layers[0].canvasSize[1]},
+            imageDatas
+        );
+    }
+
     // Resize the canvases
     for (let i=0; i<layers.length; i++) {
         layers[i].canvasSize[0] = parseInt(layers[i].canvasSize[0]) + borders.left + borders.right;
@@ -135,13 +155,14 @@ function resizeCanvas(event) {
             topOffset = borders.top + borders.bottom;
             break;
         default:
-            console.log('now thats a very weird pivot');
+            console.log('Pivot does not exist, please report an issue at https://github.com/lospec/pixel-editor');
             break;
     }
 
     for (let i=0; i<layers.length; i++) {
         if (layers[i].menuEntry != null) {
             layers[i].context.putImageData(imageDatas[copiedDataIndex], leftOffset, topOffset);
+            layers[i].updateLayerPreview();
             copiedDataIndex++;
         }
     }

js/_resizeSprite.js

@@ -0,0 +1,6 @@
+// Function to show dialogue
+    // New size
+    // Percentage change
+    // Keep ratio checkbox
+    // Choose resize algorithm
+    // Confirm

js/pixel-editor.js

@@ -45,6 +45,7 @@
 //=include _layer.js
 //=include _copyPaste.js
 //=include _resizeCanvas.js
+//=include _resizeSprite.js
 
 /**load file**/
 //=include _loadImage.js