From 1e6d9ad989139467c1c8f557e04f0d2ab1700baa Mon Sep 17 00:00:00 2001 From: anapnoe <124302297+anapnoe@users.noreply.github.com> Date: Tue, 14 Mar 2023 14:32:52 +0200 Subject: [PATCH] added zoom functionality to tile images in spotlight gallery --- html/spotlight.css | 6 ++ javascript/imageviewer.js | 123 ++++++++++++++++++++++++++++++++------ 2 files changed, 111 insertions(+), 18 deletions(-) diff --git a/html/spotlight.css b/html/spotlight.css index 19e746d5..c5f52159 100644 --- a/html/spotlight.css +++ b/html/spotlight.css @@ -127,6 +127,12 @@ .spl-pane.hide img { display:none !important; } +.spl-pane.hide { + background-size: 100%; + transition: background-size 0.65s cubic-bezier(0.3, 1, 0.3, 1) !important; + will-change: background-size !important; + transform: translate(0, 0) !important; +} .spl-header { position: absolute; top: 0; diff --git a/javascript/imageviewer.js b/javascript/imageviewer.js index f9a70d8f..c35c5e83 100644 --- a/javascript/imageviewer.js +++ b/javascript/imageviewer.js @@ -296,27 +296,78 @@ let tile; let slide = 0; let gallery = []; let fullImg_src; +let control = ["like","tile","page","fullscreen","autofit","zoom-in","zoom-out","close","download","prev","next"]; + +let img_browser; +let img_file_name; + + +let spl_pane; +let spl_zoom_out; +let spl_zoom_in; + + +function tile_zoom_update(val){ + let current_tile_state_size = gallery[slide].tile_size; + current_tile_state_size += (val * 5); + current_tile_state_size = Math.max(5, Math.min(100,current_tile_state_size)); + spl_pane.style.setProperty('background-size', current_tile_state_size+"%"); + gallery[slide].tile_size = current_tile_state_size; +} + +function wheel_listener(event){ + let delta = event["deltaY"]; + delta = (delta < 0 ? 1 : delta ? -1 : 0) * 0.5; + tile_zoom_update(delta); +} +function tile_zoom_in(event){ + tile_zoom_update(1); +} +function tile_zoom_out(event){ + tile_zoom_update(-1); +} + +function removeTileEventListeners(){ + if(spl_pane){ + spl_pane.removeEventListener("wheel", wheel_listener); + spl_zoom_out.removeEventListener("click", tile_zoom_out); + spl_zoom_in.removeEventListener("click", tile_zoom_in); + } + return true; +} function tile_handler(event) { - const current_tile_state = !gallery[slide].tile; + const current_tile_state = !gallery[slide].tile; gallery[slide].tile = current_tile_state; + const current_tile_state_size = gallery[slide].tile_size; this.classList.toggle("on"); - - const spl_img = document.querySelector("#spotlight .spl-pane img"); - const spl_pane = spl_img.parentElement; + + // remove last referrer listeners from previous pane + removeTileEventListeners(); + + const spl_img = document.querySelector("#spotlight .spl-pane img"); + spl_pane = spl_img.parentElement; + spl_zoom_out = document.querySelector("#spotlight .spl-zoom-out"); + spl_zoom_in = document.querySelector("#spotlight .spl-zoom-in"); if(current_tile_state){ spl_pane.classList.add("hide"); spl_pane.style.setProperty('background-image', `url(${spl_img.src})`); - spl_pane.style.setProperty('background-position', "center"); + spl_pane.style.setProperty('background-position', "center"); + spl_pane.style.setProperty('background-size', current_tile_state_size+"%"); + spl_pane.removeEventListener("wheel", wheel_listener); + spl_pane.addEventListener("wheel", wheel_listener); + spl_zoom_out.addEventListener("click", tile_zoom_out); + spl_zoom_in.addEventListener("click", tile_zoom_in); + } else { spl_pane.classList.remove("hide"); spl_pane.style.setProperty('background-image', 'none'); - Spotlight.autofit(true); + Spotlight.zoom(0.0); + removeTileEventListeners(); } } - function like_handler(event){ const current_like_state = !gallery[slide].like; @@ -324,7 +375,9 @@ function like_handler(event){ this.classList.toggle("on"); if(current_like_state){ - // add to favorites ... + // add to favorites ... + //img_file_name.value = gallery[slide].src; + //console.log(gallery[slide].src); } else{ // remove from favorites ... @@ -335,13 +388,15 @@ function createGallerySpotlight(src) { slide = 0; gallery = []; - gradioApp().querySelectorAll('.grid img.w-full.object-contain').forEach(function (elem, i){ + + 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); gallery[i] = { src: elem.src, like: false, - tile:false + tile:false, + tile_size: 50 } }) @@ -350,15 +405,17 @@ function createGallerySpotlight(src) { class: "sd-gallery", index: slide, //control: ["like","page","theme","fullscreen","autofit","zoom-in","zoom-out","close","download","play","prev","next"], - control: ["tile","like","page","fullscreen","autofit","zoom-in","zoom-out","close","download","prev","next"], + control: control, //animation: animation, //onshow: function(index){ //like = Spotlight.addControl("like", handler); //}, onchange: function(index, options){ slide = index - 1; - like.classList.toggle("on", gallery[slide].like); tile.classList.toggle("on", gallery[slide].tile); + //if(img_browser){ + like.classList.toggle("on", gallery[slide].like); + //} }, onclose: function(index){ //Spotlight.removeControl("like"); @@ -368,24 +425,52 @@ function createGallerySpotlight(src) { //assign(options, modifier); Spotlight.show(gallery, options); + } - function fullImg_click_handler(e){ e.stopPropagation(); e.preventDefault(); createGallerySpotlight(fullImg_src); } -onUiUpdate(function() { - - const fullImg_preview = gradioApp().querySelector('.modify-upload + img.w-full.object-contain'); +let intervalUiUpdateIViewer; +function onUiUpdateIViewer(){ + clearInterval(intervalUiUpdateIViewer); + //update_performant_inputs(selectedTabItemId); + const 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 + fullImg_preview.addEventListener('click', fullImg_click_handler, true );//bubbling phase + + /* + // 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 + // and add them to favorites or delete the ones that don't like on the spot + const img_browser = gradioApp().querySelector('[id$="2img_images_history"]'); + const tbname = selectedTabItemId.split("_")[1]; + if(img_browser && tbname ==("txt2img" || "img2img")){ + const images_history = gradioApp().querySelector('[id$="'+tbname+'_images_history"]'); + const history_button_panel = images_history.querySelector('[id$="'+tbname+'_images_history_button_panel"]'); + const labels = images_history.querySelectorAll('label.block span'); + for(let i=0;i