From be5ceb156e0c753b984aec15c22b3e6bb0801fa7 Mon Sep 17 00:00:00 2001 From: anapnoe <124302297+anapnoe@users.noreply.github.com> Date: Tue, 21 Mar 2023 02:39:05 +0200 Subject: [PATCH] ui_dispatch_input_release for all numeric fields and sliderss --- javascript/ui.js | 115 +++++++++++++++++++++++++++++++++++++++------- modules/shared.py | 3 +- 2 files changed, 101 insertions(+), 17 deletions(-) diff --git a/javascript/ui.js b/javascript/ui.js index b02111fc..516efb37 100644 --- a/javascript/ui.js +++ b/javascript/ui.js @@ -906,11 +906,94 @@ onUiUpdate(function(){ } }) //addModelCheckpoint(); + + + // input release component dispatcher + let active_clone_input = []; + function ui_input_release_component(elem){ + + if(active_clone_input.length > 0) return; + + let clone_num = elem.cloneNode(); + active_clone_input.push(clone_num); + + let parent = elem.parentElement; + let label = parent.querySelector("label"); + + clone_num.id = "num_clone"; + clone_num.value = elem.value; + parent.append(clone_num); + elem.classList.add("hidden"); + + clone_num.addEventListener('change', function (e) { + elem.value = clone_num.value; + updateInput(elem); + }) + + if(label){ + let comp_range = parent.parentElement.parentElement.querySelector("input[type='range']"); + let clone_range = comp_range.cloneNode(); + active_clone_input.push(clone_range); + + clone_range.id = comp_range.id+"_clone"; + clone_range.value = comp_range.value; + comp_range.parentElement.append(clone_range); + comp_range.classList.add("hidden"); + + clone_range.addEventListener('input', function (e) { + clone_num.value = e.target.value; + }) + clone_range.addEventListener('change', function (e) { + elem.value = clone_range.value; + updateInput(elem); + }) + clone_num.addEventListener('input', function (e) { + clone_range.value = e.target.value; + }) + } + } + function ui_input_release_handler(e){ + const len = active_clone_input.length; + if(len > 0){ + if(e.target.id.indexOf("_clone") == -1){ + for(var i=len-1; i>=0; i--){ + let relem = active_clone_input[i]; + relem.previousElementSibling.classList.remove("hidden"); + relem.remove(); + active_clone_input.pop(); + } + } + } + + let elem_type = e.target.tagName; + if(elem_type == "INPUT"){ + let elem = e.target; + if(elem.type == "number"){ + ui_input_release_component(elem); + }else if(elem.type == "range"){ + elem = e.target.parentElement.querySelector("input[type='number']"); + ui_input_release_component(elem); + } + } + } + function ui_dispatch_input_release(value){ + if(value){ + gradioApp().querySelector(".gradio-container").addEventListener('mouseover', ui_input_release_handler); + }else{ + gradioApp().querySelector(".gradio-container").removeEventListener('mouseover', ui_input_release_handler); + } + } + gradioApp().querySelector("#setting_ui_dispatch_input_release input").addEventListener('click', function (e) { + ui_dispatch_input_release(e.target.checked); + }) + ui_dispatch_input_release(opts.ui_dispatch_input_release); + // performant dispatch for gradio's range slider and input number fields + /* function ui_performant_gradio_input_components(sel){ let selectors = sel.split(","); - selectors.push("#quicksettings_overflow_container");//, "#tab_txt2img", "#tab_img2img", "#tab_extras", "#tab_modelmerger", "#tab_ti"); + selectors.push("#quicksettings_overflow_container", "#tab_txt2img", "#tab_img2img", "#tab_extras", "#tab_modelmerger", "#tab_ti"); selectors = selectors.filter(e => e); for (let i = 0; i < selectors.length; i++) { selectors[i] = selectors[i]+" input[type='number']"; @@ -927,20 +1010,21 @@ onUiUpdate(function(){ clone_num.id = "num_clone_"+index; clone_num.value = elem.value; parent.append(clone_num); - elem.classList.add("hidden"); + //elem.classList.add("hidden"); clone_num.addEventListener('change', function (e) { elem.value = clone_num.value; updateInput(elem); - }) + }) + if(label){ let comp_range = parent.parentElement.parentElement.querySelector("input[type='range']"); let clone_range = comp_range.cloneNode(true); clone_range.id = comp_range.id+"_clone"; clone_range.value = comp_range.value; comp_range.parentElement.append(clone_range); - comp_range.classList.add("hidden"); + //comp_range.classList.add("hidden"); clone_range.addEventListener('input', function (e) { clone_num.value = e.target.value; @@ -955,8 +1039,9 @@ onUiUpdate(function(){ } }) - } - ui_performant_gradio_input_components(opts.ui_performant_gradio_input_components); + } + */ + //ui_performant_gradio_input_components(opts.ui_performant_gradio_input_components); // step ticks for performant input range function ui_show_range_ticks(value, interactive){ @@ -1040,14 +1125,16 @@ onUiUpdate(function(){ }) - function update_performant_inputs(tab){ + + function update_input_fields(tab){ + /* let input_selectors = "#tab_"+ tab + " [id^='num_clone']:is(input[type='number'])"; - //console.log(input_selectors); gradioApp().querySelectorAll(input_selectors).forEach(function (elem){ let elem_source = elem.previousElementSibling; elem.value = elem_source.value; updateInput(elem); - }) + }) + */ remove_overrides(); autoGrowPromptTextarea(); } @@ -1060,7 +1147,7 @@ onUiUpdate(function(){ }else{ button_id = e.target.id.split("_")[0]; } - setTimeout(function() { update_performant_inputs(button_id); }, 500); + setTimeout(function() { update_input_fields(button_id); }, 500); }) }) @@ -1083,8 +1170,6 @@ onUiUpdate(function(){ pnginfo.querySelector('#img2img_tab').click(); } - - //setTimeout(function() { update_performant_inputs(button_id.split("_")[0]); }, 100); } function fetchPngInfoData(files){ @@ -1300,8 +1385,7 @@ let token_timeouts = {}; function update_txt2img_tokens(...args) { update_token_counter("txt2img_token_button") - //setTimeout(function() { update_performant_inputs("txt2img"); }, 500); - console.log("update_txt2img_tokens"); + //console.log("update_txt2img_tokens"); if (args.length == 2) return args[0] return args; @@ -1309,8 +1393,7 @@ function update_txt2img_tokens(...args) { function update_img2img_tokens(...args) { update_token_counter("img2img_token_button") - console.log("update_img2img_tokens"); - //setTimeout(function() { update_performant_inputs("img2img"); }, 500); + //console.log("update_img2img_tokens"); if (args.length == 2) return args[0] return args; diff --git a/modules/shared.py b/modules/shared.py index c5ed7e4e..677f35bd 100644 --- a/modules/shared.py +++ b/modules/shared.py @@ -482,9 +482,10 @@ options_templates.update(options_section(('ui', "User interface"), { "ui_header_tabs": OptionInfo("", "Header Tabs"), "ui_views_order": OptionInfo("row-reverse", "Interface order input/parameters | output/preview", gr.Radio, {"choices": ["row", "row-reverse"]}), "ui_extra_networks_tab_reorder": OptionInfo("", "Extra networks tab order"), - "ui_performant_gradio_input_components": OptionInfo("", "Performant gradio components is enabled for all main tabs and scripts. Use css selectors only for extensions that have their own tab"), + #"ui_performant_gradio_input_components": OptionInfo("", "Performant gradio components is enabled for all main tabs and scripts. Use css selectors only for extensions that have their own tab"), "ui_output_image_fit": OptionInfo("Scale-down", "Generated image fit method", gr.Radio, {"choices": ["Scale-down", "Contain"]}), "ui_show_range_ticks": OptionInfo(True, "Show ticks for range sliders"), + "ui_dispatch_input_release": OptionInfo(True, "Dispatch event change on release, for slider and input number components"), "localization": OptionInfo("None", "Localization (requires restart)", gr.Dropdown, lambda: {"choices": ["None"] + list(localization.localizations.keys())}, refresh=lambda: localization.list_localizations(cmd_opts.localizations_dir)), }))