mirror/pixel-editor
1
0
Fork 0
mirror of https://github.com/lospec/pixel-editor.git synced 2023-08-10 21:12:51 +03:00
Code Issues Projects Releases Wiki Activity

Added resize sprite data management

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
css/pixel-editor.scss
View File

@ -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;

125
js/_resizeSprite.js
View File

@ -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() {
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("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;
}
function initResizeSpriteInputs() {
/*
document.getElementById("rc-width").value = layers[0].canvasSize[0];
document.getElementById("rc-height").value = layers[0].canvasSize[1];
document.getElementById("rs-width-percentage").value = (data.width * 100) / startData.width;
}
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);
function changedHeight(event) {
let oldValue = data.height;
let ratio;
document.getElementById("rc-width").addEventListener("change", changedSize);
document.getElementById("rc-height").addEventListener("change", changedSize);
data.height = event.target.value;
delta = data.height - oldValue;
document.getElementById("resize-canvas-confirm").addEventListener("click", resizeCanvas);
console.log("Pivot selezionato: " + currentPivotObject);
*/
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);
}

29
views/pixel-editor.hbs
View File

@ -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"
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>
<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>