Spaces:
Running
on
L40S
Running
on
L40S
File size: 4,284 Bytes
4450790 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 |
import { app } from "scripts/app.js";
import { ComfyButtonGroup } from "scripts/ui/components/buttonGroup.js";
import { ComfyButton } from "scripts/ui/components/button.js";
import { iconGear, iconStarFilled, logoRgthree } from "rgthree/common/media/svgs.js";
import { createElement, empty, queryOne } from "rgthree/common/utils_dom.js";
import { SERVICE as BOOKMARKS_SERVICE } from "./services/bookmarks_services.js";
import { SERVICE as CONFIG_SERVICE } from "./services/config_service.js";
import { ComfyPopup } from "scripts/ui/components/popup.js";
import { RgthreeConfigDialog } from "./config.js";
let rgthreeButtonGroup: ComfyButtonGroup | null = null;
function addRgthreeTopBarButtons() {
if (!CONFIG_SERVICE.getFeatureValue("comfy_top_bar_menu.enabled")) {
if (rgthreeButtonGroup?.element?.parentElement) {
rgthreeButtonGroup.element.parentElement.removeChild(rgthreeButtonGroup.element);
}
return;
} else if (rgthreeButtonGroup) {
app.menu?.settingsGroup.element.before(rgthreeButtonGroup.element);
return;
}
const buttons = [];
const rgthreeButton = new ComfyButton({
icon: "rgthree",
tooltip: "rgthree-comfy",
// content: 'rgthree-comfy',
app,
enabled: true,
classList: "comfyui-button comfyui-menu-mobile-collapse primary",
});
buttons.push(rgthreeButton);
rgthreeButton.iconElement.style.width = "1.2rem";
rgthreeButton.iconElement.innerHTML = logoRgthree;
rgthreeButton.withPopup(
new ComfyPopup(
{ target: rgthreeButton.element, classList: "rgthree-top-menu" },
createElement("menu", {
children: [
createElement("li", {
child: createElement("button.rgthree-button-reset", {
html: iconGear + "Settings (rgthree-comfy)",
onclick: () => new RgthreeConfigDialog().show(),
}),
}),
createElement("li", {
child: createElement("button.rgthree-button-reset", {
html: iconStarFilled + "Star on Github",
onclick: () => window.open("https://github.com/rgthree/rgthree-comfy", "_blank"),
}),
}),
],
}),
),
"click",
);
if (CONFIG_SERVICE.getFeatureValue("comfy_top_bar_menu.button_bookmarks.enabled")) {
const bookmarksListEl = createElement("menu");
bookmarksListEl.appendChild(
createElement("li.rgthree-message", {
child: createElement("span", { text: "No bookmarks in current workflow." }),
}),
);
const bookmarksButton = new ComfyButton({
icon: "bookmark",
tooltip: "Workflow Bookmarks (rgthree-comfy)",
app,
});
const bookmarksPopup = new ComfyPopup(
{ target: bookmarksButton.element, classList: "rgthree-top-menu" },
bookmarksListEl,
);
bookmarksPopup.addEventListener("open", () => {
const bookmarks = BOOKMARKS_SERVICE.getCurrentBookmarks();
empty(bookmarksListEl);
if (bookmarks.length) {
for (const b of bookmarks) {
bookmarksListEl.appendChild(
createElement("li", {
child: createElement("button.rgthree-button-reset", {
text: `[${b.shortcutKey}] ${b.title}`,
onclick: () => {
b.canvasToBookmark();
},
}),
}),
);
}
} else {
bookmarksListEl.appendChild(
createElement("li.rgthree-message", {
child: createElement("span", { text: "No bookmarks in current workflow." }),
}),
);
}
bookmarksPopup.update();
});
bookmarksButton.withPopup(bookmarksPopup, "hover");
buttons.push(bookmarksButton);
}
rgthreeButtonGroup = new ComfyButtonGroup(...buttons);
app.menu?.settingsGroup.element.before(rgthreeButtonGroup.element);
}
app.registerExtension({
name: "rgthree.TopMenu",
async setup() {
addRgthreeTopBarButtons();
CONFIG_SERVICE.addEventListener("config-change", ((e: CustomEvent) => {
if (e.detail?.key?.includes("features.comfy_top_bar_menu")) {
addRgthreeTopBarButtons();
}
}) as EventListener);
},
});
|