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

Apply eslint --fix and fix indentation

Browse Source
This commit is contained in:
Theo Cavignac 2020-04-04 09:41:56 +02:00 committed by Théo (Lattay) Cavignac
parent 4123c069e2
commit 6f84b5dfc8
42 changed files with 3872 additions and 3849 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc.json
View File

@ -1,6 +1,6 @@
{
"env": {
"browser": true,
"browser": false,
"commonjs": true,
"es6": true,
"node": true

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

8
js/_changeTool.js
View File

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

8
js/_changeZoom.js
View File

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

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

11
js/_hotkeyListener.js
View File

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

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

34
js/_mouseEvents.js
View File

@ -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")
if (selectedColor) selectedColor.classList.remove("selected");
var selectedColor = document.querySelector('#colors-menu li.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));
@ -146,7 +148,7 @@ window.addEventListener("mouseup", function (mouseEvent) {
// 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 +164,8 @@ function draw (mouseEvent) {
if (currentTool == 'pencil') {
//move the brush preview
brushPreview.style.left = cursorLocation[0] + currentLayer.canvas.offsetLeft - pencilSize * zoom / 2 + 'px';
brushPreview.style.top = cursorLocation[1] + currentLayer.canvas.offsetTop - pencilSize * zoom / 2 + 'px';
brushPreview.style.left = cursorLocation[0] + currentLayer.canvas.offsetLeft - brushSize * zoom / 2 + 'px';
brushPreview.style.top = cursorLocation[1] + currentLayer.canvas.offsetTop - brushSize * zoom / 2 + 'px';
//hide brush preview outside of canvas / canvas view
if (mouseEvent.target.className == 'drawingCanvas'|| mouseEvent.target.className == 'drawingCanvas')
@ -174,14 +176,14 @@ 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));
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');
@ -304,7 +306,7 @@ function draw (mouseEvent) {
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 +328,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 +340,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

8
js/_rectSelect.js
View File

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

16
js/_rectangle.js
View File

@ -1,7 +1,7 @@
var rectangleSize = 1;
var prevRectangleSie = rectangleSize;
var emptySVG = document.getElementById("empty-button-svg");
var fullSVG = document.getElementById("full-button-svg");
var emptySVG = document.getElementById('empty-button-svg');
var fullSVG = document.getElementById('full-button-svg');
var drawMode = 'empty';
var isDrawingRect = false;
@ -36,7 +36,7 @@ function updateRectDrawing(mouseEvent) {
function endRectDrawing(mouseEvent) {
// Getting the end position
let currentPos = getCursorPosition(mouseEvent);
let vfxContext = VFXCanvas.getContext("2d");
let vfxContext = VFXCanvas.getContext('2d');
endRectX = Math.round(currentPos[0] / zoom) + 0.5;
endRectY = Math.round(currentPos[1] / zoom) + 0.5;
@ -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");
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;
}

32
js/_toolButtons.js
View File

@ -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++;
updateCursor();
}, false);
//pencil smaller
on('click',"pencil-smaller-button", function(){
on('click','pencil-smaller-button', function(){
if(brushSize > 1) brushSize--;
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);

16
js/_updateCursor.js
View File

@ -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";
else
canvasView.style.cursor = "url('/pixel-editor/pan.png'), auto";
canvasView.style.cursor = 'url(\'/pixel-editor/pan-held.png\'), auto';
} else {
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';

22
js/_variables.js
View File

File diff suppressed because one or more lines are too long

6
js/pixel-editor.js
View File

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