Finished Line Tool

This commit is contained in:
Leamsi Escribano 2021-01-14 15:28:57 -05:00
parent d3a1b6f474
commit 5556587088
7 changed files with 71 additions and 13 deletions

View File

@ -687,14 +687,16 @@ svg {
#tools-menu li button#pencil-bigger-button, #tools-menu li button#pencil-bigger-button,
#tools-menu li button#zoom-in-button, #tools-menu li button#zoom-in-button,
#tools-menu li button#eraser-bigger-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; left: 0;
} }
#tools-menu li button#pencil-smaller-button, #tools-menu li button#pencil-smaller-button,
#tools-menu li button#zoom-out-button, #tools-menu li button#zoom-out-button,
#tools-menu li button#eraser-smaller-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; right: 0;
} }
@ -705,7 +707,9 @@ svg {
#tools-menu li.selected button#eraser-bigger-button, #tools-menu li.selected button#eraser-bigger-button,
#tools-menu li.selected button#eraser-smaller-button, #tools-menu li.selected button#eraser-smaller-button,
#tools-menu li.selected button#rectangle-bigger-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; display: block;
} }
@ -1549,8 +1553,7 @@ div#pb-options {
background-color: #232125 !important; background-color: #232125 !important;
opacity: 1 !important; opacity: 1 !important;
display: none !important;
#splash-input { #splash-input {
width:70%; width:70%;
height:100vh !important; height:100vh !important;

View File

@ -0,0 +1 @@
[0114/110029.536:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)

View File

@ -11,11 +11,31 @@ function diagLine(lastMouseClickPos, zoom, cursorLocation) {
let sy = (y0 < y1 ? 1 : -1); let sy = (y0 < y1 ? 1 : -1);
let err = dx-dy; let err = dx-dy;
const brushSize = 1; const brushSize = tool.line.brushSize;
const canvas = document.getElementById('tmp-canvas');
const context = canvas.getContext('2d');
context.fillStyle=currentGlobalColor;
if (currentTool.name !== 'line') return; 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;
}
}
} }

View File

@ -22,7 +22,7 @@ window.addEventListener("mousedown", function (mouseEvent) {
else if (mouseEvent.altKey) else if (mouseEvent.altKey)
currentTool = tool.eyedropper; currentTool = tool.eyedropper;
else if (mouseEvent.target.className == 'drawingCanvas' && 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(); new HistoryStateEditCanvas();
else if (currentTool.name == 'moveselection') { else if (currentTool.name == 'moveselection') {
if (!cursorInSelectedArea() && if (!cursorInSelectedArea() &&
@ -50,6 +50,10 @@ window.addEventListener("mousedown", function (mouseEvent) {
currentTool = tool.resizerectangle; currentTool = tool.resizerectangle;
tool.rectangle.previousBrushSize = tool.rectangle.brushSize; 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') if (currentTool.name == 'eyedropper' && mouseEvent.target.className == 'drawingCanvas')
eyedropperPreview.style.display = 'block'; eyedropperPreview.style.display = 'block';
@ -70,6 +74,15 @@ window.addEventListener("mouseup", function (mouseEvent) {
currentLayer.closeOptionsMenu(); 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 (!documentCreated || dialogueOpen || !currentLayer.isVisible || currentLayer.isLocked) return;
if (currentTool.name == 'eyedropper' && mouseEvent.target.className == 'drawingCanvas') { if (currentTool.name == 'eyedropper' && mouseEvent.target.className == 'drawingCanvas') {
@ -347,6 +360,11 @@ function draw (mouseEvent) {
} }
} }
else if (currentTool.name === "line") { 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 (dragging) {
if (mouseEvent.target.className == 'drawingCanvas' || mouseEvent.target.className == 'drawingCanvas') { if (mouseEvent.target.className == 'drawingCanvas' || mouseEvent.target.className == 'drawingCanvas') {
diagLine(lastMouseClickPos, zoom, cursorLocation); diagLine(lastMouseClickPos, zoom, cursorLocation);

View File

@ -85,4 +85,14 @@ on('click',"line-button", function(){
tool.line.switchTo(); tool.line.switchTo();
}, false); }, 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 */ /*global on */

View File

@ -1,4 +1,8 @@
new Tool('line', { new Tool('line', {
cursor: 'crosshair', cursor: 'crosshair',
brushPreview: true, brushPreview: true,
});
new Tool('resizeline', {
cursor: 'default',
}); });

View File

@ -131,8 +131,10 @@
<li><button title="Pan Tool (P)" id="pan-button">{{svg "pan.svg" width="32" height="32"}}</button></li> <li><button title="Pan Tool (P)" id="pan-button">{{svg "pan.svg" width="32" height="32"}}</button></li>
<li> <li class="expanded">
<button title="Line Tool (L)" id="line-button">{{svg "line.svg" width="32" height="32"}}</button> <button title="Line Tool (L)" id="line-button">{{svg "line.svg" width="32" height="32"}}</button>
<button title="Increase Line Size" id="line-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
<button title="Decrease Line Size" id="line-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
</li> </li>
<li><button title = "Rectangular Selection Tool (M)" id = "rectselect-button">{{svg "rectselect.svg" width = "32" height = "32"}}</button><li> <li><button title = "Rectangular Selection Tool (M)" id = "rectselect-button">{{svg "rectselect.svg" width = "32" height = "32"}}</button><li>