From 466eb0580c8307f2d8cf9446d038983cce9d04c7 Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Tue, 21 Jul 2020 16:01:00 +0200 Subject: [PATCH] Started refactoring the code - Can now zoom without selecting the zom tool - Moved updateCursor to the tool class, deleted _updateCursor.js - Removed as many references to canvas as possible, removed every global reference to context - Added methods in Tool class to move the brush preview --- js/_addColorButton.js | 2 +- js/_drawLine.js | 2 - js/_mouseEvents.js | 95 ++++++++++++++++-------------------------- js/_newPixel.js | 7 +--- js/_tools.js | 34 +++++++++++++++ js/_updateCursor.js | 35 ---------------- js/_variables.js | 3 +- js/tools/_select.js | 1 + views/pixel-editor.hbs | 1 + 9 files changed, 77 insertions(+), 103 deletions(-) delete mode 100644 js/_updateCursor.js diff --git a/js/_addColorButton.js b/js/_addColorButton.js index 16f7c56..9da3169 100644 --- a/js/_addColorButton.js +++ b/js/_addColorButton.js @@ -44,7 +44,7 @@ on('click', 'add-color-button', function(){ //add new color and make it selected var addedColor = addColor(newColor); addedColor.classList.add('selected'); - context.fillStyle = '#' + newColor; + currentLayer.context.fillStyle = '#' + newColor; //add history state //saveHistoryState({type: 'addcolor', colorValue: addedColor.firstElementChild.jscolor.toString()}); diff --git a/js/_drawLine.js b/js/_drawLine.js index a91fbe3..e7ce712 100644 --- a/js/_drawLine.js +++ b/js/_drawLine.js @@ -30,7 +30,5 @@ function line(x0,y0,x1,y1, brushSize) { err +=dx; y0+=sy; } - - console.log(x0 + ", " + x1); } } \ No newline at end of file diff --git a/js/_mouseEvents.js b/js/_mouseEvents.js index d5d818a..46bf971 100644 --- a/js/_mouseEvents.js +++ b/js/_mouseEvents.js @@ -1,5 +1,5 @@ var currentMouseEvent; -var lastMousePos; +var lastMouseMovePos; //mousedown - start drawing window.addEventListener("mousedown", function (mouseEvent) { @@ -12,7 +12,7 @@ window.addEventListener("mousedown", function (mouseEvent) { //prevent right mouse clicks and such, which will open unwanted menus //mouseEvent.preventDefault(); - lastPos = getCursorPosition(mouseEvent); + lastMouseClickPos = getCursorPosition(mouseEvent); dragging = true; //left or right click ? @@ -176,23 +176,21 @@ function setPreviewPosition(preview, cursor, size){ //mouse is moving on canvas window.addEventListener("mousemove", draw, false); function draw (mouseEvent) { - lastMousePos = getCursorPosition(mouseEvent); + lastMouseMovePos = getCursorPosition(mouseEvent); // Saving the event in case something else needs it currentMouseEvent = mouseEvent; - var cursorLocation = lastMousePos; + 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; - + // Moving brush preview + currentTool.moveBrushPreview(cursorLocation); + // Hiding eyedropper, will be shown if it's needed eyedropperPreview.style.display = 'none'; if (currentTool.name == 'pencil') { - //move the brush preview - brushPreview.style.left = cursorLocation[0] + currentLayer.canvas.offsetLeft - tool.pencil.brushSize * zoom / 2 + 'px'; - brushPreview.style.top = cursorLocation[1] + currentLayer.canvas.offsetTop - tool.pencil.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'; @@ -202,13 +200,13 @@ 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), tool.pencil.brushSize); - lastPos = cursorLocation; + 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 = context.getImageData(Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom),1,1).data; + 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 @@ -219,11 +217,6 @@ function draw (mouseEvent) { } // Decided to write a different implementation in case of differences between the brush and the eraser tool else if (currentTool.name == 'eraser') { - // Uses the same preview as the brush - //move the brush preview - brushPreview.style.left = cursorLocation[0] + canvas.offsetLeft - currentTool.brushSize * zoom / 2 + 'px'; - brushPreview.style.top = cursorLocation[1] + canvas.offsetTop - currentTool.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'; @@ -233,8 +226,8 @@ 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), currentTool.brushSize); - lastPos = cursorLocation; + 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; } } @@ -242,10 +235,6 @@ function draw (mouseEvent) { } else if (currentTool.name == 'rectangle') { - //move the brush preview - brushPreview.style.left = cursorLocation[0] + currentLayer.canvas.offsetLeft - currentTool.brushSize * zoom / 2 + 'px'; - brushPreview.style.top = cursorLocation[1] + currentLayer.canvas.offsetTop - currentTool.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'; @@ -261,7 +250,7 @@ function draw (mouseEvent) { } else if (currentTool.name == '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])); + 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 0) { - mode = 'out'; - } - - // Changing zoom and position of the first layer - changeZoom(layers[0], mode, getCursorPosition(mouseEvent)); - - for (let i=1; i 0) { + mode = 'out'; } + // Changing zoom and position of the first layer + changeZoom(layers[0], mode, getCursorPosition(mouseEvent)); + + for (let i=1; i +