mirror of
https://github.com/lospec/pixel-editor.git
synced 2023-08-10 21:12:51 +03:00
Fixed issue #18
This commit is contained in:
unsettledgames
parent
b7d5f603b1
commit
267d1a170e
@ -239,9 +239,11 @@ function HistoryStateAddLayer(layerData, index) {
|
||||
|
||||
this.undo = function() {
|
||||
redoStates.push(this);
|
||||
layers[this.index + 1].selectLayer();
|
||||
|
||||
this.added.canvas.remove();
|
||||
this.added.menuEntry.remove();
|
||||
|
||||
layers.splice(index, 1);
|
||||
};
|
||||
|
||||
|
||||
@ -176,167 +176,170 @@ function setPreviewPosition(preview, cursor, size){
|
||||
//mouse is moving on canvas
|
||||
window.addEventListener("mousemove", draw, false);
|
||||
function draw (mouseEvent) {
|
||||
lastMouseMovePos = getCursorPosition(mouseEvent);
|
||||
// Saving the event in case something else needs it
|
||||
currentMouseEvent = mouseEvent;
|
||||
if (!dialogueOpen)
|
||||
{
|
||||
lastMouseMovePos = getCursorPosition(mouseEvent);
|
||||
// Saving the event in case something else needs it
|
||||
currentMouseEvent = mouseEvent;
|
||||
|
||||
var cursorLocation = lastMouseMovePos;
|
||||
var cursorLocation = lastMouseMovePos;
|
||||
|
||||
//if a document hasnt yet been created or the current layer is locked, exit this function
|
||||
if (!documentCreated || dialogueOpen || !currentLayer.isVisible || currentLayer.isLocked) return;
|
||||
//if a document hasnt yet been created or the current layer is locked, exit this function
|
||||
if (!documentCreated || dialogueOpen || !currentLayer.isVisible || currentLayer.isLocked) return;
|
||||
|
||||
// Moving brush preview
|
||||
currentTool.moveBrushPreview(cursorLocation);
|
||||
// Hiding eyedropper, will be shown if it's needed
|
||||
eyedropperPreview.style.display = 'none';
|
||||
// Moving brush preview
|
||||
currentTool.moveBrushPreview(cursorLocation);
|
||||
// Hiding eyedropper, will be shown if it's needed
|
||||
eyedropperPreview.style.display = 'none';
|
||||
|
||||
if (currentTool.name == 'pencil') {
|
||||
//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 (currentTool.name == 'pencil') {
|
||||
//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(lastMouseClickPos[0]/zoom),Math.floor(lastMouseClickPos[1]/zoom),Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom), tool.pencil.brushSize);
|
||||
lastMouseClickPos = cursorLocation;
|
||||
//draw line to current pixel
|
||||
if (dragging) {
|
||||
if (mouseEvent.target.className == 'drawingCanvas' || mouseEvent.target.className == 'drawingCanvas') {
|
||||
line(Math.floor(lastMouseClickPos[0]/zoom),Math.floor(lastMouseClickPos[1]/zoom),Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom), tool.pencil.brushSize);
|
||||
lastMouseClickPos = cursorLocation;
|
||||
}
|
||||
}
|
||||
|
||||
//get lightness value of color
|
||||
var selectedColor = currentLayer.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');
|
||||
|
||||
currentLayer.updateLayerPreview();
|
||||
}
|
||||
// Decided to write a different implementation in case of differences between the brush and the eraser tool
|
||||
else if (currentTool.name == 'eraser') {
|
||||
//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(lastMouseClickPos[0]/zoom),Math.floor(lastMouseClickPos[1]/zoom),Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom), currentTool.brushSize);
|
||||
lastMouseClickPos = cursorLocation;
|
||||
}
|
||||
}
|
||||
|
||||
currentLayer.updateLayerPreview();
|
||||
}
|
||||
else if (currentTool.name == 'rectangle')
|
||||
{
|
||||
//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);
|
||||
}
|
||||
}
|
||||
|
||||
//get lightness value of color
|
||||
var selectedColor = currentLayer.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');
|
||||
|
||||
currentLayer.updateLayerPreview();
|
||||
}
|
||||
// Decided to write a different implementation in case of differences between the brush and the eraser tool
|
||||
else if (currentTool.name == 'eraser') {
|
||||
//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(lastMouseClickPos[0]/zoom),Math.floor(lastMouseClickPos[1]/zoom),Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom), currentTool.brushSize);
|
||||
lastMouseClickPos = cursorLocation;
|
||||
}
|
||||
}
|
||||
|
||||
currentLayer.updateLayerPreview();
|
||||
}
|
||||
else if (currentTool.name == 'rectangle')
|
||||
{
|
||||
//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 (currentTool.name == 'pan' && dragging) {
|
||||
// Setting first layer position
|
||||
setCanvasOffset(layers[0].canvas, layers[0].canvas.offsetLeft + (cursorLocation[0] - lastMouseClickPos[0]), layers[0].canvas.offsetTop + (cursorLocation[1] - lastMouseClickPos[1]));
|
||||
// Copying that position to the other layers
|
||||
for (let i=1; i<layers.length; i++) {
|
||||
layers[i].copyData(layers[0]);
|
||||
}
|
||||
}
|
||||
else if (dragging){
|
||||
updateRectDrawing(mouseEvent);
|
||||
else if (currentTool.name == 'eyedropper' && dragging && mouseEvent.target.className == 'drawingCanvas') {
|
||||
let selectedColor = getEyedropperColor(cursorLocation);
|
||||
|
||||
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');
|
||||
}
|
||||
else if (currentTool.name == 'resizebrush' && dragging) {
|
||||
//get new brush size based on x distance from original clicking location
|
||||
var distanceFromClick = cursorLocation[0] - lastMouseClickPos[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
|
||||
var brushSizeChange = Math.round(distanceFromClick/10);
|
||||
var newBrushSize = tool.pencil.previousBrushSize + brushSizeChange;
|
||||
|
||||
//set the brush to the new size as long as its bigger than 1
|
||||
tool.pencil.brushSize = Math.max(1,newBrushSize);
|
||||
|
||||
//fix offset so the cursor stays centered
|
||||
tool.pencil.moveBrushPreview(lastMouseClickPos);
|
||||
currentTool.updateCursor();
|
||||
}
|
||||
else if (currentTool.name == 'resizeeraser' && dragging) {
|
||||
//get new brush size based on x distance from original clicking location
|
||||
var distanceFromClick = cursorLocation[0] - lastMouseClickPos[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
|
||||
var eraserSizeChange = Math.round(distanceFromClick/10);
|
||||
var newEraserSizeChange = tool.eraser.previousBrushSize + eraserSizeChange;
|
||||
|
||||
//set the brush to the new size as long as its bigger than 1
|
||||
tool.eraser.brushSize = Math.max(1,newEraserSizeChange);
|
||||
|
||||
//fix offset so the cursor stays centered
|
||||
tool.eraser.moveBrushPreview(lastMouseClickPos);
|
||||
currentTool.updateCursor();
|
||||
}
|
||||
else if (currentTool.name == 'resizerectangle' && dragging) {
|
||||
//get new brush size based on x distance from original clicking location
|
||||
var distanceFromClick = cursorLocation[0] - lastMouseClickPos[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
|
||||
var rectangleSizeChange = Math.round(distanceFromClick/10);
|
||||
var newRectangleSize = tool.rectangle.previousBrushSize + rectangleSizeChange;
|
||||
|
||||
//set the brush to the new size as long as its bigger than 1
|
||||
tool.rectangle.brushSize = Math.max(1,newRectangleSize);
|
||||
|
||||
//fix offset so the cursor stays centered
|
||||
tool.rectangle.moveBrushPreview(lastMouseClickPos);
|
||||
currentTool.updateCursor();
|
||||
}
|
||||
else if (currentTool.name == 'rectselect') {
|
||||
if (dragging && !isRectSelecting && mouseEvent.target.className == 'drawingCanvas') {
|
||||
isRectSelecting = true;
|
||||
startRectSelection(mouseEvent);
|
||||
}
|
||||
else if (dragging && isRectSelecting) {
|
||||
updateRectSelection(mouseEvent);
|
||||
}
|
||||
else if (isRectSelecting) {
|
||||
endRectSelection();
|
||||
}
|
||||
}
|
||||
else if (currentTool.name == 'moveselection') {
|
||||
// Updating the cursor (move if inside rect, cross if not)
|
||||
currentTool.updateCursor();
|
||||
|
||||
// If I'm dragging, I move the preview
|
||||
if (dragging && cursorInSelectedArea()) {
|
||||
updateMovePreview(getCursorPosition(mouseEvent));
|
||||
}
|
||||
}
|
||||
}
|
||||
else if (currentTool.name == 'pan' && dragging) {
|
||||
// Setting first layer position
|
||||
setCanvasOffset(layers[0].canvas, layers[0].canvas.offsetLeft + (cursorLocation[0] - lastMouseClickPos[0]), layers[0].canvas.offsetTop + (cursorLocation[1] - lastMouseClickPos[1]));
|
||||
// Copying that position to the other layers
|
||||
for (let i=1; i<layers.length; i++) {
|
||||
layers[i].copyData(layers[0]);
|
||||
}
|
||||
}
|
||||
else if (currentTool.name == 'eyedropper' && dragging && mouseEvent.target.className == 'drawingCanvas') {
|
||||
let selectedColor = getEyedropperColor(cursorLocation);
|
||||
|
||||
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');
|
||||
}
|
||||
else if (currentTool.name == 'resizebrush' && dragging) {
|
||||
//get new brush size based on x distance from original clicking location
|
||||
var distanceFromClick = cursorLocation[0] - lastMouseClickPos[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
|
||||
var brushSizeChange = Math.round(distanceFromClick/10);
|
||||
var newBrushSize = tool.pencil.previousBrushSize + brushSizeChange;
|
||||
|
||||
//set the brush to the new size as long as its bigger than 1
|
||||
tool.pencil.brushSize = Math.max(1,newBrushSize);
|
||||
|
||||
//fix offset so the cursor stays centered
|
||||
tool.pencil.moveBrushPreview(lastMouseClickPos);
|
||||
currentTool.updateCursor();
|
||||
}
|
||||
else if (currentTool.name == 'resizeeraser' && dragging) {
|
||||
//get new brush size based on x distance from original clicking location
|
||||
var distanceFromClick = cursorLocation[0] - lastMouseClickPos[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
|
||||
var eraserSizeChange = Math.round(distanceFromClick/10);
|
||||
var newEraserSizeChange = tool.eraser.previousBrushSize + eraserSizeChange;
|
||||
|
||||
//set the brush to the new size as long as its bigger than 1
|
||||
tool.eraser.brushSize = Math.max(1,newEraserSizeChange);
|
||||
|
||||
//fix offset so the cursor stays centered
|
||||
tool.eraser.moveBrushPreview(lastMouseClickPos);
|
||||
currentTool.updateCursor();
|
||||
}
|
||||
else if (currentTool.name == 'resizerectangle' && dragging) {
|
||||
//get new brush size based on x distance from original clicking location
|
||||
var distanceFromClick = cursorLocation[0] - lastMouseClickPos[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
|
||||
var rectangleSizeChange = Math.round(distanceFromClick/10);
|
||||
var newRectangleSize = tool.rectangle.previousBrushSize + rectangleSizeChange;
|
||||
|
||||
//set the brush to the new size as long as its bigger than 1
|
||||
tool.rectangle.brushSize = Math.max(1,newRectangleSize);
|
||||
|
||||
//fix offset so the cursor stays centered
|
||||
tool.rectangle.moveBrushPreview(lastMouseClickPos);
|
||||
currentTool.updateCursor();
|
||||
}
|
||||
else if (currentTool.name == 'rectselect') {
|
||||
if (dragging && !isRectSelecting && mouseEvent.target.className == 'drawingCanvas') {
|
||||
isRectSelecting = true;
|
||||
startRectSelection(mouseEvent);
|
||||
}
|
||||
else if (dragging && isRectSelecting) {
|
||||
updateRectSelection(mouseEvent);
|
||||
}
|
||||
else if (isRectSelecting) {
|
||||
endRectSelection();
|
||||
}
|
||||
}
|
||||
else if (currentTool.name == 'moveselection') {
|
||||
// Updating the cursor (move if inside rect, cross if not)
|
||||
currentTool.updateCursor();
|
||||
|
||||
// If I'm dragging, I move the preview
|
||||
if (dragging && cursorInSelectedArea()) {
|
||||
updateMovePreview(getCursorPosition(mouseEvent));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//mousewheel scroll
|
||||
|
||||
Loading…
Reference in New Issue
Block a user