Added resize sprite data management

css/pixel-editor.scss

@@ -947,7 +947,7 @@ svg {
 	display: none;
 }
 
-#resize-canvas {
+#resize-canvas, #resize-sprite {
   display:flex;
   position:relative;
   flex-wrap:wrap;
@@ -995,7 +995,7 @@ svg {
   }
 }
 
-#borders-menu, #rc-size-menu {
+#borders-menu, #rc-size-menu, #rs-size-menu, #rs-percentage-menu {
   display:flex;
   position:relative;
   flex-wrap: wrap;
@@ -1026,7 +1026,7 @@ svg {
       transform: scale(0.95);
   }
 
-  input {
+  input[type=number] {
     position:relative;
     margin-left:10px;
 	height:15px;
@@ -1034,8 +1034,8 @@ svg {
 	padding:8px;
   }
 
-  input::-webkit-outer-spin-button,
+  input[type=number]::-webkit-outer-spin-button,
-	input::-webkit-inner-spin-button {
+	input[type=number]::-webkit-inner-spin-button {
 	-webkit-appearance: none;
 	margin: 0;
 	}
@@ -1056,9 +1056,25 @@ svg {
   }
 }
 
-#rc-size-menu {
+#rs-percentage-menu {
+	width: 400px;
 	span {
-		width:115px;
+		width:150px;
+	}
+}
+
+#rs-size-menu {
+	width: 400px;
+	span {
+		width:150px;
+	}
+}
+
+#rs-percentage-menu, #rs-size-menu {
+	justify-content: center;
+
+	div {
+		float: none;
 	}
 }
 
@@ -1077,7 +1093,29 @@ svg {
 	}
 }
 
-#resize-canvas-confirm {
+#rs-ratio-div {
+	width:400px;
+	justify-content: center;
+	padding-left:20px;
+
+	span {
+		width:400px;
+		justify-content: center;
+	}
+}
+
+#rs-keep-ratio {
+	background: color(button);
+	border: none;
+	font-size:14px;
+	color: color(button, foreground);
+	padding: 10px 20px;
+	margin: 0 auto;
+	position:relative;
+	display: block;
+}
+
+#resize-canvas-confirm, #resize-sprite-confirm {
   background: color(button);
   border: none;
   font-size:18px;

js/_resizeSprite.js

@@ -1,34 +1,117 @@
 let resizeSpriteInitialized = false;
+let keepRatio = true;
+let currentRatio;
+let data = {width: 0, height: 0, widthPercentage: 100, heightPercentage: 100};
+let startData = {width: 0, height:0, widthPercentage: 100, heightPercentage: 100};
 
