stable-diffusion-webui/javascript/contextMenus.js

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

164 lines
5.5 KiB
JavaScript
Raw Normal View History

2023-05-18 00:59:10 -06:00
var contextMenuInit = function() {
2022-10-07 22:34:17 -06:00
let eventListenerApplied = false;
let menuSpecs = new Map();
2022-10-07 22:34:17 -06:00
const uid = function() {
return Date.now().toString(36) + Math.random().toString(36).substring(2);
2022-10-07 22:34:17 -06:00
};
2022-10-07 22:34:17 -06:00
function showContextMenu(event, element, menuEntries) {
let oldMenu = gradioApp().querySelector('#context-menu');
if (oldMenu) {
oldMenu.remove();
}
2023-04-30 13:08:52 -06:00
let baseStyle = window.getComputedStyle(uiCurrentTab);
2022-10-07 22:34:17 -06:00
const contextMenu = document.createElement('nav');
contextMenu.id = "context-menu";
contextMenu.style.background = baseStyle.background;
contextMenu.style.color = baseStyle.color;
contextMenu.style.fontFamily = baseStyle.fontFamily;
2024-05-07 09:26:16 -06:00
contextMenu.style.top = event.pageY + 'px';
contextMenu.style.left = event.pageX + 'px';
2022-10-07 22:34:17 -06:00
const contextMenuList = document.createElement('ul');
contextMenuList.className = 'context-menu-items';
contextMenu.append(contextMenuList);
2022-10-07 22:34:17 -06:00
menuEntries.forEach(function(entry) {
let contextMenuEntry = document.createElement('a');
contextMenuEntry.innerHTML = entry['name'];
2023-04-30 13:12:24 -06:00
contextMenuEntry.addEventListener("click", function() {
2022-10-07 22:34:17 -06:00
entry['func']();
});
contextMenuList.append(contextMenuEntry);
2022-10-07 22:34:17 -06:00
});
gradioApp().appendChild(contextMenu);
2022-10-07 22:34:17 -06:00
}
2022-12-14 19:01:32 -07:00
function appendContextMenuOption(targetElementSelector, entryName, entryFunction) {
2023-04-30 13:08:52 -06:00
var currentItems = menuSpecs.get(targetElementSelector);
2022-10-07 22:34:17 -06:00
if (!currentItems) {
currentItems = [];
2022-12-14 19:01:32 -07:00
menuSpecs.set(targetElementSelector, currentItems);
2022-10-07 22:34:17 -06:00
}
2022-12-14 19:01:32 -07:00
let newItem = {
id: targetElementSelector + '_' + uid(),
2022-10-07 22:34:17 -06:00
name: entryName,
func: entryFunction,
isNew: true
};
2022-10-07 22:34:17 -06:00
currentItems.push(newItem);
return newItem['id'];
}
2022-10-07 22:34:17 -06:00
function removeContextMenuOption(uid) {
2023-04-30 13:12:24 -06:00
menuSpecs.forEach(function(v) {
2022-10-07 22:46:42 -06:00
let index = -1;
v.forEach(function(e, ei) {
if (e['id'] == uid) {
index = ei;
}
2022-10-07 22:46:42 -06:00
});
if (index >= 0) {
v.splice(index, 1);
}
});
2022-10-07 22:34:17 -06:00
}
2022-10-07 22:34:17 -06:00
function addContextMenuEventListener() {
if (eventListenerApplied) {
return;
}
gradioApp().addEventListener("click", function(e) {
if (!e.isTrusted) {
2022-10-07 22:34:17 -06:00
return;
}
2022-10-07 22:34:17 -06:00
let oldMenu = gradioApp().querySelector('#context-menu');
if (oldMenu) {
oldMenu.remove();
}
});
2024-05-01 12:50:46 -06:00
['contextmenu', 'touchstart'].forEach((eventType) => {
gradioApp().addEventListener(eventType, function(e) {
let ev = e;
if (eventType.startsWith('touch')) {
if (e.touches.length !== 2) return;
ev = e.touches[0];
}
let oldMenu = gradioApp().querySelector('#context-menu');
if (oldMenu) {
oldMenu.remove();
2022-10-07 22:34:17 -06:00
}
2024-05-01 12:50:46 -06:00
menuSpecs.forEach(function(v, k) {
if (e.composedPath()[0].matches(k)) {
showContextMenu(ev, e.composedPath()[0], v);
e.preventDefault();
}
});
2022-10-07 22:34:17 -06:00
});
});
2022-10-07 22:34:17 -06:00
eventListenerApplied = true;
2022-10-07 22:34:17 -06:00
}
2022-10-07 22:34:17 -06:00
return [appendContextMenuOption, removeContextMenuOption, addContextMenuEventListener];
};
2023-05-18 00:59:10 -06:00
var initResponse = contextMenuInit();
var appendContextMenuOption = initResponse[0];
var removeContextMenuOption = initResponse[1];
var addContextMenuEventListener = initResponse[2];
2022-10-11 06:19:16 -06:00
(function() {
//Start example Context Menu Items
let generateOnRepeat = function(genbuttonid, interruptbuttonid) {
let genbutton = gradioApp().querySelector(genbuttonid);
let interruptbutton = gradioApp().querySelector(interruptbuttonid);
2022-10-07 22:34:17 -06:00
if (!interruptbutton.offsetParent) {
genbutton.click();
}
2022-10-11 06:19:16 -06:00
clearInterval(window.generateOnRepeatInterval);
window.generateOnRepeatInterval = setInterval(function() {
if (!interruptbutton.offsetParent) {
genbutton.click();
}
},
500);
};
let generateOnRepeat_txt2img = function() {
2022-10-11 06:19:16 -06:00
generateOnRepeat('#txt2img_generate', '#txt2img_interrupt');
};
let generateOnRepeat_img2img = function() {
2022-10-11 06:19:16 -06:00
generateOnRepeat('#img2img_generate', '#img2img_interrupt');
};
appendContextMenuOption('#txt2img_generate', 'Generate forever', generateOnRepeat_txt2img);
appendContextMenuOption('#txt2img_interrupt', 'Generate forever', generateOnRepeat_txt2img);
appendContextMenuOption('#img2img_generate', 'Generate forever', generateOnRepeat_img2img);
appendContextMenuOption('#img2img_interrupt', 'Generate forever', generateOnRepeat_img2img);
2022-12-14 19:01:32 -07:00
let cancelGenerateForever = function() {
clearInterval(window.generateOnRepeatInterval);
2022-10-07 22:34:17 -06:00
};
2022-10-11 06:19:16 -06:00
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);
2022-10-11 06:19:16 -06:00
})();
2022-10-07 22:34:17 -06:00
//End example Context Menu Items
2023-05-25 00:09:13 -06:00
onAfterUiUpdate(addContextMenuEventListener);