Merge branch 'master' into pxlvxl-master

Author: unsettledgames

Dockerfile

@@ -0,0 +1,16 @@
+FROM node:16-alpine3.15
+
+RUN apk add git
+
+# Docker has --chown flag for COPY, but it does not expand ENV so we fallback to:
+# COPY src src 
+# RUN sudo chown -R $USER:$USER $HOME
+
+WORKDIR /home/node/app
+COPY ./ /home/node/app
+RUN chown -R node:node /home/node/app 
+
+USER node
+RUN npm install
+
+CMD ["npm", "run", "hot"]

LICENCE

@@ -69,7 +69,3 @@ If you have any trouble, see this page: https://help.github.com/en/articles/crea
 Some feature might be hidden by default. Functions to enable/disable them are available inside global `featureToggles` and operate on a `window.localStorage`.
 
 For example use `featureToggles.enableEllipseTool()` to make ellipse tool button visible. Then `featureToggles.disableEllipseTool()` to hide it.
-
-## License
-
-This software may not be resold, redistributed, rehosted or otherwise conveyed to a third party.

README.md

@@ -34,7 +34,7 @@ function copy_logs() {
 }
 
 function render_js(){
-    gulp.src('./js/*.js')
+    gulp.src('./js/pixel-editor.js')
         .pipe(include({includePaths: [
             'js',
             '!js/_*.js',

build.js

@@ -0,0 +1,18 @@
+#import-image {
+    ul {
+        list-style-type: none;
+        margin: 15px 0;
+        padding: 0;
+    }
+
+    .import-image-file {
+        button {
+            margin: 0;
+        }
+    }
+
+    .import-image-location-pivot {
+        display: flex;
+        align-items: center;
+    }
+}

css/_import-image.scss

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

css/pixel-editor.scss

@@ -236,6 +236,7 @@ const ColorModule = (() => {
         //add # at beginning if not present
         if (newColor.charAt(0) != '#')
             newColor = '#' + newColor;
+        
         currentPalette.push(newColor);
         //create list item
         const listItem = document.createElement('li');   
@@ -433,25 +434,53 @@ const ColorModule = (() => {
      * 
      */
     function createPaletteFromLayers() {
+        //create array out of colors object
+        let colorPaletteArray = getLayerColors();
+
+        //create palette from colors array
+        createColorPalette(colorPaletteArray);
+    }
+
+    /**
+     * Scan the layers for any colors that are not currently in the palette. If any colors
+     * are found they should be added as new colors for the palette.
+     */
+    function updatePaletteFromLayers() {
+        let layersPaletteArray = getLayerColors();
+
+        for (let i = 0; i < layersPaletteArray.length; i++) {
+            if (currentPalette.indexOf(layersPaletteArray[i]) !== -1) {
+                continue;
+            }
+
+            addColor(layersPaletteArray[i]);
+        }
+    }
+
+    /**
+     * Iterates each layer and grab each unique color.
+     * @returns Array of colors used within the current layers.
+     */
+    function getLayerColors() {
         let colors = {};
         let nColors = 0;
         //create array out of colors object
         let colorPaletteArray = [];
 
-        for (let i=0; i<currFile.layers.length; i++) {
+        for (let i = 0; i < currFile.layers.length; i++) {
             if (currFile.layers[i].hasCanvas()) {
-                let imageData = currFile.layers[i].context.getImageData(
-                    0, 0, currFile.canvasSize[0], currFile.canvasSize[1]).data;
+                let imageData = currFile.layers[i].context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]).data;
                 let dataLength = imageData.length;
 
-                for (let j=0; j<dataLength; j += 4) {
+                for (let j=0; j < dataLength; j += 4) {
                     if (!Util.isPixelEmpty(imageData[j])) {
                         let color = imageData[j]+','+imageData[j + 1]+','+imageData[j + 2];
 
                         if (!colors[color]) {
                             colorPaletteArray.push('#' + new Color("rgb", imageData[j], imageData[j + 1], imageData[j + 2]).hex);
                             colors[color] = new Color("rgb", imageData[j], imageData[j + 1], imageData[j + 2]).rgb;
                             nColors++;
+
                             //don't allow more than 256 colors to be added
                             if (nColors >= Settings.getCurrSettings().maxColorsOnImportedImage) {
                                 alert('The image loaded seems to have more than '+Settings.getCurrSettings().maxColorsOnImportedImage+' colors.');
@@ -495,6 +524,7 @@ const ColorModule = (() => {
         resetPalette,
         createColorPalette,
         createPaletteFromLayers,
+        updatePaletteFromLayers,
         updateCurrentColor,
         getSelectedColor,
     }

js/ColorModule.js

@@ -4,9 +4,12 @@ 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);
     Events.on("click", "save-project-confirm", saveProject);
 
     function openSaveProjectWindow() {
@@ -27,17 +30,17 @@ const FileManager = (() => {
 
     function openPixelExportWindow() {
         let selectedPalette = Util.getText('palette-button');
+
 
         if (selectedPalette != 'Choose a palette...'){
             var paletteAbbreviation = palettes[selectedPalette].name;
-            var fileName = 'pixel-'+paletteAbbreviation+'-'+canvasSize[0]+'x'+canvasSize[1]+'.png';
+            var fileName = 'pixel-'+paletteAbbreviation+'-'+currFile.canvasSize[0]+'x'+currFile.canvasSize[1]+'.png';
         } else {
             var fileName = 'pixel-'+currFile.canvasSize[0]+'x'+currFile.canvasSize[1]+'.png';
             selectedPalette = 'none';
         }
 
         Util.setValue('export-file-name', fileName);
-        Events.on("click", "export-confirm", exportProject);
         Dialogue.showDialogue('export', false);
     }
 
@@ -339,6 +342,116 @@ const FileManager = (() => {
 
         browsePaletteHolder.value = null;
     }
+
+    currentImportPivotElement = undefined;
+    currentImportPivotPosition = 'middle';
+    isImportWindowInitialized = false;
+
+    /**
+     * Displays the import image window to allow for configurations
+     * to be made be the image is imported.
+     */
+    function openImportImageWindow() {
+        // Reset window values.
+        importImageHolder.value = null;
+
+        document.getElementById('import-image-match-size').checked = false;
+        document.getElementById('import-image-update-palette').checked = false;
+        document.getElementById('import-image-name').innerText = "";
+
+        // Workaround to prevent events from firing twice for the import window.
+        if (!this.isImportWindowInitialized) {
+            // Getting the pivot buttons and setting the default pivot selection.
+            let pivotButtons = document.getElementsByClassName("pivot-button");
+            this.currentImportPivotElement = document.querySelector('.import-image-location-pivot .rc-selected-pivot');
+
+            // Add event handlers for each pivot.
+            for (let i=0; i < pivotButtons.length; i++) {
+                Events.on("click", pivotButtons[i], onImportPivotChanged.bind(this));
+            }
+
+            Events.on("click", "select-image", () => document.getElementById('import-image-browse-holder')?.click());
+            Events.on("click", "import-image-confirm", importImage);
+
+            this.isImportWindowInitialized = true;
+        }
+        
+        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 = (e) => {
+            var img = new Image();
+
+            img.onload = () => {
+                let shouldResizeCanvas = document.getElementById('import-image-match-size').checked;
+                let shouldImportColors = document.getElementById('import-image-update-palette').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);
+                }
+
+                // Calculate pivot offset and draw the imported image. Ensure the pivot position accounts for the imported images dimensions.
+                let offset = Util.getPivotPosition(this.currentImportPivotPosition, currFile.canvasSize[0], currFile.canvasSize[1], img.width, img.height);
+                currFile.currentLayer.context.drawImage(img, offset.x, offset.y);
+
+                if (shouldImportColors) {
+                    ColorModule.updatePaletteFromLayers();
+                }
+
+                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;
+            }
+        }
+    }
+
+    /**
+     * Called when the selected pivot for the import image is changed.
+     * @param {*} event The event for the selected pivot.
+     */
+    function onImportPivotChanged(event) {
+        this.currentImportPivotPosition = event.target.getAttribute("value");
+
+        // Setting the selected class
+        this.currentImportPivotElement.classList.remove("rc-selected-pivot");
+        this.currentImportPivotElement = event.target;
+        this.currentImportPivotElement.classList.add("rc-selected-pivot");
+    }
+    
     function upgradeLPE(dictionary) {
         console.log('dictionary === ',dictionary);
         if(dictionary.color0 && !dictionary.colors) {
@@ -399,8 +512,10 @@ const FileManager = (() => {
         exportProject,
         openPixelExportWindow,
         openSaveProjectWindow,
+        openImportImageWindow,
         open
-    };
+    }
+
     Object.keys(ret).forEach(k=>{
         if(typeof ret[k] === "function"){
             const orig = ret[k];

js/FileManager.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/TopMenuModule.js

@@ -130,4 +130,77 @@ 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();
+    }
+
+    static getCanvasBorders() {
+
+    }
+
+    /**
+     * Determines the x and y offset for drawing images at a specific point 'topleft', 'middle', etc.
+     * 
+     * @param {*} pivot A string representing the position of the pivot 'topleft', 'middle', etc.
+     * @param {*} width Width of the bounds often represents the canvas width.
+     * @param {*} height Height of the bounds often represents the canvas height.
+     * @param {*} imageWidth Substracts the offset from calculated x position of the pivot. Defaults to 0.
+     * @param {*} imageHeight Subtracts the offset from the calculated y position of the pivot. Defaults to 0.
+     * 
+     * @returns Object containing the x and y offset for the pivot.
+     */
+    static getPivotPosition(pivot, width, height, imageWidth = 0, imageHeight = 0) {
+        let position = {
+            x: 0,
+            y: 0
+        };
+
+        let centerX = width / 2;
+        let centerY = height / 2;
+
+        switch (pivot)
+        {
+            case 'topleft':
+                position.x = 0;
+                position.y = 0;
+                break;
+            case 'top':
+                position.x = centerX - (imageWidth / 2);
+                position.y = 0;
+                break;
+            case 'topright':
+                position.x = width - imageWidth;
+                position.y = 0;
+                break;
+            case 'left':
+                position.x = 0;
+                position.y = centerY - (imageHeight / 2);
+                break;
+            case 'middle':
+                position.x = centerX - (imageWidth / 2);
+                position.y = centerY - (imageHeight / 2);
+                break;
+            case 'right':
+                position.x = width - imageWidth;
+                position.y = centerY - (imageHeight / 2);
+                break;
+            case 'bottomleft':
+                position.x = 0;
+                position.y = height - imageHeight;
+                break;
+            case 'bottom':
+                position.x = centerX - (imageWidth / 2);
+                position.y = height - imageHeight;
+                break;
+            case 'bottomright':
+                position.x = width - imageWidth
+                position.y = height - imageHeight;
+                break;
+            default:
+                break;
+        }
+
+        return position;
+    }
 }