alphard/Comfyui-LayerForge
1
0
Fork 0
mirror of https://github.com/Azornes/Comfyui-LayerForge.git synced 2026-03-25 06:22:14 -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.tabIndex = 0; // Umożliwia fokus na panelu
this.container.innerHTML = ` this.container.innerHTML = `
<div class="layers-panel-header"> <div class="layers-panel-header">
<span class="layers-panel-title">Warstwy</span> <span class="layers-panel-title">Layers</span>
<div class="layers-panel-controls"> <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="Delete layer">🗑</button>
<button class="layers-btn" id="delete-layer-btn" title="Usuń warstwę">🗑</button>
</div> </div>
</div> </div>
<div class="layers-container" id="layers-container"> <div class="layers-container" id="layers-container">
@@ -262,14 +261,8 @@ export class CanvasLayersPanel {
* Konfiguruje event listenery dla przycisków kontrolnych * Konfiguruje event listenery dla przycisków kontrolnych
*/ */
setupControlButtons() { setupControlButtons() {
const addBtn = this.container.querySelector('#add-layer-btn');
const deleteBtn = this.container.querySelector('#delete-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', () => { deleteBtn?.addEventListener('click', () => {
log.info('Delete layer button clicked'); log.info('Delete layer button clicked');
this.deleteSelectedLayers(); this.deleteSelectedLayers();

24
js/CanvasView.js
View File

@@ -1041,13 +1041,6 @@ async function createCanvasWidget(node, widget, app) {
canvas.updateHistoryButtons(); 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 triggerWidget = node.widgets.find(w => w.name === "trigger");
const updateOutput = async () => { const updateOutput = async () => {
@@ -1071,13 +1064,13 @@ async function createCanvasWidget(node, widget, app) {
// Tworzenie panelu warstw // Tworzenie panelu warstw
const layersPanel = canvas.canvasLayersPanel.createPanelStructure(); const layersPanel = canvas.canvasLayersPanel.createPanelStructure();
const canvasContainer = $el("div.painterCanvasContainer.painter-container", { const canvasContainer = $el("div.painterCanvasContainer.painter-container", {
style: { style: {
position: "absolute", position: "absolute",
top: "60px", top: "60px", // Wartość początkowa, zostanie nadpisana przez ResizeObserver
left: "10px", left: "10px",
right: "270px", // Zostawiamy miejsce na panel warstw right: "270px",
bottom: "10px", bottom: "10px",
overflow: "hidden" overflow: "hidden"
} }
@@ -1087,7 +1080,7 @@ async function createCanvasWidget(node, widget, app) {
const layersPanelContainer = $el("div.painterLayersPanelContainer", { const layersPanelContainer = $el("div.painterLayersPanelContainer", {
style: { style: {
position: "absolute", position: "absolute",
top: "60px", top: "60px", // Wartość początkowa, zostanie nadpisana przez ResizeObserver
right: "10px", right: "10px",
width: "250px", width: "250px",
bottom: "10px", bottom: "10px",
@@ -1095,6 +1088,15 @@ async function createCanvasWidget(node, widget, app) {
} }
}, [layersPanel]); }, [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', () => { canvas.canvas.addEventListener('focus', () => {
canvasContainer.classList.add('has-focus'); canvasContainer.classList.add('has-focus');
}); });