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

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

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

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

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

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

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

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

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

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

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

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

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