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

Continued tool tutorials

Browse Source 
Also fixed fill tool history bug
This commit is contained in:
Nicola
2022-01-25 23:47:01 +01:00
parent 238f313fdc
commit b616579c65
15 changed files with 127 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
js/tools/BrushTool.js
View File

@ -5,6 +5,14 @@ class BrushTool extends ResizableTool {
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));
this.resetTutorial();
this.addTutorialTitle("Pencil tool");
this.addTutorialKey("B", " to select the brush");
this.addTutorialKey("Left drag", " to draw a stroke");
this.addTutorialKey("Right drag", " to resize the brush");
this.addTutorialKey("+ or -", " to resize the brush");
this.addTutorialImg("brush-tutorial.gif");
}
onStart(mousePos, cursorTarget) {

9
js/tools/EllipseTool.js
View File

@ -17,6 +17,15 @@ class EllipseTool extends ResizableTool {
Events.on('click', this.mainButton, this.changeFillType.bind(this));
Events.on('click', this.biggerButton, this.increaseSize.bind(this));
Events.on('click', this.smallerButton, this.decreaseSize.bind(this));
this.resetTutorial();
this.addTutorialTitle("Ellipse tool");
this.addTutorialKey("S", " to select the ellipse");
this.addTutorialKey("S while selected", " to change fill mode (empty or fill)");
this.addTutorialKey("Left drag", " to draw an ellipse");
this.addTutorialKey("Right drag", " to resize the brush");
this.addTutorialKey("+ or -", " to resize the brush");
this.addTutorialImg("ellipse-tutorial.gif");
}
changeFillType() {

8
js/tools/EraserTool.js
View File

@ -5,6 +5,14 @@ class EraserTool extends ResizableTool {
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));
this.resetTutorial();
this.addTutorialTitle("Eraser tool");
this.addTutorialKey("E", " to select the eraser");
this.addTutorialKey("Left drag", " to erase an area");
this.addTutorialKey("Right drag", " to resize the eraser");
this.addTutorialKey("+ or -", " to resize the eraser");
this.addTutorialImg("eraser-tutorial.gif");
}
onStart(mousePos) {

3
js/tools/FillTool.js
View File

@ -10,10 +10,9 @@ class FillTool extends DrawingTool {
if (target.className != 'drawingCanvas')
return;
new HistoryState().EditCanvas();
FillTool.fill(mousePos);
currFile.currentLayer.updateLayerPreview();
new HistoryState().EditCanvas();
}

8
js/tools/LineTool.js
View File

@ -5,6 +5,14 @@ class LineTool extends ResizableTool {
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));
this.resetTutorial();
this.addTutorialTitle("Line tool");
this.addTutorialKey("L", " to select the line");
this.addTutorialKey("Left drag", " to draw a line");
this.addTutorialKey("Right drag", " to resize the brush");
this.addTutorialKey("+ or -", " to resize the brush");
this.addTutorialImg("line-tutorial.gif");
}
onStart(mousePos) {

9
js/tools/RectangleTool.js
View File

@ -17,6 +17,15 @@ class RectangleTool extends ResizableTool {
Events.on('click', this.mainButton, this.changeFillType.bind(this));
Events.on('click', this.biggerButton, this.increaseSize.bind(this));
Events.on('click', this.smallerButton, this.decreaseSize.bind(this));
this.resetTutorial();
this.addTutorialTitle("Rectangle tool");
this.addTutorialKey("U", " to select the rectangle");
this.addTutorialKey("U while selected", " to change fill mode (empty or fill)");
this.addTutorialKey("Left drag", " to draw a rectangle");
this.addTutorialKey("Right drag", " to resize the brush");
this.addTutorialKey("+ or -", " to resize the brush");
this.addTutorialImg("rectangle-tutorial.gif");
}
changeFillType() {