Added possibility to select the rectangular selection tool

The user can now select the rectangular selection tool. Deleted the m shortcut for the pan tool and used it to shortcut to the rectangular selection tool. The pan tool can already be selected with the p button.
This commit is contained in:
unsettledgames 2020-03-04 12:42:15 +01:00
parent 6995ccb2ee
commit 11337b689b
4 changed files with 17 additions and 3 deletions

BIN
images/rectselect.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

View File

@ -25,8 +25,8 @@ function KeyPress(e) {
case 51: case 69:
changeTool('eyedropper');
break;
//pan - 4, p, m
case 52: case 80: case 77:
//pan - 4, p,
case 52: case 80:
changeTool('pan');
break;
//zoom - 5
@ -34,10 +34,14 @@ function KeyPress(e) {
changeTool('zoom');
break;
// eraser -6, r
case 54: case 82:
case 54: case 82:
console.log("Pressed r");
changeTool('eraser');
break;
// Rectangular selection
case 77: case 109:
changeTool('rectselect');
break;
//Z
case 90:
console.log('PRESSED Z ', keyboardEvent.ctrlKey)

View File

@ -70,3 +70,8 @@ on('click',"zoom-out-button", function(){
layers[i].copyData(layers[0]);
}
}, false);
//rectangular selection button
on('click', "rectselect-button", function(){
changeTool('rectselect');
}, false);

View File

@ -1,4 +1,6 @@
<!DOCTYPE html>
<!--todo: credit RECTANGULAR SELECTION ICON BY https://www.flaticon.com/authors/pixel-perfect or
design an original icon (this is just a placeholder)-->
<html>
<head>
@ -34,7 +36,9 @@
<img src="/pixel-editor/pencil.png" />
<img src="/pixel-editor/zoom-in.png" />
<img src = "/pixel-editor/eraser.png"/>
<img src = "/pixel-editor/rectselect.png"/>
</div>
<ul id="main-menu">
<li class="logo">Lospec Pixel Editor</li>
<li>
@ -83,6 +87,7 @@
<button title="Increase Eraser Size" id="eraser-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
<button title="Decrease Eraser Size" id="eraser-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
</li>
<li><button title = "Rectangular Selection Tool (M)" id = "rectselect-button">{{svg "rectselect.svg" width = "32" height = "32"}}</button><li>
</ul>
<ul id="colors-menu">