Fixed bug in canvas resizing when resizing sprite

README.md

@@ -45,6 +45,7 @@ Suggestions / Planned features:
 	- Update pivot buttons when resizing canvas
 	- Update borders by dragging the canvas' edges with the mouse when resizing canvas
 	- Move the canvases so they're centered after resizing the canvas (maybe a .center() method in layer class)
+    - Trim canvas
 
 ## How to Contribute
 

js/_resizeCanvas.js

@@ -1,5 +1,5 @@
 let resizeCanvasContainer = document.getElementById("resize-canvas");
-let pivot = "middle";
+let rcPivot = "middle";
 let currentPivotObject;
 let resizeCanvasInitialized = false;
 let borders = {left: 0, right: 0, top: 0, bottom: 0};
@@ -25,26 +25,26 @@ function initResizeCanvasInputs() {
     document.getElementById("rc-width").value = layers[0].canvasSize[0];
     document.getElementById("rc-height").value = layers[0].canvasSize[1];
 
-    document.getElementById("rc-border-left").addEventListener("change", changedBorder);
+    document.getElementById("rc-border-left").addEventListener("change", rcChangedBorder);
-    document.getElementById("rc-border-right").addEventListener("change", changedBorder);
+    document.getElementById("rc-border-right").addEventListener("change", rcChangedBorder);
-    document.getElementById("rc-border-top").addEventListener("change", changedBorder);
+    document.getElementById("rc-border-top").addEventListener("change", rcChangedBorder);
-    document.getElementById("rc-border-bottom").addEventListener("change", changedBorder);
+    document.getElementById("rc-border-bottom").addEventListener("change", rcChangedBorder);
 
-    document.getElementById("rc-width").addEventListener("change", changedSize);
+    document.getElementById("rc-width").addEventListener("change", rcChangedSize);
-    document.getElementById("rc-height").addEventListener("change", changedSize);
+    document.getElementById("rc-height").addEventListener("change", rcChangedSize);
 
     document.getElementById("resize-canvas-confirm").addEventListener("click", resizeCanvas);
     console.log("Pivot selezionato: " + currentPivotObject);
 }
 
