fixed merge

.eslintrc.json

@@ -0,0 +1,34 @@
+{
+    "env": {
+        "browser": false,
+        "commonjs": true,
+        "es6": true,
+        "node": true
+    },
+    "extends": "eslint:recommended",
+    "globals": {
+        "Atomics": "readonly",
+        "SharedArrayBuffer": "readonly"
+    },
+    "parserOptions": {
+        "ecmaVersion": 2018
+    },
+    "rules": {
+        "indent": [
+            "error",
+            4
+        ],
+        "linebreak-style": [
+            "error",
+            "unix"
+        ],
+        "quotes": [
+            "error",
+            "single"
+        ],
+        "semi": [
+            "error",
+            "always"
+        ]
+    }
+}

build.js

@@ -1,28 +1,25 @@
-var fs = require('fs-extra');
+const fs = require('fs');
-var hbs = require('handlebars');
+const path = require('path');
-var glob = require("glob");
+const gulp = require('gulp');
-var sass = require("sass");
+const include = require('gulp-include');
-var path = require("path");
+const hb = require('gulp-hb');
-var gulp = require('gulp');
+const sass = require('gulp-sass');
-var include = require('gulp-include');
+const rename = require('gulp-rename');
 
-const BUILDDIR = './build';
+const hb_svg = require('handlebars-helper-svg');
+
+const BUILDDIR = process.argv[2] || './build/';
 const SLUG = 'pixel-editor';
 
 console.log('Building Pixel Editor');
 
-hbs.registerHelper('svg', require('handlebars-helper-svg'));
-require('hbs-register-helpers')(hbs,'./_ext/modules/hbs/helpers/**/*.js');
-require('hbs-register-partials')(hbs,'./_ext/modules/hbs/_*.hbs');
 
-//empty the build folder, or create it
+function copy_images(){
-fs.emptyDirSync(BUILDDIR);
+    gulp.src('./images/')
+        .pipe(gulp.dest(path.join(BUILDDIR, SLUG)));
+}
 
-
+function render_js(){
-//copy images
-fs.copySync('./images','./build/'+SLUG);
-
-//render js
     gulp.src('./js/*.js')
         .pipe(include({includePaths: [
             '_ext/scripts',
@@ -30,64 +27,33 @@ gulp.src('./js/*.js')
             '!js/_*.js',
         ]}))
         .on('error', console.log)
-  .pipe(gulp.dest('build/'+SLUG));
+        .pipe(gulp.dest(path.join(BUILDDIR, SLUG)));
+}
 
 
-//render css
+function render_css(){
-var sassFiles = glob.sync('css/*.scss');
+    gulp.src('css/*.scss')
+        .pipe(sass({includePaths: ['css', '_ext/sass', '_ext/modules/css']}))
+        .pipe(gulp.dest(path.join(BUILDDIR, SLUG)));
+}
 
