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

Changed to switch button mask on/off

Browse Source
This commit is contained in:
Dariusz L
2025-07-28 19:02:29 +02:00
parent 257bada28d
commit 6b04e3891b
4 changed files with 182 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/CanvasView.ts
View File

@@ -435,37 +435,65 @@ async function createCanvasWidget(node: ComfyNode, widget: any, app: ComfyApp):
]),
$el("div.painter-separator"),
$el("div.painter-button-group", {id: "mask-controls"}, [
$el("button.painter-button.primary", {
id: `toggle-mask-btn-${node.id}`,
textContent: "M", // Fallback text until icon loads
title: "Toggle mask overlay visibility",
style: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
minWidth: '32px',
maxWidth: '32px',
padding: '4px',
fontSize: '12px',
fontWeight: 'bold'
},
onclick: (e: MouseEvent) => {
const button = e.currentTarget as HTMLButtonElement;
canvas.maskTool.toggleOverlayVisibility();
canvas.render();
const iconContainer = button.querySelector('.mask-icon-container') as HTMLElement;
if (iconContainer) {
if (canvas.maskTool.isOverlayVisible) {
button.classList.add('primary');
iconContainer.style.opacity = '1';
} else {
button.classList.remove('primary');
iconContainer.style.opacity = '0.5';
}
$el("label.clipboard-switch.mask-switch", {
id: `toggle-mask-switch-${node.id}`,
style: { minWidth: "56px", maxWidth: "56px", width: "56px", paddingLeft: "0", paddingRight: "0" }
}, [
$el("input", {
type: "checkbox",
checked: canvas.maskTool.isOverlayVisible,
onchange: (e: Event) => {
const checked = (e.target as HTMLInputElement).checked;
canvas.maskTool.isOverlayVisible = checked;
canvas.render();
}
}),
$el("span.switch-track"),
$el("span.switch-labels", { style: { fontSize: "11px" } }, [
$el("span.text-clipspace", { style: { paddingRight: "22px" } }, ["On"]),
$el("span.text-system", { style: { paddingLeft: "20px" } }, ["Off"])
]),
$el("span.switch-knob", {}, [
(() => {
// Ikona maski (SVG lub obrazek)
const iconContainer = document.createElement('span') as HTMLElement;
iconContainer.className = 'switch-icon';
iconContainer.style.display = 'flex';
iconContainer.style.alignItems = 'center';
iconContainer.style.justifyContent = 'center';
iconContainer.style.width = '16px';
iconContainer.style.height = '16px';
// Pobierz ikonę maski z iconLoader
const icon = iconLoader.getIcon(LAYERFORGE_TOOLS.MASK);
if (icon instanceof HTMLImageElement) {
const img = icon.cloneNode() as HTMLImageElement;
img.style.width = "16px";
img.style.height = "16px";
// Ustaw filtr w zależności od stanu checkboxa
setTimeout(() => {
const input = document.getElementById(`toggle-mask-switch-${node.id}`)?.querySelector('input[type="checkbox"]') as HTMLInputElement;
const updateIconFilter = () => {
if (input && img) {
img.style.filter = input.checked
? "brightness(0) invert(1)"
: "grayscale(1) brightness(0.7) opacity(0.6)";
}
};
if (input) {
input.addEventListener('change', updateIconFilter);
updateIconFilter();
}
}),
}, 0);
iconContainer.appendChild(img);
} else {
iconContainer.textContent = "M";
iconContainer.style.fontSize = "12px";
iconContainer.style.color = "#fff";
}
return iconContainer;
})()
])
]),
$el("button.painter-button", {
textContent: "Edit Mask",
title: "Open the current canvas view in the mask editor",