mirror
/
pixel-editor
mirror of https://github.com/lospec/pixel-editor.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

push5

This commit is contained in:
pxlvxl 2022-02-27 09:14:42 -05:00
parent e4228f19c6
commit fedca8f95e
4 changed files with 40 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
js/FileManager.js
View File

@ -159,6 +159,13 @@ const FileManager = (() => {
{"canvas":{},"context":{"mozImageSmoothingEnabled":false},"isSelected":true,"isVisible":true,"isLocked":false,"oldLayerName":null,"menuEntry":{},"id":"layer0","name":"Layer 0","src":emptyCanvasSrc(w,h)}
]
};
function emptyCanvasSrc(w,h) {
const canvas = document.createElement('canvas');
canvas.width = w;
canvas.height = h;
return canvas.toDataURL();
}
}
function localStorageLoad() {
////console.log("loading from localStorage");
@ -279,7 +286,6 @@ const FileManager = (() => {
let dictionary = {};
// sorting layers by increasing z-index
let layersCopy = currFile.layers.filter(n=>!!n.menuEntry).slice();
// layersCopy.sort((a, b) => (a.canvas.style.zIndex > b.canvas.style.zIndex) ? 1 : -1);
dictionary['canvasWidth'] = currFile.canvasSize[0];
dictionary['canvasHeight'] = currFile.canvasSize[1];
dictionary['editorMode'] = EditorState.getCurrentMode();
@ -376,13 +382,6 @@ const FileManager = (() => {
}
return dictionary;
}
function emptyCanvasSrc(w,h) {
const canvas = document.createElement('canvas');
canvas.width = w;
canvas.height = h;
const ctx = canvas.getContext('2d');
return canvas.toDataURL();
}
function toggleCache(elm){
console.log('elm === ',elm);
FileManager.cacheEnabled = !FileManager.cacheEnabled;

48
js/LayerList.js
View File

@ -5,7 +5,7 @@ const LayerList = (() => {
let renamingLayer = false;
let dragStartLayer;
Events.on("mousedown", layerList, openOptionsMenu);
Events.on('click',"add-layer-button", addLayer, false);
Events.on('click',"add-layer-button", addLayerClick, false);
Events.onCustom("switchedToAdvanced", showLayerList);
Events.onCustom("switchedToBasic", hideLayerList);
@ -28,15 +28,16 @@ const LayerList = (() => {
layerList.style.display = "none";
document.getElementById('layer-button').style.display = 'none';
}
function addLayerClick(id, saveHistory = true, layerName) {
addLayer(...arguments);
currFile.layers[currFile.layers.length-1].selectLayer();
}
function addLayer(id, saveHistory = true, layerName) {
let index = currFile.layers.length;
// Creating a new canvas
let newCanvas = document.createElement("canvas");
// Setting up the new canvas
currFile.canvasView.append(newCanvas);
Layer.maxZIndex+=2;
newCanvas.style.zIndex = Layer.maxZIndex;
newCanvas.classList.add("drawingCanvas");
if (!layerListEntry) return //console.warn('skipping adding layer because no document');
@ -73,6 +74,11 @@ const LayerList = (() => {
new HistoryState().AddLayer(newLayer, index);
if(FileManager.cacheEnabled)FileManager.localStorageSave();
}
currFile.layers.forEach((layer, i) => {
const _i = currFile.layers.length - i;
layer.canvas.style.zIndex = (_i+1) * 10;
})
return newLayer;
}
@ -115,27 +121,7 @@ const LayerList = (() => {
* @param {*} event
*/
function layerDragEnd(event) {
// let oldIndex = event.oldDraggableIndex;
// let newIndex = event.newDraggableIndex;
// let movedZIndex = dragStartLayer.canvas.style.zIndex;
// if (oldIndex > newIndex)
// {
// for (let i=newIndex; i<oldIndex; i++) {
// getLayerByID(layerList.children[i].id).canvas.style.zIndex = getLayerByID(layerList.children[i + 1].id).canvas.style.zIndex;
// }
// }
// else
// {
// for (let i=newIndex; i>oldIndex; i--) {
// getLayerByID(layerList.children[i].id).canvas.style.zIndex = getLayerByID(layerList.children[i - 1].id).canvas.style.zIndex;
// }
// }
// getLayerByID(layerList.children[oldIndex].id).canvas.style.zIndex = movedZIndex;
Events.simulateMouseEvent(window, "mouseup");
const tempLayerCache = currFile.layers.reduce((r,n,i) => {
r[n.id] = n;
@ -155,6 +141,10 @@ const LayerList = (() => {
currFile.layers[i].isSelected = i===selectedIdx;
});
currFile.layers.forEach((layer, i) => {
const _i = currFile.layers.length - i;
layer.canvas.style.zIndex = (_i+1) * 10;
});
if(FileManager.cacheEnabled)FileManager.localStorageSave();
}
@ -225,10 +215,11 @@ const LayerList = (() => {
let menuEntries = layerList.children;
// Increasing z-indexes of the layers above
for (let i=getMenuEntryIndex(menuEntries, toDuplicate.menuEntry) - 1; i>=0; i--) {
LayerList.getLayerByID(menuEntries[i].id).canvas.style.zIndex++;
const menuItemSize = getMenuEntryIndex(menuEntries, toDuplicate.menuEntry);
for (let i = 0; i < menuItemSize; i += 1) {
LayerList.getLayerByID(menuEntries[i].id).canvas.style.zIndex = 2 * (menuItemSize - i);
}
Layer.maxZIndex+=2;
// Creating a new canvas
let newCanvas = document.createElement("canvas");
@ -268,8 +259,7 @@ const LayerList = (() => {
}
}
function clearLayers() {
//console.log('currFile.layers === ',currFile.layers);
currFile.layers.forEach(()=>deleteLayer());
//console.log('currFile.layers.length === ',currFile.layers.length);
for(let i = 0; i < currFile.layers.length;i++){

23
js/Startup.js
View File

@ -27,16 +27,18 @@ const Startup = (() => {
/** Creates a new, empty file
*
* @param {*} fileContent If fileContent != null, then the newPixel is being called from the open menu
* @param {*} lpe If lpe != null, then the newPixel is being called from the open menu
* @param {*} skipModeConfirm If skipModeConfirm == true, then the mode switching confirmation will be skipped
*/
function newPixel (fileContent = null, skipModeConfirm = false) {
function newPixel (lpe = null, skipModeConfirm = false) {
console.log('called newPixel');
console.trace();
// The palette is empty, at the beginning
ColorModule.resetPalette();
initLayers(fileContent);
if (lpe && !lpe.colors) {
lpe.colors = ["#000000"];
}
initLayers(lpe);
initPalette();
// Closing the "New Pixel dialogue"
@ -47,9 +49,8 @@ const Startup = (() => {
// The user is now able to export the Pixel
document.getElementById('export-button').classList.remove('disabled');
// Now, if I opened an LPE file
if (fileContent != null) {
FileManager.loadFromLPE(fileContent);
if (lpe != null) {
FileManager.loadFromLPE(lpe);
}
////console.log('ColorModule.getCurrentPalette() === ',ColorModule.getCurrentPalette());
@ -61,10 +62,12 @@ const Startup = (() => {
////console.trace();
}
function clearLayers() {
for(let i = 0; i < currFile.layers.length;i++) {
console.dir(currFile.layers);
for(let i = currFile.layers.length-1; i >= 0;i--) {
currFile.layers[i].delete(i);
}
for(let i = 0; i < currFile.sublayers.length;i++) {
console.dir(currFile.layers);
for(let i = currFile.sublayers.length-1; i >= 0;i--) {
currFile.sublayers[i].delete(i);
}
}
@ -89,10 +92,12 @@ const Startup = (() => {
lpe.layers.forEach((layerData, i) => {
//console.log('lpe.layers[i] === ', i);
const _i = lpe.layers.length - i;
let layerImage = layerData.src;
if (layerData != null) {
// Setting id
let createdLayer = LayerList.addLayer(layerData.id, false, layerData.name);
createdLayer.canvas.style.zIndex = (_i+1) * 10;
if(i===selectedIdx)createdLayer.selectLayer();
// Setting name
createdLayer.menuEntry.getElementsByTagName("p")[0].innerHTML = layerData.name;

1
js/layers/Layer.js
View File

@ -8,7 +8,6 @@
*/
class Layer {
static layerCount = 1;
static maxZIndex = 3;
static unusedIDs = [];
static currentID = 1;