Fixed bugs

Hid brush size arrows in firefox, let the user cancel a selection by clicking outside the canvas, fixed lasso tool not detecting the selection if ending it outside the canvas.
This commit is contained in:
Nicola 2022-02-04 22:13:11 +01:00
parent c464b50aa1
commit 953dc40bc4
5 changed files with 21 additions and 23 deletions

View File

@ -125,7 +125,8 @@ li#editor-info {
} }
input[type=number] { input[type=number] {
appearance:none; appearance:none;
-moz-appearance: text; -moz-appearance:textfield;
-webkit-appearance:text;
width:25px; width:25px;
height:15px; height:15px;
} }

View File

@ -33,8 +33,7 @@ class LassoSelectionTool extends SelectionTool {
onDrag(mousePos, mouseTarget) { onDrag(mousePos, mouseTarget) {
super.onDrag(mousePos, mouseTarget); super.onDrag(mousePos, mouseTarget);
if (Util.isChildOfByClass(mouseTarget, "editor-top-menu") || if (!Util.cursorInCanvas(currFile.canvasSize, [mousePos[0]/currFile.zoom, mousePos[1]/currFile.zoom]))
!Util.cursorInCanvas(currFile.canvasSize, [mousePos[0]/currFile.zoom, mousePos[1]/currFile.zoom]))
return; return;
if (this.currentPixels[this.currentPixels.length - 1] != mousePos) if (this.currentPixels[this.currentPixels.length - 1] != mousePos)
@ -47,8 +46,7 @@ class LassoSelectionTool extends SelectionTool {
super.onEnd(mousePos, mouseTarget); super.onEnd(mousePos, mouseTarget);
new HistoryState().EditCanvas(); new HistoryState().EditCanvas();
if (Util.isChildOfByClass(mouseTarget, "editor-top-menu") || if (Util.isChildOfByClass(mouseTarget, "editor-top-menu"))
!Util.cursorInCanvas(currFile.canvasSize, [mousePos[0]/currFile.zoom, mousePos[1]/currFile.zoom]))
return; return;
this.currentPixels.push([this.startMousePos[0] / currFile.zoom, this.startMousePos[1] / currFile.zoom]); this.currentPixels.push([this.startMousePos[0] / currFile.zoom, this.startMousePos[1] / currFile.zoom]);

View File

@ -75,9 +75,6 @@ class MoveSelectionTool extends DrawingTool {
onDrag(mousePos) { onDrag(mousePos) {
super.onDrag(mousePos); super.onDrag(mousePos);
if (!this.selectionTool.cursorInSelectedArea(mousePos))
return;
this.selectionTool.moveOffset = this.selectionTool.moveOffset =
[Math.floor(mousePos[0] / currFile.zoom - currFile.canvasSize[0] / 2 - (this.selectionTool.boundingBoxCenter[0] - currFile.canvasSize[0]/2)), [Math.floor(mousePos[0] / currFile.zoom - currFile.canvasSize[0] / 2 - (this.selectionTool.boundingBoxCenter[0] - currFile.canvasSize[0]/2)),
@ -98,8 +95,7 @@ class MoveSelectionTool extends DrawingTool {
super.onEnd(mousePos, mouseTarget); super.onEnd(mousePos, mouseTarget);
if (!this.selectionTool.cursorInSelectedArea(mousePos) && if (!this.selectionTool.cursorInSelectedArea(mousePos) &&
!Util.isChildOfByClass(mouseTarget, "editor-top-menu") && !Util.isChildOfByClass(mouseTarget, "editor-top-menu")) {
Util.cursorInCanvas(currFile.canvasSize, [mousePos[0]/currFile.zoom, mousePos[1]/currFile.zoom])) {
this.endSelection(); this.endSelection();
// Switch to selection tool // Switch to selection tool
this.switchFunc(this.selectionTool); this.switchFunc(this.selectionTool);

View File

@ -58,8 +58,7 @@ class RectangularSelectionTool extends SelectionTool {
onEnd(mousePos, mouseTarget) { onEnd(mousePos, mouseTarget) {
super.onEnd(mousePos, mouseTarget); super.onEnd(mousePos, mouseTarget);
if (Util.isChildOfByClass(mouseTarget, "editor-top-menu") || if (Util.isChildOfByClass(mouseTarget, "editor-top-menu"))
!Util.cursorInCanvas(currFile.canvasSize, [mousePos[0]/currFile.zoom, mousePos[1]/currFile.zoom]))
return; return;
new HistoryState().EditCanvas(); new HistoryState().EditCanvas();
@ -80,10 +79,12 @@ class RectangularSelectionTool extends SelectionTool {
this.startMousePos[1] = tmp; this.startMousePos[1] = tmp;
} }
this.boundingBox.minX = this.startMousePos[0] - 1; if (Util.cursorInCanvas(currFile.canvasSize, [mousePos[0]/currFile.zoom, mousePos[1]/currFile.zoom])) {
this.boundingBox.maxX = this.endMousePos[0] + 1; this.boundingBox.minX = this.startMousePos[0] - 1;
this.boundingBox.minY = this.startMousePos[1] - 1; this.boundingBox.maxX = this.endMousePos[0] + 1;
this.boundingBox.maxY = this.endMousePos[1] + 1; this.boundingBox.minY = this.startMousePos[1] - 1;
this.boundingBox.maxY = this.endMousePos[1] + 1;
}
// Switch to the move tool so that the user can move the selection // Switch to the move tool so that the user can move the selection
this.switchFunc(this.moveTool); this.switchFunc(this.moveTool);

View File

@ -51,7 +51,6 @@ class SelectionTool extends Tool {
onDrag(mousePos) { onDrag(mousePos) {
super.onDrag(mousePos); super.onDrag(mousePos);
console.log("drag");
let mouseX = mousePos[0] / currFile.zoom; let mouseX = mousePos[0] / currFile.zoom;
let mouseY = mousePos[1] / currFile.zoom; let mouseY = mousePos[1] / currFile.zoom;
@ -66,22 +65,25 @@ class SelectionTool extends Tool {
this.reconstruct.top = true; this.reconstruct.top = true;
this.updateBoundingBox(Math.min(Math.max(mouseX, 0), currFile.canvasSize[0]-1), if (Util.cursorInCanvas(currFile.canvasSize, [mousePos[0]/currFile.zoom, mousePos[1]/currFile.zoom])) {
Math.min(Math.max(mouseY, 0), currFile.canvasSize[1]-1)); this.updateBoundingBox(Math.min(Math.max(mouseX, 0), currFile.canvasSize[0]-1),
Math.min(Math.max(mouseY, 0), currFile.canvasSize[1]-1));
}
} }
onEnd(mousePos, mouseTarget) { onEnd(mousePos, mouseTarget) {
super.onEnd(mousePos); super.onEnd(mousePos);
if (mouseTarget == undefined || Util.isChildOfByClass(mouseTarget, "editor-top-menu") || if (mouseTarget == undefined || Util.isChildOfByClass(mouseTarget, "editor-top-menu"))
!Util.cursorInCanvas(currFile.canvasSize, [mousePos[0]/currFile.zoom, mousePos[1]/currFile.zoom]))
return; return;
let mouseX = mousePos[0] / currFile.zoom; let mouseX = mousePos[0] / currFile.zoom;
let mouseY = mousePos[1] / currFile.zoom; let mouseY = mousePos[1] / currFile.zoom;
this.updateBoundingBox(Math.min(Math.max(mouseX, 0), currFile.canvasSize[0]-1), if (Util.cursorInCanvas(currFile.canvasSize, [mousePos[0]/currFile.zoom, mousePos[1]/currFile.zoom])) {
Math.min(Math.max(mouseY, 0), currFile.canvasSize[1]-1)); this.updateBoundingBox(Math.min(Math.max(mouseX, 0), currFile.canvasSize[0]-1),
Math.min(Math.max(mouseY, 0), currFile.canvasSize[1]-1));
}
this.boundingBoxCenter = [this.boundingBox.minX + (this.boundingBox.maxX - this.boundingBox.minX) / 2, this.boundingBoxCenter = [this.boundingBox.minX + (this.boundingBox.maxX - this.boundingBox.minX) / 2,
this.boundingBox.minY + (this.boundingBox.maxY - this.boundingBox.minY) / 2]; this.boundingBox.minY + (this.boundingBox.maxY - this.boundingBox.minY) / 2];