${loadingIcon}
@@ -1969,7 +1971,7 @@ async function loadWorkflowApi(versionId) {
const orginal_fetch_api = api.fetchApi;
api.fetchApi = async (route, options) => {
- console.log("Fetch API called with args:", route, options, ext.native_mode);
+ // console.log("Fetch API called with args:", route, options, ext.native_mode);
if (route.startsWith("/prompt") && ext.native_mode) {
const info = await getSelectedWorkflowInfo();
@@ -2118,43 +2120,189 @@ function addQueueButtons(buttonConfigs = DEFAULT_BUTTONS) {
});
}
-// Function to add butons to the menu right
-function addMenuRightButtons(buttonConfigs) {
- const menuRightButtons = document.querySelector('.comfyui-menu-right .flex')
+// addMenuRightButtons([
+// {
+// id: "cd-button-save-image",
+// icon: "pi-save",
+// label: "Snapshot",
+// tooltip: "Save the current image to your output directory.",
+// event: "save_image",
+// eventData: () => ({}),
+// },
+// ]);
- if (!menuRightButtons) return
+// addMenuLeftButtons([
+// {
+// id: "cd-button-back",
+// icon: `
`,
+// tooltip: "Go back to the previous page.",
+// event: "back",
+// eventData: () => ({}),
+// },
+// ]);
+
+// addMenuButtons({
+// containerSelector: "body > div.comfyui-body-top > div",
+// buttonConfigs: [
+// {
+// id: "cd-button-workflow-1",
+// icon: `
`,
+// label: "Workflow",
+// tooltip: "Go to Workflow 1",
+// event: "workflow_1",
+// // btnClasses: "",
+// eventData: () => ({}),
+// },
+// {
+// id: "cd-button-workflow-3",
+// // icon: `
`,
+// label: "v1",
+// tooltip: "Go to Workflow 1",
+// event: "workflow_1",
+// // btnClasses: "",
+// eventData: () => ({}),
+// },
+// {
+// id: "cd-button-workflow-2",
+// icon: `
`,
+// label: "Commit",
+// tooltip: "Commit the current workflow",
+// event: "commit",
+// style: {
+// backgroundColor: "oklch(.476 .114 61.907)",
+// },
+// eventData: () => ({}),
+// },
+// ],
+// buttonIdPrefix: "cd-button-workflow-",
+// insertBefore:
+// "body > div.comfyui-body-top > div > div.flex-grow.min-w-0.app-drag.h-full",
+// // containerStyle: { order: "3" }
+// });
+
+// addMenuButtons({
+// containerSelector:
+// "body > div.comfyui-body-top > div > div.flex-grow.min-w-0.app-drag.h-full",
+// clearContainer: true,
+// buttonConfigs: [],
+// buttonIdPrefix: "cd-button-p-",
+// containerStyle: { order: "-1" },
+// });
+
+// Function to add buttons to a menu container
+function addMenuButtons(options) {
+ const {
+ containerSelector,
+ buttonConfigs,
+ buttonIdPrefix = "cd-button-",
+ containerClass = "comfyui-button-group",
+ containerStyle = {},
+ clearContainer = false,
+ insertBefore = null, // New option to specify selector for insertion point
+ } = options;
+
+ const menuContainer = document.querySelector(containerSelector);
+
+ if (!menuContainer) return;
// Remove any existing CD buttons
- const existingButtons = document.querySelectorAll('.comfyui-menu-right [id^="cd-button-"]')
- for (const button of existingButtons) {
- button.remove()
+ const existingButtons = document.querySelectorAll(
+ `[id^="${buttonIdPrefix}"]`,
+ );
+ existingButtons.forEach((button) => button.remove());
+
+ const container = document.createElement("div");
+ container.className = containerClass;
+
+ // Apply container styles
+ Object.assign(container.style, containerStyle);
+
+ // Clear existing content if specified
+ if (clearContainer) {
+ menuContainer.innerHTML = "";
}
- const container = document.createElement('div')
- container.className = 'comfyui-button-group mx-2'
+ // Create and add buttons
+ buttonConfigs.forEach((config) => {
+ const button = createMenuButton({
+ ...config,
+ idPrefix: buttonIdPrefix,
+ });
+ container.appendChild(button);
+ });
- for (const config of buttonConfigs) {
- const button = createMenuRightButton(config)
- container.appendChild(button)
+ // Insert before specified element if provided, otherwise append
+ if (insertBefore) {
+ const targetElement = menuContainer.querySelector(insertBefore);
+ if (targetElement) {
+ menuContainer.insertBefore(container, targetElement);
+ } else {
+ menuContainer.appendChild(container);
+ }
+ } else {
+ menuContainer.appendChild(container);
}
-
- menuRightButtons.appendChild(container)
}
-function createMenuRightButton(config) {
- const button = document.createElement('button')
- button.id = `cd-button-${config.id}`
- button.className = `p-button p-component p-button-secondary p-button-md ${config.btnClasses}`
+function createMenuButton(config) {
+ const {
+ id,
+ icon,
+ label,
+ btnClasses = "",
+ tooltip,
+ event,
+ eventData,
+ idPrefix,
+ style = {},
+ } = config;
+
+ const button = document.createElement("button");
+ button.id = `${idPrefix}${id}`;
+ button.className = `comfyui-button ${btnClasses}`;
+ Object.assign(button.style, style);
+
+ // Only add icon if provided
+ const iconHtml = icon
+ ? icon.startsWith("