Added file option to import image to current layer

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;
+    }
+}

css/pixel-editor.scss

@@ -18,3 +18,4 @@
 @import 'splash-page';
 @import "export";
 @import "save-project";
+@import "import-image";

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
     }
 })();

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;

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();
+    }
 }

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",

views/holders.hbs

@@ -3,5 +3,6 @@
 	<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="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>
 </div>

views/index.hbs

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

views/main-menu.hbs

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

views/popups/import-image.hbs

@@ -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>