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

Added possibility to select the rectangular selection tool

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/rectselect.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

10
js/_hotkeyListener.js
View File

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

5
js/_toolButtons.js
View File

@ -69,4 +69,9 @@ on('click',"zoom-out-button", function(){
for (let i=1; i<layers.length; i++) { for (let i=1; i<layers.length; i++) {
layers[i].copyData(layers[0]); layers[i].copyData(layers[0]);
} }
}, false);
//rectangular selection button
on('click', "rectselect-button", function(){
changeTool('rectselect');
}, false); }, false);

5
views/pixel-editor.hbs
View File

@ -1,4 +1,6 @@
<!DOCTYPE html> <!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> <html>
<head> <head>
@ -34,7 +36,9 @@
<img src="/pixel-editor/pencil.png" /> <img src="/pixel-editor/pencil.png" />
<img src="/pixel-editor/zoom-in.png" /> <img src="/pixel-editor/zoom-in.png" />
<img src = "/pixel-editor/eraser.png"/> <img src = "/pixel-editor/eraser.png"/>
<img src = "/pixel-editor/rectselect.png"/>
</div> </div>
<ul id="main-menu"> <ul id="main-menu">
<li class="logo">Lospec Pixel Editor</li> <li class="logo">Lospec Pixel Editor</li>
<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="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> <button title="Decrease Eraser Size" id="eraser-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
</li> </li>
<li><button title = "Rectangular Selection Tool (M)" id = "rectselect-button">{{svg "rectselect.svg" width = "32" height = "32"}}</button><li>
</ul> </ul>
<ul id="colors-menu"> <ul id="colors-menu">