From 44bce3c74ee745b9776d965e02ae006e6b4fe3fb Mon Sep 17 00:00:00 2001 From: Andray Date: Tue, 27 Feb 2024 18:31:36 +0400 Subject: [PATCH 1/5] resize handle for extra networks --- html/extra-networks-pane.html | 6 +++--- javascript/extraNetworks.js | 19 ++++++++++++++++++- javascript/resizeHandle.js | 22 +++++++++++++++++++--- modules/shared_options.py | 1 + modules/ui_extra_networks.py | 9 ++++++++- style.css | 3 ++- 6 files changed, 51 insertions(+), 9 deletions(-) diff --git a/html/extra-networks-pane.html b/html/extra-networks-pane.html index 0c763f710..f54344aaa 100644 --- a/html/extra-networks-pane.html +++ b/html/extra-networks-pane.html @@ -44,11 +44,11 @@ -
-
+
+
{tree_html}
-
+
{items_html}
diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js index d5855fe96..ff808d7aa 100644 --- a/javascript/extraNetworks.js +++ b/javascript/extraNetworks.js @@ -447,7 +447,24 @@ function extraNetworksControlTreeViewOnClick(event, tabname, extra_networks_tabn * @param tabname The name of the active tab in the sd webui. Ex: txt2img, img2img, etc. * @param extra_networks_tabname The id of the active extraNetworks tab. Ex: lora, checkpoints, etc. */ - gradioApp().getElementById(tabname + "_" + extra_networks_tabname + "_tree").classList.toggle("hidden"); + const tree = gradioApp().getElementById(tabname + "_" + extra_networks_tabname + "_tree"); + const parent = tree.parentElement; + let resizeHandle = parent.querySelector('.resize-handle'); + tree.classList.toggle("hidden"); + + if (tree.classList.contains("hidden")){ + tree.style.display = 'none'; + resizeHandle.style.display = 'none'; + parent.style.display = 'flex'; + } else { + tree.style.display = 'block'; + if (!resizeHandle) { + setupResizeHandle(parent); + resizeHandle = parent.querySelector('.resize-handle'); + } + resizeHandle.style.display = 'block'; + parent.style.display = 'grid'; + } event.currentTarget.classList.toggle("extra-network-control--enabled"); } diff --git a/javascript/resizeHandle.js b/javascript/resizeHandle.js index 6560372cc..5fb5dd4f3 100644 --- a/javascript/resizeHandle.js +++ b/javascript/resizeHandle.js @@ -39,7 +39,7 @@ const ratio = newParentWidth / oldParentWidth; - const newWidthL = Math.max(Math.floor(ratio * widthL), GRADIO_MIN_WIDTH); + const newWidthL = Math.max(Math.floor(ratio * widthL), parent.minLeftColWidth); setLeftColGridTemplate(parent, newWidthL); R.parentWidth = newParentWidth; @@ -54,7 +54,15 @@ parent.style.display = 'grid'; parent.style.gap = '0'; - const gridTemplateColumns = `${parent.children[0].style.flexGrow}fr ${PAD}px ${parent.children[1].style.flexGrow}fr`; + let leftColTemplate = ""; + if (parent.children[0].style.flexGrow) { + leftColTemplate = `${parent.children[0].style.flexGrow}fr`; + parent.minLeftColWidth = GRADIO_MIN_WIDTH; + } else { + leftColTemplate = parent.children[0].style.flexBasis; + parent.minLeftColWidth = parent.children[0].style.flexBasis.slice(0, -2); + } + const gridTemplateColumns = `${leftColTemplate} ${PAD}px ${parent.children[1].style.flexGrow}fr`; parent.style.gridTemplateColumns = gridTemplateColumns; parent.style.originalGridTemplateColumns = gridTemplateColumns; @@ -119,7 +127,7 @@ } else { delta = R.screenX - evt.changedTouches[0].screenX; } - const leftColWidth = Math.max(Math.min(R.leftColStartWidth - delta, R.parent.offsetWidth - GRADIO_MIN_WIDTH - PAD), GRADIO_MIN_WIDTH); + const leftColWidth = Math.max(Math.min(R.leftColStartWidth - delta, R.parent.offsetWidth - GRADIO_MIN_WIDTH - PAD), R.parent.minLeftColWidth); setLeftColGridTemplate(R.parent, leftColWidth); } }); @@ -165,3 +173,11 @@ onUiLoaded(function() { } } }); + +function setupExtraNetworksResizeHandle() { + for (var elem of document.body.querySelectorAll('.resize-handle-row')) { + if (!elem.querySelector('.resize-handle') && !elem.children[0].classList.contains("hidden")) { + setupResizeHandle(elem); + } + } +} \ No newline at end of file diff --git a/modules/shared_options.py b/modules/shared_options.py index 64f8f1967..285c54158 100644 --- a/modules/shared_options.py +++ b/modules/shared_options.py @@ -258,6 +258,7 @@ options_templates.update(options_section(('extra_networks', "Extra Networks", "s "extra_networks_card_order_field": OptionInfo("Path", "Default order field for Extra Networks cards", gr.Dropdown, {"choices": ['Path', 'Name', 'Date Created', 'Date Modified']}).needs_reload_ui(), "extra_networks_card_order": OptionInfo("Ascending", "Default order for Extra Networks cards", gr.Dropdown, {"choices": ['Ascending', 'Descending']}).needs_reload_ui(), "extra_networks_tree_view_default_enabled": OptionInfo(False, "Enables the Extra Networks directory tree view by default").needs_reload_ui(), + "extra_networks_tree_view_min_width": OptionInfo(180, "Minimal width for the Extra Networks directory tree view", gr.Number).needs_reload_ui(), "extra_networks_add_text_separator": OptionInfo(" ", "Extra networks separator").info("extra text to add before <...> when adding extra network to prompt"), "ui_extra_networks_tab_reorder": OptionInfo("", "Extra networks tab order").needs_reload_ui(), "textual_inversion_print_at_load": OptionInfo(False, "Print a list of Textual Inversion embeddings when loading model"), diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py index 34c46ed40..09705a98c 100644 --- a/modules/ui_extra_networks.py +++ b/modules/ui_extra_networks.py @@ -531,9 +531,13 @@ class ExtraNetworksPage: data_sortkey = f"{data_sortmode}-{data_sortdir}-{len(self.items)}" tree_view_btn_extra_class = "" tree_view_div_extra_class = "hidden" + tree_view_div_default_display = "none" + extra_network_pane_content_default_display = "flex" if shared.opts.extra_networks_tree_view_default_enabled: tree_view_btn_extra_class = "extra-network-control--enabled" tree_view_div_extra_class = "" + tree_view_div_default_display = "block" + extra_network_pane_content_default_display = "grid" return self.pane_tpl.format( **{ @@ -546,6 +550,9 @@ class ExtraNetworksPage: "tree_view_div_extra_class": tree_view_div_extra_class, "tree_html": self.create_tree_view_html(tabname), "items_html": self.create_card_view_html(tabname, none_message="Loading..." if empty else None), + "extra_networks_tree_view_min_width": shared.opts.extra_networks_tree_view_min_width, + "tree_view_div_default_display": tree_view_div_default_display, + "extra_network_pane_content_default_display": extra_network_pane_content_default_display, } ) @@ -703,7 +710,7 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname): create_html() return ui.pages_contents - interface.load(fn=pages_html, inputs=[], outputs=ui.pages) + interface.load(fn=pages_html, inputs=[], outputs=ui.pages).then(fn=lambda: None, _js='setupExtraNetworksResizeHandle') return ui diff --git a/style.css b/style.css index 8ce78ff0c..004038f89 100644 --- a/style.css +++ b/style.css @@ -1615,9 +1615,10 @@ body.resizing .resize-handle { display: inline-flex; visibility: hidden; color: var(--button-secondary-text-color); - + width: 0; } .extra-network-tree .tree-list-content:hover .button-row { visibility: visible; + width: auto; } From de7604fa77180ac8d51da4f8a59c5a27bbe25cdc Mon Sep 17 00:00:00 2001 From: Andray Date: Tue, 27 Feb 2024 18:38:38 +0400 Subject: [PATCH 2/5] lint --- javascript/extraNetworks.js | 2 +- javascript/resizeHandle.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js index ff808d7aa..4e30261b8 100644 --- a/javascript/extraNetworks.js +++ b/javascript/extraNetworks.js @@ -452,7 +452,7 @@ function extraNetworksControlTreeViewOnClick(event, tabname, extra_networks_tabn let resizeHandle = parent.querySelector('.resize-handle'); tree.classList.toggle("hidden"); - if (tree.classList.contains("hidden")){ + if (tree.classList.contains("hidden")) { tree.style.display = 'none'; resizeHandle.style.display = 'none'; parent.style.display = 'flex'; diff --git a/javascript/resizeHandle.js b/javascript/resizeHandle.js index 5fb5dd4f3..cf2c778bb 100644 --- a/javascript/resizeHandle.js +++ b/javascript/resizeHandle.js @@ -180,4 +180,4 @@ function setupExtraNetworksResizeHandle() { setupResizeHandle(elem); } } -} \ No newline at end of file +} From b4c44e659ba3931d4bee0a0061c674e594cc639f Mon Sep 17 00:00:00 2001 From: Andray Date: Tue, 27 Feb 2024 23:17:52 +0400 Subject: [PATCH 3/5] fix on reload with changed show all loras setting --- javascript/extraNetworks.js | 6 ++++-- javascript/resizeHandle.js | 15 ++++++--------- modules/ui_extra_networks.py | 4 ++-- 3 files changed, 12 insertions(+), 13 deletions(-) diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js index 4e30261b8..1610698bf 100644 --- a/javascript/extraNetworks.js +++ b/javascript/extraNetworks.js @@ -454,16 +454,18 @@ function extraNetworksControlTreeViewOnClick(event, tabname, extra_networks_tabn if (tree.classList.contains("hidden")) { tree.style.display = 'none'; - resizeHandle.style.display = 'none'; parent.style.display = 'flex'; + if (resizeHandle) { + resizeHandle.style.display = 'none'; + } } else { tree.style.display = 'block'; + parent.style.display = 'grid'; if (!resizeHandle) { setupResizeHandle(parent); resizeHandle = parent.querySelector('.resize-handle'); } resizeHandle.style.display = 'block'; - parent.style.display = 'grid'; } event.currentTarget.classList.toggle("extra-network-control--enabled"); } diff --git a/javascript/resizeHandle.js b/javascript/resizeHandle.js index cf2c778bb..94ae4aaa2 100644 --- a/javascript/resizeHandle.js +++ b/javascript/resizeHandle.js @@ -166,18 +166,15 @@ setupResizeHandle = setup; })(); -onUiLoaded(function() { - for (var elem of gradioApp().querySelectorAll('.resize-handle-row')) { - if (!elem.querySelector('.resize-handle')) { - setupResizeHandle(elem); - } - } -}); -function setupExtraNetworksResizeHandle() { - for (var elem of document.body.querySelectorAll('.resize-handle-row')) { +function setupAllResizeHandles() { + for (var elem of gradioApp().querySelectorAll('.resize-handle-row')) { if (!elem.querySelector('.resize-handle') && !elem.children[0].classList.contains("hidden")) { setupResizeHandle(elem); } } } + + +onUiLoaded(setupAllResizeHandles); + diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py index 09705a98c..9d8f8b28b 100644 --- a/modules/ui_extra_networks.py +++ b/modules/ui_extra_networks.py @@ -700,7 +700,7 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname): return ui.pages_contents button_refresh = gr.Button("Refresh", elem_id=f"{tabname}_{page.extra_networks_tabname}_extra_refresh_internal", visible=False) - button_refresh.click(fn=refresh, inputs=[], outputs=ui.pages).then(fn=lambda: None, _js="function(){ " + f"applyExtraNetworkFilter('{tabname}_{page.extra_networks_tabname}');" + " }") + button_refresh.click(fn=refresh, inputs=[], outputs=ui.pages).then(fn=lambda: None, _js="function(){ " + f"applyExtraNetworkFilter('{tabname}_{page.extra_networks_tabname}');" + " }").then(fn=lambda: None, _js='setupAllResizeHandles') def create_html(): ui.pages_contents = [pg.create_html(ui.tabname) for pg in ui.stored_extra_pages] @@ -710,7 +710,7 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname): create_html() return ui.pages_contents - interface.load(fn=pages_html, inputs=[], outputs=ui.pages).then(fn=lambda: None, _js='setupExtraNetworksResizeHandle') + interface.load(fn=pages_html, inputs=[], outputs=ui.pages).then(fn=lambda: None, _js='setupAllResizeHandles') return ui From 51cc1ff2c9d47e66221c7abfb244e4d058c8b279 Mon Sep 17 00:00:00 2001 From: Andray Date: Tue, 27 Feb 2024 23:31:47 +0400 Subject: [PATCH 4/5] fix for mobile and allow collapse right column --- javascript/resizeHandle.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/javascript/resizeHandle.js b/javascript/resizeHandle.js index 94ae4aaa2..4fe9cbdff 100644 --- a/javascript/resizeHandle.js +++ b/javascript/resizeHandle.js @@ -20,6 +20,9 @@ } function displayResizeHandle(parent) { + if (!parent.needHideOnMoblie) { + return true; + } if (window.innerWidth < GRADIO_MIN_WIDTH * 2 + PAD * 4) { parent.style.display = 'flex'; parent.resizeHandle.style.display = "none"; @@ -58,9 +61,13 @@ if (parent.children[0].style.flexGrow) { leftColTemplate = `${parent.children[0].style.flexGrow}fr`; parent.minLeftColWidth = GRADIO_MIN_WIDTH; + parent.minRightColWidth = GRADIO_MIN_WIDTH; + parent.needHideOnMoblie = true; } else { leftColTemplate = parent.children[0].style.flexBasis; parent.minLeftColWidth = parent.children[0].style.flexBasis.slice(0, -2); + parent.minRightColWidth = 0; + parent.needHideOnMoblie = false; } const gridTemplateColumns = `${leftColTemplate} ${PAD}px ${parent.children[1].style.flexGrow}fr`; parent.style.gridTemplateColumns = gridTemplateColumns; @@ -127,7 +134,7 @@ } else { delta = R.screenX - evt.changedTouches[0].screenX; } - const leftColWidth = Math.max(Math.min(R.leftColStartWidth - delta, R.parent.offsetWidth - GRADIO_MIN_WIDTH - PAD), R.parent.minLeftColWidth); + const leftColWidth = Math.max(Math.min(R.leftColStartWidth - delta, R.parent.offsetWidth - R.parent.minRightColWidth - PAD), R.parent.minLeftColWidth); setLeftColGridTemplate(R.parent, leftColWidth); } }); From eb0b84c5643896385ba6dd242c6815b288618355 Mon Sep 17 00:00:00 2001 From: Andray Date: Thu, 29 Feb 2024 16:02:21 +0400 Subject: [PATCH 5/5] make minimal width 2 times smaller then default --- html/extra-networks-pane.html | 2 +- javascript/resizeHandle.js | 2 +- modules/shared_options.py | 2 +- modules/ui_extra_networks.py | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/html/extra-networks-pane.html b/html/extra-networks-pane.html index f54344aaa..02a871086 100644 --- a/html/extra-networks-pane.html +++ b/html/extra-networks-pane.html @@ -45,7 +45,7 @@
-
+
{tree_html}
diff --git a/javascript/resizeHandle.js b/javascript/resizeHandle.js index 4fe9cbdff..513198f53 100644 --- a/javascript/resizeHandle.js +++ b/javascript/resizeHandle.js @@ -65,7 +65,7 @@ parent.needHideOnMoblie = true; } else { leftColTemplate = parent.children[0].style.flexBasis; - parent.minLeftColWidth = parent.children[0].style.flexBasis.slice(0, -2); + parent.minLeftColWidth = parent.children[0].style.flexBasis.slice(0, -2) / 2; parent.minRightColWidth = 0; parent.needHideOnMoblie = false; } diff --git a/modules/shared_options.py b/modules/shared_options.py index 285c54158..aa26588df 100644 --- a/modules/shared_options.py +++ b/modules/shared_options.py @@ -258,7 +258,7 @@ options_templates.update(options_section(('extra_networks', "Extra Networks", "s "extra_networks_card_order_field": OptionInfo("Path", "Default order field for Extra Networks cards", gr.Dropdown, {"choices": ['Path', 'Name', 'Date Created', 'Date Modified']}).needs_reload_ui(), "extra_networks_card_order": OptionInfo("Ascending", "Default order for Extra Networks cards", gr.Dropdown, {"choices": ['Ascending', 'Descending']}).needs_reload_ui(), "extra_networks_tree_view_default_enabled": OptionInfo(False, "Enables the Extra Networks directory tree view by default").needs_reload_ui(), - "extra_networks_tree_view_min_width": OptionInfo(180, "Minimal width for the Extra Networks directory tree view", gr.Number).needs_reload_ui(), + "extra_networks_tree_view_default_width": OptionInfo(180, "Default width for the Extra Networks directory tree view", gr.Number).needs_reload_ui(), "extra_networks_add_text_separator": OptionInfo(" ", "Extra networks separator").info("extra text to add before <...> when adding extra network to prompt"), "ui_extra_networks_tab_reorder": OptionInfo("", "Extra networks tab order").needs_reload_ui(), "textual_inversion_print_at_load": OptionInfo(False, "Print a list of Textual Inversion embeddings when loading model"), diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py index 9d8f8b28b..ad2c23054 100644 --- a/modules/ui_extra_networks.py +++ b/modules/ui_extra_networks.py @@ -550,7 +550,7 @@ class ExtraNetworksPage: "tree_view_div_extra_class": tree_view_div_extra_class, "tree_html": self.create_tree_view_html(tabname), "items_html": self.create_card_view_html(tabname, none_message="Loading..." if empty else None), - "extra_networks_tree_view_min_width": shared.opts.extra_networks_tree_view_min_width, + "extra_networks_tree_view_default_width": shared.opts.extra_networks_tree_view_default_width, "tree_view_div_default_display": tree_view_div_default_display, "extra_network_pane_content_default_display": extra_network_pane_content_default_display, }