From a25cab7c8953244211e11c71823a0464b6b1fbf7 Mon Sep 17 00:00:00 2001 From: anapnoe <124302297+anapnoe@users.noreply.github.com> Date: Mon, 27 Mar 2023 16:18:24 +0300 Subject: [PATCH] zoom pan and full screen features for sketch, inpaint, inpaint sketch --- .../sd_theme_editor/javascript/ui_theme.js | 8 +- html/footer.html | 23 +- javascript/imageMaskFix.js | 235 +++++++++++++++++- javascript/imageviewer.js | 100 ++++---- javascript/spotlight.js | 7 +- javascript/ui.js | 18 +- style.css | 95 ++++--- 7 files changed, 358 insertions(+), 128 deletions(-) diff --git a/extensions-builtin/sd_theme_editor/javascript/ui_theme.js b/extensions-builtin/sd_theme_editor/javascript/ui_theme.js index 07bef7f6..f8098c3f 100644 --- a/extensions-builtin/sd_theme_editor/javascript/ui_theme.js +++ b/extensions-builtin/sd_theme_editor/javascript/ui_theme.js @@ -284,7 +284,7 @@ function initTheme() { gradioApp().querySelectorAll('#ui_theme_settings input').forEach((elem) => { - elem.addEventListener("change", function(e) { + elem.addEventListener("input", function(e) { let celem = e.currentTarget; let val = e.currentTarget.value; @@ -379,7 +379,7 @@ function initTheme() { let hsloffset = [0,0,0]; const hue = gradioApp().querySelectorAll('#theme_hue input').forEach((elem) => { - elem.addEventListener("change", function(e) { + elem.addEventListener("input", function(e) { e.preventDefault(); e.stopPropagation(); hsloffset[0] = e.currentTarget.value; @@ -388,7 +388,7 @@ function initTheme() { }) const sat = gradioApp().querySelectorAll('#theme_sat input').forEach((elem) => { - elem.addEventListener("change", function(e) { + elem.addEventListener("input", function(e) { e.preventDefault(); e.stopPropagation(); hsloffset[1] = e.currentTarget.value; @@ -397,7 +397,7 @@ function initTheme() { }) const brt = gradioApp().querySelectorAll('#theme_brt input').forEach((elem) => { - elem.addEventListener("change", function(e) { + elem.addEventListener("input", function(e) { e.preventDefault(); e.stopPropagation(); hsloffset[2] = e.currentTarget.value; diff --git a/html/footer.html b/html/footer.html index d4b6f3d0..80d95191 100644 --- a/html/footer.html +++ b/html/footer.html @@ -41,31 +41,16 @@
  • -
    +
    - - - - - - - - - - - - - - - - - + -
    +
    thanks for your support +

    This project needs your support, if you like it consider some small donation enjoy!

    • diff --git a/javascript/imageMaskFix.js b/javascript/imageMaskFix.js index bc04fb54..0439c926 100644 --- a/javascript/imageMaskFix.js +++ b/javascript/imageMaskFix.js @@ -46,16 +46,235 @@ function imageMaskResize() { onUiUpdate(() => imageMaskResize()); */ + + let img2img_tab_index = 0; +let img2img_tab_tool_buttons; + +let isPanning; +let parent_container_img; +let spotlight_sketch; +let spotlight_inpaint; +let spotlight_inpaint_sketch; +let spotlight; + +let curr_src = []; + +let intervalLastUIUpdate; + +let sketch_pan; +let inpaint_pan; +let inpaint_sketch_pan; +let curr_pan; + +function common_undo_handler(e) { + img2img_tab_tool_buttons[0].click(); +} +function common_clear_handler(e){ + img2img_tab_tool_buttons[1].click(); +} + +function common_color_handler(e){ + let cb = parent_container_img.querySelector("input[type='color']"); + if(!cb){ + img2img_tab_tool_buttons[3].click(); + e.target.addEventListener("input", function(ev) { + cb = parent_container_img.querySelector("input[type='color']"); + cb.value = ev.target.value; + updateInput(cb); + pan_toggle(false, curr_pan); + }) + } +} + +function common_brush_handler(e){ + let cb = parent_container_img.querySelector("input[type='range']"); + if(!cb){ + img2img_tab_tool_buttons[2].click(); + e.target.addEventListener("input", function(ev) { + cb = parent_container_img.querySelector("input[type='range']"); + cb.value = ev.target.value; + updateInput(cb); + //pan_toggle(false, curr_pan); + }) + } +} + +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); + spotlight.panzoom(val); + + if(isPanning){ + parent_container_img.classList.add("no-point-events"); + parent_container_img.parentElement.classList.add("move"); + document.addEventListener('wheel', preventDefault, {passive: false}); + }else{ + parent_container_img.classList.remove("no-point-events"); + parent_container_img.parentElement.classList.remove("move"); + document.removeEventListener('wheel', preventDefault, false); + } + +} + +function common_pan_handler(e){ + isPanning = !isPanning; + pan_toggle(isPanning, this); +} + + +onUiLoaded(function(){ + + const color_box = ''; + const brush_size = ''; + + spotlight_sketch = new Spotlight(); + const spotlight_sketch_parent = gradioApp().querySelector("#img2img_sketch"); + spotlight_sketch.init(spotlight_sketch_parent, "-sketch"); + spotlight_sketch.addControl("undo", common_undo_handler); + sketch_pan = spotlight_sketch.addControl("pan", common_pan_handler); + spotlight_sketch.addControl("brush", common_brush_handler, brush_size); + spotlight_sketch.addControl("color", common_color_handler, color_box); + spotlight_sketch.addControl("clear",common_clear_handler); + + spotlight_inpaint = new Spotlight(); + const spotlight_inpaint_parent = gradioApp().querySelector("#img2maskimg"); + spotlight_inpaint.init(spotlight_inpaint_parent, "-inpaint"); + spotlight_inpaint.addControl("undo", common_undo_handler); + inpaint_pan = spotlight_inpaint.addControl("pan", common_pan_handler); + spotlight_inpaint.addControl("brush", common_brush_handler, brush_size); + spotlight_inpaint.addControl("clear",common_clear_handler); + + spotlight_inpaint_sketch = new Spotlight(); + const spotlight_inpaint_sketch_parent = gradioApp().querySelector("#inpaint_sketch"); + spotlight_inpaint_sketch.init(spotlight_inpaint_sketch_parent, "-inpaint-sketch"); + spotlight_inpaint_sketch.addControl("undo", common_undo_handler); + inpaint_sketch_pan = spotlight_inpaint_sketch.addControl("pan", common_pan_handler); + spotlight_inpaint_sketch.addControl("brush", common_brush_handler, brush_size); + spotlight_inpaint_sketch.addControl("color", common_color_handler, color_box); + spotlight_inpaint_sketch.addControl("clear",common_clear_handler); +}) + + onUiUpdate(function() { + //clearInterval(intervalLastUIUpdate); const img2img_tab = gradioApp().querySelector('#img2img_img2img_tab'); - if(img2img_tab){ + if(img2img_tab && selectedTabItemId == "tab_img2img"){ + //console.log("UIMASKUPDATE"); + const img2img_tab_index = get_img2img_tab_index()[0]; + if(img2img_tab_index > 3 || img2img_tab_index == 0) return; + + let tabid; + let copytoId; + + if(img2img_tab_index == 1){ + tabid = "#img2img_img2img_sketch_tab";// #img2img_sketch"; + spotlight = spotlight_sketch; + curr_pan = sketch_pan; + }else if(img2img_tab_index == 2){ + tabid = "#img2img_inpaint_tab";// #img2maskimg"; + spotlight = spotlight_inpaint; + curr_pan = inpaint_pan; + }else if(img2img_tab_index == 3){ + tabid = "#img2img_inpaint_sketch_tab";// #inpaint_sketch"; + spotlight = spotlight_inpaint_sketch; + curr_pan = inpaint_sketch_pan; + } + + + const parent_img2img_tab_img = gradioApp().querySelector(tabid); + //const parent_img2img_tab_copy_to = parent_img2img_tab_img.querySelector(copytoId); + const spotlight_parent = parent_img2img_tab_img.querySelector('div[data-testid="image"]'); + parent_container_img = parent_img2img_tab_img.querySelector('div[data-testid="image"] > div'); + const img2img_tab_img = parent_container_img.querySelector('img'); + img2img_tab_tool_buttons = parent_container_img.querySelectorAll('button'); + + + if(img2img_tab_img){ + pan_toggle(false, curr_pan); + spotlight.panzoom(false); + } + + function getImgSync(image){ + let c_src; + + if(curr_src[img2img_tab_index] != image.src){ + //console.log("NEWIMAGE"); + curr_src[img2img_tab_index] = image.src; + + let w = image.naturalWidth; + let h = image.naturalHeight; + parent_container_img.style.width = `${w}px`; + parent_container_img.style.height = `${h}px`; + + spotlight.show([{ + media: "node", + src: spotlight_parent, + autohide: true, + control: ["pan","clear","undo","fullscreen","autofit","zoom-in","zoom-out","close"], + class: "relative", + }], + ); + + parent_container_img.style.flexGrow = "0"; + } + } + + const getImage = async (image) => { + if(!image){ + if(spotlight.panel){ + spotlight.close(false, true); + parent_container_img.style.flexGrow = "1"; + curr_src[img2img_tab_index] = ""; + spotlight_parent.style = ""; + + } + }else if (image.complete) { + return getImgSync(image); + }else{ + return new Promise(resolve => { + image.onload = () => { + resolve(getImgSync(image)); + }; + }); + } + }; + + getImage(img2img_tab_img); + + } + +}) + +/* +function onLastUIUpdate(){ + clearInterval(intervalLastUIUpdate); + const img2img_tab = gradioApp().querySelector('#img2img_img2img_tab'); + if(img2img_tab && selectedTabItemId=="tab_img2img"){ const current_img2img_tab_index = get_img2img_tab_index()[0]; //if(img2img_tab_index != current_img2img_tab_index){ - //console.log(current_img2img_tab_index); - if(current_img2img_tab_index > 3) return; + console.log(current_img2img_tab_index); + if(current_img2img_tab_index > 3 || current_img2img_tab_index == 0) return; img2img_tab_index = current_img2img_tab_index; - const parent_img2img_tab_img = gradioApp().querySelector('#mode_img2img > div:nth-child('+(img2img_tab_index+2)+') div[data-testid="image"] > div'); + let tabid; + + if(img2img_tab_index == 1){ + tabid = "#img2img_img2img_sketch_tab";// #img2img_sketch"; + }else if(img2img_tab_index == 2){ + tabid = "#img2img_inpaint_tab";// #img2maskimg"; + }else if(img2img_tab_index == 3){ + tabid = "#img2img_inpaint_sketch_tab";// #inpaint_sketch"; + } + //const parent_img2img_tab_img = gradioApp().querySelector('#mode_img2img > div:nth-child('+(img2img_tab_index+2)+') div[data-testid="image"] > div'); + const parent_img2img_tab_img = gradioApp().querySelector('#mode_img2img '+tabid+' div[data-testid="image"] > div'); const img2img_tab_img = parent_img2img_tab_img.querySelector('img'); if(img2img_tab_img){ parent_img2img_tab_img.style.flexGrow = "0"; @@ -70,4 +289,10 @@ onUiUpdate(function() { } //} } -}) +} +*/ +/* onUiUpdate(function() { + if(intervalLastUIUpdate != null) clearInterval(intervalLastUIUpdate); + intervalLastUIUpdate = setInterval(onLastUIUpdate, 1000); +}) */ + diff --git a/javascript/imageviewer.js b/javascript/imageviewer.js index 0d4c7bd6..1f391cbf 100644 --- a/javascript/imageviewer.js +++ b/javascript/imageviewer.js @@ -291,18 +291,14 @@ function showGalleryImage() { //need to clean up the old code } -let isDomLoaded; - let like; let tile; -let undo; -let clear; -let pan; let slide = 0; let gallery = []; let fullImg_src; -let control = ["pan","undo","clear","like","tile","page","fullscreen","autofit","zoom-in","zoom-out","close","download","prev","next"]; +//let control = ["pan","undo","like","tile","page","fullscreen","autofit","zoom-in","zoom-out","clear","close","download","prev","next"]; +let control = ["like","tile","page","fullscreen","autofit","zoom-in","zoom-out","clear","close","download","prev","next"]; let img_browser; let img_file_name; @@ -310,6 +306,8 @@ let img_file_name; let spl_pane; let spl_zoom_out; let spl_zoom_in; +let spotlight_gallery; + function tile_zoom_update(val){ let current_tile_state_size = gallery[slide].tile_size; @@ -332,15 +330,13 @@ function tile_zoom_out(event){ } function removeTile(){ - spl_pane.removeEventListener("wheel", tile_wheel); spl_zoom_out.removeEventListener("click", tile_zoom_out); spl_zoom_in.removeEventListener("click", tile_zoom_in); spl_pane.classList.remove("hide"); spl_pane.style.setProperty('background-image', 'none'); - Spotlight.zoom(0.0); - + spotlight_gallery.zoom(0.0); } function addTile(spl_img){ @@ -355,7 +351,6 @@ function addTile(spl_img){ if(spl_img){ spl_pane.style.setProperty('background-image', `url(${spl_img.src})`); } - } function tile_handler(event) { @@ -366,7 +361,7 @@ function tile_handler(event) { this.classList.toggle("on"); if(current_tile_state){ - const spl_img = gradioApp().querySelector("#spotlight .spl-pane img"); + const spl_img = gradioApp().querySelector("#spotlight-gal .spl-pane img"); addTile(spl_img); } else { removeTile(); @@ -389,17 +384,19 @@ function like_handler(event){ } -function createGallerySpotlight(src) { - +function createGallerySpotlight() { + + //console.log("clicked"); slide = 0; gallery = []; - gradioApp().querySelectorAll("#"+selectedTabItemId+' .grid img.w-full.object-contain').forEach(function (elem, i){ elem.setAttribute("gal-id", i); - if(src == elem.src) slide = (i+1); + if(fullImg_src == elem.src) slide = (i+1); gallery[i] = { src: elem.src, + title: "Seed:" + elem.src, + //description: "This is a description.", like: false, tile:false, tile_size: 50, @@ -413,9 +410,9 @@ function createGallerySpotlight(src) { //control: ["like","page","theme","fullscreen","autofit","zoom-in","zoom-out","close","download","play","prev","next"], control: control, //animation: animation, - //onshow: function(index){ - //like = Spotlight.addControl("like", handler); - //}, + onshow: function(index){ + + }, onchange: function(index, options){ slide = index - 1; tile.classList.toggle("on", gallery[slide].tile); @@ -424,11 +421,11 @@ function createGallerySpotlight(src) { //} - const current_tile_state = gallery[slide].tile; - spl_pane = gradioApp().querySelector("#spotlight .spl-pane:nth-child("+index+")"); - spl_zoom_out = gradioApp().querySelector("#spotlight .spl-zoom-out"); - spl_zoom_in = gradioApp().querySelector("#spotlight .spl-zoom-in"); + spl_pane = gradioApp().querySelector("#spotlight-gal .spl-pane:nth-child("+index+")"); + spl_zoom_out = gradioApp().querySelector("#spotlight-gal .spl-zoom-out"); + spl_zoom_in = gradioApp().querySelector("#spotlight-gal .spl-zoom-in"); + const current_tile_state = gallery[slide].tile; if(current_tile_state){ addTile(); }else{ @@ -437,47 +434,44 @@ function createGallerySpotlight(src) { }, onclose: function(index){ - //Spotlight.removeControl("like"); - gradioApp().querySelector('.grid .gallery-item:nth-child('+(slide+1)+')').click(); + gradioApp().querySelector("#"+selectedTabItemId+' .grid .gallery-item:nth-child('+(slide+1)+')').click(); } }; - + //assign(options, modifier); - Spotlight.show(gallery, options); - - Spotlight.removeControl("undo"); - Spotlight.removeControl("clear"); - Spotlight.removeControl("pan"); - - const spl_track = gradioApp().querySelector("#spotlight .spl-track"); - Spotlight.panzoom(spl_track, true); + spotlight_gallery.show(gallery, options); + spotlight_gallery.panzoom(true); } function fullImg_click_handler(e){ e.stopPropagation(); e.preventDefault(); - createGallerySpotlight(fullImg_src); + createGallerySpotlight(); } + let intervalUiUpdateIViewer; +function onUiHeaderTabUpdate(){ + if(intervalUiUpdateIViewer != null) clearInterval(intervalUiUpdateIViewer); + intervalUiUpdateIViewer = setInterval(onUiUpdateIViewer, 500); +} + +let fullImg_preview; function onUiUpdateIViewer(){ clearInterval(intervalUiUpdateIViewer); //update_performant_inputs(selectedTabItemId); - const fullImg_preview = gradioApp().querySelector("#"+selectedTabItemId+' .modify-upload + img.w-full.object-contain'); + + //fullImg_preview = gradioApp().querySelector('#'+selectedTabItemId+' [id$="2img_results"] .modify-upload + img.w-full.object-contain'); + fullImg_preview = gradioApp().querySelector('#'+selectedTabItemId+' .modify-upload + img.w-full.object-contain'); if(opts.js_modal_lightbox && fullImg_preview ) { - //console.log("GALLERY UPDATED"); + fullImg_src = fullImg_preview.src; fullImg_preview.removeEventListener('click', fullImg_click_handler ); fullImg_preview.addEventListener('click', fullImg_click_handler, true );//bubbling phase - if(!isDomLoaded){ - isDomLoaded = true; - tile = Spotlight.addControl("tile", tile_handler); - like = Spotlight.addControl("like", like_handler); - - } + /* // this is an idea to integrate image browser extension seamlesly, // without the need to change to the image browser tab extension users will be able to review images after generation @@ -506,21 +500,13 @@ onUiUpdate(function() { intervalUiUpdateIViewer = setInterval(onUiUpdateIViewer, 500); }) -document.addEventListener("DOMContentLoaded", function() { - //const head = gradioApp(); +onUiLoaded(function(){ + spotlight_gallery = new Spotlight(); + spotlight_gallery.init(gradioApp().querySelector('.gradio-container'), "-gal"); + tile = spotlight_gallery.addControl("tile", tile_handler); + like = spotlight_gallery.addControl("like", like_handler); +}) - /* - const head = document.head; - const link = document.createElement("link"); - link.type = "text/css"; - link.rel = "stylesheet"; - link.href = "file=html/spotlight.css"; - head.appendChild(link); - */ - Spotlight.init(); - - - - +document.addEventListener("DOMContentLoaded", function() { }); \ No newline at end of file diff --git a/javascript/spotlight.js b/javascript/spotlight.js index 510cfb57..9750d1b5 100644 --- a/javascript/spotlight.js +++ b/javascript/spotlight.js @@ -6,8 +6,7 @@ * https://github.com/nextapps-de/spotlight */ /* - this library was modified by anapnoe to work with stable-diffusion-ui-ux - the changes made were to root selector and an extra function was added to toggle - the pan zoom functionallity + this library was rewriten by anapnoe to work with https://github.com/anapnoe/stable-diffusion-webui-ux + it supports multi-instancing, enable-disable panzoom functionallity and input type tools */ -(function(){"use strict";function e(e,n,t){e.classList[t?"add":"remove"](n)}function n(e,n,t){t=""+t,e["_s_"+n]!==t&&(e.style.setProperty(n,t),e["_s_"+n]=t)}Object.assign||(Object.assign=function(e,n){for(var t,i=Object.keys(n),o=0;o