push5
This commit is contained in:
parent
e4228f19c6
commit
fedca8f95e
|
@ -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)}
|
{"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() {
|
function localStorageLoad() {
|
||||||
////console.log("loading from localStorage");
|
////console.log("loading from localStorage");
|
||||||
|
@ -279,7 +286,6 @@ const FileManager = (() => {
|
||||||
let dictionary = {};
|
let dictionary = {};
|
||||||
// sorting layers by increasing z-index
|
// sorting layers by increasing z-index
|
||||||
let layersCopy = currFile.layers.filter(n=>!!n.menuEntry).slice();
|
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['canvasWidth'] = currFile.canvasSize[0];
|
||||||
dictionary['canvasHeight'] = currFile.canvasSize[1];
|
dictionary['canvasHeight'] = currFile.canvasSize[1];
|
||||||
dictionary['editorMode'] = EditorState.getCurrentMode();
|
dictionary['editorMode'] = EditorState.getCurrentMode();
|
||||||
|
@ -376,13 +382,6 @@ const FileManager = (() => {
|
||||||
}
|
}
|
||||||
return dictionary;
|
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){
|
function toggleCache(elm){
|
||||||
console.log('elm === ',elm);
|
console.log('elm === ',elm);
|
||||||
FileManager.cacheEnabled = !FileManager.cacheEnabled;
|
FileManager.cacheEnabled = !FileManager.cacheEnabled;
|
||||||
|
|
|
@ -5,7 +5,7 @@ const LayerList = (() => {
|
||||||
let renamingLayer = false;
|
let renamingLayer = false;
|
||||||
let dragStartLayer;
|
let dragStartLayer;
|
||||||
Events.on("mousedown", layerList, openOptionsMenu);
|
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("switchedToAdvanced", showLayerList);
|
||||||
Events.onCustom("switchedToBasic", hideLayerList);
|
Events.onCustom("switchedToBasic", hideLayerList);
|
||||||
|
|
||||||
|
@ -28,15 +28,16 @@ const LayerList = (() => {
|
||||||
layerList.style.display = "none";
|
layerList.style.display = "none";
|
||||||
document.getElementById('layer-button').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) {
|
function addLayer(id, saveHistory = true, layerName) {
|
||||||
|
|
||||||
let index = currFile.layers.length;
|
let index = currFile.layers.length;
|
||||||
// Creating a new canvas
|
// Creating a new canvas
|
||||||
let newCanvas = document.createElement("canvas");
|
let newCanvas = document.createElement("canvas");
|
||||||
// Setting up the new canvas
|
// Setting up the new canvas
|
||||||
currFile.canvasView.append(newCanvas);
|
currFile.canvasView.append(newCanvas);
|
||||||
Layer.maxZIndex+=2;
|
|
||||||
newCanvas.style.zIndex = Layer.maxZIndex;
|
|
||||||
newCanvas.classList.add("drawingCanvas");
|
newCanvas.classList.add("drawingCanvas");
|
||||||
|
|
||||||
if (!layerListEntry) return //console.warn('skipping adding layer because no document');
|
if (!layerListEntry) return //console.warn('skipping adding layer because no document');
|
||||||
|
@ -73,6 +74,11 @@ const LayerList = (() => {
|
||||||
new HistoryState().AddLayer(newLayer, index);
|
new HistoryState().AddLayer(newLayer, index);
|
||||||
if(FileManager.cacheEnabled)FileManager.localStorageSave();
|
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;
|
return newLayer;
|
||||||
}
|
}
|
||||||
|
@ -115,27 +121,7 @@ const LayerList = (() => {
|
||||||
* @param {*} event
|
* @param {*} event
|
||||||
*/
|
*/
|
||||||
function layerDragEnd(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");
|
Events.simulateMouseEvent(window, "mouseup");
|
||||||
|
|
||||||
|
|
||||||
const tempLayerCache = currFile.layers.reduce((r,n,i) => {
|
const tempLayerCache = currFile.layers.reduce((r,n,i) => {
|
||||||
r[n.id] = n;
|
r[n.id] = n;
|
||||||
|
@ -155,6 +141,10 @@ const LayerList = (() => {
|
||||||
currFile.layers[i].isSelected = i===selectedIdx;
|
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();
|
if(FileManager.cacheEnabled)FileManager.localStorageSave();
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -225,10 +215,11 @@ const LayerList = (() => {
|
||||||
let menuEntries = layerList.children;
|
let menuEntries = layerList.children;
|
||||||
|
|
||||||
// Increasing z-indexes of the layers above
|
// Increasing z-indexes of the layers above
|
||||||
for (let i=getMenuEntryIndex(menuEntries, toDuplicate.menuEntry) - 1; i>=0; i--) {
|
const menuItemSize = getMenuEntryIndex(menuEntries, toDuplicate.menuEntry);
|
||||||
LayerList.getLayerByID(menuEntries[i].id).canvas.style.zIndex++;
|
|
||||||
|
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
|
// Creating a new canvas
|
||||||
let newCanvas = document.createElement("canvas");
|
let newCanvas = document.createElement("canvas");
|
||||||
|
@ -268,8 +259,7 @@ const LayerList = (() => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
function clearLayers() {
|
function clearLayers() {
|
||||||
//console.log('currFile.layers === ',currFile.layers);
|
|
||||||
|
|
||||||
currFile.layers.forEach(()=>deleteLayer());
|
currFile.layers.forEach(()=>deleteLayer());
|
||||||
//console.log('currFile.layers.length === ',currFile.layers.length);
|
//console.log('currFile.layers.length === ',currFile.layers.length);
|
||||||
for(let i = 0; i < currFile.layers.length;i++){
|
for(let i = 0; i < currFile.layers.length;i++){
|
||||||
|
|
|
@ -27,16 +27,18 @@ const Startup = (() => {
|
||||||
|
|
||||||
/** Creates a new, empty file
|
/** 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
|
* @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.log('called newPixel');
|
||||||
console.trace();
|
console.trace();
|
||||||
// The palette is empty, at the beginning
|
// The palette is empty, at the beginning
|
||||||
ColorModule.resetPalette();
|
ColorModule.resetPalette();
|
||||||
|
if (lpe && !lpe.colors) {
|
||||||
initLayers(fileContent);
|
lpe.colors = ["#000000"];
|
||||||
|
}
|
||||||
|
initLayers(lpe);
|
||||||
initPalette();
|
initPalette();
|
||||||
|
|
||||||
// Closing the "New Pixel dialogue"
|
// Closing the "New Pixel dialogue"
|
||||||
|
@ -47,9 +49,8 @@ const Startup = (() => {
|
||||||
// The user is now able to export the Pixel
|
// The user is now able to export the Pixel
|
||||||
document.getElementById('export-button').classList.remove('disabled');
|
document.getElementById('export-button').classList.remove('disabled');
|
||||||
|
|
||||||
// Now, if I opened an LPE file
|
if (lpe != null) {
|
||||||
if (fileContent != null) {
|
FileManager.loadFromLPE(lpe);
|
||||||
FileManager.loadFromLPE(fileContent);
|
|
||||||
}
|
}
|
||||||
////console.log('ColorModule.getCurrentPalette() === ',ColorModule.getCurrentPalette());
|
////console.log('ColorModule.getCurrentPalette() === ',ColorModule.getCurrentPalette());
|
||||||
|
|
||||||
|
@ -61,10 +62,12 @@ const Startup = (() => {
|
||||||
////console.trace();
|
////console.trace();
|
||||||
}
|
}
|
||||||
function clearLayers() {
|
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);
|
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);
|
currFile.sublayers[i].delete(i);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -89,10 +92,12 @@ const Startup = (() => {
|
||||||
|
|
||||||
lpe.layers.forEach((layerData, i) => {
|
lpe.layers.forEach((layerData, i) => {
|
||||||
//console.log('lpe.layers[i] === ', i);
|
//console.log('lpe.layers[i] === ', i);
|
||||||
|
const _i = lpe.layers.length - i;
|
||||||
let layerImage = layerData.src;
|
let layerImage = layerData.src;
|
||||||
if (layerData != null) {
|
if (layerData != null) {
|
||||||
// Setting id
|
// Setting id
|
||||||
let createdLayer = LayerList.addLayer(layerData.id, false, layerData.name);
|
let createdLayer = LayerList.addLayer(layerData.id, false, layerData.name);
|
||||||
|
createdLayer.canvas.style.zIndex = (_i+1) * 10;
|
||||||
if(i===selectedIdx)createdLayer.selectLayer();
|
if(i===selectedIdx)createdLayer.selectLayer();
|
||||||
// Setting name
|
// Setting name
|
||||||
createdLayer.menuEntry.getElementsByTagName("p")[0].innerHTML = layerData.name;
|
createdLayer.menuEntry.getElementsByTagName("p")[0].innerHTML = layerData.name;
|
||||||
|
|
|
@ -8,7 +8,6 @@
|
||||||
*/
|
*/
|
||||||
class Layer {
|
class Layer {
|
||||||
static layerCount = 1;
|
static layerCount = 1;
|
||||||
static maxZIndex = 3;
|
|
||||||
|
|
||||||
static unusedIDs = [];
|
static unusedIDs = [];
|
||||||
static currentID = 1;
|
static currentID = 1;
|
||||||
|
|
Loading…
Reference in New Issue