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

Merge branch 'master' into minor-changes

Browse Source
This commit is contained in:
unsettledgames
2020-09-12 11:06:37 +02:00
parent 2da7e192e8 62fc655fd2
commit 232e08f84d
8 changed files with 831 additions and 964 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
js/_createColorPalette.js
View File

@@ -35,6 +35,9 @@ function createColorPalette(selectedPalette, fillBackground, deletePreviousPalet
}
}
//prepend # if not present
if (!darkestColor.includes('#')) darkestColor = '#' + darkestColor;
//set as current color
currentLayer.context.fillStyle = darkestColor;
}

33
js/_editorMode.js
View File

@@ -10,6 +10,8 @@ let modes = {
let infoBox = document.getElementById('editor-mode-info');
function switchMode(currentMode, mustConfirm = true) {
//switch to advanced mode
if (currentMode == 'Basic') {
// Switch to advanced ez pez lemon squez
document.getElementById('switch-mode-button').innerHTML = 'Switch to basic mode';
@@ -18,22 +20,33 @@ function switchMode(currentMode, mustConfirm = true) {
document.getElementById('layer-button').style.display = 'inline-block';
// Move the palette menu
document.getElementById('colors-menu').style.right = '200px';
pixelEditorMode = 'Advanced';
}
//switch to basic mode
else {
// Switch to basic
if (mustConfirm) {
if (!confirm('Switching to basic mode will flatten all the visible layers. Are you sure you want to continue?')) {
return;
}
//if there is a current layer (a document is active)
if (currentLayer) {
//confirm with user before flattening image
if (mustConfirm ) {
if (!confirm('Switching to basic mode will flatten all the visible layers. Are you sure you want to continue?')) {
return;
}
}
// Selecting the current layer
currentLayer.selectLayer();
// Flatten the layers
flatten(true);
}
//change menu text
document.getElementById('switch-mode-button').innerHTML = 'Switch to advanced mode';
// Selecting the current layer
currentLayer.selectLayer();
// Flatten the layers
flatten(true);
// Hide the layer menus
layerList.style.display = 'none';
document.getElementById('layer-button').style.display = 'none';

14
js/_history.js
View File

@@ -175,7 +175,7 @@ function HistoryStateMoveTwoLayers(layer, oldIndex, newIndex) {
saveHistoryState(this);
}
function HistoryStateMoveLayer(afterToDrop, toDrop, static, nMoved) {
function HistoryStateMoveLayer(afterToDrop, toDrop, staticc, nMoved) {
this.beforeToDrop = afterToDrop;
this.toDrop = toDrop;
@@ -197,7 +197,7 @@ function HistoryStateMoveLayer(afterToDrop, toDrop, static, nMoved) {
};
this.redo = function() {
moveLayers(toDrop.menuEntry.id, static.menuEntry.id, true);
moveLayers(toDrop.menuEntry.id, staticc.menuEntry.id, true);
undoStates.push(this);
};
@@ -378,7 +378,7 @@ function undo () {
if (undoStates.length > 0) {
document.getElementById('redo-button').classList.remove('disabled');
//get state
//get state
var undoState = undoStates[undoStates.length-1];
//console.log(undoState);
@@ -387,9 +387,9 @@ function undo () {
//restore the state
undoState.undo();
//if theres none left to undo, disable the option
if (undoStates.length == 0)
if (undoStates.length == 0)
document.getElementById('undo-button').classList.add('disabled');
}
}
@@ -402,7 +402,7 @@ function redo () {
//enable undo button
document.getElementById('undo-button').classList.remove('disabled');
//get state
//get state
var redoState = redoStates[redoStates.length-1];
//remove from redo array (do this before restoring the state, else the flatten state will break)
@@ -412,7 +412,7 @@ function redo () {
redoState.redo();
//if theres none left to redo, disable the option
if (redoStates.length == 0)
if (redoStates.length == 0)
document.getElementById('redo-button').classList.add('disabled');
}
//console.log(undoStates);

44
js/_layer.js
View File

@@ -1,13 +1,13 @@
/** TODO LIST FOR LAYERS
GENERAL REQUIREMENTS:
- Saving the state of an artwork to a .lospec file so that people can work on it later keeping
- Saving the state of an artwork to a .lospec file so that people can work on it later keeping
the layers they created? That'd be cool, even for the app users, that could just double click on a lospec
file for it to be opened right in the pixel editor
OPTIONAL:
1 - Fix issues
1 - Fix issues
*/
let layerList;
@@ -52,7 +52,7 @@ class Layer {
currentID++;
}
this.id = "layer" + id;
this.id = "layer" + id;
if (menuEntry != null) {
this.name = menuEntry.getElementsByTagName("p")[0].innerHTML;
@@ -138,7 +138,7 @@ class Layer {
if (layerDragSource != this) {
let toDropID = element.dataTransfer.getData('text/html');
let thisID = this.id;
moveLayers(toDropID, thisID);
}
@@ -150,7 +150,7 @@ class Layer {
layerDragEnd(element) {
this.classList.remove('layerdragover');
}
}
// Resizes canvas
resize() {
@@ -328,9 +328,9 @@ class Layer {
// La appiccico sulla preview
destination.getContext('2d').clearRect(0, 0, destination.width, destination.height);
destination.getContext('2d').drawImage(this.canvas,
destination.getContext('2d').drawImage(this.canvas,
// This is necessary to center the preview in the canvas
(destination.width - previewWidth) / 2, (destination.height - previewHeight) / 2,
(destination.width - previewWidth) / 2, (destination.height - previewHeight) / 2,
previewWidth, previewHeight);
}
}
@@ -398,14 +398,14 @@ function merge(saveHistory = true) {
let toMergeIndex = layers.indexOf(toMerge);
// Getting layer below
let layerBelow = getLayerByID(currentLayer.menuEntry.nextElementSibling.id);
// If I have something to merge with
if (layerBelow != null) {
// Selecting that layer
layerBelow.selectLayer();
if (saveHistory) {
new HistoryStateMergeLayer(toMergeIndex, toMerge,
new HistoryStateMergeLayer(toMergeIndex, toMerge,
layerBelow.context.getImageData(0, 0, layerBelow.canvasSize[0], layerBelow.canvasSize[1]),
layerBelow);
}
@@ -420,7 +420,7 @@ function merge(saveHistory = true) {
// Updating the layer preview
currentLayer.updateLayerPreview();
}
}
function deleteLayer(saveHistory = true) {
@@ -439,7 +439,7 @@ function deleteLayer(saveHistory = true) {
}
// or the previous one if the next one doesn't exist
else {
layers[layerIndex - 1].selectLayer();
layers[layerIndex - 1].selectLayer();
}
// Deleting canvas and entry
@@ -477,7 +477,7 @@ function renameLayer(event) {
// Swaps two layer entries in the layer menu
function moveLayers(toDropLayer, staticLayer, saveHistory = true) {
let toDrop = getLayerByID(toDropLayer);
let static = getLayerByID(staticLayer);
let staticc = getLayerByID(staticLayer);
let layerCopy = layers.slice();
let beforeToDrop = toDrop.menuEntry.nextElementSibling;
@@ -486,9 +486,9 @@ function moveLayers(toDropLayer, staticLayer, saveHistory = true) {
layerCopy.sort((a, b) => (a.canvas.style.zIndex > b.canvas.style.zIndex) ? 1 : -1);
let toDropIndex = layerCopy.indexOf(toDrop);
let staticIndex = layerCopy.indexOf(static);
let staticIndex = layerCopy.indexOf(staticc);
layerList.insertBefore(toDrop.menuEntry, static.menuEntry);
layerList.insertBefore(toDrop.menuEntry, staticc.menuEntry);
if (toDropIndex < staticIndex) {
let tmp = toDrop.canvas.style.zIndex;
@@ -511,9 +511,9 @@ function moveLayers(toDropLayer, staticLayer, saveHistory = true) {
}
toDrop.canvas.style.zIndex = tmp;
if (saveHistory) {
new HistoryStateMoveLayer(beforeToDrop, toDrop, static, nMoved);
new HistoryStateMoveLayer(beforeToDrop, toDrop, staticc, nMoved);
}
}
else {
@@ -540,7 +540,7 @@ function moveLayers(toDropLayer, staticLayer, saveHistory = true) {
toDrop.canvas.style.zIndex = tmp;
if (saveHistory) {
new HistoryStateMoveLayer(beforeToDrop, toDrop, static, nMoved);
new HistoryStateMoveLayer(beforeToDrop, toDrop, staticc, nMoved);
}
}
@@ -585,6 +585,8 @@ function addLayer(id, saveHistory = true) {
console.log("Tela creata: " + newCanvas);
if (!layerListEntry) return console.warn('skipping adding layer because no document');
// Clone the default layer
let toAppend = layerListEntry.cloneNode(true);
// Setting the default name for the layer
@@ -599,7 +601,7 @@ function addLayer(id, saveHistory = true) {
newLayer.context.fillStyle = currentLayer.context.fillStyle;
newLayer.copyData(currentLayer);
layers.splice(index, 0, newLayer);
// Insert it before the Add layer button
layerList.insertBefore(toAppend, layerList.childNodes[0]);
@@ -612,4 +614,6 @@ function addLayer(id, saveHistory = true) {
}
return newLayer;
}
}
layerList = document.getElementById("layers-menu");

5
js/_newPixel.js
View File

@@ -5,7 +5,6 @@ function newPixel (width, height, editorMode, fileContent = null) {
currentPalette = [];
if (firstPixel) {
layerList = document.getElementById("layers-menu");
layerListEntry = layerList.firstElementChild;
currentLayer = new Layer(width, height, canvas, layerListEntry);
@@ -55,7 +54,7 @@ function newPixel (width, height, editorMode, fileContent = null) {
canvasSize = currentLayer.canvasSize;
if (firstPixel) {
// Cloning the entry so that when I change something on the first layer, those changes aren't
// Cloning the entry so that when I change something on the first layer, those changes aren't
// propagated to the other ones
layerListEntry = layerListEntry.cloneNode(true);
// Adding the first layer and the checkerboard to the list of layers
@@ -139,7 +138,7 @@ function newPixel (width, height, editorMode, fileContent = null) {
if (i == (fileContent['nLayers'] - 1)) {
createPaletteFromLayers();
}
};
};
img.src = layerImage;