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

Fixed tool color

Browse Source 
Fixed ellipse filling the whole canvas when changing tool
This commit is contained in:
Nicola 2022-10-24 15:04:09 +02:00
parent f9a87cc46e
commit 74665db3de
15 changed files with 99 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/Logs/palettegrid.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 MiB

12
js/ColorModule.js
View File

@ -121,11 +121,11 @@ const ColorModule = (() => {
const currentSelectedColorButton = document.querySelector('#colors-menu li.selected .color-button');
const selectedColor = currentSelectedColorButton.style.backgroundColor;
const clickedColor = e.target.style.backgroundColor;
document.querySelector('#colors-menu li.selected')?.classList.remove('selected');
//set current color
updateCurrentColor(Color.cssToHex(clickedColor));
//make color selected
e.target.parentElement.classList.add('selected');
@ -141,11 +141,16 @@ const ColorModule = (() => {
}
//right clicked color
else if (e.which == 3) {
if (EditorState.getCurrentMode() == "Basic") {
//hide edit color button (to prevent it from showing)
e.target.parentElement.lastChild.classList.add('hidden');
//show color picker
e.target.jscolor.show();
}
else {
Dialogue.showDialogue("palette-block");
}
}
}
/** Called whenever the user presses the button used to add a new colour to the palette
@ -497,6 +502,11 @@ const ColorModule = (() => {
currFile.layers[i].context.fillStyle = color;
currFile.layers[i].context.strokeStyle = color;
}
for (let i=0; i<currFile.sublayers.length; i++) {
currFile.sublayers[i].context.fillStyle = color;
currFile.sublayers[i].context.strokeStyle = color;
}
}
function getSelectedColor() {

2
js/tools/BrushTool.js
View File

@ -12,7 +12,7 @@ class BrushTool extends ResizableTool {
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");
this.addTutorialImg("brush-tutorial.gif");
}
onStart(mousePos, cursorTarget) {

10
js/tools/EllipseTool.js
View File

@ -25,7 +25,7 @@ class EllipseTool extends ResizableTool {
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");
this.addTutorialImg("ellipse-tutorial.gif");
}
changeFillType() {
@ -45,11 +45,11 @@ class EllipseTool extends ResizableTool {
}
onStart(mousePos, mouseTarget) {
super.onStart(mousePos);
if (mouseTarget.className != "drawingCanvas")
if (mouseTarget.className != "drawingCanvas") {
return;
}
super.onStart(mousePos);
// Putting the tmp layer on top of everything
currFile.TMPLayer.canvas.style.zIndex = parseInt(currFile.currentLayer.canvas.style.zIndex, 10) + 1;
@ -65,7 +65,7 @@ class EllipseTool extends ResizableTool {
currFile.TMPLayer.context);
}
/** Finishes drawing the rect, decides the end coordinates and moves the preview rectangle to the
/** Finishes drawing the ellipse, decides the end coordinates and moves the preview ellipse to the
* current layer
*
* @param {*} mousePos The position of the mouse when the user stopped dragging

2
js/tools/EraserTool.js
View File

@ -12,7 +12,7 @@ class EraserTool extends ResizableTool {
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");
this.addTutorialImg("eraser-tutorial.gif");
}
onStart(mousePos) {

2
js/tools/EyeDropperTool.js
View File

@ -14,7 +14,7 @@ class EyeDropperTool extends Tool {
this.addTutorialKey("Aòt + left drag", " to preview the picked colour");
this.addTutorialKey("Left click", " to select a colour");
this.addTutorialKey("Alt + click", " to select a colour");
this.addTutorialImg("/eyedropper-tutorial.gif");
this.addTutorialImg("eyedropper-tutorial.gif");
}
onStart(mousePos, target) {

2
js/tools/FillTool.js
View File

@ -8,7 +8,7 @@ class FillTool extends DrawingTool {
this.addTutorialTitle("Fill tool");
this.addTutorialKey("F", " to select the fill tool");
this.addTutorialKey("Left click", " to fill a contiguous area");
this.addTutorialImg("/fill-tutorial.gif");
this.addTutorialImg("fill-tutorial.gif");
}
onStart(mousePos, target) {

2
js/tools/LassoSelectionTool.js
View File

@ -15,7 +15,7 @@ class LassoSelectionTool extends SelectionTool {
this.addTutorialKey("CTRL+C", " to copy a selection")
this.addTutorialKey("CTRL+V", " to paste a selection")
this.addTutorialKey("CTRL+X", " to cut a selection")
this.addTutorialImg("/lassoselect-tutorial.gif");
this.addTutorialImg("lassoselect-tutorial.gif");
}
onStart(mousePos, mouseTarget) {

2
js/tools/LineTool.js
View File

@ -12,7 +12,7 @@ class LineTool extends ResizableTool {
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");
this.addTutorialImg("line-tutorial.gif");
}
onStart(mousePos) {

2
js/tools/MagicWandTool.js
View File

@ -13,7 +13,7 @@ class MagicWandTool extends SelectionTool {
this.addTutorialKey("CTRL+C", " to copy a selection");
this.addTutorialKey("CTRL+V", " to paste a selection");
this.addTutorialKey("CTRL+X", " to cut a selection");
this.addTutorialImg("/magicwand-tutorial.gif");
this.addTutorialImg("magicwand-tutorial.gif");
}
onEnd(mousePos, mouseTarget) {

2
js/tools/PanTool.js
View File

@ -10,7 +10,7 @@ class PanTool extends Tool {
this.addTutorialKey("P", " to select the lasso selection tool");
this.addTutorialKey("Left drag", " to move the viewport");
this.addTutorialKey("Space + drag", " to move the viewport");
this.addTutorialImg("/pan-tutorial.gif");
this.addTutorialImg("pan-tutorial.gif");
}
onStart(mousePos, target) {

2
js/tools/RectangleTool.js
View File

@ -23,7 +23,7 @@ class RectangleTool extends ResizableTool {
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");
this.addTutorialImg("rectangle-tutorial.gif");
}
changeFillType() {

2
js/tools/RectangularSelectionTool.js
View File

@ -14,7 +14,7 @@ class RectangularSelectionTool extends SelectionTool {
this.addTutorialKey("CTRL+C", " to copy a selection");
this.addTutorialKey("CTRL+V", " to paste a selection");
this.addTutorialKey("CTRL+X", " to cut a selection");
this.addTutorialImg("/rectselect-tutorial.gif");
this.addTutorialImg("rectselect-tutorial.gif");
}
onStart(mousePos, mouseTarget) {

66
views/latestLog.hbs
View File

@ -1,52 +1,20 @@
Heyo! New pixel editor update, with some very requested changes. After the code refactoring, adding features
is way easier: I introduced some more selection tools, the ellipse tool and an info bar in the top menu :)
<h2>Lasso tool</h2>
Finally! With the lasso tool you're not forced to select rectangular areas anymore. Have fun selecting, cutting,
copying and pasting any kind of selection with pixel-perfect precision.
</br><img src="/lassoselect-tutorial.gif"/>
<h2>Magic wand</h2>
In addition to the lasso tool, we added a new selection tool: the magic wand. You can use it to select
contiguous areas of the same colour! If you need to exactly select the pixels of a certain colour, you're
probably going to find the magic wand useful.
</br><img src="/magicwand-tutorial.gif"/>
<h2>Ellipse tool</h2>
I added a cute friend for the rectangle tool: with the ellipse tool you'll be able to draw circles and
ellipses of all sizes. The tool works similarly to the rectangle tool: select it to draw empty ellipses,
click on the ellipse button again to draw filled ellipses.
</br><img src="/ellipse-tutorial.gif"/>
<h2>Tool tutorials</h2>
I know what you're thinking, "wow those gifs are so cute, that guy must have put a lot of love in them".
Well, I'm glad you like them, and I have good news for you: there are more! Move the cursor on a tool
button: after a little a small tutorial explaining how to use the tool will appear. Hope it's useful for
everyone who's new to the editor!
</br><img src="/tool-tutorials.gif"/>
<h2>Top bar info</h2>
Depending on the tool you're using, you'll notice that the top right part of the editor will slightly change.
When using a resizable tool (eraser, brush, rectangle, ellipse, line), it's now possible to select a precise
size by typing it in the input field that appears when you select it. More features that make use of the
top bar are planned.
<h2>Bug fixes and minor details</h2>
Hi! Been a while after the last update, the lack of contributors slowed down the support a bit. You may have seen
it from the Lospec homepage, but this editor has been liberated and released under the GPL-3.0 license! This
probably incentivized more contributors to help with development. I want to thank them for their work.
<ul>
<li>Squares in the splash page are now...well...actual squares</li>
<li>Using the mouse when a dialogue popup is open will no longer edit the canvas</li>
<li>For coders: the selection system has been uniformed</li>
<li>Tool buttons have been shrinked to make room for more</li>
<li><a href="https://github.com/NSSure">NSSure</a> added the ability to import images in the editor. Very
useful if you need to have a reference layer!</li>
<li><a href="https://github.com/blueprismo">Blueprismo</a> added a Dockerfile to the repository, making the
editor even more accessible.</li>
<li><a href="https://github.com/hacknorris-aka-penguin">hacknorris-aka-penguin</a> and
<a href="https://github.com/matthewd673">matthewd673</a> fixed a few bugs we had.</li>
</ul>
In addition, we had a pretty big contribution by <a href="https://github.com/jbrundage">Jaman</a>. He did some
needed refactoring that will help us with development. In addition, he kindly added a new palette layout so that
big palettes aren't too stretched out, like it happened with the previous vertical layout.
</br>
<img src="palettegrid.gif"/>
<h2>End of log</h2>
You've reached the end of this log, congrats. Special thanks to Jaman on Discord, who's helping us and
who found a quite nasty bug in the selectiont tools. Hope to see you soon in a new log!</br>
- <a href="https://github.com/unsettledgames">Unsettled</a>
</br></br>
P.S.: we're always looking for contributors! Join the <a href="https://discord.com/invite/QjsgTQM">Lospec discord</a> to get in touch
or have a look at the <a href="https://github.com/lospec/pixel-edior">editor repository</a>!
</br>
Lastly, I would also like to thank all the people who submitted feature suggestions and bug reports on Github, they
are very welcome and we will try to address as many as possible of them.

52
views/logs/00003-selection-tools.hbs Normal file
View File

@ -0,0 +1,52 @@
Heyo! New pixel editor update, with some very requested changes. After the code refactoring, adding features
is way easier: I introduced some more selection tools, the ellipse tool and an info bar in the top menu :)
<h2>Lasso tool</h2>
Finally! With the lasso tool you're not forced to select rectangular areas anymore. Have fun selecting, cutting,
copying and pasting any kind of selection with pixel-perfect precision.
</br><img src="/lassoselect-tutorial.gif"/>
<h2>Magic wand</h2>
In addition to the lasso tool, we added a new selection tool: the magic wand. You can use it to select
contiguous areas of the same colour! If you need to exactly select the pixels of a certain colour, you're
probably going to find the magic wand useful.
</br><img src="/magicwand-tutorial.gif"/>
<h2>Ellipse tool</h2>
I added a cute friend for the rectangle tool: with the ellipse tool you'll be able to draw circles and
ellipses of all sizes. The tool works similarly to the rectangle tool: select it to draw empty ellipses,
click on the ellipse button again to draw filled ellipses.
</br><img src="/ellipse-tutorial.gif"/>
<h2>Tool tutorials</h2>
I know what you're thinking, "wow those gifs are so cute, that guy must have put a lot of love in them".
Well, I'm glad you like them, and I have good news for you: there are more! Move the cursor on a tool
button: after a little a small tutorial explaining how to use the tool will appear. Hope it's useful for
everyone who's new to the editor!
</br><img src="/tool-tutorials.gif"/>
<h2>Top bar info</h2>
Depending on the tool you're using, you'll notice that the top right part of the editor will slightly change.
When using a resizable tool (eraser, brush, rectangle, ellipse, line), it's now possible to select a precise
size by typing it in the input field that appears when you select it. More features that make use of the
top bar are planned.
<h2>Bug fixes and minor details</h2>
<ul>
<li>Squares in the splash page are now...well...actual squares</li>
<li>Using the mouse when a dialogue popup is open will no longer edit the canvas</li>
<li>For coders: the selection system has been uniformed</li>
<li>Tool buttons have been shrinked to make room for more</li>
</ul>
<h2>End of log</h2>
You've reached the end of this log, congrats. Special thanks to Jaman on Discord, who's helping us and
who found a quite nasty bug in the selectiont tools. Hope to see you soon in a new log!</br>
- <a href="https://github.com/unsettledgames">Unsettled</a>
</br></br>
P.S.: we're always looking for contributors! Join the <a href="https://discord.com/invite/QjsgTQM">Lospec discord</a> to get in touch
or have a look at the <a href="https://github.com/lospec/pixel-edior">editor repository</a>!