pixel-editor/js/_resizeSprite.js

296 lines
9.1 KiB
JavaScript
Raw Normal View History

/* This scripts contains all the code used to handle the sprite scaling */
// Should I keep the sprite ratio?
2020-09-19 18:04:46 +03:00
let keepRatio = true;
// Used to store the current ratio
2020-09-19 18:04:46 +03:00
let currentRatio;
// The currenty selected resizing algorithm (nearest-neighbor or bilinear-interpolation)
let currentAlgo = 'nearest-neighbor';
// Current resize data
2020-09-19 18:04:46 +03:00
let data = {width: 0, height: 0, widthPercentage: 100, heightPercentage: 100};
// Start resize data
2020-09-19 18:04:46 +03:00
let startData = {width: 0, height:0, widthPercentage: 100, heightPercentage: 100};
2020-09-18 16:22:10 +03:00
/** Opens the sprite resizing window
*
*/
2020-09-19 18:04:46 +03:00
function openResizeSpriteWindow() {
// Inits the sprie resize inputs
initResizeSpriteInputs();
2020-09-19 18:04:46 +03:00
// Computing the current ratio
2020-09-19 18:04:46 +03:00
currentRatio = layers[0].canvasSize[0] / layers[0].canvasSize[1];
console.log("Current ratio: " + currentRatio);
// Initializing the input fields
2020-09-19 18:04:46 +03:00
data.width = layers[0].canvasSize[0];
data.height = layers[1].canvasSize[1];
startData.width = parseInt(data.width);
startData.height = parseInt(data.height);
startData.heightPercentage = 100;
startData.widthPercentage = 100;
2020-09-19 18:04:46 +03:00
// Opening the pop up now that it's ready
2020-09-19 18:04:46 +03:00
showDialogue('resize-sprite');
}
/** Initalizes the input values and binds the elements to their events
*
*/
2020-09-19 18:04:46 +03:00
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);
document.getElementById("resize-algorithm-combobox").addEventListener("change", changedAlgorithm);
2020-09-19 18:04:46 +03:00
}
/** Resizes (scales) the sprite
*
* @param {*} event
* @param {*} ratio Keeps infos about the x ratio and y ratio
*/
function resizeSprite(event, ratio) {
// Old data
let oldWidth, oldHeight;
// New data
let newWidth, newHeight;
// Current imageDatas
let rsImageDatas = [];
// Index that will be used a few lines below
2020-09-21 13:33:45 +03:00
let layerIndex = 0;
// Copy of the imageDatas that will be stored in the history
let imageDatasCopy = [];
oldWidth = layers[0].canvasSize[0];
oldHeight = layers[1].canvasSize[1];
rcPivot = "middle";
// Updating values if the user didn't press enter
switch (document.activeElement.id) {
case "rs-width-percentage":
changedWidthPercentage();
break;
case "rs-width":
changedWidth();
break;
case "rs-height-percentage":
changedHeightPercentage();
break;
case "rs-height":
changedHeight();
break;
default:
// In this case everything has been updated correctly
break;
}
// Computing newWidth and newHeight
if (ratio == null) {
newWidth = data.width;
newHeight = data.height;
}
else {
newWidth = layers[0].canvasSize[0] * ratio[0];
newHeight = layers[1].canvasSize[1] * ratio[1];
}
2020-09-21 13:33:45 +03:00
// Get all the image datas
for (let i=0; i<layers.length; i++) {
if (layers[i].menuEntry != null) {
rsImageDatas.push(layers[i].context.getImageData(
2020-09-21 13:33:45 +03:00
0, 0, layers[0].canvasSize[0], layers[0].canvasSize[1])
);
}
}
2021-04-29 13:50:59 +03:00
// event is null when the user is undoing
if (event != null) {
// Copying the image data
imageDatasCopy = rsImageDatas.slice();
// Saving the history
new HistoryStateResizeSprite(newWidth / oldWidth, newHeight / oldHeight, currentAlgo, imageDatasCopy);
}
// Resizing the canvas
resizeCanvas(null, {x: newWidth, y: newHeight});
2020-09-21 13:33:45 +03:00
// Put the image datas on the new canvases
2020-09-21 13:33:45 +03:00
for (let i=0; i<layers.length; i++) {
if (layers[i].menuEntry != null) {
layers[i].context.putImageData(
resizeImageData(rsImageDatas[layerIndex], newWidth, newHeight, currentAlgo), 0, 0
2020-09-21 13:33:45 +03:00
);
layers[i].updateLayerPreview();
2020-09-21 13:33:45 +03:00
layerIndex++;
}
}
// Updating start values when I finish scaling the sprite
// OPTIMIZABLE? Can't I just assign data to startData? Is js smart enough to understand?
if (ratio == null) {
startData.width = data.width;
startData.height = data.height;
}
else {
startData.width = layers[0].canvasSize[0];
startData.height = layers[0].canvasSize[1];
}
startData.widthPercentage = 100;
startData.heightPercentage = 100;
closeDialogue();
2020-09-19 18:04:46 +03:00
}
/* Trust me, the math for the functions below works. If you want to optimize them feel free to have a look, though */
/** Fired when the input field for width is changed. Updates th othe input fields consequently
*
* @param {*} event
*/
2020-09-19 18:04:46 +03:00
function changedWidth(event) {
let oldValue = data.width;
let ratio;
let percentageRatio;
let newHeight, newHeightPerc, newWidthPerc;
2020-09-19 18:04:46 +03:00
data.width = event.target.value;
delta = data.width - oldValue;
ratio = data.width / oldValue;
newHeight = data.width / currentRatio;
newHeightPerc = (newHeight * 100) / startData.height;
newWidthPerc = (data.width * 100) / startData.width;
2020-09-19 18:04:46 +03:00
if (keepRatio) {
document.getElementById("rs-height").value = newHeight;
data.height = newHeight;
document.getElementById("rs-height-percentage").value = newHeightPerc;
data.heightPercentage = newHeightPerc;
2020-09-19 18:04:46 +03:00
}
document.getElementById("rs-width-percentage").value = newWidthPerc;
2020-09-19 18:04:46 +03:00
}
/**Fired when the input field for width is changed. Updates the other input fields consequently
*
* @param {*} event
*/
2020-09-19 18:04:46 +03:00
function changedHeight(event) {
let oldValue = 100;
2020-09-19 18:04:46 +03:00
let ratio;
let newWidth, newWidthPerc, newHeightPerc;
2020-09-19 18:04:46 +03:00
data.height = event.target.value;
delta = data.height - oldValue;
ratio = data.height / oldValue;
newWidth = data.height * currentRatio;
newWidthPerc = (newWidth * 100) / startData.width;
newHeightPerc = (data.height * 100) / startData.height;
2020-09-19 18:04:46 +03:00
if (keepRatio) {
document.getElementById("rs-width").value = newWidth;
data.width = newWidth;
document.getElementById("rs-width-percentage").value = newWidthPerc;
data.widthPercentage = newWidthPerc;
2020-09-19 18:04:46 +03:00
}
document.getElementById("rs-height-percentage").value = newHeightPerc;
data.heightPercentage = newHeightPerc;
2020-09-19 18:04:46 +03:00
}
/**Fired when the input field for width percentage is changed. Updates the other input fields consequently
*
* @param {*} event
*/
2020-09-19 18:04:46 +03:00
function changedWidthPercentage(event) {
let oldValue = 100;
2020-09-19 18:04:46 +03:00
let ratio;
let newWidth, newHeight, newHeightPerc;
2020-09-19 18:04:46 +03:00
data.widthPercentage = event.target.value;
delta = data.widthPercentage - oldValue;
ratio = data.widthPercentage / oldValue;
console.log("old value: " + oldValue + ", ratio: " + ratio);
newHeight = startData.height * ratio;
newHeightPerc = data.widthPercentage;
newWidth = startData.width * ratio;
2020-09-19 18:04:46 +03:00
if (keepRatio) {
document.getElementById("rs-height-percentage").value = newHeightPerc;
data.heightPercentage = newHeightPerc;
document.getElementById("rs-height").value = newHeight
data.height = newHeight;
2020-09-19 18:04:46 +03:00
}
document.getElementById("rs-width").value = newWidth;
data.width = newWidth;
2020-09-19 18:04:46 +03:00
}
/**Fired when the input field for height percentage is changed. Updates the other input fields consequently
*
* @param {*} event
*/
2020-09-19 18:04:46 +03:00
function changedHeightPercentage(event) {
let oldValue = data.heightPercentage;
let ratio;
let newHeight, newWidth, newWidthPerc;
2020-09-19 18:04:46 +03:00
data.heightPercentage = event.target.value;
delta = data.heightPercentage - oldValue;
ratio = data.heightPercentage / oldValue;
newWidth = startData.width * ratio;
newWidthPerc = data.heightPercentage;
newHeight = startData.height * ratio;
2020-09-19 18:04:46 +03:00
if (keepRatio) {
document.getElementById("rs-width-percentage").value = data.heightPercentage * currentRatio;
data.widthPercentage = newWidthPerc;
document.getElementById("rs-width").value = newWidth;
data.width = newWidth;
2020-09-19 18:04:46 +03:00
}
document.getElementById("rs-height").value = newHeight;
data.height = newHeight;
2020-09-19 18:04:46 +03:00
}
/** Toggles the keepRatio value (fired by the checkbox in the pop up window)
*
* @param {*} event
*/
2020-09-19 18:04:46 +03:00
function toggleRatio(event) {
keepRatio = !keepRatio;
}
/** Changes the scaling algorithm (fired by the combobox in the pop up window)
*
* @param {*} event
*/
function changedAlgorithm(event) {
currentAlgo = event.target.value;
2020-09-19 18:04:46 +03:00
}