Merge pull request #7 from Lattay/pedantic

Snap brush preview to pixel grid to prevent incoherences between preview and drawing

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

js/_changeZoom.js

@@ -1,4 +1,3 @@
-
 function changeZoom (layer, direction, cursorLocation) {
     var oldWidth = canvasSize[0] * zoom;
     var oldHeight = canvasSize[1] * zoom;
@@ -12,16 +11,15 @@ function changeZoom (layer, direction, cursorLocation) {
         newHeight = canvasSize[1] * zoom;
 
         //adjust canvas position
-		setCanvasOffset(layer.canvas, layer.canvas.offsetLeft + (oldWidth - newWidth) *cursorLocation[0]/oldWidth, layer.canvas.offsetTop + (oldHeight - newHeight) *cursorLocation[1]/oldWidth)
+        setCanvasOffset(layer.canvas, layer.canvas.offsetLeft + (oldWidth - newWidth) *cursorLocation[0]/oldWidth, layer.canvas.offsetTop + (oldHeight - newHeight) *cursorLocation[1]/oldWidth);
-	}
+    } else if (direction == 'in' && zoom + Math.ceil(zoom/10) < window.innerHeight/4){
     //if you want to zoom in 
-	else if (direction == 'in' && zoom + Math.ceil(zoom/10) < window.innerHeight/4){
         zoom += Math.ceil(zoom/10);
         newWidth = canvasSize[0] * zoom;
         newHeight = canvasSize[1] * zoom;
 
         //adjust canvas position
-		setCanvasOffset(layer.canvas, layer.canvas.offsetLeft - Math.round((newWidth - oldWidth)*cursorLocation[0]/oldWidth), layer.canvas.offsetTop - Math.round((newHeight - oldHeight)*cursorLocation[1]/oldHeight))
+        setCanvasOffset(layer.canvas, layer.canvas.offsetLeft - Math.round((newWidth - oldWidth)*cursorLocation[0]/oldWidth), layer.canvas.offsetTop - Math.round((newHeight - oldHeight)*cursorLocation[1]/oldHeight));
     }
 
     //resize canvas

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/_hotkeyListener.js

@@ -12,13 +12,12 @@ function KeyPress(e) {
     if (!documentCreated || dialogueOpen) return;
 
     //
-	if (e.key === "Escape") {
+    if (e.key === 'Escape') {
         if (!selectionCanceled) {
             endSelection();
             changeTool('pencil');
         }
-	}
+    } else {
-	else {
         switch (keyboardEvent.keyCode) {
             //pencil tool - 1, b
             case 49: case 66: 
@@ -42,7 +41,7 @@ function KeyPress(e) {
                 break;
                 // eraser -6, r
             case 54: case 82:
-		         console.log("Pressed r");
+                console.log('Pressed r');
                 changeTool('eraser');
                 break;
                 // Rectangular selection	
@@ -51,7 +50,7 @@ function KeyPress(e) {
                 break;
                 //Z
             case 90:
-			  console.log('PRESSED Z ', keyboardEvent.ctrlKey)
+                console.log('PRESSED Z ', keyboardEvent.ctrlKey);
                 //CTRL+ALT+Z redo
                 if (keyboardEvent.altKey && keyboardEvent.ctrlKey) 
                     redo();
@@ -85,7 +84,7 @@ function KeyPress(e) {
 
 document.onkeydown = KeyPress;
 
-window.addEventListener("keyup", function (e) {
+window.addEventListener('keyup', function (e) {
 
     if (e.keyCode == 32) spacePressed = false;
 

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

@@ -3,7 +3,7 @@ var currentMouseEvent;
 var lastMousePos;
 
 //mousedown - start drawing
-window.addEventListener("mousedown", function (mouseEvent) {
+window.addEventListener('mousedown', function (mouseEvent) {
     // Saving the event in case something else needs it
     currentMouseEvent = mouseEvent;
     canDraw = true;
@@ -61,7 +61,7 @@ window.addEventListener("mousedown", function (mouseEvent) {
 
 
 //mouseup - end drawing
-window.addEventListener("mouseup", function (mouseEvent) {
+window.addEventListener('mouseup', function (mouseEvent) {
     // Saving the event in case something else needs it
     currentMouseEvent = mouseEvent;
 
@@ -74,7 +74,7 @@ window.addEventListener("mouseup", function (mouseEvent) {
         var selectedColor = context.getImageData(Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom),1,1);
         var newColor = rgbToHex(selectedColor.data[0],selectedColor.data[1],selectedColor.data[2]);
 
-		currentGlobalColor = "#" + newColor;
+        currentGlobalColor = '#' + newColor;
 
         var colors = document.getElementsByClassName('color-button');
         for (var i = 0; i < colors.length; i++) {
@@ -85,8 +85,8 @@ window.addEventListener("mouseup", function (mouseEvent) {
                 console.log('color found');
 
                 //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
                 context.fillStyle = '#'+newColor;
@@ -100,7 +100,9 @@ window.addEventListener("mouseup", function (mouseEvent) {
         }
     }
     else if (currentTool == 'fill' && mouseEvent.target.className == 'drawingCanvas') {
-	  console.log('filling')
+        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);
@@ -115,10 +117,10 @@ window.addEventListener("mouseup", function (mouseEvent) {
     else if (currentTool == 'zoom' && mouseEvent.target.className == 'drawingCanvas') {
         let mode;
         if (mouseEvent.which == 1){
-			mode = "in";
+            mode = 'in';
         }
         else if (mouseEvent.which == 3){
-			mode = "out";
+            mode = 'out';
         }
 
         changeZoom(layers[0], mode, getCursorPosition(mouseEvent));
@@ -142,11 +144,24 @@ 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
 
 //mouse is moving on canvas		
-window.addEventListener("mousemove", draw, false);
+window.addEventListener('mousemove', draw, false);
 function draw (mouseEvent) {
     lastMousePos = getCursorPosition(mouseEvent);
     // Saving the event in case something else needs it
@@ -162,8 +177,7 @@ function draw (mouseEvent) {
 
     if (currentTool == 'pencil') {
         //move the brush preview
-		brushPreview.style.left = cursorLocation[0] + currentLayer.canvas.offsetLeft - pencilSize * zoom / 2 + 'px';
+        setPreviewPosition(brushPreview, cursorLocation, pencilSize);
-		brushPreview.style.top = cursorLocation[1] + currentLayer.canvas.offsetTop - pencilSize * zoom / 2 + 'px';
 
         //hide brush preview outside of canvas / canvas view
         if (mouseEvent.target.className == 'drawingCanvas'|| mouseEvent.target.className == 'drawingCanvas')
@@ -174,14 +188,18 @@ function draw (mouseEvent) {
         //draw line to current pixel
         if (dragging) {
             if (mouseEvent.target.className == 'drawingCanvas' || mouseEvent.target.className == 'drawingCanvas') {
-				line(Math.floor(lastPos[0]/zoom),Math.floor(lastPos[1]/zoom),Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom), pencilSize);
+                line(
+                    Math.floor(lastPos[0]/zoom), Math.floor(lastPos[1]/zoom),
+                    Math.floor(cursorLocation[0]/zoom), Math.floor(cursorLocation[1]/zoom),
+                    pencilSize
+                );
                 lastPos = cursorLocation;
             }
         }
 
         //get lightness value of color
         var selectedColor = context.getImageData(Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom),1,1).data;
-		var colorLightness = Math.max(selectedColor[0],selectedColor[1],selectedColor[2])
+        var colorLightness = Math.max(selectedColor[0],selectedColor[1],selectedColor[2]);
 
         //for the darkest 50% of colors, change the brush preview to dark mode
         if (colorLightness>127) brushPreview.classList.remove('dark');
@@ -191,8 +209,7 @@ function draw (mouseEvent) {
     else if (currentTool == 'eraser') {
         // Uses the same preview as the brush
         //move the brush preview
-        brushPreview.style.left = cursorLocation[0] + canvas.offsetLeft - eraserSize * zoom / 2 + 'px';
+        setPreviewPosition(brushPreview, cursorLocation, eraserSize);
-        brushPreview.style.top = cursorLocation[1] + canvas.offsetTop - eraserSize * zoom / 2 + 'px';
 
         //hide brush preview outside of canvas / canvas view
         if (mouseEvent.target.className == 'drawingCanvas' || mouseEvent.target.className == 'drawingCanvas')
@@ -203,7 +220,11 @@ function draw (mouseEvent) {
         //draw line to current pixel
         if (dragging) {
             if (mouseEvent.target.className == 'drawingCanvas' || mouseEvent.target.className == 'drawingCanvas') {
-                line(Math.floor(lastPos[0]/zoom),Math.floor(lastPos[1]/zoom),Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom), eraserSize);
+                line(
+                    Math.floor(lastPos[0]/zoom), Math.floor(lastPos[1]/zoom),
+                    Math.floor(cursorLocation[0]/zoom), Math.floor(cursorLocation[1]/zoom),
+                    eraserSize
+                );
                 lastPos = cursorLocation;
             }
         }
@@ -211,8 +232,7 @@ function draw (mouseEvent) {
     else if (currentTool == 'rectangle')
     {
         //move the brush preview
-		brushPreview.style.left = cursorLocation[0] + currentLayer.canvas.offsetLeft - rectangleSize * zoom / 2 + 'px';
+        setPreviewPosition(brushPreview, cursorLocation, rectangleSize)
-		brushPreview.style.top = cursorLocation[1] + currentLayer.canvas.offsetTop - rectangleSize * zoom / 2 + 'px';
 
         //hide brush preview outside of canvas / canvas view
         if (mouseEvent.target.className == 'drawingCanvas'|| mouseEvent.target.className == 'drawingCanvas')
@@ -262,8 +282,7 @@ function draw (mouseEvent) {
         pencilSize = Math.max(1, newBrushSize);
 
         //fix offset so the cursor stays centered
-        brushPreview.style.left = lastPos[0] + currentLayer.canvas.offsetLeft - pencilSize * zoom / 2 + 'px';
+        setPreviewPosition(brushPreview, cursorLocation, pencilSize);
-        brushPreview.style.top = lastPos[1] + currentLayer.canvas.offsetTop - pencilSize * zoom / 2 + 'px';
 
         updateCursor();
     }
@@ -279,8 +298,7 @@ function draw (mouseEvent) {
         eraserSize = Math.max(1,newEraserSizeChange);
 
         //fix offset so the cursor stays centered
-        brushPreview.style.left = lastPos[0] + currentLayer.canvas.offsetLeft - eraserSize * zoom / 2 + 'px';
+        setPreviewPosition(brushPreview, cursorLocation, eraserSize);
-        brushPreview.style.top = lastPos[1] + currentLayer.canvas.offsetTop - eraserSize * zoom / 2 + 'px';
 
         updateCursor();
     }
@@ -296,15 +314,14 @@ function draw (mouseEvent) {
         rectangleSize = Math.max(1,newRectangleSize);
 
         //fix offset so the cursor stays centered
-        brushPreview.style.left = lastPos[0] + currentLayer.canvas.offsetLeft - rectangleSize * zoom / 2 + 'px';
+        setPreviewPosition(brushPreview, cursorLocation, rectangleSize);
-        brushPreview.style.top = lastPos[1] + currentLayer.canvas.offsetTop - rectangleSize * zoom / 2 + 'px';
 
         updateCursor();
     }
     else if (currentTool == 'rectselect') {
         if (dragging && !isRectSelecting && mouseEvent.target.className == 'drawingCanvas') {
             isRectSelecting = true;
-    		console.log("cominciata selezione su " + mouseEvent.target.className);
+            console.log('cominciata selezione su ' + mouseEvent.target.className);
             startRectSelection(mouseEvent);
         }
         else if (dragging && isRectSelecting) {
@@ -326,7 +343,7 @@ function draw (mouseEvent) {
 }
 
 //mousewheel scrroll
-canvasView.addEventListener("wheel", function(mouseEvent){
+canvasView.addEventListener('wheel', function(mouseEvent){
 
     if (currentTool == 'zoom' || mouseEvent.altKey) {
         let mode;
@@ -338,7 +355,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

@@ -73,7 +73,7 @@ function endRectSelection(mouseEvent) {
 }
 
 function cutSelection(mouseEvent) {
-	console.log("Coordinate: start x, y: " + startX + ", " + startY + " end x, y: " + endX + ", " + endY);
+    console.log('Coordinate: start x, y: ' + startX + ', ' + startY + ' end x, y: ' + endX + ', ' + endY);
     // Getting the selected pixels
     imageDataToMove = currentLayer.context.getImageData(startX, startY, endX - startX + 1, endY - startY + 1);
 	
@@ -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

@@ -1,7 +1,7 @@
 var rectangleSize = 1;
 var prevRectangleSie = rectangleSize;
-var emptySVG = document.getElementById("empty-button-svg");
+var emptySVG = document.getElementById('empty-button-svg');
-var fullSVG = document.getElementById("full-button-svg");
+var fullSVG = document.getElementById('full-button-svg');
 
 var drawMode = 'empty';
 var isDrawingRect = false;
@@ -20,8 +20,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);
 }
@@ -30,16 +30,16 @@ function updateRectDrawing(mouseEvent) {
     let pos = getCursorPosition(mouseEvent);
 	
     // Drawing the rect
-	drawRectangle(Math.round(pos[0] / zoom) + 0.5, Math.round(pos[1] / zoom) + 0.5);
+    drawRectangle(Math.floor(pos[0] / zoom) + 0.5, Math.floor(pos[1] / zoom) + 0.5);
 }
 
 function endRectDrawing(mouseEvent) {
     // Getting the end position
-	let currentPos = getCursorPosition(mouseEvent);
+    let cursorPos = getCursorPosition(mouseEvent);
-	let vfxContext = VFXCanvas.getContext("2d");
+    let vfxContext = VFXCanvas.getContext('2d');
 
-	endRectX = Math.round(currentPos[0] / zoom) + 0.5;
+    endRectX = Math.floor(cursorPos[0] / zoom) + 0.5;
-	endRectY = Math.round(currentPos[1] / zoom) + 0.5;
+    endRectY = Math.floor(cursorPos[1] / zoom) + 0.5;
 
     // Inverting end and start (start must always be the top left corner)
     if (endRectX < startRectX) {
@@ -82,7 +82,7 @@ function endRectDrawing(mouseEvent) {
 	
 function drawRectangle(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);
@@ -107,12 +107,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

@@ -1,39 +1,39 @@
 //pencil
-on('click',"pencil-button", function(){
+on('click','pencil-button', function(){
     changeTool('pencil');
 }, false);
 
 //pencil bigger
-on('click',"pencil-bigger-button", function(){
+on('click','pencil-bigger-button', function(){
-    brushSize++;
+    pencilSize++;
     updateCursor();
 }, false);
 
 //pencil smaller
-on('click',"pencil-smaller-button", function(){
+on('click','pencil-smaller-button', function(){
-    if(brushSize > 1) brushSize--;
+    if(pencilSize > 1) pencilSize--;
     updateCursor();
 }, false);
 
 //eraser
-on('click',"eraser-button", function(){
+on('click','eraser-button', function(){
     changeTool('eraser');
 }, false);
 
 //eraser bigger
-on('click',"eraser-bigger-button", function(){
+on('click','eraser-bigger-button', function(){
     eraserSize++;
     updateCursor();
 }, false);
 
 //eraser smaller
-on('click',"eraser-smaller-button", function(e){
+on('click','eraser-smaller-button', function(e){
     if(eraserSize > 1) eraserSize--;
     updateCursor();
 }, 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 == 'rectangle') {
         if (drawMode == 'empty') {
@@ -51,39 +51,39 @@ on('click',"rectangle-button", function(){
 }, false);
 
 // rectangle bigger
-on('click',"rectangle-bigger-button", function(){
+on('click','rectangle-bigger-button', function(){
     rectangleSize++;
     updateCursor();
 }, false);
 
 // rectangle smaller
-on('click',"rectangle-smaller-button", function(e){
+on('click','rectangle-smaller-button', function(e){
     if(rectangleSize > 1) rectangleSize--;
     updateCursor();
 }, false);
 
 //fill
-on('click',"fill-button", function(){
+on('click','fill-button', function(){
     changeTool('fill');
 }, false);	
 
 //pan
-on('click',"pan-button", function(){
+on('click','pan-button', function(){
     changeTool('pan');
 }, false);	
 
 //eyedropper
-on('click',"eyedropper-button", function(){
+on('click','eyedropper-button', function(){
     changeTool('eyedropper');
 }, false);		
 
 //zoom tool button
-on('click',"zoom-button", function(){
+on('click','zoom-button', function(){
     changeTool('zoom');
 }, 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]);
 
@@ -93,7 +93,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++) {
@@ -102,6 +102,6 @@ on('click',"zoom-out-button", function(){
 }, false);
 
 //rectangular selection button
-on('click', "rectselect-button", function(){
+on('click', 'rectselect-button', function(){
     changeTool('rectselect');
 }, false);

js/_updateCursor.js

@@ -1,4 +1,3 @@
-
 //set the correct cursor for the current tool
 function updateCursor () {
     if (currentTool == 'pencil' || currentTool == 'resize-brush') {
@@ -33,21 +32,22 @@ function updateCursor () {
         brushPreview.style.display = 'none';
 
     if (currentTool == 'eyedropper') {
-		canvasView.style.cursor = "url('/pixel-editor/eyedropper.png'), auto";
+        canvasView.style.cursor = 'url(\'/pixel-editor/eyedropper.png\'), auto';
     } else 
         eyedropperPreview.style.display = 'none';
 
-	if (currentTool == 'pan') 
+    if (currentTool == 'pan') {
         if (dragging)
-			canvasView.style.cursor = "url('/pixel-editor/pan-held.png'), auto";
+            canvasView.style.cursor = 'url(\'/pixel-editor/pan-held.png\'), auto';
-		else
+    } else {
-			canvasView.style.cursor = "url('/pixel-editor/pan.png'), auto";
+        canvasView.style.cursor = 'url(\'/pixel-editor/pan.png\'), auto';
+    }
 
     if (currentTool == 'fill') 
-		canvasView.style.cursor = "url('/pixel-editor/fill.png'), auto";
+        canvasView.style.cursor = 'url(\'/pixel-editor/fill.png\'), auto';
 
     if (currentTool == 'zoom') 
-		canvasView.style.cursor = "url('/pixel-editor/zoom-in.png'), auto";
+        canvasView.style.cursor = 'url(\'/pixel-editor/zoom-in.png\'), auto';
 
     if (currentTool == 'resize-brush' || currentTool == 'resize-eraser')
         canvasView.style.cursor = 'default';

js/pixel-editor.js

@@ -1,5 +1,3 @@
-
-
 /**utilities**/
 //=include utilities/on.js 
 //=include utilities/onChildren.js 
@@ -15,8 +13,6 @@
 //=include libraries/cookies.js
 //=include _pixelEditorUtility.js
 
-
-
 /**init**/
 //=include _consts.js
 //=include _variables.js 
@@ -46,7 +42,6 @@
 //=include _checkerboard.js
 //=include _layer.js
 
-
 /**load file**/
 //=include _loadImage.js 
 //=include _loadPalette.js 
@@ -65,7 +60,6 @@
 //=include _move.js
 //=include _rectangle.js
 
-
 /**onload**/
 //=include _onLoad.js 
 //=include _onbeforeunload.js 

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