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 ability to select import position

Browse Source
This commit is contained in:
NSSure
2022-10-22 05:46:48 -04:00
parent eb139ef8e7
commit b8d1f11f93
5 changed files with 204 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
js/FileManager.js
View File

@ -272,6 +272,10 @@ const FileManager = (() => {
browsePaletteHolder.value = null;
}
currentImportPivotElement = undefined;
currentImportPivotPosition = 'middle';
isImportWindowInitialized = false;
/**
* Displays the import image window to allow for configurations
* to be made be the image is imported.
@ -279,11 +283,25 @@ const FileManager = (() => {
function openImportImageWindow() {
// Reset window values.
importImageHolder.value = null;
document.getElementById('import-image-match-size').checked = false;
document.getElementById('import-image-update-palette').checked = false;
document.getElementById('import-image-name').innerText = "";
Events.on("click", "select-image", () => document.getElementById('import-image-browse-holder')?.click());
Events.on("click", "import-image-confirm", importImage);
// Workaround to prevent events from firing twice for the import window.
if (!this.isImportWindowInitialized) {
// Getting the pivot buttons and setting the default pivot selection.
let pivotButtons = document.getElementsByClassName("pivot-button");
this.currentImportPivotElement = document.querySelector('.import-image-location-pivot .rc-selected-pivot');
// Add event handlers for each pivot.
for (let i=0; i < pivotButtons.length; i++) {
Events.on("click", pivotButtons[i], onImportPivotChanged.bind(this));
}
Events.on("click", "select-image", () => document.getElementById('import-image-browse-holder')?.click());
Events.on("click", "import-image-confirm", importImage);
}
Dialogue.showDialogue('import-image', false);
}
@ -301,17 +319,25 @@ const FileManager = (() => {
var fileReader = new FileReader();
// Once the image has been loaded draw the image to the current layer at the top right.
fileReader.onload = function(e) {
fileReader.onload = (e) => {
var img = new Image();
img.onload = () => {
let shouldResizeCanvas = document.getElementById('import-image-match-size').checked;
let shouldImportColors = document.getElementById('import-image-update-palette').checked;
// Resize the canvas to the image size if the flag was set to true.
if (shouldResizeCanvas) {
currFile.resizeCanvas(null, { x: img.width, y: img.height }, null, false);
}
currFile.currentLayer.context.drawImage(img, 0, 0)
// Calculate pivot offset and draw the imported image. Ensure the pivot position accounts for the imported images dimensions.
let offset = Util.getPivotPosition(this.currentImportPivotPosition, currFile.canvasSize[0], currFile.canvasSize[1], img.width, img.height);
currFile.currentLayer.context.drawImage(img, offset.x, offset.y);
if (shouldImportColors) {
ColorModule.updatePaletteFromLayers();
}
Dialogue.closeDialogue();
};
@ -340,6 +366,19 @@ const FileManager = (() => {
}
}
/**
* Called when the selected pivot for the import image is changed.
* @param {*} event The event for the selected pivot.
*/
function onImportPivotChanged(event) {
this.currentImportPivotPosition = event.target.getAttribute("value");
// Setting the selected class
this.currentImportPivotElement.classList.remove("rc-selected-pivot");
this.currentImportPivotElement = event.target;
this.currentImportPivotElement.classList.add("rc-selected-pivot");
}
return {
saveProject,
exportProject,