2020-03-04 21:46:19 +03:00
|
|
|
/** TODO LIST FOR LAYERS
|
2020-06-18 00:09:11 +03:00
|
|
|
|
|
|
|
GENERAL REQUIREMENTS:
|
2020-06-19 00:24:37 +03:00
|
|
|
- The user shouldn't be able to draw on a hidden or locked layer
|
2020-06-18 00:09:11 +03:00
|
|
|
- Must delete the selected layer when right clicking on a layer and selecting that option
|
|
|
|
* We should think about selecting more than one layer at once.
|
2020-06-18 17:04:45 +03:00
|
|
|
* Rename layer
|
2020-06-18 00:09:11 +03:00
|
|
|
* Merge with bottom layer option
|
|
|
|
* Flatten visible option
|
|
|
|
* Flatten everything option
|
|
|
|
- When saving an artwork, the layers must be flattened to a temporary layer, which is then exported and deleted
|
|
|
|
- Saving the state of an artwork to a .lospec file so that people can work on it later keeping
|
|
|
|
the layers they created? That'd be cool, even for the app users, that could just double click on a lospec
|
|
|
|
file for it to be opened right in the pixel editor
|
|
|
|
|
2020-06-20 00:31:36 +03:00
|
|
|
HISTORY:
|
|
|
|
- Store states for every canvas
|
|
|
|
- Save add layer
|
|
|
|
- Save deleted layer
|
|
|
|
- Save merge layers
|
|
|
|
- Save flatten layers
|
|
|
|
- Save move layers
|
|
|
|
|
|
|
|
|
2020-06-18 00:09:11 +03:00
|
|
|
OPTIONAL:
|
|
|
|
|
|
|
|
1 - Fix issues
|
|
|
|
2 - Add a Replace feature so that people can replace a colour without editing the one in the palette
|
|
|
|
(right click->replace colour in layers? in that case we'd have to implement multiple layers selection)
|
|
|
|
|
2020-06-19 16:16:22 +03:00
|
|
|
KNOWN BUGS:
|
|
|
|
|
|
|
|
1 - Must delete existing layers when creating a new pixel
|
|
|
|
|
2020-06-19 00:24:37 +03:00
|
|
|
THINGS TO TEST:
|
|
|
|
|
|
|
|
1 - Undo / redo
|
|
|
|
4 - File export
|
2020-03-04 21:46:19 +03:00
|
|
|
*/
|
|
|
|
|
2020-06-18 17:04:45 +03:00
|
|
|
/*
|
|
|
|
MORE TODO LIST:
|
|
|
|
|
|
|
|
- Resize canvas (must make a simple editor to preview the changes)
|
|
|
|
- Resize sprite
|
|
|
|
*/
|
|
|
|
|
2020-06-19 17:20:51 +03:00
|
|
|
// Instead of saving the whole entry, just save their IDs and swap the elements at the end of the drop
|
|
|
|
// TODO: add id management. IDs are assigned incrementally, when a layer is deleted its id should be
|
|
|
|
// claimable by the new layers: add a queue to push the ids of the deleted layers to
|
|
|
|
|
2020-06-18 17:04:45 +03:00
|
|
|
|
2020-06-19 00:24:37 +03:00
|
|
|
let layerList;
|
|
|
|
let layerListEntry;
|
2020-06-19 17:20:51 +03:00
|
|
|
|
|
|
|
let layerDragSource = null;
|
|
|
|
|
2020-06-18 17:04:45 +03:00
|
|
|
let layerCount = 1;
|
|
|
|
let maxZIndex = 3;
|
|
|
|
|
2020-06-20 00:31:36 +03:00
|
|
|
let unusedIDs = [];
|
|
|
|
let currentID = layerCount;
|
|
|
|
|
2020-06-18 17:04:45 +03:00
|
|
|
on('click',"add-layer-button", function(){
|
|
|
|
// Creating a new canvas
|
|
|
|
let newCanvas = document.createElement("canvas");
|
|
|
|
// Setting up the new canvas
|
|
|
|
canvasView.append(newCanvas);
|
|
|
|
maxZIndex++;
|
|
|
|
newCanvas.style.zIndex = maxZIndex;
|
|
|
|
newCanvas.classList.add("drawingCanvas");
|
|
|
|
|
|
|
|
console.log("Tela creata: " + newCanvas);
|
|
|
|
|
|
|
|
// Clone the default layer
|
|
|
|
let toAppend = layerListEntry.cloneNode(true);
|
|
|
|
// Setting the default name for the layer
|
|
|
|
toAppend.getElementsByTagName('p')[0].innerHTML = "Layer " + layerCount;
|
|
|
|
// Removing the selected class
|
|
|
|
toAppend.classList.remove("selected-layer");
|
|
|
|
// Adding the layer to the list
|
|
|
|
layerCount++;
|
|
|
|
|
|
|
|
// Creating a layer object
|
|
|
|
let newLayer = new Layer(currentLayer.canvasSize[0], currentLayer.canvasSize[1], newCanvas, toAppend);
|
2020-06-19 00:24:37 +03:00
|
|
|
newLayer.context.fillStyle = currentLayer.context.fillStyle;
|
2020-06-18 17:04:45 +03:00
|
|
|
newLayer.copyData(currentLayer);
|
2020-06-19 00:24:37 +03:00
|
|
|
layers.splice(layers.length - 3, 0, newLayer);
|
2020-06-18 17:04:45 +03:00
|
|
|
|
|
|
|
// Insert it before the Add layer button
|
2020-06-19 00:24:37 +03:00
|
|
|
layerList.insertBefore(toAppend, layerList.childNodes[0]);
|
2020-06-18 17:04:45 +03:00
|
|
|
}, false);
|
2020-03-04 21:46:19 +03:00
|
|
|
|
2020-03-04 17:46:25 +03:00
|
|
|
/** Handler class for a single canvas (a single layer)
|
|
|
|
*
|
|
|
|
* @param width Canvas width
|
|
|
|
* @param height Canvas height
|
|
|
|
* @param canvas HTML canvas element
|
|
|
|
*/
|
2020-06-19 00:24:37 +03:00
|
|
|
class Layer {
|
|
|
|
constructor(width, height, canvas, menuEntry) {
|
|
|
|
this.canvasSize = [width, height];
|
|
|
|
this.canvas = canvas;
|
|
|
|
this.context = this.canvas.getContext('2d');
|
|
|
|
this.isSelected = false;
|
|
|
|
this.isVisible = true;
|
|
|
|
this.isLocked = false;
|
|
|
|
this.menuEntry = menuEntry;
|
|
|
|
|
2020-06-20 00:31:36 +03:00
|
|
|
let id = unusedIDs.pop();
|
|
|
|
|
|
|
|
if (id == null) {
|
|
|
|
id = currentID;
|
|
|
|
currentID++;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.id = id;
|
|
|
|
|
|
|
|
if (menuEntry != null) {
|
|
|
|
menuEntry.id = "layer" + id;
|
2020-06-19 00:24:37 +03:00
|
|
|
menuEntry.onclick = () => this.select();
|
|
|
|
menuEntry.getElementsByTagName("button")[0].onclick = () => this.toggleLock();
|
|
|
|
menuEntry.getElementsByTagName("button")[1].onclick = () => this.toggleVisibility();
|
2020-06-19 17:20:51 +03:00
|
|
|
|
|
|
|
menuEntry.addEventListener("dragstart", this.layerDragStart, false);
|
|
|
|
menuEntry.addEventListener("drop", this.layerDragDrop, false);
|
|
|
|
menuEntry.addEventListener("dragover", this.layerDragOver, false);
|
|
|
|
menuEntry.addEventListener("dragleave", this.layerDragLeave, false);
|
|
|
|
menuEntry.addEventListener("dragend", this.layerDragEnd, false);
|
2020-06-20 23:49:02 +03:00
|
|
|
|
|
|
|
menuEntry.getElementsByTagName("canvas")[0].getContext('2d').imageSmoothingEnabled = false;
|
2020-06-19 00:24:37 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
this.initialize();
|
|
|
|
}
|
|
|
|
|
2020-03-04 17:46:25 +03:00
|
|
|
// Initializes the canvas
|
2020-06-19 00:24:37 +03:00
|
|
|
initialize() {
|
2020-03-04 17:46:25 +03:00
|
|
|
var maxHorizontalZoom = Math.floor(window.innerWidth/this.canvasSize[0]*0.75);
|
|
|
|
var maxVerticalZoom = Math.floor(window.innerHeight/this.canvasSize[1]*0.75);
|
|
|
|
|
|
|
|
zoom = Math.min(maxHorizontalZoom,maxVerticalZoom);
|
|
|
|
if (zoom < 1) zoom = 1;
|
|
|
|
|
|
|
|
//resize canvas
|
|
|
|
this.canvas.width = this.canvasSize[0];
|
|
|
|
this.canvas.height = this.canvasSize[1];
|
|
|
|
this.canvas.style.width = (this.canvas.width*zoom)+'px';
|
|
|
|
this.canvas.style.height = (this.canvas.height*zoom)+'px';
|
|
|
|
|
|
|
|
//unhide canvas
|
|
|
|
this.canvas.style.display = 'block';
|
|
|
|
|
|
|
|
//center canvas in window
|
|
|
|
this.canvas.style.left = 64+canvasView.clientWidth/2-(this.canvasSize[0]*zoom/2)+'px';
|
|
|
|
this.canvas.style.top = 48+canvasView.clientHeight/2-(this.canvasSize[1]*zoom/2)+'px';
|
2020-04-04 10:41:56 +03:00
|
|
|
|
2020-03-07 18:49:01 +03:00
|
|
|
this.context.imageSmoothingEnabled = false;
|
2020-03-15 18:32:48 +03:00
|
|
|
this.context.mozImageSmoothingEnabled = false;
|
2020-06-19 00:24:37 +03:00
|
|
|
}
|
2020-06-19 17:20:51 +03:00
|
|
|
|
|
|
|
layerDragStart(element) {
|
|
|
|
layerDragSource = this;
|
|
|
|
element.dataTransfer.effectAllowed = 'move';
|
2020-06-20 00:31:36 +03:00
|
|
|
element.dataTransfer.setData('text/html', this.id);
|
2020-06-19 17:20:51 +03:00
|
|
|
|
|
|
|
this.classList.add('dragElem');
|
|
|
|
}
|
|
|
|
|
|
|
|
layerDragOver(element) {
|
|
|
|
if (element.preventDefault) {
|
|
|
|
element.preventDefault(); // Necessary. Allows us to drop.
|
|
|
|
}
|
|
|
|
this.classList.add('layerdragover');
|
|
|
|
|
|
|
|
element.dataTransfer.dropEffect = 'move';
|
|
|
|
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
layerDragLeave(element) {
|
|
|
|
this.classList.remove('layerdragover');
|
|
|
|
}
|
|
|
|
|
|
|
|
layerDragDrop(element) {
|
|
|
|
if (element.stopPropagation) {
|
|
|
|
element.stopPropagation(); // Stops some browsers from redirecting.
|
|
|
|
}
|
|
|
|
|
|
|
|
// Don't do anything if dropping the same column we're dragging.
|
|
|
|
if (layerDragSource != this) {
|
2020-06-20 00:31:36 +03:00
|
|
|
let toDropID = element.dataTransfer.getData('text/html');
|
|
|
|
let thisID = this.id;
|
2020-06-21 00:50:57 +03:00
|
|
|
|
2020-06-20 00:31:36 +03:00
|
|
|
swapLayerEntries(toDropID, thisID);
|
2020-06-19 17:20:51 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
this.classList.remove('layerdragover');
|
2020-06-20 00:31:36 +03:00
|
|
|
dragging = false;
|
2020-06-19 17:20:51 +03:00
|
|
|
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
layerDragEnd(element) {
|
|
|
|
this.classList.remove('layerdragover');
|
|
|
|
}
|
|
|
|
|
2020-03-04 17:46:25 +03:00
|
|
|
// Resizes canvas
|
2020-06-19 00:24:37 +03:00
|
|
|
resize() {
|
2020-03-04 17:46:25 +03:00
|
|
|
let newWidth = (this.canvas.width * zoom) + 'px';
|
|
|
|
let newHeight = (this.canvas.height *zoom)+ 'px';
|
|
|
|
|
|
|
|
this.canvas.style.width = newWidth;
|
|
|
|
this.canvas.style.height = newHeight;
|
2020-06-19 00:24:37 +03:00
|
|
|
}
|
2020-03-04 17:46:25 +03:00
|
|
|
// Copies the otherCanvas' position and size
|
2020-06-19 00:24:37 +03:00
|
|
|
copyData(otherCanvas) {
|
2020-03-04 17:46:25 +03:00
|
|
|
this.canvas.style.width = otherCanvas.canvas.style.width;
|
|
|
|
this.canvas.style.height = otherCanvas.canvas.style.height;
|
|
|
|
|
|
|
|
this.canvas.style.left = otherCanvas.canvas.style.left;
|
|
|
|
this.canvas.style.top = otherCanvas.canvas.style.top;
|
2020-06-19 00:24:37 +03:00
|
|
|
}
|
2020-06-18 17:04:45 +03:00
|
|
|
|
2020-06-19 00:24:37 +03:00
|
|
|
select() {
|
2020-06-18 17:04:45 +03:00
|
|
|
// Deselecting the old layer
|
|
|
|
currentLayer.deselect();
|
|
|
|
|
|
|
|
// Selecting the current layer
|
|
|
|
this.isSelected = true;
|
2020-06-19 00:24:37 +03:00
|
|
|
this.menuEntry.classList.add("selected-layer");
|
|
|
|
currentLayer = getLayerByName(this.menuEntry.getElementsByTagName("p")[0].innerHTML);
|
|
|
|
}
|
|
|
|
|
|
|
|
toggleLock() {
|
|
|
|
if (this.isLocked) {
|
|
|
|
this.unlock();
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
this.lock();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
toggleVisibility() {
|
|
|
|
if (this.isVisible) {
|
|
|
|
this.hide();
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
this.show();
|
|
|
|
}
|
2020-06-18 17:04:45 +03:00
|
|
|
}
|
|
|
|
|
2020-06-19 00:24:37 +03:00
|
|
|
deselect() {
|
2020-06-18 17:04:45 +03:00
|
|
|
this.isSelected = false;
|
2020-06-19 00:24:37 +03:00
|
|
|
this.menuEntry.classList.remove("selected-layer");
|
2020-06-18 17:04:45 +03:00
|
|
|
}
|
|
|
|
|
2020-06-19 00:24:37 +03:00
|
|
|
lock() {
|
2020-06-18 17:04:45 +03:00
|
|
|
this.isLocked = true;
|
2020-06-19 16:25:25 +03:00
|
|
|
this.menuEntry.getElementsByClassName("layer-button")[0].style.visibility = "visible";
|
2020-06-19 13:57:07 +03:00
|
|
|
|
|
|
|
this.menuEntry.getElementsByClassName("default-icon")[0].style.display = "none";
|
|
|
|
this.menuEntry.getElementsByClassName("edited-icon")[0].style.display = "inline-block";
|
2020-06-18 17:04:45 +03:00
|
|
|
}
|
|
|
|
|
2020-06-19 00:24:37 +03:00
|
|
|
unlock() {
|
2020-06-18 17:04:45 +03:00
|
|
|
this.isLocked = false;
|
2020-06-19 16:25:25 +03:00
|
|
|
this.menuEntry.getElementsByClassName("layer-button")[0].style.visibility = "hidden";
|
2020-06-19 13:57:07 +03:00
|
|
|
|
|
|
|
this.menuEntry.getElementsByClassName("default-icon")[0].style.display = "inline-block";
|
|
|
|
this.menuEntry.getElementsByClassName("edited-icon")[0].style.display = "none";
|
2020-06-18 17:04:45 +03:00
|
|
|
}
|
|
|
|
|
2020-06-19 00:24:37 +03:00
|
|
|
show() {
|
2020-06-18 17:04:45 +03:00
|
|
|
this.isVisible = true;
|
2020-06-19 00:24:37 +03:00
|
|
|
this.canvas.style.visibility = "visible";
|
2020-06-19 16:25:25 +03:00
|
|
|
this.menuEntry.getElementsByClassName("layer-button")[1].style.visibility = "hidden";
|
2020-06-19 00:24:37 +03:00
|
|
|
|
|
|
|
// Changing icon
|
|
|
|
this.menuEntry.getElementsByClassName("default-icon")[1].style.display = "inline-block";
|
|
|
|
this.menuEntry.getElementsByClassName("edited-icon")[1].style.display = "none";
|
2020-06-18 17:04:45 +03:00
|
|
|
}
|
|
|
|
|
2020-06-19 00:24:37 +03:00
|
|
|
hide() {
|
2020-06-18 17:04:45 +03:00
|
|
|
this.isVisible = false;
|
2020-06-19 00:24:37 +03:00
|
|
|
this.canvas.style.visibility = "hidden";
|
2020-06-19 16:25:25 +03:00
|
|
|
this.menuEntry.getElementsByClassName("layer-button")[1].style.visibility = "visible";
|
2020-06-19 00:24:37 +03:00
|
|
|
|
|
|
|
// Changing icon
|
|
|
|
this.menuEntry.getElementsByClassName("default-icon")[1].style.display = "none";
|
|
|
|
this.menuEntry.getElementsByClassName("edited-icon")[1].style.display = "inline-block";
|
2020-06-18 17:04:45 +03:00
|
|
|
}
|
2020-06-19 16:16:22 +03:00
|
|
|
|
|
|
|
updateLayerPreview() {
|
|
|
|
// Getting the canvas
|
|
|
|
let destination = this.menuEntry.getElementsByTagName("canvas")[0];
|
|
|
|
let widthRatio = this.canvasSize[0] / this.canvasSize[1];
|
|
|
|
let heightRatio = this.canvasSize[1] / this.canvasSize[0];
|
|
|
|
|
|
|
|
// Computing width and height for the preview image
|
|
|
|
let previewWidth = destination.width;
|
|
|
|
let previewHeight = destination.height;
|
|
|
|
|
|
|
|
// If the sprite is rectangular, I apply the ratio to the preview as well
|
|
|
|
if (widthRatio < 1) {
|
|
|
|
previewWidth = destination.width * widthRatio;
|
|
|
|
}
|
|
|
|
else if (widthRatio > 1) {
|
|
|
|
previewHeight = destination.height * heightRatio;
|
|
|
|
}
|
|
|
|
|
|
|
|
// La appiccico sulla preview
|
|
|
|
destination.getContext('2d').clearRect(0, 0, destination.width, destination.height);
|
|
|
|
destination.getContext('2d').drawImage(this.canvas,
|
|
|
|
// This is necessary to center the preview in the canvas
|
|
|
|
(destination.width - previewWidth) / 2, (destination.height - previewHeight) / 2,
|
|
|
|
previewWidth, previewHeight);
|
|
|
|
}
|
2020-04-04 10:41:56 +03:00
|
|
|
}
|
2020-06-18 17:04:45 +03:00
|
|
|
|
2020-06-20 00:31:36 +03:00
|
|
|
// Swap two layer entries in the layer menu
|
|
|
|
function swapLayerEntries(id1, id2) {
|
|
|
|
let entry1 = document.getElementById(id1);
|
|
|
|
let entry2 = document.getElementById(id2);
|
|
|
|
|
2020-06-21 00:50:57 +03:00
|
|
|
console.log("entry 1: " + id1);
|
|
|
|
console.log("entry 2: " + id2);
|
2020-06-20 00:31:36 +03:00
|
|
|
|
|
|
|
let layer1 = getLayerByID(id1);
|
|
|
|
let layer2 = getLayerByID(id2);
|
|
|
|
let tmpZIndex;
|
|
|
|
|
|
|
|
let after2 = entry2.nextSibling;
|
|
|
|
let parent = entry1.parentNode;
|
|
|
|
|
2020-06-21 00:50:57 +03:00
|
|
|
console.log("prima: " + layer1.canvas.style.zIndex);
|
|
|
|
console.log("prima: " + layer2.canvas.style.zIndex);
|
|
|
|
|
|
|
|
tmpZIndex = layer1.canvas.style.zIndex;
|
|
|
|
layer1.canvas.style.zIndex = layer2.canvas.style.zIndex;
|
|
|
|
layer2.canvas.style.zIndex = tmpZIndex;
|
|
|
|
|
|
|
|
console.log("fatto");
|
|
|
|
|
2020-06-20 00:31:36 +03:00
|
|
|
parent.insertBefore(entry2, entry1);
|
|
|
|
|
|
|
|
if (after2) {
|
2020-06-21 00:50:57 +03:00
|
|
|
if (after2 == entry1) {
|
|
|
|
parent.prepend(entry1);
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
parent.insertBefore(entry1, after2);
|
|
|
|
}
|
2020-06-20 00:31:36 +03:00
|
|
|
} else {
|
|
|
|
parent.appendChild(entry1);
|
|
|
|
}
|
|
|
|
|
2020-06-21 00:50:57 +03:00
|
|
|
console.log("dopo: " + layer1.canvas.style.zIndex);
|
|
|
|
console.log("dopo: " + layer2.canvas.style.zIndex);
|
2020-06-20 00:31:36 +03:00
|
|
|
}
|
|
|
|
|
2020-06-18 17:04:45 +03:00
|
|
|
// Finds a layer given its name
|
|
|
|
function getLayerByName(name) {
|
|
|
|
for (let i=0; i<layers.length; i++) {
|
2020-06-19 00:24:37 +03:00
|
|
|
if (layers[i].menuEntry != null) {
|
|
|
|
if (layers[i].menuEntry.getElementsByTagName("p")[0].innerHTML == name) {
|
|
|
|
return layers[i];
|
|
|
|
}
|
2020-06-18 17:04:45 +03:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-06-20 00:31:36 +03:00
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Finds a layer given its id
|
|
|
|
function getLayerByID(id) {
|
|
|
|
for (let i=0; i<layers.length; i++) {
|
|
|
|
if (layers[i].menuEntry != null) {
|
|
|
|
if (layers[i].menuEntry.id == id) {
|
|
|
|
return layers[i];
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-06-18 17:04:45 +03:00
|
|
|
return null;
|
|
|
|
}
|