mirror of
https://github.com/lospec/pixel-editor.git
synced 2023-08-10 21:12:51 +03:00
Apply eslint --fix and fix indentation
This commit is contained in:
Theo Cavignac
committed by
Théo (Lattay) Cavignac
Théo (Lattay) Cavignac
parent
4123c069e2
commit
6f84b5dfc8
@ -3,193 +3,195 @@ var currentMouseEvent;
|
||||
var lastMousePos;
|
||||
|
||||
//mousedown - start drawing
|
||||
window.addEventListener("mousedown", function (mouseEvent) {
|
||||
// Saving the event in case something else needs it
|
||||
currentMouseEvent = mouseEvent;
|
||||
canDraw = true;
|
||||
|
||||
//if no document has been created yet, or this is a dialog open
|
||||
if (!documentCreated || dialogueOpen) return;
|
||||
//prevent right mouse clicks and such, which will open unwanted menus
|
||||
//mouseEvent.preventDefault();
|
||||
|
||||
lastPos = getCursorPosition(mouseEvent);
|
||||
|
||||
dragging = true;
|
||||
//left or right click ?
|
||||
if (mouseEvent.which == 1) {
|
||||
if (spacePressed)
|
||||
currentTool = 'pan';
|
||||
else if (mouseEvent.altKey)
|
||||
currentTool = 'eyedropper';
|
||||
else if (mouseEvent.target.className == 'drawingCanvas' &&
|
||||
(currentTool == 'pencil' || currentTool == 'eraser' || currentTool == 'rectangle'))
|
||||
new HistoryStateEditCanvas();
|
||||
else if (currentTool == 'moveselection') {
|
||||
if (!cursorInSelectedArea()) {
|
||||
changeTool('pencil');
|
||||
canDraw = false;
|
||||
}
|
||||
}
|
||||
//saveHistoryState({type: 'canvas', canvas: context.getImageData(0, 0, canvasSize[0], canvasSize[1])});
|
||||
|
||||
updateCursor();
|
||||
|
||||
if (canDraw) {
|
||||
draw(mouseEvent);
|
||||
}
|
||||
}
|
||||
else if (currentTool == 'pencil' && mouseEvent.which == 3) {
|
||||
currentTool = 'resize-brush';
|
||||
prevBrushSize = pencilSize;
|
||||
}
|
||||
else if (currentTool == 'eraser' && mouseEvent.which == 3) {
|
||||
currentTool = 'resize-eraser';
|
||||
prevEraserSize = eraserSize;
|
||||
}
|
||||
else if (currentTool == 'rectangle' && mouseEvent.which == 3) {
|
||||
currentTool = 'resize-rectangle';
|
||||
prevRectangleSize = rectangleSize;
|
||||
}
|
||||
window.addEventListener('mousedown', function (mouseEvent) {
|
||||
// Saving the event in case something else needs it
|
||||
currentMouseEvent = mouseEvent;
|
||||
canDraw = true;
|
||||
|
||||
if (currentTool == 'eyedropper' && mouseEvent.target.className == 'drawingCanvas')
|
||||
eyedropperPreview.style.display = 'block';
|
||||
|
||||
return false;
|
||||
//if no document has been created yet, or this is a dialog open
|
||||
if (!documentCreated || dialogueOpen) return;
|
||||
//prevent right mouse clicks and such, which will open unwanted menus
|
||||
//mouseEvent.preventDefault();
|
||||
|
||||
lastPos = getCursorPosition(mouseEvent);
|
||||
|
||||
dragging = true;
|
||||
// left or right click ?
|
||||
if (mouseEvent.which == 1) {
|
||||
if (spacePressed)
|
||||
currentTool = 'pan';
|
||||
else if (mouseEvent.altKey)
|
||||
currentTool = 'eyedropper';
|
||||
else if (mouseEvent.target.className == 'drawingCanvas' &&
|
||||
(currentTool == 'pencil' || currentTool == 'eraser' || currentTool == 'rectangle'))
|
||||
new HistoryStateEditCanvas();
|
||||
else if (currentTool == 'moveselection') {
|
||||
if (!cursorInSelectedArea()) {
|
||||
changeTool('pencil');
|
||||
canDraw = false;
|
||||
}
|
||||
}
|
||||
//saveHistoryState({type: 'canvas', canvas: context.getImageData(0, 0, canvasSize[0], canvasSize[1])});
|
||||
|
||||
updateCursor();
|
||||
|
||||
if (canDraw) {
|
||||
draw(mouseEvent);
|
||||
}
|
||||
}
|
||||
else if (currentTool == 'pencil' && mouseEvent.which == 3) {
|
||||
currentTool = 'resize-brush';
|
||||
prevBrushSize = pencilSize;
|
||||
}
|
||||
else if (currentTool == 'eraser' && mouseEvent.which == 3) {
|
||||
currentTool = 'resize-eraser';
|
||||
prevEraserSize = eraserSize;
|
||||
}
|
||||
else if (currentTool == 'rectangle' && mouseEvent.which == 3) {
|
||||
currentTool = 'resize-rectangle';
|
||||
prevRectangleSize = rectangleSize;
|
||||
}
|
||||
|
||||
if (currentTool == 'eyedropper' && mouseEvent.target.className == 'drawingCanvas')
|
||||
eyedropperPreview.style.display = 'block';
|
||||
|
||||
return false;
|
||||
}, false);
|
||||
|
||||
|
||||
|
||||
//mouseup - end drawing
|
||||
window.addEventListener("mouseup", function (mouseEvent) {
|
||||
// Saving the event in case something else needs it
|
||||
currentMouseEvent = mouseEvent;
|
||||
window.addEventListener('mouseup', function (mouseEvent) {
|
||||
// Saving the event in case something else needs it
|
||||
currentMouseEvent = mouseEvent;
|
||||
|
||||
closeMenu();
|
||||
|
||||
if (!documentCreated || dialogueOpen) return;
|
||||
|
||||
if (currentTool == 'eyedropper' && mouseEvent.target.className == 'drawingCanvas') {
|
||||
var cursorLocation = getCursorPosition(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]);
|
||||
closeMenu();
|
||||
|
||||
currentGlobalColor = "#" + newColor;
|
||||
|
||||
var colors = document.getElementsByClassName('color-button');
|
||||
for (var i = 0; i < colors.length; i++) {
|
||||
console.log(colors[i].jscolor.toString());
|
||||
|
||||
//if picked color matches this color
|
||||
if (newColor == colors[i].jscolor.toString()) {
|
||||
console.log('color found');
|
||||
|
||||
//remove current color selection
|
||||
var selectedColor = document.querySelector("#colors-menu li.selected")
|
||||
if (selectedColor) selectedColor.classList.remove("selected");
|
||||
|
||||
//set current color
|
||||
context.fillStyle = '#'+newColor;
|
||||
|
||||
//make color selected
|
||||
colors[i].parentElement.classList.add('selected');
|
||||
|
||||
//hide eyedropper
|
||||
eyedropperPreview.style.display = 'none';
|
||||
}
|
||||
}
|
||||
}
|
||||
else if (currentTool == 'fill' && mouseEvent.target.className == 'drawingCanvas') {
|
||||
console.log('filling')
|
||||
|
||||
//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";
|
||||
if (!documentCreated || dialogueOpen) return;
|
||||
|
||||
if (currentTool == 'eyedropper' && mouseEvent.target.className == 'drawingCanvas') {
|
||||
var cursorLocation = getCursorPosition(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;
|
||||
|
||||
var colors = document.getElementsByClassName('color-button');
|
||||
for (var i = 0; i < colors.length; i++) {
|
||||
console.log(colors[i].jscolor.toString());
|
||||
|
||||
//if picked color matches this color
|
||||
if (newColor == colors[i].jscolor.toString()) {
|
||||
console.log('color found');
|
||||
|
||||
//remove current color selection
|
||||
var selectedColor = document.querySelector('#colors-menu li.selected');
|
||||
if (selectedColor) selectedColor.classList.remove('selected');
|
||||
|
||||
//set current color
|
||||
context.fillStyle = '#'+newColor;
|
||||
|
||||
//make color selected
|
||||
colors[i].parentElement.classList.add('selected');
|
||||
|
||||
//hide eyedropper
|
||||
eyedropperPreview.style.display = 'none';
|
||||
}
|
||||
}
|
||||
else if (mouseEvent.which == 3){
|
||||
mode = "out";
|
||||
}
|
||||
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';
|
||||
}
|
||||
|
||||
changeZoom(layers[0], mode, getCursorPosition(mouseEvent));
|
||||
|
||||
for (let i=1; i<layers.length; i++) {
|
||||
layers[i].copyData(layers[0]);
|
||||
layers[i].copyData(layers[0]);
|
||||
}
|
||||
}
|
||||
else if (currentTool == 'rectselect' && isRectSelecting) {
|
||||
endRectSelection(mouseEvent);
|
||||
}
|
||||
else if (currentTool == 'rectangle') {
|
||||
endRectDrawing(mouseEvent);
|
||||
}
|
||||
}
|
||||
else if (currentTool == 'rectselect' && isRectSelecting) {
|
||||
endRectSelection(mouseEvent);
|
||||
}
|
||||
else if (currentTool == 'rectangle') {
|
||||
endRectDrawing(mouseEvent);
|
||||
}
|
||||
|
||||
dragging = false;
|
||||
currentTool = currentToolTemp;
|
||||
|
||||
updateCursor();
|
||||
|
||||
dragging = false;
|
||||
currentTool = currentToolTemp;
|
||||
|
||||
updateCursor();
|
||||
|
||||
|
||||
}, false);
|
||||
|
||||
|
||||
// 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
|
||||
currentMouseEvent = mouseEvent;
|
||||
lastMousePos = getCursorPosition(mouseEvent);
|
||||
// Saving the event in case something else needs it
|
||||
currentMouseEvent = mouseEvent;
|
||||
|
||||
var cursorLocation = lastMousePos;
|
||||
|
||||
//if a document hasnt yet been created, exit this function
|
||||
if (!documentCreated || dialogueOpen) return;
|
||||
|
||||
|
||||
eyedropperPreview.style.display = 'none';
|
||||
|
||||
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';
|
||||
|
||||
//hide brush preview outside of canvas / canvas view
|
||||
if (mouseEvent.target.className == 'drawingCanvas'|| mouseEvent.target.className == 'drawingCanvas')
|
||||
brushPreview.style.visibility = 'visible';
|
||||
else
|
||||
brushPreview.style.visibility = 'hidden';
|
||||
var cursorLocation = lastMousePos;
|
||||
|
||||
//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);
|
||||
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])
|
||||
|
||||
//for the darkest 50% of colors, change the brush preview to dark mode
|
||||
if (colorLightness>127) brushPreview.classList.remove('dark');
|
||||
else brushPreview.classList.add('dark');
|
||||
}
|
||||
// Decided to write a different implementation in case of differences between the brush and the eraser tool
|
||||
else if (currentTool == 'eraser') {
|
||||
// Uses the same preview as the brush
|
||||
//if a document hasnt yet been created, exit this function
|
||||
if (!documentCreated || dialogueOpen) return;
|
||||
|
||||
|
||||
eyedropperPreview.style.display = 'none';
|
||||
|
||||
if (currentTool == 'pencil') {
|
||||
//move the brush preview
|
||||
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')
|
||||
brushPreview.style.visibility = 'visible';
|
||||
else
|
||||
brushPreview.style.visibility = 'hidden';
|
||||
|
||||
//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));
|
||||
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]);
|
||||
|
||||
//for the darkest 50% of colors, change the brush preview to dark mode
|
||||
if (colorLightness>127) brushPreview.classList.remove('dark');
|
||||
else brushPreview.classList.add('dark');
|
||||
}
|
||||
// Decided to write a different implementation in case of differences between the brush and the eraser tool
|
||||
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';
|
||||
brushPreview.style.top = cursorLocation[1] + canvas.offsetTop - eraserSize * zoom / 2 + 'px';
|
||||
@ -207,30 +209,30 @@ function draw (mouseEvent) {
|
||||
lastPos = cursorLocation;
|
||||
}
|
||||
}
|
||||
}
|
||||
else if (currentTool == 'rectangle')
|
||||
{
|
||||
//move the brush preview
|
||||
brushPreview.style.left = cursorLocation[0] + currentLayer.canvas.offsetLeft - rectangleSize * zoom / 2 + 'px';
|
||||
brushPreview.style.top = cursorLocation[1] + currentLayer.canvas.offsetTop - rectangleSize * zoom / 2 + 'px';
|
||||
}
|
||||
else if (currentTool == 'rectangle')
|
||||
{
|
||||
//move the brush preview
|
||||
brushPreview.style.left = cursorLocation[0] + currentLayer.canvas.offsetLeft - rectangleSize * zoom / 2 + 'px';
|
||||
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')
|
||||
brushPreview.style.visibility = 'visible';
|
||||
else
|
||||
brushPreview.style.visibility = 'hidden';
|
||||
//hide brush preview outside of canvas / canvas view
|
||||
if (mouseEvent.target.className == 'drawingCanvas'|| mouseEvent.target.className == 'drawingCanvas')
|
||||
brushPreview.style.visibility = 'visible';
|
||||
else
|
||||
brushPreview.style.visibility = 'hidden';
|
||||
|
||||
if (!isDrawingRect && dragging) {
|
||||
startRectDrawing(mouseEvent);
|
||||
}
|
||||
else if (dragging){
|
||||
updateRectDrawing(mouseEvent);
|
||||
}
|
||||
}
|
||||
else if (currentTool == 'pan' && dragging) {
|
||||
// Setting first layer position
|
||||
if (!isDrawingRect && dragging) {
|
||||
startRectDrawing(mouseEvent);
|
||||
}
|
||||
else if (dragging){
|
||||
updateRectDrawing(mouseEvent);
|
||||
}
|
||||
}
|
||||
else if (currentTool == 'pan' && dragging) {
|
||||
// Setting first layer position
|
||||
setCanvasOffset(layers[0].canvas, layers[0].canvas.offsetLeft + (cursorLocation[0] - lastPos[0]), layers[0].canvas.offsetTop + (cursorLocation[1] - lastPos[1]));
|
||||
// Copying that position to the other layers
|
||||
// Copying that position to the other layers
|
||||
for (let i=1; i<layers.length; i++) {
|
||||
layers[i].copyData(layers[0]);
|
||||
}
|
||||
@ -240,15 +242,15 @@ function draw (mouseEvent) {
|
||||
|
||||
eyedropperPreview.style.borderColor = '#'+rgbToHex(selectedColor[0],selectedColor[1],selectedColor[2]);
|
||||
eyedropperPreview.style.display = 'block';
|
||||
|
||||
|
||||
eyedropperPreview.style.left = cursorLocation[0] + currentLayer.canvas.offsetLeft - 30 + 'px';
|
||||
eyedropperPreview.style.top = cursorLocation[1] + currentLayer.canvas.offsetTop - 30 + 'px';
|
||||
|
||||
|
||||
var colorLightness = Math.max(selectedColor[0],selectedColor[1],selectedColor[2]);
|
||||
|
||||
|
||||
//for the darkest 50% of colors, change the eyedropper preview to dark mode
|
||||
if (colorLightness>127) eyedropperPreview.classList.remove('dark');
|
||||
else eyedropperPreview.classList.add('dark');
|
||||
if (colorLightness>127) eyedropperPreview.classList.remove('dark');
|
||||
else eyedropperPreview.classList.add('dark');
|
||||
}
|
||||
else if (currentTool == 'resize-brush' && dragging) {
|
||||
//get new brush size based on x distance from original clicking location
|
||||
@ -285,7 +287,7 @@ function draw (mouseEvent) {
|
||||
updateCursor();
|
||||
}
|
||||
else if (currentTool == 'resize-rectangle' && dragging) {
|
||||
//get new brush size based on x distance from original clicking location
|
||||
//get new brush size based on x distance from original clicking location
|
||||
var distanceFromClick = cursorLocation[0] - lastPos[0];
|
||||
//var roundingAmount = 20 - Math.round(distanceFromClick/10);
|
||||
//this doesnt work in reverse... because... it's not basing it off of the brush size which it should be
|
||||
@ -302,48 +304,48 @@ function draw (mouseEvent) {
|
||||
updateCursor();
|
||||
}
|
||||
else if (currentTool == 'rectselect') {
|
||||
if (dragging && !isRectSelecting && mouseEvent.target.className == 'drawingCanvas') {
|
||||
isRectSelecting = true;
|
||||
console.log("cominciata selezione su " + mouseEvent.target.className);
|
||||
startRectSelection(mouseEvent);
|
||||
}
|
||||
else if (dragging && isRectSelecting) {
|
||||
updateRectSelection(mouseEvent);
|
||||
}
|
||||
else if (isRectSelecting) {
|
||||
endRectSelection();
|
||||
}
|
||||
if (dragging && !isRectSelecting && mouseEvent.target.className == 'drawingCanvas') {
|
||||
isRectSelecting = true;
|
||||
console.log('cominciata selezione su ' + mouseEvent.target.className);
|
||||
startRectSelection(mouseEvent);
|
||||
}
|
||||
else if (dragging && isRectSelecting) {
|
||||
updateRectSelection(mouseEvent);
|
||||
}
|
||||
else if (isRectSelecting) {
|
||||
endRectSelection();
|
||||
}
|
||||
}
|
||||
else if (currentTool == 'moveselection') {
|
||||
// Updating the cursor (move if inside rect, cross if not)
|
||||
updateCursor();
|
||||
// Updating the cursor (move if inside rect, cross if not)
|
||||
updateCursor();
|
||||
|
||||
// If I'm dragging, I move the preview
|
||||
if (dragging && cursorInSelectedArea()) {
|
||||
updateMovePreview(mouseEvent);
|
||||
}
|
||||
// If I'm dragging, I move the preview
|
||||
if (dragging && cursorInSelectedArea()) {
|
||||
updateMovePreview(mouseEvent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//mousewheel scrroll
|
||||
canvasView.addEventListener("wheel", function(mouseEvent){
|
||||
|
||||
if (currentTool == 'zoom' || mouseEvent.altKey) {
|
||||
let mode;
|
||||
if (mouseEvent.deltaY < 0){
|
||||
mode = 'in';
|
||||
canvasView.addEventListener('wheel', function(mouseEvent){
|
||||
|
||||
if (currentTool == 'zoom' || mouseEvent.altKey) {
|
||||
let mode;
|
||||
if (mouseEvent.deltaY < 0){
|
||||
mode = 'in';
|
||||
}
|
||||
else if (mouseEvent.deltaY > 0) {
|
||||
mode = 'out';
|
||||
else if (mouseEvent.deltaY > 0) {
|
||||
mode = 'out';
|
||||
}
|
||||
|
||||
// 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
|
||||
// Copying first layer's data into the other layers
|
||||
layers[i].copyData(layers[0]);
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user