mirror/pixel-editor
1
0
Fork 0
mirror of https://github.com/lospec/pixel-editor.git synced 2023-08-10 21:12:51 +03:00
Code Issues Projects Releases Wiki Activity

Fixed rectangle tool bug

Browse Source 
Switching tool from the rectangle caused the editor to freeze.
This commit is contained in:
unsettledgames 2020-07-21 14:42:25 +02:00
parent d1187b537b
commit 03ba3fe245
5 changed files with 15 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
js/_drawLine.js
View File

@ -1,6 +1,5 @@
//draw a line between two points on canvas //draw a line between two points on canvas
function line(x0,y0,x1,y1, brushSize) { function line(x0,y0,x1,y1, brushSize) {
var dx = Math.abs(x1-x0); var dx = Math.abs(x1-x0);
var dy = Math.abs(y1-y0); var dy = Math.abs(y1-y0);
var sx = (x0 < x1 ? 1 : -1); var sx = (x0 < x1 ? 1 : -1);
@ -21,35 +20,17 @@ function line(x0,y0,x1,y1, brushSize) {
//if we've reached the end goal, exit the loop //if we've reached the end goal, exit the loop
if ((x0==x1) && (y0==y1)) break; if ((x0==x1) && (y0==y1)) break;
var e2 = 2*err; var e2 = 2*err;
if (e2 >-dy) {err -=dy; x0+=sx;}
if (e2 < dx) {err +=dx; y0+=sy;}
}
}
//draw a line between two points on canvas if (e2 >-dy) {
function lineOnLayer(x0,y0,x1,y1, brushSize, context) { err -=dy;
x0+=sx;
var dx = Math.abs(x1-x0);
var dy = Math.abs(y1-y0);
var sx = (x0 < x1 ? 1 : -1);
var sy = (y0 < y1 ? 1 : -1);
var err = dx-dy;
while (true) {
//set pixel
// If the current tool is the brush
if (currentTool.name == 'pencil' || currentTool.name == 'rectangle') {
// I fill the rect
context.fillRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
} else if (currentTool.name == 'eraser') {
// In case I'm using the eraser I must clear the rect
context.clearRect(x0-Math.floor(tool.eraser.brushSize/2), y0-Math.floor(tool.eraser.brushSize/2), tool.eraser.brushSize, tool.eraser.brushSize);
} }
//if we've reached the end goal, exit the loop if (e2 < dx) {
if ((x0==x1) && (y0==y1)) break; err +=dx;
var e2 = 2*err; y0+=sy;
if (e2 >-dy) {err -=dy; x0+=sx;} }
if (e2 < dx) {err +=dx; y0+=sy;}
console.log(x0 + ", " + x1);
} }
} }

2
js/_mouseEvents.js
View File

@ -143,7 +143,7 @@ window.addEventListener("mouseup", function (mouseEvent) {
else if (currentTool.name == 'rectselect' && isRectSelecting) { else if (currentTool.name == 'rectselect' && isRectSelecting) {
endRectSelection(mouseEvent); endRectSelection(mouseEvent);
} }
else if (currentTool.name == 'rectangle') { else if (currentTool.name == 'rectangle' && isDrawingRect) {
endRectDrawing(mouseEvent); endRectDrawing(mouseEvent);
currentLayer.updateLayerPreview(); currentLayer.updateLayerPreview();
} }

3
js/_toolButtons.js
View File

@ -16,6 +16,7 @@ on('click',"pencil-smaller-button", function(){
//eraser //eraser
on('click',"eraser-button", function(){ on('click',"eraser-button", function(){
console.log("selecting eraser");
tool.eraser.switchTo(); tool.eraser.switchTo();
}, false); }, false);
@ -31,7 +32,7 @@ on('click',"eraser-smaller-button", function(e){
}, false); }, false);
// rectangle // rectangle
on('click','rectangle-button', function(){ on('click','rectangle-button', function(e){
// If the user clicks twice on the button, they change the draw mode // If the user clicks twice on the button, they change the draw mode
if (currentTool.name == 'rectangle') { if (currentTool.name == 'rectangle') {
if (drawMode == 'empty') { if (drawMode == 'empty') {

3
js/_tools.js
View File

@ -40,9 +40,6 @@ class Tool {
//switch to this tool (replaced global changeTool()) //switch to this tool (replaced global changeTool())
switchTo () { switchTo () {
console.log('changing tool to',this.name)
// Ending any selection in progress // Ending any selection in progress
if (currentTool.name.includes("select") && !this.name.includes("select") && !selectionCanceled) { if (currentTool.name.includes("select") && !this.name.includes("select") && !selectionCanceled) {
endSelection(); endSelection();

4
views/pixel-editor.hbs
View File

@ -111,8 +111,8 @@
<li class="expanded"> <li class="expanded">
<button title="Rectangle Tool (U)" id="rectangle-button">{{svg "rectangle.svg" width="32" height="32" id = "empty-button-svg"}} <button title="Rectangle Tool (U)" id="rectangle-button">{{svg "rectangle.svg" width="32" height="32" id = "empty-button-svg"}}
{{svg "fullrect.svg" width="32" height="32" id = "full-button-svg" display = "none"}}</button> {{svg "fullrect.svg" width="32" height="32" id = "full-button-svg" display = "none"}}</button>
<button title="Increase Brush Size" id="rectangle-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button> <button title="Increase Rectangle Size" id="rectangle-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
<button title="Decrease Brush Size" id="rectangle-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button> <button title="Decrease Rectangle Size" id="rectangle-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
</li> </li>
<li><button title="Fill Tool (F)" id="fill-button">{{svg "fill.svg" width="32" height="32"}}</button></li> <li><button title="Fill Tool (F)" id="fill-button">{{svg "fill.svg" width="32" height="32"}}</button></li>