diff --git a/js/_clickedColor.js b/js/_clickedColor.js index 835a821..7c4f5b8 100644 --- a/js/_clickedColor.js +++ b/js/_clickedColor.js @@ -10,6 +10,7 @@ function clickedColor (e){ //set current color currentLayer.context.fillStyle = this.style.backgroundColor; + currentGlobalColor = this.style.backgroundColor; //make color selected e.target.parentElement.classList.add('selected'); diff --git a/js/_colorChanged.js b/js/_colorChanged.js index 93f052c..5fcc23f 100644 --- a/js/_colorChanged.js +++ b/js/_colorChanged.js @@ -28,9 +28,6 @@ function colorChanged(e) { var newColor = hexToRgb(e.target.value); var oldColor = e.target.oldColor; - console.log('newColor',newColor) - console.log('oldColor',oldColor) - //save undo state //saveHistoryState({type: 'colorchange', newColor: e.target.value, oldColor: rgbToHex(oldColor), canvas: context.getImageData(0, 0, canvasSize[0], canvasSize[1])}); new HistoryStateEditColor(e.target.value.toLowerCase(), rgbToHex(oldColor)); @@ -50,15 +47,14 @@ function colorChanged(e) { //loop through all colors in palette for (var i = 0; i < colors.length; i++) { - console.log('%c'+newColorHex +' '+ colors[i].jscolor.toString(), colorCheckingStyle) //if generated color matches this color if (newColorHex == colors[i].jscolor.toString()) { - console.log('%ccolor already exists'+(colors[i].parentElement.classList.contains('jscolor-active')?' (but is the current color)':''), colorCheckingStyle); + //console.log('%ccolor already exists'+(colors[i].parentElement.classList.contains('jscolor-active')?' (but is the current color)':''), colorCheckingStyle); //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'; @@ -83,13 +79,12 @@ function colorChanged(e) { //set new old color to changed color e.target.oldColor = newColor; - - console.log(e.target.colorElement); + //if this is the current color, update the drawing color if (e.target.colorElement.parentElement.classList.contains('selected')) { - console.log('this color is the current color'); - context.fillStyle = '#'+ rgbToHex(newColor.r,newColor.g,newColor.b); + //console.log('this color is the current color'); + context.fillStyle = currentColor; } /* this is wrong and bad if (settings.switchToChangedColor) { diff --git a/js/_mouseEvents.js b/js/_mouseEvents.js index 2bcb43c..a469018 100644 --- a/js/_mouseEvents.js +++ b/js/_mouseEvents.js @@ -1,4 +1,6 @@ var currentMouseEvent; +// TODO: replace every position calculation with lastMousePos +var lastMousePos; //mousedown - start drawing window.addEventListener("mousedown", function (mouseEvent) { @@ -56,9 +58,9 @@ window.addEventListener("mouseup", function (mouseEvent) { 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]); - - console.log(newColor); + 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++) { @@ -114,6 +116,9 @@ window.addEventListener("mouseup", function (mouseEvent) { else if (currentTool == 'rectselect') { endRectSelection(mouseEvent); } + else if (currentTool == 'rectangle') { + endRectDrawing(mouseEvent); + } dragging = false; currentTool = currentToolTemp; @@ -127,10 +132,11 @@ window.addEventListener("mouseup", function (mouseEvent) { //mouse is moving on canvas window.addEventListener("mousemove", draw, false); function draw (mouseEvent) { + lastMousePos = getCursorPosition(mouseEvent); // Saving the event in case something else needs it currentMouseEvent = mouseEvent; - var cursorLocation = getCursorPosition(mouseEvent); + var cursorLocation = lastMousePos; //if a document hasnt yet been created, exit this function if (!documentCreated || dialogueOpen) return; @@ -187,6 +193,15 @@ function draw (mouseEvent) { } } } + else if (currentTool == 'rectangle') + { + 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])); @@ -197,6 +212,7 @@ function draw (mouseEvent) { } else if (currentTool == 'eyedropper' && dragging && mouseEvent.target.className == 'drawingCanvas') { var selectedColor = context.getImageData(Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom),1,1).data; + eyedropperPreview.style.borderColor = '#'+rgbToHex(selectedColor[0],selectedColor[1],selectedColor[2]); eyedropperPreview.style.display = 'block'; diff --git a/js/_move.js b/js/_move.js index 977a258..76c15c0 100644 --- a/js/_move.js +++ b/js/_move.js @@ -1,6 +1,5 @@ var imageDataToMove; var canMoveSelection = false; -let lastMousePos; // TODO: move with arrows function updateMovePreview(mouseEvent) { diff --git a/js/_newPixel.js b/js/_newPixel.js index 5b887e4..4fd9c5f 100644 --- a/js/_newPixel.js +++ b/js/_newPixel.js @@ -66,6 +66,7 @@ function newPixel (width, height, palette) { //set current drawing color as foreground color currentLayer.context.fillStyle = '#'+defaultForegroundColor; + currentGlobalColor = '#' + defaultForegroundColor; selectedPalette = 'none'; } diff --git a/js/_rectSelect.js b/js/_rectSelect.js index 8cfa392..a1a2e84 100644 --- a/js/_rectSelect.js +++ b/js/_rectSelect.js @@ -3,13 +3,10 @@ let startX; let startY; let endX; let endY; -let workingLayer; function startRectSelection(mouseEvent) { // Putting the vfx layer on top of everything VFXCanvas.style.zIndex = MAX_Z_INDEX; - // Saving the layer the user is working on - workingLayer = currentLayer; // Saving the start coords of the rect let cursorPos = getCursorPosition(mouseEvent); @@ -92,6 +89,7 @@ function drawRect(x, y) { // Clearing the vfx canvas vfxContext.clearRect(0, 0, VFXCanvas.width, VFXCanvas.height); vfxContext.lineWidth = 1; + vfxContext.fillStyle = "black"; vfxContext.setLineDash([4]); // Drawing the rect diff --git a/js/_rectangle.js b/js/_rectangle.js new file mode 100644 index 0000000..d0e5716 --- /dev/null +++ b/js/_rectangle.js @@ -0,0 +1,90 @@ +var rectangleSize = 1; +var drawMode = 'empty'; +var isDrawingRect = false; + +let startRectX; +let startRectY; +let endRectX; +let endRectY; + + +function startRectDrawing(mouseEvent) { + // Putting the vfx layer on top of everything + VFXCanvas.style.zIndex = MAX_Z_INDEX; + // Updating flag + isDrawingRect = true; + + // Saving the start coords of the rect + let cursorPos = getCursorPosition(mouseEvent); + startRectX = Math.round(cursorPos[0] / zoom) + 0.5; + startRectY = Math.round(cursorPos[1] / zoom) + 0.5; + + drawRectangle(startRectX, startRectY); +} + +function updateRectDrawing(mouseEvent) { + let pos = getCursorPosition(mouseEvent); + + // Drawing the rect + drawRectangle(Math.round(pos[0] / zoom) + 0.5, Math.round(pos[1] / zoom) + 0.5); +} + +function endRectDrawing(mouseEvent) { + // Getting the end position + let currentPos = getCursorPosition(mouseEvent); + let vfxContext = VFXCanvas.getContext("2d"); + + endRectX = Math.round(currentPos[0] / zoom); + endRectY = Math.round(currentPos[1] / zoom); + + // Inverting end and start (start must always be the top left corner) + if (endRectX < startRectX) { + let tmp = endRectX; + endRectX = startRectX; + startRectX = tmp; + } + // Same for the y + if (endRectY < startRectY) { + let tmp = endRectY; + endRectY = startRectY; + startRectY = tmp; + } + + // Resetting this + isDrawingRect = false; + // Drawing the final rectangle + currentLayer.context.lineWidth = rectangleSize; + currentLayer.context.strokeStyle = currentGlobalColor; + + // Drawing the rect + currentLayer.context.beginPath(); + currentLayer.context.rect(startRectX, startRectY, endRectX - startRectX + 0.5, endRectY - startRectY + 0.5); + currentLayer.context.setLineDash([]); + + currentLayer.context.stroke(); +} + +function drawRectangle(x, y) { + // Getting the vfx context + let vfxContext = VFXCanvas.getContext("2d"); + + // Clearing the vfx canvas + vfxContext.clearRect(0, 0, VFXCanvas.width, VFXCanvas.height); + + // Drawing the rect + vfxContext.lineWidth = rectangleSize; + vfxContext.strokeStyle = currentGlobalColor; + console.log("color: " + currentGlobalColor); + // Drawing the rect + vfxContext.beginPath(); + vfxContext.rect(startRectX, startRectY, x - startRectX, y - startRectY); + vfxContext.setLineDash([]); + + vfxContext.stroke(); + + // TODO: make the rect blink from black to white in case of dark backgrounds +} + +function applyChanges() { + VFXCanvas.style.zIndex = MIN_Z_INDEX; +} \ No newline at end of file diff --git a/js/_toolButtons.js b/js/_toolButtons.js index 3c48cbb..21b1776 100644 --- a/js/_toolButtons.js +++ b/js/_toolButtons.js @@ -32,6 +32,34 @@ on('click',"eraser-smaller-button", function(e){ updateCursor(); }, false); +// rectangle +on('click',"rectangle-button", function(){ + // If the user clicks twice on the button, they change the draw mode + if (currentTool == 'rectangle') { + if (drawMode == 'empty') { + drawMode = 'full'; + } + else { + drawMode = 'empty'; + } + } + else { + changeTool('rectangle'); + } +}, false); + +// rectangle bigger +on('click',"rectangle-bigger-button", function(){ + rectangleSize++; + updateCursor(); +}, false); + +// rectangle smaller +on('click',"rectangle-smaller-button", function(e){ + if(rectangleSize > 1) rectangleSize--; + updateCursor(); +}, false); + //fill on('click',"fill-button", function(){ changeTool('fill'); diff --git a/js/_updateCursor.js b/js/_updateCursor.js index 97b00d9..fd7016d 100644 --- a/js/_updateCursor.js +++ b/js/_updateCursor.js @@ -21,7 +21,7 @@ function updateCursor () { canvasView.style.cursor = 'crosshair'; } } - else if (currentTool == 'rectselect') + else if (currentTool == 'rectselect' || currentTool == 'rectangle') canvasView.style.cursor = 'crosshair'; else brushPreview.style.display = 'none'; diff --git a/js/_variables.js b/js/_variables.js index dc13b49..10695f5 100644 --- a/js/_variables.js +++ b/js/_variables.js @@ -32,6 +32,7 @@ var popUpContainer = document.getElementById("pop-up-container"); // main canvas var canvas = document.getElementById("pixel-canvas"); var context = canvas.getContext("2d"); +var currentGlobalColor; // Layers var layers = []; diff --git a/js/pixel-editor.js b/js/pixel-editor.js index ebae4e9..80e8be5 100644 --- a/js/pixel-editor.js +++ b/js/pixel-editor.js @@ -62,6 +62,7 @@ //=include _createButton.js //=include _rectSelect.js //=include _move.js +//=include _rectangle.js /**onload**/