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

Improve minimized "Custom Output Area Active" styling

Browse Source 
Unified the appearance of the minimized "Custom Output Area Active" bar with the full menu styling:
This commit is contained in:
Dariusz L
2025-07-30 11:05:04 +02:00
parent b09f9789de
commit fc4c343418
4 changed files with 218 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
js/CustomShapeMenu.js
View File

@@ -3,6 +3,7 @@ import { addStylesheet, getUrl } from "./utils/ResourceManager.js";
const log = createModuleLogger('CustomShapeMenu');
export class CustomShapeMenu {
constructor(canvas) {
this.isMinimized = false;
this.canvas = canvas;
this.element = null;
this.worldX = 0;
@@ -17,6 +18,7 @@ export class CustomShapeMenu {
this._createUI();
if (this.element) {
this.element.style.display = 'block';
this._updateMinimizedState();
}
// Position in top-left corner of viewport (closer to edge)
const viewLeft = this.canvas.viewport.x;
@@ -46,15 +48,50 @@ export class CustomShapeMenu {
addStylesheet(getUrl('./css/custom_shape_menu.css'));
this.element = document.createElement('div');
this.element.id = 'layerforge-custom-shape-menu';
// --- MINIMIZED BAR ---
const minimizedBar = document.createElement('div');
minimizedBar.className = 'custom-shape-minimized-bar';
minimizedBar.textContent = "Custom Output Area Active";
minimizedBar.style.display = 'none';
minimizedBar.style.cursor = 'pointer';
minimizedBar.onclick = () => {
this.isMinimized = false;
this._updateMinimizedState();
};
this.element.appendChild(minimizedBar);
// --- FULL MENU ---
const fullMenu = document.createElement('div');
fullMenu.className = 'custom-shape-full-menu';
// Minimize button (top right)
const minimizeBtn = document.createElement('button');
minimizeBtn.innerHTML = "–";
minimizeBtn.title = "Minimize menu";
minimizeBtn.className = 'custom-shape-minimize-btn';
minimizeBtn.style.position = 'absolute';
minimizeBtn.style.top = '4px';
minimizeBtn.style.right = '4px';
minimizeBtn.style.width = '24px';
minimizeBtn.style.height = '24px';
minimizeBtn.style.border = 'none';
minimizeBtn.style.background = 'transparent';
minimizeBtn.style.color = '#888';
minimizeBtn.style.fontSize = '20px';
minimizeBtn.style.cursor = 'pointer';
minimizeBtn.onclick = (e) => {
e.stopPropagation();
this.isMinimized = true;
this._updateMinimizedState();
};
fullMenu.appendChild(minimizeBtn);
// Create menu content
const lines = [
"🎯 Custom Output Area Active"
"Custom Output Area Active"
];
lines.forEach(line => {
const lineElement = document.createElement('div');
lineElement.textContent = line;
lineElement.className = 'menu-line';
this.element.appendChild(lineElement);
fullMenu.appendChild(lineElement);
});
// Create a container for the entire shape mask feature set
const featureContainer = document.createElement('div');
@@ -209,7 +246,7 @@ export class CustomShapeMenu {
featherSliderContainer.appendChild(featherSlider);
featherSliderContainer.appendChild(featherValueDisplay);
featureContainer.appendChild(featherSliderContainer);
this.element.appendChild(featureContainer);
fullMenu.appendChild(featureContainer);
// Create output area extension container
const extensionContainer = document.createElement('div');
extensionContainer.id = 'output-area-extension-container';
@@ -305,7 +342,8 @@ export class CustomShapeMenu {
slidersContainer.appendChild(createExtensionSlider('Left extension:', 'left'));
slidersContainer.appendChild(createExtensionSlider('Right extension:', 'right'));
extensionContainer.appendChild(slidersContainer);
this.element.appendChild(extensionContainer);
fullMenu.appendChild(extensionContainer);
this.element.appendChild(fullMenu);
// Add to DOM
if (this.canvas.canvas.parentElement) {
this.canvas.canvas.parentElement.appendChild(this.element);
@@ -315,6 +353,7 @@ export class CustomShapeMenu {
}
this.uiInitialized = true;
this._updateUI();
this._updateMinimizedState();
// Add viewport change listener to update shape preview when zooming/panning
this._addViewportChangeListener();
}
@@ -348,8 +387,12 @@ export class CustomShapeMenu {
_updateUI() {
if (!this.element)
return;
// Always update only the full menu part
const fullMenu = this.element.querySelector('.custom-shape-full-menu');
if (!fullMenu)
return;
const setChecked = (id, checked) => {
const input = this.element.querySelector(`#${id}`);
const input = fullMenu.querySelector(`#${id}`);
if (input)
input.checked = checked;
};
@@ -357,23 +400,37 @@ export class CustomShapeMenu {
setChecked('expansion-checkbox', this.canvas.shapeMaskExpansion);
setChecked('feather-checkbox', this.canvas.shapeMaskFeather);
setChecked('extension-checkbox', this.canvas.outputAreaExtensionEnabled);
const expansionCheckbox = this.element.querySelector('#expansion-checkbox')?.parentElement;
const expansionCheckbox = fullMenu.querySelector('#expansion-checkbox')?.parentElement;
if (expansionCheckbox) {
expansionCheckbox.style.display = this.canvas.autoApplyShapeMask ? 'flex' : 'none';
}
const featherCheckbox = this.element.querySelector('#feather-checkbox')?.parentElement;
const featherCheckbox = fullMenu.querySelector('#feather-checkbox')?.parentElement;
if (featherCheckbox) {
featherCheckbox.style.display = this.canvas.autoApplyShapeMask ? 'flex' : 'none';
}
const expansionSliderContainer = this.element.querySelector('#expansion-slider-container');
const expansionSliderContainer = fullMenu.querySelector('#expansion-slider-container');
if (expansionSliderContainer) {
expansionSliderContainer.style.display = (this.canvas.autoApplyShapeMask && this.canvas.shapeMaskExpansion) ? 'block' : 'none';
}
const featherSliderContainer = this.element.querySelector('#feather-slider-container');
const featherSliderContainer = fullMenu.querySelector('#feather-slider-container');
if (featherSliderContainer) {
featherSliderContainer.style.display = (this.canvas.autoApplyShapeMask && this.canvas.shapeMaskFeather) ? 'block' : 'none';
}
}
_updateMinimizedState() {
if (!this.element)
return;
const minimizedBar = this.element.querySelector('.custom-shape-minimized-bar');
const fullMenu = this.element.querySelector('.custom-shape-full-menu');
if (this.isMinimized) {
minimizedBar.style.display = 'block';
fullMenu.style.display = 'none';
}
else {
minimizedBar.style.display = 'none';
fullMenu.style.display = 'block';
}
}
_updateExtensionUI() {
if (!this.element)
return;