Merge pull request #107 from Lattay/support_hex_palette

Implement importing GIMP and .hex palettes.

js/ColorModule.js

@@ -388,10 +388,12 @@ const ColorModule = (() => {
      * 
      * @param {*} paletteColors The colours of the palette
      */
-    function createColorPalette(paletteColors) {
+    function createColorPalette(paletteColors, clearCurrent=true) {
         //remove current palette
+        if (clearCurrent) {
             while (colorsMenu.childElementCount > 1)
                 colorsMenu.children[0].remove();
+        }
 
         var lightestColor = new Color("hex", '#000000');
         var darkestColor = new Color("hex", '#ffffff');

js/FileManager.js

@@ -292,18 +292,63 @@ const FileManager = (() => {
         
         return JSON.stringify(dictionary);
     }
+
+    let fromMenu = false;
+
+    function openImportPaletteWindow() {
+        fromMenu = true;
+        document.getElementById('load-palette-browse-holder').click();
+    }
+
     function loadPalette() {
         if (browsePaletteHolder.files && browsePaletteHolder.files[0]) {
-            //make sure file is allowed filetype
-            var fileContentType = browsePaletteHolder.files[0].type;
-            if (fileContentType == 'image/png' || fileContentType == 'image/gif') {
+            let file = browsePaletteHolder.files[0];
+            var fileContentType =
+              file.type
+              || file.name.split('.').slice(-1)[0];
 
-                //load file
             var fileReader = new FileReader();
-                fileReader.onload = function(e) {
+
+            // dispatch on file type
+            switch (fileContentType) {
+              case 'image/png':
+              case 'image/gif':
+                fileReader.onload = loadPaletteFromImage;
+                fileReader.readAsDataURL(browsePaletteHolder.files[0]);
+                break;
+              case 'gpl':
+                fileReader.onload = loadPaletteFromGimp;
+                fileReader.readAsText(browsePaletteHolder.files[0]);
+                break;
+              case 'hex':
+                fileReader.onload = loadPaletteFromHex;
+                fileReader.readAsText(browsePaletteHolder.files[0]);
+                break;
+              default:
+                alert('Only PNG, GIF, .hex and .gpl files are supported at this time.');
+            }
+        }
+
+        browsePaletteHolder.value = null;
+    }
+
+    function addPalette(colors) {
+        if (fromMenu) {
+            ColorModule.createColorPalette(colors, clearCurrent=false);
+        } else {
+            // From splash screen
+            // add to palettes so that it can be loaded when they click okay
+            palettes['Loaded palette'] = {};
+            palettes['Loaded palette'].colors = colors;
+            Util.setText('palette-button', 'Loaded palette');
+            Util.setText('palette-button-splash', 'Loaded palette');
+            Util.toggle('palette-menu-splash');
+        }
+    }
+
+    function loadPaletteFromImage(e) {
         var img = new Image();
         img.onload = function() {
-    
             //draw image onto the temporary canvas
             var loadPaletteCanvas = document.getElementById('load-palette-canvas-holder');
             var loadPaletteContext = loadPaletteCanvas.getContext('2d');
@@ -326,21 +371,62 @@ const FileManager = (() => {
                 }
             }
 
-                        //add to palettes so that it can be loaded when they click okay
-                        palettes['Loaded palette'] = {};
-                        palettes['Loaded palette'].colors = colorPalette;
-                        Util.setText('palette-button', 'Loaded palette');
-                        Util.setText('palette-button-splash', 'Loaded palette');
-                        Util.toggle('palette-menu-splash');
+            addPalette(colorPalette);
         };
         img.src = e.target.result;
-                };
-                fileReader.readAsDataURL(browsePaletteHolder.files[0]);
-            }
-            else alert('Only PNG and GIF files are supported at this time.');
     }
 
-        browsePaletteHolder.value = null;
+    function loadPaletteFromGimp(e) {
+        let content = e.target.result;
+        let colorPalette = content.split(/\r?\n/)
+        // Skip header line
+            .slice(1)
+            .map((line) => line.trim())
+            .filter((line) => line != "")
+        // discard comment lines
+            .filter((line) => !line.startsWith('#'))
+        // discard meta data lines
+            .filter((line) => !line.includes(':'))
+            .map((line) => {
+                let components = line.split(/\s+/);
+
+                if (components.length < 3) {
+                    alert(`Invalid color specification ${line}.`);
+                    return "#000000"
+                }
+
+                let [r, g, b, ...rest] = components;
+                let color = {
+                    r: parseInt(r),
+                    g: parseInt(g),
+                    b: parseInt(b),
+                };
+
+                if (isNaN(color.r) || isNaN(color.g) || isNaN(color.b)) {
+                    alert(`Invalid color specification ${line}.`);
+                    return "#000000"
+                }
+
+                return '#' + Color.rgbToHex(color);
+            });
+        addPalette(colorPalette);
+    }
+
+    function loadPaletteFromHex(e) {
+        let content = e.target.result;
+        let colorPalette = content.split(/\r?\n/)
+            .map((line) => line.trim())
+            .filter((line) => line != "")
+        // discard comment lines
+            .filter((line) => !line.startsWith('#'))
+            .map((line) => {
+                if (line.match(/[0-9A-Fa-f]{6}/)) {
+                    return '#' + line;
+                }
+                alert(`Invalid hex color ${line}.`);
+                return '#000000';
+            });
+        addPalette(colorPalette);
     }
 
     currentImportPivotElement = undefined;
@@ -513,6 +599,7 @@ const FileManager = (() => {
         openPixelExportWindow,
         openSaveProjectWindow,
         openImportImageWindow,
+        openImportPaletteWindow,
         open
     }
 

js/TopMenuModule.js

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

views/holders.hbs

@@ -2,7 +2,7 @@
 	<a id="save-image-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="load-palette-browse-holder" type="file" accept="image/png, image/gif" />
+	<input id="load-palette-browse-holder" type="file" accept="image/png, image/gif, .gpl, .hex" />
 	<input id="import-image-browse-holder" type="file" accept="image/png" />
 	<canvas id="load-palette-canvas-holder"></canvas>
 </div>

views/main-menu.hbs

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