diff --git a/html/extra-networks-btn-copy-path.html b/html/extra-networks-btn-copy-path.html index 2ab57ca36..57870d052 100644 --- a/html/extra-networks-btn-copy-path.html +++ b/html/extra-networks-btn-copy-path.html @@ -1,5 +1,2 @@ -
-
\ No newline at end of file +
+
diff --git a/html/extra-networks-btn-dirs-view-item.html b/html/extra-networks-btn-dirs-view-item.html index 7146a542d..8d3c36e69 100644 --- a/html/extra-networks-btn-dirs-view-item.html +++ b/html/extra-networks-btn-dirs-view-item.html @@ -1,6 +1,2 @@ - + diff --git a/html/extra-networks-btn-edit-metadata.html b/html/extra-networks-btn-edit-metadata.html index 84852b3fb..fcddeb5a0 100644 --- a/html/extra-networks-btn-edit-metadata.html +++ b/html/extra-networks-btn-edit-metadata.html @@ -1,4 +1 @@ -
-
\ No newline at end of file +
diff --git a/html/extra-networks-btn-show-metadata.html b/html/extra-networks-btn-show-metadata.html index f12e7eb3a..ce7d58f5e 100644 --- a/html/extra-networks-btn-show-metadata.html +++ b/html/extra-networks-btn-show-metadata.html @@ -1,4 +1 @@ -
-
\ No newline at end of file +
diff --git a/html/extra-networks-card.html b/html/extra-networks-card.html index b306316df..89898ed30 100644 --- a/html/extra-networks-card.html +++ b/html/extra-networks-card.html @@ -1,8 +1,8 @@ -
- {background_image} +
+ {background_image} {button_row} -
- {name} - {description} -
+
+ {name} + {description} +
diff --git a/html/extra-networks-pane.html b/html/extra-networks-pane.html index 20652c1c6..700979b94 100644 --- a/html/extra-networks-pane.html +++ b/html/extra-networks-pane.html @@ -1,4 +1,5 @@ -
+
diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js index 72b8b30f4..7a2d34dfe 100644 --- a/javascript/extraNetworks.js +++ b/javascript/extraNetworks.js @@ -859,85 +859,83 @@ async function extraNetworksTabSelected(tabname_full, show_prompt, show_neg_prom } } -function extraNetworksBtnDirsViewItemOnClick(event, tabname_full) { +function extraNetworksBtnDirsViewItemOnClick(event) { /** Handles `onclick` events for buttons in the directory view. */ - const tab = extra_networks_tabs[tabname_full]; + const btn = event.target.closest(".extra-network-dirs-view-button"); + const pane = btn.closest(".extra-network-pane"); + const tab = extra_networks_tabs[pane.dataset.tabnameFull]; - if ("selected" in event.target.dataset) { - tab.setDirectoryButtons(event.target, false); + if ("selected" in btn.dataset) { + tab.setDirectoryButtons(btn, false); } else { - tab.setDirectoryButtons(event.target, true); + tab.setDirectoryButtons(btn, true); + } +} + +function extraNetworksControlSearchClearOnClick(event) { + /** Dispatches custom event when the `clear` button in a search input is clicked. */ + const btn = event.target.closest(".extra-network-control--search-clear"); + const controls = btn.closest(".extra-network-controls"); + extra_networks_tabs[controls.dataset.tabnameFull].updateSearch(""); +} + +function extraNetworksControlSortModeOnClick(event) { + /** Handles `onclick` events for Sort Mode buttons. */ + const btn = event.target.closest(".extra-network-control--sort-mode"); + // No operation if button is already selected. + if ("selected" in btn.dataset) { + return; } - - - event.stopPropagation(); -} - -function extraNetworksControlSearchClearOnClick(event, tabname_full) { - /** Dispatches custom event when the `clear` button in a search input is clicked. */ - const txt_search_elem = extra_networks_tabs[tabname_full].txt_search_elem; - txt_search_elem.value = ""; - txt_search_elem.dispatchEvent( - new CustomEvent( - "extra-network-control--search-clear", - {bubbles: true, detail: {tabname_full: tabname_full}}, - ) - ); - - event.stopPropagation(); -} - -function extraNetworksControlSortModeOnClick(event, tabname_full) { - /** Handles `onclick` events for Sort Mode buttons. */ - const tab = extra_networks_tabs[tabname_full]; + const controls = btn.closest(".extra-network-controls"); + const tab = extra_networks_tabs[controls.dataset.tabnameFull]; tab.controls_elem.querySelectorAll(".extra-network-control--sort-mode").forEach(elem => { delete elem.dataset.selected; }); - event.currentTarget.dataset.selected = ""; + btn.dataset.selected = ""; - const sort_mode_str = event.currentTarget.dataset.sortMode.toLowerCase(); + const sort_mode_str = btn.dataset.sortMode.toLowerCase(); tab.setSortMode(sort_mode_str); - - event.stopPropagation(); } -function extraNetworksControlSortDirOnClick(event, tabname_full) { +function extraNetworksControlSortDirOnClick(event) { /** Handles `onclick` events for the Sort Direction button. * * Modifies the data attributes of the Sort Direction button to cycle between * ascending and descending sort directions. */ - const tab = extra_networks_tabs[tabname_full]; + const btn = event.target.closest(".extra-network-control--sort-dir"); + const controls = btn.closest(".extra-network-controls"); + const tab = extra_networks_tabs[controls.dataset.tabnameFull]; - const curr_sort_dir_str = event.currentTarget.dataset.sortDir.toLowerCase(); + const curr_sort_dir_str = btn.dataset.sortDir.toLowerCase(); if (!["ascending", "descending"].includes(curr_sort_dir_str)) { console.error(`Invalid sort_dir_str: ${curr_sort_dir_str}`); return; } let sort_dir_str = curr_sort_dir_str === "ascending" ? "descending" : "ascending"; - event.currentTarget.dataset.sortDir = sort_dir_str; - event.currentTarget.setAttribute("title", `Sort ${sort_dir_str}`); + btn.dataset.sortDir = sort_dir_str; + btn.setAttribute("title", `Sort ${sort_dir_str}`); tab.setSortDir(sort_dir_str); - - event.stopPropagation(); } -function extraNetworksControlTreeViewOnClick(event, tabname_full) { +function extraNetworksControlTreeViewOnClick(event) { /** Handles `onclick` events for the Tree View button. * * Toggles the tree view in the extra networks pane. */ - const show = !("selected" in event.currentTarget.dataset); - const tab = extra_networks_tabs[tabname_full]; - if ("selected" in event.currentTarget.dataset) { - delete event.currentTarget.dataset.selected; + const btn = event.target.closest(".extra-network-control--tree-view"); + const controls = btn.closest(".extra-network-controls"); + const tab = extra_networks_tabs[controls.dataset.tabnameFull]; + const show = !("selected" in btn.dataset); + if ("selected" in btn.dataset) { + delete btn.dataset.selected; } else { - event.currentTarget.dataset.selected = ""; + btn.dataset.selected = ""; } if (!show) { @@ -960,21 +958,21 @@ function extraNetworksControlTreeViewOnClick(event, tabname_full) { resize_handle_row.classList.toggle("resize-handle-hidden", !show); tab.setDirectoryButtons(); - - event.stopPropagation(); } -function extraNetworksControlDirsViewOnClick(event, tabname_full) { +function extraNetworksControlDirsViewOnClick(event) { /** Handles `onclick` events for the Dirs View button. * * Toggles the directory view in the extra networks pane. */ - const tab = extra_networks_tabs[tabname_full]; - const show = !("selected" in event.currentTarget.dataset); + const btn = event.target.closest(".extra-network-control--dirs-view"); + const controls = btn.closest(".extra-network-controls"); + const tab = extra_networks_tabs[controls.dataset.tabnameFull]; + const show = !("selected" in btn.dataset); if (show) { - event.currentTarget.dataset.selected = ""; + btn.dataset.selected = ""; } else { - delete event.currentTarget.dataset.selected; + delete btn.dataset.selected; } if (!show) { @@ -991,11 +989,9 @@ function extraNetworksControlDirsViewOnClick(event, tabname_full) { ).classList.toggle("hidden", !show); tab.setDirectoryButtons(); - - event.stopPropagation(); } -function extraNetworksControlRefreshOnClick(event, tabname_full) { +function extraNetworksControlRefreshOnClick(event) { /** Handles `onclick` events for the Refresh Page button. * * In order to actually call the python functions in `ui_extra_networks.py` @@ -1003,81 +999,155 @@ function extraNetworksControlRefreshOnClick(event, tabname_full) { * event handler that refreshes the page. So what this function here does * is it manually raises a `click` event on that button. */ - event.stopPropagation(); - clearTimeout(extra_networks_refresh_internal_debounce_timer); extra_networks_refresh_internal_debounce_timer = setTimeout(async() => { - const tab = extra_networks_tabs[tabname_full]; + const btn = event.target.closest(".extra-network-control--refresh"); + const controls = btn.closest(".extra-network-controls"); + const tab = extra_networks_tabs[controls.dataset.tabnameFull]; // We want to reset tab lists on refresh click so that the viewing area // shows that it is loading new data. tab.tree_list.clear(); tab.cards_list.clear(); // Fire an event for this button click. - gradioApp().getElementById(`${tabname_full}_extra_refresh_internal`).dispatchEvent(new Event("click")); + gradioApp().getElementById( + `${controls.dataset.tabnameFull}_extra_refresh_internal` + ).dispatchEvent(new Event("click")); }, EXTRA_NETWORKS_REFRESH_INTERNAL_DEBOUNCE_TIMEOUT_MS); } -function extraNetworksCardOnClick(event, tabname_full) { - const elem = event.currentTarget; - const tab = extra_networks_tabs[tabname_full]; - if ("negPrompt" in elem.dataset) { - extraNetworksUpdatePrompt(tab.txt_prompt_elem, elem.dataset.prompt); - extraNetworksUpdatePrompt(tab.txt_neg_prompt_elem, elem.dataset.negPrompt); - } else if ("allowNeg" in elem.dataset) { - extraNetworksUpdatePrompt(tab.active_prompt_elem, elem.dataset.prompt); +function extraNetworksSelectModel(tab, opts = {prompt, neg_prompt, allow_neg, checkpoint_name}) { + if (opts.checkpoint_name) { + selectCheckpoint(opts.checkpoint_name); + } else if (opts.neg_prompt) { + extraNetworksUpdatePrompt(tab.txt_prompt_elem, opts.prompt); + extraNetworksUpdatePrompt(tab.txt_neg_prompt_elem, opts.neg_prompt); + } else if (opts.allow_neg) { + extraNetworksUpdatePrompt(tab.active_prompt_elem, opts.prompt); } else { - extraNetworksUpdatePrompt(tab.txt_prompt_elem, elem.dataset.prompt); - } - - event.stopPropagation(); -} - -function extraNetworksTreeFileOnClick(event, btn, tabname_full) { - return; -} - -async function extraNetworksTreeDirectoryOnClick(event, btn, tabname_full) { - const div_id = btn.dataset.divId; - const tab = extra_networks_tabs[tabname_full]; - - if (event.target.matches(".tree-list-item-action--leading .tree-list-item-action-chevron")) { - await tab.tree_list.onRowExpandClick(div_id, btn); - tab.setDirectoryButtons(); - } else if (event.target.matches(".tree-list-item-action--trailing .tree-list-item-action-expand")) { - await tab.tree_list.onExpandAllClick(div_id); - tab.setDirectoryButtons(); - } else if (event.target.matches(".tree-list-item-action--trailing .tree-list-item-action-collapse")) { - await tab.tree_list.onCollapseAllClick(div_id); - tab.setDirectoryButtons(); - } else { - // No action items were clicked. Select the row. - await tab.tree_list.onRowSelected(div_id, btn); - tab.setDirectoryButtons(btn); + extraNetworksUpdatePrompt(tab.txt_prompt_elem, opts.prompt); } } -function extraNetworksTreeOnClick(event, tabname_full) { - const btn = event.target.closest(".tree-list-item"); - if (!isElementLogError(btn)) { +function extraNetworksCardOnClick(event) { + // Do not select the card if its child button-row is the target of the event. + if (event.target.closest(".button-row")) { return; } - if (btn.dataset.treeEntryType === "file") { - extraNetworksTreeFileOnClick(event, btn, tabname_full); - } else { - extraNetworksTreeDirectoryOnClick(event, btn, tabname_full); + const btn = event.target.closest(".card"); + const pane = btn.closest(".extra-network-pane"); + const tab = extra_networks_tabs[pane.dataset.tabnameFull]; + + let checkpoint_name; + if ("isCheckpoint" in btn.dataset) { + checkpoint_name = btn.dataset.name; + } + extraNetworksSelectModel(tab, { + prompt: btn.dataset.prompt, + neg_prompt: btn.dataset.negPrompt, + allow_neg: btn.dataset.allowNeg, + checkpoint_name: checkpoint_name, + }); +} + +function extraNetworksTreeFileOnClick(event) { + // Do not select the row if its child button-row is the target of the event. + if (event.target.closest(".tree-list-item-action")) { + return; } - event.stopPropagation(); + const btn = event.target.closest(".tree-list-item"); + const pane = btn.closest(".extra-network-pane"); + const tab = extra_networks_tabs[pane.dataset.tabnameFull]; + + + let checkpoint_name; + if ("isCheckpoint" in btn.dataset) { + checkpoint_name = btn.dataset.name; + } + extraNetworksSelectModel(tab, { + prompt: btn.dataset.prompt, + neg_prompt: btn.dataset.negPrompt, + allow_neg: btn.dataset.allowNeg, + checkpoint_name: checkpoint_name, + }); } -function extraNetworksBtnShowMetadataOnClick(event, extra_networks_tabname, card_name) { - extraNetworksFetchMetadata(extra_networks_tabname, card_name); - event.stopPropagation(); +async function extraNetworksTreeDirectoryOnClick(event) { + // Do not select the row if its child button-row is the target of the event. + if (event.target.closest(".tree-list-item-action")) { + return; + } + const btn = event.target.closest(".tree-list-item"); + const pane = btn.closest(".extra-network-pane"); + const div_id = btn.dataset.divId; + const tab = extra_networks_tabs[pane.dataset.tabnameFull]; + + await tab.tree_list.onRowSelected(div_id, btn); + tab.setDirectoryButtons(btn); } -function extraNetworksBtnEditMetadataOnClick(event, tabname_full, card_name) { - const id = `${tabname_full}_edit_user_metadata`; +async function extraNetworksBtnTreeViewChevronOnClick(event) { + // stopPropagation so we don't also trigger event on parent since this btn is nested. + event.stopPropagation(); + const btn = event.target.closest(".tree-list-item-action-chevron"); + const row = event.target.closest(".tree-list-item"); + const pane = btn.closest(".extra-network-pane"); + const div_id = row.dataset.divId; + const tab = extra_networks_tabs[pane.dataset.tabnameFull]; + + await tab.tree_list.onRowExpandClick(div_id, btn); + tab.setDirectoryButtons(); +} + +async function extraNetworksBtnTreeViewExpandOnClick(event) { + // stopPropagation so we don't also trigger event on parent since this btn is nested. + event.stopPropagation(); + const btn = event.target.closest(".tree-list-item-action-expand"); + const row = event.target.closest(".tree-list-item"); + const pane = btn.closest(".extra-network-pane"); + const div_id = row.dataset.divId; + const tab = extra_networks_tabs[pane.dataset.tabnameFull]; + + await tab.tree_list.onExpandAllClick(div_id); + tab.setDirectoryButtons(); +} + +async function extraNetworksBtnTreeViewCollapseOnClick(event) { + // stopPropagation so we don't also trigger event on parent since this btn is nested. + event.stopPropagation(); + const btn = event.target.closest(".tree-list-item-action-collapse"); + const row = event.target.closest(".tree-list-item"); + const pane = btn.closest(".extra-network-pane"); + const div_id = row.dataset.divId; + const tab = extra_networks_tabs[pane.dataset.tabnameFull]; + + await tab.tree_list.onCollapseAllClick(div_id); + tab.setDirectoryButtons(); +} + +function extraNetworksBtnShowMetadataOnClick(event) { + // stopPropagation so we don't also trigger event on parent since this btn is nested. + event.stopPropagation(); + const btn = event.target.closest(".metadata-button"); + const pane = btn.closest(".extra-network-pane"); + let parent = btn.closest(".card"); + if (!parent) { + parent = btn.closest(".tree-list-item"); + } + extraNetworksFetchMetadata(pane.dataset.extraNetworksTabname, parent.dataset.name); +} + +function extraNetworksBtnEditMetadataOnClick(event) { + // stopPropagation so we don't also trigger event on parent since this btn is nested. + event.stopPropagation(); + const btn = event.target.closest(".edit-button"); + const pane = btn.closest(".extra-network-pane"); + let parent = btn.closest(".card"); + if (!parent) { + parent = btn.closest(".tree-list-item"); + } + const id = `${pane.dataset.tabnameFull}_edit_user_metadata`; let editor = extraPageUserMetadataEditors[id]; if (isNullOrUndefined(editor)) { editor = {}; @@ -1087,19 +1157,19 @@ function extraNetworksBtnEditMetadataOnClick(event, tabname_full, card_name) { extraPageUserMetadataEditors[id] = editor; } - editor.nameTextarea.value = card_name; + editor.nameTextarea.value = parent.dataset.name; updateInput(editor.nameTextarea); editor.button.click(); popup(editor.page); - - event.stopPropagation(); } function extraNetworksBtnCopyPathOnClick(event) { - copyToClipboard(event.target.dataset.clipboardText); + // stopPropagation so we don't also trigger event on parent since this btn is nested. event.stopPropagation(); + const btn = event.target.closest(".copy-path-button"); + copyToClipboard(btn.dataset.clipboardText); } // ==== MAIN SETUP ==== @@ -1120,12 +1190,6 @@ function extraNetworksSetupEventDelegators() { extra_networks_tabs[pane.dataset.tabnameFull].autoSetTreeWidth(); }); - // Update search filter whenever the search input's clear button is pressed. - window.addEventListener("extra-network-control--search-clear", event => { - event.stopPropagation(); - extra_networks_tabs[event.detail.tabname_full].applyFilter(); - }); - // Debounce search text input. This way we only search after user is done typing. const search_input_debounce = _debounce(tabname_full => { extra_networks_tabs[tabname_full].applyFilter(); @@ -1147,6 +1211,33 @@ function extraNetworksSetupEventDelegators() { closePopup(); } }); + + const click_event_map = { + ".tree-list-item--dir": extraNetworksTreeDirectoryOnClick, + ".tree-list-item--file": extraNetworksTreeFileOnClick, + ".card": extraNetworksCardOnClick, + ".extra-network-dirs-view-button": extraNetworksBtnDirsViewItemOnClick, + ".copy-path-button": extraNetworksBtnCopyPathOnClick, + ".edit-button": extraNetworksBtnEditMetadataOnClick, + ".metadata-button": extraNetworksBtnShowMetadataOnClick, + ".tree-list-item-action-chevron": extraNetworksBtnTreeViewChevronOnClick, + ".tree-list-item-action-expand": extraNetworksBtnTreeViewExpandOnClick, + ".tree-list-item-action-collapse": extraNetworksBtnTreeViewCollapseOnClick, + ".extra-network-control--search-clear": extraNetworksControlSearchClearOnClick, + ".extra-network-control--sort-mode": extraNetworksControlSortModeOnClick, + ".extra-network-control--sort-dir": extraNetworksControlSortDirOnClick, + ".extra-network-control--dirs-view": extraNetworksControlDirsViewOnClick, + ".extra-network-control--tree-view": extraNetworksControlTreeViewOnClick, + ".extra-network-control--refresh": extraNetworksControlRefreshOnClick, + }; + + window.addEventListener("click", event => { + for (const [selector, handler] of Object.entries(click_event_map)) { + if (event.target.closest(selector)) { + handler(event); + } + } + }) } async function extraNetworksSetupTab(tabname) { diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py index 677cd5252..5f55ce4b7 100644 --- a/modules/ui_extra_networks.py +++ b/modules/ui_extra_networks.py @@ -285,7 +285,6 @@ class ExtraNetworksPage: data_attributes: Optional[dict] = None, dir_is_empty: bool = False, item: Optional[dict] = None, - onclick_extra: Optional[str] = None, ) -> str: """Generates HTML for a single row of the Tree View @@ -305,8 +304,6 @@ class ExtraNetworksPage: Whether the directory is empty. Only useful if btn_type=="dir". item: Dictionary containing item data such as filename, hash, etc. - onclick_extra: - Additional javascript code to add to the row's `onclick` attribute. """ if btn_type not in ["file", "dir"]: raise ValueError("Invalid button type:", btn_type) @@ -355,7 +352,6 @@ class ExtraNetworksPage: "btn_type": btn_type, "btn_title": btn_title, "tabname": tabname, - "onclick_extra": onclick_extra if onclick_extra else "", "extra_networks_tabname": self.extra_networks_tabname, "action_list_item_action_leading": action_list_item_action_leading, "action_list_item_visual_leading": action_list_item_visual_leading, @@ -423,10 +419,6 @@ class ExtraNetworksPage: if preview: background_image = f'' - onclick = item.get("onclick", None) - if onclick is None: - onclick = html.escape(f"extraNetworksCardOnClick(event, '{tabname}_{self.extra_networks_tabname}');") - button_row = self.get_button_row(tabname, item) filename = os.path.normpath(item.get("filename", "")) @@ -465,6 +457,9 @@ class ExtraNetworksPage: "data-allow-neg": self.allow_negative_prompt, } + if self.__class__.__name__ == "ExtraNetworksPageCheckpoints": + data_attributes["data-is-checkpoint"] = True + data_attributes_str = "" for k, v in data_attributes.items(): if isinstance(v, (bool,)): @@ -476,7 +471,6 @@ class ExtraNetworksPage: return self.card_tpl.format( style=style, - onclick=onclick, data_attributes=data_attributes_str, background_image=background_image, button_row=button_row, @@ -635,30 +629,29 @@ class ExtraNetworksPage: # Don't add file if files are disabled in the options. continue - onclick = node.item.get("onclick", None) - if onclick is None: - onclick = html.escape(f"extraNetworksCardOnClick(event, '{tabname}_{self.extra_networks_tabname}');") - item_name = node.item.get("name", "").strip() data_path = os.path.normpath(node.item.get("filename", "").strip()) + data_attributes = { + "data-div-id": f'"{node.id}"', + "data-parent-id": f'"{parent_id}"', + "data-tree-entry-type": "file", + "data-name": f'"{item_name}"', + "data-depth": node.depth, + "data-path": f'"{data_path}"', + "data-hash": node.item.get("shorthash", None), + "data-prompt": node.item.get("prompt", "").strip(), + "data-neg-prompt": node.item.get("negative_prompt", "").strip(), + "data-allow-neg": self.allow_negative_prompt, + } + if self.__class__.__name__ == "ExtraNetworksPageCheckpoints": + data_attributes["data-is-checkpoint"] = True + tree_item.html = self.build_tree_html_row( tabname=tabname, label=html.escape(item_name), btn_type="file", - data_attributes={ - "data-div-id": f'"{node.id}"', - "data-parent-id": f'"{parent_id}"', - "data-tree-entry-type": "file", - "data-name": f'"{item_name}"', - "data-depth": node.depth, - "data-path": f'"{data_path}"', - "data-hash": node.item.get("shorthash", None), - "data-prompt": node.item.get("prompt", "").strip(), - "data-neg-prompt": node.item.get("negative_prompt", "").strip(), - "data-allow-neg": self.allow_negative_prompt, - }, + data_attributes=data_attributes, item=node.item, - onclick_extra=onclick, ) self.tree[node.id] = tree_item diff --git a/modules/ui_extra_networks_checkpoints.py b/modules/ui_extra_networks_checkpoints.py index f4ae88d77..682828813 100644 --- a/modules/ui_extra_networks_checkpoints.py +++ b/modules/ui_extra_networks_checkpoints.py @@ -31,7 +31,6 @@ class ExtraNetworksPageCheckpoints(ui_extra_networks.ExtraNetworksPage): "preview": self.find_preview(path), "description": self.find_description(path), "search_terms": search_terms, - "onclick": html.escape(f"return selectCheckpoint({ui_extra_networks.quote_js(name)})"), "local_preview": f"{path}.{shared.opts.samples_format}", "metadata": checkpoint.metadata, "sort_keys": {'default': index, **self.get_sort_keys(checkpoint.filename)},