mirror/pixel-editor
1
0
Fork 0
mirror of https://github.com/lospec/pixel-editor.git synced 2023-08-10 21:12:51 +03:00
Code Issues Projects Releases Wiki Activity

fixed merge

Browse Source
This commit is contained in:
Sam Keddy 2020-04-15 00:10:21 +00:00
commit f3ce09ac5a
45 changed files with 5409 additions and 4199 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
.eslintrc.json Normal file
View File

@ -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"
]
}
}

106
build.js
View File

@ -1,28 +1,25 @@
var fs = require('fs-extra');
var hbs = require('handlebars');
var glob = require("glob");
var sass = require("sass");
var path = require("path");
var gulp = require('gulp');
var include = require('gulp-include');
const fs = require('fs');
const path = require('path');
const gulp = require('gulp');
const include = require('gulp-include');
const hb = require('gulp-hb');
const sass = require('gulp-sass');
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
fs.emptyDirSync(BUILDDIR);
function copy_images(){
gulp.src('./images/')
.pipe(gulp.dest(path.join(BUILDDIR, SLUG)));
}
//copy images
fs.copySync('./images','./build/'+SLUG);
//render js
function 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
var sassFiles = glob.sync('css/*.scss');
function render_css(){
gulp.src('css/*.scss')
.pipe(sass({includePaths: ['css', '_ext/sass', '_ext/modules/css']}))
.pipe(gulp.dest(path.join(BUILDDIR, SLUG)));
}
sassFiles.forEach((s) => {
var f = sass.renderSync({file: s, outFile: 'test.css', includePaths: ['css', '_ext/sass', '_ext/modules/css']});
console.log('compiling:',path.basename(f.stats.entry))
fs.writeFileSync('build/'+SLUG+'/'+path.basename(f.stats.entry,'scss')+'css', f.css);
});
//compile page
var pageTemplate = hbs.compile(fs.readFileSync('./views/'+SLUG+'.hbs',{encoding: 'utf8'}));
var page = pageTemplate({
function compile_page(){
gulp.src(path.join('./views/', SLUG + '.hbs'))
.pipe(hb({encoding: 'utf8'})
.partials('./_ext/modules/_*.hbs')
.helpers({ svg: hb_svg })
.helpers('./_ext/modules/hbs/helpers/**/*.js')
.data({
projectSlug: SLUG,
title: 'Lospec Pixel Editor',
layout: false,
});
//save output
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);
}))
.pipe(rename('index.htm'))
.pipe(gulp.dest(BUILDDIR));
}
});
});
//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)();

34
js/.eslintrc.json Normal file
View File

@ -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"
]
}
}

8
js/_addColor.js
View File

@ -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");
button.classList.add("color-button");
var button = document.createElement('button');
button.classList.add('color-button');
button.style.backgroundColor = newColor;
button.addEventListener("mouseup", clickedColor);
button.addEventListener('mouseup', clickedColor);
listItem.appendChild(button);
/*

10
js/_addColorButton.js
View File

@ -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 newColor = rgbToHex(newColorRgb.r,newColorRgb.g,newColorRgb.b)
var newColorRgb = hslToRgb(hue,sat,lit);
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');

26
js/_changeTool.js
View File

@ -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();
}

1
js/_changeZoom.js
View File

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

5
js/_checkCompatibility.js
View File

@ -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!');

11
js/_clickedColor.js
View File

@ -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")
if (selectedColor) selectedColor.classList.remove("selected");
var selectedColor = document.querySelector('#colors-menu li.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) {
console.log('right clicked color button')
} else if (e.which == 3) { //right clicked color
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();
}
}

10
js/_colorChanged.js
View File

@ -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);

1
js/_createButton.js
View File

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

4
js/_createColorPalette.js
View File

@ -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")
if (selectedColor) selectedColor.classList.remove("selected");
var selectedColor = document.querySelector('#colors-menu li.selected');
if (selectedColor) selectedColor.classList.remove('selected');
//set as current color
newColorElement.classList.add('selected');

6
js/_deleteColor.js
View File

@ -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);

2
js/_dialogue.js
View File

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

16
js/_fileMenu.js
View File

@ -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) {

36
js/_history.js
View File

@ -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(state)
console.log('%csaving history state', undoLogStyle);
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(redoStates)
console.log(undoStates);
console.log(redoStates);
}
function undo () {
@ -167,8 +167,8 @@ function undo () {
document.getElementById('undo-button').classList.add('disabled');
}
console.log(undoStates)
console.log(redoStates)
console.log(undoStates);
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(redoStates)
console.log(undoStates);
console.log(redoStates);
}

23
js/_jscolor.js
View File

@ -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")
if (hiddenButton) hiddenButton.classList.remove("hidden");
var hiddenButton = document.querySelector('.color-edit-button.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 'v': if (thisObj.hsv[2] === 0) { thisObj.fromHSV(null, null, 100); }; 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;
}
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';
};

12
js/_layer.js
View File

@ -15,9 +15,9 @@
* @param canvas HTML canvas element
*/
function Layer(width, height, canvas) {
this.canvasSize = [width, height],
this.canvas = canvas,
this.context = this.canvas.getContext("2d"),
this.canvasSize = [width, height];
this.canvas = canvas;
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;
}
};
}

6
js/_loadImage.js
View File

@ -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);

6
js/_loadPalette.js
View File

@ -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 loadPaletteContext = loadPaletteCanvas.getContext("2d");
var loadPaletteCanvas = document.getElementById('load-palette-canvas-holder');
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) {

38
js/_mouseEvents.js
View File

@ -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

2
js/_move.js
View File

@ -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() {

2
js/_onbeforeunload.js
View File

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

6
js/_palettes.js
View File

@ -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();
});

4
js/_presets.js
View File

@ -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

6
js/_rectSelect.js
View File

@ -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);

12
js/_rectangle.js
View File

@ -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;
startRectY = Math.round(cursorPos[1] / zoom) - 0.5;
startRectX = Math.floor(cursorPos[0] / 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");
fullSVG.setAttribute("display", "none");
emptySVG.setAttribute('display', 'visible');
fullSVG.setAttribute('display', 'none');
}
else {
emptySVG.setAttribute("display", "none");
fullSVG.setAttribute("display", "visible");
emptySVG.setAttribute('display', 'none');
fullSVG.setAttribute('display', 'visible');
}
}

4
js/_settings.js
View File

@ -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;
}

6
js/_toolButtons.js
View File

@ -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++) {

10
js/_variables.js
View File

@ -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 context = canvas.getContext("2d");
var canvas = document.getElementById('pixel-canvas');
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');

2831
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

15
package.json
View File

@ -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.0",
"gulp": "^4.0.2",
"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",
"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",
"open": "^6.0.0",
"sass": "^1.17.3"
}
}

37
server.js Normal file
View File

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