Mouse hover can now trigger selection event for extra network previews

Closes #292
DominikDoom · Aug 5, 2024 · 9a47c2e · 9a47c2e
1 parent fe32ad7
commit 9a47c2e
Showing 1 changed file with 27 additions and 3 deletions.
diff --git a/javascript/tagAutocomplete.js b/javascript/tagAutocomplete.js
@@ -819,7 +819,7 @@ function addResultsToList(textArea, results, tagword, resetList) {
         // Check if it's a negative prompt
         let isNegative = textAreaId.includes("n");
 
-        // Add listener
+        // Add click listener
         li.addEventListener("click", (e) => {
             if (e.ctrlKey || e.metaKey) {
                 resetUseCount(result.text, result.type, !isNegative, isNegative);
@@ -828,6 +828,30 @@ function addResultsToList(textArea, results, tagword, resetList) {
                 insertTextAtCursor(textArea, result, tagword);
             }
         });
+        // Add delayed hover listener for extra network previews
+        if (TAC_CFG.showExtraNetworkPreviews && [ResultType.embedding, ResultType.hypernetwork, ResultType.lora, ResultType.lyco].includes(result.type)) {
+            li.addEventListener("mouseover", async () => {
+                const me = this;
+                let hoverTimeout;
+
+                hoverTimeout = setTimeout(async () => {
+                    // If the tag we hover over is already selected, do nothing
+                    if (selectedTag && selectedTag === i) return;
+
+                    oldSelectedTag = selectedTag;
+                    selectedTag = i;
+
+                    // Update selection without scrolling to the item (since we would
+                    // immediately trigger the next scroll as the items move under the cursor)
+                    updateSelectionStyle(textArea, selectedTag, oldSelectedTag, false);
+                }, 400);
+                me.addEventListener("mouseout", () => {
+                    clearTimeout(hoverTimeout);
+                    //resultDiv.querySelector(".sideInfo").style.display = "none";
+                });
+            });
+        }
+
         // Add element to list
         resultsList.appendChild(li);
     }
@@ -840,7 +864,7 @@ function addResultsToList(textArea, results, tagword, resetList) {
     }
 }
 
-async function updateSelectionStyle(textArea, newIndex, oldIndex) {
+async function updateSelectionStyle(textArea, newIndex, oldIndex, scroll = true) {
     let textAreaId = getTextAreaIdentifier(textArea);
     let resultDiv = gradioApp().querySelector('.autocompleteResults' + textAreaId);
     let resultsList = resultDiv.querySelector('ul');
@@ -856,7 +880,7 @@ async function updateSelectionStyle(textArea, newIndex, oldIndex) {
         selected.classList.add('selected');
 
          // Set scrolltop to selected item
-        resultDiv.scrollTop = selected.offsetTop - resultDiv.offsetTop;
+       if (scroll) resultDiv.scrollTop = selected.offsetTop - resultDiv.offsetTop;
     }
 
     // Show preview if enabled and the selected type supports it