fix txt_fullfn

This commit is contained in:
Vladimir Mandic
2023-05-08 11:56:59 -04:00
parent 68b9b44015
commit 4d9fab4984
26 changed files with 1291 additions and 1268 deletions
+126 -128
View File
@@ -1,178 +1,176 @@
contextMenuInit = function () {
let eventListenerApplied = false;
const menuSpecs = new Map();
contextMenuInit = function(){
let eventListenerApplied=false;
let menuSpecs = new Map();
const uid = function(){
const uid = function () {
return Date.now().toString(36) + Math.random().toString(36).substr(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;
function showContextMenu(event, element, menuEntries) {
const posx = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
const posy = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
let oldMenu = gradioApp().querySelector('#context-menu')
if(oldMenu){
oldMenu.remove()
const oldMenu = gradioApp().querySelector('#context-menu');
if (oldMenu) {
oldMenu.remove();
}
let tabButton = uiCurrentTab
let baseStyle = window.getComputedStyle(tabButton)
const tabButton = uiCurrentTab;
const baseStyle = window.getComputedStyle(tabButton);
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 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')
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(e) {
entry['func']();
})
menuEntries.forEach((entry) => {
const contextMenuEntry = document.createElement('a');
contextMenuEntry.innerHTML = entry.name;
contextMenuEntry.addEventListener('click', (e) => {
entry.func();
});
contextMenuList.append(contextMenuEntry);
});
})
gradioApp().appendChild(contextMenu);
gradioApp().appendChild(contextMenu)
const menuWidth = contextMenu.offsetWidth + 4;
const menuHeight = contextMenu.offsetHeight + 4;
let menuWidth = contextMenu.offsetWidth + 4;
let menuHeight = contextMenu.offsetHeight + 4;
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
let windowWidth = window.innerWidth;
let windowHeight = window.innerHeight;
if ( (windowWidth - posx) < menuWidth ) {
contextMenu.style.left = windowWidth - menuWidth + "px";
if ((windowWidth - posx) < menuWidth) {
contextMenu.style.left = `${windowWidth - menuWidth}px`;
}
if ( (windowHeight - posy) < menuHeight ) {
contextMenu.style.top = windowHeight - menuHeight + "px";
if ((windowHeight - posy) < menuHeight) {
contextMenu.style.top = `${windowHeight - menuHeight}px`;
}
}
function appendContextMenuOption(targetElementSelector,entryName,entryFunction){
function appendContextMenuOption(targetElementSelector, entryName, entryFunction) {
currentItems = menuSpecs.get(targetElementSelector);
currentItems = menuSpecs.get(targetElementSelector)
if(!currentItems){
currentItems = []
menuSpecs.set(targetElementSelector,currentItems);
if (!currentItems) {
currentItems = [];
menuSpecs.set(targetElementSelector, currentItems);
}
let newItem = {'id':targetElementSelector+'_'+uid(),
'name':entryName,
'func':entryFunction,
'isNew':true}
const newItem = {
id: `${targetElementSelector}_${uid()}`,
name: entryName,
func: entryFunction,
isNew: true,
};
currentItems.push(newItem)
return newItem['id']
currentItems.push(newItem);
return newItem.id;
}
function removeContextMenuOption(uid){
menuSpecs.forEach(function(v,k) {
let index = -1
v.forEach(function(e,ei){if(e['id']==uid){index=ei}})
if(index>=0){
function removeContextMenuOption(uid) {
menuSpecs.forEach((v, k) => {
let index = -1;
v.forEach((e, ei) => { if (e.id == uid) { index = ei; } });
if (index >= 0) {
v.splice(index, 1);
}
})
});
}
function addContextMenuEventListener(){
if(eventListenerApplied){
function addContextMenuEventListener() {
if (eventListenerApplied) {
return;
}
gradioApp().addEventListener("click", function(e) {
let source = e.composedPath()[0]
if(source.id && source.id.indexOf('check_progress')>-1){
return
gradioApp().addEventListener('click', (e) => {
const source = e.composedPath()[0];
if (source.id && source.id.indexOf('check_progress') > -1) {
return;
}
let oldMenu = gradioApp().querySelector('#context-menu')
if(oldMenu){
oldMenu.remove()
const oldMenu = gradioApp().querySelector('#context-menu');
if (oldMenu) {
oldMenu.remove();
}
});
gradioApp().addEventListener("contextmenu", function(e) {
let oldMenu = gradioApp().querySelector('#context-menu')
if(oldMenu){
oldMenu.remove()
gradioApp().addEventListener('contextmenu', (e) => {
const 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()
return
menuSpecs.forEach((v, k) => {
if (e.composedPath()[0].matches(k)) {
showContextMenu(e, e.composedPath()[0], v);
e.preventDefault();
}
})
});
});
eventListenerApplied=true
eventListenerApplied = true;
}
return [appendContextMenuOption, removeContextMenuOption, addContextMenuEventListener]
}
return [appendContextMenuOption, removeContextMenuOption, addContextMenuEventListener];
};
initResponse = contextMenuInit();
appendContextMenuOption = initResponse[0];
removeContextMenuOption = initResponse[1];
appendContextMenuOption = initResponse[0];
removeContextMenuOption = initResponse[1];
addContextMenuEventListener = initResponse[2];
(function(){
//Start example Context Menu Items
let generateOnRepeat = function(genbuttonid,interruptbuttonid){
let genbutton = gradioApp().querySelector(genbuttonid);
const busy = document.getElementById('progressbar')?.style.display == "block"
if(!busy){
(function () {
// Start example Context Menu Items
const generateOnRepeat = function (genbuttonid, interruptbuttonid) {
const genbutton = gradioApp().querySelector(genbuttonid);
const busy = document.getElementById('progressbar')?.style.display == 'block';
if (!busy) {
genbutton.click();
}
clearInterval(window.generateOnRepeatInterval)
window.generateOnRepeatInterval = setInterval(function(){
const busy = document.getElementById('progressbar')?.style.display == "block"
if(!busy){
genbutton.click();
}
clearInterval(window.generateOnRepeatInterval);
window.generateOnRepeatInterval = setInterval(
() => {
const busy = document.getElementById('progressbar')?.style.display == 'block';
if (!busy) {
genbutton.click();
}
},
500,
);
};
appendContextMenuOption('#txt2img_generate', 'Generate forever', () => {
generateOnRepeat('#txt2img_generate', '#txt2img_interrupt');
});
appendContextMenuOption('#img2img_generate', 'Generate forever', () => {
generateOnRepeat('#img2img_generate', '#img2img_interrupt');
});
const 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);
appendContextMenuOption(
'#roll',
'Roll three',
() => {
const rollbutton = get_uiCurrentTabContent().querySelector('#roll');
setTimeout(() => { rollbutton.click(); }, 100);
setTimeout(() => { rollbutton.click(); }, 200);
setTimeout(() => { rollbutton.click(); }, 300);
},
500)
}
);
}());
// End example Context Menu Items
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)
appendContextMenuOption('#roll','Roll three',
function(){
let rollbutton = get_uiCurrentTabContent().querySelector('#roll');
setTimeout(function(){rollbutton.click()},100)
setTimeout(function(){rollbutton.click()},200)
setTimeout(function(){rollbutton.click()},300)
}
)
})();
//End example Context Menu Items
onUiUpdate(function(){
addContextMenuEventListener()
onUiUpdate(() => {
addContextMenuEventListener();
});