-// Function to show dialogue
+function openResizeSpriteWindow() {
-    // New size
+    if (!resizeSpriteInitialized) {
-    // Percentage change
+        resizeSpriteInitialized = true;
-    // Keep ratio checkbox
+        initResizeSpriteInputs();
-    // Choose resize algorithm
-    // Confirm
-
-    function openResizeSpriteWindow() {
-        if (!resizeSpriteInitialized) {
-            resizeSpriteInitialized = true;
-            initResizeSpriteInputs();
-        }
-        showDialogue('resize-sprite');
     }
-    
+
-    function initResizeSpriteInputs() {
+    currentRatio = layers[0].canvasSize[0] / layers[0].canvasSize[1];
-    /*
+
-        document.getElementById("rc-width").value = layers[0].canvasSize[0];
+    data.width = layers[0].canvasSize[0];
-        document.getElementById("rc-height").value = layers[0].canvasSize[1];
+    data.height = layers[1].canvasSize[1];
-    
+
-        document.getElementById("rc-border-left").addEventListener("change", changedBorder);
+    startData.width = data.width;
-        document.getElementById("rc-border-right").addEventListener("change", changedBorder);
+    startData.height = data.height;
-        document.getElementById("rc-border-top").addEventListener("change", changedBorder);
+
-        document.getElementById("rc-border-bottom").addEventListener("change", changedBorder);
+    showDialogue('resize-sprite');
-    
+}
-        document.getElementById("rc-width").addEventListener("change", changedSize);
+
-        document.getElementById("rc-height").addEventListener("change", changedSize);
+function initResizeSpriteInputs() {
-    
+    document.getElementById("rs-width").value = layers[0].canvasSize[0];
-        document.getElementById("resize-canvas-confirm").addEventListener("click", resizeCanvas);
+    document.getElementById("rs-height").value = layers[0].canvasSize[1];
-        console.log("Pivot selezionato: " + currentPivotObject);
+
-        */
+    document.getElementById("rs-width-percentage").value = 100;
-    }
+    document.getElementById("rs-height-percentage").value = 100;
+
+    document.getElementById("rs-keep-ratio").checked = true;
+
+    document.getElementById("rs-width").addEventListener("change", changedWidth);
+    document.getElementById("rs-height").addEventListener("change", changedHeight);
+    document.getElementById("rs-width-percentage").addEventListener("change", changedWidthPercentage);
+    document.getElementById("rs-height-percentage").addEventListener("change", changedHeightPercentage);
+
+    document.getElementById("resize-sprite-confirm").addEventListener("click", resizeSprite);
+    document.getElementById("rs-keep-ratio").addEventListener("click", toggleRatio);
+}
+
+function resizeSprite() {
+
+}
+
+function changedWidth(event) {
+    let oldValue = data.width;
+    let ratio;
+    let percentageRatio;
+    data.width = event.target.value;
+    delta = data.width - oldValue;
+
+    ratio = data.width / oldValue;
+
+    if (keepRatio) {
+        document.getElementById("rs-height").value = data.width / currentRatio;
+        document.getElementById("rs-height-percentage").value = (data.width * 100) / startData.width;
+    }
+
+    document.getElementById("rs-width-percentage").value = (data.width * 100) / startData.width;
+}
+
+function changedHeight(event) {
+    let oldValue = data.height;
+    let ratio;
+
+    data.height = event.target.value;
+    delta = data.height - oldValue;
+
+    ratio = data.height / oldValue;
+
+    if (keepRatio) {
+        document.getElementById("rs-width").value = data.height * currentRatio;
+        document.getElementById("rs-width-percentage").value = (data.height * 100) / startData.height;
+    }
+
+    document.getElementById("rs-height-percentage").value = (data.height * 100) / startData.height;
+}
+
+function changedWidthPercentage(event) {
+    let oldValue = data.widthPercentage;
+    let ratio;
+
+    data.widthPercentage = event.target.value;
+    delta = data.widthPercentage - oldValue;
+
+    ratio = data.widthPercentage / oldValue;
+
+    if (keepRatio) {
+        document.getElementById("rs-height-percentage").value = data.widthPercentage / currentRatio;
+        document.getElementById("rs-height").value *= ratio;
+    }
+
+    document.getElementById("rs-width").value *= ratio;
+}
+
+function changedHeightPercentage(event) {
+    let oldValue = data.heightPercentage;
+    let ratio;
+
+    data.heightPercentage = event.target.value;
+    delta = data.heightPercentage - oldValue;
+
+    ratio = data.heightPercentage / oldValue;
+
+    if (keepRatio) {
+        document.getElementById("rs-width-percentage").value = data.heightPercentage * currentRatio;
+        document.getElementById("rs-width").value *= ratio;
+    }
+
+    document.getElementById("rs-height").value *= ratio;
+}
+
+function toggleRatio(event) {
+    keepRatio = !keepRatio;
+    console.log(keepRatio);
+}

views/pixel-editor.hbs

@@ -253,13 +253,14 @@
                 <button id="create-button" class="default">Create</button>
             </div>
         </div>
+
         <!--SPRITE RESIZE-->
         <div id = "resize-sprite">
             <button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
             <h1>Resize sprite</h1>
             <!-- SIZE-->
-            <span id = "rc-size-menu">
+            <h2>New size</h2>
-                <h2>New size</h2>
+            <span id = "rs-size-menu">
                 <div>
                     <span>
                         Width: <input id="rs-width" type="number" default="0" step="1" 
@@ -273,30 +274,26 @@
                 </div>
             </span>        
             <!--BORDERS-->
-            <span id = "borders-menu">
+            <h2>Resize percentages</h2>
-                <h2>Resize percentages</h2>
+            <span id = "rs-percentage-menu">
                 <div>
                     <span>
-                        Left: <input id="rs-border-left" type="number" default="0" step="1" 
+                        Width <input id="rs-width-percentage" type="number" default="0" step="1" 
-                        value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
+                        value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/> %
                     </span>
                     
                     <span>
-                        Right: <input id="rs-border-right" type="number" default="0" step="1" 
+                        Height <input id="rs-height-percentage" type="number" default="0" step="1" 
-                        value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
+                        value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/> %
-                    </span>
-                    
-                    <span>
-                        Top: <input id="rs-border-top" type="number" default="0" step="1" 
-                        value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
-                    </span>
-                    
-                    <span>
-                        Bottom: <input id="rs-border-bottom" default="0" step="1" type="number" 
-                        value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
                     </span>
                 </div>
-                <button id = "resize-sprite-confirm">Resize sprite</button>
+                <div id = "rs-ratio-div">
+                    <span>
+                        Keep current ratio <input type = "checkbox" id = "rs-keep-ratio"/>
+                    </span>
+                    </br>
+                    <button id = "resize-sprite-confirm">Resize sprite</button>
+                </div>
             </span>            
         </div>