mirror
/
pixel-editor
mirror of https://github.com/lospec/pixel-editor.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Added back eraser tool

This commit is contained in:
unsettledgames 2021-10-27 10:43:51 +02:00
parent 35cbe31a71
commit b2fef6154d
9 changed files with 84 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
css/_tools-menu.scss
View File

@ -77,7 +77,7 @@
}
}
#tools-menu li button#pencil-bigger-button,
#tools-menu li button#brush-bigger-button,
#tools-menu li button#zoom-in-button,
#tools-menu li button#eraser-bigger-button,
#tools-menu li button#rectangle-bigger-button,
@ -86,7 +86,7 @@
left: 0;
}
#tools-menu li button#pencil-smaller-button,
#tools-menu li button#brush-smaller-button,
#tools-menu li button#zoom-out-button,
#tools-menu li button#eraser-smaller-button,
#tools-menu li button#rectangle-smaller-button,
@ -95,8 +95,8 @@
right: 0;
}
#tools-menu li.selected button#pencil-bigger-button,
#tools-menu li.selected button#pencil-smaller-button,
#tools-menu li.selected button#brush-bigger-button,
#tools-menu li.selected button#brush-smaller-button,
#tools-menu li.selected button#zoom-in-button,
#tools-menu li.selected button#zoom-out-button,
#tools-menu li.selected button#eraser-bigger-button,

12
js/ToolManager.js
View File

