class Layer { constructor({height=600, width=800}) { this.drawCanvas = new Canvas({height, width}); this.selectCanvas = new Canvas({height, width}); this.active = false; const previewElement = document.createElement('div'); previewElement.className = 'layer-preview'; this.previewElement = previewElement; } setHeight({height}) { this.height = height; this.drawCanvas.setHeight(height); this.selectCanvas.setHeight(height); return this; } setWidth({width}) { this.width = width; this.drawCanvas.setWidth(width); this.selectCanvas.setWidth(width); return this; } resize({height, width}) { this.height = height; this.width = width; this.drawCanvas.resize({height, width}); this.selectCanvas.resize({height, width}); return this; } refreshPreviewElement() { this.previewElement.src = this.drawCanvas.toDataURL(); } } class Layers { constructor({easelElement, controllersElement, height=600, width=800, backgroundColor=new Color(255, 255, 255)}) { this.backgroundColor = backgroundColor; this.height = height; this.width = width; this.easelElement = easelElement; this.controllersElement = controllersElement; this.zoom = 1; this.layers = [ new Layer({height: this.height, width: this.width}).fill({color: this.backgroundColor}), new Layer({height: this.height, width: this.width}) ]; this.activeIndex = 1; this.refresh(); } setHeight({height}) { this.height = height; this.easelElement.style.height = `${height}px`; this.layers.forEach(layer => { layer.setHeight(height); }); this.layers[0].fill({color: this.background}); return this; } setWidth({width}) { this.width = width; this.easelElement.style.width = `${width}px`; this.layers.forEach(layer => { layer.setWidth(width); }); this.layers[0].fill({color: this.background}); return this; } getActive() { return this.layers[this.activeIndex]; } resize({height, width}) { this.height = height; this.width = width; this.easelElement.style.height = `${height}px`; this.easelElement.style.width = `${width}px`; this.layers.forEach(layer => { layer.resize({height, width}); }); this.layers[0].fill({color: this.background}); } add() { const layer = new Layer(); this.layers.push(layer); layer.moveUpButton.addEventListener('click', () => { this.moveUp(layer); }); layer.moveDownButton.addEventListener('click', () => { this.moveDown(layer); }); layer.deleteButton.addEventListener('click', () => { layer.remove(); this.delete(layer); }); } delete({layer}) { const index = this.layers.indexOf(layer); if (index > -1) { this.layers.splice(index, 1); } } switchIndex({index1, index2}) { const temp = this.layers[index1]; this.layers[index1] = this.layers[index2]; this.layers[index2] = temp; this.refresh(); } mergeIndex({index1, index2}) { this.layers[index1].add(this.layers[index2]); this.delete(this.layers[index2]); this.refresh(); } moveUp = function({layer}) { const index = this.layers.indexOf(layer); if (index === 0 || index === this.layers.length - 1) return; this.switchIndex({index1: index, index2: index + 1}); } moveDown = function({layer}) { const index = this.layers.indexOf(layer); if (index === 0 || index === 1) return; this.switchIndex({index1: index, index2: index - 1}); } mergeUp = function({layer}) { const index = this.layers.indexOf(layer); if (index === 0 || index === this.layers.length - 1) return this.mergeIndex({index1: index, index2: index + 1}); } mergeDown = function({layer}) { const index = this.layers.indexOf(layer); if (index === 0 || index === 1) return; this.mergeIndex({index2: index, index1: index - 1}); } refreshEasel() { this.easelElement.innerHTML = ''; this.layers.forEach(layer => { console.log("test"); this.easelElement.appendChild(layer.drawCanvas); this.easelElement.appendChild(layer.selectCanvas); }); } refreshControllers() { this.controllersElement.innerHTML = ''; this.layers.forEach(layer => { const controllerElement = document.createElement('div'); controllerElement.className = 'layer-controller'; const previewElement = this.layers.previewElement; previewElement.addEventListener('click', () => { this.activeIndex = this.layers.indexOf(layer); }); controllerElement.appendChild(previewElement); const moveButtons = document.createElement('div'); moveButtons.classList.add('button'); moveButtons.classList.add('layer-move-buttons'); moveButtons.className = 'layer-move-buttons'; const moveUpButton = document.createElement('div'); moveUpButton.classList.add('button'); moveUpButton.classList.add('layer-move-button'); moveUpButton.innerHTML = ''; moveUpButton.addEventListener('click', () => { this.moveUp({layer}); }); moveButtons.appendChild(layer.moveUpButton); const moveDownButton = document.createElement('div'); moveDownButton.classList.add('button'); moveDownButton.classList.add('layer-move-button'); moveDownButton.innerHTML = ''; moveDownButton.addEventListener('click', () => { this.moveDown({layer}); }); layer.moveButtons.appendChild(layer.moveDownButton); layer.controllerElement.appendChild(layer.moveButtons); const mergeButtons = document.createElement('div'); mergeButtons.classList.add('button'); mergeButtons.classList.add('layer-merge-buttons'); mergeButtons.className = 'layer-merge-buttons'; const mergeUpButton = document.createElement('div'); mergeUpButton.classList.add('button'); mergeUpButton.classList.add('layer-merge-button'); mergeUpButton.innerHTML = ''; mergeUpButton.addEventListener('click', () => { this.mergeUp({layer}); }); mergeButtons.appendChild(layer.mergeUpButton); layer.controllerElement.appendChild(layer.mergeButtons); const deleteButton = document.createElement('div'); deleteButton.classList.add('button'); deleteButton.classList.add('layer-delete-button'); deleteButton.innerHTML = ''; deleteButton.addEventListener('click', () => { this.delete({layer}); }); layer.controllerElement.appendChild(layer.deleteButton); }); } refreshPreviews() { this.layers.forEach(layer => { layer.refreshPreviewElement(); }); } refresh() { console.log("test"); this.refreshEasel(); this.refreshControllers(); this.refreshPreviews(); } }