chunzhi/comfyui-deploy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: inject buttons in the right position of the comfyui menu

Browse Source
This commit is contained in:
EmmanuelMr18 2025-01-07 23:49:03 -06:00
parent 413115571b
commit 73853a60ff
1 changed files with 40 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
web-plugin/index.js
View File

@ -742,6 +742,8 @@ const ext = {
sendEventToCD("cd_plugin_onQueuePrompt", prompt);
} else if (message.type === "configure_queue_buttons") {
addQueueButtons(message.data);
} else if (message.type === "configure_menu_right_buttons") {
addMenuRightButtons(message.data);
} else if (message.type === "get_prompt") {
const prompt = await app.graphToPrompt();
sendEventToCD("cd_plugin_onGetPrompt", prompt);
@ -2115,3 +2117,41 @@ function addQueueButtons(buttonConfigs = DEFAULT_BUTTONS) {
queueButtonGroup.appendChild(button);
});
}
// Function to add butons to the menu right
function addMenuRightButtons(buttonConfigs) {
const menuRightButtons = document.querySelector('.comfyui-menu-right')
if (!menuRightButtons) return
// Remove any existing CD buttons
const existingButtons = document.querySelectorAll('.comfyui-menu-right [id^="cd-button-"]')
for (const button of existingButtons) {
button.remove()
}
if (!menuRightButtons) return
for (const config of buttonConfigs) {
const button = createMenuRightButton(config)
menuRightButtons.appendChild(button)
}
}
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'
button.innerHTML = `
<span class="p-button-icon pi ${config.icon}"></span>
<span class="p-button-label">${config.label}</span>
`
button.onclick = () => {
const eventData = typeof config.eventData === 'function' ?
config.eventData() :
config.eventData || {}
sendEventToCD(config.event, eventData)
}
button.setAttribute('data-pd-tooltip', config.tooltip)
return button
}