Fixed tool color
Fixed ellipse filling the whole canvas when changing tool
This commit is contained in:
Nicola
parent
f9a87cc46e
commit
74665db3de
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
|
|
@ -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,10 +141,15 @@ const ColorModule = (() => {
|
|||
}
|
||||
//right clicked color
|
||||
else if (e.which == 3) {
|
||||
//hide edit color button (to prevent it from showing)
|
||||
e.target.parentElement.lastChild.classList.add('hidden');
|
||||
//show color picker
|
||||
e.target.jscolor.show();
|
||||
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");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
@ -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>!
|
||||
Loading…
Reference in New Issue