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 = `
@@ -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');
});