diff --git a/js/CanvasLayersPanel.js b/js/CanvasLayersPanel.js index 47b4707..3bf39ec 100644 --- a/js/CanvasLayersPanel.js +++ b/js/CanvasLayersPanel.js @@ -32,10 +32,9 @@ export class CanvasLayersPanel { this.container.tabIndex = 0; // Umożliwia fokus na panelu this.container.innerHTML = `
- Warstwy + Layers
- - +
@@ -262,14 +261,8 @@ export class CanvasLayersPanel { * Konfiguruje event listenery dla przycisków kontrolnych */ setupControlButtons() { - const addBtn = this.container.querySelector('#add-layer-btn'); const deleteBtn = this.container.querySelector('#delete-layer-btn'); - addBtn?.addEventListener('click', () => { - log.info('Add layer button clicked'); - // TODO: Implementacja dodawania warstwy - }); - deleteBtn?.addEventListener('click', () => { log.info('Delete layer button clicked'); this.deleteSelectedLayers(); diff --git a/js/CanvasView.js b/js/CanvasView.js index 2d28155..b503535 100644 --- a/js/CanvasView.js +++ b/js/CanvasView.js @@ -1041,13 +1041,6 @@ async function createCanvasWidget(node, widget, app) { canvas.updateHistoryButtons(); - const resizeObserver = new ResizeObserver((entries) => { - const controlsHeight = entries[0].target.offsetHeight; - canvasContainer.style.top = (controlsHeight + 10) + "px"; - }); - - resizeObserver.observe(controlPanel.querySelector('.controls')); - const triggerWidget = node.widgets.find(w => w.name === "trigger"); const updateOutput = async () => { @@ -1071,13 +1064,13 @@ async function createCanvasWidget(node, widget, app) { // Tworzenie panelu warstw const layersPanel = canvas.canvasLayersPanel.createPanelStructure(); - + const canvasContainer = $el("div.painterCanvasContainer.painter-container", { style: { position: "absolute", - top: "60px", + top: "60px", // Wartość początkowa, zostanie nadpisana przez ResizeObserver left: "10px", - right: "270px", // Zostawiamy miejsce na panel warstw + right: "270px", bottom: "10px", overflow: "hidden" } @@ -1087,7 +1080,7 @@ async function createCanvasWidget(node, widget, app) { const layersPanelContainer = $el("div.painterLayersPanelContainer", { style: { position: "absolute", - top: "60px", + top: "60px", // Wartość początkowa, zostanie nadpisana przez ResizeObserver right: "10px", width: "250px", bottom: "10px", @@ -1095,6 +1088,15 @@ async function createCanvasWidget(node, widget, app) { } }, [layersPanel]); + const resizeObserver = new ResizeObserver((entries) => { + const controlsHeight = entries[0].target.offsetHeight; + const newTop = (controlsHeight + 10) + "px"; + canvasContainer.style.top = newTop; + layersPanelContainer.style.top = newTop; + }); + + resizeObserver.observe(controlPanel.querySelector('.controls')); + canvas.canvas.addEventListener('focus', () => { canvasContainer.classList.add('has-focus'); });