From 29ab9167591af28e9ca7285cd0d54e9c574536c6 Mon Sep 17 00:00:00 2001
From: Dariusz L <dl122@wp.pl>
Date: Wed, 2 Jul 2025 09:40:21 +0200
Subject: [PATCH] Refactor layers panel UI and improve resize handling

Changed UI text in CanvasLayersPanel from Polish to English and removed the add layer button and its logic. Moved and improved the ResizeObserver logic in CanvasView.js to update both the canvas and layers panel positions dynamically based on the controls' height.
---
 js/CanvasLayersPanel.js | 11 ++---------
 js/CanvasView.js        | 24 +++++++++++++-----------
 2 files changed, 15 insertions(+), 20 deletions(-)

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 = `
             <div class="layers-panel-header">
-                <span class="layers-panel-title">Warstwy</span>
+                <span class="layers-panel-title">Layers</span>
                 <div class="layers-panel-controls">
-                    <button class="layers-btn" id="add-layer-btn" title="Dodaj warstwę">+</button>
-                    <button class="layers-btn" id="delete-layer-btn" title="Usuń warstwę">🗑</button>
+                    <button class="layers-btn" id="delete-layer-btn" title="Delete layer">🗑</button>
                 </div>
             </div>
             <div class="layers-container" id="layers-container">
@@ -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');
     });