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
commit 232e08f84d
8 changed files with 831 additions and 964 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

184
_ext/sass/_colors.scss
View File

@ -1,184 +0,0 @@
$base-color: #332f35;
$shop: #b63831;
$red: #e3474a;
$orange: #df7c25;
$green: #70a630;
$palettes: (
base: (
background: (
default: $base-color,
hover: lighten($base-color, 5%),
lighthover: lighten($base-color, 4%),
),
foreground: (
default: lighten($base-color, 20%),
text: lighten($base-color, 50%),
bold: lighten($base-color, 60%),
weak: lighten($base-color, 30%),
link: lighten($base-color, 100%),
h1: lighten($base-color, 100%),
h2: lighten($base-color, 70%),
h3: lighten($base-color, 60%),
surveyQuestion: lighten($base-color, 60%),
hover: lighten($base-color, 40%),
separator: lighten($base-color, 5%),
disabled: lighten($base-color, 10%),
)
),
user-menu: (
background: (
default: darken($base-color, 3%),
hover: darken($base-color, 1.5%),
highlight: lighten($base-color, 3%),
highlight-hover: lighten($base-color, 5%),
),
foreground: (
default: lighten($base-color, 50%),
symbol: lighten($base-color, 8%),
text: lighten($base-color, 50%),
hover: lighten($base-color, 100%),
)
),
menu: (
background: (
default: lighten($base-color, 5%),
hover: lighten($base-color, 15%),
),
foreground: (
default: lighten($base-color, 50%),
hover: lighten($base-color, 100%),
)
),
button: (
background: (
default: lighten($base-color, 10%),
hover: lighten($base-color, 15%),
weak: lighten($base-color, 5%),
),
foreground: (
default: lighten($base-color, 50%),
dropdown: lighten($base-color, 50%),
text: lighten($base-color, 60%),
symbol: lighten($base-color, 50%),
indent: lighten($base-color, 5%),
weak: lighten($base-color, 25%),
hover: lighten($base-color, 75%),
)
),
selectedTool: (
background: (
default: lighten($base-color, 10%),
),
foreground: (
default: lighten($base-color, 50%),
)
),
subbutton: (
background: (
hover: lighten($base-color, 15%),
),
foreground: (
default: lighten($base-color, 30%),
hover: lighten($base-color, 50%),
)
),
indent: (
background: (
default: darken($base-color, 4%),
separator: darken($base-color, 8%),
hover: lighten($base-color, 5%),
outline: lighten($base-color, 10%),
),
foreground: (
default: #fff,
text: lighten($base-color, 40%),
symbol: lighten($base-color, 5%),
symbol-hover: lighten($base-color, 20%),
weak: lighten($base-color, 20%),
form: lighten($base-color, 50%),
)
),
indent-dark: (
background: (
default: darken($base-color, 6%),
separator: darken($base-color, 11%),
button: lighten($base-color, 2.5%),
button-hover: lighten($base-color, 5%),
),
foreground: (
default: lighten($base-color, 30%),
link: lighten($base-color, 40%),
hover: lighten($base-color, 50%),
button: lighten($base-color, 50%),
button-hover: lighten($base-color, 70%),
)
),
indent-darker: (
background: (
default: darken($base-color, 8%),
),
foreground: (
default: lighten($base-color, 15%),
)
),
footer: (
background: (
default: darken($base-color, 9%),
hover: darken($base-color, 2%),
),
foreground: (
default: lighten($base-color, 20%),
hover: lighten($base-color, 35%),
symbol: lighten($base-color, 7.5%),
),
),
warning-banner: (
background: (
default: lighten($base-color, 10%),
button: lighten($base-color, 20%),
button-hover: lighten($base-color, 25%),
),
foreground: (
default: lighten($base-color, 50%),
button: lighten($base-color, 40%),
button-hover: lighten($base-color, 45%),
),
),
image-label: (
background: (
default: lighten($base-color, 15%),
),
foreground: (
default: lighten($base-color, 80%),
),
triangle: (
default: lighten($base-color, 6%),
),
),
shop: (
background: (
default: $shop,
hover: lighten($shop, 5%),
),
foreground: (
default: lighten($shop, 65%),
),
),
);
@function color($element: 'base', $location: 'background', $hover: 'default') {
@return map-get(map-get(map-get($palettes, $element), $location), $hover);
}
$twitter: #00b6f1;
$patreon: #F96854;
$facebook: #3b5998;
$reddit: #ff5700;
$youtube: #b31217;
$pintrest: #cb2027;
$tumblr: #2c4762;
$deviantart: #4a5d4e;
$instagram: #c2368a;
$pixeljoint: #73d731;

4
changelog.json
View File

@ -1,4 +1,8 @@
{
"1.3.0 - 9/8/20": [
{"change": "Added layers", "author": "Unsettled"}
],
"1.2.0 - 4/14/20": [
{"change": "Added rectangle / selection tools", "author": "Unsettled"}
],

1508
css/pixel-editor.scss
View File

File diff suppressed because it is too large Load Diff

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;