mirror of
https://github.com/lospec/pixel-editor.git
synced 2023-08-10 21:12:51 +03:00
397 lines
12 KiB
JavaScript
397 lines
12 KiB
JavaScript
// REFACTOR: method of File class probably
|
|
|
|
/* This scripts contains all the code used to handle the sprite scaling */
|
|
// Should I keep the sprite ratio?
|
|
let keepRatio = true;
|
|
// Used to store the current ratio
|
|
let currentRatio;
|
|
// The currenty selected resizing algorithm (nearest-neighbor or bilinear-interpolation)
|
|
let currentAlgo = 'nearest-neighbor';
|
|
// Current resize data
|
|
let data = {width: 0, height: 0, widthPercentage: 100, heightPercentage: 100};
|
|
// Start resize data
|
|
let startData = {width: 0, height:0, widthPercentage: 100, heightPercentage: 100};
|
|
|
|
/** Opens the sprite resizing window
|
|
*
|
|
*/
|
|
function openResizeSpriteWindow() {
|
|
// Inits the sprie resize inputs
|
|
initResizeSpriteInputs();
|
|
|
|
// Computing the current ratio
|
|
currentRatio = layers[0].canvasSize[0] / layers[0].canvasSize[1];
|
|
|
|
console.log("Current ratio: " + currentRatio);
|
|
|
|
// Initializing the input fields
|
|
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;
|
|
|
|
// Opening the pop up now that it's ready
|
|
Dialogue.showDialogue('resize-sprite');
|
|
}
|
|
|
|
/** Initalizes the input values and binds the elements to their events
|
|
*
|
|
*/
|
|
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);
|
|
}
|
|
|
|
/** 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
|
|
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];
|
|
}
|
|
|
|
// Get all the image datas
|
|
for (let i=0; i<layers.length; i++) {
|
|
if (layers[i].menuEntry != null) {
|
|
rsImageDatas.push(layers[i].context.getImageData(
|
|
0, 0, layers[0].canvasSize[0], layers[0].canvasSize[1])
|
|
);
|
|
}
|
|
}
|
|
|
|
// event is null when the user is undoing
|
|
if (event != null) {
|
|
// Copying the image data
|
|
imageDatasCopy = rsImageDatas.slice();
|
|
// Saving the history
|
|
new HistoryState().ResizeSprite(newWidth / oldWidth, newHeight / oldHeight, currentAlgo, imageDatasCopy);
|
|
}
|
|
|
|
// Resizing the canvas
|
|
resizeCanvas(null, {x: newWidth, y: newHeight});
|
|
|
|
// Put the image datas on the new canvases
|
|
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
|
|
);
|
|
layers[i].updateLayerPreview();
|
|
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;
|
|
|
|
Dialogue.closeDialogue();
|
|
}
|
|
|
|
/* 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
|
|
*/
|
|
function changedWidth(event) {
|
|
let oldValue = data.width;
|
|
let ratio;
|
|
let percentageRatio;
|
|
let newHeight, newHeightPerc, newWidthPerc;
|
|
|
|
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;
|
|
|
|
if (keepRatio) {
|
|
document.getElementById("rs-height").value = newHeight;
|
|
data.height = newHeight;
|
|
|
|
document.getElementById("rs-height-percentage").value = newHeightPerc;
|
|
data.heightPercentage = newHeightPerc;
|
|
}
|
|
|
|
document.getElementById("rs-width-percentage").value = newWidthPerc;
|
|
}
|
|
|
|
/**Fired when the input field for width is changed. Updates the other input fields consequently
|
|
*
|
|
* @param {*} event
|
|
*/
|
|
function changedHeight(event) {
|
|
let oldValue = 100;
|
|
let ratio;
|
|
let newWidth, newWidthPerc, newHeightPerc;
|
|
|
|
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;
|
|
|
|
if (keepRatio) {
|
|
document.getElementById("rs-width").value = newWidth;
|
|
data.width = newWidth;
|
|
|
|
document.getElementById("rs-width-percentage").value = newWidthPerc;
|
|
data.widthPercentage = newWidthPerc;
|
|
}
|
|
|
|
document.getElementById("rs-height-percentage").value = newHeightPerc;
|
|
data.heightPercentage = newHeightPerc;
|
|
}
|
|
|
|
/**Fired when the input field for width percentage is changed. Updates the other input fields consequently
|
|
*
|
|
* @param {*} event
|
|
*/
|
|
function changedWidthPercentage(event) {
|
|
let oldValue = 100;
|
|
let ratio;
|
|
let newWidth, newHeight, newHeightPerc;
|
|
|
|
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;
|
|
|
|
if (keepRatio) {
|
|
document.getElementById("rs-height-percentage").value = newHeightPerc;
|
|
data.heightPercentage = newHeightPerc;
|
|
|
|
document.getElementById("rs-height").value = newHeight
|
|
data.height = newHeight;
|
|
}
|
|
|
|
document.getElementById("rs-width").value = newWidth;
|
|
data.width = newWidth;
|
|
}
|
|
|
|
/**Fired when the input field for height percentage is changed. Updates the other input fields consequently
|
|
*
|
|
* @param {*} event
|
|
*/
|
|
function changedHeightPercentage(event) {
|
|
let oldValue = data.heightPercentage;
|
|
let ratio;
|
|
let newHeight, newWidth, newWidthPerc;
|
|
|
|
data.heightPercentage = event.target.value;
|
|
delta = data.heightPercentage - oldValue;
|
|
|
|
ratio = data.heightPercentage / oldValue;
|
|
|
|
newWidth = startData.width * ratio;
|
|
newWidthPerc = data.heightPercentage;
|
|
newHeight = startData.height * ratio;
|
|
|
|
if (keepRatio) {
|
|
document.getElementById("rs-width-percentage").value = data.heightPercentage * currentRatio;
|
|
data.widthPercentage = newWidthPerc;
|
|
|
|
document.getElementById("rs-width").value = newWidth;
|
|
data.width = newWidth;
|
|
}
|
|
|
|
document.getElementById("rs-height").value = newHeight;
|
|
data.height = newHeight;
|
|
}
|
|
|
|
/** Toggles the keepRatio value (fired by the checkbox in the pop up window)
|
|
*
|
|
* @param {*} event
|
|
*/
|
|
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;
|
|
}
|
|
|
|
/** Resizes an imageData depending on the algorithm and on the new width and height
|
|
*
|
|
* @param {*} image The imageData to scale
|
|
* @param {*} width The new width of the imageData
|
|
* @param {*} height The new height of the imageData
|
|
* @param {*} algorithm Scaling algorithm chosen by the user in the dialogue
|
|
*/
|
|
function resizeImageData (image, width, height, algorithm) {
|
|
algorithm = algorithm || 'bilinear-interpolation'
|
|
|
|
let resize;
|
|
switch (algorithm) {
|
|
case 'nearest-neighbor': resize = nearestNeighbor; break
|
|
case 'bilinear-interpolation': resize = bilinearInterpolation; break
|
|
default: return image;
|
|
}
|
|
|
|
const result = new ImageData(width, height)
|
|
|
|
resize(image, result)
|
|
|
|
return result
|
|
}
|
|
|
|
|
|
/** Nearest neighbor algorithm to scale a sprite
|
|
*
|
|
* @param {*} src The source imageData
|
|
* @param {*} dst The destination imageData
|
|
*/
|
|
function nearestNeighbor (src, dst) {
|
|
let pos = 0
|
|
|
|
// Just applying the nearest neighbor algorithm
|
|
for (let y = 0; y < dst.height; y++) {
|
|
for (let x = 0; x < dst.width; x++) {
|
|
const srcX = Math.floor(x * src.width / dst.width)
|
|
const srcY = Math.floor(y * src.height / dst.height)
|
|
|
|
let srcPos = ((srcY * src.width) + srcX) * 4
|
|
|
|
dst.data[pos++] = src.data[srcPos++] // R
|
|
dst.data[pos++] = src.data[srcPos++] // G
|
|
dst.data[pos++] = src.data[srcPos++] // B
|
|
dst.data[pos++] = src.data[srcPos++] // A
|
|
}
|
|
}
|
|
}
|
|
|
|
/** Bilinear interpolation used to scale a sprite
|
|
*
|
|
* @param {*} src The source imageData
|
|
* @param {*} dst The destination imageData
|
|
*/
|
|
function bilinearInterpolation (src, dst) {
|
|
// Applying the bilinear interpolation algorithm
|
|
|
|
function interpolate (k, kMin, kMax, vMin, vMax) {
|
|
return Math.round((k - kMin) * vMax + (kMax - k) * vMin)
|
|
}
|
|
|
|
function interpolateHorizontal (offset, x, y, xMin, xMax) {
|
|
const vMin = src.data[((y * src.width + xMin) * 4) + offset]
|
|
if (xMin === xMax) return vMin
|
|
|
|
const vMax = src.data[((y * src.width + xMax) * 4) + offset]
|
|
return interpolate(x, xMin, xMax, vMin, vMax)
|
|
}
|
|
|
|
function interpolateVertical (offset, x, xMin, xMax, y, yMin, yMax) {
|
|
const vMin = interpolateHorizontal(offset, x, yMin, xMin, xMax)
|
|
if (yMin === yMax) return vMin
|
|
|
|
const vMax = interpolateHorizontal(offset, x, yMax, xMin, xMax)
|
|
return interpolate(y, yMin, yMax, vMin, vMax)
|
|
}
|
|
|
|
let pos = 0
|
|
|
|
for (let y = 0; y < dst.height; y++) {
|
|
for (let x = 0; x < dst.width; x++) {
|
|
const srcX = x * src.width / dst.width
|
|
const srcY = y * src.height / dst.height
|
|
|
|
const xMin = Math.floor(srcX)
|
|
const yMin = Math.floor(srcY)
|
|
|
|
const xMax = Math.min(Math.ceil(srcX), src.width - 1)
|
|
const yMax = Math.min(Math.ceil(srcY), src.height - 1)
|
|
|
|
dst.data[pos++] = interpolateVertical(0, srcX, xMin, xMax, srcY, yMin, yMax) // R
|
|
dst.data[pos++] = interpolateVertical(1, srcX, xMin, xMax, srcY, yMin, yMax) // G
|
|
dst.data[pos++] = interpolateVertical(2, srcX, xMin, xMax, srcY, yMin, yMax) // B
|
|
dst.data[pos++] = interpolateVertical(3, srcX, xMin, xMax, srcY, yMin, yMax) // A
|
|
}
|
|
}
|
|
}
|