From 02806c7efa1d60fb62afb71c6ef7a6712b0c0395 Mon Sep 17 00:00:00 2001 From: NSSure <19178714+NSSure@users.noreply.github.com> Date: Fri, 21 Oct 2022 03:52:55 -0400 Subject: [PATCH] Added file option to import image to current layer --- css/_import-image.scss | 13 +++++++ css/pixel-editor.scss | 3 +- js/FileManager.js | 65 +++++++++++++++++++++++++++++++++++ js/TopMenuModule.js | 3 ++ js/Util.js | 4 +++ package-lock.json | 1 + views/holders.hbs | 1 + views/index.hbs | 1 + views/main-menu.hbs | 1 + views/popups/import-image.hbs | 20 +++++++++++ 10 files changed, 111 insertions(+), 1 deletion(-) create mode 100644 css/_import-image.scss create mode 100644 views/popups/import-image.hbs diff --git a/css/_import-image.scss b/css/_import-image.scss new file mode 100644 index 0000000..1e88c36 --- /dev/null +++ b/css/_import-image.scss @@ -0,0 +1,13 @@ +#import-image { + .import-image-file { + button { + margin: 0; + } + } + + .import-image-checkbox { + height: 50px; + display: flex; + align-items: center; + } +} \ No newline at end of file diff --git a/css/pixel-editor.scss b/css/pixel-editor.scss index 4f24dae..b45d998 100644 --- a/css/pixel-editor.scss +++ b/css/pixel-editor.scss @@ -17,4 +17,5 @@ @import 'palette-editor'; @import 'splash-page'; @import "export"; -@import "save-project"; \ No newline at end of file +@import "save-project"; +@import "import-image"; \ No newline at end of file diff --git a/js/FileManager.js b/js/FileManager.js index fe5e7d8..28556f1 100644 --- a/js/FileManager.js +++ b/js/FileManager.js @@ -3,9 +3,11 @@ const FileManager = (() => { // Binding the browse holder change event to file loading const browseHolder = document.getElementById('open-image-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', browsePaletteHolder, loadPalette); + Events.on('change', importImageHolder, loadImage); Events.on('click', 'export-confirm', exportProject); function openSaveProjectWindow() { @@ -270,11 +272,74 @@ const FileManager = (() => { 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 { saveProject, exportProject, openPixelExportWindow, openSaveProjectWindow, + openImportImageWindow, open } })(); \ No newline at end of file diff --git a/js/TopMenuModule.js b/js/TopMenuModule.js index 3b70d64..95221ab 100644 --- a/js/TopMenuModule.js +++ b/js/TopMenuModule.js @@ -43,6 +43,9 @@ const TopMenuModule = (() => { case 'Open': Events.on('click', currSubmenuButton, FileManager.open); break; + case 'Import': + Events.on('click', currSubmenuButton, FileManager.openImportImageWindow); + break; case 'Export': Events.on('click', currSubmenuButton, FileManager.openPixelExportWindow); break; diff --git a/js/Util.js b/js/Util.js index a6ba566..7f0b2a0 100644 --- a/js/Util.js +++ b/js/Util.js @@ -130,4 +130,8 @@ class Util { static cursorInCanvas(canvasSize, mousePos) { 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(); + } } \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 0c67187..21ca0ca 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,6 +7,7 @@ "": { "name": "pixel-editor", "version": "1.0.0", + "license": "GPL-3.0-only", "dependencies": { "concurrently": "^6.0.2", "express": "^4.16.4", diff --git a/views/holders.hbs b/views/holders.hbs index 1c83b49..a144583 100644 --- a/views/holders.hbs +++ b/views/holders.hbs @@ -3,5 +3,6 @@ dl + \ No newline at end of file diff --git a/views/index.hbs b/views/index.hbs index f2768bd..94de922 100644 --- a/views/index.hbs +++ b/views/index.hbs @@ -38,6 +38,7 @@ {{> settings}} {{> pixel-export}} {{> save-project}} + {{> import-image}} diff --git a/views/main-menu.hbs b/views/main-menu.hbs index f40d9b1..ff4243c 100644 --- a/views/main-menu.hbs +++ b/views/main-menu.hbs @@ -6,6 +6,7 @@
    • +
  • Exit
    • diff --git a/views/popups/import-image.hbs b/views/popups/import-image.hbs new file mode 100644 index 0000000..c848956 --- /dev/null +++ b/views/popups/import-image.hbs @@ -0,0 +1,20 @@ +
    + + +

    Import Image

    + +

    Imports image into the current selected layer.

    + +
    + + +
    + +
    + Match canvas to image size +
    + +
    + +
    +
    \ No newline at end of file