-function changedBorder(event) {
+function rcChangedBorder(event) {
     rcUpdateBorders();
     
     document.getElementById("rc-width").value = parseInt(layers[0].canvasSize[0]) + borders.left + borders.right;
     document.getElementById("rc-height").value = parseInt(layers[0].canvasSize[1]) + borders.top + borders.bottom;
 }
 
-function changedSize(event) {
+function rcChangedSize(event) {
     let widthOffset = Math.abs(document.getElementById("rc-width").value) - layers[0].canvasSize[0];
     let heightOffset = Math.abs(document.getElementById("rc-height").value) - layers[0].canvasSize[1];
 
@@ -75,7 +75,7 @@ function resizeCanvas(event, size) {
         document.getElementById("rc-width").value = size.x;
         document.getElementById("rc-height").value = size.y;
 
-        changedSize();
+        rcChangedSize();
     }
     
     rcUpdateBorders();
@@ -116,7 +116,7 @@ function resizeCanvas(event, size) {
     fillCheckerboard();
 
     // Put the imageDatas in the right position
-    switch (pivot)
+    switch (rcPivot)
     {
         case 'topleft':
             leftOffset = 0;
@@ -185,7 +185,7 @@ function rcUpdateBorders() {
 }
 
 function changePivot(event) {
-    pivot = event.target.getAttribute("value");
+    rcPivot = event.target.getAttribute("value");
 
     // Setting the selected class
     currentPivotObject.classList.remove("rc-selected-pivot");

js/_resizeSprite.js

@@ -40,75 +40,144 @@ function initResizeSpriteInputs() {
 }
 
 function resizeSprite() {
+    let newWidth, newHeight;
 
+    rcPivot = "middle";
+    // Updating values if the user didn't press enter
+    switch (document.activeElement.id) {
+        case "rs-width-percentage":
+            changedWidthPercentage();
+            break;
+        case "rs-width":
+            changedWidth();
+            break;
+        case "rs-height-percentage":
+            changedHeightPercentage();
+            break;
+        case "rs-height":
+            changedHeight();
+            break;
+        default:
+            // In this case everything has been updated correctly
+            break;
+    }
+
+    newWidth = data.width;
+    newHeight = data.height;
+
+    console.log(newWidth + ", " + newHeight);
+
+    // Resizing the canvas
+    resizeCanvas(null, {x: newWidth, y: newHeight});
+    // Get all the image datas
+    // Resize the canvases
+    // Resize the image datas
+    // Put the image datas on the new canvases
+    closeDialogue();
 }
 
 function changedWidth(event) {
     let oldValue = data.width;
     let ratio;
     let percentageRatio;
+    let newHeight, newHeightPerc, newWidthPerc;
+
     data.width = event.target.value;
     delta = data.width - oldValue;
 
     ratio = data.width / oldValue;
 
+    newHeight = data.width / currentRatio;
+    newHeightPerc = (newHeight * 100) / startData.height;
+    newWidthPerc = (data.width * 100) / startData.width;
+
     if (keepRatio) {
-        document.getElementById("rs-height").value = data.width / currentRatio;
+        document.getElementById("rs-height").value = newHeight;
-        document.getElementById("rs-height-percentage").value = (data.width * 100) / startData.width;
+        data.height = newHeight;
+
+        document.getElementById("rs-height-percentage").value = newHeightPerc;
+        data.heightPercentage = newHeightPerc;
     }
 
-    document.getElementById("rs-width-percentage").value = (data.width * 100) / startData.width;
+    document.getElementById("rs-width-percentage").value = newWidthPerc;
 }
 
 function changedHeight(event) {
     let oldValue = data.height;
     let ratio;
+    let newWidth, newWidthPerc, newHeightPerc;
 
     data.height = event.target.value;
     delta = data.height - oldValue;
 
     ratio = data.height / oldValue;
 
+    newWidth = data.height * currentRatio;
+    newWidthPerc = (newWidth * 100) / startData.width;
+    newHeightPerc = (data.height * 100) / startData.height;
+
     if (keepRatio) {
-        document.getElementById("rs-width").value = data.height * currentRatio;
+        document.getElementById("rs-width").value = newWidth;
-        document.getElementById("rs-width-percentage").value = (data.height * 100) / startData.height;
+        data.width = newWidth;
+
+        document.getElementById("rs-width-percentage").value = newWidthPerc;
+        data.widthPercentage = newWidthPerc;
     }
 
-    document.getElementById("rs-height-percentage").value = (data.height * 100) / startData.height;
+    document.getElementById("rs-height-percentage").value = newHeightPerc;
+    data.heightPercentage = newHeightPerc;
 }
 
 function changedWidthPercentage(event) {
     let oldValue = data.widthPercentage;
     let ratio;
+    let newWidth, newHeight, newHeightPerc;
 
     data.widthPercentage = event.target.value;
     delta = data.widthPercentage - oldValue;
 
     ratio = data.widthPercentage / oldValue;
 
+    newHeight = document.getElementById("rs-height").value * ratio;
+    newHeightPerc = data.widthPercentage / currentRatio;
+    newWidth = document.getElementById("rs-width").value * ratio;
+
     if (keepRatio) {
-        document.getElementById("rs-height-percentage").value = data.widthPercentage / currentRatio;
+        document.getElementById("rs-height-percentage").value = newHeightPerc;
-        document.getElementById("rs-height").value *= ratio;
+        data.heightPercentage = newHeightPerc;
+        
+        document.getElementById("rs-height").value = newHeight
+        data.height = newHeight;
     }
 
-    document.getElementById("rs-width").value *= ratio;
+    document.getElementById("rs-width").value = newWidth;
+    data.width = newWidth;
 }
 
 function changedHeightPercentage(event) {
     let oldValue = data.heightPercentage;
     let ratio;
+    let newHeight, newWidth, newWidthPerc;
 
     data.heightPercentage = event.target.value;
     delta = data.heightPercentage - oldValue;
 
     ratio = data.heightPercentage / oldValue;
 
+    newWidth = document.getElementById("rs-width").value * ratio;
+    newWidthPerc = data.heightPercentage * currentRatio;
+    newHeight = document.getElementById("rs-height").value * ratio;
+
     if (keepRatio) {
         document.getElementById("rs-width-percentage").value = data.heightPercentage * currentRatio;
-        document.getElementById("rs-width").value *= ratio;
+        data.widthPercentage = newWidthPerc;
+
+        document.getElementById("rs-width").value = newWidth;
+        data.width = newWidth;
     }
 
-    document.getElementById("rs-height").value *= ratio;
+    document.getElementById("rs-height").value = newHeight;
+    data.height = newHeight;
 }
 
 function toggleRatio(event) {