Fixed data handling bug

When updating a percentage, it based it off the previous edited value (eg if I scale 2x, old value will be equal to 2x, so if you wanted to scale it 0.5x, it actually made it 4x times smaller)

css/pixel-editor.scss

@@ -1118,8 +1118,8 @@ svg {
 		}
 
 		option:checked, option:hover {
-			background-color: $basehovericon;
-			color:$basehovericonhover;
+			box-shadow: 0 0 10px 100px $basehovericon inset;
+			color: $basehovericonhover;
 		}
 	}
 }

js/_history.js

@@ -3,6 +3,22 @@ var redoStates = [];
 
 const undoLogStyle = 'background: #87ff1c; color: black; padding: 5px;';
 
+function HistoryStateResizeSprite(newPercs, oldPercs, algo) {
+    this.newPercs = newPercs;
+    this.oldPercs = oldPercs;
+    this.algo = algo;
+
+    this.undo = function() {
+
+    };
+
+    this.redo = function() {
+
+    };
+
+    saveHistoryState(this);
+}
+
 function HistoryStateResizeCanvas(newSize, oldSize, imageDatas) {
     this.oldSize = oldSize;
     this.newSize = newSize;

js/_resizeSprite.js

@@ -1,22 +1,22 @@
-let resizeSpriteInitialized = false;
+
 let keepRatio = true;
 let currentRatio;
+let currentAlgo = 'nearest-neighbor';
 let data = {width: 0, height: 0, widthPercentage: 100, heightPercentage: 100};
 let startData = {width: 0, height:0, widthPercentage: 100, heightPercentage: 100};
 
 function openResizeSpriteWindow() {
-    if (!resizeSpriteInitialized) {
-        resizeSpriteInitialized = true;
-        initResizeSpriteInputs();
-    }
+    initResizeSpriteInputs();
 
     currentRatio = layers[0].canvasSize[0] / layers[0].canvasSize[1];
 
     data.width = layers[0].canvasSize[0];
     data.height = layers[1].canvasSize[1];
 
-    startData.width = data.width;
-    startData.height = data.height;
+    startData.width = parseInt(data.width);
+    startData.height = parseInt(data.height);
+    startData.heightPercentage = 100;
+    startData.widthPercentage = 100;
 
     showDialogue('resize-sprite');
 }
@@ -37,6 +37,7 @@ function initResizeSpriteInputs() {
 
     document.getElementById("resize-sprite-confirm").addEventListener("click", resizeSprite);
     document.getElementById("rs-keep-ratio").addEventListener("click", toggleRatio);
+    document.getElementById("resize-algorithm-combobox").addEventListener("change", changedAlgorithm);
 }
 
 function resizeSprite() {
@@ -85,11 +86,19 @@ function resizeSprite() {
     for (let i=0; i<layers.length; i++) {
         if (layers[i].menuEntry != null) {
             layers[i].context.putImageData(
-                resizeImageData(imageDatas[layerIndex], newWidth, newHeight, 'nearest-neighbor'), 0, 0
+                resizeImageData(imageDatas[layerIndex], newWidth, newHeight, currentAlgo), 0, 0
             );
             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;
+
     closeDialogue();
 }
 
@@ -120,7 +129,7 @@ function changedWidth(event) {
 }
 
 function changedHeight(event) {
-    let oldValue = data.height;
+    let oldValue = 100;
     let ratio;
     let newWidth, newWidthPerc, newHeightPerc;
 
@@ -146,7 +155,7 @@ function changedHeight(event) {
 }
 
 function changedWidthPercentage(event) {
-    let oldValue = data.widthPercentage;
+    let oldValue = 100;
     let ratio;
     let newWidth, newHeight, newHeightPerc;
 
@@ -155,9 +164,11 @@ function changedWidthPercentage(event) {
 
     ratio = data.widthPercentage / oldValue;
 
-    newHeight = document.getElementById("rs-height").value * ratio;
+    console.log("old value: " + oldValue + ", ratio: " + ratio);
+
+    newHeight = startData.height * ratio;
     newHeightPerc = data.widthPercentage / currentRatio;
-    newWidth = document.getElementById("rs-width").value * ratio;
+    newWidth = startData.width * ratio;
 
     if (keepRatio) {
         document.getElementById("rs-height-percentage").value = newHeightPerc;
@@ -181,9 +192,9 @@ function changedHeightPercentage(event) {
 
     ratio = data.heightPercentage / oldValue;
 
-    newWidth = document.getElementById("rs-width").value * ratio;
+    newWidth = startData.width * ratio;
     newWidthPerc = data.heightPercentage * currentRatio;
-    newHeight = document.getElementById("rs-height").value * ratio;
+    newHeight = startData.height * ratio;
 
     if (keepRatio) {
         document.getElementById("rs-width-percentage").value = data.heightPercentage * currentRatio;
@@ -199,5 +210,8 @@ function changedHeightPercentage(event) {
 
 function toggleRatio(event) {
     keepRatio = !keepRatio;
-    console.log(keepRatio);
+}
+
+function changedAlgorithm(event) {
+    currentAlgo = event.target.value;
 }

views/pixel-editor.hbs

@@ -53,7 +53,7 @@
             <button>Edit</button>
             <ul>
                 <li><button id="resize-canvas-button" onclick = "openResizeCanvasWindow()">Resize canvas</button></li>
-                <li><button id="resize-sprite-button" onclick = "openResizeSpriteWindow()">Resize sprite</button></li>
+                <li><button id="resize-sprite-button" onclick = "openResizeSpriteWindow()">Scale sprite</button></li>
                 <li><button id="undo-button" class="disabled">Undo</button></li>
                 <li><button id="redo-button" class="disabled">Redo</button></li>
             </ul>
@@ -257,7 +257,7 @@
         <!--SPRITE RESIZE-->
         <div id = "resize-sprite">
             <button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
-            <h1>Resize sprite</h1>
+            <h1>Scale sprite</h1>
             <!-- SIZE-->
             <h2>New size</h2>
             <span id = "rs-size-menu">
@@ -292,14 +292,14 @@
                         Keep current ratio <input type = "checkbox" id = "rs-keep-ratio"/>
                     </span>
                     <span>
-                        Resizing algorithm:
-                        <select name = "resize-algorithm">
+                        Scaling algorithm:
+                        <select name = "resize-algorithm" id = "resize-algorithm-combobox">
                             <option value = "nearest-neighbor">Nearest neighbour</option>
                             <option value = "bilinear-interpolation">Bilinear</option>
                         </select>
                     </span>
                     </br>
-                    <button id = "resize-sprite-confirm">Resize sprite</button>
+                    <button id = "resize-sprite-confirm">Scale sprite</button>
                 </div>
             </span>            
         </div>