Fixed tool color

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

BIN
images/Logs/palettegrid.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 MiB

View File

@ -121,11 +121,11 @@ const ColorModule = (() => {
const currentSelectedColorButton = document.querySelector('#colors-menu li.selected .color-button'); const currentSelectedColorButton = document.querySelector('#colors-menu li.selected .color-button');
const selectedColor = currentSelectedColorButton.style.backgroundColor; const selectedColor = currentSelectedColorButton.style.backgroundColor;
const clickedColor = e.target.style.backgroundColor; const clickedColor = e.target.style.backgroundColor;
document.querySelector('#colors-menu li.selected')?.classList.remove('selected'); document.querySelector('#colors-menu li.selected')?.classList.remove('selected');
//set current color //set current color
updateCurrentColor(Color.cssToHex(clickedColor)); updateCurrentColor(Color.cssToHex(clickedColor));
//make color selected //make color selected
e.target.parentElement.classList.add('selected'); e.target.parentElement.classList.add('selected');
@ -141,11 +141,16 @@ const ColorModule = (() => {
} }
//right clicked color //right clicked color
else if (e.which == 3) { else if (e.which == 3) {
if (EditorState.getCurrentMode() == "Basic") {
//hide edit color button (to prevent it from showing) //hide edit color button (to prevent it from showing)
e.target.parentElement.lastChild.classList.add('hidden'); e.target.parentElement.lastChild.classList.add('hidden');
//show color picker //show color picker
e.target.jscolor.show(); 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 /** 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.fillStyle = color;
currFile.layers[i].context.strokeStyle = 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() { function getSelectedColor() {

View File

@ -12,7 +12,7 @@ class BrushTool extends ResizableTool {
this.addTutorialKey("Left drag", " to draw a stroke"); this.addTutorialKey("Left drag", " to draw a stroke");
this.addTutorialKey("Right drag", " to resize the brush"); this.addTutorialKey("Right drag", " to resize the brush");
this.addTutorialKey("+ or -", " to resize the brush"); this.addTutorialKey("+ or -", " to resize the brush");
this.addTutorialImg("/brush-tutorial.gif"); this.addTutorialImg("brush-tutorial.gif");
} }
onStart(mousePos, cursorTarget) { onStart(mousePos, cursorTarget) {

View File

@ -25,7 +25,7 @@ class EllipseTool extends ResizableTool {
this.addTutorialKey("Left drag", " to draw an ellipse"); this.addTutorialKey("Left drag", " to draw an ellipse");
this.addTutorialKey("Right drag", " to resize the brush"); this.addTutorialKey("Right drag", " to resize the brush");
this.addTutorialKey("+ or -", " to resize the brush"); this.addTutorialKey("+ or -", " to resize the brush");
this.addTutorialImg("/ellipse-tutorial.gif"); this.addTutorialImg("ellipse-tutorial.gif");
} }
changeFillType() { changeFillType() {
@ -45,11 +45,11 @@ class EllipseTool extends ResizableTool {
} }
onStart(mousePos, mouseTarget) { onStart(mousePos, mouseTarget) {
super.onStart(mousePos); if (mouseTarget.className != "drawingCanvas") {
if (mouseTarget.className != "drawingCanvas")
return; return;
}
super.onStart(mousePos);
// Putting the tmp layer on top of everything // Putting the tmp layer on top of everything
currFile.TMPLayer.canvas.style.zIndex = parseInt(currFile.currentLayer.canvas.style.zIndex, 10) + 1; currFile.TMPLayer.canvas.style.zIndex = parseInt(currFile.currentLayer.canvas.style.zIndex, 10) + 1;
@ -65,7 +65,7 @@ class EllipseTool extends ResizableTool {
currFile.TMPLayer.context); 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 * current layer
* *
* @param {*} mousePos The position of the mouse when the user stopped dragging * @param {*} mousePos The position of the mouse when the user stopped dragging

View File

@ -12,7 +12,7 @@ class EraserTool extends ResizableTool {
this.addTutorialKey("Left drag", " to erase an area"); this.addTutorialKey("Left drag", " to erase an area");
this.addTutorialKey("Right drag", " to resize the eraser"); this.addTutorialKey("Right drag", " to resize the eraser");
this.addTutorialKey("+ or -", " to resize the eraser"); this.addTutorialKey("+ or -", " to resize the eraser");
this.addTutorialImg("/eraser-tutorial.gif"); this.addTutorialImg("eraser-tutorial.gif");
} }
onStart(mousePos) { onStart(mousePos) {

View File

@ -14,7 +14,7 @@ class EyeDropperTool extends Tool {
this.addTutorialKey("Aòt + left drag", " to preview the picked colour"); this.addTutorialKey("Aòt + left drag", " to preview the picked colour");
this.addTutorialKey("Left click", " to select a colour"); this.addTutorialKey("Left click", " to select a colour");
this.addTutorialKey("Alt + 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) { onStart(mousePos, target) {

View File

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

View File

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

View File

@ -12,7 +12,7 @@ class LineTool extends ResizableTool {
this.addTutorialKey("Left drag", " to draw a line"); this.addTutorialKey("Left drag", " to draw a line");
this.addTutorialKey("Right drag", " to resize the brush"); this.addTutorialKey("Right drag", " to resize the brush");
this.addTutorialKey("+ or -", " to resize the brush"); this.addTutorialKey("+ or -", " to resize the brush");
this.addTutorialImg("/line-tutorial.gif"); this.addTutorialImg("line-tutorial.gif");
} }
onStart(mousePos) { onStart(mousePos) {

View File

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

View File

@ -10,7 +10,7 @@ class PanTool extends Tool {
this.addTutorialKey("P", " to select the lasso selection tool"); this.addTutorialKey("P", " to select the lasso selection tool");
this.addTutorialKey("Left drag", " to move the viewport"); this.addTutorialKey("Left drag", " to move the viewport");
this.addTutorialKey("Space + 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) { onStart(mousePos, target) {

View File

@ -23,7 +23,7 @@ class RectangleTool extends ResizableTool {
this.addTutorialKey("Left drag", " to draw a rectangle"); this.addTutorialKey("Left drag", " to draw a rectangle");
this.addTutorialKey("Right drag", " to resize the brush"); this.addTutorialKey("Right drag", " to resize the brush");
this.addTutorialKey("+ or -", " to resize the brush"); this.addTutorialKey("+ or -", " to resize the brush");
this.addTutorialImg("/rectangle-tutorial.gif"); this.addTutorialImg("rectangle-tutorial.gif");
} }
changeFillType() { changeFillType() {

View File

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

View File

@ -1,52 +1,20 @@
Heyo! New pixel editor update, with some very requested changes. After the code refactoring, adding features Hi! Been a while after the last update, the lack of contributors slowed down the support a bit. You may have seen
is way easier: I introduced some more selection tools, the ellipse tool and an info bar in the top menu :) 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.
<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> <ul>
<li>Squares in the splash page are now...well...actual squares</li> <li><a href="https://github.com/NSSure">NSSure</a> added the ability to import images in the editor. Very
<li>Using the mouse when a dialogue popup is open will no longer edit the canvas</li> useful if you need to have a reference layer!</li>
<li>For coders: the selection system has been uniformed</li> <li><a href="https://github.com/blueprismo">Blueprismo</a> added a Dockerfile to the repository, making the
<li>Tool buttons have been shrinked to make room for more</li> 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> </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> </br>
You've reached the end of this log, congrats. Special thanks to Jaman on Discord, who's helping us and Lastly, I would also like to thank all the people who submitted feature suggestions and bug reports on Github, they
who found a quite nasty bug in the selectiont tools. Hope to see you soon in a new log!</br> are very welcome and we will try to address as many as possible of them.
- <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>!

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>!