mirror of
https://github.com/lospec/pixel-editor.git
synced 2023-08-10 21:12:51 +03:00
Added resize sprite data management
This commit is contained in:
unsettledgames
parent
e213acea76
commit
e9277db48c
|
|
@ -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::-webkit-inner-spin-button {
|
||||
input[type=number]::-webkit-outer-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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
// New size
|
||||
// Percentage change
|
||||
// Keep ratio checkbox
|
||||
// Choose resize algorithm
|
||||
// Confirm
|
||||
|
||||
function openResizeSpriteWindow() {
|
||||
if (!resizeSpriteInitialized) {
|
||||
resizeSpriteInitialized = true;
|
||||
initResizeSpriteInputs();
|
||||
}
|
||||
showDialogue('resize-sprite');
|
||||
function openResizeSpriteWindow() {
|
||||
if (!resizeSpriteInitialized) {
|
||||
resizeSpriteInitialized = true;
|
||||
initResizeSpriteInputs();
|
||||
}
|
||||
|
||||
function initResizeSpriteInputs() {
|
||||
/*
|
||||
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-right").addEventListener("change", changedBorder);
|
||||
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("rc-height").addEventListener("change", changedSize);
|
||||
|
||||
document.getElementById("resize-canvas-confirm").addEventListener("click", resizeCanvas);
|
||||
console.log("Pivot selezionato: " + currentPivotObject);
|
||||
*/
|
||||
}
|
||||
|
||||
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("rs-height").value = layers[0].canvasSize[1];
|
||||
|
||||
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);
|
||||
}
|
||||
|
|
@ -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"
|
||||
value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
|
||||
Width <input id="rs-width-percentage" type="number" default="0" step="1"
|
||||
value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/> %
|
||||
</span>
|
||||
|
||||
<span>
|
||||
Right: <input id="rs-border-right" type="number" default="0" step="1"
|
||||
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"/>
|
||||
Height <input id="rs-height-percentage" type="number" default="0" step="1"
|
||||
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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user