-sassFiles.forEach((s) => {
+function compile_page(){
-
+    gulp.src(path.join('./views/', SLUG + '.hbs'))
-    var f = sass.renderSync({file: s, outFile: 'test.css', includePaths: ['css', '_ext/sass', '_ext/modules/css']});
+        .pipe(hb({encoding: 'utf8'})
-
+            .partials('./_ext/modules/_*.hbs')
-    console.log('compiling:',path.basename(f.stats.entry))
+            .helpers({ svg: hb_svg })
-    fs.writeFileSync('build/'+SLUG+'/'+path.basename(f.stats.entry,'scss')+'css', f.css);
+            .helpers('./_ext/modules/hbs/helpers/**/*.js')
-});
+            .data({
-
-
-//compile page
-var pageTemplate = hbs.compile(fs.readFileSync('./views/'+SLUG+'.hbs',{encoding: 'utf8'}));
-var page = pageTemplate({
                 projectSlug: SLUG,
                 title: 'Lospec Pixel Editor',
                 layout: false,
-});
+            }))
-
+        .pipe(rename('index.htm'))
-//save output
+        .pipe(gulp.dest(BUILDDIR));
-fs.writeFileSync('./build/index.htm',page);
-
-
-//server
-const express = require('express');
-const app = express();
-
-
-//ROUTE - index.htm
-app.get('/', (req, res) => { 
-  res.sendFile(path.join(__dirname+'/build/index.htm'), {}, function (err) {
-    if (err) console.log('error sending file',err);
-    else {
-      setTimeout(()=>{
-          console.log('closing server')
-          server.close();
-          process.exit();
-      },1000*10);
 }
-  });
-});
-
-//ROUTE - other files
-app.use(express.static(path.join(__dirname, 'build')));
-
-//start server
-var server = app.listen(3000, () => {
-  console.log('\nTemp server started at http://localhost:3000!');
-  //console.log('press ctrl+c to stop ');
-
-  var opn = require('opn');
-
-  // opens the url in the default browser
-  opn('http://localhost:3000');
 
 
-});
+// empty the build folder, or create it
+fs.rmdirSync(BUILDDIR, { recursive: true });
+fs.mkdirSync(BUILDDIR);
+gulp.parallel(copy_images, render_js, render_css, compile_page)();

js/.eslintrc.json

@@ -0,0 +1,34 @@
+{
+    "env": {
+        "browser": true,
+        "es6": true
+    },
+    "globals": {
+        "Atomics": "readonly",
+        "SharedArrayBuffer": "readonly"
+    },
+    "parserOptions": {
+        "ecmaVersion": 2018
+    },
+    "rules": {
+        "indent": [
+            "error",
+            4,
+            {
+                "SwitchCase": 1
+            }
+        ],
+        "linebreak-style": [
+            "error",
+            "unix"
+        ],
+        "quotes": [
+            "error",
+            "single"
+        ],
+        "semi": [
+            "error",
+            "always"
+        ]
+    }
+}

js/_addColor.js

@@ -8,13 +8,13 @@ function addColor (newColor) {
         newColor = '#' + newColor;
 
     //create list item
-  var listItem = document.createElement("li");   
+    var listItem = document.createElement('li');   
 
     //create button
-  var button = document.createElement("button");
+    var button = document.createElement('button');
-  button.classList.add("color-button");
+    button.classList.add('color-button');
     button.style.backgroundColor = newColor;
-  button.addEventListener("mouseup", clickedColor);
+    button.addEventListener('mouseup', clickedColor);
     listItem.appendChild(button);
 
     /*

js/_addColorButton.js

@@ -7,15 +7,15 @@ on('click', 'add-color-button', function(){
     background: #3c4cc2;
   `;
 
-  var colorIsUnique = true
+    var colorIsUnique = true;
     do {
         //console.log('%cchecking for unique colors', colorCheckingStyle)
         //generate random color
         var hue = Math.floor(Math.random()*255);
         var sat = 130+Math.floor(Math.random()*100);
         var lit = 70+Math.floor(Math.random()*100);
-    var newColorRgb = hslToRgb(hue,sat,lit)
+        var newColorRgb = hslToRgb(hue,sat,lit);
-    var newColor = rgbToHex(newColorRgb.r,newColorRgb.g,newColorRgb.b)
+        var newColor = rgbToHex(newColorRgb.r,newColorRgb.g,newColorRgb.b);
 
         var newColorHex = newColor;
 
@@ -39,7 +39,7 @@ on('click', 'add-color-button', function(){
     while (colorIsUnique == false);
 
     //remove current color selection
-  document.querySelector("#colors-menu li.selected").classList.remove("selected");
+    document.querySelector('#colors-menu li.selected').classList.remove('selected');
 
     //add new color and make it selected
     var addedColor = addColor(newColor);
@@ -52,7 +52,7 @@ on('click', 'add-color-button', function(){
 
     //show color picker
     addedColor.firstElementChild.jscolor.show();
-  console.log("showing picker");
+    console.log('showing picker');
 
     //hide edit button
     addedColor.lastChild.classList.add('hidden');

js/_changeTool.js

@@ -1,26 +0,0 @@
-function changeTool (newToolName) {
-
-	console.log('changing tool to',newToolName)
-
-	var selectedTool = tool[newToolName];
-
-	// Ending any selection in progress
-    if (currentTool.name.includes("select") && !selectedTool.name.includes("select") && !selectionCanceled) {
-    	endSelection();
-    }
-    //set tool and temp tje tje tpp;
-    currentTool = selectedTool;
-	currentToolTemp = selectedTool;
-
-    var tools = document.getElementById("tools-menu").children;
-
-	for (var i = 0; i < tools.length; i++) {
-	    tools[i].classList.remove("selected");
-	}
-
-    //give the button of the selected tool the .selected class
-	document.getElementById(selectedTool.name+"-button").parentNode.classList.add("selected");
-
-	//change cursor
-	currentTool.updateCursor();
-}

js/_changeZoom.js

@@ -1,4 +1,3 @@
-
 function changeZoom (layer, direction, cursorLocation) {
 	var oldWidth = canvasSize[0] * zoom;
 	var oldHeight = canvasSize[1] * zoom;

js/_checkCompatibility.js

@@ -1,11 +1,10 @@
-
 /////=include libraries/bowser.js
 
 function closeCompatibilityWarning () {
     document.getElementById('compatibility-warning').style.visibility = 'hidden';
 }
 
-console.log('checking compatibility')
+console.log('checking compatibility');
 
 //check browser/version
 if ((bowser.msie && bowser.version < 11) || 
@@ -17,4 +16,4 @@ if (  (bowser.msie && bowser.version < 11) ||
     //show warning  
     document.getElementById('compatibility-warning').style.visibility = 'visible';
 
-else alert(bowser.name+' '+bowser.version+' is fine!')
+else alert(bowser.name+' '+bowser.version+' is fine!');

js/_clickedColor.js

@@ -3,10 +3,9 @@ function clickedColor (e){
 
     //left clicked color
     if (e.which == 1) {
-      
         // remove current color selection
-      var selectedColor = document.querySelector("#colors-menu li.selected")
+        var selectedColor = document.querySelector('#colors-menu li.selected');
-      if (selectedColor) selectedColor.classList.remove("selected");
+        if (selectedColor) selectedColor.classList.remove('selected');
 
         //set current color
         currentLayer.context.fillStyle = this.style.backgroundColor;
@@ -15,16 +14,14 @@ function clickedColor (e){
         //make color selected
         e.target.parentElement.classList.add('selected');
 
-    //right clicked color
+    } else if (e.which == 3) { //right clicked color
-    } else if (e.which == 3) {
+        console.log('right clicked color button');
-      console.log('right clicked color button')
 
         //hide edit color button (to prevent it from showing)
         e.target.parentElement.lastChild.classList.add('hidden');
 
         //show color picker
         e.target.jscolor.show();
-      
     }
 }
 

js/_colorChanged.js

@@ -18,7 +18,7 @@ on('input', 'jscolor-hex-input', function (e) {
     currentlyEditedColor.firstChild.jscolor.fromString(newColorHex);
 
     colorChanged(e);
-})
+});
 
 
 //changes all of one color to another after being changed from color picker
@@ -34,11 +34,11 @@ function colorChanged(e) {
 
     //get the currently selected color
     var currentlyEditedColor = document.getElementsByClassName('jscolor-active')[0];
-  var duplicateColorWarning = document.getElementById("duplicate-color-warning");
+    var duplicateColorWarning = document.getElementById('duplicate-color-warning');
 
     //check if selected color already matches another color 
     colors = document.getElementsByClassName('color-button');
-  var colorCheckingStyle = "background: #bc60c4; color: white"
+    var colorCheckingStyle = 'background: #bc60c4; color: white';
     var newColorHex = e.target.value.toLowerCase();
 
     //if the color is not a valid hex color, exit this function and do nothing
@@ -54,7 +54,7 @@ function colorChanged(e) {
 
             //if the color isnt the one that has the picker currently open
             if (!colors[i].parentElement.classList.contains('jscolor-active')) {
-        //console.log('%cColor is duplicate', colorCheckingStyle)
+                // console.log('%cColor is duplicate', colorCheckingStyle);
 
                 //show the duplicate color warning
                 duplicateColorWarning.style.visibility = 'visible';
@@ -73,7 +73,7 @@ function colorChanged(e) {
     //if the color being edited has a duplicate color warning, remove it
     duplicateColorWarning.style.visibility = 'hidden';
 
-	currentlyEditedColor.firstChild.jscolor.fromString(newColorHex)
+    currentlyEditedColor.firstChild.jscolor.fromString(newColorHex);
 
     replaceAllOfColor(oldColor, newColor);
 

js/_createButton.js

@@ -1,4 +1,3 @@
-
 on('click', 'create-button', function (){
     var width = getValue('size-width');
     var height = getValue('size-height');

js/_createColorPalette.js

@@ -23,8 +23,8 @@ function createColorPalette(selectedPalette, fillBackground) {
         if (newColorHex.r + newColorHex.g + newColorHex.b < darkestColorHex.r + darkestColorHex.g + darkestColorHex.b) {
 
             //remove current color selection
-      var selectedColor = document.querySelector("#colors-menu li.selected")
+            var selectedColor = document.querySelector('#colors-menu li.selected');
-      if (selectedColor) selectedColor.classList.remove("selected");
+            if (selectedColor) selectedColor.classList.remove('selected');
 
             //set as current color
             newColorElement.classList.add('selected');

js/_deleteColor.js

@@ -9,16 +9,16 @@ function deleteColor (color) {
 
     //if color is a string, then find the corresponding button
     if (typeof color === 'string') {
-    console.log('trying to find ',color)
+        console.log('trying to find ',color);
         //get all colors in palette
         colors = document.getElementsByClassName('color-button');
 
         //loop through colors
         for (var i = 0; i < colors.length; i++) {
-      console.log(color,'=',colors[i].jscolor.toString())
+            console.log(color,'=',colors[i].jscolor.toString());
 
             if (color == colors[i].jscolor.toString()) {
-        console.log('match')
+                console.log('match');
                 //set color to the color button
                 color = colors[i];
                 console.log('found color', color);

js/_dialogue.js

@@ -22,7 +22,7 @@ function closeDialogue () {
     dialogueOpen = false;
 }
 
-popUpContainer.addEventListener("click", function (e) {
+popUpContainer.addEventListener('click', function (e) {
     if (e.target == popUpContainer)
         closeDialogue();
 });

js/_fileMenu.js

@@ -1,4 +1,4 @@
-var mainMenuItems = document.getElementById("main-menu").children;
+var mainMenuItems = document.getElementById('main-menu').children;
 
 //for each button in main menu (starting at 1 to avoid logo)
 for (var i = 1; i < mainMenuItems.length; i++) {
@@ -7,11 +7,11 @@ for (var i = 1; i < mainMenuItems.length; i++) {
     var menuItem = mainMenuItems[i];
     var menuButton = menuItem.children[0];
 
-	console.log(mainMenuItems)
+    console.log(mainMenuItems);
 
     //when you click a main menu items button
     on('click', menuButton, function (e, button) {
-        console.log('parent ', button.parentElement)
+        console.log('parent ', button.parentElement);
         select(button.parentElement);
     });
 
@@ -26,7 +26,7 @@ for (var i = 1; i < mainMenuItems.length; i++) {
         var subMenuItem = subMenuItems[j];
         var subMenuButton = subMenuItem.children[0];
 
-		subMenuButton.addEventListener("click", function (e) {
+        subMenuButton.addEventListener('click', function (e) {
 
             switch(this.textContent) {
 
@@ -42,11 +42,11 @@ for (var i = 1; i < mainMenuItems.length; i++) {
                         //check if the user wants to overwrite
                         if (confirm('Opening a pixel will discard your current one. Are you sure you want to do that?'))
                             //open file selection dialog
-      				document.getElementById("open-image-browse-holder").click();
+                            document.getElementById('open-image-browse-holder').click();
                     }
                     else
                         //open file selection dialog
-  					document.getElementById("open-image-browse-holder").click();
+                        document.getElementById('open-image-browse-holder').click();
 
                     break;
 
@@ -64,7 +64,7 @@ for (var i = 1; i < mainMenuItems.length; i++) {
                         }
 
                         //set download link
-						var linkHolder = document.getElementById("save-image-link-holder");
+                        var linkHolder = document.getElementById('save-image-link-holder');
                         linkHolder.href = canvas.toDataURL();
                         linkHolder.download = fileName;
 
@@ -78,7 +78,7 @@ for (var i = 1; i < mainMenuItems.length; i++) {
 
                 case 'Exit':
 
-					console.log('exit')
+                    console.log('exit');
                     //if a document exists, make sure they want to delete it
                     if (documentCreated) {
 

js/_history.js

@@ -13,7 +13,7 @@ function HistoryStateEditCanvas () {
 
         this.canvas = currentCanvas;
         redoStates.push(this);
-  }
+    };
 
     this.redo = function () {
         var currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
@@ -21,7 +21,7 @@ function HistoryStateEditCanvas () {
 
         this.canvas = currentCanvas;
         undoStates.push(this);
-  }
+    };
 
     //add self to undo array
     saveHistoryState(this);
@@ -34,12 +34,12 @@ function HistoryStateAddColor (colorValue) {
     this.undo = function () {
         redoStates.push(this);
         deleteColor(this.colorValue);
-  }
+    };
 
     this.redo = function () {
         addColor(this.colorValue);
         undoStates.push(this);
-  }
+    };
 
     //add self to undo array
     saveHistoryState(this);
@@ -58,7 +58,7 @@ function HistoryStateDeleteColor (colorValue) {
 
         this.canvas = currentCanvas;
         redoStates.push(this);
-  }
+    };
 
     this.redo = function () {
         var currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
@@ -68,7 +68,7 @@ function HistoryStateDeleteColor (colorValue) {
 
         this.canvas = currentCanvas;
         undoStates.push(this);
-  }
+    };
 
     //add self to undo array
     saveHistoryState(this);
@@ -87,7 +87,7 @@ function HistoryStateEditColor (newColorValue, oldColorValue) {
         //find new color in palette and change it back to old color
         var colors = document.getElementsByClassName('color-button');
         for (var i = 0; i < colors.length; i++) {
-      console.log(newColorValue, '==', colors[i].jscolor.toString())
+            console.log(newColorValue, '==', colors[i].jscolor.toString());
             if (newColorValue == colors[i].jscolor.toString()) {
                 colors[i].jscolor.fromString(oldColorValue);
                 break;
@@ -96,7 +96,7 @@ function HistoryStateEditColor (newColorValue, oldColorValue) {
 
         this.canvas = currentCanvas;
         redoStates.push(this);
-  }
+    };
 
     this.redo = function () {
         var currentCanvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);
@@ -105,7 +105,7 @@ function HistoryStateEditColor (newColorValue, oldColorValue) {
         //find old color in palette and change it back to new color
         var colors = document.getElementsByClassName('color-button');
         for (var i = 0; i < colors.length; i++) {
-      console.log(oldColorValue, '==', colors[i].jscolor.toString())
+            console.log(oldColorValue, '==', colors[i].jscolor.toString());
             if (oldColorValue == colors[i].jscolor.toString()) {
                 colors[i].jscolor.fromString(newColorValue);
                 break;
@@ -114,7 +114,7 @@ function HistoryStateEditColor (newColorValue, oldColorValue) {
 
         this.canvas = currentCanvas;
         undoStates.push(this);
-  }
+    };
 
     //add self to undo array
     saveHistoryState(this);
@@ -123,8 +123,8 @@ function HistoryStateEditColor (newColorValue, oldColorValue) {
 
 //rename to add undo state
 function saveHistoryState (state) {
-  console.log('%csaving history state', undoLogStyle)
+    console.log('%csaving history state', undoLogStyle);
-  console.log(state)
+    console.log(state);
 
     //get current canvas data and save to undoStates array
     undoStates.push(state);
@@ -140,8 +140,8 @@ function saveHistoryState (state) {
     //there should be no redoStates after an undoState is saved
     redoStates = [];
 
-  console.log(undoStates)
+    console.log(undoStates);
-  console.log(redoStates)
+    console.log(redoStates);
 }
 
 function undo () {
@@ -167,8 +167,8 @@ function undo () {
             document.getElementById('undo-button').classList.add('disabled');
     }
 
-  console.log(undoStates)
+    console.log(undoStates);
-  console.log(redoStates)
+    console.log(redoStates);
 }
 
 function redo () {
@@ -193,6 +193,6 @@ function redo () {
         if (redoStates.length == 0) 
             document.getElementById('redo-button').classList.add('disabled');
     }
-  console.log(undoStates)
+    console.log(undoStates);
-  console.log(redoStates)
+    console.log(redoStates);
 }

js/_jscolor.js

@@ -12,9 +12,10 @@
 
 //Ive made changes to this script. ctrl+f [lospec]
 //skeddles variables [lospec]
+/* eslint-disable */
 var colorPickerBottomAdded;
 var newjsColorPickerBottom;
-"use strict";
+'use strict';
 
 
 if (!window.jscolor) { window.jscolor = (function () {
@@ -181,7 +182,7 @@ var jsc = {
                         document.detachEvent('onreadystatechange', arguments.callee);
                         fireOnce();
                     }
-			})
+                });
 
                 // Fallback
                 window.attachEvent('onload', fireOnce);
@@ -561,8 +562,8 @@ var jsc = {
                     else {
                         //console.log('clicked outside of color picker')
                         //unhide hidden edit button [lospec]
-				  var hiddenButton = document.querySelector(".color-edit-button.hidden")
+                        var hiddenButton = document.querySelector('.color-edit-button.hidden');
-				  if (hiddenButton) hiddenButton.classList.remove("hidden");
+                        if (hiddenButton) hiddenButton.classList.remove('hidden');
 
                         //close color picker
                         jsc.picker.owner.hide();
@@ -650,8 +651,8 @@ var jsc = {
                 case 'pad':
                     // if the slider is at the bottom, move it up
                     switch (jsc.getSliderComponent(thisObj)) {
-			case 's': if (thisObj.hsv[1] === 0) { thisObj.fromHSV(null, 100, null); }; break;
+                        case 's': if (thisObj.hsv[1] === 0) { thisObj.fromHSV(null, 100, null); } break;
-			case 'v': if (thisObj.hsv[2] === 0) { thisObj.fromHSV(null, null, 100); }; break;
+                        case 'v': if (thisObj.hsv[2] === 0) { thisObj.fromHSV(null, null, 100); } break;
                     }
                     jsc.setPad(thisObj, e, 0, 0);
                     break;
@@ -681,7 +682,7 @@ var jsc = {
                         jsc.dispatchFineChange(thisObj);
                         break;
                 }
-		}
+            };
         },
 
 
@@ -835,7 +836,7 @@ var jsc = {
                 hGrad.type = 'gradient';
                 hGrad.method = 'linear';
                 hGrad.angle = '90';
-			hGrad.colors = '16.67% #F0F, 33.33% #00F, 50% #0FF, 66.67% #0F0, 83.33% #FF0'
+                hGrad.colors = '16.67% #F0F, 33.33% #00F, 50% #0FF, 66.67% #0F0, 83.33% #FF0';
 
                 var hRect = document.createElement(jsc._vmlNS + ':rect');
                 hRect.style.position = 'absolute';
@@ -1074,7 +1075,7 @@ var jsc = {
                     //set the color to old color, in case the color is a duplicate that hasn't been resolved yet [lospec]
                     var hexInput = document.getElementById('jscolor-hex-input');
                     var oldColor = '#'+rgbToHex(hexInput.oldColor);
-        this.fromString(oldColor)
+                    this.fromString(oldColor);
                     document.getElementById('duplicate-color-warning').style.visibility = 'hidden';
 
                     //dialog is closed
@@ -1096,7 +1097,7 @@ var jsc = {
                 var hexInput = document.getElementById('jscolor-hex-input');
 
                 //set the value element to the hex input  
-			this.valueElement = hexInput
+                this.valueElement = hexInput;
 
                 //update hex code 
                 this.exportColor();
@@ -1116,7 +1117,7 @@ var jsc = {
                     deleteButton.classList.remove('disabled');
 
                 //hide duplicate color warning
-      var duplicateColorWarning = document.getElementById("duplicate-color-warning");
+                var duplicateColorWarning = document.getElementById('duplicate-color-warning');
                 duplicateColorWarning.style.visibility = 'hidden';
             };
 

js/_layer.js

@@ -15,9 +15,9 @@
  * @param canvas HTML canvas element
  */
 function Layer(width, height, canvas) {
-    this.canvasSize = [width, height],
+    this.canvasSize = [width, height];
-    this.canvas = canvas,
+    this.canvas = canvas;
-    this.context = this.canvas.getContext("2d"),
+    this.context = this.canvas.getContext('2d');
     // Initializes the canvas
     this.initialize = function() {
         var maxHorizontalZoom = Math.floor(window.innerWidth/this.canvasSize[0]*0.75);
@@ -41,7 +41,7 @@ function Layer(width, height, canvas) {
 
         this.context.imageSmoothingEnabled = false;
         this.context.mozImageSmoothingEnabled = false;
-    },
+    };
     // Resizes canvas
     this.resize = function() {
         let newWidth = (this.canvas.width * zoom) + 'px';
@@ -49,7 +49,7 @@ function Layer(width, height, canvas) {
 
         this.canvas.style.width = newWidth;
         this.canvas.style.height = newHeight;
-    },
+    };
     // Copies the otherCanvas' position and size
     this.copyData = function(otherCanvas) {
         this.canvas.style.width = otherCanvas.canvas.style.width;
@@ -57,5 +57,5 @@ function Layer(width, height, canvas) {
 
         this.canvas.style.left = otherCanvas.canvas.style.left;
         this.canvas.style.top = otherCanvas.canvas.style.top;
-    }
+    };
 }

js/_loadImage.js

@@ -22,7 +22,7 @@ document.getElementById('open-image-browse-holder').addEventListener('change', f
 
                     var imagePixelDataLength = imagePixelData.length;
 
-					console.log(imagePixelData)
+                    console.log(imagePixelData);
                     for (var i = 0; i < imagePixelDataLength; i += 4) {
                         var color = imagePixelData[i]+','+imagePixelData[i + 1]+','+imagePixelData[i + 2];
                         if (!colorPalette[color]) {
@@ -30,7 +30,7 @@ document.getElementById('open-image-browse-holder').addEventListener('change', f
 
                             //don't allow more than 256 colors to be added
                             if (Object.keys(colorPalette).length >= settings.maxColorsOnImportedImage) {
-							  alert('The image loaded seems to have more than '+settings.maxColorsOnImportedImage+' colors.')
+                                alert('The image loaded seems to have more than '+settings.maxColorsOnImportedImage+' colors.');
                                 break;
                             }
                         }
@@ -43,7 +43,7 @@ document.getElementById('open-image-browse-holder').addEventListener('change', f
                             colorPaletteArray.push('#'+rgbToHex(colorPalette[color]));
                         }
                     }
-					console.log('COLOR PALETTE ARRAY', colorPaletteArray)
+                    console.log('COLOR PALETTE ARRAY', colorPaletteArray);
 
                     //create palette form colors array
                     createColorPalette(colorPaletteArray, false);

js/_loadPalette.js

@@ -14,8 +14,8 @@ document.getElementById('load-palette-browse-holder').addEventListener('change',
                 img.onload = function() {
 
                     //draw image onto the temporary canvas
-					var loadPaletteCanvas = document.getElementById("load-palette-canvas-holder");
+                    var loadPaletteCanvas = document.getElementById('load-palette-canvas-holder');
-          var loadPaletteContext = loadPaletteCanvas.getContext("2d");
+                    var loadPaletteContext = loadPaletteCanvas.getContext('2d');
 
                     loadPaletteCanvas.width = img.width;
                     loadPaletteCanvas.height = img.height;
@@ -26,7 +26,7 @@ document.getElementById('load-palette-browse-holder').addEventListener('change',
                     var colorPalette = [];
                     var imagePixelData = loadPaletteContext.getImageData(0,0,this.width, this.height).data;
 
-					console.log(imagePixelData)
+                    console.log(imagePixelData);
 
                     //loop through pixels looking for colors to add to palette
                     for (var i = 0; i < imagePixelData.length; i += 4) {

js/_mouseEvents.js

@@ -118,8 +118,29 @@ window.addEventListener("mouseup", function (mouseEvent) {
 		if (mouseEvent.which == 1){
 			mode = "in";
         }
+    }
+    else if (currentTool == 'fill' && mouseEvent.target.className == 'drawingCanvas') {
+        console.log('filling');
+        //if you clicked on anything but the canvas, do nothing
+        if (!mouseEvent.target == currentLayer.canvas) return;
+
+        //get cursor postion
+        var cursorLocation = getCursorPosition(mouseEvent);
+
+        //offset to match cursor point
+        cursorLocation[0] += 2;
+        cursorLocation[1] += 12;
+
+        //fill starting at the location
+        fill(cursorLocation);
+    }
+    else if (currentTool == 'zoom' && mouseEvent.target.className == 'drawingCanvas') {
+        let mode;
+        if (mouseEvent.which == 1){
+            mode = 'in';
+        }
         else if (mouseEvent.which == 3){
-			mode = "out";
+            mode = 'out';
         }
 
         changeZoom(layers[0], mode, getCursorPosition(mouseEvent));
@@ -143,6 +164,19 @@ window.addEventListener("mouseup", function (mouseEvent) {
 
 }, false);
 
+function setPreviewPosition(preview, cursor, size){
+    preview.style.left = (
+        currentLayer.canvas.offsetLeft
+        + Math.floor(cursor[0]/zoom) * zoom
+        - Math.floor(size / 2) * zoom
+    ) + 'px';
+    preview.style.top = (
+        currentLayer.canvas.offsetTop
+        + Math.floor(cursor[1]/zoom) * zoom
+        - Math.floor(size / 2) * zoom
+    ) + 'px';
+}
+
 
 // OPTIMIZABLE: redundant || mouseEvent.target.className in currentTool ifs
 
@@ -339,7 +373,7 @@ canvasView.addEventListener("wheel", function(mouseEvent){
         }
 
         // Changing zoom and position of the first layer
-        changeZoom(layers[0], mode, getCursorPosition(mouseEvent))
+        changeZoom(layers[0], mode, getCursorPosition(mouseEvent));
 
         for (let i=1; i<layers.length; i++) {
             // Copying first layer's data into the other layers

js/_move.js

@@ -26,7 +26,7 @@ function updateMovePreview(mouseEvent) {
         Math.round(lastMousePos[1] / zoom - imageDataToMove.height / 2));
 
     lastMovePos = lastMousePos;
-	moveSelection(lastMousePos[0] / zoom, lastMousePos[1] / zoom, imageDataToMove.width, imageDataToMove.height) 
+    moveSelection(lastMousePos[0] / zoom, lastMousePos[1] / zoom, imageDataToMove.width, imageDataToMove.height); 
 }
 
 function endSelection() {

js/_onbeforeunload.js

@@ -4,4 +4,4 @@ window.onbeforeunload = function() {
         return 'You will lose your pixel if it\'s not saved!';
 
     else return;
-}
+};

js/_palettes.js

@@ -1,10 +1,10 @@
 //populate palettes list in new pixel menu
 Object.keys(palettes).forEach(function(paletteName,index) {
 
-    var palettesMenu = document.getElementById("palette-menu");
+    var palettesMenu = document.getElementById('palette-menu');
 
     //create button
-    var button = document.createElement("button");
+    var button = document.createElement('button');
     button.appendChild(document.createTextNode(paletteName));
 
     //insert new element
@@ -39,7 +39,7 @@ on('click', 'no-palette-button', function () {
 
 //select load palette
 on('click', 'load-palette-button', function () {
-  document.getElementById("load-palette-browse-holder").click();
+    document.getElementById('load-palette-browse-holder').click();
 });
 
 

js/_presets.js

@@ -20,10 +20,10 @@ var presets = {
 //populate preset list in new pixel menu
 Object.keys(presets).forEach(function(presetName,index) {
 
-    var presetsMenu = document.getElementById("preset-menu");
+    var presetsMenu = document.getElementById('preset-menu');
 
     //create button
-    var button = document.createElement("button");
+    var button = document.createElement('button');
     button.appendChild(document.createTextNode(presetName));
 
     //insert new element

js/_rectSelect.js

@@ -86,12 +86,12 @@ function cutSelection(mouseEvent) {
 
 function drawRect(x, y) {
     // Getting the vfx context
-	let vfxContext = VFXCanvas.getContext("2d");
+    let vfxContext = VFXCanvas.getContext('2d');
 
     // Clearing the vfx canvas
     vfxContext.clearRect(0, 0, VFXCanvas.width, VFXCanvas.height);
     vfxContext.lineWidth = 1;
-	vfxContext.strokeStyle = "black";
+    vfxContext.strokeStyle = 'black';
     vfxContext.setLineDash([4]);
 
     // Drawing the rect
@@ -131,7 +131,7 @@ function cursorInSelectedArea() {
 
 function moveSelection(x, y, width, height) {
     // Getting the vfx context
-	let vfxContext = VFXCanvas.getContext("2d");
+    let vfxContext = VFXCanvas.getContext('2d');
 
     // Clearing the vfx canvas
     vfxContext.clearRect(0, 0, VFXCanvas.width, VFXCanvas.height);

js/_rectangle.js

@@ -19,8 +19,8 @@ function startRectDrawing(mouseEvent) {
 
     // Saving the start coords of the rect
     let cursorPos = getCursorPosition(mouseEvent);
-	startRectX = Math.round(cursorPos[0] / zoom) - 0.5;
+    startRectX = Math.floor(cursorPos[0] / zoom) + 0.5;
-	startRectY = Math.round(cursorPos[1] / zoom) - 0.5;
+    startRectY = Math.floor(cursorPos[1] / zoom) + 0.5;
 
     drawRectangle(startRectX, startRectY);
 }
@@ -106,12 +106,12 @@ function drawRectangle(x, y) {
 
 function setRectToolSvg() {
     if (drawMode == 'empty') {
-		emptySVG.setAttribute("display", "visible");
+        emptySVG.setAttribute('display', 'visible');
-		fullSVG.setAttribute("display", "none");
+        fullSVG.setAttribute('display', 'none');
     }
     else {
-		emptySVG.setAttribute("display", "none");
+        emptySVG.setAttribute('display', 'none');
-		fullSVG.setAttribute("display", "visible");
+        fullSVG.setAttribute('display', 'visible');
     }
 }
 

js/_settings.js

@@ -7,7 +7,7 @@ if (!Cookies.enabled) {
 //try to load settings from cookie
 var settingsFromCookie = Cookies.get('pixelEditorSettings');
 if(!settingsFromCookie) {
-  console.log('settings cookie not found')
+    console.log('settings cookie not found');
     settings = {
         switchToChangedColor: true,
         enableDynamicCursorOutline: true, //unused - performance
@@ -29,7 +29,7 @@ on('click', 'save-settings', function (){
 
     //check if values are valid
     if (isNaN(getValue('setting-numberOfHistoryStates'))) {
-    alert('Invalid value for numberOfHistoryStates')
+        alert('Invalid value for numberOfHistoryStates');
         return;
     }
 

js/_toolButtons.js

@@ -31,7 +31,7 @@ on('click',"eraser-smaller-button", function(e){
 }, false);
 
 // rectangle
-on('click',"rectangle-button", function(){
+on('click','rectangle-button', function(){
     // If the user clicks twice on the button, they change the draw mode
     if (currentTool.name == 'rectangle') {
         if (drawMode == 'empty') {
@@ -80,7 +80,7 @@ on('click',"zoom-button", function(){
 }, false);
 
 //zoom in button
-on('click',"zoom-in-button", function(){
+on('click','zoom-in-button', function(){
     //changeZoom('in',[window.innerWidth/2-canvas.offsetLeft,window.innerHeight/2-canvas.offsetTop]);
     changeZoom(layers[0],'in', [canvasSize[0] * zoom / 2, canvasSize[1] * zoom / 2]);
 
@@ -90,7 +90,7 @@ on('click',"zoom-in-button", function(){
 }, false);
 
 //zoom out button
-on('click',"zoom-out-button", function(){
+on('click','zoom-out-button', function(){
     changeZoom(layers[0],'out',[canvasSize[0]*zoom/2,canvasSize[1]*zoom/2]);
 
     for (let i=1; i<layers.length; i++) {

js/_variables.js

@@ -13,7 +13,7 @@ var secondCheckerBoardColor = 'rgba(204, 200, 206, 1)';
 // Square size for the checkerboard
 var checkerBoardSquareSize = 16;
 // Checkerboard canvas
-var checkerBoardCanvas = document.getElementById("checkerboard");
+var checkerBoardCanvas = document.getElementById('checkerboard');
 
 //common elements
 var brushPreview = document.getElementById("brush-preview");
@@ -24,8 +24,8 @@ var colorsMenu = document.getElementById("colors-menu");
 var popUpContainer = document.getElementById("pop-up-container");
 
 // main canvas
-var canvas = document.getElementById("pixel-canvas");
+var canvas = document.getElementById('pixel-canvas');
-var context = canvas.getContext("2d");
+var context = canvas.getContext('2d');
 var currentGlobalColor;
 
 // Layers
@@ -36,9 +36,9 @@ var currentLayer;
 // VFX layer used to draw previews of the selection and things like that
 var VFXLayer;
 // VFX canvas
-var VFXCanvas = document.getElementById("vfx-canvas");
+var VFXCanvas = document.getElementById('vfx-canvas');
 
 // TMP layer
 var TMPLayer;
 // TMP canvas
-var TMPCanvas = document.getElementById("tmp-canvas");
+var TMPCanvas = document.getElementById('tmp-canvas');

package.json

@@ -4,21 +4,22 @@
   "description": "Online pixel art creation tool",
   "main": "build.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "node ./build.js ./build",
+    "serve": "node ./server.js ./build 3000",
+    "test": "npm run build && npm run serve"
   },
   "author": "Lospec",
   "license": "ISC",
   "dependencies": {
     "express": "^4.16.4",
     "fs-extra": "^7.0.1",
-    "glob": "^7.1.3",
+    "gulp": "^4.0.2",
-    "gulp": "^4.0.0",
+    "gulp-hb": "^8.0.0",
     "gulp-include": "^2.3.1",
+    "gulp-rename": "^2.0.0",
+    "gulp-sass": "^4.0.2",
     "handlebars-helper-svg": "git+https://bitbucket.org/skeddles/npm-handlebars-helper-svg-lospec-open-source.git",
-    "hbs": "^4.0.3",
+    "open": "^6.0.0",
-    "hbs-register-helpers": "git+https://skeddles@bitbucket.org/skeddles/hbs-register-helpers.git",
-    "hbs-register-partials": "git+https://skeddles@bitbucket.org/skeddles/hbs-register-partials.git",
-    "opn": "^6.0.0",
     "sass": "^1.17.3"
   }
 }

server.js

@@ -0,0 +1,37 @@
+const path = require('path');
+const express = require('express');
+
+const app = express();
+
+const BUILDDIR = process.argv[2] || './build';
+const PORT = process.argv[3] || 3000;
+
+//ROUTE - index.htm
+app.get('/', (req, res) => { 
+    res.sendFile(path.join(__dirname, BUILDDIR, 'index.htm'), {}, function (err) {
+        if(err){
+            console.log('error sending file',err);
+        } else {
+            setTimeout(()=>{
+                console.log('closing server');
+                server.close();
+                process.exit();
+            },1000*10);
+        }
+    });
+});
+
+//ROUTE - other files
+app.use(express.static(path.join(__dirname, BUILDDIR)));
+
+//start server
+var server = app.listen(PORT, () => {
+    console.log(`\nTemp server started at http://localhost:${PORT}!`);
+    //console.log('press ctrl+c to stop ');
+
+    var opn = require('open');
+
+    // opens the url in the default browser
+    opn(`http://localhost:${PORT}`);
+});
+