Added file option to import image to current layer

This commit is contained in:
NSSure 2022-10-21 03:52:55 -04:00
parent 14d5048756
commit 02806c7efa
10 changed files with 111 additions and 1 deletions

13
css/_import-image.scss Normal file
View File

@ -0,0 +1,13 @@
#import-image {
.import-image-file {
button {
margin: 0;
}
}
.import-image-checkbox {
height: 50px;
display: flex;
align-items: center;
}
}

View File

@ -17,4 +17,5 @@
@import 'palette-editor'; @import 'palette-editor';
@import 'splash-page'; @import 'splash-page';
@import "export"; @import "export";
@import "save-project"; @import "save-project";
@import "import-image";

View File

@ -3,9 +3,11 @@ const FileManager = (() => {
// Binding the browse holder change event to file loading // Binding the browse holder change event to file loading
const browseHolder = document.getElementById('open-image-browse-holder'); const browseHolder = document.getElementById('open-image-browse-holder');
const browsePaletteHolder = document.getElementById('load-palette-browse-holder'); const browsePaletteHolder = document.getElementById('load-palette-browse-holder');
const importImageHolder = document.getElementById('import-image-browse-holder');
Events.on('change', browseHolder, loadFile); Events.on('change', browseHolder, loadFile);
Events.on('change', browsePaletteHolder, loadPalette); Events.on('change', browsePaletteHolder, loadPalette);
Events.on('change', importImageHolder, loadImage);
Events.on('click', 'export-confirm', exportProject); Events.on('click', 'export-confirm', exportProject);
function openSaveProjectWindow() { function openSaveProjectWindow() {
@ -270,11 +272,74 @@ const FileManager = (() => {
browsePaletteHolder.value = null; browsePaletteHolder.value = null;
} }
/**
* Displays the import image window to allow for configurations
* to be made be the image is imported.
*/
function openImportImageWindow() {
Events.on("click", "select-image", () => document.getElementById('import-image-browse-holder')?.click());
Events.on("click", "import-image-confirm", importImage);
Dialogue.showDialogue('import-image', false);
}
/**
* Loads the image and draws it to the current canvas layer. Called when
* the import image window is finalized.
*/
function importImage() {
if (!importImageHolder.files || importImageHolder.files.length === 0) {
alert('Please select a file before attempting to import.')
return;
}
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) {
var img = new Image();
img.onload = () => {
let shouldResizeCanvas = document.getElementById('import-image-match-size').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)
Dialogue.closeDialogue();
};
img.src = e.target.result;
};
fileReader.readAsDataURL(importImageHolder.files[0]);
}
/**
* Called when the import image holder file input fires an onchange event.
*/
function loadImage() {
if (importImageHolder.files && importImageHolder.files[0]) {
let fileName = document.getElementById("import-image-browse-holder").value;
let extension = Util.getFileExtension(fileName);
// Display the file name in the window.
document.getElementById('import-image-name').innerText = importImageHolder.files[0].name;
// Checking if the extension is supported
if (extension !== 'png') {
alert('Only PNG files are currently allowed to be imported at this time.')
importImageHolder.value = null;
}
}
}
return { return {
saveProject, saveProject,
exportProject, exportProject,
openPixelExportWindow, openPixelExportWindow,
openSaveProjectWindow, openSaveProjectWindow,
openImportImageWindow,
open open
} }
})(); })();

View File

@ -43,6 +43,9 @@ const TopMenuModule = (() => {
case 'Open': case 'Open':
Events.on('click', currSubmenuButton, FileManager.open); Events.on('click', currSubmenuButton, FileManager.open);
break; break;
case 'Import':
Events.on('click', currSubmenuButton, FileManager.openImportImageWindow);
break;
case 'Export': case 'Export':
Events.on('click', currSubmenuButton, FileManager.openPixelExportWindow); Events.on('click', currSubmenuButton, FileManager.openPixelExportWindow);
break; break;

View File

@ -130,4 +130,8 @@ class Util {
static cursorInCanvas(canvasSize, mousePos) { static cursorInCanvas(canvasSize, mousePos) {
return mousePos[0] >= 0 && mousePos[1] >= 0 && canvasSize[0] > mousePos[0] && canvasSize[1] > mousePos[1]; return mousePos[0] >= 0 && mousePos[1] >= 0 && canvasSize[0] > mousePos[0] && canvasSize[1] > mousePos[1];
} }
static getFileExtension(fileName) {
return (fileName.substring(fileName.lastIndexOf('.')+1, fileName.length) || fileName).toLowerCase();
}
} }

1
package-lock.json generated
View File

@ -7,6 +7,7 @@
"": { "": {
"name": "pixel-editor", "name": "pixel-editor",
"version": "1.0.0", "version": "1.0.0",
"license": "GPL-3.0-only",
"dependencies": { "dependencies": {
"concurrently": "^6.0.2", "concurrently": "^6.0.2",
"express": "^4.16.4", "express": "^4.16.4",

View File

@ -3,5 +3,6 @@
<a id="save-project-link-holder" href="#">dl</a> <a id="save-project-link-holder" href="#">dl</a>
<input id="open-image-browse-holder" type="file" accept="image/png, image/gif, .lpe" /> <input id="open-image-browse-holder" type="file" accept="image/png, image/gif, .lpe" />
<input id="load-palette-browse-holder" type="file" accept="image/png, image/gif" /> <input id="load-palette-browse-holder" type="file" accept="image/png, image/gif" />
<input id="import-image-browse-holder" type="file" accept="image/png" />
<canvas id="load-palette-canvas-holder"></canvas> <canvas id="load-palette-canvas-holder"></canvas>
</div> </div>

View File

@ -38,6 +38,7 @@
{{> settings}} {{> settings}}
{{> pixel-export}} {{> pixel-export}}
{{> save-project}} {{> save-project}}
{{> import-image}}
</div> </div>
<script src="pixel-editor.js"></script> <script src="pixel-editor.js"></script>

View File

@ -6,6 +6,7 @@
<li><button>New</button></li> <li><button>New</button></li>
<li><button>Save project</button></li> <li><button>Save project</button></li>
<li><button>Open</button></li> <li><button>Open</button></li>
<li><button>Import</button></li>
<li><button id="export-button" class="disabled">Export</button></li> <li><button id="export-button" class="disabled">Export</button></li>
<li><a href="https://lospec.com/pixel-editor">Exit</a></li> <li><a href="https://lospec.com/pixel-editor">Exit</a></li>
</ul> </ul>

View File

@ -0,0 +1,20 @@
<div id="import-image" class="import-image">
<button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
<h1>Import Image</h1>
<p>Imports image into the current selected layer.</p>
<div class="import-image-file">
<button class="default" id="select-image">Select image</button>
<span id="import-image-name"></span>
</div>
<div class="import-image-checkbox">
<span>Match canvas to image size <input type="checkbox" id="import-image-match-size"/></span>
</div>
<div class="popup-actions">
<button class="default" id="import-image-confirm">Import</button>
</div>
</div>