Add auto-switch to Imported tab in Media Assets panel
- Create default-imported-tab.js extension that automatically switches from Generated to Imported tab when Media Assets panel opens - Uses MutationObserver to detect sidebar changes and switch tabs - Ensures users see all output images by default instead of empty Generated tab (which only shows current session outputs) Note: Also requires ComfyUI modification to seed_assets() in main.py and server.py to include "output" folder in asset scanning. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 4.5
parent
0b6b9066b3
commit
3dfe652ffc
@@ -0,0 +1,89 @@
|
||||
/**
|
||||
* Auto-switch Media Assets panel to "Imported" tab by default
|
||||
* This ensures users see all assets from the output folder instead of just session-generated ones
|
||||
*/
|
||||
|
||||
import { app } from "../../scripts/app.js";
|
||||
|
||||
// Function to switch to Imported tab
|
||||
function switchToImportedTab() {
|
||||
const tabs = document.querySelectorAll('[role="tab"]');
|
||||
for (const tab of tabs) {
|
||||
const text = tab.textContent || tab.innerText || "";
|
||||
if (text.trim() === "Imported") {
|
||||
// Check if not already selected
|
||||
if (tab.getAttribute("aria-selected") !== "true") {
|
||||
tab.click();
|
||||
console.log("[ModelSync] Switched Media Assets to Imported tab");
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// Periodically check for the Imported tab and switch to it
|
||||
function setupTabSwitcher() {
|
||||
let switchAttempts = 0;
|
||||
const maxAttempts = 50; // Stop after ~10 seconds of checking
|
||||
|
||||
const intervalId = setInterval(() => {
|
||||
switchAttempts++;
|
||||
|
||||
// Look for the Imported tab
|
||||
const importedTab = Array.from(document.querySelectorAll('[role="tab"]'))
|
||||
.find(tab => tab.textContent?.trim() === "Imported");
|
||||
|
||||
if (importedTab) {
|
||||
// Found the tab - check if Generated is currently selected
|
||||
const generatedTab = Array.from(document.querySelectorAll('[role="tab"]'))
|
||||
.find(tab => tab.textContent?.trim() === "Generated");
|
||||
|
||||
if (generatedTab && generatedTab.getAttribute("aria-selected") === "true") {
|
||||
// Generated is selected, switch to Imported
|
||||
importedTab.click();
|
||||
console.log("[ModelSync] Auto-switched to Imported tab");
|
||||
}
|
||||
}
|
||||
|
||||
// Stop checking after max attempts
|
||||
if (switchAttempts >= maxAttempts) {
|
||||
clearInterval(intervalId);
|
||||
}
|
||||
}, 200);
|
||||
|
||||
// Also set up a MutationObserver for when new tabs appear (sidebar opens)
|
||||
const observer = new MutationObserver(() => {
|
||||
const importedTab = Array.from(document.querySelectorAll('[role="tab"]'))
|
||||
.find(tab => tab.textContent?.trim() === "Imported");
|
||||
|
||||
if (importedTab && importedTab.getAttribute("aria-selected") !== "true") {
|
||||
// Check if this is in the Media Assets context
|
||||
const generatedTab = Array.from(document.querySelectorAll('[role="tab"]'))
|
||||
.find(tab => tab.textContent?.trim() === "Generated");
|
||||
|
||||
if (generatedTab && generatedTab.getAttribute("aria-selected") === "true") {
|
||||
setTimeout(() => {
|
||||
importedTab.click();
|
||||
console.log("[ModelSync] Auto-switched to Imported tab (via observer)");
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
observer.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true
|
||||
});
|
||||
|
||||
console.log("[ModelSync] Media Assets tab switcher initialized");
|
||||
}
|
||||
|
||||
// Register extension
|
||||
app.registerExtension({
|
||||
name: "ModelSync.DefaultImportedTab",
|
||||
async setup() {
|
||||
// Wait for ComfyUI to fully initialize, then set up the tab switcher
|
||||
setTimeout(setupTabSwitcher, 3000);
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user