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;
-// Function to show dialogue
+let currentRatio;
-    // New size
+let data = {width: 0, height: 0, widthPercentage: 100, heightPercentage: 100};
-    // Percentage change
+let startData = {width: 0, height:0, widthPercentage: 100, heightPercentage: 100};
-    // Keep ratio checkbox
-    // Choose resize algorithm
-    // Confirm
 
 function openResizeSpriteWindow() {
     if (!resizeSpriteInitialized) {
         resizeSpriteInitialized = true;
         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;
+
     showDialogue('resize-sprite');
 }
 
 function initResizeSpriteInputs() {
-    /*
+    document.getElementById("rs-width").value = layers[0].canvasSize[0];
-        document.getElementById("rc-width").value = layers[0].canvasSize[0];
+    document.getElementById("rs-height").value = layers[0].canvasSize[1];
-        document.getElementById("rc-height").value = layers[0].canvasSize[1];
 
-        document.getElementById("rc-border-left").addEventListener("change", changedBorder);
+    document.getElementById("rs-width-percentage").value = 100;
-        document.getElementById("rc-border-right").addEventListener("change", changedBorder);
+    document.getElementById("rs-height-percentage").value = 100;
-        document.getElementById("rc-border-top").addEventListener("change", changedBorder);
-        document.getElementById("rc-border-bottom").addEventListener("change", changedBorder);
 
-        document.getElementById("rc-width").addEventListener("change", changedSize);
+    document.getElementById("rs-keep-ratio").checked = true;
-        document.getElementById("rc-height").addEventListener("change", changedSize);
 
-        document.getElementById("resize-canvas-confirm").addEventListener("click", resizeCanvas);
+    document.getElementById("rs-width").addEventListener("change", changedWidth);
-        console.log("Pivot selezionato: " + currentPivotObject);
+    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>
+            <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>
+            <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>
+                <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>