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 input fetching and validation

Browse Source
This commit is contained in:
unsettledgames
2020-09-13 11:58:46 +02:00
parent 7583adb3d1
commit 3cf72dd928
3 changed files with 55 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
js/_resizeCanvas.js
View File

@ -1,46 +1,61 @@
let resizeCanvasContainer = document.getElementById("resize-canvas");
let pivot = "middle";
let resizeCanvasInitialized = false;
let borders = {left: 0, right: 0, top: 0, bottom: 0};
function openResizeCanvasWindow() {
if (!resizeCanvasInitialized) {
resizeCanvasInitialized = true;
initResizeCanvasInputs();
}
showDialogue('resize-canvas');
console.log("aperta");
initButtons();
}
function initButtons() {
function initResizeCanvasInputs() {
let buttons = document.getElementsByClassName("pivot-button");
console.log("length: " + buttons.length);
for (let i=0; i<buttons.length; i++) {
buttons[i].addEventListener("click", changePivot);
}
document.getElementById("resize-canvas-confirm").addEventListener("click", resizeCanvas);
}
function resizeCanvas(event) {
resizeCanvasUpdateBorders();
}
function resizeCanvasUpdateBorders() {
console.log(document.getElementById("rc-border-left").value);
// Getting input
borders.left = document.getElementById("rc-border-left").value;
borders.right = document.getElementById("rc-border-right").value;
borders.top = document.getElementById("rc-border-top").value;
borders.bottom = document.getElementById("rc-border-bottom").value;
// Validating input
borders.left == "" ? borders.left = 0 : borders.left = Math.round(parseInt(borders.left));
borders.right == "" ? borders.right = 0 : borders.right = Math.round(parseInt(borders.right));
borders.top == "" ? borders.top = 0 : borders.top = Math.round(parseInt(borders.top));
borders.bottom == "" ? borders.bottom = 0 : borders.bottom = Math.round(parseInt(borders.bottom));
console.log(borders);
}
function changePivot(event) {
console.log("sas");
console.log(event.target);
pivot = event.target.getAttribute("value");
}
// Use a dialogue
// Let the user specify data
// Borders
// Pivot
// Apply the new sizing
// Move the images on the layers to fit what the user actually decided
// Function to handle dropdown menu for pivots
// Open when clicking on the button
// Save the chosen pivot
// Close the menu
// Function to retrieve data from the input field
// Store the data in the form into variables
// Call the function to resize the canvases
// Function to actually resize the canvases
// Save all imageDatas
// Resize the canvases
// Clear the canvases
// Function to place the imageDatas as specified in the pivot section
// Put the imageDatas in the right position
// Put the imageDatas in the right position
// Must crop the imageDatas if the canvas has being reduced