From fedca8f95e5aa2c604bfe350803cd84a8d1b5aed Mon Sep 17 00:00:00 2001 From: pxlvxl Date: Sun, 27 Feb 2022 09:14:42 -0500 Subject: [PATCH] push5 --- js/FileManager.js | 15 +++++++-------- js/LayerList.js | 48 ++++++++++++++++++---------------------------- js/Startup.js | 23 +++++++++++++--------- js/layers/Layer.js | 1 - 4 files changed, 40 insertions(+), 47 deletions(-) diff --git a/js/FileManager.js b/js/FileManager.js index 39680c1..1bbba1c 100644 --- a/js/FileManager.js +++ b/js/FileManager.js @@ -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; diff --git a/js/LayerList.js b/js/LayerList.js index 777bf5a..d69d878 100644 --- a/js/LayerList.js +++ b/js/LayerList.js @@ -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; ioldIndex; 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++){ diff --git a/js/Startup.js b/js/Startup.js index 10bd8a7..de7f8ca 100644 --- a/js/Startup.js +++ b/js/Startup.js @@ -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; diff --git a/js/layers/Layer.js b/js/layers/Layer.js index ef9e636..ca7475c 100644 --- a/js/layers/Layer.js +++ b/js/layers/Layer.js @@ -8,7 +8,6 @@ */ class Layer { static layerCount = 1; - static maxZIndex = 3; static unusedIDs = []; static currentID = 1;