mirror
/
pixel-editor
mirror of https://github.com/lospec/pixel-editor.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fixed bug in canvas resizing when resizing sprite

This commit is contained in:
unsettledgames 2020-09-21 10:39:37 +02:00
parent e9277db48c
commit 2a9acebd2f
3 changed files with 93 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -45,6 +45,7 @@ Suggestions / Planned features:
- Update pivot buttons when resizing canvas
- Update borders by dragging the canvas' edges with the mouse when resizing canvas
- Move the canvases so they're centered after resizing the canvas (maybe a .center() method in layer class)
- Trim canvas
## How to Contribute

24
js/_resizeCanvas.js
View File

@ -1,5 +1,5 @@
let resizeCanvasContainer = document.getElementById("resize-canvas");
let pivot = "middle";
let rcPivot = "middle";
let currentPivotObject;
let resizeCanvasInitialized = false;
let borders = {left: 0, right: 0, top: 0, bottom: 0};
@ -25,26 +25,26 @@ function initResizeCanvasInputs() {
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-border-left").addEventListener("change", rcChangedBorder);
document.getElementById("rc-border-right").addEventListener("change", rcChangedBorder);
document.getElementById("rc-border-top").addEventListener("change", rcChangedBorder);
document.getElementById("rc-border-bottom").addEventListener("change", rcChangedBorder);
document.getElementById("rc-width").addEventListener("change", changedSize);
document.getElementById("rc-height").addEventListener("change", changedSize);
document.getElementById("rc-width").addEventListener("change", rcChangedSize);
document.getElementById("rc-height").addEventListener("change", rcChangedSize);
document.getElementById("resize-canvas-confirm").addEventListener("click", resizeCanvas);
console.log("Pivot selezionato: " + currentPivotObject);
}
function changedBorder(event) {
function rcChangedBorder(event) {
rcUpdateBorders();
document.getElementById("rc-width").value = parseInt(layers[0].canvasSize[0]) + borders.left + borders.right;
document.getElementById("rc-height").value = parseInt(layers[0].canvasSize[1]) + borders.top + borders.bottom;
}
function changedSize(event) {
function rcChangedSize(event) {
let widthOffset = Math.abs(document.getElementById("rc-width").value) - layers[0].canvasSize[0];
let heightOffset = Math.abs(document.getElementById("rc-height").value) - layers[0].canvasSize[1];
@ -75,7 +75,7 @@ function resizeCanvas(event, size) {
document.getElementById("rc-width").value = size.x;
document.getElementById("rc-height").value = size.y;
changedSize();
rcChangedSize();
}
rcUpdateBorders();
@ -116,7 +116,7 @@ function resizeCanvas(event, size) {
fillCheckerboard();
// Put the imageDatas in the right position
switch (pivot)
switch (rcPivot)
{
case 'topleft':
leftOffset = 0;
@ -185,7 +185,7 @@ function rcUpdateBorders() {
}
function changePivot(event) {
pivot = event.target.getAttribute("value");
rcPivot = event.target.getAttribute("value");
// Setting the selected class
currentPivotObject.classList.remove("rc-selected-pivot");

91
js/_resizeSprite.js
View File

@ -40,75 +40,144 @@ function initResizeSpriteInputs() {
}
function resizeSprite() {
let newWidth, newHeight;
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;
}
newWidth = data.width;
newHeight = data.height;
console.log(newWidth + ", " + newHeight);
// Resizing the canvas
resizeCanvas(null, {x: newWidth, y: newHeight});
// Get all the image datas
// Resize the canvases
// Resize the image datas
// Put the image datas on the new canvases
closeDialogue();
}
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 = data.width / currentRatio;
document.getElementById("rs-height-percentage").value = (data.width * 100) / startData.width;
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 = (data.width * 100) / startData.width;
document.getElementById("rs-width-percentage").value = newWidthPerc;
}
function changedHeight(event) {
let oldValue = data.height;
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 = data.height * currentRatio;
document.getElementById("rs-width-percentage").value = (data.height * 100) / startData.height;
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 = (data.height * 100) / startData.height;
document.getElementById("rs-height-percentage").value = newHeightPerc;
data.heightPercentage = newHeightPerc;
}
function changedWidthPercentage(event) {
let oldValue = data.widthPercentage;
let ratio;
let newWidth, newHeight, newHeightPerc;
data.widthPercentage = event.target.value;
delta = data.widthPercentage - oldValue;
ratio = data.widthPercentage / oldValue;
newHeight = document.getElementById("rs-height").value * ratio;
newHeightPerc = data.widthPercentage / currentRatio;
newWidth = document.getElementById("rs-width").value * ratio;
if (keepRatio) {
document.getElementById("rs-height-percentage").value = data.widthPercentage / currentRatio;
document.getElementById("rs-height").value *= ratio;
document.getElementById("rs-height-percentage").value = newHeightPerc;
data.heightPercentage = newHeightPerc;
document.getElementById("rs-height").value = newHeight
data.height = newHeight;
}
document.getElementById("rs-width").value *= ratio;
document.getElementById("rs-width").value = newWidth;
data.width = newWidth;
}
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 = document.getElementById("rs-width").value * ratio;
newWidthPerc = data.heightPercentage * currentRatio;
newHeight = document.getElementById("rs-height").value * ratio;
if (keepRatio) {
document.getElementById("rs-width-percentage").value = data.heightPercentage * currentRatio;
document.getElementById("rs-width").value *= ratio;
data.widthPercentage = newWidthPerc;
document.getElementById("rs-width").value = newWidth;
data.width = newWidth;
}
document.getElementById("rs-height").value *= ratio;
document.getElementById("rs-height").value = newHeight;
data.height = newHeight;
}
function toggleRatio(event) {