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

Various changes

Browse Source 
- added `/:paletteSlug/:resolution` functionality for localhost testing
	- created `currFile.sublayers` for *things that should zoom with the canvas layers*
	- `currFile.layers` now solely contains the canvas layers
	- added `getProjectData` to `FileManager`'s exported methods
	---
	- added `FileManager.localStorageSave` (it's basically just: localStorage.setItem("lpe-cache",FileManager.getProjectData()))
	- added `FileManager.localStorageCheck` (it's basically just: `!!localStorage.getItem("lpe-cache")`)
	- added `FileManager.localStorageLoad` (it's basically just: `return localStorage.getItem("lpe-cache")`)
	- added `FileManager.localStorageReset` (for debugging purity)
	---
	- calling `FileManager.localStorageSave()` on mouse up (we should stress test this)
	---
	- changed lpe file format to `{canvasWidth:number,canvasHeight:number,selectedLayer:number,colors:[],layers:[]}`
	- added backward compatibility for the old lpe file format
	---
	- added some canvas utility functions in `canvas_util`
	- added Unsettled's color similarity utility functions in `color_util2`
	---
	- html boilerplate - wang tiles
	-
	- POC - tiny text boilerplate
	- POC - tiny text font scraper
	---
	- WIP - added two optional url route parameters `/:paletteSlug/:resolution/:prefillWidth/:prefillBinaryStr`
	- WIP POC - hbs_parser.js (outputs tree data about hbs file relationships)
This commit is contained in:
pxlvxl
2022-02-23 11:16:23 -05:00
parent 40299853ca
commit f499662afc
55 changed files with 2385 additions and 387 deletions
Download Patch File Download Diff File Expand all files Collapse all files

200
js/LayerList.js
View File

@ -1,46 +1,36 @@
const LayerList = (() => {
let layerList = document.getElementById("layers-menu");
let layerListEntry = layerList.firstElementChild;
// let layerListEntry = layerList.firstElementChild;
let layerListEntry = document.getElementById("default-layer-list-item");
let renamingLayer = false;
let dragStartLayer;
// Binding the right click menu
Events.on("mousedown", layerList, openOptionsMenu);
// Binding the add layer button to the right function
Events.on('click',"add-layer-button", addLayer, false);
// Listening to the switch mode event so I can change the layout
Events.onCustom("switchedToAdvanced", showMenu);
Events.onCustom("switchedToBasic", hideMenu);
Events.onCustom("switchedToAdvanced", showLayerList);
Events.onCustom("switchedToBasic", hideLayerList);
// Making the layers list sortable
new Sortable(layerList, {
animation: 100,
filter: ".layer-button",
draggable: ".layers-menu-entry",
onStart: layerDragStart,
onEnd: layerDragDrop
onEnd: layerDragEnd
});
function showMenu() {
function showLayerList() {
layerList.style.display = "inline-block";
document.getElementById('layer-button').style.display = 'inline-block';
}
function hideMenu() {
function hideLayerList() {
if (EditorState.documentCreated()) {
// Selecting the current layer
currFile.currentLayer.selectLayer();
// Flatten the layers
flatten(true);
}
layerList.style.display = "none";
document.getElementById('layer-button').style.display = 'none';
}
function addLayer(id, saveHistory = true, layerName) {
function addLayer(id, saveHistory = true) {
// layers.length - 3
let index = currFile.layers.length - 3;
let index = currFile.layers.length;
// Creating a new canvas
let newCanvas = document.createElement("canvas");
// Setting up the new canvas
@ -49,12 +39,16 @@ const LayerList = (() => {
newCanvas.style.zIndex = Layer.maxZIndex;
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');
// Clone the default layer
let toAppend = layerListEntry.cloneNode(true);
toAppend.style.display = "flex";
//console.log('toAppend === ',toAppend);
// Setting the default name for the layer
toAppend.getElementsByTagName('p')[0].innerHTML = "Layer " + Layer.layerCount;
const _layerName = layerName ?? "Layer " + currFile.layers.length;
//console.log('_layerName === ',_layerName);
toAppend.getElementsByTagName('p')[0].innerHTML = _layerName;
// Removing the selected class
toAppend.classList.remove("selected-layer");
// Adding the layer to the list
@ -65,10 +59,11 @@ const LayerList = (() => {
newLayer.context.fillStyle = currFile.currentLayer.context.fillStyle;
newLayer.copyData(currFile.currentLayer);
currFile.layers.splice(index, 0, newLayer);
// currFile.layers.splice(index, 0, newLayer);
currFile.layers.push(newLayer);
// Insert it before the Add layer button
layerList.insertBefore(toAppend, layerList.childNodes[0]);
layerList.insertBefore(toAppend, document.getElementById("add-layer-li"));
if (id != null && typeof(id) == "string") {
newLayer.setID(id);
@ -76,11 +71,11 @@ const LayerList = (() => {
// Basically "if I'm not adding a layer because redo() is telling meto do so", then I can save the history
if (saveHistory) {
new HistoryState().AddLayer(newLayer, index);
FileManager.localStorageSave();
}
return newLayer;
}
/** Merges topLayer onto belowLayer
*
* @param {*} belowLayer The layer on the bottom of the layer stack
@ -97,7 +92,7 @@ const LayerList = (() => {
toMergeImageData.data[i+2], toMergeImageData.data[i+3]
];
let currentUnderlyingPixel = [
let currentUnderlyingPixel = [ //TODO: I'd be curious to know if this array slows this function down
belowImageData.data[i], belowImageData.data[i+1],
belowImageData.data[i+2], belowImageData.data[i+3]
];
@ -115,34 +110,54 @@ const LayerList = (() => {
// Putting the top data into the belowdata
belowLayer.putImageData(toMergeImageData, 0, 0);
}
/** Sets the z indexes of the layers when the user drops the layer in the menu
*
* @param {*} event
*/
function layerDragDrop(event) {
let oldIndex = event.oldDraggableIndex;
let newIndex = event.newDraggableIndex;
function layerDragEnd(event) {
// let oldIndex = event.oldDraggableIndex;
// let newIndex = event.newDraggableIndex;
let movedZIndex = dragStartLayer.canvas.style.zIndex;
// 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;
}
}
// 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;
// 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;
return r;
},{});
let selectedId;
const idArr = [...document.querySelectorAll(".layers-menu-entry")].map(elm => {
if([...elm.classList].includes("selected-layer")) {
selectedId = elm.id;
}
return elm.id;
});
let selectedIdx = idArr.indexOf(selectedId);
idArr.forEach((id,i)=>{
currFile.layers[i] = tempLayerCache[id];
currFile.layers[i].isSelected = i===selectedIdx;
});
FileManager.localStorageSave();
}
/** Saves the layer that is being moved when the dragging starts
*
* @param {*} event
@ -150,21 +165,27 @@ const LayerList = (() => {
function layerDragStart(event) {
dragStartLayer = getLayerByID(layerList.children[event.oldIndex].id);
}
// Finds a layer given its id
function getLayerByID(id) {
//console.log(`getLayerByID(${id})`);
// for (let i=0; i<currFile.layers.length; i++) {
// if (currFile.layers[i].hasCanvas()) {
// if (currFile.layers[i].menuEntry.id == id) {
// return currFile.layers[i];
// }
// }
// }
let ret;
for (let i=0; i<currFile.layers.length; i++) {
if (currFile.layers[i].hasCanvas()) {
if (currFile.layers[i].menuEntry.id == id) {
return currFile.layers[i];
ret = currFile.layers[i];
}
}
}
//console.log('ret === ',ret);
return null;
return ret ?? null;
}
// Finds a layer given its name
function getLayerByName(name) {
for (let i=0; i<currFile.layers.length; i++) {
if (currFile.layers[i].hasCanvas()) {
@ -176,7 +197,6 @@ const LayerList = (() => {
return null;
}
function startRenamingLayer(event) {
let p = currFile.currentLayer.menuEntry.getElementsByTagName("p")[0];
@ -189,7 +209,6 @@ const LayerList = (() => {
renamingLayer = true;
}
function duplicateLayer(event, saveHistory = true) {
function getMenuEntryIndex(list, entry) {
for (let i=0; i<list.length; i++) {
@ -218,7 +237,7 @@ const LayerList = (() => {
newCanvas.style.zIndex = parseInt(currFile.currentLayer.canvas.style.zIndex) + 2;
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');
// Clone the default layer
let toAppend = currFile.currentLayer.menuEntry.cloneNode(true);
@ -248,41 +267,52 @@ const LayerList = (() => {
new HistoryState().DuplicateLayer(newLayer, currFile.currentLayer);
}
}
function clearLayers() {
//console.log('currFile.layers === ',currFile.layers);
function deleteLayer(saveHistory = true) {
// Cannot delete all the layers
if (currFile.layers.length != 4) {
let layerIndex = currFile.layers.indexOf(currFile.currentLayer);
let toDelete = currFile.layers[layerIndex];
let previousSibling = toDelete.menuEntry.previousElementSibling;
// Adding the ids to the unused ones
Layer.unusedIDs.push(toDelete.id);
// Selecting the next layer
if (layerIndex != (currFile.layers.length - 4)) {
currFile.layers[layerIndex + 1].selectLayer();
}
// or the previous one if the next one doesn't exist
else {
currFile.layers[layerIndex - 1].selectLayer();
}
// Deleting canvas and entry
toDelete.canvas.remove();
toDelete.menuEntry.remove();
// Removing the layer from the list
currFile.layers.splice(layerIndex, 1);
if (saveHistory) {
new HistoryState().DeleteLayer(toDelete, previousSibling, layerIndex);
}
currFile.layers.forEach(()=>deleteLayer());
//console.log('currFile.layers.length === ',currFile.layers.length);
for(let i = 0; i < currFile.layers.length;i++){
const layer = currFile.layers[i];
//console.log('i === ', i);
//console.log('layer === ',layer);
}
}
function deleteLayer(saveHistory = true) {
//console.log('deleting layer: ', currFile.currentLayer.name, currFile.currentLayer);
//console.trace();
deleteLayerDirectly(currFile.currentLayer, saveHistory);
// Closing the menu
closeOptionsMenu();
}
function deleteLayerDirectly(layer, saveHistory = true) {
let layerIndex = currFile.layers.indexOf(layer);
let toDelete = currFile.layers[layerIndex];
let previousSibling = toDelete.menuEntry.previousElementSibling;
// Adding the ids to the unused ones
Layer.unusedIDs.push(toDelete.id);
if(layer.isSelected) {
// Selecting the nearest layer
const nearestLayer = (currFile.layers[layerIndex + 1] ?? currFile.layers[layerIndex - 1]);
if(nearestLayer){
nearestLayer.selectLayer();
//console.log('changing to nearest layer');
}
}
// Deleting canvas and entry
toDelete.canvas.remove();
toDelete.menuEntry.remove();
// Removing the layer from the list
currFile.layers.splice(layerIndex, 1);
if (saveHistory) {
new HistoryState().DeleteLayer(toDelete, previousSibling, layerIndex);
}
}
function merge(saveHistory = true) {
// Saving the layer that should be merged
let toMerge = currFile.currentLayer;
@ -312,7 +342,6 @@ const LayerList = (() => {
currFile.currentLayer.updateLayerPreview();
}
}
function flatten(onlyVisible) {
if (!onlyVisible) {
// Selecting the first layer
@ -366,7 +395,6 @@ const LayerList = (() => {
currFile.currentLayer.updateLayerPreview();
}
}
function openOptionsMenu(event) {
if (event.which == 3) {
let selectedId;
@ -385,21 +413,17 @@ const LayerList = (() => {
getLayerByID(selectedId).selectLayer(false);
}
}
function closeOptionsMenu(event) {
Layer.layerOptions.style.visibility = "hidden";
currFile.currentLayer.rename();
renamingLayer = false;
}
function getLayerListEntries() {
return layerList;
}
function isRenamingLayer() {
return renamingLayer;
}
return {
addLayer,
mergeLayers,
@ -407,7 +431,9 @@ const LayerList = (() => {
getLayerByName,
renameLayer: startRenamingLayer,
duplicateLayer,
clearLayers,
deleteLayer,
deleteLayerDirectly,
merge,
flatten,
closeOptionsMenu,