mirror/pixel-editor
1
0
Fork 0
mirror of https://github.com/lospec/pixel-editor.git synced 2023-08-10 21:12:51 +03:00
Code Issues Projects Releases Wiki Activity

Removed currentGlobalColor

Browse Source
This commit is contained in:
unsettledgames 2021-07-22 18:02:19 +02:00
parent 1a6079cc81
commit 6bd6515385
10 changed files with 48 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
js/ColorModule.js
View File

@ -88,10 +88,7 @@ const ColorModule = (() => {
//if this is the current color, update the drawing color
if (hexElement.colorElement.parentElement.classList.contains('selected')) {
for (let i=1; i<layers.length - nAppLayers; i++) {
layers[i].context.fillStyle = '#'+ Color.rgbToHex(newColor);
}
currentGlobalColor = newColor;
updateCurrentColor('#' + Color.rgbToHex(newColor));
}
}
@ -100,6 +97,7 @@ const ColorModule = (() => {
* @param {*} e The event that triggered the callback
*/
function clickedColor (e){
console.log("here bitch");
//left clicked color
if (e.which == 1) {
// remove current color selection
@ -107,11 +105,8 @@ const ColorModule = (() => {
if (selectedColor) selectedColor.classList.remove('selected');
//set current color
for (let i=1; i<layers.length - nAppLayers; i++) {
layers[i].context.fillStyle = this.style.backgroundColor;
}
updateCurrentColor(e.target.style.backgroundColor);
currentGlobalColor = this.style.backgroundColor;
//make color selected
e.target.parentElement.classList.add('selected');
@ -136,9 +131,9 @@ const ColorModule = (() => {
document.querySelector('#colors-menu li.selected').classList.remove('selected');
//add new color and make it selected
var addedColor = addColor(newColor);
let addedColor = addColor(newColor);
addedColor.classList.add('selected');
currentLayer.context.fillStyle = '#' + newColor;
updateCurrentColor(newColor);
//add history state
new HistoryState().AddColor(addedColor.firstElementChild.jscolor.toString());
@ -305,7 +300,7 @@ const ColorModule = (() => {
if (color.parentElement.classList.contains('selected')) {
//set current color TO LIGHTEST COLOR
lightestColor[1].parentElement.classList.add('selected');
currentLayer.context.fillStyle = '#'+lightestColor[1].jscolor.toString();
updateCurrentColor('#'+lightestColor[1].jscolor.toString());
}
//delete the element
@ -391,7 +386,7 @@ const ColorModule = (() => {
if (!darkestColor.hex.includes('#')) darkestColor.hex = '#' + darkestColor.hex;
//set as current color
currentLayer.context.fillStyle = darkestColor.hex;
updateCurrentColor(darkestColor.hex);
}
/** Creates the palette with the colours used in all the layers
@ -435,6 +430,16 @@ const ColorModule = (() => {
createColorPalette(colorPaletteArray);
}
function updateCurrentColor(color, refLayer) {
if (refLayer)
color = refLayer.context.fillStyle;
for (let i=0; i<layers.length - 1; i++) {
layers[i].context.fillStyle = color;
layers[i].context.strokeStyle = color;
}
}
return {
getCurrentPalette,
addColor,
@ -443,6 +448,7 @@ const ColorModule = (() => {
addToSimplePalette,
resetPalette,
createColorPalette,
createPaletteFromLayers
createPaletteFromLayers,
updateCurrentColor
}
})();

5
js/Startup.js
View File

@ -141,9 +141,9 @@ const Startup = (() => {
// Adding the first layer and the checkerboard to the list of layers
layers.push(checkerBoard);
layers.push(currentLayer);
layers.push(VFXLayer);
layers.push(TMPLayer);
layers.push(pixelGrid);
layers.push(VFXLayer);
}
}
@ -184,8 +184,7 @@ const Startup = (() => {
ColorModule.addColor(defaultBackgroundColor);
//set current drawing color as foreground color
currentLayer.context.fillStyle = '#'+defaultForegroundColor;
currentGlobalColor = '#' + defaultForegroundColor;
ColorModule.updateCurrentColor('#'+defaultForegroundColor);
selectedPalette = 'none';
}
}

2
js/_editorMode.js
View File

@ -64,7 +64,7 @@ function switchMode(newMode) {
document.querySelector('#sp-quickstart-container .mode-switcher').classList.remove('advanced-mode');
pixelEditorMode = 'Basic';
togglePixelGrid('on');
togglePixelGrid('off');
}
}

4
js/_ellipse.js
View File

@ -80,9 +80,8 @@ function endEllipseDrawing(mouseEvent) {
endEllipseX -= 0.5;
startEllipseX -= 0.5;
// Setting the correct linewidth and colour
// Setting the correct linewidth
currentLayer.context.lineWidth = tool.ellipse.brushSize;
currentLayer.context.fillStyle = currentGlobalColor;
// Drawing the ellipse using 4 lines
line(startEllipseX, startEllipseY, endEllipseX, startEllipseY, tool.ellipse.brushSize);
@ -115,7 +114,6 @@ function drawEllipse(x, y) {
// Drawing the ellipse
vfxContext.lineWidth = tool.ellipse.brushSize;
vfxContext.strokeStyle = currentGlobalColor;
// Drawing the ellipse
vfxContext.beginPath();

2
js/_line.js
View File

@ -16,9 +16,7 @@ function diagLine(lastMouseClickPos, zoom, cursorLocation) {
const canvas = document.getElementById('tmp-canvas');
const context = canvas.getContext('2d');
context.fillStyle=currentGlobalColor;
context.clearRect(0, 0, canvas.width, canvas.height);
canvas.style.zIndex = parseInt(currentLayer.canvas.style.zIndex, 10) + 1;
//console.log(canvas.style.zIndex, currentLayer.canvas.style.zIndex);

15
js/_mouseEvents.js
View File

@ -93,12 +93,8 @@ window.addEventListener("mouseup", function (mouseEvent) {
const rgbColor = {r:selectedColor[0],g:selectedColor[1],b:selectedColor[2]};
var newColor = Color.rgbToHex(rgbColor);
currentGlobalColor = "#" + newColor;
for (let i=1; i<layers.length - 1; i++) {
layers[i].context.fillStyle = currentGlobalColor;
}
ColorModule.updateCurrentColor('#' + newColor);
let colors = document.getElementsByClassName('color-button');
for (let i = 0; i < colors.length; i++) {
@ -216,6 +212,8 @@ function draw (mouseEvent) {
//if a document hasnt yet been created or the current layer is locked, exit this function
if (!documentCreated || Dialogue.isOpen() || !currentLayer.isVisible || currentLayer.isLocked) return;
// Moving brush preview
currentTool.moveBrushPreview(cursorLocation);
// Hiding eyedropper, will be shown if it's needed
eyedropperPreview.style.display = 'none';
@ -307,6 +305,8 @@ function draw (mouseEvent) {
// Updating cursorLocation with new layer position
lastMouseMovePos = getCursorPosition(mouseEvent);
cursorLocation = lastMouseMovePos;
// Moving brush preview
currentTool.moveBrushPreview(cursorLocation);
}
else if (currentTool.name == 'eyedropper' && Input.isDragging() && mouseEvent.target.className == 'drawingCanvas') {
@ -422,9 +422,6 @@ function draw (mouseEvent) {
}
currentLayer.updateLayerPreview();
}
// Moving brush preview
currentTool.moveBrushPreview(cursorLocation);
}
if (mouseEvent.target.className == 'drawingCanvas')

3
js/_pixelGrid.js
View File

@ -3,10 +3,11 @@ let pixelGridColor = "#000000";
// Distance between one line and another in HTML pixels
let lineDistance = 12;
// The grid is visible by default
let pixelGridVisible = true;
let pixelGridVisible = false;
// Saving the canvas containing the pixel grid
pixelGridCanvas = document.getElementById("pixel-grid");
/** Shows or hides the pixel grid depening on its current visibility
* (triggered by the show pixel grid button in the top menu)
*

35
js/_rectangle.js
View File

@ -19,8 +19,8 @@ let endRectY;
* @param {*} mouseEvent
*/
function startRectDrawing(mouseEvent) {
// Putting the vfx layer on top of everything
VFXCanvas.style.zIndex = parseInt(currentLayer.canvas.style.zIndex, 10) + 1;;
// Putting the tmp layer on top of everything
TMPCanvas.style.zIndex = parseInt(currentLayer.canvas.style.zIndex, 10) + 1;
// Updating flag
isDrawingRect = true;
@ -51,7 +51,7 @@ function updateRectDrawing(mouseEvent) {
function endRectDrawing(mouseEvent) {
// Getting the end position
let currentPos = getCursorPosition(mouseEvent);
let vfxContext = VFXCanvas.getContext("2d");
let tmpContext = TMPCanvas.getContext("2d");
endRectX = Math.floor(currentPos[0] / zoom) + 0.5;
endRectY = Math.floor(currentPos[1] / zoom) + 0.5;
@ -79,7 +79,6 @@ function endRectDrawing(mouseEvent) {
// Setting the correct linewidth and colour
currentLayer.context.lineWidth = tool.rectangle.brushSize;
currentLayer.context.fillStyle = currentGlobalColor;
// Drawing the rect using 4 lines
line(startRectX, startRectY, endRectX, startRectY, tool.rectangle.brushSize);
@ -92,38 +91,38 @@ function endRectDrawing(mouseEvent) {
currentLayer.context.fillRect(startRectX, startRectY, endRectX - startRectX, endRectY - startRectY);
}
// Clearing the vfx canvas
vfxContext.clearRect(0, 0, VFXCanvas.width, VFXCanvas.height);
// Clearing the tmp canvas
tmpContext.clearRect(0, 0, TMPCanvas.width, TMPCanvas.height);
}
/** Draws a rectangle with end coordinates given by x and y on the VFX layer (draws
/** Draws a rectangle with end coordinates given by x and y on the tmp layer (draws
* the preview for the rectangle tool)
*
* @param {*} x The current end x of the rectangle
* @param {*} y The current end y of the rectangle
*/
function drawRectangle(x, y) {
// Getting the vfx context
let vfxContext = VFXCanvas.getContext("2d");
console.log("drawing, color: " + TMPCanvas.getContext("2d").fillStyle);
// Getting the tmp context
let tmpContext = TMPCanvas.getContext("2d");
// Clearing the vfx canvas
vfxContext.clearRect(0, 0, VFXCanvas.width, VFXCanvas.height);
// Clearing the tmp canvas
tmpContext.clearRect(0, 0, TMPCanvas.width, TMPCanvas.height);
// Drawing the rect
vfxContext.lineWidth = tool.rectangle.brushSize;
vfxContext.strokeStyle = currentGlobalColor;
tmpContext.lineWidth = tool.rectangle.brushSize;
// Drawing the rect
vfxContext.beginPath();
tmpContext.beginPath();
if ((tool.rectangle.brushSize % 2 ) == 0) {
vfxContext.rect(startRectX - 0.5, startRectY - 0.5, x - startRectX, y - startRectY);
tmpContext.rect(startRectX - 0.5, startRectY - 0.5, x - startRectX, y - startRectY);
}
else {
vfxContext.rect(startRectX, startRectY, x - startRectX, y - startRectY);
tmpContext.rect(startRectX, startRectY, x - startRectX, y - startRectY);
}
vfxContext.setLineDash([]);
vfxContext.stroke();
tmpContext.setLineDash([]);
tmpContext.stroke();
}
/** Sets the correct tool icon depending on its mode

3
js/_resizeCanvas.js
View File

@ -124,8 +124,6 @@ function resizeCanvas(event, size, customData, saveHistory = true) {
y: layers[0].canvasSize[1]},
imageDatas.slice(), customData != null && saveHistory
);
console.log("salvata");
}
// Resize the canvases
@ -137,7 +135,6 @@ function resizeCanvas(event, size, customData, saveHistory = true) {
layers[i].canvas.height = layers[i].canvasSize[1];
layers[i].resize();
layers[i].context.fillStyle = currentGlobalColor;
}
// Regenerate the checkerboard

2
js/_variables.js
View File

@ -15,8 +15,6 @@ var canvasView = document.getElementById("canvas-view");
// main canvas
// REFACTOR: carefully check if it's possible to remove this one
var canvas = document.getElementById('pixel-canvas');
// REFACTOR: find some way to put these in ColorModule?
var currentGlobalColor;
// Layers
// REFACTOR: File class / IIFE?