mirror of
https://github.com/lospec/pixel-editor.git
synced 2023-08-10 21:12:51 +03:00
Removed currentGlobalColor
This commit is contained in:
@ -88,10 +88,7 @@ const ColorModule = (() => {
|
|||||||
|
|
||||||
//if this is the current color, update the drawing color
|
//if this is the current color, update the drawing color
|
||||||
if (hexElement.colorElement.parentElement.classList.contains('selected')) {
|
if (hexElement.colorElement.parentElement.classList.contains('selected')) {
|
||||||
for (let i=1; i<layers.length - nAppLayers; i++) {
|
updateCurrentColor('#' + Color.rgbToHex(newColor));
|
||||||
layers[i].context.fillStyle = '#'+ Color.rgbToHex(newColor);
|
|
||||||
}
|
|
||||||
currentGlobalColor = newColor;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -100,6 +97,7 @@ const ColorModule = (() => {
|
|||||||
* @param {*} e The event that triggered the callback
|
* @param {*} e The event that triggered the callback
|
||||||
*/
|
*/
|
||||||
function clickedColor (e){
|
function clickedColor (e){
|
||||||
|
console.log("here bitch");
|
||||||
//left clicked color
|
//left clicked color
|
||||||
if (e.which == 1) {
|
if (e.which == 1) {
|
||||||
// remove current color selection
|
// remove current color selection
|
||||||
@ -107,11 +105,8 @@ const ColorModule = (() => {
|
|||||||
if (selectedColor) selectedColor.classList.remove('selected');
|
if (selectedColor) selectedColor.classList.remove('selected');
|
||||||
|
|
||||||
//set current color
|
//set current color
|
||||||
for (let i=1; i<layers.length - nAppLayers; i++) {
|
updateCurrentColor(e.target.style.backgroundColor);
|
||||||
layers[i].context.fillStyle = this.style.backgroundColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
currentGlobalColor = this.style.backgroundColor;
|
|
||||||
//make color selected
|
//make color selected
|
||||||
e.target.parentElement.classList.add('selected');
|
e.target.parentElement.classList.add('selected');
|
||||||
|
|
||||||
@ -136,9 +131,9 @@ const ColorModule = (() => {
|
|||||||
document.querySelector('#colors-menu li.selected').classList.remove('selected');
|
document.querySelector('#colors-menu li.selected').classList.remove('selected');
|
||||||
|
|
||||||
//add new color and make it selected
|
//add new color and make it selected
|
||||||
var addedColor = addColor(newColor);
|
let addedColor = addColor(newColor);
|
||||||
addedColor.classList.add('selected');
|
addedColor.classList.add('selected');
|
||||||
currentLayer.context.fillStyle = '#' + newColor;
|
updateCurrentColor(newColor);
|
||||||
|
|
||||||
//add history state
|
//add history state
|
||||||
new HistoryState().AddColor(addedColor.firstElementChild.jscolor.toString());
|
new HistoryState().AddColor(addedColor.firstElementChild.jscolor.toString());
|
||||||
@ -305,7 +300,7 @@ const ColorModule = (() => {
|
|||||||
if (color.parentElement.classList.contains('selected')) {
|
if (color.parentElement.classList.contains('selected')) {
|
||||||
//set current color TO LIGHTEST COLOR
|
//set current color TO LIGHTEST COLOR
|
||||||
lightestColor[1].parentElement.classList.add('selected');
|
lightestColor[1].parentElement.classList.add('selected');
|
||||||
currentLayer.context.fillStyle = '#'+lightestColor[1].jscolor.toString();
|
updateCurrentColor('#'+lightestColor[1].jscolor.toString());
|
||||||
}
|
}
|
||||||
|
|
||||||
//delete the element
|
//delete the element
|
||||||
@ -391,7 +386,7 @@ const ColorModule = (() => {
|
|||||||
if (!darkestColor.hex.includes('#')) darkestColor.hex = '#' + darkestColor.hex;
|
if (!darkestColor.hex.includes('#')) darkestColor.hex = '#' + darkestColor.hex;
|
||||||
|
|
||||||
//set as current color
|
//set as current color
|
||||||
currentLayer.context.fillStyle = darkestColor.hex;
|
updateCurrentColor(darkestColor.hex);
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Creates the palette with the colours used in all the layers
|
/** Creates the palette with the colours used in all the layers
|
||||||
@ -435,6 +430,16 @@ const ColorModule = (() => {
|
|||||||
createColorPalette(colorPaletteArray);
|
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 {
|
return {
|
||||||
getCurrentPalette,
|
getCurrentPalette,
|
||||||
addColor,
|
addColor,
|
||||||
@ -443,6 +448,7 @@ const ColorModule = (() => {
|
|||||||
addToSimplePalette,
|
addToSimplePalette,
|
||||||
resetPalette,
|
resetPalette,
|
||||||
createColorPalette,
|
createColorPalette,
|
||||||
createPaletteFromLayers
|
createPaletteFromLayers,
|
||||||
|
updateCurrentColor
|
||||||
}
|
}
|
||||||
})();
|
})();
|
@ -141,9 +141,9 @@ const Startup = (() => {
|
|||||||
// Adding the first layer and the checkerboard to the list of layers
|
// Adding the first layer and the checkerboard to the list of layers
|
||||||
layers.push(checkerBoard);
|
layers.push(checkerBoard);
|
||||||
layers.push(currentLayer);
|
layers.push(currentLayer);
|
||||||
layers.push(VFXLayer);
|
|
||||||
layers.push(TMPLayer);
|
layers.push(TMPLayer);
|
||||||
layers.push(pixelGrid);
|
layers.push(pixelGrid);
|
||||||
|
layers.push(VFXLayer);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -184,8 +184,7 @@ const Startup = (() => {
|
|||||||
ColorModule.addColor(defaultBackgroundColor);
|
ColorModule.addColor(defaultBackgroundColor);
|
||||||
|
|
||||||
//set current drawing color as foreground color
|
//set current drawing color as foreground color
|
||||||
currentLayer.context.fillStyle = '#'+defaultForegroundColor;
|
ColorModule.updateCurrentColor('#'+defaultForegroundColor);
|
||||||
currentGlobalColor = '#' + defaultForegroundColor;
|
|
||||||
selectedPalette = 'none';
|
selectedPalette = 'none';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -64,7 +64,7 @@ function switchMode(newMode) {
|
|||||||
document.querySelector('#sp-quickstart-container .mode-switcher').classList.remove('advanced-mode');
|
document.querySelector('#sp-quickstart-container .mode-switcher').classList.remove('advanced-mode');
|
||||||
|
|
||||||
pixelEditorMode = 'Basic';
|
pixelEditorMode = 'Basic';
|
||||||
togglePixelGrid('on');
|
togglePixelGrid('off');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -80,9 +80,8 @@ function endEllipseDrawing(mouseEvent) {
|
|||||||
endEllipseX -= 0.5;
|
endEllipseX -= 0.5;
|
||||||
startEllipseX -= 0.5;
|
startEllipseX -= 0.5;
|
||||||
|
|
||||||
// Setting the correct linewidth and colour
|
// Setting the correct linewidth
|
||||||
currentLayer.context.lineWidth = tool.ellipse.brushSize;
|
currentLayer.context.lineWidth = tool.ellipse.brushSize;
|
||||||
currentLayer.context.fillStyle = currentGlobalColor;
|
|
||||||
|
|
||||||
// Drawing the ellipse using 4 lines
|
// Drawing the ellipse using 4 lines
|
||||||
line(startEllipseX, startEllipseY, endEllipseX, startEllipseY, tool.ellipse.brushSize);
|
line(startEllipseX, startEllipseY, endEllipseX, startEllipseY, tool.ellipse.brushSize);
|
||||||
@ -115,7 +114,6 @@ function drawEllipse(x, y) {
|
|||||||
|
|
||||||
// Drawing the ellipse
|
// Drawing the ellipse
|
||||||
vfxContext.lineWidth = tool.ellipse.brushSize;
|
vfxContext.lineWidth = tool.ellipse.brushSize;
|
||||||
vfxContext.strokeStyle = currentGlobalColor;
|
|
||||||
|
|
||||||
// Drawing the ellipse
|
// Drawing the ellipse
|
||||||
vfxContext.beginPath();
|
vfxContext.beginPath();
|
||||||
|
@ -16,9 +16,7 @@ function diagLine(lastMouseClickPos, zoom, cursorLocation) {
|
|||||||
const canvas = document.getElementById('tmp-canvas');
|
const canvas = document.getElementById('tmp-canvas');
|
||||||
const context = canvas.getContext('2d');
|
const context = canvas.getContext('2d');
|
||||||
|
|
||||||
context.fillStyle=currentGlobalColor;
|
|
||||||
context.clearRect(0, 0, canvas.width, canvas.height);
|
context.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
canvas.style.zIndex = parseInt(currentLayer.canvas.style.zIndex, 10) + 1;
|
canvas.style.zIndex = parseInt(currentLayer.canvas.style.zIndex, 10) + 1;
|
||||||
|
|
||||||
//console.log(canvas.style.zIndex, currentLayer.canvas.style.zIndex);
|
//console.log(canvas.style.zIndex, currentLayer.canvas.style.zIndex);
|
||||||
|
@ -93,12 +93,8 @@ window.addEventListener("mouseup", function (mouseEvent) {
|
|||||||
const rgbColor = {r:selectedColor[0],g:selectedColor[1],b:selectedColor[2]};
|
const rgbColor = {r:selectedColor[0],g:selectedColor[1],b:selectedColor[2]};
|
||||||
var newColor = Color.rgbToHex(rgbColor);
|
var newColor = Color.rgbToHex(rgbColor);
|
||||||
|
|
||||||
currentGlobalColor = "#" + newColor;
|
ColorModule.updateCurrentColor('#' + newColor);
|
||||||
|
|
||||||
for (let i=1; i<layers.length - 1; i++) {
|
|
||||||
layers[i].context.fillStyle = currentGlobalColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
let colors = document.getElementsByClassName('color-button');
|
let colors = document.getElementsByClassName('color-button');
|
||||||
for (let i = 0; i < colors.length; i++) {
|
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 a document hasnt yet been created or the current layer is locked, exit this function
|
||||||
if (!documentCreated || Dialogue.isOpen() || !currentLayer.isVisible || currentLayer.isLocked) return;
|
if (!documentCreated || Dialogue.isOpen() || !currentLayer.isVisible || currentLayer.isLocked) return;
|
||||||
|
|
||||||
|
// Moving brush preview
|
||||||
|
currentTool.moveBrushPreview(cursorLocation);
|
||||||
// Hiding eyedropper, will be shown if it's needed
|
// Hiding eyedropper, will be shown if it's needed
|
||||||
eyedropperPreview.style.display = 'none';
|
eyedropperPreview.style.display = 'none';
|
||||||
|
|
||||||
@ -307,6 +305,8 @@ function draw (mouseEvent) {
|
|||||||
// Updating cursorLocation with new layer position
|
// Updating cursorLocation with new layer position
|
||||||
lastMouseMovePos = getCursorPosition(mouseEvent);
|
lastMouseMovePos = getCursorPosition(mouseEvent);
|
||||||
cursorLocation = lastMouseMovePos;
|
cursorLocation = lastMouseMovePos;
|
||||||
|
// Moving brush preview
|
||||||
|
currentTool.moveBrushPreview(cursorLocation);
|
||||||
}
|
}
|
||||||
else if (currentTool.name == 'eyedropper' && Input.isDragging() && mouseEvent.target.className == 'drawingCanvas') {
|
else if (currentTool.name == 'eyedropper' && Input.isDragging() && mouseEvent.target.className == 'drawingCanvas') {
|
||||||
|
|
||||||
@ -422,9 +422,6 @@ function draw (mouseEvent) {
|
|||||||
}
|
}
|
||||||
currentLayer.updateLayerPreview();
|
currentLayer.updateLayerPreview();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Moving brush preview
|
|
||||||
currentTool.moveBrushPreview(cursorLocation);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (mouseEvent.target.className == 'drawingCanvas')
|
if (mouseEvent.target.className == 'drawingCanvas')
|
||||||
|
@ -3,10 +3,11 @@ let pixelGridColor = "#000000";
|
|||||||
// Distance between one line and another in HTML pixels
|
// Distance between one line and another in HTML pixels
|
||||||
let lineDistance = 12;
|
let lineDistance = 12;
|
||||||
// The grid is visible by default
|
// The grid is visible by default
|
||||||
let pixelGridVisible = true;
|
let pixelGridVisible = false;
|
||||||
// Saving the canvas containing the pixel grid
|
// Saving the canvas containing the pixel grid
|
||||||
pixelGridCanvas = document.getElementById("pixel-grid");
|
pixelGridCanvas = document.getElementById("pixel-grid");
|
||||||
|
|
||||||
|
|
||||||
/** Shows or hides the pixel grid depening on its current visibility
|
/** Shows or hides the pixel grid depening on its current visibility
|
||||||
* (triggered by the show pixel grid button in the top menu)
|
* (triggered by the show pixel grid button in the top menu)
|
||||||
*
|
*
|
||||||
|
@ -19,8 +19,8 @@ let endRectY;
|
|||||||
* @param {*} mouseEvent
|
* @param {*} mouseEvent
|
||||||
*/
|
*/
|
||||||
function startRectDrawing(mouseEvent) {
|
function startRectDrawing(mouseEvent) {
|
||||||
// Putting the vfx layer on top of everything
|
// Putting the tmp layer on top of everything
|
||||||
VFXCanvas.style.zIndex = parseInt(currentLayer.canvas.style.zIndex, 10) + 1;;
|
TMPCanvas.style.zIndex = parseInt(currentLayer.canvas.style.zIndex, 10) + 1;
|
||||||
// Updating flag
|
// Updating flag
|
||||||
isDrawingRect = true;
|
isDrawingRect = true;
|
||||||
|
|
||||||
@ -51,7 +51,7 @@ function updateRectDrawing(mouseEvent) {
|
|||||||
function endRectDrawing(mouseEvent) {
|
function endRectDrawing(mouseEvent) {
|
||||||
// Getting the end position
|
// Getting the end position
|
||||||
let currentPos = getCursorPosition(mouseEvent);
|
let currentPos = getCursorPosition(mouseEvent);
|
||||||
let vfxContext = VFXCanvas.getContext("2d");
|
let tmpContext = TMPCanvas.getContext("2d");
|
||||||
|
|
||||||
endRectX = Math.floor(currentPos[0] / zoom) + 0.5;
|
endRectX = Math.floor(currentPos[0] / zoom) + 0.5;
|
||||||
endRectY = Math.floor(currentPos[1] / zoom) + 0.5;
|
endRectY = Math.floor(currentPos[1] / zoom) + 0.5;
|
||||||
@ -79,7 +79,6 @@ function endRectDrawing(mouseEvent) {
|
|||||||
|
|
||||||
// Setting the correct linewidth and colour
|
// Setting the correct linewidth and colour
|
||||||
currentLayer.context.lineWidth = tool.rectangle.brushSize;
|
currentLayer.context.lineWidth = tool.rectangle.brushSize;
|
||||||
currentLayer.context.fillStyle = currentGlobalColor;
|
|
||||||
|
|
||||||
// Drawing the rect using 4 lines
|
// Drawing the rect using 4 lines
|
||||||
line(startRectX, startRectY, endRectX, startRectY, tool.rectangle.brushSize);
|
line(startRectX, startRectY, endRectX, startRectY, tool.rectangle.brushSize);
|
||||||
@ -92,38 +91,38 @@ function endRectDrawing(mouseEvent) {
|
|||||||
currentLayer.context.fillRect(startRectX, startRectY, endRectX - startRectX, endRectY - startRectY);
|
currentLayer.context.fillRect(startRectX, startRectY, endRectX - startRectX, endRectY - startRectY);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Clearing the vfx canvas
|
// Clearing the tmp canvas
|
||||||
vfxContext.clearRect(0, 0, VFXCanvas.width, VFXCanvas.height);
|
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)
|
* the preview for the rectangle tool)
|
||||||
*
|
*
|
||||||
* @param {*} x The current end x of the rectangle
|
* @param {*} x The current end x of the rectangle
|
||||||
* @param {*} y The current end y of the rectangle
|
* @param {*} y The current end y of the rectangle
|
||||||
*/
|
*/
|
||||||
function drawRectangle(x, y) {
|
function drawRectangle(x, y) {
|
||||||
// Getting the vfx context
|
console.log("drawing, color: " + TMPCanvas.getContext("2d").fillStyle);
|
||||||
let vfxContext = VFXCanvas.getContext("2d");
|
// Getting the tmp context
|
||||||
|
let tmpContext = TMPCanvas.getContext("2d");
|
||||||
|
|
||||||
// Clearing the vfx canvas
|
// Clearing the tmp canvas
|
||||||
vfxContext.clearRect(0, 0, VFXCanvas.width, VFXCanvas.height);
|
tmpContext.clearRect(0, 0, TMPCanvas.width, TMPCanvas.height);
|
||||||
|
|
||||||
// Drawing the rect
|
// Drawing the rect
|
||||||
vfxContext.lineWidth = tool.rectangle.brushSize;
|
tmpContext.lineWidth = tool.rectangle.brushSize;
|
||||||
vfxContext.strokeStyle = currentGlobalColor;
|
|
||||||
|
|
||||||
// Drawing the rect
|
// Drawing the rect
|
||||||
vfxContext.beginPath();
|
tmpContext.beginPath();
|
||||||
if ((tool.rectangle.brushSize % 2 ) == 0) {
|
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 {
|
else {
|
||||||
vfxContext.rect(startRectX, startRectY, x - startRectX, y - startRectY);
|
tmpContext.rect(startRectX, startRectY, x - startRectX, y - startRectY);
|
||||||
}
|
}
|
||||||
|
|
||||||
vfxContext.setLineDash([]);
|
tmpContext.setLineDash([]);
|
||||||
vfxContext.stroke();
|
tmpContext.stroke();
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Sets the correct tool icon depending on its mode
|
/** Sets the correct tool icon depending on its mode
|
||||||
|
@ -124,8 +124,6 @@ function resizeCanvas(event, size, customData, saveHistory = true) {
|
|||||||
y: layers[0].canvasSize[1]},
|
y: layers[0].canvasSize[1]},
|
||||||
imageDatas.slice(), customData != null && saveHistory
|
imageDatas.slice(), customData != null && saveHistory
|
||||||
);
|
);
|
||||||
|
|
||||||
console.log("salvata");
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Resize the canvases
|
// Resize the canvases
|
||||||
@ -137,7 +135,6 @@ function resizeCanvas(event, size, customData, saveHistory = true) {
|
|||||||
layers[i].canvas.height = layers[i].canvasSize[1];
|
layers[i].canvas.height = layers[i].canvasSize[1];
|
||||||
|
|
||||||
layers[i].resize();
|
layers[i].resize();
|
||||||
layers[i].context.fillStyle = currentGlobalColor;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Regenerate the checkerboard
|
// Regenerate the checkerboard
|
||||||
|
@ -15,8 +15,6 @@ var canvasView = document.getElementById("canvas-view");
|
|||||||
// main canvas
|
// main canvas
|
||||||
// REFACTOR: carefully check if it's possible to remove this one
|
// REFACTOR: carefully check if it's possible to remove this one
|
||||||
var canvas = document.getElementById('pixel-canvas');
|
var canvas = document.getElementById('pixel-canvas');
|
||||||
// REFACTOR: find some way to put these in ColorModule?
|
|
||||||
var currentGlobalColor;
|
|
||||||
|
|
||||||
// Layers
|
// Layers
|
||||||
// REFACTOR: File class / IIFE?
|
// REFACTOR: File class / IIFE?
|
||||||
|
Reference in New Issue
Block a user