mirror of
https://github.com/anapnoe/stable-diffusion-webui-ux.git
synced 2026-09-18 16:55:15 +02:00
Update imageMaskFix.js
This commit is contained in:
anapnoe
+157
-149
@@ -55,176 +55,184 @@ onUiLoaded(function(){
|
||||
let spl_instances = [];
|
||||
let spl_pan_instances = [];
|
||||
let img2img_tab_index = 0;
|
||||
let intervalLastUIUpdate;
|
||||
const container = gradioApp().querySelector(".gradio-container");
|
||||
const observer = new MutationObserver(() =>
|
||||
gradioApp().querySelectorAll('div[data-testid="image"]').forEach(function (elem, i){
|
||||
let img_parent = elem.parentElement.querySelector('div[data-testid="image"] > div');
|
||||
let img = img_parent.querySelector('img');
|
||||
if(img){
|
||||
let img = img_parent.querySelector('img');
|
||||
if(img){
|
||||
if(img_src[i] != img.src){
|
||||
let tool_buttons = img_parent.querySelectorAll('button');
|
||||
//console.log(tool_buttons);
|
||||
if(tool_buttons.length > 2){
|
||||
let spl_parent = elem.parentElement;
|
||||
let spl;
|
||||
let spl_pan;
|
||||
let isPanning;
|
||||
let splid;
|
||||
img_parent.style.visibility = "hidden";
|
||||
|
||||
if(spl_parent.className != "spl-pane"){
|
||||
spl = new Spotlight();
|
||||
spl.init(spl_parent, "-"+spl_parent.id);
|
||||
if(intervalLastUIUpdate != null) clearInterval(intervalLastUIUpdate);
|
||||
intervalLastUIUpdate = setInterval(function() {
|
||||
clearInterval(intervalLastUIUpdate);
|
||||
img_parent.addEventListener('mouseup', function(e){
|
||||
img_src[i] = img.src;
|
||||
})
|
||||
|
||||
spl.addControl("undo", spl_undo_handler);
|
||||
spl_pan = spl.addControl("pan", spl_pan_handler);
|
||||
spl.addControl("brush", spl_brush_handler, brush_size);
|
||||
if(tool_buttons.length == 5){
|
||||
spl.addControl("color", spl_color_handler, color_box);
|
||||
}
|
||||
spl.addControl("clear",spl_clear_handler);
|
||||
let spl_parent = elem.parentElement;
|
||||
let spl;
|
||||
let spl_pan;
|
||||
let isPanning;
|
||||
let splid;
|
||||
|
||||
spl_instances[i] = spl;
|
||||
spl_pan_instances[i] = spl_pan;
|
||||
|
||||
}else{
|
||||
spl = spl_instances[i];
|
||||
spl_pan = spl_pan_instances[i];
|
||||
}
|
||||
|
||||
img_src[i] = img.src;
|
||||
//console.log("NEWIMAGE");
|
||||
|
||||
function spl_undo_handler(e) {
|
||||
tool_buttons[0].click();
|
||||
}
|
||||
|
||||
function spl_clear_handler(e){
|
||||
tool_buttons[2].click();
|
||||
spl.panzoom(false);
|
||||
img_parent.classList.remove("no-point-events");
|
||||
img_parent.parentElement.classList.remove("move");
|
||||
document.removeEventListener('wheel', preventDefault, false);
|
||||
setTimeout(function() {
|
||||
spl.close(false, true);
|
||||
img_parent.style.flexGrow = "1";
|
||||
img_src[i] = "";
|
||||
elem.style.transform = "none";
|
||||
}, 200);
|
||||
|
||||
}
|
||||
|
||||
function spl_color_handler(e){}
|
||||
function spl_brush_handler(e){}
|
||||
|
||||
function preventDefault(e) {
|
||||
e = e || window.event
|
||||
if (e.preventDefault) {
|
||||
e.preventDefault()
|
||||
}
|
||||
e.returnValue = false
|
||||
}
|
||||
|
||||
function pan_toggle(val, target){
|
||||
isPanning = val;
|
||||
target.classList.toggle("on", isPanning);
|
||||
spl.panzoom(val);
|
||||
|
||||
if(isPanning){
|
||||
img_parent.classList.add("no-point-events");
|
||||
img_parent.parentElement.classList.add("move");
|
||||
document.addEventListener('wheel', preventDefault, {passive: false});
|
||||
if(spl_parent.className != "spl-pane"){
|
||||
spl = new Spotlight();
|
||||
spl.init(spl_parent, "-"+spl_parent.id);
|
||||
|
||||
spl.addControl("undo", spl_undo_handler);
|
||||
spl_pan = spl.addControl("pan", spl_pan_handler);
|
||||
spl.addControl("brush", spl_brush_handler, brush_size);
|
||||
if(tool_buttons.length == 5){
|
||||
spl.addControl("color", spl_color_handler, color_box);
|
||||
}
|
||||
spl.addControl("clear",spl_clear_handler);
|
||||
|
||||
spl_instances[i] = spl;
|
||||
spl_pan_instances[i] = spl_pan;
|
||||
|
||||
}else{
|
||||
spl = spl_instances[i];
|
||||
spl_pan = spl_pan_instances[i];
|
||||
}
|
||||
|
||||
img_src[i] = img.src;
|
||||
//console.log("NEWIMAGE");
|
||||
|
||||
function spl_undo_handler(e) {
|
||||
tool_buttons[0].click();
|
||||
}
|
||||
|
||||
function spl_clear_handler(e){
|
||||
tool_buttons[2].click();
|
||||
spl.panzoom(false);
|
||||
img_parent.classList.remove("no-point-events");
|
||||
img_parent.parentElement.classList.remove("move");
|
||||
document.removeEventListener('wheel', preventDefault, false);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function spl_pan_handler(e){
|
||||
isPanning = !isPanning;
|
||||
pan_toggle(isPanning, this);
|
||||
}
|
||||
|
||||
function update_color(listener){
|
||||
let input_color = img_parent.querySelector("input[type='color']");
|
||||
let spl = img_parent.parentElement.parentElement.parentElement.parentElement.parentElement;
|
||||
let spl_color = spl.querySelector(".spl-color input[type='color']");
|
||||
spl_color.value = input_color.value;
|
||||
|
||||
if(listener){
|
||||
spl_color.addEventListener("input", function(ev) {
|
||||
input_color.value = ev.target.value;
|
||||
updateInput(input_color);
|
||||
pan_toggle(false, spl_pan);
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function update_brush(listener){
|
||||
let input_range = img_parent.querySelector("input[type='range']");
|
||||
let spl = img_parent.parentElement.parentElement.parentElement.parentElement.parentElement;
|
||||
let spl_brush = spl.querySelector(".spl-brush input[type='range']");
|
||||
spl_brush.value = input_range.value;
|
||||
|
||||
if(listener){
|
||||
spl_brush.addEventListener("input", function(ev) {
|
||||
input_range.value = ev.target.value;
|
||||
updateInput(input_range);
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function init_drawing_tools(){
|
||||
|
||||
let input_color = img_parent.querySelector("input[type='color']");
|
||||
if(!input_color){
|
||||
let tbcolor = img_parent.querySelector("button[aria-label='Select brush color']");
|
||||
if(tbcolor){
|
||||
tbcolor.click();
|
||||
setTimeout(function() { update_color(true); }, 100);
|
||||
}
|
||||
}else{
|
||||
setTimeout(function() { update_color(false);}, 100);
|
||||
}
|
||||
|
||||
let input_range = img_parent.querySelector("input[type='range']");
|
||||
if(!input_range){
|
||||
let tbrange = img_parent.querySelector("button[aria-label='Use brush']");
|
||||
document.removeEventListener('wheel', preventDefault, false);
|
||||
setTimeout(function() {
|
||||
spl.close(false, true);
|
||||
img_parent.style.flexGrow = "1";
|
||||
img_src[i] = "";
|
||||
elem.style.transform = "none";
|
||||
}, 200);
|
||||
|
||||
if(tbrange){
|
||||
tbrange.click();
|
||||
setTimeout(function() { update_brush(true); }, 100);
|
||||
}
|
||||
|
||||
function spl_color_handler(e){}
|
||||
function spl_brush_handler(e){}
|
||||
|
||||
function preventDefault(e) {
|
||||
e = e || window.event
|
||||
if (e.preventDefault) {
|
||||
e.preventDefault()
|
||||
}
|
||||
e.returnValue = false
|
||||
}
|
||||
|
||||
function pan_toggle(val, target){
|
||||
isPanning = val;
|
||||
target.classList.toggle("on", isPanning);
|
||||
spl.panzoom(val);
|
||||
|
||||
if(isPanning){
|
||||
img_parent.classList.add("no-point-events");
|
||||
img_parent.parentElement.classList.add("move");
|
||||
document.addEventListener('wheel', preventDefault, {passive: false});
|
||||
}else{
|
||||
img_parent.classList.remove("no-point-events");
|
||||
img_parent.parentElement.classList.remove("move");
|
||||
document.removeEventListener('wheel', preventDefault, false);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function spl_pan_handler(e){
|
||||
isPanning = !isPanning;
|
||||
pan_toggle(isPanning, this);
|
||||
}
|
||||
|
||||
function update_color(listener){
|
||||
let input_color = img_parent.querySelector("input[type='color']");
|
||||
let spl = img_parent.parentElement.parentElement.parentElement.parentElement.parentElement;
|
||||
let spl_color = spl.querySelector(".spl-color input[type='color']");
|
||||
spl_color.value = input_color.value;
|
||||
|
||||
if(listener){
|
||||
spl_color.addEventListener("input", function(ev) {
|
||||
input_color.value = ev.target.value;
|
||||
updateInput(input_color);
|
||||
pan_toggle(false, spl_pan);
|
||||
})
|
||||
}
|
||||
}else{
|
||||
setTimeout(function() { update_brush(false);}, 100);
|
||||
}
|
||||
|
||||
}
|
||||
function update_brush(listener){
|
||||
let input_range = img_parent.querySelector("input[type='range']");
|
||||
let spl = img_parent.parentElement.parentElement.parentElement.parentElement.parentElement;
|
||||
let spl_brush = spl.querySelector(".spl-brush input[type='range']");
|
||||
spl_brush.value = input_range.value;
|
||||
|
||||
if(listener){
|
||||
spl_brush.addEventListener("input", function(ev) {
|
||||
input_range.value = ev.target.value;
|
||||
updateInput(input_range);
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
let w = img.naturalWidth;
|
||||
let h = img.naturalHeight;
|
||||
img_parent.style.width = `${w}px`;
|
||||
img_parent.style.height = `${h}px`;
|
||||
|
||||
spl.show([{
|
||||
media: "node",
|
||||
src: elem,
|
||||
//autohide: true,
|
||||
//control: ["pan","clear","undo","fullscreen","autofit","zoom-in","zoom-out","close"],
|
||||
class: "relative",
|
||||
}],
|
||||
);
|
||||
function init_drawing_tools(){
|
||||
|
||||
let input_color = img_parent.querySelector("input[type='color']");
|
||||
if(!input_color){
|
||||
let tbcolor = img_parent.querySelector("button[aria-label='Select brush color']");
|
||||
if(tbcolor){
|
||||
tbcolor.click();
|
||||
setTimeout(function() { update_color(true); }, 100);
|
||||
}
|
||||
}else{
|
||||
setTimeout(function() { update_color(false);}, 100);
|
||||
}
|
||||
|
||||
let input_range = img_parent.querySelector("input[type='range']");
|
||||
if(!input_range){
|
||||
let tbrange = img_parent.querySelector("button[aria-label='Use brush']");
|
||||
|
||||
if(tbrange){
|
||||
tbrange.click();
|
||||
setTimeout(function() { update_brush(true); }, 100);
|
||||
}
|
||||
}else{
|
||||
setTimeout(function() { update_brush(false);}, 100);
|
||||
}
|
||||
|
||||
img_parent.style.flexGrow = "0";
|
||||
pan_toggle(false, spl_pan);
|
||||
spl.panzoom(false);
|
||||
setTimeout(function() { init_drawing_tools(); }, 500);
|
||||
|
||||
img.addEventListener('mouseup', function(e){
|
||||
img_src[i] = img.src;
|
||||
})
|
||||
}
|
||||
|
||||
let w = img.naturalWidth;
|
||||
let h = img.naturalHeight;
|
||||
img_parent.style.width = `${w}px`;
|
||||
img_parent.style.height = `${h}px`;
|
||||
|
||||
spl.show([{
|
||||
media: "node",
|
||||
src: elem,
|
||||
//autohide: true,
|
||||
//control: ["pan","clear","undo","fullscreen","autofit","zoom-in","zoom-out","close"],
|
||||
class: "relative",
|
||||
}],
|
||||
);
|
||||
|
||||
img_parent.style.flexGrow = "0";
|
||||
pan_toggle(false, spl_pan);
|
||||
spl.panzoom(false);
|
||||
setTimeout(function() { init_drawing_tools(); }, 500);
|
||||
img_parent.style.visibility = "visible";
|
||||
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user