From bb88d9370b649dd68150338cb578d0987370e4c1 Mon Sep 17 00:00:00 2001 From: Raykosan <71210053+Raykosan@users.noreply.github.com> Date: Wed, 16 Sep 2026 17:39:52 +0300 Subject: [PATCH] Modification of the Setting Manager extension --- web/settings_manager.js | 214 +++++++++++++++++++++++++++++++++++++--- 1 file changed, 201 insertions(+), 13 deletions(-) diff --git a/web/settings_manager.js b/web/settings_manager.js index fced178..4a43241 100644 --- a/web/settings_manager.js +++ b/web/settings_manager.js @@ -1,30 +1,218 @@ import { app } from "../../../scripts/app.js"; +let topbarInterval = null; +const STORAGE_KEY = "RaykoStudio.ShowIcon"; + app.registerExtension({ name: "RaykoStudio.SettingsManager", async setup() { - if (app.extensionManager && app.extensionManager.registerSidebarTab) { - app.extensionManager.registerSidebarTab({ - id: "RaykoStudio.SettingsManager", - icon: "pi pi-desktop", - title: "🦊 Settings Manager", - tooltip: "Interface Settings Manager", - type: "custom", - render: (el) => { - renderSettingsPanel(el); - }, - }); - } + // Одна настройка Π±Π΅Π· явной category β€” ComfyUI Π²ΠΎΠ·ΡŒΠΌΠ΅Ρ‚ Ρ€Π°Π·Π΄Π΅Π» ΠΈΠ· id (Ρ‡Π°ΡΡ‚ΡŒ Π΄ΠΎ Ρ‚ΠΎΡ‡ΠΊΠΈ) + app.ui.settings.addSetting({ + id: "RaykoStudio.SettingsManager", + name: "Settings Manager", + type: () => { + const container = document.createElement("div"); + container.id = "sm-settings-container"; + container.style.display = "flex"; + container.style.flexDirection = "column"; + container.style.gap = "4px"; + container.style.margin = "0"; + container.style.padding = "0"; + + // --- Π‘Ρ‚Ρ€ΠΎΠΊΠ° с Ρ‚ΠΎΠ³Π³Π»ΠΎΠΌ --- + const toggleRow = document.createElement("label"); + toggleRow.style.display = "flex"; + toggleRow.style.alignItems = "center"; + toggleRow.style.gap = "10px"; + toggleRow.style.cursor = "pointer"; + toggleRow.style.fontSize = "14px"; + toggleRow.style.lineHeight = "1.2"; + + const toggleInput = document.createElement("input"); + toggleInput.type = "checkbox"; + toggleInput.style.cursor = "pointer"; + toggleInput.style.width = "16px"; + toggleInput.style.height = "16px"; + toggleInput.style.margin = "0"; + + const isEnabled = localStorage.getItem(STORAGE_KEY) === "true"; + toggleInput.checked = isEnabled; + + toggleInput.onchange = (e) => { + localStorage.setItem(STORAGE_KEY, e.target.checked ? "true" : "false"); + updateTopbarIcon(e.target.checked); + }; + + const toggleText = document.createElement("span"); + toggleText.textContent = "Show Icon On Menu"; + toggleText.style.color = "var(--fg-color)"; + + toggleRow.appendChild(toggleInput); + toggleRow.appendChild(toggleText); + + // --- Кнопка открытия ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ€Π° --- + const btn = document.createElement("button"); + btn.className = "sm-btn sm-btn-success"; + btn.textContent = "Open Settings Manager"; + btn.style.width = "auto"; + btn.style.alignSelf = "flex-start"; + btn.style.padding = "6px 12px"; + btn.style.fontSize = "13px"; + btn.style.marginTop = "4px"; + btn.onclick = () => openSettingsManagerModal(); + + container.appendChild(toggleRow); + container.appendChild(btn); + + return container; + } + }); + + // Π˜Π½ΠΈΡ†ΠΈΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΡ ΠΏΡ€ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ + setTimeout(() => { + const initialVal = localStorage.getItem(STORAGE_KEY) === "true"; + updateTopbarIcon(initialVal); + }, 1000); }, }); +// --- Π£ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΎΠΉ Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ мСню --- + +function updateTopbarIcon(show) { + if (show) { + startTopbarInjection(); + } else { + stopTopbarInjection(); + const existingBtn = document.getElementById("sm-topbar-btn"); + if (existingBtn) { + existingBtn.remove(); + console.log("🦊 Settings Manager: Иконка скрыта."); + } + } +} + +function startTopbarInjection() { + if (topbarInterval) return; + + console.log("🦊 Settings Manager: НачинаСм поиск Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ мСню..."); + let attempts = 0; + const maxAttempts = 20; + + topbarInterval = setInterval(() => { + attempts++; + const actionBar = document.querySelector('.actionbar-container'); + + if (actionBar) { + if (document.getElementById("sm-topbar-btn")) { + clearInterval(topbarInterval); + topbarInterval = null; + return; + } + + const topBtn = document.createElement("button"); + topBtn.id = "sm-topbar-btn"; + topBtn.className = "comfyui-button"; + topBtn.title = "Settings Manager"; + topBtn.innerHTML = `πŸ–₯️`; + topBtn.onclick = () => openSettingsManagerModal(); + + topBtn.style.width = "38px"; + topBtn.style.height = "100%"; + topBtn.style.minHeight = "32px"; + topBtn.style.maxHeight = "40px"; + topBtn.style.padding = "0"; + topBtn.style.margin = "0 5px"; + topBtn.style.display = "inline-flex"; + topBtn.style.alignItems = "center"; + topBtn.style.justifyContent = "center"; + topBtn.style.cursor = "pointer"; + topBtn.style.background = "var(--comfy-input-bg)"; + topBtn.style.color = "var(--fg-color)"; + topBtn.style.border = "1px solid var(--border-color)"; + topBtn.style.borderRadius = "8px"; + topBtn.style.transition = "background 0.2s"; + topBtn.style.boxSizing = "border-box"; + + topBtn.onmouseenter = () => { topBtn.style.background = "var(--comfy-menu-secondary-bg)"; }; + topBtn.onmouseleave = () => { topBtn.style.background = "var(--comfy-input-bg)"; }; + + const runContainer = actionBar.querySelector('.flex.h-full.items-center'); + if (runContainer) { + actionBar.insertBefore(topBtn, runContainer); + } else { + actionBar.appendChild(topBtn); + } + + console.log("🦊 Settings Manager: Иконка Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π° Π² Π²Π΅Ρ€Ρ…Π½Π΅Π΅ мСню."); + clearInterval(topbarInterval); + topbarInterval = null; + } else { + if (attempts >= maxAttempts) { + console.error("🦊 Settings Manager: НС ΡƒΠ΄Π°Π»ΠΎΡΡŒ Π½Π°ΠΉΡ‚ΠΈ .actionbar-container."); + clearInterval(topbarInterval); + topbarInterval = null; + } + } + }, 500); +} + +function stopTopbarInjection() { + if (topbarInterval) { + clearInterval(topbarInterval); + topbarInterval = null; + } +} + +// --- МодальноС ΠΎΠΊΠ½ΠΎ ΠΈ интСрфСйс ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ€Π° --- + +function openSettingsManagerModal() { + const overlay = document.createElement("div"); + overlay.className = "sm-modal-overlay"; + + const modal = document.createElement("div"); + modal.className = "sm-modal-content"; + + const closeBtn = document.createElement("button"); + closeBtn.className = "sm-btn sm-btn-danger sm-btn-small"; + closeBtn.textContent = "βœ• Close"; + closeBtn.style.width = "100%"; + closeBtn.style.marginTop = "10px"; + closeBtn.onclick = () => document.body.removeChild(overlay); + + renderSettingsPanel(modal); + modal.appendChild(closeBtn); + overlay.appendChild(modal); + + overlay.onclick = (e) => { + if (e.target === overlay) document.body.removeChild(overlay); + }; + + document.body.appendChild(overlay); +} + function renderSettingsPanel(container) { container.innerHTML = ''; const style = document.createElement('style'); style.textContent = ` - .sm-container { padding: 15px; display: flex; flex-direction: column; gap: 20px; min-height: 300px; } + .sm-modal-overlay { + position: fixed; top: 0; left: 0; right: 0; bottom: 0; + background: rgba(0,0,0,0.6); + display: flex; justify-content: center; align-items: center; + z-index: 10000; + } + .sm-modal-content { + background: var(--comfy-menu-bg); + border: 1px solid var(--border-color); + border-radius: 8px; + padding: 20px; + width: 90%; max-width: 450px; + max-height: 90vh; overflow-y: auto; + box-shadow: 0 4px 6px rgba(0,0,0,0.3); + position: relative; + } + .sm-container { display: flex; flex-direction: column; gap: 20px; min-height: 300px; } .sm-section { background-color: var(--comfy-input-bg); border: 1px solid var(--border-color); border-radius: 8px; padding: 15px; } .sm-title { font-size: 16px; font-weight: bold; margin-bottom: 10px; color: var(--fg-color); } .sm-description { font-size: 12px; color: var(--descrip-text); margin-bottom: 15px; }