From c08c7f2d0b6cc45bde16ac36ee03582f1a9e09f2 Mon Sep 17 00:00:00 2001 From: Theo Cavignac Date: Thu, 22 Dec 2022 23:37:38 +0100 Subject: [PATCH] Refactor palette loading. --- js/FileManager.js | 195 ++++++++++++++++++++++++---------------------- 1 file changed, 100 insertions(+), 95 deletions(-) diff --git a/js/FileManager.js b/js/FileManager.js index 49827c2..963491a 100644 --- a/js/FileManager.js +++ b/js/FileManager.js @@ -292,9 +292,9 @@ const FileManager = (() => { return JSON.stringify(dictionary); } + function loadPalette() { if (browsePaletteHolder.files && browsePaletteHolder.files[0]) { - //make sure file is allowed filetype let file = browsePaletteHolder.files[0]; var fileContentType = file.type @@ -302,116 +302,121 @@ const FileManager = (() => { var fileReader = new FileReader(); - let addPalette = (colors) => { - //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'); - } - + // dispatch on file type switch (fileContentType) { case 'image/png': case 'image/gif': - //load file - fileReader.onload = function(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'); - - loadPaletteCanvas.width = img.width; - loadPaletteCanvas.height = img.height; - - loadPaletteContext.drawImage(img, 0, 0); - - //create array to hold found colors - var colorPalette = []; - var imagePixelData = loadPaletteContext.getImageData(0,0,this.width, this.height).data; - - //loop through pixels looking for colors to add to palette - for (var i = 0; i < imagePixelData.length; i += 4) { - const newColor = {r:imagePixelData[i],g:imagePixelData[i + 1],b:imagePixelData[i + 2]}; - var color = '#' + Color.rgbToHex(newColor); - if (colorPalette.indexOf(color) == -1) { - colorPalette.push(color); - } - } - - addPalette(colorPalette); - }; - img.src = e.target.result; - }; + fileReader.onload = loadPaletteFromImage; + fileReader.readAsDataURL(browsePaletteHolder.files[0]); break; case 'gpl': - fileReader.onload = function() { - file.text().then((content) => { - 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); - }); - }; + fileReader.onload = loadPaletteFromGimp; + fileReader.readAsText(browsePaletteHolder.files[0]); break; case 'hex': - fileReader.onload = function() { - file.text().then((content) => { - 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); - }); - }; + fileReader.onload = loadPaletteFromHex; + fileReader.readAsText(browsePaletteHolder.files[0]); break; default: alert('Only PNG, GIF, .hex and .gpl files are supported at this time.'); } - fileReader.readAsDataURL(browsePaletteHolder.files[0]); } browsePaletteHolder.value = null; } + function addPalette(colors) { + //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'); + + loadPaletteCanvas.width = img.width; + loadPaletteCanvas.height = img.height; + + loadPaletteContext.drawImage(img, 0, 0); + + //create array to hold found colors + var colorPalette = []; + var imagePixelData = loadPaletteContext.getImageData(0,0,this.width, this.height).data; + + //loop through pixels looking for colors to add to palette + for (var i = 0; i < imagePixelData.length; i += 4) { + const newColor = {r:imagePixelData[i],g:imagePixelData[i + 1],b:imagePixelData[i + 2]}; + var color = '#' + Color.rgbToHex(newColor); + if (colorPalette.indexOf(color) == -1) { + colorPalette.push(color); + } + } + + addPalette(colorPalette); + }; + img.src = e.target.result; + } + + 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; currentImportPivotPosition = 'middle'; isImportWindowInitialized = false;