From 267d1a170e272042c096362975b06f57f4acfc93 Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Wed, 16 Sep 2020 12:43:51 +0200 Subject: [PATCH] Fixed issue #18 --- js/_history.js | 2 + js/_mouseEvents.js | 305 +++++++++++++++++++++++---------------------- 2 files changed, 156 insertions(+), 151 deletions(-) diff --git a/js/_history.js b/js/_history.js index 017d451..881e373 100644 --- a/js/_history.js +++ b/js/_history.js @@ -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); }; diff --git a/js/_mouseEvents.js b/js/_mouseEvents.js index 46bf971..6342030 100644 --- a/js/_mouseEvents.js +++ b/js/_mouseEvents.js @@ -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; i127) 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; i127) 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