123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170 |
- 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);
|