Added resize sprite data management

This commit is contained in:
unsettledgames 2020-09-19 17:04:46 +02:00
parent e213acea76
commit e9277db48c
3 changed files with 176 additions and 58 deletions

View File

@ -947,7 +947,7 @@ svg {
display: none; display: none;
} }
#resize-canvas { #resize-canvas, #resize-sprite {
display:flex; display:flex;
position:relative; position:relative;
flex-wrap:wrap; 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; display:flex;
position:relative; position:relative;
flex-wrap: wrap; flex-wrap: wrap;
@ -1026,7 +1026,7 @@ svg {
transform: scale(0.95); transform: scale(0.95);
} }
input { input[type=number] {
position:relative; position:relative;
margin-left:10px; margin-left:10px;
height:15px; height:15px;
@ -1034,8 +1034,8 @@ svg {
padding:8px; 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; -webkit-appearance: none;
margin: 0; margin: 0;
} }
@ -1056,9 +1056,25 @@ svg {
} }
} }
#rc-size-menu { #rs-percentage-menu {
width: 400px;
span { 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); background: color(button);
border: none; border: none;
font-size:18px; font-size:18px;

View File

@ -1,34 +1,117 @@
let resizeSpriteInitialized = false; 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() { function openResizeSpriteWindow() {
if (!resizeSpriteInitialized) { if (!resizeSpriteInitialized) {
resizeSpriteInitialized = true; 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;
showDialogue('resize-sprite'); showDialogue('resize-sprite');
} }
function initResizeSpriteInputs() { 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);
} }

View File

@ -253,13 +253,14 @@
<button id="create-button" class="default">Create</button> <button id="create-button" class="default">Create</button>
</div> </div>
</div> </div>
<!--SPRITE RESIZE--> <!--SPRITE RESIZE-->
<div id = "resize-sprite"> <div id = "resize-sprite">
<button class="close-button">{{svg "x.svg" width="20" height="20"}}</button> <button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
<h1>Resize sprite</h1> <h1>Resize sprite</h1>
<!-- SIZE--> <!-- SIZE-->
<span id = "rc-size-menu">
<h2>New size</h2> <h2>New size</h2>
<span id = "rs-size-menu">
<div> <div>
<span> <span>
Width: <input id="rs-width" type="number" default="0" step="1" Width: <input id="rs-width" type="number" default="0" step="1"
@ -273,30 +274,26 @@
</div> </div>
</span> </span>
<!--BORDERS--> <!--BORDERS-->
<span id = "borders-menu">
<h2>Resize percentages</h2> <h2>Resize percentages</h2>
<span id = "rs-percentage-menu">
<div> <div>
<span> <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>
<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> </span>
</div> </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> <button id = "resize-sprite-confirm">Resize sprite</button>
</div>
</span> </span>
</div> </div>