mirror of
https://github.com/lospec/pixel-editor.git
synced 2023-08-10 21:12:51 +03:00
Merge branch 'master' into minor-changes
This commit is contained in:
unsettledgames
commit
232e08f84d
@ -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;
|
||||
@ -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"}
|
||||
],
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -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;
|
||||
}
|
||||
|
||||
@ -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';
|
||||
@ -21,19 +23,30 @@ function switchMode(currentMode, mustConfirm = true) {
|
||||
|
||||
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';
|
||||
|
||||
@ -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);
|
||||
};
|
||||
|
||||
|
||||
14
js/_layer.js
14
js/_layer.js
@ -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;
|
||||
@ -513,7 +513,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);
|
||||
}
|
||||
}
|
||||
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
|
||||
@ -613,3 +615,5 @@ function addLayer(id, saveHistory = true) {
|
||||
|
||||
return newLayer;
|
||||
}
|
||||
|
||||
layerList = document.getElementById("layers-menu");
|
||||
@ -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);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user