Fixed tool color

Fixed ellipse filling the whole canvas when changing tool

js/ColorModule.js

@@ -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() {

js/tools/BrushTool.js

@@ -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) {

js/tools/EllipseTool.js

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

js/tools/EraserTool.js

@@ -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) {

js/tools/EyeDropperTool.js

@@ -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) {

js/tools/FillTool.js

@@ -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) {

js/tools/LassoSelectionTool.js

@@ -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) {

js/tools/LineTool.js

@@ -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) {

js/tools/MagicWandTool.js

@@ -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) {

js/tools/PanTool.js

@@ -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) {

js/tools/RectangleTool.js

@@ -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() {

js/tools/RectangularSelectionTool.js

@@ -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) {

views/latestLog.hbs

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

views/logs/00003-selection-tools.hbs

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