Added layer menu in the top bar

Since I've procrastinated a lot and I've finished the things to implement before it, next is history management.
This commit is contained in:
unsettledgames 2020-06-23 18:10:10 +02:00
parent 6ad27323e5
commit 9032bf4fe9
4 changed files with 71 additions and 31 deletions

View File

@ -3,6 +3,34 @@ var redoStates = [];
const undoLogStyle = 'background: #87ff1c; color: black; padding: 5px;'; const undoLogStyle = 'background: #87ff1c; color: black; padding: 5px;';
function HistoryStateMergeLayer() {
}
function HistoryStateFlattenVisible() {
}
function HistoryStateFlattenAll() {
}
function HistoryStateRenameLayer() {
}
function HistoryStateDeleteLayer() {
}
function HistoryStateMoveLayer() {
}
function HistoryStateAddLayer() {
}
//prototype for undoing canvas changes //prototype for undoing canvas changes
function HistoryStateEditCanvas () { function HistoryStateEditCanvas () {
this.canvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]); this.canvas = currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1]);

View File

@ -56,35 +56,7 @@ let layerOptions = document.getElementById("layer-properties-menu");
let isRenamingLayer = false; let isRenamingLayer = false;
on('click',"add-layer-button", function(){ on('click',"add-layer-button", addLayer, false);
// 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);
newLayer.context.fillStyle = currentLayer.context.fillStyle;
newLayer.copyData(currentLayer);
layers.splice(layers.length - 3, 0, newLayer);
// Insert it before the Add layer button
layerList.insertBefore(toAppend, layerList.childNodes[0]);
}, false);
/** Handler class for a single canvas (a single layer) /** Handler class for a single canvas (a single layer)
* *
@ -565,3 +537,33 @@ function getLayerByID(id) {
return null; return null;
} }
function addLayer() {
// 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);
newLayer.context.fillStyle = currentLayer.context.fillStyle;
newLayer.copyData(currentLayer);
layers.splice(layers.length - 3, 0, newLayer);
// Insert it before the Add layer button
layerList.insertBefore(toAppend, layerList.childNodes[0]);
}

View File

@ -32,7 +32,6 @@ window.addEventListener("mousedown", function (mouseEvent) {
canDraw = false; canDraw = false;
} }
} }
//saveHistoryState({type: 'canvas', canvas: context.getImageData(0, 0, canvasSize[0], canvasSize[1])});
currentTool.updateCursor(); currentTool.updateCursor();

View File

@ -61,6 +61,17 @@
<li><button id="redo-button" class="disabled">Redo</button></li> <li><button id="redo-button" class="disabled">Redo</button></li>
</ul> </ul>
</li> </li>
<li>
<button>Layer</button>
<ul>
<li><button onclick = "addLayer()">New layer</button></li>
<li><button onclick = "renameLayer()">Rename</button></li>
<li><button onclick = "deleteLayer()">Delete</button></li>
<li><button onclick = "merge()">Merge below</button></li>
<li><button onclick = "flatten(false)">Flatten all</button></li>
<li><button onclick = "flatten(true)">Flatten visible</button></li>
</ul>
<li> <li>
<button>Selection</button> <button>Selection</button>
<ul> <ul>