diff --git a/javascript/panoramaviewer-ext.js b/javascript/panoramaviewer-ext.js index fa5b911..28fcbab 100644 --- a/javascript/panoramaviewer-ext.js +++ b/javascript/panoramaviewer-ext.js @@ -246,11 +246,11 @@ function onGalleryDrop(ev) { const triggerGradio = (g, file) => { reader = new FileReader(); - if (! file instanceof Blob) { + if (!file instanceof Blob) { const blob = new Blob([file], { type: file.type }); file = blob } - + reader.onload = function (event) { g.value = event.target.result g.dispatchEvent(new Event('input')); @@ -289,11 +289,12 @@ function onGalleryDrop(ev) { document.addEventListener("DOMContentLoaded", () => { const onload = () => { + if (typeof gradioApp === "function") { let target = gradioApp().getElementById("txt2img_results") if (!target) { - setTimeout(onload, 5); + setTimeout(onload, 3000); return } target.addEventListener("drop", onGalleryDrop) @@ -310,17 +311,43 @@ document.addEventListener("DOMContentLoaded", () => { if (gradioApp().getElementById("panoviewer-iframe")) { openpanoramajs(); } else { - setTimeout(onload, 10); + setTimeout(onload, 3000); } + + /* do the toolbox tango */ + console.log("PanoViewer: toolbox tango") + gradioApp().querySelectorAll("#PanoramaViewer_ToolBox div ~ div").forEach((e) => { + console.log("PanoViewer: toolbox tango2") + + const options = { + attributes: true + } + + function callback(mutationList, observer) { + mutationList.forEach(function(mutation) { + if (mutation.type === 'attributes' && mutation.attributeName === 'class') { + console.log("PanoViewer: toolbox tango3") + mutation.target.parentElement.style.flex=target.classList.contains("!hidden")?"100%":"auto" + } + }) + } + + const observer = new MutationObserver(callback) + observer.observe(e, options) + }) + + + } else { - setTimeout(onload, 3); + setTimeout(onload, 3000); } }; onload(); }); +/* routine based on jerx/github, gpl3 */ function convertto_cubemap() { panorama_get_image_from_gallery() @@ -414,16 +441,16 @@ function convertto_cubemap() { finished = 0; workers = []; - outCanvas.toBlob(function(blob) { + outCanvas.toBlob(function (blob) { if (blob instanceof Blob) { data = { files: [blob] }; - var event = document.createEvent('MouseEvent'); - event.dataTransfer = data; - onGalleryDrop(event) + var event = document.createEvent('MouseEvent'); + event.dataTransfer = data; + onGalleryDrop(event) } else { - console.log ("no blob from toBlob?!") + console.log("no blob from toBlob?!") } }, 'image/png'); } diff --git a/scripts/panorama-3dviewer.py b/scripts/panorama-3dviewer.py index ab4b7dd..0e8de41 100644 --- a/scripts/panorama-3dviewer.py +++ b/scripts/panorama-3dviewer.py @@ -64,17 +64,18 @@ def after_component(component, **kwargs): else : suffix = "_dummy_suffix" -# if (suffix): - view_gallery_button = gr.Button ("Pano \U0001F310", elem_id="sendto_panogallery_button_"+suffix) # 🌐 - view_cube_button = gr.Button ("Pano \U0001F9CA", elem_id="sendto_panogallery_cube_button_"+ suffix) # 🧊 - view_gallery_button.click (None, [],None, _js="panorama_here(\""+iframesrc_gal+"\",\"\",\""+view_gallery_button.elem_id+"\")" ) - view_cube_button.click (None, [],None, _js="panorama_here(\""+iframesrc_gal+"\",\"cubemap\",\""+view_cube_button.elem_id+"\")" ) - - conv_cubemap_gallery_button = gr.Button ("Pano Convert \U0001F9CA", elem_id="convertto_cubemap_button"+suffix) # 🧊 - conv_cubemap_gallery_button.click (None, [],None, _js="convertto_cubemap" ) + with gr.Accordion("Panorama", open=False, elem_id="PanoramaViewer_ToolBox", visible=True): + with gr.Row(): + view_gallery_button = gr.Button ("Pano \U0001F310", elem_id="sendto_panogallery_button_"+suffix) # 🌐 + view_cube_button = gr.Button ("Pano \U0001F9CA", elem_id="sendto_panogallery_cube_button_"+ suffix) # 🧊 + view_gallery_button.click (None, [],None, _js="panorama_here(\""+iframesrc_gal+"\",\"\",\""+view_gallery_button.elem_id+"\")" ) + view_cube_button.click (None, [],None, _js="panorama_here(\""+iframesrc_gal+"\",\"cubemap\",\""+view_cube_button.elem_id+"\")" ) + + conv_cubemap_gallery_button = gr.Button ("Pano Convert \U0001F9CA", elem_id="convertto_cubemap_button"+suffix) # 🧊 + conv_cubemap_gallery_button.click (None, [],None, _js="convertto_cubemap" ) - gallery_input_ondrop = gr.Textbox(visible=False, elem_id="gallery_input_ondrop_"+ suffix) - gallery_input_ondrop.style(container=False) + gallery_input_ondrop = gr.Textbox(visible=False, elem_id="gallery_input_ondrop_"+ suffix) + gallery_input_ondrop.style(container=False) if (gallery_input_ondrop and txt2img_gallery_component): gallery_input_ondrop.change(fn=dropHandleGallery, inputs=[gallery_input_ondrop], outputs=[txt2img_gallery_component])