@ -1,5 +1,7 @@
const ToolManager = (() => {
brush = new BrushTool("brush", {type: 'html'});
brush = new BrushTool("brush", {type: 'html'}, switchTool);
eraser = new EraserTool("eraser", {type: 'html'}, switchTool);
currTool = brush;
Events.on("mouseup", window, onMouseUp);
@ -63,6 +65,14 @@ const ToolManager = (() => {
return currTool;
}
function switchTool(newTool) {
console.log("switch");
currTool.onDeselect();
currTool = newTool;
currTool.onSelect();
}
return {
currentTool
}

2
js/_drawLine.js
View File

@ -14,7 +14,7 @@ function line(x0,y0,x1,y1, brushSize) {
currentLayer.context.fillRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
} else if (ToolManager.currentTool().name == 'eraser') {
// In case I'm using the eraser I must clear the rect
currentLayer.context.clearRect(x0-Math.floor(tool.eraser.brushSize/2), y0-Math.floor(tool.eraser.brushSize/2), tool.eraser.brushSize, tool.eraser.brushSize);
currentLayer.context.clearRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
}
//if we've reached the end goal, exit the loop

18
js/_toolButtons.js
View File

@ -1,22 +1,4 @@
// REFACTOR: add to single Tool implementations
//eraser
Events.on('click',"eraser-button", function(){
console.log("selecting eraser");
tool.eraser.switchTo();
}, false);
//eraser bigger
Events.on('click',"eraser-bigger-button", function(){
tool.eraser.brushSize++;
}, false);
//eraser smaller
Events.on('click',"eraser-smaller-button", function(e){
if(tool.eraser.brushSize > 1)
tool.eraser.brushSize--;
}, false);
// rectangle
Events.on('click','rectangle-button', function(e){
// If the user clicks twice on the button, they change the draw mode

49
js/_tools.js
View File

@ -27,9 +27,14 @@ class Tool {
constructor (name, options) {
this.name = name;
this.cursorType = options;
this.mainButton = document.getElementById(name + "-button");
this.biggerButton = document.getElementById(name + "-bigger-button");
this.smallerButton = document.getElementById(name + "-smaller-button");
}
onSelect() {
this.mainButton.parentElement.classList.add("selected");
/*
//copy options to this object
if (options.cursor) {
@ -46,6 +51,8 @@ class Tool {
}*/
}
updateCursor() {}
onHover(cursorLocation, cursorTarget) {
this.prevMousePos = this.currMousePos;
this.currMousePos = cursorLocation;
@ -79,7 +86,7 @@ class Tool {
}
onDeselect() {
this.mainButton.parentElement.classList.remove("selected");
}
onStart(mousePos) {
@ -110,46 +117,6 @@ class Tool {
get size() {
return this.currSize;
}
//switch to this tool (replaced global changeTool())
switchTo () {
// Ending any selection in progress
/*if (currentTool.name.includes("select") && !this.name.includes("select") && !selectionCanceled) {
endSelection();
}*/
var tools = document.getElementById("tools-menu").children;
for (var i = 0; i < tools.length; i++) {
tools[i].classList.remove("selected");
}
let buttonNode = document.getElementById(this.name + "-button");
//give the button of the selected tool the .selected class if the tool has a button
if(buttonNode != null && buttonNode.parentNode != null) {
document.getElementById(this.name+"-button").parentNode.classList.add("selected");
}
//change cursor
this.updateCursor();
}
updateCursor () {
//switch to that tools cursor
canvasView.style.cursor = this.cursor || 'default';
//moveSelection
/*if (currentTool.name == 'moveselection') {
if (cursorInSelectedArea()) {
canMoveSelection = true;
canvasView.style.cursor = 'move';
brushPreview.style.display = 'none';
}
else {
canvasView.style.cursor = 'crosshair';
}
}*/
}
}

18
js/tools/BrushTool.js
View File

@ -1,16 +1,14 @@
class BrushTool extends Tool {
constructor(name, options) {
constructor(name, options, switchFunction) {
super(name, options);
// Selection button, brush size buttons
Events.on('click',"pencil-button", this.onSelect);
Events.on('click',"pencil-bigger-button", this.increaseSize.bind(this));
Events.on('click',"pencil-smaller-button", this.decreaseSize.bind(this));
Events.on('click', this.mainButton, switchFunction, this);
Events.on('click', this.biggerButton, this.increaseSize.bind(this));
Events.on('click', this.smallerButton, this.decreaseSize.bind(this));
}
onStart(mousePos) {
super.onStart(mousePos);
this.startMousePos = mousePos;
}
onDrag(mousePos, cursorTarget) {
@ -35,4 +33,12 @@ class BrushTool extends Tool {
super.onEnd(mousePos);
this.endMousePos = mousePos;
}
onSelect() {
super.onSelect();
}
onDeselect() {
super.onDeselect();
}
}

44
js/tools/EraserTool.js
View File

@ -0,0 +1,44 @@
class EraserTool extends Tool {
constructor(name, options, switchFunction) {
super(name, options);
Events.on('click', this.mainButton, switchFunction, this);
Events.on('click', this.biggerButton, this.increaseSize.bind(this));
Events.on('click', this.smallerButton, this.decreaseSize.bind(this));
}
onStart(mousePos) {
super.onStart(mousePos);
}
onDrag(mousePos, cursorTarget) {
super.onDrag(mousePos);
if (cursorTarget === undefined)
return;
//draw line to current pixel
if (cursorTarget.className == 'drawingCanvas' || cursorTarget.className == 'drawingCanvas') {
line(Math.floor(this.prevMousePos[0]/zoom),
Math.floor(this.prevMousePos[1]/zoom),
Math.floor(this.currMousePos[0]/zoom),
Math.floor(this.currMousePos[1]/zoom),
this.currSize
);
}
currentLayer.updateLayerPreview();
}
onEnd(mousePos) {
super.onEnd(mousePos);
this.endMousePos = mousePos;
}
onSelect() {
super.onSelect();
}
onDeselect() {
super.onDeselect();
}
}

22
js/tools/_all.js
View File

@ -1,11 +1,3 @@
new Tool('eraser', {
cursor: 'none',
brushPreview: true,
});
new Tool('resizeeraser', {
cursor: 'default',
});
new Tool('eyedropper', {
imageCursor: 'eyedropper',
});
@ -29,13 +21,6 @@ new Tool('pan', {
},
});
new Tool('pencil', {
cursor: 'none',
brushPreview: true,
});
new Tool('resizebrush', {
cursor: 'default',
});
new Tool('rectangle', {
cursor: 'none',
@ -61,9 +46,4 @@ new Tool('moveselection', {
new Tool('zoom', {
imageCursor: 'zoom-in',
});
//set a default tool
// REFACTOR: move to FileManager
var currentTool = tool.pencil;
var currentToolTemp = tool.pencil;
});

6
views/tools-menu.hbs
View File

@ -1,8 +1,8 @@
<ul id="tools-menu">
<li class="selected expanded">
<button title="Pencil Tool (B)" id="pencil-button">{{svg "pencil.svg" width="32" height="32"}}</button>
<button title="Increase Brush Size" id="pencil-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
<button title="Decrease Brush Size" id="pencil-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
<button title="Brush Tool (B)" id="brush-button">{{svg "pencil.svg" width="32" height="32"}}</button>
<button title="Increase Brush Size" id="brush-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
<button title="Decrease Brush Size" id="brush-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
</li>
<li class = "expanded">