mirror of
https://github.com/anapnoe/stable-diffusion-webui-ux.git
synced 2026-09-15 03:08:45 +02:00
Merge branch 'master' of https://github.com/anapnoe/stable-diffusion-webui-ux
This commit is contained in:
anapnoe
+155
-174
@@ -1,192 +1,173 @@
|
||||
/* contextMenuInit = function () {
|
||||
let eventListenerApplied = false;
|
||||
let menuSpecs = new Map();
|
||||
/*
|
||||
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,
|
||||
const uid = function() {
|
||||
return Date.now().toString(36) + Math.random().toString(36).substring(2);
|
||||
};
|
||||
|
||||
currentItems.push(newItem);
|
||||
return newItem["id"];
|
||||
}
|
||||
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 removeContextMenuOption(uid) {
|
||||
menuSpecs.forEach(function (v) {
|
||||
let index = -1;
|
||||
v.forEach(function (e, ei) {
|
||||
if (e["id"] == uid) {
|
||||
index = ei;
|
||||
let oldMenu = gradioApp().querySelector('#context-menu');
|
||||
if (oldMenu) {
|
||||
oldMenu.remove();
|
||||
}
|
||||
});
|
||||
if (index >= 0) {
|
||||
v.splice(index, 1);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function addContextMenuEventListener(){
|
||||
if(eventListenerApplied){
|
||||
return;
|
||||
}
|
||||
gradioApp().addEventListener("click", function(e) {
|
||||
if(! e.isTrusted){
|
||||
return
|
||||
}
|
||||
let baseStyle = window.getComputedStyle(uiCurrentTab);
|
||||
|
||||
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()
|
||||
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";
|
||||
}
|
||||
})
|
||||
});
|
||||
eventListenerApplied=true
|
||||
|
||||
}
|
||||
if ((windowHeight - posy) < menuHeight) {
|
||||
contextMenu.style.top = windowHeight - menuHeight + "px";
|
||||
}
|
||||
|
||||
return [appendContextMenuOption, removeContextMenuOption, addContextMenuEventListener]
|
||||
}
|
||||
|
||||
|
||||
initResponse = contextMenuInit();
|
||||
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);
|
||||
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");
|
||||
});
|
||||
function appendContextMenuOption(targetElementSelector, entryName, entryFunction) {
|
||||
|
||||
let cancelGenerateForever = function () {
|
||||
clearInterval(window.generateOnRepeatInterval);
|
||||
};
|
||||
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);
|
||||
|
||||
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
|
||||
|
||||
onUiUpdate(function () {
|
||||
addContextMenuEventListener();
|
||||
onUiUpdate(function() {
|
||||
addContextMenuEventListener();
|
||||
});
|
||||
*/
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user