alphard/Comfyui-LayerForge
1
0
Fork 0
mirror of https://github.com/Azornes/Comfyui-LayerForge.git synced 2026-03-22 05:02:11 -03:00
Code Issues Packages Projects Releases Wiki Activity

Refactor layers panel UI and improve resize handling

Browse Source 
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.
This commit is contained in:
Dariusz L
2025-07-02 09:40:21 +02:00
parent ac21aa9579
commit 29ab916759
2 changed files with 15 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
js/CanvasLayersPanel.js
View File

@@ -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();

24
js/CanvasView.js
View File

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