From d3a1b6f474b484e95e9d3b840ae6f7284c77d8c0 Mon Sep 17 00:00:00 2001 From: Leamsi Escribano Date: Thu, 14 Jan 2021 13:04:39 -0500 Subject: [PATCH 1/4] Working on line tool --- css/pixel-editor.scss | 1 + debug.log | 0 js/_hotkeyListener.js | 3 +++ js/_line.js | 21 +++++++++++++++++++++ js/_mouseEvents.js | 8 ++++++++ js/_toolButtons.js | 29 +++++------------------------ js/pixel-editor.js | 1 + js/tools/_line.js | 4 ++++ views/pixel-editor.hbs | 7 +++---- 9 files changed, 46 insertions(+), 28 deletions(-) create mode 100644 debug.log create mode 100644 js/_line.js create mode 100644 js/tools/_line.js diff --git a/css/pixel-editor.scss b/css/pixel-editor.scss index 3f9f6ca..7e664c7 100644 --- a/css/pixel-editor.scss +++ b/css/pixel-editor.scss @@ -1549,6 +1549,7 @@ div#pb-options { background-color: #232125 !important; opacity: 1 !important; + display: none !important; #splash-input { width:70%; diff --git a/debug.log b/debug.log new file mode 100644 index 0000000..e69de29 diff --git a/js/_hotkeyListener.js b/js/_hotkeyListener.js index d156758..dd48967 100644 --- a/js/_hotkeyListener.js +++ b/js/_hotkeyListener.js @@ -50,6 +50,9 @@ function KeyPress(e) { case 52: case 80: tool.pan.switchTo(); break; + case 76: + tool.line.switchTo(); + break; //zoom - 5 case 53: tool.zoom.switchTo(); diff --git a/js/_line.js b/js/_line.js new file mode 100644 index 0000000..56273ad --- /dev/null +++ b/js/_line.js @@ -0,0 +1,21 @@ +function diagLine(lastMouseClickPos, zoom, cursorLocation) { + + let x0 = Math.floor(lastMouseClickPos[0]/zoom); + let y0 = Math.floor(lastMouseClickPos[1]/zoom); + let x1 = Math.floor(cursorLocation[0]/zoom); + let y1 = Math.floor(cursorLocation[1]/zoom); + + let dx = Math.abs(x1-x0); + let dy = Math.abs(y1-y0); + let sx = (x0 < x1 ? 1 : -1); + let sy = (y0 < y1 ? 1 : -1); + let err = dx-dy; + + const brushSize = 1; + + + if (currentTool.name !== 'line') return; + + currentLayer.context.fillRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize); + +} \ No newline at end of file diff --git a/js/_mouseEvents.js b/js/_mouseEvents.js index 30aa329..6aa3539 100644 --- a/js/_mouseEvents.js +++ b/js/_mouseEvents.js @@ -346,6 +346,14 @@ function draw (mouseEvent) { updateMovePreview(getCursorPosition(mouseEvent)); } } + else if (currentTool.name === "line") { + if (dragging) { + if (mouseEvent.target.className == 'drawingCanvas' || mouseEvent.target.className == 'drawingCanvas') { + diagLine(lastMouseClickPos, zoom, cursorLocation); + } + } + currentLayer.updateLayerPreview(); + } } } diff --git a/js/_toolButtons.js b/js/_toolButtons.js index 5a0142d..a3d2da2 100644 --- a/js/_toolButtons.js +++ b/js/_toolButtons.js @@ -75,33 +75,14 @@ on('click',"eyedropper-button", function(){ tool.eyedropper.switchTo(); }, false); -//zoom tool button -on('click',"zoom-button", function(){ - tool.zoom.switchTo(); -}, false); - -//zoom in button -on('click','zoom-in-button', function(){ - //changeZoom('in',[window.innerWidth/2-canvas.offsetLeft,window.innerHeight/2-canvas.offsetTop]); - changeZoom('in', [canvasSize[0] * zoom / 2, canvasSize[1] * zoom / 2]); - - for (let i=1; i
    • -
  • - - - + +
  • +
  • From 55565870884a138355057c468ab66cb37c0f6cdc Mon Sep 17 00:00:00 2001 From: Leamsi Escribano Date: Thu, 14 Jan 2021 15:28:57 -0500 Subject: [PATCH 2/4] Finished Line Tool --- css/pixel-editor.scss | 13 ++++++++----- debug.log | 1 + js/_line.js | 30 +++++++++++++++++++++++++----- js/_mouseEvents.js | 20 +++++++++++++++++++- js/_toolButtons.js | 10 ++++++++++ js/tools/_line.js | 6 +++++- views/pixel-editor.hbs | 4 +++- 7 files changed, 71 insertions(+), 13 deletions(-) diff --git a/css/pixel-editor.scss b/css/pixel-editor.scss index 7e664c7..c5e7cbc 100644 --- a/css/pixel-editor.scss +++ b/css/pixel-editor.scss @@ -687,14 +687,16 @@ svg { #tools-menu li button#pencil-bigger-button, #tools-menu li button#zoom-in-button, #tools-menu li button#eraser-bigger-button, -#tools-menu li button#rectangle-bigger-button { +#tools-menu li button#rectangle-bigger-button, +#tools-menu li button#line-bigger-button { left: 0; } #tools-menu li button#pencil-smaller-button, #tools-menu li button#zoom-out-button, #tools-menu li button#eraser-smaller-button, -#tools-menu li button#rectangle-smaller-button { +#tools-menu li button#rectangle-smaller-button, +#tools-menu li button#line-smaller-button { right: 0; } @@ -705,7 +707,9 @@ svg { #tools-menu li.selected button#eraser-bigger-button, #tools-menu li.selected button#eraser-smaller-button, #tools-menu li.selected button#rectangle-bigger-button, -#tools-menu li.selected button#rectangle-smaller-button { +#tools-menu li.selected button#rectangle-smaller-button, +#tools-menu li.selected button#line-bigger-button, +#tools-menu li.selected button#line-smaller-button { display: block; } @@ -1549,8 +1553,7 @@ div#pb-options { background-color: #232125 !important; opacity: 1 !important; - display: none !important; - + #splash-input { width:70%; height:100vh !important; diff --git a/debug.log b/debug.log index e69de29..3b8e60d 100644 --- a/debug.log +++ b/debug.log @@ -0,0 +1 @@ +[0114/110029.536:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3) diff --git a/js/_line.js b/js/_line.js index 56273ad..e08ca91 100644 --- a/js/_line.js +++ b/js/_line.js @@ -11,11 +11,31 @@ function diagLine(lastMouseClickPos, zoom, cursorLocation) { let sy = (y0 < y1 ? 1 : -1); let err = dx-dy; - const brushSize = 1; + const brushSize = tool.line.brushSize; + + const canvas = document.getElementById('tmp-canvas'); + const context = canvas.getContext('2d'); - - if (currentTool.name !== 'line') return; + context.fillStyle=currentGlobalColor; + context.clearRect(0, 0, canvas.width, canvas.height); - currentLayer.context.fillRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize); - + while (true) { + if (currentTool.name !== 'line') return; + + context.fillRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize); + + //if we've reached the end goal, exit the loop + if ((x0==x1) && (y0==y1)) break; + var e2 = 2*err; + + if (e2 >-dy) { + err -=dy; + x0+=sx; + } + + if (e2 < dx) { + err +=dx; + y0+=sy; + } + } } \ No newline at end of file diff --git a/js/_mouseEvents.js b/js/_mouseEvents.js index 6aa3539..40ed786 100644 --- a/js/_mouseEvents.js +++ b/js/_mouseEvents.js @@ -22,7 +22,7 @@ window.addEventListener("mousedown", function (mouseEvent) { else if (mouseEvent.altKey) currentTool = tool.eyedropper; else if (mouseEvent.target.className == 'drawingCanvas' && - (currentTool.name == 'pencil' || currentTool.name == 'eraser' || currentTool.name == 'rectangle')) + (currentTool.name == 'pencil' || currentTool.name == 'eraser' || currentTool.name == 'rectangle' || currentTool.name === 'line')) new HistoryStateEditCanvas(); else if (currentTool.name == 'moveselection') { if (!cursorInSelectedArea() && @@ -50,6 +50,10 @@ window.addEventListener("mousedown", function (mouseEvent) { currentTool = tool.resizerectangle; tool.rectangle.previousBrushSize = tool.rectangle.brushSize; } + else if (currentTool.name == 'line' && mouseEvent.which == 3) { + currentTool = tool.resizeline; + tool.line.previousBrushSize = tool.line.brushSize; + } if (currentTool.name == 'eyedropper' && mouseEvent.target.className == 'drawingCanvas') eyedropperPreview.style.display = 'block'; @@ -70,6 +74,15 @@ window.addEventListener("mouseup", function (mouseEvent) { currentLayer.closeOptionsMenu(); } + // If the user finished placing down a line, clear the tmp canvas and copy the data to the current layer + if (currentTool.name === "line") { + const tmpCanvas = document.getElementById('tmp-canvas'); + currentLayer.context.drawImage(tmpCanvas, 0, 0); + + const tmpContext = tmpCanvas.getContext('2d'); + tmpContext.clearRect(0, 0, tmpCanvas.width, tmpCanvas.height); + } + if (!documentCreated || dialogueOpen || !currentLayer.isVisible || currentLayer.isLocked) return; if (currentTool.name == 'eyedropper' && mouseEvent.target.className == 'drawingCanvas') { @@ -347,6 +360,11 @@ function draw (mouseEvent) { } } else if (currentTool.name === "line") { + if (mouseEvent.target.className == 'drawingCanvas'|| mouseEvent.target.className == 'drawingCanvas') { + brushPreview.style.visibility = 'visible'; + } else { + brushPreview.style.visibility = 'hidden'; + } if (dragging) { if (mouseEvent.target.className == 'drawingCanvas' || mouseEvent.target.className == 'drawingCanvas') { diagLine(lastMouseClickPos, zoom, cursorLocation); diff --git a/js/_toolButtons.js b/js/_toolButtons.js index a3d2da2..85412dc 100644 --- a/js/_toolButtons.js +++ b/js/_toolButtons.js @@ -85,4 +85,14 @@ on('click',"line-button", function(){ tool.line.switchTo(); }, false); +on('click',"line-bigger-button", function(){ + tool.line.brushSize++; +}, false); + +on('click',"line-smaller-button", function(){ + if(tool.line.brushSize > 1) + tool.line.brushSize--; +}, false); + + /*global on */ diff --git a/js/tools/_line.js b/js/tools/_line.js index f99020c..c8f9178 100644 --- a/js/tools/_line.js +++ b/js/tools/_line.js @@ -1,4 +1,8 @@ new Tool('line', { - cursor: 'crosshair', + cursor: 'crosshair', brushPreview: true, +}); + +new Tool('resizeline', { + cursor: 'default', }); \ No newline at end of file diff --git a/views/pixel-editor.hbs b/views/pixel-editor.hbs index fa1d77e..31a4cb6 100644 --- a/views/pixel-editor.hbs +++ b/views/pixel-editor.hbs @@ -131,8 +131,10 @@
    • -
  • +
  • + +
  • From 9fc5c8e3b8d4ea9d80275803c8c318b67ad8862f Mon Sep 17 00:00:00 2001 From: Leamsi Escribano Date: Thu, 14 Jan 2021 19:50:56 -0500 Subject: [PATCH 3/4] Fixed line tool bugs --- css/pixel-editor.scss | 2 ++ js/_line.js | 3 +- js/_mouseEvents.js | 15 ++++++++++ js/tools/_all.js | 64 +++++++++++++++++++++++++++++++++++++++++ js/tools/_eraser.js | 13 --------- js/tools/_eyedropper.js | 7 ----- js/tools/_fill.js | 7 ----- js/tools/_line.js | 8 ------ js/tools/_pan.js | 10 ------- js/tools/_pencil.js | 17 ----------- js/tools/_rectangle.js | 14 --------- js/tools/_select.js | 14 --------- js/tools/_zoom.js | 6 ---- 13 files changed, 83 insertions(+), 97 deletions(-) create mode 100644 js/tools/_all.js delete mode 100644 js/tools/_eraser.js delete mode 100644 js/tools/_eyedropper.js delete mode 100644 js/tools/_fill.js delete mode 100644 js/tools/_line.js delete mode 100644 js/tools/_pan.js delete mode 100644 js/tools/_pencil.js delete mode 100644 js/tools/_rectangle.js delete mode 100644 js/tools/_select.js delete mode 100644 js/tools/_zoom.js diff --git a/css/pixel-editor.scss b/css/pixel-editor.scss index c5e7cbc..6a01342 100644 --- a/css/pixel-editor.scss +++ b/css/pixel-editor.scss @@ -1553,6 +1553,8 @@ div#pb-options { background-color: #232125 !important; opacity: 1 !important; + + display: none !important; #splash-input { width:70%; diff --git a/js/_line.js b/js/_line.js index e08ca91..40db2c8 100644 --- a/js/_line.js +++ b/js/_line.js @@ -16,7 +16,8 @@ function diagLine(lastMouseClickPos, zoom, cursorLocation) { const canvas = document.getElementById('tmp-canvas'); const context = canvas.getContext('2d'); - context.fillStyle=currentGlobalColor; + context.fillStyle=currentGlobalColor; + canvas.style.zIndex = MAX_Z_INDEX; context.clearRect(0, 0, canvas.width, canvas.height); while (true) { diff --git a/js/_mouseEvents.js b/js/_mouseEvents.js index 40ed786..ed8bb82 100644 --- a/js/_mouseEvents.js +++ b/js/_mouseEvents.js @@ -338,6 +338,21 @@ function draw (mouseEvent) { tool.rectangle.moveBrushPreview(lastMouseClickPos); currentTool.updateCursor(); } + else if (currentTool.name == 'resizeline' && 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 lineSizeChange = Math.round(distanceFromClick/10); + var newLineSize = tool.line.previousBrushSize + lineSizeChange; + + //set the brush to the new size as long as its bigger than 1 + tool.line.brushSize = Math.max(1, newLineSize); + + //fix offset so the cursor stays centered + tool.line.moveBrushPreview(lastMouseClickPos); + currentTool.updateCursor(); + } else if (currentTool.name == 'rectselect') { if (dragging && !isRectSelecting && mouseEvent.target.className == 'drawingCanvas') { isRectSelecting = true; diff --git a/js/tools/_all.js b/js/tools/_all.js new file mode 100644 index 0000000..25d49b3 --- /dev/null +++ b/js/tools/_all.js @@ -0,0 +1,64 @@ +new Tool('eraser', { + cursor: 'crosshair', + brushPreview: true, +}); +new Tool('resizeeraser', { + cursor: 'default', +}); + +new Tool('eyedropper', { + imageCursor: 'eyedropper', +}); + +new Tool('fill', { + imageCursor: 'fill', +}); + +new Tool('line', { + cursor: 'crosshair', + brushPreview: true, +}); +new Tool('resizeline', { + cursor: 'default', +}); + +new Tool('pan', { + cursor: function () { + if (dragging) return 'url(\'/pixel-editor/pan-held.png\'), auto'; + else return 'url(\'/pixel-editor/pan.png\'), auto'; + }, +}); + +new Tool('pencil', { + cursor: 'crosshair', + brushPreview: true, +}); +new Tool('resizebrush', { + cursor: 'default', +}); + +new Tool('rectangle', { + cursor: 'crosshair', + brushPreview: true, +}); +new Tool('resizerectangle', { + cursor: 'default', +}); + +new Tool('rectselect', { + cursor: 'crosshair', + brushPreview: true, +}); + + +new Tool('moveselection', { + cursor: 'crosshair', +}); + +new Tool('zoom', { + imageCursor: 'zoom-in', +}); + +//set a default tool +var currentTool = tool.pencil; +var currentToolTemp = tool.pencil; \ No newline at end of file diff --git a/js/tools/_eraser.js b/js/tools/_eraser.js deleted file mode 100644 index fd888fb..0000000 --- a/js/tools/_eraser.js +++ /dev/null @@ -1,13 +0,0 @@ - -new Tool('eraser', { - cursor: 'crosshair', - brushPreview: true, -}); - - - -new Tool('resizeeraser', { - cursor: 'default', -}); - -/*global Tool, tool*/ \ No newline at end of file diff --git a/js/tools/_eyedropper.js b/js/tools/_eyedropper.js deleted file mode 100644 index cf1b0b6..0000000 --- a/js/tools/_eyedropper.js +++ /dev/null @@ -1,7 +0,0 @@ - -new Tool('eyedropper', { - imageCursor: 'eyedropper', -}); - - -/*global Tool, tool*/ \ No newline at end of file diff --git a/js/tools/_fill.js b/js/tools/_fill.js deleted file mode 100644 index 090a38e..0000000 --- a/js/tools/_fill.js +++ /dev/null @@ -1,7 +0,0 @@ - -new Tool('fill', { - imageCursor: 'fill', -}); - - -/*global Tool, tool*/ \ No newline at end of file diff --git a/js/tools/_line.js b/js/tools/_line.js deleted file mode 100644 index c8f9178..0000000 --- a/js/tools/_line.js +++ /dev/null @@ -1,8 +0,0 @@ -new Tool('line', { - cursor: 'crosshair', - brushPreview: true, -}); - -new Tool('resizeline', { - cursor: 'default', -}); \ No newline at end of file diff --git a/js/tools/_pan.js b/js/tools/_pan.js deleted file mode 100644 index ead4854..0000000 --- a/js/tools/_pan.js +++ /dev/null @@ -1,10 +0,0 @@ - -new Tool('pan', { - cursor: function () { - if (dragging) return 'url(\'/pixel-editor/pan-held.png\'), auto'; - else return 'url(\'/pixel-editor/pan.png\'), auto'; - }, -}); - - -/*global Tool, tool*/ \ No newline at end of file diff --git a/js/tools/_pencil.js b/js/tools/_pencil.js deleted file mode 100644 index 707c177..0000000 --- a/js/tools/_pencil.js +++ /dev/null @@ -1,17 +0,0 @@ - -new Tool('pencil', { - cursor: 'crosshair', - brushPreview: true, -}); - - -new Tool('resizebrush', { - cursor: 'default', -}); - - -//set as default tool -var currentTool = tool.pencil; -var currentToolTemp = tool.pencil; - -/*global Tool, tool*/ \ No newline at end of file diff --git a/js/tools/_rectangle.js b/js/tools/_rectangle.js deleted file mode 100644 index 677bccd..0000000 --- a/js/tools/_rectangle.js +++ /dev/null @@ -1,14 +0,0 @@ - -new Tool('rectangle', { - cursor: 'crosshair', - brushPreview: true, -}); - - - -new Tool('resizerectangle', { - cursor: 'default', -}); - - -/*global Tool, tool*/ \ No newline at end of file diff --git a/js/tools/_select.js b/js/tools/_select.js deleted file mode 100644 index 89052d5..0000000 --- a/js/tools/_select.js +++ /dev/null @@ -1,14 +0,0 @@ - - -new Tool('rectselect', { - cursor: 'crosshair', - brushPreview: true, -}); - - -new Tool('moveselection', { - cursor: 'crosshair', -}); - - -/*global Tool, tool*/ \ No newline at end of file diff --git a/js/tools/_zoom.js b/js/tools/_zoom.js deleted file mode 100644 index b3e5c72..0000000 --- a/js/tools/_zoom.js +++ /dev/null @@ -1,6 +0,0 @@ - -new Tool('zoom', { - imageCursor: 'zoom-in', -}); - -/*global Tool, tool*/ \ No newline at end of file From 29746551e129c3764245a42bb6d3047313a125e3 Mon Sep 17 00:00:00 2001 From: Leamsi Escribano Date: Fri, 15 Jan 2021 10:11:13 -0500 Subject: [PATCH 4/4] Fixed layer issue --- css/pixel-editor.scss | 4 ++-- js/_layer.js | 6 +++--- js/_line.js | 7 +++++-- js/_rectangle.js | 4 ++-- 4 files changed, 12 insertions(+), 9 deletions(-) diff --git a/css/pixel-editor.scss b/css/pixel-editor.scss index 6a01342..c9d6f1e 100644 --- a/css/pixel-editor.scss +++ b/css/pixel-editor.scss @@ -301,7 +301,7 @@ svg { } #pixel-canvas { - z-index: 2; + z-index: 3; background: transparent; } @@ -311,7 +311,7 @@ svg { } #tmp-canvas { - z-index: 4; + z-index: 5; background: transparent; } diff --git a/js/_layer.js b/js/_layer.js index 4f6ed45..d18a8e8 100644 --- a/js/_layer.js +++ b/js/_layer.js @@ -430,13 +430,13 @@ function duplicateLayer(event, saveHistory = true) { for (let i=getMenuEntryIndex(menuEntries, toDuplicate.menuEntry) - 1; i>=0; i--) { getLayerByID(menuEntries[i].id).canvas.style.zIndex++; } - maxZIndex++; + maxZIndex+=2; // Creating a new canvas let newCanvas = document.createElement("canvas"); // Setting up the new canvas canvasView.append(newCanvas); - newCanvas.style.zIndex = parseInt(currentLayer.canvas.style.zIndex) + 1; + newCanvas.style.zIndex = parseInt(currentLayer.canvas.style.zIndex) + 2; newCanvas.classList.add("drawingCanvas"); if (!layerListEntry) return console.warn('skipping adding layer because no document'); @@ -529,7 +529,7 @@ function addLayer(id, saveHistory = true) { let newCanvas = document.createElement("canvas"); // Setting up the new canvas canvasView.append(newCanvas); - maxZIndex++; + maxZIndex+=2; newCanvas.style.zIndex = maxZIndex; newCanvas.classList.add("drawingCanvas"); diff --git a/js/_line.js b/js/_line.js index 40db2c8..aa9f828 100644 --- a/js/_line.js +++ b/js/_line.js @@ -17,8 +17,11 @@ function diagLine(lastMouseClickPos, zoom, cursorLocation) { const context = canvas.getContext('2d'); context.fillStyle=currentGlobalColor; - canvas.style.zIndex = MAX_Z_INDEX; - context.clearRect(0, 0, canvas.width, canvas.height); + context.clearRect(0, 0, canvas.width, canvas.height); + + canvas.style.zIndex = parseInt(currentLayer.canvas.style.zIndex, 10) + 1; + + //console.log(canvas.style.zIndex, currentLayer.canvas.style.zIndex); while (true) { if (currentTool.name !== 'line') return; diff --git a/js/_rectangle.js b/js/_rectangle.js index 7bc321f..35188d6 100644 --- a/js/_rectangle.js +++ b/js/_rectangle.js @@ -20,7 +20,7 @@ let endRectY; */ function startRectDrawing(mouseEvent) { // Putting the vfx layer on top of everything - VFXCanvas.style.zIndex = MAX_Z_INDEX; + VFXCanvas.style.zIndex = parseInt(currentLayer.canvas.style.zIndex, 10) + 1;; // Updating flag isDrawingRect = true; @@ -141,5 +141,5 @@ function setRectToolSvg() { } function applyChanges() { - VFXCanvas.style.zIndex = MIN_Z_INDEX; + //VFXCanvas.style.zIndex = MIN_Z_INDEX; }