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 eraser icon, added management of eraser size, added event listener for R key (connected to the eraser tool). Started eraser cursor management in _updateCursors.js

Browse Source 
Signed-off-by: npalomba <nicola.palomba@studenti.galileilivorno.gov.it>
This commit is contained in:
npalomba 2019-03-31 12:17:32 +02:00
parent ed34980a0e
commit 5bbfff5fae
10 changed files with 830 additions and 788 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -2,3 +2,4 @@ _ext
routes
build
node_modules
.idea

10
css/pixel-editor.scss
View File

@ -414,19 +414,23 @@ svg {
}
#tools-menu li button#pencil-bigger-button,
#tools-menu li button#zoom-in-button {
#tools-menu li button#zoom-in-button,
#tools-menu li button#eraser-bigger-button{
left: 0;
}
#tools-menu li button#pencil-smaller-button,
#tools-menu li button#zoom-out-button {
#tools-menu li button#zoom-out-button,
#tools-menu li button#eraser-smaller-button{
right: 0;
}
#tools-menu li.selected button#pencil-bigger-button,
#tools-menu li.selected button#pencil-smaller-button,
#tools-menu li.selected button#zoom-in-button,
#tools-menu li.selected button#zoom-out-button {
#tools-menu li.selected button#zoom-out-button,
#tools-menu li.selected button#eraser-bigger-button,
#tools-menu li.selected button#eraser-smaller-button{
display: block;
}

BIN
images/eraser.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

4
js/_hotkeyListener.js
View File

@ -33,6 +33,10 @@ function KeyPress(e) {
case 53:
changeTool('zoom');
break;
// eraser -6, r
case 54: case 72:
changeTool('eraser');
break;
//Z
case 90:
console.log('PRESSED Z ', keyboardEvent.ctrlKey)

29
js/_toolButtons.js
View File

@ -1,18 +1,35 @@
//pencil
on('click',"pencil-button", function(){
changeTool('pencil');
changeTool('pencil');
}, false);
//pencil bigger
on('click',"pencil-bigger-button", function(){
brushSize++;
updateCursor();
brushSize++;
updateCursor();
}, false);
//pencil smaller
on('click',"pencil-smaller-button", function(e){
if(brushSize > 1) brushSize--;
updateCursor();
on('click',"pencil-smaller-button", function(){
if(brushSize > 1) brushSize--;
updateCursor();
}, false);
//eraser
on('click',"eraser-button", function(){
changeTool('eraser');
}, false);
//eraser bigger
on('click',"eraser-bigger-button", function(){
eraserSize++;
updateCursor();
}, false);
//eraser smaller
on('click',"eraser-smaller-button", function(e){
if(eraserSize > 1) eraserSize--;
updateCursor();
}, false);
//fill

7
js/_updateCursor.js
View File

@ -6,6 +6,12 @@ function updateCursor () {
brushPreview.style.display = 'block';
brushPreview.style.width = brushSize * zoom + 'px';
brushPreview.style.height = brushSize * zoom + 'px';
} else if (currentTool == 'eraser') {
console.log("Eraser size: " + eraserSize);
canvasView.style.cursor = 'crosshair';
brushPreview.style.display = 'block';
brushPreview.style.width = eraserSize * zoom + 'px';
brushPreview.style.height = eraserSize * zoom + 'px';
} else
brushPreview.style.display = 'none';
@ -28,5 +34,4 @@ function updateCursor () {
if (currentTool == 'resize-brush')
canvasView.style.cursor = 'default';
}

2
js/_variables.js
View File

@ -6,7 +6,9 @@ var canvasPosition;
var currentTool = 'pencil';
var currentToolTemp = 'pencil';
var brushSize = 1;
var eraserSize = 1;
var prevBrushSize = 1;
var prevEraserSize = 1;
var menuOpen = false;
var dialogueOpen = false;
var documentCreated = false;

1543
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

@ -16,9 +16,9 @@
"gulp-include": "^2.3.1",
"handlebars-helper-svg": "git+https://bitbucket.org/skeddles/npm-handlebars-helper-svg-lospec-open-source.git",
"hbs": "^4.0.3",
"opn": "^6.0.0",
"sass": "^1.17.3",
"hbs-register-helpers": "git+https://skeddles@bitbucket.org/skeddles/hbs-register-helpers.git",
"hbs-register-partials": "git+https://skeddles@bitbucket.org/skeddles/hbs-register-partials.git"
"hbs-register-partials": "git+https://skeddles@bitbucket.org/skeddles/hbs-register-partials.git",
"opn": "^6.0.0",
"sass": "^1.17.3"
}
}

6
views/pixel-editor.hbs
View File

@ -33,6 +33,7 @@
<img src="/pixel-editor/pan-held.png" />
<img src="/pixel-editor/pencil.png" />
<img src="/pixel-editor/zoom-in.png" />
<img src = "/pixel-editor/eraser.png"/>
</div>
<ul id="main-menu">
<li class="logo">Lospec Pixel Editor</li>
@ -77,6 +78,11 @@
<button title="Zoom In" id="zoom-in-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
<button title="Zoom Out" id="zoom-out-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
</li>
<li class = "expanded">
<button title="Eraser tool (R)" id="eraser-button">{{svg "eraser.svg" width="32" height="32"}}</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>
</li>
</ul>
<ul id="colors-menu">