alphard/Comfyui-LayerForge
1
0
Fork 0
mirror of https://github.com/Azornes/Comfyui-LayerForge.git synced 2026-03-21 20:52:12 -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

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