mirror of
https://github.com/lospec/pixel-editor.git
synced 2023-08-10 21:12:51 +03:00
Fixed tool color
Fixed ellipse filling the whole canvas when changing tool
This commit is contained in:
@ -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) {
|
||||
|
Reference in New Issue
Block a user