var contextMenuInit = function() { let eventListenerApplied = false; let menuSpecs = new Map(); const uid = function() { return Date.now().toString(36) + Math.random().toString(36).substring(2); }; function showContextMenu(event, element, menuEntries) { let posx = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; let posy = event.clientY + document.body.scrollTop + document.documentElement.scrollTop; let oldMenu = gradioApp().querySelector('#context-menu'); if (oldMenu) { oldMenu.remove(); } let baseStyle = window.getComputedStyle(uiCurrentTab); const contextMenu = document.createElement('nav'); contextMenu.id = "context-menu"; contextMenu.style.background = baseStyle.background; contextMenu.style.color = baseStyle.color; contextMenu.style.fontFamily = baseStyle.fontFamily; contextMenu.style.top = posy + 'px'; contextMenu.style.left = posx + 'px'; const contextMenuList = document.createElement('ul'); contextMenuList.className = 'context-menu-items'; contextMenu.append(contextMenuList); menuEntries.forEach(function(entry) { let contextMenuEntry = document.createElement('a'); contextMenuEntry.innerHTML = entry['name']; contextMenuEntry.addEventListener("click", function() { entry['func'](); }); contextMenuList.append(contextMenuEntry); }); gradioApp().appendChild(contextMenu); let menuWidth = contextMenu.offsetWidth + 4; let menuHeight = contextMenu.offsetHeight + 4; let windowWidth = window.innerWidth; let windowHeight = window.innerHeight; if ((windowWidth - posx) < menuWidth) { contextMenu.style.left = windowWidth - menuWidth + "px"; } if ((windowHeight - posy) < menuHeight) { contextMenu.style.top = windowHeight - menuHeight + "px"; } } function appendContextMenuOption(targetElementSelector, entryName, entryFunction) { var currentItems = menuSpecs.get(targetElementSelector); if (!currentItems) { currentItems = []; menuSpecs.set(targetElementSelector, currentItems); } let newItem = { id: targetElementSelector + '_' + uid(), name: entryName, func: entryFunction, isNew: true }; currentItems.push(newItem); return newItem['id']; } function removeContextMenuOption(uid) { menuSpecs.forEach(function(v) { let index = -1; v.forEach(function(e, ei) { if (e['id'] == uid) { index = ei; } }); if (index >= 0) { v.splice(index, 1); } }); } function addContextMenuEventListener() { if (eventListenerApplied) { return; } gradioApp().addEventListener("click", function(e) { if (!e.isTrusted) { return; } let oldMenu = gradioApp().querySelector('#context-menu'); if (oldMenu) { oldMenu.remove(); } }); gradioApp().addEventListener("contextmenu", function(e) { let oldMenu = gradioApp().querySelector('#context-menu'); if (oldMenu) { oldMenu.remove(); } menuSpecs.forEach(function(v, k) { if (e.composedPath()[0].matches(k)) { showContextMenu(e, e.composedPath()[0], v); e.preventDefault(); } }); }); eventListenerApplied = true; } return [appendContextMenuOption, removeContextMenuOption, addContextMenuEventListener]; }; var initResponse = contextMenuInit(); var appendContextMenuOption = initResponse[0]; var removeContextMenuOption = initResponse[1]; var addContextMenuEventListener = initResponse[2]; (function() { //Start example Context Menu Items let generateOnRepeat = function(genbuttonid, interruptbuttonid) { let genbutton = gradioApp().querySelector(genbuttonid); let interruptbutton = gradioApp().querySelector(interruptbuttonid); if (!interruptbutton.offsetParent) { genbutton.click(); } clearInterval(window.generateOnRepeatInterval); window.generateOnRepeatInterval = setInterval(function() { if (!interruptbutton.offsetParent) { genbutton.click(); } }, 500); }; appendContextMenuOption('#txt2img_generate', 'Generate forever', function() { generateOnRepeat('#txt2img_generate', '#txt2img_interrupt'); }); appendContextMenuOption('#img2img_generate', 'Generate forever', function() { generateOnRepeat('#img2img_generate', '#img2img_interrupt'); }); let cancelGenerateForever = function() { clearInterval(window.generateOnRepeatInterval); }; appendContextMenuOption('#txt2img_interrupt', 'Cancel generate forever', cancelGenerateForever); appendContextMenuOption('#txt2img_generate', 'Cancel generate forever', cancelGenerateForever); appendContextMenuOption('#img2img_interrupt', 'Cancel generate forever', cancelGenerateForever); appendContextMenuOption('#img2img_generate', 'Cancel generate forever', cancelGenerateForever); })(); //End example Context Menu Items onAfterUiUpdate(addContextMenuEventListener);